Human-Computer Interaction 12. Design – Part 2. Design: Prototyping Sunyoung�Kim,�PhD�
Last class 1. Brainstorming 2. Sketch 3. Scenario 4. Storyboard
Recap: Brainstorming: Sharpen the focus Posing the right problem is critical • – neither too narrow, nor too fuzzy Not “bicycle cup-holders” but • “helping cyclists to drink coffee without accidents”
Recap: Brainstorming: Number your ideas Obvious but very useful • Helps keep track of them during brainstorming (100 or more ideas can • be in play) Allows ideas to take on an identity of their own •
Recap: Brainstorming
Recap: Why sketching? Designers do not draw sketches to externally represent ideas that are already consolidated in their minds. Rather, they draw sketches to try out ideas, usually vague and uncertain ones. - Suwa & Tverksey
Sketching practices Sketch frequently • No bad ideas or sketches (don’t erase) • Always annotate (for your future self & • others) Explore broad space (getting right design) • Refine and iterate (getting design right) • Record ideas you see elsewhere • Collect existing materials (printouts, • magazines)
Recap: Scenarios Motivation – what prompted the persona to embark on the scenario? • Context – where is the person while the scenario is taking place? Does • it change? Who else and where else is involved? Distractions – What kinds of distractions or interruptions typically occur • and how does the persona deal with them? Goal – What is the persona’s goal? Information seeking? An artifact? An • emotion?
Recap: Storyboards The point of storyboards is to convey the experience of using the • proposed system Include people experiencing the design and their reactions to it • Visual elements: Detail, text, people, frame, portrayal of time •
Prototype
Sketch vs. Prototype
Prototype A prototype is not the final product! Do not expect it to look like the final product. • A simulation of the final product • Using visuals to describe how a system should behave • To test whether or not the flow of the product is smooth and consistent • To test the feasibility and usability of our designs before we actually begin writing code
Prototype • A representation of an interactive system Support creativity - Encourage communication - Permit early evaluation - • Users often can’t articulate clearly what they need/want; If you give them something and they get to use/test it, they know what they don’t want • A designer needs a bridge between talking to users in the abstract about what they might want and building a full-blown system: Prototype is that bridge - “A picture speaks a thousand words”
Prototyping process Interactive Paper prototyping Wireframing sketches Coding
Prototyping process Interactive Paper prototyping Wireframing sketches Coding User testing User testing User testing User testing
Prototyping process Interactive Paper prototyping sketches Wireframing Low fidelity Medium fidelity High fidelity
Low fidelity Rapid prototyping – Paper prototype A starting point: easy to create and very easy to deliver • Allow you to check that concepts and requirements have been fully- • understood without putting in too much effort Ideal during brainstorming (early exploration of design ideas) • Static and usually have low visual and content fidelity • A quick way to create rough mock-ups of design approaches : Allows • making changes easily and quickly à This forces users to focus on how they will use the system instead of what it will look like , and it makes designers more open to changes based on user feedback
Paper prototype examples
Storyboard (scenario in prototype)
Storyboard (scenario in prototype)
Interactivity in paper prototypes
Paper prototype Use printable sketching templates
Medium fidelity • Wireframe • Using computer-based tools (e.g., balsamiq, visio) • Take more time and effort but look more formal and refined: more detailed than sketches • Interactivity can be simulated à You don’t need to make these things pretty but you do need to include enough detail to see how the system performs à Force users to view it as a draft or work in progress, rather than a polished and finished product à Prototype a high visual fidelity (e.g., done in Photoshop) makes the user to focus on the visual design and look and feel, including color, fonts, layout, logo and images
High fidelity • The most realistic but time-intensive • The only way to create high-fidelity prototypes used to actually code using a programming language; these days, you can create high-fidelity prototypes that simulate the Functionality of the final product without coding (e.g., Axure, iRise, omni graffle) • Appropriate when high visual and functional fidelity is required • An excellent reference for developers • Tools: https://www.cooper.com/prototyping-tools
High fidelity prototype examples
Lo-fi to hi-fi prototype
Lo-fi to hi-fi prototype
Flowchart
Flowchart • Specific sequence of actions • Visualize the entire process of how a user walk through the system • Visualize what is going on and thereby help understand a process, and perhaps also find flaws, bottlenecks, and other less-obvious features within it
Flow chart
User testing with prototypes
Wizard of Oz A rapid-prototyping method for systems costly to build or requiring new technology. A human “Wizard” simulates the system’s intelligence and interacts with the user through a real or mock computer interface.
Wizard of Oz • Makes it possible to test functionality that does not yet exist • Can simulate different system behaviors and test result (e.g., speed of ticket from input to output) • Can simulate errors and test result • Common in areas such as intelligent agents, human-robotic interaction
Wizard of Oz
Individual project
Individual project I2-Part 3: Data analysis Conduct data analysis 1) Survey data analysis: Graphical representation with descriptive statistics (Slide09: P42, 44) 2) Interview Data analysis: Affinity diagram (Slide09: P29-33, 38-39) #Disclaimer. Further instruction of this submission can be given verbally during class or through Piazza.
Individual project I2-Part 3: Data analysis Format Submission includes: • 1. Survey analysis Graphs with descriptive statistics o A paragraph describing what you learned: themes, categories, things o unexpected or surprised you 2. Affinity diagram (15+ sticky notes, no software) à Turn into a digital version Two photos: A photo of raw data (Slide9: p38) and a photo of synthesis o (Slide 9: p39) A digital version of a finished diagram: should have a problem statement on o top (Slide9: P33) A paragraph describing what you learned: themes, categories, things o unexpected or surprised you #Disclaimer. Further instruction of this submission can be given verbally during class or through Piazza.
Individual project I2-Part 3: Data analysis Format Add a description of your project proposal on top • Link to your project webpage on top • Should be accessible o Should have full contents (no pdf file): o Intro (yourself) § Project Proposal § Review of existing systems § Data collection plan: Interview/survey § Data analysis: Affinity diagram/Survey analysis § A PDF file, 12 point scale in Times New Roman, 1.5 line spacing • Due by Midnight 10/23 #Disclaimer. Further instruction of this submission can be given verbally during class or through Piazza.
Individual project I2-Part 3: Data analysis Rubric Survey (4pt) • o If the survey analysis is presented using a proper visualization format with proper statistical measures (2pt) o If the description clearly explains what you learned (2pt) Affinity diagram (6pt) • o If the final diagram contains significant themes through a structure (2pt) o If the submission includes the photos to show the extract-synthesis process and a final digital version (2pt) o If the description clearly explains what you learned (2pt) #Disclaimer. Further instruction of this submission can be given verbally during class or through Piazza.
Individual project I2-Part 3: Data analysis Rubric You will lose 20% if your website doesn’t work or misses the contents • You will lose 50% if your submission does not follow the format • You will lose 20% if it’s a late submission (Not accepting a late • submission submission after that): Don’t think of it as an extended deadline but think of it as a grace period to fix any major mistakes you make for resubmission!!! #Disclaimer. Further instruction of this submission can be given verbally during class or through Piazza.
By next class Quiz #2: Slide08-12 Assignment Group project: P3. Data analysis •
Recap
Recommend
More recommend
