User Centered Web Site Engineering

1
User Centered Web Site Engineering

• Part 2

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

3
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?

4
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

5
Navigation Issues

• Consistency
• Scrolling
• Mouse travel
• Frames
• Subwindows

6
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

7
Defining Key User Paths

• Paper prototyping
• Interactive wireframing
• Key user tasks
• Nonfunctional
• Functional
• User Scenarios
• Multiple scenarios
• Users and tasks

Content layout (wireframes, storyboard)
8
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
• Developers habit
• Example
• http//www.nngroup.com/reports/prototyping/video_s
  tills.html

9
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

10
Visual Design Principles

• Alignment
• Proximity
• Paragraph vs. break
• Repetition
• Contrast

11
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

12
Style Guide

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

13
GUI Widgets and Forms

• Windowsnew, full-screen, sub-windows
• Forms
• Form validation field masks
• Pull down menus