 | Web Style Guide, 3rd edition: Basic Design Principles for Creating Web Sites (Web Style Guide: Basic Design Principles for Creating Web Sites) |
The book that we are using for my Web Design and Marketing Class. Also available for free on line (but a little harder to read) at http://www.webstyleguide.com/wsg3/index.html
Interface Design
Users of web sites do not navigate them like any media that existed before. Because users have gotten used to a Graphical User Interface (GUI) graphics become a very important part for them.
Navigation and Wayfinding
Wayfinding is the concept of environmental legibility, the elements of a environment that help us navigate it successfully. It has four components:
- Orientation – where am I?
- Route Decisions – Can I get from here to where I want to go?
- Mental Mapping – can I, from what I have gone through, predict where I should go next?
- Closure – will I know when I have arrived?
The man who created this concept for city environments, Kevin Lynch, when found people drew maps of their cit by memory they included some key elements:
- Paths: Familiar streets, walkways, subway routes, bus lines
- Edges: The physical barriers of walls, fences, rivers, or shorelines
- Districts: Places with a distinct identity, such as, in New York, Chinatown, Wall Street, and Greenwich Village
- Nodes: Major intersection or meeting places, such as the clock in New York’s Grand Central Terminal
- Landmarks: Tall, visible structures that allow you to orient over long distances
While the web requires similar landmarks, we do not have the landscape before us as we travel. Instead we appear magically at the next stop.
- There is no sense of scale or movement – we do not pass familiar landmarks
- There is no compass – no sense of where you are heading (this is why we need navigation on the home page)
- You are here – you need navigation tools that print media would never have thought to have used
Paths, Leading the Way
While predictable web site links are good, breadcrumb trails that tell a user where he has been and is are a great source for navigation.
Districts and Edges: the Paradox of Consistency
If everything looks the same, how can you tell you have crossed from one area to another? There is no edge to tell you that you have crossed into a new area. For that reason there should be a visual cue that you have moved from, for example, in a college web site, registration to financial aid. But it still must be consistent with the rest of the site.
Nodes: The Local Coffee Shop or Times Square
When a user is given to much choice, then there is a chance he will make no choice or not have confidence in the choice he has made. Complicated pages soon become overwhelming like Times Square in New York City.
Landmarks: ”You are here”
Search allows you to jump from one place to another easily. Because of the the user must be able to take cues from the environment as to where they are.
Summary: Principles for wayfinding in web sites
- Paths: Create consistent, well-marked navigation paths
- Regions: Create a unique but related identity for each site region
- Nodes: Don’t confuse the user with too many choices on home and major menu pages
- Landmarks: Use consistent landmarks in site navigation and graphics to keep the user oriented
Browse versus Search
Both browsing and searching should supported as research shows 1/2 will browse and 1/2 will search on a regular basis but all will use both at one time or another.
Orientation
Make sure that you provide a ‘you are here’ type of feeling to a web site so that your user does not loose orientation (breadcrumbs, color change, tabs, etc.). While many will be navigating your site by search or browse, many will come in from global search engines and will have no concept of where they are on your site.
Supporting Web Search Users
It is best to provide a search box on every page if your site is more than a few pages. It should be part of the navigation plan of the site. Make sure that you tell them what they are searching (web v. site v. part of site) and how many results you are showing out of how many available. The results should look like the rest of the site.
Interface Design
Web users loose the sense of the whole document that you would get with a physical media. Things like length of page and even how long things are can cause disorientation.
Clear Navigation Aids
Any navigation aids that are used should be clear what they do and be consistent throughout the site. It should be easy to get to the home page and other key pages of the site.
No Dead-end Pages
It is possible with the use of search engines to come in at the end of a related site of pages. At a minimum, there should be a link back to the home page, and if possible, links to other pages on the site that would be key to their use of the site.
Direct Access
When possible all content should be no more than 2 to 3 clicks away from the home page.
Simplicity and Consistency
If you must use metaphors on your site, they should be simple, familiar ones. Getting cute with them only leads to confusion and the user will move on to another site. Navigation should never compete with the content for the users attention. Even if you do not use graphics, be consistent with the navigation text as well as the headers, footers and titles/subtitles.
Design Integrity and Stability
Design your site so that it looks professional. If it does not, you do not. Always be checking that all links work as the site expands.
Feedback and Dialog
Make sure that you have a place where people can offer feedback to the designers of things that may need to be fixed.
Bandwidth and Interaction
Users will not tolerate long delays. If the page does not load in 10 seconds many will move on. If you have visitors from other countries (check your logs), or many dial up users (know who uses your site) you may need to cut back on the large graphics.Be aware also of things like a CMS that will slow down the generating of a page.
Interface Design Conventions
What goes in the headers?
- Site identity
- major navigation links
- search box
Should be a consistent part of the site.
Right or Left Column for Navigation Links
Studies show that left or right does not matter as long as you are consistent. Left however are more expected.
Breadcrumbs for Navigations
Breadcrumbs are just a trail of the hierarchical links that you take to get to a web site. This is a good navigational tool for the user as it provides a clear space as to where he is and how to get easily to related parts of the site.
Information Design
For print media, standards like the Chicago Manual of Style are available. For web documents there is no current standards, only best practices. For standards sake, Chicago Manual of Style is not hard to implement into web sites.
Freestanding pages
While not novel to web sites it is a fact that pages are often ripped out of the full context of a site. For that reason, unlike printed media, much more information should be available in the headers and footers of pages than you find in the average print media. Web sites should adhere to basic journalism 101:
- Who – is speaking – do not put out anonymous quotes
- What – page title and link names need to tell what page is about
- When – unlike print which usually has a date to identify age, digital does not, make sure to put revision dates and/or numbers as part of the documents
- Where – If people print out your page they will have no idea where it is from, consider making the full link part of the end of the page
Summary: Information design guidelines
Every web page needs:
- An informative title (which also becomes the text of any bookmark to the page)
- The creator’s identity (author or institution)
- A creation or revision date
- A copyright statement, Creative Commons statement, or other statement of ownership to protect your intellectual property rights
- At least one link to a local home page or menu page, in a consistent location on all pages
- The home page url
 | Designing the Moment: Web Interface Design Concepts in Action |
Posts
No comments:
Post a Comment