web design process cmpt 281. outline how do we know good sites from bad sites? web design process...
TRANSCRIPT
![Page 1: Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise](https://reader030.vdocuments.mx/reader030/viewer/2022032600/56649dbd5503460f94aaf4ae/html5/thumbnails/1.jpg)
Web Design Process
CMPT 281
![Page 2: Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise](https://reader030.vdocuments.mx/reader030/viewer/2022032600/56649dbd5503460f94aaf4ae/html5/thumbnails/2.jpg)
Outline
• How do we know good sites from bad sites?• Web design process• Class design exercise
![Page 3: Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise](https://reader030.vdocuments.mx/reader030/viewer/2022032600/56649dbd5503460f94aaf4ae/html5/thumbnails/3.jpg)
Good sites and bad sites
![Page 4: Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise](https://reader030.vdocuments.mx/reader030/viewer/2022032600/56649dbd5503460f94aaf4ae/html5/thumbnails/4.jpg)
Good sites and bad sites
![Page 5: Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise](https://reader030.vdocuments.mx/reader030/viewer/2022032600/56649dbd5503460f94aaf4ae/html5/thumbnails/5.jpg)
Good sites and bad sites
![Page 6: Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise](https://reader030.vdocuments.mx/reader030/viewer/2022032600/56649dbd5503460f94aaf4ae/html5/thumbnails/6.jpg)
Good sites and bad sites
![Page 7: Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise](https://reader030.vdocuments.mx/reader030/viewer/2022032600/56649dbd5503460f94aaf4ae/html5/thumbnails/7.jpg)
Good sites and bad sites
![Page 8: Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise](https://reader030.vdocuments.mx/reader030/viewer/2022032600/56649dbd5503460f94aaf4ae/html5/thumbnails/8.jpg)
Good sites and bad sites
![Page 9: Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise](https://reader030.vdocuments.mx/reader030/viewer/2022032600/56649dbd5503460f94aaf4ae/html5/thumbnails/9.jpg)
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
![Page 10: Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise](https://reader030.vdocuments.mx/reader030/viewer/2022032600/56649dbd5503460f94aaf4ae/html5/thumbnails/10.jpg)
Design Exercise
![Page 11: Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise](https://reader030.vdocuments.mx/reader030/viewer/2022032600/56649dbd5503460f94aaf4ae/html5/thumbnails/11.jpg)
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
![Page 12: Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise](https://reader030.vdocuments.mx/reader030/viewer/2022032600/56649dbd5503460f94aaf4ae/html5/thumbnails/12.jpg)
Design ProcessExploration
![Page 13: Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise](https://reader030.vdocuments.mx/reader030/viewer/2022032600/56649dbd5503460f94aaf4ae/html5/thumbnails/13.jpg)
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
![Page 14: Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise](https://reader030.vdocuments.mx/reader030/viewer/2022032600/56649dbd5503460f94aaf4ae/html5/thumbnails/14.jpg)
Patterns in Exploration Phase
Tend to be more abstract
Site genres
Navigational framework
Home page
Content management
Trust and credibility
Basic ecommerce
Advanced ecommerce
Completing tasks
Page layouts
Search
Page-level navigation
Speed
![Page 15: Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise](https://reader030.vdocuments.mx/reader030/viewer/2022032600/56649dbd5503460f94aaf4ae/html5/thumbnails/15.jpg)
Important concepts
• Design• Representation• Usability• User capabilities• Task analysis• Rapid prototyping• User evaluation• (these will all be covered in more detail later!)
![Page 16: Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise](https://reader030.vdocuments.mx/reader030/viewer/2022032600/56649dbd5503460f94aaf4ae/html5/thumbnails/16.jpg)
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
![Page 17: Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise](https://reader030.vdocuments.mx/reader030/viewer/2022032600/56649dbd5503460f94aaf4ae/html5/thumbnails/17.jpg)
Web Design Representations
Site Maps
![Page 18: Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise](https://reader030.vdocuments.mx/reader030/viewer/2022032600/56649dbd5503460f94aaf4ae/html5/thumbnails/18.jpg)
Web Design Representations
Templates
![Page 19: Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise](https://reader030.vdocuments.mx/reader030/viewer/2022032600/56649dbd5503460f94aaf4ae/html5/thumbnails/19.jpg)
Web Design Representations
Storyboards
![Page 20: Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise](https://reader030.vdocuments.mx/reader030/viewer/2022032600/56649dbd5503460f94aaf4ae/html5/thumbnails/20.jpg)
Web Design Representations
Mock-ups
![Page 21: Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise](https://reader030.vdocuments.mx/reader030/viewer/2022032600/56649dbd5503460f94aaf4ae/html5/thumbnails/21.jpg)
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
![Page 22: Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise](https://reader030.vdocuments.mx/reader030/viewer/2022032600/56649dbd5503460f94aaf4ae/html5/thumbnails/22.jpg)
Usability/User Experience 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
• Set goals early & later use to measure progress• Goals often have tradeoffs, so prioritize• Example goals
![Page 23: Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise](https://reader030.vdocuments.mx/reader030/viewer/2022032600/56649dbd5503460f94aaf4ae/html5/thumbnails/23.jpg)
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
![Page 24: Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise](https://reader030.vdocuments.mx/reader030/viewer/2022032600/56649dbd5503460f94aaf4ae/html5/thumbnails/24.jpg)
• …so, how do you get to know the user?
![Page 25: Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise](https://reader030.vdocuments.mx/reader030/viewer/2022032600/56649dbd5503460f94aaf4ae/html5/thumbnails/25.jpg)
Task Analysis & Contextual Inquiry
• Observe existing work practices• Create examples & scenarios of actual use• Try out new ideas before building software
![Page 26: Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise](https://reader030.vdocuments.mx/reader030/viewer/2022032600/56649dbd5503460f94aaf4ae/html5/thumbnails/26.jpg)
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
![Page 27: Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise](https://reader030.vdocuments.mx/reader030/viewer/2022032600/56649dbd5503460f94aaf4ae/html5/thumbnails/27.jpg)
ESP
Evaluation• Test with real customers
(participants)– w/ interactive prototype– low-fi with paper “computer”
• Low-cost techniques– expert evaluation– remote, online testing
![Page 28: Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise](https://reader030.vdocuments.mx/reader030/viewer/2022032600/56649dbd5503460f94aaf4ae/html5/thumbnails/28.jpg)
Design Exercise
![Page 29: Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise](https://reader030.vdocuments.mx/reader030/viewer/2022032600/56649dbd5503460f94aaf4ae/html5/thumbnails/29.jpg)
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?
![Page 30: Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise](https://reader030.vdocuments.mx/reader030/viewer/2022032600/56649dbd5503460f94aaf4ae/html5/thumbnails/30.jpg)
Next…