To the front pageThe Interaction Designer's Coffee Break - Weekly postings and quarterly articles about interaction design  
  To the front pageSign inTo the frontpageSearch in GUUUI postingsAbout GUUUI  
   
 

Instructions in form design

According to Mike Hughes, putting instructional text in the beginning of a form doesn't work. People prefer doing over reading. Our attention is easily drawn to action objects, such as text fields and buttons, causing us leapfrog over instructions.

Mike Hughes gives the following recommendations:
- Divide dense instructions up for individual action objects
- Put the appropriate instructions in close proximity to their respective action objects
- Place the instructional text next to the corresponding action object-preferably, in the downstream direction, to the right or just below it
- If the instructional text is too long, provide a link that dynamically displays a pop-up or pane when a user clicks it.

Links:

  • Instructional Text in the User Interface: Some Counterintuitive Implications of User Behaviors Open link in new window

Henrik Olsen - March 12, 2007

See also: Forms (30)  Text (24) 

 

COMMENTS

I would agree. I hypothesize there's a thing like a cognitive event horizon for form fields. So frequently do we encounter and use login/password form fields now that the affordance creates a black hole from which we perceive nothing else. Just like opening a door, we're not particularly conscious of our action. It's like being on autopilot.

But some of these recommendations require even stronger affordances to overcome. For instance, I've seen users routinely miss the text, "forgot your login/email?" right underneath its form field. As with theater, it seems a lot depends on how you stage things.

Gino | March 13, 2007

 

Definitely agree. I often find that users completely ignore instructions when filling in forms alltogether. It seem like they try and run through them as fast a possible, ignoring almost anything on the way to the "send" button. The best solution would obviously be to design a form in such a way that instructions would be unneccesary but this is hardly always possible.

Peter | March 13, 2007

 

Thanks for this article. This is something I've repeatedly revisted with throughout my career.

I used to work on a financial services application where we had very investment savvy users as well as users very uncomfortable with online financial transactions and investments in general. We often "hid" instructions using the link option higlighted above so as not to get in the way of more advanced users, but to still provide instructional content to those that need it. If i was designing that application today I would use an AJAX enabled auto expand to show/hide the instructions.

Recently, I also have been putting simple form based instructions as default text in the form fields (e.g. defaulting a name field to read "enter your name" or a search field to read "Enter search term(s)."

Rebekah Sedaca | March 14, 2007

 

Sponsor

Ad for TechSmith Morae


Browse GUUUI postings

Methods and the design process

Prototyping and wireframing (120)  Usability testing (71)  Cost-justification and ROI (28)  User research (24)  Personas (19)  The design process (24)  Eye-tracking (14)  Card sorting (13)  Web traffic analysis (12)  Expert reviews (11)  Implementing user-centred design (9)  Site and flow diagramming (6)  Envisionments (4)  Use Cases (3) 

Design elements

Navigation (63)  Web page design (41)  Search (27)  Text (24)  Forms (30)  Links (19)  Guidelines and Standards (15)  Site design (14)  Ads (9)  Design patterns (8)  Sections (8)  Shopping Carts (9)  Error handling (7)  Home pages (9)  Help (3)  E-mails (3)  Sitemaps (2)  Personalization (1)  Print-friendly (1)  Landing pages (5) 

General aspects

E-commerce (28)  Persuasive design (23)  Visual design (20)  Information architecture (15)  Accessibility (13)  Search engines (7)  Credibility, Trust and Privacy (6)  Emotional design (10)  Simplicity vs. capability (7)  Web applications (6)  Intranets (3) 

Technology

Flash (6)  Download time (5)  Javascript (3)  URLs (3)  Browsers (3)  Web standards (2) 

Humour

Bad designs (20)  Cartoons (14)  Fun music and videos (13)  Funny tools and games (12)  Misc humor (8)  Fun with Jakob Nielsen (9)  Designs with humor (3)  Fun posters (5)  Funny 404 pages (2) 

Resource types

Research (130)  Tips and guidelines (95)  Tools (106)  Books (47)  Audio and video (48)  Interviews (30)  Cases and Examples (28)  Talks and presentations (18)  GUUUI articles (11)  Primers (14)  Online books (5)  Posters (5)  Glossaries (3)  People and organisations (3) 

Information sources

Blogs (12)  Websites (11)  Discussion lists (4)  News (3)  Newsletters (3)  Online magazines (3)  Wikis (1) 

 
     
  To the front pageSign inTo the frontpageSearch in GUUUI postingsAbout GUUUI