My finals are coming up; consisting of a five-week long project and a paper documenting the ordeal :)
I've chosen to build a website and to focus my attention on usability.
I am currently reading Don't Make Me Think by Steve Krug, and in his book he talks about conventions. He describes how we learn how to read newspapers, or rather learn the conventions of newspapers.
"We learned, for instance, that a phrase in very large type is usually a headline that summarizes the story underneath it, and that text underneath a picture is either a caption that tells me what it's a picture of, or – if it's in very small type – a photo credit that tells me who took the picture"
Just like newspapers use conventions, so do websites.
I am interested to hear about…
- what website conventions you can think of
- what conventions you make use of in your interfaces, and why
- what conventions you think border on flawed design ideas, and…
- what conventions you think are no longer valid.
Thanks in advance!
4 answers
points
A couple of layout conventions:
- Put a logo or site name at the top or top left of the page, and make it a link to home.
- Log in/out buttons, shopping carts and search boxes should go at the top right.
- Copyright notice goes at the bottom. It's also a good idea to put "contact us" down there, and if you have things like sitemap links, they can hang out in the footer as well.
- Maintain a clear visual hierarchy. Using
<h1>through<h6>semantically can really help you here.
Icon conventions:
- House = "home"
- Magnifying glass = "search" OR "zoom"... Note that each meaning is a widely accepted convention, but it is still ambiguous. If you use one of these conventions, make sure context keeps the meaning clear.
- (x) = "close" or "delete", although a trash can or (-) is less ambiguous and often used for remove/delete.
- Thumbs up, thumbs down and stars are almost always reserved for user rating systems.
Accessibility conventions:
- Put alt-text on all logos, navigation images, etc. If you don't have a really solid understanding of why this is important, watch someone navigate the web with a screen reader.
- If you use CSS techniques to replace text with images, make sure the text is still readable by a screen reader.
- Make links blue. Feel free to break this convention, but understand the compromise you're making if you do.
- Give things meaning rather than styles:
- Use
<em>and<strong>if you want to emphasize something. Remember that if everything is emphasized, nothing is emphasized. - If something looks like a list, it should be a list; use
<ul>or<ol>. - Don't underline anything you can't click.
- Don't use
<blockquote>to indent chunks of your page. Use it when you're quoting something.
- Use
A few more misc conventions:
- Titles on teasers link to the full text.
- Collections of content go in reverse-chronological order.
Outdated conventions that have (happily) nearly died:
- Links that say "click here" instead of describing the target of the link.
- "Back to top" links scattered liberally throughout web sites. Users know how to get back to the top.
- "the fold" is outdated for two reasons: First, users know how to scroll. Second, screen sizes, resolutions, ratios, etc are so wildly varied since the advent of real mobile devices (netbooks, WebKit mobile browsers, and friends) that you can't make assumptions about where a fold will fall.
- "www" is deprecated.
- Thank you so much! Great answer!
- Great pointers indeed. +1
points
Hmm, very interesting but rather wide topic/question to answer. I'll start the ball rolling by putting in my 2 cents of thoughts.
I'm not exactly sure what do you mean by widely accepted conventions, I'll touch on a few specific ones:
- Using HTML Tags Semantically
E.g. Using heading tag<H1>,<H2>etc... rather than styling a<DIV>to look like a header/sub-header - Font-typeface Selection and Fallback
Always have a suitable common font-type as a fallback if a less common one is used - Always use a suitable background color when using a background image
E.g you have a dark colored background image and the text is white, if the background image for some reason(s) does not load, having a specific dark background color will make the text readable
The list goes on and on, looking forward to hear from the other guys :)
Some useful reads:
Usability First: Website Design
Why You Should Stick To Design Conventions
Website Design Conventions (theukwebdesigncompany.com)
Design Principles: Design Conventions
point
Here is a link that might prove interesting: http://www.useit.com/alertbox/9605.html
The US governments take on it: http://www.usability.gov/guidelines/ (though it violates rule #2 in the previous link by offering it all in .pdf files). :P
points
A short list of 'mythical' conventions that used to be widely believed but have been shown to be false in actual user testing:
- the page fold (turns out that people are just fine scrolling a page)
- only have lists of 7 links (a belief erroneously based on the old story as to why we have 7 digits in phone numbers)
- people want Flash and PDFs (they really don't. ;O)
