OSCON 2006: When Interface Design Attacks

By | | Web Design Tutorials & Articles

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.

Written By:

Matthew Eernisse

Matthew lives in Houston, Texas, USA, and works for the Open Source Applications Foundation building the web UIs for Scooby, a next-generation web-based calendar client, and Cosmo, a calendar server. In his abundant free time, he writes about AJAX, JavaScript, Ruby, and PHP at Fleegix.org, and operates EpiphanyRadio, a webcast radio station. Matthew plays drums and speaks fluent Japanese.

 

{ 15 comments }

AlexW February 27, 2007 at 3:40 pm

Asta la vista, wht does it mean?

It was search engine wasn’t it?

Nacky Orun February 27, 2007 at 9:51 am

Asta la vista, wht does it mean?

Jason February 6, 2007 at 12:17 am

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.

adeelkhero January 22, 2007 at 9:25 pm

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!

noodlenozzle November 16, 2006 at 9:39 am

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

noodlenozzle November 16, 2006 at 9:38 am

I read it. Apparently, so do you.

Might be nice to link to Slash7 from the post.

Loshu Uklo October 22, 2006 at 4:10 pm

Do you think anyone reads all this?

Leopold Kuf October 12, 2006 at 8:01 am

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

Azery Bledance September 27, 2006 at 1:07 am

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

Mandy Candy September 12, 2006 at 12:46 am

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

Neal Majong August 30, 2006 at 9:41 pm

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

bbolte August 7, 2006 at 11:32 pm

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

mrsmiley August 7, 2006 at 9:19 am

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.

mde August 6, 2006 at 4:40 pm

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.

charmedlover August 6, 2006 at 11:40 am

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.

Comments on this entry are closed.