Lecturer: Ellis E' Confer

1
Ecommerce Website Engineering ECT 455 Winter 2004

• Lecturer Ellis E. Confer
• E-mail econfer_at_cs.depaul.edu
• Office Hours Monday 430 600 pm

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

• 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

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

9
General TPost purchases

• 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
Optional Development Methodologies

• 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
Traditional Systems Engineering vs. Web Site
Development

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

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

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
Characteristics of a Well-engineered Web Site

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

21
Elements of a 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

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

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

24
Requirement Analysis

• Environment
• B2C, B2B, or Intranet
• Browser, connectivity, monitor, servers, target
  platform, ISP
• Least Common Denominator (LCD) platform640x480,
  plus 28.8kbs connectivity.
• 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
Problem Definition (B, E)
Process vs. Components
Requirement Analysis (C)
Design Prototype (D)
Deliverables 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
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 Website 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 Website 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 Website 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

42
Remember the Basic B2C Business Models

• Merchant Model
• Virtual merchants
• Catalogue merchants
• Click Brick
• Advertising/Subscription Model
• Horizontal portal
• Vertical portal
• Personalized portal

• Sponsorship/Brokerage/Intermediary
• Buy/sell fulfillment
• Buyer/demand aggregator
• Virtual mall
• Hypermediary (financial settlement)
• Auction broker
• Reverse auction

43
Remember The Value Chain Taken From the
Perspective of Consumers and Producers
Attract
Interact
Act
React
44
Roles in Consumer Decision Making
Initiator
Decider
Influencer
User
Buyer
Shopping is two-dimensional Hedonic or
utilitarian
45
Mercantile Model Consumers and Producers
Perspective
Attract

• Prepurchase Interaction
• Product/service search
• Comparison shopping
• Negotiation of terms
• Purchase Consummation
• Placement of order
• Authorization of payment
• Receipt of product

• Presales Interaction
• Consumer inquiry and order
• planning generation
• Cost estimation and pricing of
• product services
• Product Service Production and Delivery
• Order receipt and entry
• Order selection and prioritization
• Order scheduling
• Order fulfillment and delivery

Interact
Act

• Post-Sales Interaction
• Order billing and account/payment management
• Customer service and support

• Post purchase Interaction
• Customer service and support

React
46
Some Website Design Guiding Principles

• Consumers must be compensated for disclosing data
  about themselves.
• Trusted brand names matter even more on the web.
• Self-service provides the highest level of
  customer comfort and satisfaction
• The quantity of people visiting your site is less
  important than the quality of their experience.

47
When to Use Electronic Catalog Merchant Servers?

• Have an existing paper or electronic catalog
  operation
• Sell Internet services, such as Internet hosting,
  design, and connectivity.
• Want to own the hardware/software for Web
  commerce.
• Desire more flexibility and control than 3-party
  providers can offer
• Do not have products or services that require
  complex pricing or configuration processing
• Do not have complex database integration
  requirements
• Have some technical resources in-house to set up
  the software

48
Common Features of Packaged Catalog Solutions

• Electronic store setup
• Product presentation
• Order processing
• Payment processing
• Support for third-party software such as shipping
  and tax calculation packages
• Examples iCat, BroadVision, OpenMarket

49
BroadVision (broadvision.com)

• 11 relationship Management
• Front-end dynamic content presentation based on
  customer profile information
• Tailor content to the customers preferences,
  requirements, and characteristics
• Personalize content using a variety of matching
  techniques (searches/community filtering)
• Establish communities of interests that link
  visitors together by matching their interests and
  behaviors with community-based web site services
  and contents
• Dynamic Command Center -- marketing, advertising,
  and editorial management based on business rules

50
OpenMarket (openmarket.com)

• Provider of heavy-duty transaction processing
  systems for EC
• OM Transact 4 -- payment processing, order
  management, customer service
• Live Commerce industrial strength Internet
  catalogs
• Shop Site Internet storefront for medium and
  small business

51
Designing the User Experience(Usability
Professional Association)

• Analysis Phase
• Design Phase
• Implementation Phase
• Deployment Phase

52
Designing the User ExperienceAnalysis Phase

• Meet with key stakeholders to set vision
• Include usability tasks in the project plan
• Assemble a multidisciplinary team to ensure
  complete expertise
• Develop usability goals and objectives
• Conduct field studies
• Look at competitive products
• Create user profiles
• Develop a task analysis
• Document user scenarios
• Document user performance requirements

53
Designing the User ExperienceDesign Phase

• Begin to brainstorm design concepts and metaphors
• Develop screen flow and navigation model
• Do walkthroughs of design concepts
• Begin design with paper and pencil
• Create low-fidelity prototypes
• Conduct usability testing on low-fidelity
  prototypes
• Create high-fidelity detailed design
• Do usability testing again
• Document standards and guidelines
• Create a design specification Novices

54
Designing the User ExperienceDevelopment Phase

• Do ongoing heuristic evaluations
• Work closely with delivery team as design is
  implemented
• Conduct usability testing as soon as possible

55
Designing the User ExperienceDeployment Phase

• Use surveys to get user feedback
• Conduct field studies to get info about actual
  use
• Check objectives using usability testing

56
User Experience Design (Vergo et al., 2003)

• Business goals definition
• User identification
• Task analysis
• User concept modeling
• Competitive analysis
• Interaction design
• Visual design
• Usability testing

57
Next Session Highlights

• Review reading assignments
• T S Ch 16
• Powell Ch 7, 8, 10, 12, 14
• Deliverable C Due