Forum Moderators: phranque
I've put together some conclusions to discuss. Focus is usability, but SEO and technical aspects are always welcome.
Sources: some Nielsen (for sure he's one of the gurus, but lately best at recycling even the smallest findings/ideas he ever had), some Spool (second ones always have to try harder;), some Krug (covers the surface, but nice), some others engaged in interface design since years; but mainly my own experience with 50+ sites and following them up for a handfull of years.
Sorry for my english if not correct.
Remark:
These notes focus on usability. But it's easy to understand relevance for SE visibility - I hope :
No technical specifics here so far, although they're very important.
Related themes:
information architecture, theme pyramides, copywriting, accessability. A lot of threads around here to cover those themes ...
And now the basics (after you decided about target groups, targetted themes / key phrases, domain name; after you investigated your competitors aso ...):
1. Fluid layout
Readable w/o horizontal scrolling (in resolutions of 800x600 minimum)
2. Scalable typo
Every typo, navigation too.
3. Navigation
3.1. General remarks
All navigation links in HTML (instead of graphical buttons).
Underscoring - as common for text links - not necessary if it's clear that navigation terms are clickable. Helpful: underscored when hovered.
Two main patterns:
3.2. All in "left hand" navigation
Disadvantage: tends to become long in bigger sites
Advantage: not limited
3.3. Main categories in a horizontal "top" navigation, sub topics left
Disadvantage: limited space (to avoid horizontal scrolling)
Advantage: similar to applications in windows, mac os aso.
3.4. Meta navigation
Additionally some kind of "meta" navigation:
topics like contact, site map, search at top of page, right-aligned.
4. Topic/sub-topic order
Sub topics inserted some pixels right of topics. Cascading as in explorer.
5. Behavior of navigation links
Actual highlighted; hover; visited.
6. General page layout
This is concerning other elements than main navigation.
Logo of company / brand or similar at top left corner.
If company and brand logo are required, brand at upper left, company at upper right.
Search field (long enough) in upper right screen area.
Content area at center of screen.
7. Content layout
7.1 General
Dark typo at light background (why not black on white?) - only in really few cases opposite: light typo at dark background.
Tagline: what's this site about? Short, precise description.
All relevant stuff "above the fold".
No problem to have other content below fold - who's interested, will scroll (prefering that instead of loading a new page)
7.2 home
Tagline(s): what's this site about.
Some main navigation links explained:
Important categories of navigation explained: blue widgets add-ons: helpful tools and grips for the widget power user as <example, example...>.
Deep links:
Direct links to certain important contents / functions buried way down for easy access.
The homepage is some kind of showcase for visitors: show your spectrum, and show your highlights. But page should not be overcrowded.
7.3 Other pages
Tagline(s), or unordered lists with main topics of page. Scannable by visitors.
Text length not so important for visitors, they prefer scrolling instead of loading a new page, but not too long, say: max. 5x screen resolution high).
Really important here: keep on theme.
8. Pictures
Fast loading. Alt tags. Titles. Less is more. - A lot of user's are text minded, picture blind. - At the other hand a picture can say more than 1000 words.
If big ones are necessary: give small previews with option for larger scale (including some information like: "bigger picture, 78 K")
9. Search function
Give direct access by implementing a search field - minimum at home page. Color of search field: white.
Make it big enough to type in some 30 characters. Behind search field a button: "go" or "start search".
You need a page to show search results in main navigation. Use it for putting in some advanced search functions (wildcards, boolean operators, related stuff - even if most users will not use it, some will register it: whow ...).
10. Site map
Necessary, no question if you have more than - say - 10 pages. If you've a really big site, split it.
11. Contact
If you have a site with a lot of information / services / products, it might be helpful to let users choice to what topic they contact you.
Avoid too many mandatory fields. - Or use mandatory fields excessively if you want to frustrate contacts.
12. PDF
Most important: give every necessary information in HTML.
PDFs are great if correct print layout is necessary. But nothing tires more than clicking a link and find Acrobat started ... avoid this, inform people: <understandable name of file> pdf file - 1,2 MB.
13. Animations
Ever tried reading a schedule with something flackering very close to it? - No animations should start without giving users a choice to decide ...
Animations can be great to demonstrate complex functions, or to give some interactive experience. - But be aware: users will mostlyx not find your sophisticated / well designed interface. Go conventional!
14. Sound
No sound. No questions, please. - Unless you set up some music site or related stuff.
15. Imprint
At last a good one. Because everybody can publish at the Internet, it's very important to know who's behind a message. Users are in doubt if they should trust in what they find. So help them. - You can have some "About compnany xyz", that's really good. If not, use imprint instead.
______________________________________________
What do you think?
Albert.
Yes these are v.important considerations when designing a site however each project unto its own. Hence IMHO it is worthwhile to test each website independantly (and get the client to pay for this?).
More often than not I am faced with situations that, from the outset, present usability problems. Rather than a set of rules, for me it is about a general mindframe.
BTW black text on a white background is only 6th on the order of legibility... No1: Black on Yellow, No2: Green on white (a classic case of consistency and aesthetics vs usability).
sleepy-kiwi:
'shoulds' are no 'musts'. My list puts together conventions / user expectations. If you follow those you're taking not too much risk to fail in aspects of usability IMO.
Testing a site's usability: recommended whenever possible.
Get the client pay for this- most of my clients won't. So I try often to include some amount for testing in my first offer.
Another important aspect came to my mind: follow up after launch. Checking logs and conversion rates helps to improve your site's usability.
Albert.
maybe most members here are far beyond these basic considerations?
There are a lot of people here who are extremely interested in usability issues. A quick site search for "usability" will bring up several good discussions that we've had on usability, conversion, user testing, and other usability considerations! :)
Three interesting discussions that I go back to and re-read when I need inspiration:
[webmasterworld.com...]
[webmasterworld.com...]
[webmasterworld.com...]
I think you'll find that folks around here are extremely open to learning new things about usability.
Sounds like your list is a good one and works well for your purposes. Thanks for sharing it.
This takes us back to usability testing -
Is this a navigational problem (knowing where you are and where you can go to)?
or a user experience problem (I know where to buy the widget yet I dont feel confident in this sites security / I dont have enough information yet)?
or a host of other possibilities (ie naming conventions, user frustration, consistency with specific industries methods/processes, big picture overview and so on).
I liked what you said in a former thread:
We all spend a great deal of our time on #1 – bring in more traffic (my god, 555 posts on the October Google update in 3 days!). But there’s much less conversation on conversion; what can I do to improve my site’s performance?
@sleepy_kiwi:
Good point, especially concerning user's confidence (problems with navigation, naming conventions aso seem comparatively easy to solve). I try to build confidence by giving visitors information about the company, testimonials aso. -
But recently came up some interesting arguments about 'ugliness sells' [url]http://www.webmasterworld.com/forum78/1562.htm[/url
In certain cases users seem to trust in what looks cheap and frankly spoken. But I'm quite sure this wouldn't work for the site of a big company ...
