Usability Considerations in Website Design, drawing on lessons from Architectural Design, Print Design, Graphic Design, and Information Ergonomics.

1. Usability Considerations
in Website Design
Lessons from Architectural Design, Print Design,
Graphic Design, and Information Ergonomics
By Jeffrey Gold

2. Jeffrey Gold Usability Considerations in Website Design
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
2

3. Jeffrey Gold Usability Considerations in Website Design
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)
3

4. Jeffrey Gold Usability Considerations in Website Design
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
4

5. Jeffrey Gold Usability Considerations in Website Design
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
5

6. Jeffrey Gold Usability Considerations in Website Design
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
6

7. Jeffrey Gold Usability Considerations in Website Design
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.
7

8. Jeffrey Gold Usability Considerations in Website Design
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)
8

9. Jeffrey Gold Usability Considerations in Website Design
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
9

10. Jeffrey Gold Usability Considerations in Website Design
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
10

11. Jeffrey Gold Usability Considerations in Website Design
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
11

12. Jeffrey Gold Usability Considerations in Website Design
Usable Website Example: Apple.com Part 1
Source: apple.com
12

13. Jeffrey Gold Usability Considerations in Website Design
Usable Website Example: Apple.com Part 2
Source: apple.com
13

14. Jeffrey Gold Usability Considerations in Website Design
Usable Website Example: Adobe.com Part 1
Source: adobe.com
14

15. Jeffrey Gold Usability Considerations in Website Design
Usable Website Example: Adobe.com Part 2
Source: adobe.com
15

16. Jeffrey Gold Usability Considerations in Website Design
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
16

17. Jeffrey Gold Usability Considerations in Website Design
Usability Testing Part 2
Source: usability.gov
17

18. Jeffrey Gold Usability Considerations in Website Design
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
18

19. Jeffrey Gold Usability Considerations in Website Design
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
19

20. Jeffrey Gold Usability Considerations in Website Design
Usability Research Findings: F-Pattern
Source: http://www.useit.com/eyetracking
20

21. Jeffrey Gold Usability Considerations in Website Design
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
21

22. Jeffrey Gold Usability Considerations in Website Design
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
22

23. Jeffrey Gold Usability Considerations in Website Design
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)
23

24. Jeffrey Gold Usability Considerations in Website Design
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.
24

25. Jeffrey Gold Usability Considerations in Website Design
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.
25

26. Jeffrey Gold Usability Considerations in Website Design
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.
26

27. Jeffrey Gold Usability Considerations in Website Design
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?
27