HCI and Design PDF

HCI and Design Human-Centered Design Process Human Computer Interaction 2 Toda y◦aper prototyping P An essential tool in your design toolbox! How do we design things that actually fit user needs? Problem: We can’t evaluate a design until it’s built But… After buildin...

HCI and Design Human-Centered Design Process Human Computer Interaction 2 Toda y◦aper prototyping P An essential tool in your design toolbox! How do we design things that actually fit user needs? Problem: We can’t evaluate a design until it’s built But… After building, changes to the design are difficult What to do? Solution Prototype! Prototyping Simulate the design in low-­‐cost manner Make it fast. Make it cheap. Facilitate iterative design and evaluation Your first idea is rarely your best! Promote feedback Allow lots of flexibility for radically different designs Don’t kill crazy ideas! How to prototype? Vertical -­‐ “Deep” prototyping ◦Show only portion of interface, but large amount of those portions Horizontal -­‐ “Broad” prototyping ◦Show much of  The fidelity of the prototype refers to how closely it matches the look-and-feel of the final system. Fidelity can vary in the areas of: Interactivi ty Visuals Content How to and command s prototype? High fidelity Low fidelity vs. Amount of polish should reflect maturity of the prototype... Why? “Mixed” fidelity ◦Easy access to cameras makes is easy to blur the lines between lo-­‐fi and hi-­‐fi prototypes ◦Photos of hand-­‐drawn prototypes can easily be captured and displayed on real screens ◦Sequences of photos can also be animated to simulate interaction Today: Focus on Paper-­‐ prototyping An iterative design method where potential users perform realistic tasks by interacting with a paper version of the interface that is manipulated by a person ‘playing computer,’ who doesn’t explain how the interface is intended to work. Why do it? of iterative Principle design ◦Quality is partially a function of the Design Prototype number of iterations and refinements it undergoes Evaluate Why do it? Low cost Fast to implement ◦Typical hi-­‐fi prototype takes a few weeks as opposed to a few hours Allows you to merge the design and prototyping phase together It gets everyone involved! ◦Builds teamwork in groups with diverse skill sets ◦So simple, no one gets left out Why do it? Feedback on the BIG things ◦Lo-­‐fi nature forces users to consider usability issues related to layout, control mechanism ◦Nit picking over choice of colors, buttons sizes, font choice ignored ◦Focus on Content as opposed to Appearance But I can’t draw! Drawing is hard… But it doesn’t have to be Spending too much time drawing details is unnecessary! Also, you don’t have to draw – take photos, etc. Why not to do it? Does not produce anything concrete May seem unprofessional to some users ◦Maybe not the right prototype for the VCs  Can’t represent some effects with paper Typically, you start with several rounds of paper prototyping, and move towards Building a lo-­‐fi prototype Gather essential materials ◦White unlined paper ◦5 by 8 inch cards ◦Adhesives ◦Markers ◦Sticky pads ◦Scissors ◦Anything else you think of!!! Building a lo-­‐fi prototype Don’t ◦ get carried away with design! Goal is to get as much user feedback as possible ◦Set a deadline – forget minor details Building a lo-­‐fi prototype Draw generic frames Make everything needed to simulate effects Photocopier/camera is your friend! Preparing for a test Select ◦ users Perform user and task analysis ◦Find out educational background, knowledge of computers, typical tasks required ◦Get testers who fit the final user profile Preparing for a test test Ready scenarios Practice ◦Sort out bugs/hitches before the real testing ◦Get everyone comfortable with their role  Conducting a test Facilitator ◦Encourage user to express thoughts ◦(don’t influence decisions!!!!) ◦Giving instructions ◦Making sure timing is met Conducting a test “Computer” person ◦Arranges the paper prototype according to user input ◦Needs to be organized ◦Knows the prototype well ◦Make changes quickly Conducting a test Observers ◦Take notes ◦Write possible solutions to problems faced ◦Cannot react to user’s actions Evaluating results Summarize problems (e.g., make a list) ◦Usability issues ◦Missing (or mis-­‐specified) functional requirements ◦Preferences for different alternatives ◦User priorities ◦Issues outside the user interfaces (e.g., high-­‐level understanding) Prioritize problems Construct revised prototype Iterate, iterate, iterate! Conclusion: Paper Prototyping An important prototyping tool (but not the only tool!) Quick to build/refine, thus enabling rapid design interactions. Useful tool for speeding up the process of iterative design Requires minimal resources and materials (cheap!) Detects usability problems at a very early stage before implementation. Focus on the “right” things early on Promotes communication between stakeholders. Team members gain understanding of user needs and priorities