Architecture Representation Best Suited for Role

Production Staff

An outline or tree diagram, with levels clearly indicated a detailed list of pages, and navigation labels and content for every page.

Writing Staff

A page schematic with navigation and content requirements for each page.

Quality Assurance

A comprehensive list of pages with detail about each page. For ease of testing, this list of pages can be online, and each page listed can link to the corresponding page within a wireframe so that the content of each page can also be verified.

Usability testers

An outline or tree diagram for annotating during testing, and a wireframe for actual testing.

Designers

An outline or tree diagram, indicating final labels, the number of options at each level of the hierarchy, and how much site navigation is displayed on each page.

Clients who act as decision-makers

A sexy diagram (presentation-quality) with detail corresponding to the business end of the site

Clients who act as content providers

An outline or tree diagram, to decide on the completeness, and a page schematic indicating navigation labels and content requirements for each page.

Task Analysis

  • Procedural analysis - analyze procedures people perform for an individual task. Consider the pages a user will navigate to accomplish his or her goal. What procedures the user will utilize within each page?
  • Job analysis - set of all tasks a person performs as part of a job or to achieve a goal.
  • Workflow analysis - flow of information and control that is necessary to complete a process that may include multiple people and multiple tasks.
  • Error analysis - determines where, when and under what circumstances errors will occur.

 

Human Error Tolerant Design

Human Error Tolerant Design

  • Prevention - eliminate potential for error
  • Reduction - reduce likelihood user will get into an error state by ensuring user is aware of action consequences, train users on normal and error recovery procedures.
  • Detection and identification - if user does err, the system makes it easy for user to detect and identify the error
  • Recovery - ensure system facilitates rapid correction, task resumption and movement to a stable system state
  • Mitigation - minimize damage or consequences of errors.

 

Search Results

  • Use terminology from your site (ex 55 products found, 55 photos found)
  • Repeat search query on page
  • Specify the number of results found
  • Provide title and description for each result
  • Help users find similar documents
  • Too many results? Categorize them to help narrow their queries

Page Layout

  • Keep the number of visual vertical lines simple and few (four or fewer)
  • Reduce the number of attention grabbing elements
  • Contrast, make similar things look similar, different things look different
  • Repetition - consistent repetition brings unity

Mockups

  • Thumbnail sketches
  • Paper mockups (viewed as conceptual)
  • Digital mockups (viewed as unchangeable)


Prototypes

  • Examine a small portion of the site in detail.


Storyboards

  • Sequences or snapshots that focus on possible actions and movements a user make take through the site
  • Capture the site's major functionality (or subset of the site)

Wireframes

  • Focus on structure, scope, and detailed processes
  • Focus on navigation and architecture, but also test labeling and categorization, branding issues, basic user interface capabilities

Text

  • Draw the user in, help reader orient, and convey information
  • Write to help people navigate the site. Make steps clear, state options where available
  • Short sentences, simple words, active sentences
  • Deliver complete and accurate information, present information in useful format for reader, achieve consistent and natural style (no types or errors)
  • Coordinate among multiple writers drawing from a variety of sources

Web Writing Style

  • Refer to company in first person
  • Refer to reader in second person
  • User direct, simple sentences
  • Divide text into easy to read chunks
  • Factual and content-rich information
  • Main themes at top of page
  • Lists as bulleted items, not prose
  • Clear section titles, liberally use headings (help user find information)
  • Avoid ambiguity
  • User straight quotes
  • Avoid educated words, overly formal writing is a mistake
  • Do not let a link cover punctuation or cross multiple lines
  • Use meaningful words in link titles

Establish Design Parameters

  • Gather as much information as possible about client (examine marketing, promotion and public relations materials).
  • Find out what material they like
  • Establish targeted style, voice, and point of view of site
  • Prepare list of competing websites - how are they successful>
  • Establish design elements based on style
  • Check colors in grayscale - do they still work?

Forms

  • Establish a style guideline for all online forms
  • Label steps numerically (include total number)
  • Include an introductory statement
  • Labels on left hand site of elements (and right aligned).

Usability of Web Technologies

  • Does this technology provide real value to the user?
  • Is it cross-platform?
  • Is it standard (do we need user to download plug-in)? How much of user's time will be saved?
  • How will users use it?
  • How much learning will it require?
  • What are overall benefits to users and providers?
  • What are development and maintenance sots?
  • Will extra complexity add significant risk to project?

Top Ten Web Guidelines

  1. Content and Scope
    1. Is content appropriate?
    2. Scope broad enough to satisfy user's requirements?
    3. Is info useful?
    4. Are features sufficient?
  2. Speed
  3. Navigation
    1. How clear is organization?
    2. Can users find their way?
    3. Is navigation bar well organized?
    4. Are parts missing?
    5. Are relationships between main and subsections clear?
  4. Appropriateness to task
    1. What are user's tasks and does site reflect structure of tasks?
  5. Visual design
    1. Does design have simplicity, consistency, and focus?
    2. Does visual organization structure the task of working with the page, providing emphasis and visual flow?
    3. Is it attractive and uncluttered?
    4. Does it reinforce tone and message of site?
  6. Compatibility
    1. Does it work for range of users and computers?
  7. Simplicity
    1. Is everything presented in simplest, most straightforward way?
    2. Is language simple and direct?
    3. Is text too wordy?
    4. Are pages too numerous?
    5. Are pages cluttered?
  8. Consistency and contrast
    1. Does it have a consistent message and style with organization's print material?
  9. Error handling
    1. Does system prevent users from entering inappropriate vales?
    2. Are bad values detected early?
    3. Is error recovery quick and efficient?
  10. Respect for the user
    1. Are you putting user's privacy or security at risk?
    2. Are you misleading them, wasting their time, or trapping them into a path they don't wan to be on?

Designing Web Sites that Work: Usability for the Web
by  Tom Brinck, Darren Gergle, Scott D. Wood, ISBN 1558606580
2001, Morgan Kaufmann

These are notes I made after reading this book. See more book notes

Just to let you know, this page was last updated Monday, Mar 18 24