Users of web 'documents' don t just look at information, they interact with it using a Graphic User Interface (GUI).
• A GUI is made up of the inter-action metaphors, images, and concepts used to convey function and meaning on the computer screen.
• Graphic design is not used simply to liven up Web pages - graphics are integral to the user's experience with your site. In interactive documents graphic design cannot be separated from issues of interface design.
1) Make your design user-centered
1) Make your design user-centered
• Graphic user interfaces were designed to give people control over their personal computers.
• Users now expect a level of design sophistication from all graphic interfaces, including Web pages.
• Put your user at the center of your approach.
• For example users will not tolerate long delays.
• Research has shown that for most computing tasks the threshold of frustration is about 5 seconds!
• If your users are primarily general public browsers "surfing" the Web via modem connections it is foolish to put huge bitmap graphics on your pages - the average user will not be patient enough to wait while your graphics download over the phone line.1 You can learn more about user-centered design at http://www.useit.com2 Also look at Neilsen's 10x Usability Heuristics at:
http://www.useit.com/papers/heuristic/heuristic_list.html3 This useful 10x checklist too (1998 Article):
http://www.stcsig.org/usability/newsletter/9807-webguide.html4 Good summary on the Web Style Guide's site: http://www.webstyleguide.com/wsg3/4-interface-design/index.html5 Wikipedia's summary of user centred design techniques:
http://en.wikipedia.org/wiki/Usage-centered_design
2) Make your web pages free standing
• World Wide Web pages differ from books and other documents in one crucial respect: 'hypertext links'.
• For this reason Web pages need to be more independent than pages in a book.
• Individual Web pages often need to provide information such as copyright, author, and date because a single Web page may be the only part of a site that some users will see.
3) Who is speaking?
• This question is so basic that it is often overlooked.
• Whether the page originates from an individual author or an institution, always tell the reader who created it.
4) What?
• The document title is often the first thing browsers of World Wide Web documents see as the page comes up.
• In pages with lots of graphics the title may be the only thing the user sees for several seconds as the graphics download onto the page.
5) When?
• This gives the user some idea of the worth of a document. Is it current and maintained?- On the flip side, sites that get left unchanged and are obviously out of date can quickly turn users away.
6) Where?
• Click on a Web link, and you could be connected to a Web server anywhere. It can be hard to tell where a page originates. Tell the reader where you are from, with (if relevant) your corporate or institutional affiliations.
7) Less is more
• Work out how much functionality a user really needs. Since you have limited screen space, more options tend to only clutter the screen, confuse the user and detract from the experience.• Good example of a simple but effective site (not too cluttered) via Google.Suggest a good example here + note it down.• Bad example - cluttered, too much information via Google.Suggest a bad example here + note it down.
8) Consistency
• Decide on what functions the user should always be able to access wherever they are in the site. Whatever those functions are they should be located in the same place and be represented in the same way throughout the site.• Consistency builds confidence in the user. Once users feel they trust certain options they will explore more freely.• The button, or menu, bar is efficient (offering multiple choices in a small space) and predictable (it is always there, at the bottom or side of every page), and it provides a consistent graphic identity throughout the site.• For maximum functionality and legibility, your page and site design should be built on a consistent pattern of modular units that all share the same basic layout grid.• Incorporating the "home" URL on at least the main pages of your site can be an easy way to maintain the connection to where a page originated.---jot down ONE comment on each of these 3x sites below.Reference (all links open in a blank window) :
9) Three steps away
• Do not bury functions so deeply that they are more than three clicks away. If you do your user will become lost...Can you find a site via Google (or maybe one you use) already which buries it's functions? Note down your findings.
10) Transparency
• Good interface design -can sometimes- be judged by how unnoticed it is. If the user spends all their time figuring out how to use your site they will not absorb the content.
11) Visibility
• The home page should give us clues on how to use the site as well as being attractive to entice the user.! YOU Suggest a -homepage- that you've found that doesn't effectively communicate how to use the site..
12) Conceptual Models - site maps
• Metaphorical models help people navigate through content by giving them a strong "sense of place".
• Having an overall mental picture of how something works or how something is put together gives people a better understanding of its interface.
Site maps often help people get a swift picture of the size/construction of a web site. Purist web designer's argue however that a 'well designed' site shouldn't need a 'site map'.Example:What are your thoughts on site maps - are they effective or otherwise? Please note your answer.
13) The mapping process
• Designers need to present interface functions in such a way that the user's expectations of what will happen "map on" to the actual results when clicked.
• It's impossible to design for an unknown person whose needs you don't understand.
• Create sample scenarios with different types of users seeking information from your site.
• Would an experienced user seeking a specific piece of information be helped or hindered by your home page design?
• Would a novice be intimidated by a complex menu scheme?
• Testing your designs and getting feedback from a variety of users is the best way to see whether your design ideas are giving them what they want from your site.
14) Quality
• Use high design standards. A site that looks sloppily built, with poor visual design, complexed navigation and low editorial standards, will not inspire confidence. It may turn users away + reduce the possibility of them returning.
15) User feedback
• Feedback means being prepared to respond to your users' enquiries and comments. Well designed Web sites provide direct links to the site's editor or "Webmaster" responsible for running the site. Planning for this ongoing relationship with users of your site is vital to the long-term success.Examples:TASK: What are your thoughts on user feedback - is it worthwhile or otherwise? Please note your answer.
16) Compatibility
• Always check your page designs on different sized monitors, platforms (i.e. PC and Mac etc) and differfent web browsers (i.e. Internet Explorer, Firefox, Safari etc). Will it run on older browsers and different platforms? Is there an accessibility requirement for your site (large organisations are often bound by the DDA to make their sites 'accessibel)?
17) Accessibility
Ther are various methods of designing and building an 'accessible' web site. Standards to look out for are such as theWebAim accessibility validator and the 'WAI'. We'll consider this in later sessions. To some extent this will apply more or less if your website will have a potentially large visually impaired audience.References:
Categories: