usability

Yahoo web UI design patterns and widgets

This is already making it's way around the "blog-o-sphere", but I've got plenty of friends who are into web design but don't follow this stuff, so check it out. The Yahoo! UI Library is a collection of JavaScript widgets for things like calendars.

The Yahoo! Design Pattern Library is a collection of design patterns for web interfaces. Design patterns are a concept from "enterprise" programming, where best practice approaches to typical problems are described in a way that can be used by programmers using different languages. These patterns from Yahoo describe typical web UI patterns, such as paging multiple lines of search results.

There's nothing ground-breaking in the patterns, but it's useful to have these spelled out. It serves as a checklist, or a specification, if you find yourself having to implement one of these things. Even better, if you're asking someone else to implement some bit of web UI, giving them one of these patterns - modifying it if necessary -is a good way to make sure you're both clear on what you want it to do.

Friendlier usability messages

Tagged:  

Something to think about when designing a site or application is how you write your error messages. This grokdotcom article (which I can't find a byline for) encourages you to write messages that don't chastise the user for not understanding how your app works. The one comment I would make on this article is that any application developer (web or otherwise) who needs to think of the best way to phrase an error like "Phone number cannot contain dashes" should be shot.

I don't understand developers who take the time to check that a phone number has dashes (or credit card number has spaces) and chastise the user for it, rather than just stripping them out and getting on with it.

My new design is a readability atrocity!

Most bloggers have missed the most useful points of the recent eyetrack study. I've seen a number of blog items on the eyetrack study recently published by Poynter. But checking it out this morning, I've found much more interesting things in it than the "people look at the top left of the page first" angle that most people are talking up. Granted, that's the angle mentioned at the top of the story.

Reading the article and looking at kief.com, I realize my new design is an atrocity of unreadability. Some key points:

  • Headline sizes affect whether people actually read what's on the page, or skim it. Big page headlines, and article headlines significantly larger than the blurbs, encourage people to scan the page rather than read the details.
  • My biggest crime is the groovy lines I put around the headline of each article. Even underlining headlines discourages people from reading the text beneath. Looking at it, the way I have the header and footer blocks of each post indented, although I find the look pleasing, is jarring for reading through the stuff on the page. This is the nastiest effect of my new design, I think.
  • The first few words of the blurb are critical; they determine if someone is going to read the whole blurb. Of course it's no news that the lede needs to have a hook, but on the web it looks like the hook needs a sharper barb than in print.
  • Shorter paragraphs are better. We're talking one or two sentences each
  • Summary paragraphs at the beginning of an article are a winnder
  • Interesting words or phrases can draw a reader's attention to areas of the page that wouldn't normally get looked at:

We observed a high number of eye fixations on a headline about clothing maker FCUK, which was placed far down on a page with a long list of headlines and blurbs

People do scroll down a page looking for interesting bits, but need something special that hooks them. One point is that although many people would probably try visual tricks to highlight things they want people to look at, like changing the color, using a big font size, or underlining it, but the other findings of the study suggest that would actually be counter-productive. The key is to make the actual words used compelling enough that people will read them.

Some other things I want to think about:

  • Right side navigation actually gets people to spend more time looking at it
  • Ads work better on the left side than the left
  • Ads in the middle of the text work best (this is for attention, I don't know if they affect click-throughs)
  • Separating ads with lines or even whitespace decreases the chance people will look at them. Not sure how you would do this without confusing people about what's advertising and what's editorial, this sounds like a false "win".
  • People look at text ads much more than banners

So I need to take a stab at making my design more readable. I probably won't get around to it soon, since my plate is overflowing both at work and home, and we've got a trip to Turkey next week.

Syndicate content