Prototyping Paper Prototyping Digital Prototyping References - - PowerPoint PPT Presentation

▶
prototyping
SMART_READER_LITE
LIVE PREVIEW

Prototyping Paper Prototyping Digital Prototyping References - - PowerPoint PPT Presentation

Feb 03, 2023 167 likes •701 views

Introduction Prototyping Paper Prototyping Digital Prototyping References Jrg Cassens SoSe 2019 Contextual Design of Interactive Systems SoSe 2019 Jrg Cassens Prototyping 1 / 50 Introduction Fidelity Completeness Paper

slide-1
SLIDE 1

Introduction Paper Prototyping Digital Prototyping References

Prototyping

Jörg Cassens

SoSe 2019

Contextual Design of Interactive Systems

SoSe 2019 Jörg Cassens – Prototyping 1 / 50

slide-2
SLIDE 2

Introduction

Fidelity Completeness

Paper Prototyping Digital Prototyping References

Introduction

SoSe 2019 Jörg Cassens – Prototyping 2 / 50

slide-3
SLIDE 3

Introduction

Fidelity Completeness

Paper Prototyping Digital Prototyping References

Kommunikation

Ein Design zu kommunizieren ist schwierig Demos und Spezifikationen können keine Arbeitspraxis abbilden

Der Kunde muß verstehen, wie das Produkt funktioniert und strukturiert ist wie es in die eigene (nicht-artikulierte) Praxis paßt und wie es besser sein könnte

Herausforderung: die “Experience”, die ein neues System anbietet, zu kommunizieren Modelle sind eine neue Sprache, die der Kunde erlernen muß Ansätze:

Szenarien Use-Cases

SoSe 2019 Jörg Cassens – Prototyping 3 / 50

slide-4
SLIDE 4

Introduction

Fidelity Completeness

Paper Prototyping Digital Prototyping References

Prototyping

Problem:

We can’t evaluate a design until it’s built

But...

Afer building, changes to the design are difficult

Solution

Prototype!

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!

SoSe 2019 Jörg Cassens – Prototyping 4 / 50

slide-5
SLIDE 5

Introduction

Fidelity Completeness

Paper Prototyping Digital Prototyping References

How to Prototype

Dell (2018)

SoSe 2019 Jörg Cassens – Prototyping 5 / 50

slide-6
SLIDE 6

Introduction

Fidelity Completeness

Paper Prototyping Digital Prototyping References

Prototyp-Types

Storyboard

Sketches or screen shots illustrating key points in a usage narrative

Paper Prototype

Fabricated devices with simulated controls or display elements

Wizard of Oz

Workstation connected to invisible human assistant who simulates input, output, and processing functionality not yet available

Video Prototype

Video recording of persons enacting one or more envisioned tasks

Computer Animation

Screen transitions that illustrate a series of input and output events

Scenario Machine

Interactive system implementing a specific scenario’s event stream

Rapid prototype

Interactive system created with special purpose prototyping tools

Partial Working System

Executable version of a system with a subset of intended functionality

SoSe 2019 Jörg Cassens – Prototyping 6 / 50

slide-7
SLIDE 7

Introduction

Fidelity Completeness

Paper Prototyping Digital Prototyping References

Prototyping

Ready Fire Aim (Hix and Hartson, 1993)

SoSe 2019 Jörg Cassens – Prototyping 7 / 50

slide-8
SLIDE 8

Introduction

Fidelity Completeness

Paper Prototyping Digital Prototyping References

Prototyping

Ready Fire Aim Design Prototype Evaluate (Hix and Hartson, 1993)

SoSe 2019 Jörg Cassens – Prototyping 7 / 50

slide-9
SLIDE 9

Introduction

Fidelity Completeness

Paper Prototyping Digital Prototyping References

Throw-Away vs. Evolution

Throw-away prototyping means that a series of prototypes are constructed and then discarded

Typically higher and higher fidelity versions are developed

Evolutionary prototype means that the same prototype evolves into higher and higher fidelity and eventually becomes the system Throw-away prototyping can be difficult for design teams or management to accept because it seems as if the time spent developing the prototype is a waste Evolutionary prototyping is possible with sofware development, but there is a danger An early high-fidelity prototype might have been built to illustrate a design idea, but not designed to be extended Nevertheless evolutionary prototyping can be useful for eliciting more and more subtle design aspects

SoSe 2019 Jörg Cassens – Prototyping 8 / 50

