Transcript 03-design-processx

Web Design Process
CMPT 281
Outline
• How do we know good sites from bad sites?
• Web design process
• Class design exercise
Good sites and bad sites
Good sites and bad sites
Good sites and bad sites
Good sites and bad sites
Good sites and bad sites
Good sites and bad sites
Web Design Process Overview
• Discovery
– assess needs
• Exploration
– create multiple designs
• Refinement
– detail chosen design
• Production
– prepare for handoff
• Implementation
– build site
• Launch!
• Maintenance
– measure & improve
Design Exercise
Design Exercise
• Design the perfect website for CMPT 281
– You are the users (and the designers)
– What do students want to do at a course site?
– What are the prof’s goals for the site?
– What are the main tasks?
– How will you organize the site and the pages?
– Sketch it out!
– We will discuss your designs at the end of class
Design Process
Exploration
Goals of Exploration Phase
• Generate multiple designs
– visualize solutions to discovered issues
– information & navigation design
– early graphic design
• Select one design for further development
– use patterns, usability testing, & client feedback to
evaluate
Patterns in Exploration Phase
Tend to be more abstract
Site genres
Advanced ecommerce
Navigational framework
Completing tasks
Home page
Page layouts
Content management
Search
Trust and credibility
Page-level navigation
Basic ecommerce
Speed
Important concepts
•
•
•
•
•
•
•
•
Design
Representation
Usability
User capabilities
Task analysis
Rapid prototyping
User evaluation
(these will all be covered in more detail later!)
Design
• Design is driven by requirements
– what the artifact is for
– not how it is to be implemented
– e.g., phone not as important as “mobile” app.
• A design represents the artifact
– for websites these representations include:
• screen sketches or storyboards
• flow diagrams/outline showing task structure
• executable prototypes
– representations simplify
Web Design Representations
Site Maps
Web Design Representations
Templates
Web Design Representations
Storyboards
Web Design Representations
Mock-ups
Usability
According to the ISO:
The effectiveness, efficiency, and satisfaction
with which specified users achieve specified
goals in particular environments
• This does not mean you have to create a
boring design or something that is only good
for novices – it all depends on your goals
Usability/User Experience Goals
• Set goals early & later use to measure progress
• Goals often have tradeoffs, so prioritize
• Example goals
– Learnable
• e.g., faster each time through
– Memorable
• from session to session
– Flexible
• multiple ways to do tasks
– Efficient
• perform tasks quickly
– Robust
• minimal error rates
• good feedback so user can
recover
– Discoverable
• learn new features over time
– Pleasing
• high user satisfaction
– Fun
User-centred Design
“Know thy User”
• Cognitive abilities
– perception
– physical manipulation
– memory
• Organizational / job abilities
• Keep users involved throughout
– developers working with target customers
– think of the world in users terms
– not technology-centered/feature driven
• …so, how do you get to know the user?
Task Analysis & Contextual Inquiry
• Observe existing work practices
• Create examples & scenarios of actual use
• Try out new ideas before building software
Rapid Prototyping
• Build a mock-up of design
so you can test
• Low fidelity techniques
– paper sketches
– cut, copy, paste
• Interactive prototyping
tools
– HTML, PowerPoint, Flash,
etc.
Fantasy Basketball
Evaluation
• Test with real customers
(participants)
– w/ interactive prototype
– low-fi with paper “computer”
• Low-cost techniques
– expert evaluation
– remote, online testing
ESP
Design Exercise
Design Exercise
• Design the perfect website for CMPT 281
– You are the users (and the designers)
– What do students want to do at a course site?
– What are the prof’s goals for the site?
– What are the main tasks?
– How will you organize the site and the pages?
Next…