User Centered Web Site Engineering

Part 2

Iterative Process of User-Centered Web Engineering

Prototype

Evaluate

Discovery

Maintenance

Implementation

Launch

Design

Production

Refinement

Exploration

Figure 5.1, Page 99

Problem Definition (B, E)

RequirementAnalysis (C)

DesignPrototype (D)

Implementation& Unit Testing (F)

Integration& System

TestingRelease

Operation &Maintenance (F,E)

Modified waterfall Vs. User-centered iterative development

Discovery

Exploration

Refinement

Production

Implementation

LaunchMaintenance

The Iterative Design Process Design: with goals and principles in mind

Examples of measurable design goals? Prototype: rapid prototyping, progressive

refinement Storyboard; paper prototype, wireframe From low to high fidelity prototyping

Evaluate: assess the prototype against the goals Expert review, informal evaluation Formal usability studies

Why use iterative design process?

Developing Site Structure & Content Content View

Addressing content Outlining content Creating a content delivery plan

Site View Information architecture (site map) Setting naming conventions

Page View Wireframing Addressing navigation Naming and Labeling Defining Key User Paths

Card Sorting A method for discovering the latent structure in

an unsorted list of statements or ideas. If the information are representative of the user

population for whom the application is being designed, then the result will reflect the structure in which the users expect the ideas of concepts should be presented.

Used for information architecture, catalogue, etc. Examples (useit.com) student projects (in Gallery

site: Shred Shop

Navigation Design: Understanding the User Experience

Goal-oriented and action-oriented Where am I? Where can I go? How will I get there? How can I get back to where I once was?

Navigation Design Where am I?

Location: simple and memorable URLs Consistent page and site labels Button states and progressive depth gauge History, explicit back links, cookies, landmarks

Where can I go? Navigation placement

Top navigation Bottom navigation Left navigation Right navigation Center Navigation

Navigation Issues Consistency Scrolling Mouse travel Frames Subwindows

Content layout & Wireframing For all main, secondary and templatized pages

Wireframe content, no visual design Simple wireframes Complex wireframes

Images/figures/illustrations Content Header or global navigation Functionality Primary links Secondary links Media Target window size Header and footer documentation

Defining Key User Paths Paper prototyping Interactive wireframing Key user tasks

Nonfunctional Functional

User Scenarios Multiple scenarios

Users and tasks

Content layout (wireframes, storyboard)

Paper Prototyping Gathering usability data as early as possible Greater impact on user experience Cheaper to change early in development process Willingness to changeHowever Difficult to convince the management Developer’s habit Examplehttp://www.nngroup.com/reports/prototyping/

video_stills.html

User Interaction Scenarios Context-rich stories that focus on on what people will do

than on how. Elements

Setting –details that motivate/explain or starting state Actors – humans interacting Task goals – motivate actions Plans – mental activity directed at converting goal into a behavior Evaluation – mental activity directed at interpreting features of the

situation Actions – observable behavior Events – external actions or reactions

Visual Design Key considerations

Reviewing site goals Developing concepts Designing for the users Presenting alternative designs and gathering

feedback Creating graphic Templates Creating a design style guide

Style Guide Page dimensions Headers Colors (Browser safe colors) HTML text Graphic type (GIF, JPEG, Flash) Photo/image treatment Embelishments for buttons, lines, arrows

Web Image FormatFormat Compression

SchemeColor Depth Supported

Progressive or Interlaced Rendering

Transparency Animation

GIF Lossless (preserves file size for minimal compression of continuous horizontal regions of color)

8-bit (256 colors)

Interlaced Yes (1 degree) Yes

JPEG Lossy (trade image quality for file size)

24-bit (millions of colors)

Progressive No No

Images and Download Speed Make sure to use the correct format for the job –

GIF or JPEG? Reduce colors (the bit-depth) if possible. For a

logo with 30 colors, a 5-bit image > an 8-bit image.

Reduce the number of images in the page. Use the browser’s cache. (pre-caching or

preloading) Give a preview (progressive, interlaced). Use markup correctly (alt, height, and width)

GUI Widgets and Forms Windows—new, full-screen, sub-windows Forms Form validation: field masks Pull down menus