slide-10
SLIDE 10

Introduction

Fidelity Completeness

Paper Prototyping Digital Prototyping References

Fidelity

SoSe 2019 Jörg Cassens – Prototyping 9 / 50

slide-11
SLIDE 11

Introduction

Fidelity Completeness

Paper Prototyping Digital Prototyping References

Low-Fidelity Prototypen

Designskizze

Frühe Skizzen auf Papier oder Tafel Vermitteln Eindruck von Designideen Diskussion der Skizzen kann gegenseitiges Verständnis von Gestalter und Anwender fördern Fehler können frühzeitig erkannt werden Beispiele wären ein Storyboard oder Comic

Papierprototypen

Bildschirminhalte werden durch Papierstreifen und Post-Its simuliert Austauschen und Manipulation dieser lassen das Verhalten der Benutzungsschnittstelle erkennen

Diese Low-Fidelity-Prototypen können mit minimalen Kosten erstellt werden Der offensichtlich unfertige Charakter lädt zur Kritik und Manipulation ein Man kann grundlegende Beurteilungen konzeptioneller Modelle erhalten

SoSe 2019 Jörg Cassens – Prototyping 10 / 50

slide-12
SLIDE 12

Introduction

Fidelity Completeness

Paper Prototyping Digital Prototyping References

Medium-Fidelity Prototypen

Wizard of Oz

Sollen Nutzer einen realistischen Eindruck eines Systems bekommen, das noch nicht implementiert ist, bieten sich Simulationen an Dem Benutzer wird die Benutzungsschnittstelle präsentiert Ein menschlicher Operator (Wizard) beobachtet den Benutzer und seine Umgebung und steuert die Funktionen des Systems Besonders nützlich, wenn vor der Implementierung Interaktionsdaten benötigt werden

Ambiente System Sprachsteuerung

Mock-Up

Typischerweise mit Rapid Prototyping Werkzeugen erstellt

Webseiten mit Screenshots

Simuliert immer noch die funktionalen Teile des Systems Erlaubt typische Interaktionssequenzen

SoSe 2019 Jörg Cassens – Prototyping 11 / 50

slide-13
SLIDE 13

Introduction

Fidelity Completeness

Paper Prototyping Digital Prototyping References

High-Fidelity Prototypes

Simulation

In particular object-oriented simulations Agents with particular goals, believes, intentions interact via simulated sensors with the real sofware Data and/or modelling necessary

Proof-of-concepts

Later versions of throw-away prototype Rudimentary and/or incomplete

Implemented Application

Later versions of evolutionary prototypes Large-scale implementations Long running systems Suitable for a field-study

SoSe 2019 Jörg Cassens – Prototyping 12 / 50

slide-14
SLIDE 14

Introduction

Fidelity Completeness

Paper Prototyping Digital Prototyping References

“Mixed”-Fidelity

Easy access to cameras makes it 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

Dell (2018)

SoSe 2019 Jörg Cassens – Prototyping 13 / 50

slide-15
SLIDE 15

Introduction

Fidelity Completeness

Paper Prototyping Digital Prototyping References

Completeness

SoSe 2019 Jörg Cassens – Prototyping 14 / 50

slide-16
SLIDE 16

Introduction

Fidelity Completeness

Paper Prototyping Digital Prototyping References

Breadth or Depth?

Partially working systems

Horizontal prototype

all the intended functionality, but only at the top level Example: initiate a shopping spree, but cannot actually order Good for testing high level goals and action plans

Vertical prototype

  • nly one or two tasks are implemented in detail

Example: shop til you drop, but cannot see shipping information Good when only few tasks are seen as particularly complex or important

SoSe 2019 Jörg Cassens – Prototyping 15 / 50

slide-17
SLIDE 17

Introduction

Fidelity Completeness

Paper Prototyping Digital Prototyping References

Horizontal vs. Vertical Prototype

McCracken et al. (2004)

SoSe 2019 Jörg Cassens – Prototyping 16 / 50

slide-18
SLIDE 18

Introduction

Fidelity Completeness

Paper Prototyping Digital Prototyping References

Global vs. Local

Partially working systems

Global prototype

model the complete system can address issues of completeness and consistency

Local prototype

  • nly model a small portion of the system

can be used to resolve differences in opinion over design make a local prototype of the alternatives and evaluate them

Partially working systems

Chauffered prototype

Considerable functionality, but little or no error detection How: A well trained assistant accepts and executes requests on behalf of the actual test user Orthogonal to other dimensions

