seeUthere Website Workshop: Usability

Website Workshop: Usability


HTML






Usability

Use it to separate elements without having to put a box around each one.
No, not space within the code as we discussed in the HTML section, but space on the page.
A big problem with readability on the seeUthere site is/was spacing (much of this was fixed in V6). On nearly every single page of the site I added space around headlines and form elements, I added space and separated huge blocks of clumped-up text into paragraphs, I added space between text and buttons, I added space between text and the page margin.

Space is very important for scannability. If a user looks at a page and sees everything crammed together, it makes it very difficult to scan for what is important on that page. The user is much more likely to click away to somewhere else that is scannable so they can figure out what's going on, rather than have to delve into that huge block of elements all crammed together.

Look at how the lack of whitespace (and the lack of alignment) makes this document ugly and difficult to read:

Man Bites Dog
A ferocious postal worker bit a large Rottweiler today over in Pleasanton. The incident occurred on a quiet street. A ferocious postal worker bit a large Rottweiler today over in Pleasanton. The incident occurred on a quiet street. A ferocious postal worker bit a large Rottweiler today over in Pleasanton. The incident occurred on a quiet street. A ferocious postal worker bit a large Rottweiler today over in Pleasanton. The incident occurred on a quiet street. A ferocious postal worker bit a large Rottweiler today over in Pleasanton. The incident occurred on a quiet street. A ferocious postal worker bit a large Rottweiler today over in Pleasanton. The incident occurred on a quiet street.
First name:
Last Name:
Email address:
Are you afraid of dogs?:

Same information now, but isn't it easier to read? (I've also improved the alignment.)

Man Bites Dog

A ferocious postal worker bit a large Rottweiler today over in Pleasanton. The incident occurred on a quiet street. A ferocious postal worker bit a large Rottweiler today over in Pleasanton. The incident occurred on a quiet street. A ferocious postal worker bit a large Rottweiler today over in Pleasanton.

The incident occurred on a quiet street. A ferocious postal worker bit a large Rottweiler today over in Pleasanton. The incident occurred on a quiet street. A ferocious postal worker bit a large Rottweiler today over in Pleasanton. The incident occurred on a quiet street. A ferocious postal worker bit a large Rottweiler today over in Pleasanton. The incident occurred on a quiet street.

First name:

Last Name:

Email address:

Are you afraid of dogs?

Likewise, I can use space to separate elements. Don't resort to putting a box around something to set it off from everything else. Just add whitespace between different sets of elements, align the ones that go together at the same level, and you have a clean, professional looking page with no ugly boxes that stop the reader's eye.

If you've read the HTML section of this site, you will have already seen this example, but here is a very simple grid page with two or three levels of boxes taken out. Do you have any problem distinguishing what elements go together? The structure is created by simple spacing and alignment. I have included another example below, this time with multiple sets of buttons.

Next Topic: Download Speed