Category Archives: Usability

Dec 19

Quiet Structure

This is a really interesting article from 2007 comparing the CNN website design with USA Today‘s site, in terms of page structure, individual component layout, and the amount of visual weight the structural elements add to a page:

http://www.andyrutledge.com/quiet-structure.php

Quiet structure is achieved when you de–emphasize the structural elements; the containing boxes, structural lines, bullets, structural color elements, etc… and bring a rhythmical consistency to the layout. The result is that the content becomes more conspicuous and the overall clarity of presentation is greatly enhanced.

The article makes some great points and uses illustrations to great effect:

http://www.andyrutledge.com/quiet-structure.php

http://www.andyrutledge.com/quiet-structure.php

As a design approach I think the idea of a “quiet structure” is something that would work really well with any content-heavy site.

Dec 19

Web Application Form Design

This site has been around for some time, but Luke’s work is arguably some of the most definitive in the field of web form design, so its always worth re-iterating.

Web Application Form Design
by Luke Wroblewski
http://www.lukew.com/resources/articles/web_forms.html

Here’s a couple of examples of some of his findings:

Vertical labels

Vertical labels

Left-Justified horizontal labels

Left-Justified horizontal labels

His online articles form the basis of a book, available through Rosenfeld Media: Web Form Design: Filling in the Blanks. I heartily recommend it!

Dec 18

EULA checkbox variations

I read an interesting discussion over at ixda.org today regarding best practice around checkboxes for accepting terms and conditions…

http://www.ixda.org/discuss.php?post=36484

This response by Christian Crumlish (who it appears works for Yahoo) caught my eye as it seems to be not only well considered, but easy to understand, neat and fairly comprehensive.

Here it is in a nutshell:

  • Consent to the agreement is expressed in the call-to-action button (‘Agree and Continue’).
  • The form offers an option to exit without agreeing (‘Cancel’ or ‘Don’t Agree / Cancel Order’).
  • A statement makes clear that submitting the form constitutes agreement to the terms (‘By clicking you agree…’).
  • The terms of service (TOS) text is available via a clearly labeled hypertext link (Terms of Service).
  • The TOS copy is supplied in a printable format.

Sounds sensible to me.

Dec 18

Primary navigation at the bottom?

I stumbled across this website earlier today and really liked their primary navigation:

http://www.designcommission.com/

Design Commission (DC) are a digital communications company based in Seattle, USA, and as such, you’d expect their site to be something of a showcase for their design and technical skills.

The site has a clean, crisp look and feel with intelligent use of white-space, but what i really like is the primary navigation links at the bottom of the screen.

www.designcommission.com

www.designcommission.com

Its bright and bold (so not easily missed) and has a fixed location so you always know where its going to be.

Some neat z-indexing, coupled with a subtle shadow effect gives the impression that the navigation bar hovers over the content, and the addition of a simple cut-away triangle to denote your current location is a great touch, which compliments the element’s ‘hover’ appearance.

Simple triangular cut-away

Simple triangular cut-away

Summary

By moving this navigation to the bottom of the screen DC have given more prominence to the page content, ensuring you see more information above the fold, while it’s fixed location and highly visible design means you never loose it…

Its a brave move and rejects the convention of having primary navigation either at the top of the page or down the left-hand side, but thanks to the way in which DC have implemented it I think it works really well.