<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Coffee on the Keyboard &#187; ui</title>
	<atom:link href="http://coffeeonthekeyboard.com/tag/ui/feed/" rel="self" type="application/rss+xml" />
	<link>http://coffeeonthekeyboard.com</link>
	<description>by James Socol</description>
	<lastBuildDate>Mon, 06 Feb 2012 23:33:42 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
<atom:link rel="hub" href="http://pubsubhubbub.appspot.com"/>		<item>
		<title>Excitement about HTML5: Forms</title>
		<link>http://coffeeonthekeyboard.com/excitement-about-html5-forms-278/</link>
		<comments>http://coffeeonthekeyboard.com/excitement-about-html5-forms-278/#comments</comments>
		<pubDate>Sat, 22 Aug 2009 17:38:50 +0000</pubDate>
		<dc:creator>James</dc:creator>
				<category><![CDATA[Articles]]></category>
		<category><![CDATA[forms]]></category>
		<category><![CDATA[Front-end]]></category>
		<category><![CDATA[html5]]></category>
		<category><![CDATA[ua]]></category>
		<category><![CDATA[ui]]></category>
		<category><![CDATA[ux]]></category>

		<guid isPermaLink="false">http://coffeeonthekeyboard.com/?p=278</guid>
		<description><![CDATA[I shouldn&#8217;t imply that I don&#8217;t like HTML5. I don&#8217;t like certain parts of it—the redundant new elements that add no functionality and are of little use except to A List Apart. But other parts of the spec are very exciting. Forms, in particular, are getting a much-needed facelift. Forms will be able to require [...]]]></description>
			<content:encoded><![CDATA[<p>I shouldn&#8217;t imply that <a href="http://coffeeonthekeyboard.com/reservations-about-html5-271/" title="I don&#8217;t like HTML5">I don&#8217;t like HTML5</a>. I don&#8217;t like certain parts of it—the redundant new elements that add no functionality and are of little use except to <a href="http://www.alistapart.com/">A List Apart</a>. But other parts of the spec are very exciting. <a href="http://www.w3.org/TR/html5/forms.html">Forms</a>, in particular, are getting a much-needed facelift.</p>
<p>Forms will be able to require the user-agent to do <a href="http://www.w3.org/TR/html5/forms.html#constraints">pre-submission validation</a>. Obviously we can&#8217;t rely on this for security reasons, but it will save us from writing JavaScript validation scripts and give users a better experience with our forms.</p>
<p>And the validation is fairly robust. <code>&lt;input/&gt;</code> elements gain an attribute called <code><a href="http://www.w3.org/TR/html5/forms.html#attr-input-pattern">pattern</a></code>, which accepts a simple regular expression, like <code>"[A-E][0-9]{7}"</code>.</p>
<p>But you probably won&#8217;t need the <code>pattern</code> attribute very often, since there is a whole slew of new <a href="http://www.w3.org/TR/html5/forms.html#attr-input-type"><code>type</code>s</a> that the UA will be expected to provide controls for, and validate. Crucial types, like <code>email</code> and <code>url</code>, and <em>difficult</em> types like <code>datetime-local</code> and <code>color</code>.</p>
<p><a href="http://jqueryui.com/">jQuery UI</a> is great, but it doesn&#8217;t compare to this kind of power.</p>
<p>I only realized the sorry state of our current form controls very recently, after getting an iPhone. Built-in form fields on the iPhone can trigger different input methods. A field, like ZIP code, that accepts only numbers, opens the keyboard to the numbers first. A field that wants a URL can open a keyboard with a <code>.com</code> button to save time. But web pages can&#8217;t do this. They can only say that an input accepts arbitrary <code>text</code>.</p>
<p>For mobile or touch-enabled UAs, knowing that you can open a keypad instead of a full keyboard is a great step forward. For everyone, having date and color pickers built into the UA means saving both developers&#8217; and users&#8217; time. Less time to build and less time to download, consistent experience in the UA across web sites.</p>
<p>Forms also get a new event, <a href="http://www.w3.org/TR/html5/forms.html#event-input-input"><code>input</code></a>, which is a little like the current <code>change</code> event, except you don&#8217;t need to wait for the element to lose focus for the event to fire. That&#8217;s just useful.</p>
<p>Controls get new methods, <a href="http://www.w3.org/TR/html5/forms.html#dom-input-stepup"><code>stepUp()</code></a> and <code>stepDown()</code>, to enable, for example, very fast forward/backward selection on a <code>date</code> input.</p>
<p>The last fun addition I&#8217;ll mention (go read the links, they&#8217;re all to the same page) is the <a href="http://www.w3.org/TR/html5/forms.html#resulting-autocompletion-state"><code>autocomplete</code></a> attribute. It doesn&#8217;t do what you hope it does. What it does is specify to the UA that it should not remember and suggest values for this input. It lets the UX designer decide whether to use Firefox or IE&#8217;s built-in autocomplete on a per-field basis. Useful. (Not as useful as, say, an <code>autocompleteUrl</code> attribute that could load some JSON or XML, but still useful.)</p>
<p>Building forms is going to be so, so much better once these are widely support.</p>
]]></content:encoded>
			<wfw:commentRss>http://coffeeonthekeyboard.com/excitement-about-html5-forms-278/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>User Interface: Be Nice!</title>
		<link>http://coffeeonthekeyboard.com/user-interface-be-nice-107/</link>
		<comments>http://coffeeonthekeyboard.com/user-interface-be-nice-107/#comments</comments>
		<pubDate>Thu, 26 Jun 2008 15:31:28 +0000</pubDate>
		<dc:creator>James</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Code]]></category>
		<category><![CDATA[Front-end]]></category>
		<category><![CDATA[interface]]></category>
		<category><![CDATA[messages]]></category>
		<category><![CDATA[spore]]></category>
		<category><![CDATA[ui]]></category>
		<category><![CDATA[ux]]></category>

		<guid isPermaLink="false">http://coffeeonthekeyboard.com/user-interface-be-nice-107/</guid>
		<description><![CDATA[A short post for a busy week. I just downloaded the Spore Creature Creator, and this file showed up on my desktop: 792248d6ad421d577132c2b648bbed45_scc_trial_na.exe. Why not &#8220;Spore Creature Creator Trial Install.exe&#8221;, or, if spaces aren&#8217;t your thing, &#8220;SporeCreatureCreatorTrialInstall.exe&#8221;? Either would be infinitely more meaningful than an MD5 hash followed by an acronym and a region code. [...]]]></description>
			<content:encoded><![CDATA[<p class="note">A short post for a busy week.</p>
<p>I just downloaded the <a href="http://www.spore.com/trial">Spore Creature Creator</a>, and this file showed up on my desktop: <strong>792248d6ad421d577132c2b648bbed45_scc_trial_na.exe</strong>.</p>
<p>Why not &#8220;Spore Creature Creator Trial Install.exe&#8221;, or, if spaces aren&#8217;t your thing, &#8220;SporeCreatureCreatorTrialInstall.exe&#8221;? Either would be infinitely more meaningful than an MD5 hash followed by an acronym and a region code.</p>
<p>While the developers <em>may</em> have had a reason (though I can&#8217;t imagine it&#8217;s a good enough reason) to use this file name, the web team has no excuse.</p>
<p>There&#8217;s a lesson here: be nice to users. Whether it&#8217;s just a file name or <a href="http://www.codinghorror.com/blog/archives/001120.html">helpful error messages</a> or designing a user interface/experience, don&#8217;t treat your users like machines that parse your (bizarre) internal formats.</p>
<p>And Will Wright, if you&#8217;re listening, ask someone to rename that file.</p>
]]></content:encoded>
			<wfw:commentRss>http://coffeeonthekeyboard.com/user-interface-be-nice-107/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

