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

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

Usable Website Example: Apple.com Part 1

Source: apple.com

12
Jeffrey Gold Usability Considerations in Website Design

Usable Website Example: Apple.com Part 2

Source: apple.com

13
Jeffrey Gold Usability Considerations in Website Design

Usable Website Example: Adobe.com Part 1

Source: adobe.com

14
Jeffrey Gold Usability Considerations in Website Design

Usable Website Example: Adobe.com Part 2

Source: adobe.com

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

Usability Testing Part 2

Source: usability.gov

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

Usability Research Findings: F-Pattern

Source: http://www.useit.com/eyetracking

20
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
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
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
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
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
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
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