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.

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

  • charmedlover

    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.

  • mde

    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.

  • mrsmiley

    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.

  • bbolte

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

  • Neal Majong

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

  • Mandy Candy

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

  • Azery Bledance

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

  • Leopold Kuf

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

  • Loshu Uklo

    Do you think anyone reads all this?

  • noodlenozzle

    I read it. Apparently, so do you.

    Might be nice to link to Slash7 from the post.

  • noodlenozzle

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

  • adeelkhero

    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!

  • Jason

    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.

  • Nacky Orun

    Asta la vista, wht does it mean?

  • AlexW

    Asta la vista, wht does it mean?

    It was search engine wasn’t it?

Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Front-end, once a week, for free.