1. University of Washington HCDE 418 Wireframes HCDE 418

2. University of Washington HCDE 418 Agenda  Announcements  5 minutes  P2 Debrief  5 minutes  Lecture  30 minutes  Break  10 minutes  Wireframes Exercise  35 minutes  Debrief & Next Class  5 minutes  CELT Course Eval  20 minutes

3. University of Washington HCDE 418 Announcements  Your questions, comments, issues, appreciations? Upcoming work  Read: Buxton pp. 226-275 (next week)  1.5 Discussion board posts  P4: Sketches & Ideas  Due Today, Nov. 3 rd at 5:00 P.M.  3 sketches in sketchbook  A2: Storyboarding  Due Tuesday, Nov. 10 th at 5:00 P.M.

4. University of Washington HCDE 418 Announcements  P2Grades completed  Mid-quarter discussion board grades  Must have 8 posts by 5:00 P.M. Monday, Nov. 9

5. University of Washington HCDE 418 Lecture 30 minutes

6. University of Washington HCDE 418 Wireframes – what are they?  “Wireframes are a set of documents that show structure, information hierarchy, functionality, and content” –Dan Saffer, Designing for Interaction

7. University of Washington HCDE 418 Wireframes

8. University of Washington HCDE 418 What every UX designer told me you should know  “Create and maintain documentation (vision statements, personas, scenarios, wireframes, task flows, etc.)” – UX designer job in NYC  “Develop conceptual diagrams, wireframes, prototypes, visual mockups and graphic assets” – UX job in Seattle  “… wireframes, style guides, navigational structures, and affinity diagrams..” – UX job in Seattle

9. University of Washington HCDE 418 Sketch or Prototype? SketchPrototype

10. University of Washington HCDE 418 Wireframes  Wireframes are like blueprints – they document features of a product, the functionality behind the controls as well as the visual face  “Developers, industrial designers, copywriters, and business people use wireframes to understand and build the product in a thoughtful way, without being distracted by the visual or physical form” -Saffer

11. University of Washington HCDE 418 3 main components  Wireframe itself  Annotations  Wireframe metadata

12. University of Washington HCDE 418 Wireframe Itself  This is the detailed view of part of a product  The face of an MP3 player  A particular detail such as the volume control  It should show:  Content  Text, movies, images, icons, animations  Functionality  Controls, buttons, knobs, sliders, dials, input  Navigation  Indications of how navigation will work  How functional controls access the content

13. University of Washington HCDE 418 Annotations  Anything not obvious on the wireframe should have accompanying annotations  Annotate:  Controls  Conditional Items (e.g., objects dimmed out)  Constraints (e.g., longest password length)  Anything else that isn’t obvious

14. University of Washington HCDE 418 Annotations  Annotations “…explain the wireframe when the designer isn’t there to do so. When developers or clients want to know the reason for a button, they should be able to read the annotation and understand not just what the button does but also why the button is there.” -Saffer

15. University of Washington HCDE 418 Wireframe MetaData  Wireframe Metadata is information about the wireframe itself Designer’s NamePen Lister Date the Wireframe was made or changed01/01/10 Version number2 What has changed since the last versionAdded 2 new items to menu as requested Related documentationPrototype Session Report 12/12/09 Unresolved IssuesFinal list of menu items still to be agreed upon with users General NotesClient wishes to change colors? Example based on Saffer, p. 113

16. University of Washington HCDE 418 Where does user experience fit in?  Can be put into annotations  e.g., “user should feel that interaction is smooth and seamless”  e.g., “main announcements should be eye catching and exciting”

17. University of Washington HCDE 418 How to build?  Pen and paper  Adobe Illustrator  http://aiburn.com/article/building_a_website_wir eframe_in_illustrator http://aiburn.com/article/building_a_website_wir eframe_in_illustrator  HTML, Photoshop, Visio, MS Paint, etc.  Other guide:  http://www.ehow.com/how_4679059_build- website-wireframe.html http://www.ehow.com/how_4679059_build- website-wireframe.html

18. University of Washington HCDE 418

22. How to use?  Can be used in early stage usability testing  Could be given to graphic designers and content designers for creating actual components  Can be used as a guide for a more high-fidelity prototype

23. University of Washington HCDE 418 BREAK Class will resume in minute(s) 109876543210

24. University of Washington HCDE 418 Wireframe Exercise 30 minutes

25. University of Washington HCDE 418 Task: Wireframe a website  Break into teams of 2-4  Come up with a design of a website for a real or hypothetical course  20 minutes  Potential components:  Announcements, Assignments, Syllabus, Links, Discussion board, etc.  Report back in 1 minute  10 minutes

26. University of Washington HCDE 418 Next Class Topics  Thursday, Nov. 5th  Prototyping 1  Reading Assignment for Week 6  Sketching User Experiences, pp. 174-225  A2 due next Tuesday  3 sketches  8 posts by Monday

27. University of Washington HCDE 418 CELT Course Evaluation 20 minutes