Things That Give Me Usability Cramps – Web Forms

Usability Cramps

[yoo-zuh-bill-ity kramps]

  1. n. are unpleasant, often painful sensations caused by unbearable unusable user experience mistakes
  2. v. usability cramping, usability cramped, why the hell did they do this?

Form Labels That Don't Select the Fields

This one mega-stresses me out; when the text label next to checkbox or a label doesn't select it when you click it:

Bad Form Field:

To fix this, just give the input field an ID, and the label a for='inputID':

  1.  
  2. <label for='provingapoint'>Cool Form Field: </label><input type="checkbox" id='provingapoint' />
  3.  

This is particularly annoying when there's lots of checkboxes or really small radio buttons.

tip: add the following CSS to force the browser to show a pointer on clickable labels and buttons:

  1.  
  2. label, input[type="button"], input[type="submit"] { cursor: pointer; }
  3.  

Mobile Sites That Don’t Use the Right HTML(5) Input Types

If you use the correct types for your inputs then touchscreen devices adapt the keyboard to fit the need, and browsers can adjust the UI accordingly.

  1.  
  2. <input type='number' placeholder='0' value='5'/>
  3. <input type='email' placeholder='you@email.com'/>
  4. <input type='url' placeholder='http://bencollier.net'/>
  5.  
iOS Screenshot of email keyboard

Using input type='email' brings up an email specific keyboard on iOS

Browsers that don't understand these new input types default to text, so you've got nothing to lose.

Forms That Need to Reload to Validate

It's so easy to check your forms with a bit of JavaScript, instead of having to refresh the whole page; and generally require any password or captcha fields to be re-enter.

Oh, and if you have a username field, check it's available before I click submit:

Twitter showing a username's available

Twitter Signup

I'm purposely not linking to any validation scripts; there's not a universal drop in one I'd want to recommend, however, keep an eye on the native browser support for validation.

Disabling ‘hold to copy’ on Mobile Safari

If you want to disable the 'Cut / Copy / Paste' invoked by holding down on an element in Safari on the iPhone or iPad use the css:

  1. -webkit-user-select: none;

However, as stressed by Apple, this should only be disabled on a per element basis, and never applied to the whole document.

Apple's Technical Note TN2262: Preparing Your Web Content for iPad covers this along with using web standards instead of plugins (something that really interests me at the moment).

Site Seeing – Week One

Site Seeing! A roundup of sites I've found interesting..

Adobe UI Gripes

http://adobegripes.tumblr.com/

I satirical look at the awful inconsistencies within the Adobe Creative Suite..

Wordoid - Creative Naming Engine

http://wordoid.com/

Wordoid is kind of a dare I say it Web 2.0 name generator but creates natural sounding words, it's a little slow though as it looks up each results domain availability.

Fivesecondtest - Online Usability Tests

http://fivesecondtest.com/

'Five second tests help you easily identify the most prominent elements of your user interfaces.'

With each test lasting just ..5 seconds, you upload a screenshot of your webpage which can be either a memory or a click test, it's a great way of getting some quick feedback.

tip: upload your image at a resolution of 916 x 640 or else it gets cropped.

oh, and here's a great song: Heart Skipped a Beat - The xx (spotify)