SoSe 2019 Jörg Cassens – Prototyping 17 / 50

slide-19
SLIDE 19

Introduction

Fidelity Completeness

Paper Prototyping Digital Prototyping References

Einbeziehen von Benutzern

Szenarien testen die Reaktion der Benutzer zu einer Geschichte Vorher: Lehrmeister Jetzt: Co-Designer Dazu suchen wir uns neue Benutzer, die nicht Teil des Design-Teams waren Startpunkt: Initiales Systemdesign Designer und User verbessern dieses iterativ Iterationen sind schlecht für revolutionäre Änderungen, der initiale Prototyp sollte deshalb schon sehr gut sein, die richtigen Probleme anpacken

SoSe 2019 Jörg Cassens – Prototyping 18 / 50

slide-20
SLIDE 20

Introduction Paper Prototyping Digital Prototyping References

Paper Prototyping

SoSe 2019 Jörg Cassens – Prototyping 19 / 50

slide-21
SLIDE 21

Introduction Paper Prototyping Digital Prototyping References

Beispiel

☞ Bilder aus einem Video der Nielsen Norman Group

SoSe 2019 Jörg Cassens – Prototyping 20 / 50

slide-22
SLIDE 22

Introduction Paper Prototyping Digital Prototyping References

Papier

Low-fidelity Prototyp

Wenn eine UI von Hand gezeichnet ist wird klar, daß das genaue Design, die Icons

  • der Fensterstruktur, nicht der zentrale Punkt sind

Wenn Benutzer mit Papier arbeiten werden sie nicht abgelenkt von den zentralen Strukturelementen, um die es uns hier geht Weg, um “bikeshedding” zu umgehen Papierprototypen laden zu direkten Veränderungen ein “Wenn ich hier klicke, so sollte das passieren”

Lauffähige, partielle Prototypen sind weniger einfach zu ändern und gaukeln vor, daß viele Entscheidungen schon gefallen seien Prototypen machen es möglich, Arbeitsabläufe zu testen, die es derzeit noch nicht gibt

SoSe 2019 Jörg Cassens – Prototyping 21 / 50

slide-23
SLIDE 23

Introduction Paper Prototyping Digital Prototyping References

Methode

mit einer Papierattrappe der Benutzerschnittstelle versuchen die Benutzer “echte” Arbeitsaufgaben mit “echten” Daten zu erfüllen Testen und Verändern der Benutzerschnittstelle

Benutzer als Co-Designer

Struktur und Funktion testen, nicht Layout und Icons Interview nach den Richtlinien des Contextual Inquiry Interviews (mindestens) 2 Personen, einer “spielt” das System, der andere macht Notizen

Das System erklärt sich nicht

SoSe 2019 Jörg Cassens – Prototyping 22 / 50

slide-24
SLIDE 24

Introduction Paper Prototyping Digital Prototyping References

Paper Prototype Screen

SoSe 2019 Jörg Cassens – Prototyping 23 / 50

slide-25
SLIDE 25

Introduction Paper Prototyping Digital Prototyping References

Paper Prototype Book

Benyon et al. (2005)

SoSe 2019 Jörg Cassens – Prototyping 24 / 50

slide-26
SLIDE 26

Introduction Paper Prototyping Digital Prototyping References

Why do it?

Low cost Fast to implement

Typical hi-fi prototype takes a few weeks as opposed to a paper prototype that takes 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 lef out

Feedback on the BIG things

Lo-fi nature forces users to consider usability issues related to layout and control Nit picking over choice of colors, buttons sizes, font choice ignored Focus on Content as opposed to Appearance

SoSe 2019 Jörg Cassens – Prototyping 25 / 50

slide-27
SLIDE 27

Introduction Paper Prototyping Digital Prototyping References

Why not to do it?

May seem unprofessional to some users

Maybe not the right prototype for the VCs

Can’t represent some effects with paper Typically, you would start with several rounds of paper prototyping, and move towards high-fidelity prototyping as the design becomes more finalized

So, you do both

Dell (2018)

SoSe 2019 Jörg Cassens – Prototyping 26 / 50

slide-28
SLIDE 28

Introduction Paper Prototyping Digital Prototyping References

Material

Paper:

heavy stock unlined light stock unlined sticky notes, different colors Acetate sheets

Markers:

color pens color board markers color pencils

Adhesives:

