29 August 2015

HTML5 Autofocus attribute is sweet

Inspired by Steve Krug, I try to only use examples from websites that are generally very good, but could be improved in specific areas.

RightMove-Input-Roadblock

My preferred property search website — since Zoopla hid the View results on map feature god-knows-where — is RightMove (screenshot above). They have used a UX speed bump (not quite a roadblock) to make on-boarding a smooth and focused experience. Using contrasting size and a healthy dollop of whitespace, they draw the user's attention to 1 task and promote the main function of the site above all.

After landing on the homepage, all the user has to do is focus-in on the big input box by clicking (or tapping), enter some geographical keywords and finally hit the "For sale" or "To rent" button. I love this 3 step no-brainer process, great work RightMove!  But what if desktop users didn't even have to do the first click to set the text cursor flashing?

One of my favorite new HTML5 features is the autofocus attribute. It is an empty attribute which basically means it doesn't have to be something equals something (this="that"), it just has to exist as a single word on the tag as follows...

<form>
    <input type="text" autofocus>
</form>

If RightMove added the autofocus keyword to the big input box it would make it focused as soon as the page loads (at least on non-touch-screen devices). Furthermore, the non-intrusive animation of the flashing text cursor would be an enticing draw, subtly inviting the user to start typing and helping promote the theme. No functionality would be lost by adding this and backwards compatibility wouldn't be affected. It's win win!

We (web developers) regularly poke our heads through the HTML5 looking glass to experience a crazy whirlwind adventure of fantastical features. We spend an hour getting drunk on potential only to be violently spat back out into the cold lonely reality of backwards compatibility where HTML5 is not fully supported. But that doesn't mean we shouldn't start adding them as a form of progressive enhancement and earn some bonus brownie points for over-delivering!