Blog Post RSS ?

Blogs » Web Design » OSCON 2006: When Interface Design Attacks
 

OSCON 2006: When Interface Design Attacks

by Matthew Eernisse

Amy Hoy is the author of a Ruby on Rails- and design-oriented blog, Slash7.

I was amazed to see how packed this session was. They propped the doors open, and people were actually standing around outside the door trying to listen. It was really good to see that so many developers are looking for a way to make their interfaces more usable.

Amy started off with some really good, basic points to keep in mind:

1. People have expectations about how stuff on the Web works (e.g., navigation sidebars, ignoring ads, etc.)
2. Users ’satisfice’ or give up. (‘Satisficing’ is where users will accept the first option that’s workable rather
that holding out for what’s optimal.)
3. Users scan rather than reading — many users will not scroll
4. Lots of people on the Web have low literacy

She also gave some simple principles to follow:

1. Text — keep it simple, break it up, highlight key text, use headings and lists
2. Forms — put labels on top, not to the left of form elements, break forms into sections
3. Buttons — Make it hard to click them accidentally, don’t put ‘delete’ right next to ‘cancel,’ describe results in clear English

She ended off with a really good suggestion — ask your users for feedback, but take it with a grain of salt. “People don’t know what they want. They just think they do.”

Amy has her slides available online here.

This post has 15 responses so far

  1. The odd suggestion here is putting form labels on top of form elements, and not to the left of them. I do disagree considering that we read left to right in English.

    Then I went to Amy’s website and saw that even she puts them to the left…

    Everything else seemed rather obvious and the typical comments towards usable websites.

     
  2. It’s not just left-to-right — we go top-to-bottom in English.

    I saw a nice study a few weeks ago that I’ve summarized and linked to on my blog. It uses eye-tracking, and provides some objective data that putting the label above the element (both left-aligned, of course) results in the fastest processing time for a form. Check out the study — it’s pretty interesting stuff.

    Some of the stuff in Amy’s talk might seem a bit obvious to people who are well versed in design principles, but you might be surprised at how many developers have never heard this stuff, and still have to do their own UI design.

     
  3. I find the whole idea of element labels on top to be a little strange as well. Considering that interface design on desktop computers has pretty much dictated the standard method of putting the label to the left, why break with this? The very first point says people have expectations on how stuff works, and usually that is, it should work the way everything else works they use.

    The only real reason I see for laying labels at the top of the field is if you are pressed for space horizontally like on a mobile device.

     
  4. i’m curious of the rational for the left/top label as well.

     
  5. Congratulations on a great web site. I am a new computer user and finding you was like coming home. Continued success.

     
  6. Very many thanks for a good work. Nice and useful. Like it!

     
  7. How do you think. If I quit using internet… No, CAN I quit?

     
  8. C’est trouis bien. Nice, i mean. Thanks!

     
  9. Do you think anyone reads all this?

     
  10. I read it. Apparently, so do you.

    Might be nice to link to Slash7 from the post.

     
  11. NM, it didn’t show up on the main post. Sryz.

     
  12. 1. Text—keep it simple, break it up, highlight key text, use headings and lists
    2. Forms—put labels on top, not to the left of form elements, break forms into sections
    3. Buttons—Make it hard to click them accidentally, don’t put ‘delete’ right next to ‘cancel,’ describe results in clear English

    Well it all depends on the nature of the Target market. For example check out this UK Logo Design website

    Knowing the fact that senses of LOGO DESIGN COMPANIES are geared up towards GRAPHICS & DESIGNS…this firm hardly caters to the GUIDELINES…
    Simplicity can turn you on some times!

     
  13. About her point that many of the people online have low literacy. Her point seemed to be to keep the text dumbed down, and I have seen studies to the same (studies talked about the Flesch-Kinkaid (sp?) reading level on the web). I know that 7 times out of 10, that is who we are going to be targeting, and we dont want to alienate them but does anyone think it is really a good idea to force oursleves to write on a fifth-grade level to satisfy those folk? I’m not entirely sure I should lower my standards, but I’m not holding out for them to raise theirs.

    Not trying to sound pompus or anything, it is just a pet peeve I picked up in the American school system.

     
  14. Asta la vista, wht does it mean?

     
  15. Asta la vista, wht does it mean?

    It was search engine wasn’t it?

     

Sponsored Links

Leave a response

You are not logged in, log in with your SitePoint Forum username and password.

-OR- Post Anonymously

* Make sure any code samples are escaped (i.e. ‘<b>’ becomes ‘&lt;b&gt;’).

If not logged in, your comments will be placed in a moderation queue. This means your comment may not appear until one of our moderators approves it.

SitePoint Marketplace

Buy and sell Websites, templates, domain names, hosting, graphics and more.