Experimental Design & Evaluation 9. Prototyping - PowerPoint PPT Presentation

Experimental Design & Evaluation 9. Prototyping Sunyoung�Kim,�PhD�

Last week Consolidating findings • Solution proposal •

Recap: Solutions come from a consolidation of your data analysis! 1. Consolidate what you found across different users and interviews allows the team to see patterns 2. Identify breakdowns 3. Identify expressed needs 4. Come up with a list of potential solution ideas

Recap: Storyboards The point of storyboards is to convey the experience of using the • proposed system using a persona and a scenario Include people experiencing the design and their reactions to it • Visual elements: Detail, text, people, frame, portrayal of time •

Recap: Scenarios A concise descript of a persona • A narrative description of a task : the current use of a system • An informal narrative story, simple, “natural”, personal • Scenario should be simple and focused • Use personas in scenarios – how does it serve their needs? •

Recap: Storyboard, Persona and Scenario Storyboards: How action and narrative is framed around interaction • Personas • Specific archetype of target user - Build based on contextual inquiries/interviews - Scenarios: Use of narrative, persona, and context •

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

Recap: 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

Prototyping

What is Prototyping? Prototypes are experimental and incomplete designs which are • cheaply and fast developed An integral part of iterative user-centered design • It enables designers to try out their ideas with users and to gather • feedback

Why should we prototype? Evaluation and feedback are central to interaction design • Users can see, hold, interact with a prototype more easily than a • document or a drawing You can test out ideas for yourself • It encourages reflection: important aspect of design • Prototypes answer questions, and support designers in choosing • between alternatives

What can prototypes tell us? Interest: would people want this? • Use: does this solve a real problem? • Usability: is this easy, sensible, and effective? • Implementation: can this be done? •

Sketches vs. Prototypes Sketches • Early ideation - stages of design Exploring ideas - Prototypes • Capturing/detailing - the actual design Testing ideas -

Prototype Fidelity

Prototyping fidelity Interactive Paper prototyping sketches Wireframing Low fidelity Medium fidelity High fidelity

Wireframe (Mid-fi prototype) Using computer-based tools (e.g., balsamiq, wireframe.cc) • 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

Wireframe (Mid-fi prototype)

High-fidelity Prototypes Prototype looks more like the final system than a low-fidelity version • Common hi-fi prototyping tools: • Photoshop/Illustrator, Axure, PowerPoint -

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 vs. Hi-fi prototypes Lo – Fi Lo – Fi Hi – Fi Hi – Fi Advantages Fast Better sense of finished • • Cheap product • Easy – kindergarten Can judge aesthetic appeal • • skills! More realistic experience • Can simulate actual Can evaluate experience • • product Disadvantages Slow response time Users may focus on • • Can’t get feedback unnecessary detail • about aesthetics Takes a lot of time to make • User may question Users may lose track of big • • design quality picture

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

Group Project

Group Project: Wireframe and Flowchart Among the sketches you created in the last assignment, you either pick some, combine some, or update some. And then, come up with a final set of wireframe with a flowchart. Wireframe Use a software of your choice. • Recommended: Wireframe.cc https://wireframe.cc/ o Recommended: Balsamiq https://balsamiq.com/products/ o Recommended: Indigo studio https://www.infragistics.com/products/indigo-studio o Check for more: o http://mashable.com/2010/07/15/wireframing-tools/#oqegDW3EXZqq Do not apply colors • Don't focus on the details, look&feel and visual details, but focus on the • content structure, workflow, and systems usability.

Group Project: Wireframe and Flowchart Flowchart Use a software of your choice • o Recommended: Powerpoint o Recommended: https://www.draw.io/ Turn in: a PDF with Your project proposal on top • A link to your Website with wireframe and a flowchart • Wireframe of your entire system • Flowchart • A link to a working hi-fi prototype (optional) • State which team members contributed to which part • Due by midnight 11/13 • #Disclaimer. Further instruction of this submission can be given verbally during class or through Piazza.

Group Project: Hi-Fi prototype (optional) Create a hi-fi prototype • Recommended to use Indigo Studio from Infragistics as our hi-fi prototyping tool. • Download the Free 30 Day Trial License for Infragistic’s Indigo Studio to your computer (http://indigo.infragistics.com/). • You can get a free academic license to use it beyond the 30 day trial using your Rutgers.edu email address to download and install you’re a Free 1-Year Academic License for Infragistics Indigo Studio here (http:// www.infragistics.com/products/indigo-studio/indigo-academic-license) #Disclaimer. Further instruction of this submission can be given verbally during class or through Piazza.

Group Project: Hi-Fi prototype (optional) Rubric Wireframe (6pt) • o If the wireframe does not miss any screens that are important part of the system (2pt) o If each screen in the wireframe clearly demonstrates what it's about (2pt) o If each screen has any usability problems (2pt) Workflow (4pt) • o If the workflow does not miss any steps that are important an part of the system (2pt) o If the workflow clearly demonstrates how a user would navigate through a system (1pt) o If the workflow does not have any usability problem (1pt) #Disclaimer. Further instruction of this submission can be given verbally during class or through Piazza.

Next class Reading: Experimental Research in HCI (discussion required) •