1 / 30

Web Design Process

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.

lbeard
Download Presentation

Web Design Process

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Design Process CMPT 281

  2. Outline • How do we know good sites from bad sites? • Web design process • Class design exercise

  3. Good sites and bad sites

  4. Good sites and bad sites

  5. Good sites and bad sites

  6. Good sites and bad sites

  7. Good sites and bad sites

  8. Good sites and bad sites

  9. 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

  10. Design Exercise

  11. 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

  12. Design ProcessExploration

  13. 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

  14. 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

  15. Important concepts • Design • Representation • Usability • User capabilities • Task analysis • Rapid prototyping • User evaluation • (these will all be covered in more detail later!)

  16. 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

  17. Web Design Representations Site Maps

  18. Web Design Representations Templates

  19. Web Design Representations Storyboards

  20. Web Design Representations Mock-ups

  21. 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

  22. 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 Usability/User Experience Goals • Set goals early & later use to measure progress • Goals often have tradeoffs, so prioritize • Example goals

  23. 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

  24. …so, how do you get to know the user?

  25. Task Analysis & Contextual Inquiry • Observe existing work practices • Create examples & scenarios of actual use • Try out new ideas before building software

  26. Fantasy Basketball 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.

  27. ESP Evaluation • Test with real customers (participants) • w/ interactive prototype • low-fi with paper “computer” • Low-cost techniques • expert evaluation • remote, online testing

  28. Design Exercise

  29. 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?

  30. Next…

More Related