User%20Centered%20Web%20Site%20Engineering

1
User Centered Web Site Engineering

• Part 1

2
Evolution of Web Site Engineering

• Early generations of Web sites
• Document-centered Web page design
• Information design content, presentation and
  structure
• Software-centered Web site development
• Functionality, Interface
• Dynamic HTML, Java, JavaScript, VBScript, CGI,
  ASP
• Complexity and ad hoc methodology

3
(No Transcript)
4
(No Transcript)
5
Usability

• Definition
• Ease of use effectiveness, efficiency, and
  satisfaction
• A specific group of users
• Specified goals and tasks
• Specified context of use
• The completion time for a typical visit and the
  number of errors made during the visit

6
Usability

• Learnability easy to learn
• Rememberability easy to remember how to use
• Efficiency of use doesnt require a lot of work
  on the part of user
• Reliability in use it works correctly and helps
  users perform tasks correctly
• User satisfaction directly related to usability
• Usability varies by users, environment, and The
  Web as the medium (screen size, technologies,
  networks, browsers.)

7
Action-Reaction-Action Loop
Sensation
Perception
Action
Memory
8
Common User Characteristics

• Stimulus
• Threshold
• Surprise
• Sensory adaptation
• Movement
• Mouse
• Keyboard
• Environment
• Location

• Vision
• Hue (color)
• Value (saturation)
• Lightness (contrast)
• Memory
• Recognition gt Recall
• 7 /- 2
• Response time
• Payoff
• Browser and site feedback? Progress of download
• Time gt Bytes
• Use preload

9
General Types of Users

• Novices
• Prefer extra clicks with extra feedback
• Experts/Power Users
• Frequent and Infrequent visitors
• Advanced features
• Familiarity with site structure
• (Infrequent) Intermediate Users

10
Usability Heuristics (Jacob Nielsen)

• Simple and natural dialogue
• Speak the users language
• Minimize the users memory load
• Consistency
• Feedback
• Clearly marked exits
• Shortcuts
• Precise and constructive error messages
• Prevent errors
• Help and documentation

11
Web Usability Guidelines

• Be consistent.
• Dont violate users expectations. Respect Web
  and GUI conventions.
• Use surprise properly and sparingly.
• Simplify the site and individual pages.
• Rely on recognition, not recall.
• Do not assume users will read instructions.
• Try to prevent or correct errors.
• Provide feedback.
• Support different interaction styles
• Minimize mouse travel and keystrokes.
• Consider medium of consumption.
• Consider environment of use.
• Focus on speed.

12
(No Transcript)
13
The Medium of the Web Client Side Considerations

• Local environment hardware, browser, bandwidth,
  technology not under a developers control
• Lowest Common Denominators (LCD)
• Client Profiling
• Display, address, proxy server

14
The Medium of the Web Server Side Considerations

• Within the developers control
• Server network connection
• Server hardware,
• Web server
• Database
• Bandwidth
• Web Application Hosting

15
Methodology?

• Modified Waterfall model
• Problem definition and concept exploration
• Requirements Analysis and Specification
• Design Prototyping
• Implementation and Unit Testing
• Integration and System Testing
• Operation and Maintenance
• Other considerations
• Documentation and RAD
• Spiral Model Modified Waterfall with a whirlpool
  for Risk Analysis (page 112)
• Evaluation

16
(No Transcript)
17
Modified waterfall with risk analysis whirlpool
Problem Definition (B, E)
Requirement Analysis (C)
Design Prototype (D)
Implementation Unit Testing (F)
Integration System Testing
Release Operation Maintenance (F,E)
18
SE/IS vs. Web Site Development

• Unfamiliar territory
• Aggressive release schedule
• Document centric
• Look and feel (GUI heritage)
• Tools are not mature
• Unpredictable environment
• Marketing
• Culture and skill sets
• Ad hoc methodology
• Users?

• More stable context
• Longer development timeframe
• Mature technology and methodology
• Functionality- and data-centric
• Longer life cycle

19
A Balance of Three Component

• Information Design
• Information architecture and content presentation
  (user mental model)
• Interface Design
• Graphics and navigation (prototyping)
• System Design
• Functionality
• Programming and Database
• (prototyping and testing)
• Determined by Site Complexity and Functionality

20
A well Engineered Web Site should be

• Correct
• Testable
• Maintainable
• Portable and Scalable
• Reusable
• Robust and Reliable
• Efficient
• Well documented
• Appropriately presented
• USER CENTERED

21
Business Case

• Purpose
• Value Proposition
• Clear and Measurable Goals
• Business Models
• User Profile
• Competition
• Measures of Success

22
Audience User Profile

• Location
• Age
• Gender
• Language
• Technical Proficiency
• Connection
• Computer
• Browser

• Entry and Exit
• Tasks
• Time and Frequency
• Profiling
• Novice
• Infrequent Intermediate Users
• Frequent and Experienced Users
• Type of purchase and purchasing behavior

