usability considerations in website design: lessons from architectural design, print design, graphic...

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


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)


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


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


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


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.


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)


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


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


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


12

Usable Website Example: Apple.com Part 1

Source: apple.com


13

Usable Website Example: Apple.com Part 2

Source: apple.com


14

Usable Website Example: Adobe.com Part 1

Source: adobe.com


15

Usable Website Example: Adobe.com Part 2

Source: adobe.com


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


17

Usability Testing Part 2

Source: usability.gov


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


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


20

Usability Research Findings: F-Pattern

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


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


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


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)


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.


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.


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.


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?

usability considerations in website design: lessons from architectural design, print design, graphic...

Design

website design lessons

print design

architectural design

ergonomic data design

right information

information ergonomics

information ergonomicspart

data centricity data