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) Requirement Analysis (C) Design Prototype (D) Implementation & Unit Testing (F) Integration & System Testing Release Operation & Maintenance (F,E) Modified waterfall Vs. User-centered iterative development Discovery Exploration Refinement Production Implementation Launch Maintenance

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 change However Difficult to convince the management Developer’s habit Example s.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 Format FormatCompression Scheme Color Depth Supported Progressive or Interlaced Rendering TransparencyAnimation GIFLossless (preserves file size for minimal compression of continuous horizontal regions of color) 8-bit (256 colors) InterlacedYes (1 degree)Yes JPEGLossy (trade image quality for file size) 24-bit (millions of colors) ProgressiveNo

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