scotch tape glue sticks sof adhesive (like what is found on sticky notes)

Scissors:

Scissors eXacto knives

Everything else you can think of

SoSe 2019 Jörg Cassens – Prototyping 27 / 50

slide-29
SLIDE 29

Introduction Paper Prototyping Digital Prototyping References

Building

Don’t get carried away with design!

Goal is to get as much user feedback as possible Set a deadline – forget minor details

Draw generic frames Make everything needed to simulate effects Photocopier/camera is your friend!

Dell (2018)

SoSe 2019 Jörg Cassens – Prototyping 28 / 50

slide-30
SLIDE 30

Introduction Paper Prototyping Digital Prototyping References

Preparing

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

Prepare test scenarios Practice

Sort out bugs/hitches before the real testing Get everyone comfortable with their role

Dell (2018)

SoSe 2019 Jörg Cassens – Prototyping 29 / 50

slide-31
SLIDE 31

Introduction Paper Prototyping Digital Prototyping References

Conducting

Facilitator

Encourage user to express thoughts (don’t influence decisions!!!!) Giving instructions Making sure timing is met

“Computer” person

Arranges the paper prototype according to user input Needs to be organized Knows the prototype well Make changes quickly

Observers

Take notes Write possible solutions to problems faced Cannot react to user’s actions

SoSe 2019 Jörg Cassens – Prototyping 30 / 50

slide-32
SLIDE 32

Introduction Paper Prototyping Digital Prototyping References

Evaluating

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!

SoSe 2019 Jörg Cassens – Prototyping 31 / 50

slide-33
SLIDE 33

Introduction Paper Prototyping Digital Prototyping References

Summary: 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 Consider that you always do a few rounds of paper prototyping for every new design/app/system/solution that you create!

SoSe 2019 Jörg Cassens – Prototyping 32 / 50

slide-34
SLIDE 34

Introduction Paper Prototyping Digital Prototyping References

Assignment 9.1: Paper Prototype

Group Work

Your task is to design a privacy controller app.

An app that magically helps you control and keep track of the privacy settings of all other apps on your device. You should be able to have custom privacy settings for different apps, but it should still be easy to use.

Form groups of 4-6 people

Pick a couple of concrete tasks to focus on (your choice) Create a paper prototype for those tasks Work quickly! Set a deadline. Evaluate your paper prototype with another team Take turns in using each other’s prototypes Write down the results from testing your prototype Iterate!

Present your findings in the course

SoSe 2019 Jörg Cassens – Prototyping 33 / 50

slide-35
SLIDE 35

Introduction Paper Prototyping Digital Prototyping References

Digital Prototyping

SoSe 2019 Jörg Cassens – Prototyping 34 / 50

slide-36
SLIDE 36

Introduction Paper Prototyping Digital Prototyping References

Mockups & Wireframes

You can also make higher fidelity prototypes using are also mockup or wireframe sofware Expensive prototyping tools can demonstrate interactivity and make story boards Some are web based so that you can share demonstrate the story boards with the team or client

SoSe 2019 Jörg Cassens – Prototyping 35 / 50

slide-37
SLIDE 37

Introduction Paper Prototyping Digital Prototyping References

Dimensions of Fidelity

Fidelity can be broken down into four basic dimensions:

Breadth Depth Look Interaction

Dell (2018)

SoSe 2019 Jörg Cassens – Prototyping 36 / 50

slide-38
SLIDE 38

Introduction Paper Prototyping Digital Prototyping References

Breadth

Definition

The “breadth” of a prototype refers to how much of the product’s functionality is represented in the prototype A very narrow prototype only represents a single feature A broad prototype represents all intended functionality Prototypes should generally be as broad as needed to cover basic or most important tasks, but not much more

SoSe 2019 Jörg Cassens – Prototyping 37 / 50

slide-39
SLIDE 39

Introduction Paper Prototyping Digital Prototyping References

Depth

Definition

The “depth” of a prototype refers to how much of the prototype is functional, and how robust it is A very shallow prototype has no backend at all and is hard-coded to respond as though the user had provided ideal input A deep prototype has some logic and error-handling capabilities At first glance, depth may seem unimportant, but it affects the amount of exploration a user can do Thus depth can actually have a profound influence on user testing!

SoSe 2019 Jörg Cassens – Prototyping 38 / 50

slide-40
SLIDE 40

Introduction Paper Prototyping Digital Prototyping References

Look

Definition

