usability considerations in website design: lessons from architectural design, print design, graphic...
DESCRIPTION
Usability Considerations in Website Design, drawing on lessons from Architectural Design, Print Design, Graphic Design, and Information Ergonomics.TRANSCRIPT
Usability Considerations in Website Design
Lessons from Architectural Design, Print Design,
Graphic Design, and Information Ergonomics
By Jeffrey Gold
Jeffrey Gold Usability Considerations in Website Design
2
Lessons from Architecture Form Visible shape and configuration Function
An activity or purpose natural to or intended for a person or thing
Horatio Greenough – “Form ever follows function” Popularized by Louis Henry Sullivan Adolph Loos – “Ornament is a crime.” Gives rise to modernism: Le Corbusier, Gropius, van der Rohe
Potential Dangers:
Wisdom dictates: Form follows Function Self-indulgent designers put Form over Function Non-designers, depending on variety, either put Function over Form or Form over Function, when best practice is a synthesis of both
Jeffrey Gold Usability Considerations in Website Design
3
Lessons from Print
Text Centuries of Text
• Past to Gutenberg (1456) to present Index
Glossary Table of Contents (TOC)
New: FAQs
Positive Analogy
• Website incorporating Index (Index & Navigation) • Website incorporating Table of Content (Site Map)
Negative Analogy
• Web Browsers are not formatted like the printed page • No tactile response or tactile response is different • Font limitations • Text is inherently linear, webpages are link-driven (non-linear)
Jeffrey Gold Usability Considerations in Website Design
4
Lessons from Graphic Design
Alignment Proximity Repetition Contrast Tone Horizontal Format • Landscape Mode
• Forced Portrait Mode Positive Analogy
• These principles carry over to usable website design Negative Analogy
• Original web was for transfer of information • HTML designed by Tim Berners-Lee while at CERN • Not all fonts installed on web browsers • Graphic Design principles yet to be fully integrated • No animation in text-based Graphic Design
Jeffrey Gold Usability Considerations in Website Design
5
Lessons from Information Ergonomics Part 1
Information Ergonomics (Definition)
Information Ergonomics is the framework surrounding, and the methodology for, the design and processing of enterprise data, both electronic & physical, in terms of cognitive workload, human error, the way people & systems perceive and interact with their surrounding data and the tasks undertaken utilising that data.
Ergonomic Data Design
The right information, of the right quality, to the right place, at the right time, in the right format, designed for the needs of the data customer. • Data Centricity – Data determines form, not means of delivery • User Control – Consumer controls presentation of data • Sufficiency – Elegance in simplicity, do not over-engineer • Technological Independence – Information is presented in a non-technologically dependent way
Source: informationergonomics.org
Jeffrey Gold Usability Considerations in Website Design
6
Lessons from Information Ergonomics Part2 Properly defined problem vs. Ill-Defined Problem “Isn’t a picture worth a thousand words?”
“Not if it takes more than a thousand words to describe the picture.”
- Richard Price, Physicist
Information Ergonomics Architecture
Information Ergonomics will use recursive project structures, where appropriate, to drive out a consensus but will end up to obtain a robust, engineering-style, formal, specification of requirement.
Stages of Design 1. Strategy Definition 2. Mobilization 3. Problem Domain Definition 4. Resolution 5. Hand-off 6. Build, Test, & Delivery
Source: informationergonomics.org
Jeffrey Gold Usability Considerations in Website Design
7
Characteristics of Textual Usability Text
Accessible – introductory part of site is accessible Navigable – navigation self-evident (or explained) Searchable – search engine available Scannable – eye can easily scan the text Printable – webpages can be printed
Webpage Titles – webpages are titled Section Titles – sectioning of webpages Selective Links – not every word is a link off the webpage
Titled Links – links are titled Click here for Information Ergonomics.
not
Click here for Information Ergonomics.
Jeffrey Gold Usability Considerations in Website Design
8
Characteristics of Graphical Usability Graphics
Relevancy – relevant to subject matter/context Useful – simplify, do complicate
Cropped – relevant part of image is used or accentuated File Size/Download Time – Kilobytes (kB), Megabytes (MB) vs. dial-up, cable modem, DSL, T1, OC1
Appropriate File Types – GIF, JPG, PNG images Plug-In Availability – native to browser (built-in),
minimization of exotic plug-in types, problems with version types, backward compatibility
Graphics include:
Photography Illustrations Animations (animated GIFs) Video Clips (AVI, MOV, MPG, QT)
Jeffrey Gold Usability Considerations in Website Design
9
Characteristics of Functional Usability Functional Links – no dead ends or missing files, browser error messages Minimal Fenestration – links do not create too many new windows, tabs, or pop-up windows, or dialog boxes Minimal Plug-ins – links do not require extra/exotic plug-ins (PDF files, Flash) Platform Independence – design not platform specific (Mac, PC, Unix, Linux) Display independence – design based on minimal user monitor characteristics:
Monitor screen dimensions – 17”, 20”, 22”, 30” Color depth – 256, thousands, millions Resolution (pixel dimensions) – 640 x 480, 640 x 460,
1920 x 1200, 2560 x 1600 No horizontal scrolling – ergonomic mouse use
Possible exception: timelines
Jeffrey Gold Usability Considerations in Website Design
10
Characteristics of Content Usability Know Your Audience Web Surfers – direct, focused, ad-like to get their attention
Novice Users – unambiguous structure, easy access, attractive, no complex text, FAQs Occasional Users – use of recognizable elements (icons, Logo), overview pages, hierarchical maps, FAQs Expert Users/Frequent Users – stripped-down, fast-loading text menus, have goals in mind, no froufrou, site structure, site index, search engine International Users – date differences, provide translation, avoid idiosyncratic jargon Disabled Users – annotated tags, large font availability
Bandwagon Follow standard web designs already in use
Jeffrey Gold Usability Considerations in Website Design
11
Unusable Website Design Text that cannot be scanned by eye Unsophisticated Search Engines: WYPIIWYGNWYW Fixed font sizes Too many font types Wild font sizes Designs without a Unifying Theme/Scheme Ad-like Designs Unspecific Titles of Pages and Sections Links that don’t change color (link, alink, vlink, hover) Links to Text documents (change of environment) Marketing Hype Very Large Graphics Long Download Times Irrelevant Graphics Distracting Ads and Click-Throughs (Ad Clicks) Lack of Information/Misleading Information
Jeffrey Gold Usability Considerations in Website Design
12
Usable Website Example: Apple.com Part 1
Source: apple.com
Jeffrey Gold Usability Considerations in Website Design
13
Usable Website Example: Apple.com Part 2
Source: apple.com
Jeffrey Gold Usability Considerations in Website Design
14
Usable Website Example: Adobe.com Part 1
Source: adobe.com
Jeffrey Gold Usability Considerations in Website Design
15
Usable Website Example: Adobe.com Part 2
Source: adobe.com
Jeffrey Gold Usability Considerations in Website Design
16
Usability Testing Part 1 User-centered Design Methods
Card Sorting Contextual Interviews Focus Groups Heuristic Evaluation Individual Interviews Parallel Design Personas Prototyping Surveys (Online) Task Analysis Usability Testing Use Cases Writing for the Web
Source: usability.gov
Jeffrey Gold Usability Considerations in Website Design
17
Usability Testing Part 2
Source: usability.gov
Jeffrey Gold Usability Considerations in Website Design
18
Usability Research Findings Part 1 Text Reading
Lazy Readers Users don’t read pages, scan pages instead Pick out headers, sentences, parts of sentences
Users do not like long, scrolling pages Like short pages Content and Content Design
Concise Writing – 58% increase in usability Scannable – 47% increase in usability Objective Style – 27% increase in usability Concise, Scannable, Objective – 124% increase in usability
Objective – factual information, not hyped, no marketese
Content – Quality, quantity, and relevance of content more important than navigation; one idea per paragraph; simple, informal writing; credibility of writer
Function
Search Engines – users want keyword search; will use <find> command if no search engine is available
Jeffrey Gold Usability Considerations in Website Design
19
Usability Research Findings Part 2 Layout
Graphics/Text - Graphics and Text Complementary Focus – users focus on center of new webpage
Summaries – newspaper style; inverted pyramid style Repurposing - Do not repurpose other materials
Links Vertigo – fear of links and getting lost Hypertext - hypertext links well-liked for delving deeper Graphics
Hate to Wait – users do not want to wait for long downloads Video Talking heads are boring Use video for dynamic content for which video is suited
Jeffrey Gold Usability Considerations in Website Design
20
Usability Research Findings: F-Pattern
Source: http://www.useit.com/eyetracking
Jeffrey Gold Usability Considerations in Website Design
21
Usability Survey – Case Study Sun Microsystems – Usability Survey
"One piece of advice, folks: Let's try not to be so gratuitous and self-inflating. Beginning answers to common sense questions such as "Will Sun support my older Solaris platform?" with answers such as "Sun is exceptionally committed to..." and "Solaris is a leading operating system in today's business world..." doesn't give me, as an engineer, a lot of confidence in your ability. I want to hear fact, not platitudes and self-serving ideology. Hell, why not just paint your home page red under the moving banner of, "Computers of the world, Unite under the glorious Sun motherland!"
Source: http://www.useit.com/papers/webwriting/writing.html
Jeffrey Gold Usability Considerations in Website Design
22
Usability Training Part 1
* Understanding People o How users read + Reading in the real world + Reading online + New findings from our eyetracking studies o Differences across user groups + Understanding your audience's comprehension level + Reading levels and low-literacy users + English as a second language + Rules of thumb for different types of site * Understanding Writing o Rules of web writing + Guidelines for effective communication o How to increase credibility on the Web + How users learn to trust + How to keep that trust through good content o Finding a "voice" for the site + Why consistent voice matters + Humor o Increasing your content's appeal o Organizing content + Linear and non-linear narrative + By task + By topic + By audience + Alternatives o Optimizing every part of the page + Headlines and titles
Jeffrey Gold Usability Considerations in Website Design
23
Usability Training Part 2
+ Summaries and other microcontent + Body text + Informative links * Understanding the Technology o Writing to be found + Search engine optimization (SEO) + Keywords + Techniques to avoid o Making content more accessible o Graphics -- when to use them, when to avoid them o Help and online documentation o Press releases and writing for the media o Writing for alternative media: Blogs and Wikis o Writing to be printed out * Understanding Organizational Politics o Style guides o Repurposing content + What types of content repurpose well + How to use content across media types o Content management strategies o Justifying the re-write + ROI calculations + Metrics to collect when measuring content usability + Gathering evidence -- testing your content
Source: Nielsen Norman Group (nngroup.com)
Jeffrey Gold Usability Considerations in Website Design
24
Bibliography Books
Lynch, P.J., and S. Horton. 1999. Web Style Guide: Basic Design Principles for Creating Web Sites. New Haven, MA: Yale University Press.
The authors provide an excellent reference for site planning, covering the entire process: interface design, site design, page design, typography, editorial style, web graphics, and multimedia. This is an excellent source for an over-arching understanding of the internet/web and the book discusses the details pertaining to website usability rather than how to implement it in detail. A good guide for every website designer.
Niederst, J. 2001. Learning Web Design: A Beginner’s Guide to HTML, Graphics, and Beyond. Cambridge, MA: O’Reilly & Associates.
The author discusses each aspect of creating a website from beginning to end, covering: getting started, learning HTML, creating web graphics, and form & function. This book discusses everything from getting an ISP, to details of coding HTML, frames, tables, graphics, animated graphics, and other details. The book contains a useful chapter on usability including focus on the user, fundamentals of information design, organization, navigation systems, dos and don’ts, etc.
Jeffrey Gold Usability Considerations in Website Design
25
Bibliography Continued
Books (Continued) Williams, R., and Tollett. 1998. The Non-Designer’s Web Book: An Easy Guide to Creating, Designing, and Posting your Own Web Site. Berkeley, CA: Peachpit Press.
The authors provide a very detailed book for beginners. This book discusses basic design principles and shows how they can be applied to building webpages. A very good book about the finer details of design considerations.
Williams, R., and J. Tollett. 2007. Design Workshop, Second Edition. Berkeley, CA: Peachpit Press.
This book is an excellent reference for graphic design principles. The authors also discuss some limited aspects of web design, as part of a range of media and print media.
Jeffrey Gold Usability Considerations in Website Design
26
Bibliography Continued
Websites
informationergonomics.org
This website discusses information ergonomics. Although the website has some issues (grammar, spelling), it clearly outlined the philosophy behind and discussed the impetus, stages, and architecture of information ergonomics.
nngroup.com
This site was used primarily for gleaning an outline of usability training. Very little information was found on this site, as most of their services are for hire.
usability.gov
This website provided an excellent source for users who wish to delve into the finer points of website usability.
useit.com
This website provided an excellent source for users who wish to delve into the finer points of website usability. This site was used to gain access to Jacob Nielsen’s (Nielsen Norman Group) studies, particularly for the F-shaped eye tracking graphics, and other usability studies, including statistical data.
Jeffrey Gold Usability Considerations in Website Design
27
Discussion Discussion 1
A number of references stipulate writing for the web is different from traditional writing. I challenge that statement. I declare: clear, concise, focused writing for either mode of writing is equivalent, save for the difference in the mode of delivery. It truly is technology-independent. It is the responsibility of the writers to keep their audiences engaged.
Discussion 2
F-shape patterns and scanning are a sign of the times: information overload carries over onto the web from everyday experience: advertisements on TV, advertisements in print media, marketing phone calls around dinner time—major competition for your time—not necessarily only a product of the web, but perhaps also a product of how unqualified people originally shaped the media through their own websites and desktop publishing. Anybody read books anymore?