12_PrototypingPhasesAndApproaches.pdf

COMP 3020: Human-Computer Interaction I Prototyping: Phases and Approaches Andrea Bunt, with acknowledgements to Anthony Tang, James Young, Pourang Irani, Julie Kientz, Michael Terry, Saul Greenberg, Christopher Collins, Karyn Moffatt, Scott Klemmer Use...

COMP 3020: Human-Computer Interaction I Prototyping: Phases and Approaches Andrea Bunt, with acknowledgements to Anthony Tang, James Young, Pourang Irani, Julie Kientz, Michael Terry, Saul Greenberg, Christopher Collins, Karyn Moffatt, Scott Klemmer User Centered Design Process Produce something tangible Identify challenges Uncover subtleties 2  Prototyping phases Early design brainstorm different representations choose a representation low fidelity prototypes less cost sketch out interface style task centered walkthrough medium-fidelity prototypes fine tune interface, screen design heuristic evaluation and redesign high-fidelity prototypes / usability testing and redesign restricted systems limited field testing alpha/Beta tests working systems more cost Late design 3  Low-Fidelity Prototyping Fidelity refers to level of detail High fidelity implies finished or detailed Low fidelity implies incomplete or lacking some detail Why low-fidelity? Cheaper, faster to create Can explore multiple alternative designs without getting stuck on technical details Users often more inclined to comment on designs that appear less “finished” 4  Low-Fidelity Prototyping How: Paper-based sketches Paper prototypes Physical mock-ups using paper, cardboard 5  Why sketching? Forces you to visualize how things come together Communicates ideas to others (and oneself) to inspire new designs Drawing ability irrelevant 6 Disposable If you can’t afford to throw it away, it’s not a sketch Not as attached as a fully implemented prototype The way it’s rendered (e.g., style, form, signals) makes it distinctive that it is a sketch Promotes constructive criticism 7  Freedom Sense of openness and freedom Abstracts away details Opposite of engineering drawing, which is tight and precise vs. 8 Low-Fidelity: Storyboards 9  Storyboards “comic book” approach, a series of keyframes as sketches—illustrates a sequence originally from film; used to get the idea of a scene snapshots of the interface at particular key points in the interaction Team can evaluate quickly the direction the interface is heading use with your personas (i.e., user profiles) and tasks 10 Storyboards 11  Storyboarding the System Concept See Scott Klemer’s video: https://www.youtube.com/watch?v=12OpiFIF26Y&t=58 This approach to storyboarding conveys: Setting: People involved Environment Task being accomplished Sequence: What steps are involved What leads to someone using the system Satisfaction: What’s the user’s motivation What’s the end result What need are you “satisfying”? Good for conveying design concept and context of use 12  Storyboarding the Interaction: Example A sequence of interface sketches or mockups, with descriptions on how the task proceeds File Song Options (1) This is the main Song Pool Play List screen after a file has been opened. The 3:28 Little Green 3:51 California song title and duration 4:05 River of each song in the file 3:34 All I Want 4:23 A Case of You appears in the Song 2:52 This Flight Tonight Pool. The Play list duration is initially zero. Play list duration: 0:00 13  Storyboarding the Interaction: Example File Song Options Song Pool Play List 3:28 Little Green 3:51 California 4:05 River 3:34 All I Want 4:23 A Case of You 2:52 This Flight Tonight Play list duration: 0:00 (2) The user wants to add a song to the Play List so she has clicked on the song "River" to select it. 14  Storyboarding the Interaction: Example File Song Options Song Pool Play List 3:28 Little Green 4:05 River 3:51 California 3:34 All I Want 4:23 A Case of You 2:52 This Flight Tonight Play list duration: 4:05 (3) The user has clicked on the ">>" button to move the selected song to the Play List. The play list duration is automatically computed and updated beneath the playlist 15  Storyboarding the Interaction: Example File Song Options Song Pool Play List 3:28 Little Green 4:05 River 3:34 All I Want 4:23 A Case of You 3:51 California 2:52 This Flight Tonight Play list duration: 7:56 (4) In a similar fashion the user has moved the song "California" to the Play List. 16  Storyboarding the Interaction: Example File Song Options Song Pool Play List 3:28 Little Green 4:05 River 3:34 All I Want 4:23 A Case of You 3:51 California 2:52 This Flight Tonight Play list duration: 7:56 (5) Now the user has changed her mind and doesn't want "River" in the Play List. She selects "River" by clicking on it. 17  Storyboarding the Interaction: Example File Song Options Song Pool Play List 3:28 Little Green 3:51 California 3:34 All I Want 4:23 A Case of You 2:52 This Flight Tonight 4:05 River Play list duration: 3:51 (6) The user has clicked on the "