• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Usability Considerations in Website Design: Lessons from Architectural Design, Print Design, Graphic Design, and Information Ergonomics
 

Usability Considerations in Website Design: Lessons from Architectural Design, Print Design, Graphic Design, and Information Ergonomics

on

  • 6,200 views

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

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

Statistics

Views

Total Views
6,200
Views on SlideShare
6,198
Embed Views
2

Actions

Likes
3
Downloads
164
Comments
0

1 Embed 2

http://www.lmodules.com 2

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Usability Considerations in Website Design: Lessons from Architectural Design, Print Design, Graphic Design, and Information Ergonomics Usability Considerations in Website Design: Lessons from Architectural Design, Print Design, Graphic Design, and Information Ergonomics Document 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 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