The “look” refers to how accurately a prototype represents the product’s intended appearance, including fonts, colors, and graphics “Look” is probably what most people think of when they think of prototype fidelity It’s generally a good idea to hold off on something that has a high fidelity look until later in the design process People are less likely to point out flaws and mistakes People can easily fixate on the “little” things You are less likely to throw it out and start again

SoSe 2019 Jörg Cassens – Prototyping 39 / 50

slide-41
SLIDE 41

Introduction Paper Prototyping Digital Prototyping References

Interaction

Definition

“Interaction” refers to how the prototype handles input and output Interaction can ofen be simulated For example, you might create a digital prototype for an iPad application which runs on your desktop and responds to traditional a traditional mouse and keyboard You might use hyperlinks or animation to simulate clicking interaction (e.g., in Powerpoint)

SoSe 2019 Jörg Cassens – Prototyping 40 / 50

slide-42
SLIDE 42

Introduction Paper Prototyping Digital Prototyping References

Hi-Fi Prototyping

Once you have developed a lo-fi prototype and solicited feedback on it through peer critique and user testing:

You may wish to create another lo-fi prototype (isn’t iterative design fun?) Or you may be ready to move on to a hi-fi prototype

Remember, a high fidelity prototype is a substantial time investment! It is good for evaluating a working design that has been derived from a few rounds paper prototyping

SoSe 2019 Jörg Cassens – Prototyping 41 / 50

slide-43
SLIDE 43

Introduction Paper Prototyping Digital Prototyping References

Things to Condider

Choice of tool Typography / font Color palette Device Interaction Implementation Start by creating a digital version of your paper prototype Then iterate through user testing and feedback Don’t design a beautiful prototype that can’t be implemented!

SoSe 2019 Jörg Cassens – Prototyping 42 / 50

slide-44
SLIDE 44

Introduction Paper Prototyping Digital Prototyping References

Digital Prototyping Tools

There are literally hundreds... And more released every day. I don’t know them all! What you choose will depend on a variety of factors...

Learning Curve

How long will it take me to learn this tool?

Usage

Which device will it be used on?

Fidelity

Will it showcase layout structure or complex interactions?

Sharing

Can I collaborate with others on the prototype?

Cost

How much am I prepared to pay for this tool?

SoSe 2019 Jörg Cassens – Prototyping 43 / 50

slide-45
SLIDE 45

Introduction Paper Prototyping Digital Prototyping References

Comparing

☞ prototypr.io/prototyping-tools

SoSe 2019 Jörg Cassens – Prototyping 44 / 50

slide-46
SLIDE 46

Introduction Paper Prototyping Digital Prototyping References

Presentation Sofware

Dell (2018)

SoSe 2019 Jörg Cassens – Prototyping 45 / 50

slide-47
SLIDE 47

Introduction Paper Prototyping Digital Prototyping References

Marvel

☞ Marvel

SoSe 2019 Jörg Cassens – Prototyping 46 / 50

slide-48
SLIDE 48

Introduction Paper Prototyping Digital Prototyping References

Balsamiq

☞ balsamiq

SoSe 2019 Jörg Cassens – Prototyping 47 / 50

slide-49
SLIDE 49

Introduction Paper Prototyping Digital Prototyping References

Proto.io

☞ proto.io

SoSe 2019 Jörg Cassens – Prototyping 48 / 50

slide-50
SLIDE 50

Introduction Paper Prototyping Digital Prototyping References

Pencil

☞ pencil

SoSe 2019 Jörg Cassens – Prototyping 49 / 50

slide-51
SLIDE 51

Introduction Paper Prototyping Digital Prototyping References

Prototyping

Jörg Cassens

SoSe 2019

Contextual Design of Interactive Systems

SoSe 2019 Jörg Cassens – Prototyping 50 / 50

slide-52
SLIDE 52

Introduction Paper Prototyping Digital Prototyping References

References I

Benyon, D., Turner, P., and Turner, S. (2005). Designing interactive systems: People, activities, contexts, technologies. Pearson Education. Dell, N. (2018). Hci and design. Course material, Cornell University. Hix, D. and Hartson, H. R. (1993). Developing user interfaces: ensuring usability through product & process. John Wiley & Sons, Inc. McCracken, D. D., Wolfe, R. J., and Spool, J. M. (2004). User-centered website development: A human-computer interaction approach. Prentice Hall Upper Saddle River.

SoSe 2019 Jörg Cassens – Prototyping 51 / 50