Stop using instructions
I’ve said in many a presentation and many a conversation (and even this article) to avoid using long bits of text at the top of a screen to provide instructions to a user about how a page is supposed to work or what they’re supposed to do. I suspect many people have doubted this tip. After all, how else can we explain it?
This article, from UXmatters, demonstrates the point nicely and offers some best practices.
Specifically, it describes how a user skips right over instructions because her eye is drawn immediately to a control. She is in the mindset of doing, not reading. To resolve this, break up the instructive text into smaller bits and position those bits where they help the most: beneath (or very near) the fields to which they relate. This way, users will actually see the instructions. If not before they enter data into a field, they’ll see it afterwards and can correct any mistakes.
Posted by Robert on March 8th, 2007
4 comments

Great advice, two additional design elements I work in to forms
1)Conventions. Labels go below or to the right of the control. Instructions when needed are preceeded with the word Note: and generally have their own row.
2)As highlighted by the quote on UX Matters “Given a choice between reading and doing, users prefer to be doing.” you can take their example and remove even more text.
Add a third radio button labeled ‘Students & Honorary members’ which does exactly the same function as Non members but eliminates the need for the reader to process the logic placed on them with the current statement;
if you == student member
then you == non member

I just want to expand on pauric’s comments.
1) The labeling convention of label above the field and leading-edge justified is an IBM GUI standard. I too found it odd at first, but its strength comes when you have to localize or translate a screen. Not as many layout surprises when translation expands or contracts the amount of room the label takes up. Annotating on-screen instructions with “Note” ups the “ink to data density” as Tufte would say. Such metadiscourse techniques are more useful in stepped instructions where it is useful to separate additional information from the core instruction.
2) Good design fix. As stated in the article, the example focused on user assistance where the obvious screen improvements could not (or would not) be made by development.

Thanks Mike, sorry I should have been more explicit in my use of the term Label, its the green text in the example. I agree that the IBM convention for header level text should be above and leading edge over the controls.

With form usability, I often run into a problem trying to modify user interfaces for web 2.0 or just basic “new” usability methods.
When I have test subjects, the ones that have more influence in the company are usually the slowest people. One person in particular thinks everthing should be marked “click here”. They believe Amazon.com is a terrible web site because they can’t understand it.
My team describes Web GUI’s follows.
Web 1.0 - Basic User interface - We tried to get people to view the page and think about what they wanted to do.
Web 2.0 - Intelligent User Interface - We give up on requiring them to think at all, and put things in their simplest format.
Web 3.0 - Precognative User Interface -We will predict what you want to do.
Web 4.0 - Dictorial User Interface - You’ll do what we tell you to do, and like it. Now go to your room.