23
Requirement Analysis-- The Site Plan

• Visual requirement
• Technical requirements
• Delivery requirement
• Staffing
• Time line
• Budget

• Short goal statement
• Detailed goal discussion
• Audience discussion
• Use scenario discussion
• Content requirements
• Site structure diagram (information architecture)

24
Requirement Analysis

• Environment
• B2C, B2B, or Intranet
• Browser, connectivity, monitor, servers, target
  platform, ISP
• LCD platform640x480,
• Infrastructure
• Static versus Dynamic
• Database
• Performance requirement

25
Requirement Analysis

• Marketing
• Communication standards
• Branding
• Content
• What to include? Repurpose existing content.
• Less is More! And Chunking
• Information Architecture
• Functionality
• Features
• Resource Requirement

26
Design and Prototyping

• Navigation design and layout
• Graphics
• Database
• Transaction process flow
• Paper Prototype

27
Implementation and Testing

• Programming
• Content and graphics

28
Testing

• Visual acceptance testing
• Functionality testing
• Content proofing
• System and browser compatibility testing
• Delivery testing
• User acceptance testing

29
Release, Promotion, and Maintenance

• Marketing and promotion
• Evaluate site performance
• Site traffic and log analysis
• Update and maintenance

30
Process vs. Components
Problem Definition (B, E)
Requirement Analysis (C)
Design Prototype (D)
C information design D. Interface design F
System Design
Implementation Unit Testing (F)
Integration System Testing
Release Operation Maintenance (F,E)
31
Web Site Types
Intranets Extranets Public Sites
Info about users High Medium Low
Capacity Planning Possible Usually possible Difficult
Bandwidth High Varies Varies Greatly
Control of technology Yes Sometimes Rarely
32
Interactive vs. Static Sites

• Static Sites
• Content is relatively fixed
• A visitor has minimal ability to interact with
  the sites content other than choosing the order
  in which to view content
• Dynamic Sites
• Pages of the site are generated at request or
  view time for the user
• May be personalized

33
Information Design

• Hypertext theory
• Page as an unit of information
• Inter-related pages
• Fragment of information
• Chunking
• Structure Information Architecture

34
Information Architecture

• Organization of site content (pages), blueprint
  to aid the development process a logical
  structure
• Representation of user mental model
• Determined by predictability and expressiveness
• Linear (w/ alternatives, w/options, w/side trips)
• Grid
• Hierarchy
• Wide Hierarchy Breadth of choice
• Narrow Hierarchy Focus
• Mixed Forms
• Splash Page?

35
(No Transcript)
36
Users and Site Structures

• Keep in mind the perspective of the user visiting
  the site
• Home Page vs. many entry points (every page)
• Conclusion page vs. many exit points
• Visit phase unaware of the underlying site
  structure
• Spatial orientation and preference for navigation
  in terms of location
• Novice users prefer sites with predictable
  structure and follow links
• Experience/power users desire control and choices

37
Porous, Semiporous, and Solid Site Structure

• Porous Form
• Put users in control, allows the user to enter
  any URL directly or enter by bookmark
• Decrease ability to change deep pages without
  addressing outside linking not providing one
  common entry point
• Solid Form
• Does not expose site structure, easier to
  maintain and modify, forces user to enter through
  known points, easier to track user path
• Remove users from control, limit the
  effectiveness of outside search engines
• Semiporous Form

38
Deep vs. Shallow Sites

• Narrow vs. wide hierarchy
• Site depth of three clicks
• Feedback to show progress
• Positive feedback indicating progress
• 5-9 clusters (7 /- 2) and 5-9 items per cluster
  25-81 links per page
• Redundant links for more important pages

39
E-Commerce Design Guidelines

• Home Page
• Keep the home page clean and not cluttered with
  text and graphics
• Avoid horizontal scrolling.
• Navigation
• Text on the links or buttons should be
  descriptive and self explanatory.
• Links to another product-related Web site should
  be direct.

• Source Research findings from Rehman, 2000
  Hurst Gellady, 2000 Hurst Terry, 2000

40
E-Commerce Design Guidelines

• Categorization
• Categorize products meaningfully with no more
  than three levels in depth.
• Product Information
• Provide accurate, consistent, and detailed
  descriptions of products along with full
  pictures.
• Present inventory information and related charges
  up front.
• The size of products should be shown in a
  measurable and comparable way.

• Source Research findings from Rehman, 2000
  Hurst Gellady, 2000 Hurst Terry, 2000

41
E-Commerce Design Guidelines

• Checkout and Registration
• The vendor should only ask for necessary and
  meaningful information, such as name and address,
  not asking marketing questions.
• Customers should be allowed to browse the site
  without logging in.
• Customer Service
• Customers should be provided with a 1-800
  telephone number on every page of the site.

• Source Research findings from Rehman, 2000
  Hurst Gellady, 2000 Hurst Terry, 2000