User Centered Web Site Engineering Part 2

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

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 Stories about people and their activities 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 Principles Alignment Proximity Paragraph vs. break Repetition Contrast

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

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