Interface prototyping 2014

INTERFACE PROTOTYPING

Mariana Salgado and Andrea Botero- Media Lab- ARTS 2014

About the workshop

Do not forget to present ourselves

TIMETABLE1st day22.04Tuesday

2nd day23.04Wednesday

3rd day24.04Thursday

4th day25.04Friday

5th day28.04Monday

6th day29.04Friday

9.00 Introduction of the course. Lecture on: Different prototyping techniques

9.00

Lecture: Why paper prototyping?

9.00

Lecture: Meeting the user.

9.00

Lecture: What to observe?

9.00 -16hs

Planning and testing 1 more iterations

Working on the presentations

10-14hs

Audio interface for dating service

10-14hs

Video Poem

10-16hs

Independent work

10-14hsTesting 1st iteration. Redoing the prototypeTesting again


13hs

Final presentations

14hs

Lecture:Remix practices and EUscreen

14hs

Lecture: Introducing the exercise + more on remix

Designing renmixing toolsPlanning the 1st iteration

15hs

Students presentations: how was the day?

Validation of any design idea is best done by prototyping and testing. Through

practical exercises this workshop introduces different paper prototyping techniques and their related research results and analysis; these tools will enable you to

develop and present your design ideas with professional conviction and flair. The

interfaces in this workshop are assumed to be either screen based or physical operation interfaces for digital products and services.

Study MaterialRettig, Marc. (1004) "Prototyping for tiny fingers." Communications of the ACM 37.4: 21-27.

Snyder, Carolyn (2003). Paper Prototyping. The fast and the easy way to design and refine user interfaces. Elsevier Science. USA.

Houde, Stephanie, and Charles Hill. "What do prototypes prototype." Handbook of human-computer interaction 2 (1997): 367-381.

Buchenau, Marion and Fulton Suri, Jane (2000) Experience prototyping. DIS ´00, Brooklyn, New York. CC by Abeo5 in Flickr

Assessment Methods and CriteriaLectures, group work. 80% attendance, completed exercise tasks and a written report.

WorkloadContact hours: 7hs X 6 days: 42hs

Independant work: 39hs

Total amount of hours: 81hs

CC

by

Gon

zalo

_ar i

n Fl

ickr

Explore different prototyping techniques

Use a case study: remixing video and their related interfaces

Make prototypes using different techniques, test and iterate them.

in C

C b

y da

ncei

nsky

in rF

lickr

YOU will

Main task: design a non-traditional video editor. Videos cannot be download. The novelty will be in the interface, but can also be in the outcome. It can be an interface for tablets, desktop or

mobile devices. It can apply different type of filters.

CC

by

STC

4 bl

ues

in F

lickr

CC

by

Gar

ton

in F

lickr

OUTCOMES

Final presentations: students have to prepare a 5min video in which they document the process, including the different test situations. The final interface has to be evaluated at least three times.

In addition to the exercises participants are required to compile a learning diary in which they document the process and make an account of the reading material.

BASIS OF PROTOTYPING

Mariana Salgado and Andrea Botero Media Lab ARTS 2014

"What I hear I forget. What I see, I remember. What I do, I understand!”

Lao Tse

INTRODUCTION TO PROTOTYPING

Fields of HCI and design

Evaluation role (e.g. usability tests): tools for evaluation of design failure or successGenerative role (tools supporting design exploration): design thinking enablers (Lim et al. 2008)

Prototypes are communications media (Eriksson 1995)

Prototypes are concrete - they help to communicate and evaluate ideas.

DIFFERENT TYPES OF PROTOTYPES

… pencil sketch, cardboard or foam mock up of a device, slide show of images, videotape showing simulated

behavior, simulation in a software prototyping environment, partially implemented version of the product

(Eriksson 1995)


Crude/rough/non-interactive prototypes can capture rough ideas early on (Eriksson 1995)


More polished prototypes can help communicate the gist of the design

Prototypes supporting interactivity can be used to ask feedback from users

(Eriksson 1995)

Juha Salonen- Interface prototype workshop 2009

VISION PROTOTYPES & WORKING PROTOTYPES

Vision prototypes can be rough or polished. Highly polished prototypes have both drawbacks and benefits. c.f. Apple Computer's "Knowledge Navigator”.

Kno

wle

dge

Nav

igat

or


Emphasize form, interactivity, and visual appearance.

Part of the iterative design process, for the designers to engage with each other, but also in participatory or design approaches to engage "users" in the design process.

Piia Aho- Paper prototyping course 2009


Working prototypes should have two properties: accessibility and roughness

Piia Aho- Paper prototyping course 2009

EXAMPLE: CASE URBAN MEDIATOR

Vision prototype – animation (public)VISION PROTOTYPE

Vision prototype – sketch (project partners)


Working prototype – sketches (design team)


Working prototypes – paper – co-design sessions


Working prototypes – mobile proto (co-design activities)


Working prototypes – “magnets” (design team)


Working prototypes – wireframes


Working prototypes – paper prototype (design team)


Software prototypes (“alpha version”)


Urban Mediator v2.0


PRINCIPLES OF PROTOTYPING

(Lim et al. 2008)

LOW FIDELITY METHODS

Low-cost, easy and fast to make, multiple designs can be evaluated, proof-of-concept, can happen early

Flexible, no fear of computer, focus on important things

BUT: Error cases potentially hard to find, does not produce detailed

specifications, Not Real!

Typically just sketching with pen and paper.

No need for great drawing skills to communicate the ideas

HIGH FIDELITY METHODS

Building an interactive prototype of the systemIt could be for example Flash, Director or Visual Basic

Pros: realistic functionality, user-driven, can be used for real testing, look and feel, already usable for specification, marketing and sales

Cons: expensive and slow to develop, cannot be used early, might direct attention to irrelevant details, people often reluctant to change major aspects, may lead to unrealistic expectations

Software design example - too detailed prototypes lead the customer to think that the project is ahead of the schedule. Beware.

STORYBOARDING

Drawing sequences of possible user interaction tasks

Help to develop ideas further and also find missing features

Related to scenarios (what are scenarios?)

IN BRIEF

When creating a prototype, it is important to consider:

• the material

• the resolution

• the scope

PAPER PROTOTYPING

The prototyping method used during this workshop

Best suited for 2D interface design, especially often used in web designFor 3D or highly interactive content less useful

Rough sketches of the interfaceOne of the designers acts as a "computer" and changes the pages.

When the user interacts with the imaginary system: points with a finger

Need to take notes AND videotape the test case for further analysis

Use your imagination: for example menus can be done with pieces of paper

ROLES IN THE TEAM

the facilitator/introducer(the only one talking with the user)“Speak aloud the option you have chosen”

the machine (browsing papers/ finding the right one)“I will act as the computer, turning the pages to maneuver through the site”

the observer(talking notes of the user behavior/ problems/ suggestions)

Today teamwork

Task: Make a quick scenario for a call service for dating

The person is calling to select a date. This is a warm-up exercise to get you started with prototypes and evaluation.

It's okay to make mistakes :) Make cards for reading aloud

Necessary features: selection of the right person (gender, physical qualities, profession, etc), meeting place (address), payment method: cash, sms, money transfer.

Confirm date (place, hour, person). Work in groups of three: test leader ("facilitator"), computer, observer

and test user (recruited from another group). Rotate the roles. Everybody gets to try all the roles and

visit the other groups as a test user.

2 iterations with 2 different users each oneThe test leader do not give hints to the user, the user should communicate with

her/him onlyThink aloud protocol: what, how and why?

Come back here for group discussion and wrap up at 15hs


Reflection

What did you notice about test situation?How did you fix your design along the way?

Observations on the rolesThink aloud protocol challenges, not giving unintentional hints

anything else?


Reading for tomorrow

Rettig, Mark (1994) Prototyping for tiny fingers. Communications of the ACM, April 1994/ Vol.37, No.4


WHY PAPER PROTOTYPING?2nd day





4th day25.04Friday

5th day28.04Monday

6th day29.04Friday


9.00


9.00


9.00


9.00 -16hs



10-14hs


10-14hs

Video Poem

10-16hs

Independent work



13hs

Final presentations

14hs


14hs



15hs


“Papers Prototypes are low-tech, low-cost, but highly effective form of usability testing for web

site design”

Helen M. Grady

usability testing at the end of the design

they find content and structural problems

re-design may be impossible

Problem

simple tools like paper, scissors, and stickies.

separation of design and content allows to be focused on content

“hands-on” designing manipulating physically the content

the whole group can be following all the steps

no computer skills are neededPaper prototyping EUscreenXL- Translation tool

users recognizing that the prototype is a rough model felt freer to criticize and make recommendations

multiple tests with small number of users is more helpful at identifying problems than elaborated usability tests

paper prototyping allows to separate content from visual design

Paper prototyping EUscreenXL- Translation tool

changes can be made on the fly during the test

after several iterations of testing and design on papermaking an interactive prototype should not take long

the interface elements should be as real as possible (labels, titles, etc)

Paper prototyping EUscreenXL- Translation tool

early focus on users and tasks

empirical measurement of product usage

iterative designed, modified and tested

usability testing with paper prototype is one technique

WIZARD OF OZ

The user sits at a computer and uses the system

The responses actually generated by a remote operator who manually simulates the system

It already requires some material in digital form

“Pretend that your finger is a mouse and point to anything on the page that you

would like to click on”

Nielsen

Piia

Aho

- Pap

er p

roto

typi

ng c

ours

e 20

09

Hanmail paper prototype

One video

https://www.youtube.com/watch?v=GrV2SZuRPv0

Suggestions for today teamworkMake groups of 3 persons

Plan an interface to create Video Poem

adding audio to an existing silent video from EUscreenXLExamples of video poems: 1- 2- 3

Make a prototype to test how it works. Choose a part to develop.

Make a quick scenario and the prototype for testing. Test it

Meeting time for agreeing on project. Reflection

Come here for group discussion at 14hs


http://www.poetryfoundation.org/children/video

http://movingpoems.com/

https://www.youtube.com/watch?v=pRNzK0NSD_E


Snyder, Carolyn (2003). Paper Prototyping. The fast and the easy way to design and refine user interfaces. Elsevier Science. USA.

(choose chapters)


MEETING THE USER3rd day





4th day25.04Friday

5th day28.04Monday

6th day29.04Friday


9.00


9.00


9.00


9.00 -16hs



10-14hs


10-14hs

Video Poem

10-16hs

Independent work



13hs

Final presentations

14hs


14hs



15hs


GENERAL ISSUES

Things can go wrong that affects both test quality and user happiness.

Respect the user - they are helping you to do your work Test situation might be stressing to the user: it's up to you to help to keep the stress to a minimum. For example the test leader should act as confident and relaxed as possible.

A typical test setup involves a test leader and additional staff who operate the equipment, take notes etc.

The user typically only communicates with the leader - the others should not disturb. Be out of sight preferably.

RECRUITING THE USER

Might be hard to get especially if you want statistical results and/or the user group is very specialized

Might be from the target company, your company or external recruits

Should naturally represent the target group - not your workmates

Novice users become experts by time so you possibly need to find new ones to get relevant results

These days computers and mobiles are everywhere so finding complete beginners is getting hard - on the other hand less relevant as a targetgroup

BEFORE MEETING THE USER

Have everything ready. Extra hassle is both unprofessional and distract the user

Test the equipmentTurn off your mobiles!Offer refreshments, chat with the user informally to relax the situation

The test leader introduces himself and the other persons

Ask for permission to video tape the user and to use the test material (ethical issues) Tell her that she may stop whenever she wants or ask questions

Emphasize that you're testing the system and NOT the user.

Some videos

Usabiity test with paper prototype

Iphone app paper prototyping

EI NÄIN - Opetusvideo Käytettävyystestauksesta

https://www.youtube.com/watch?v=9wQkLthhHKA

https://www.youtube.com/watch?v=9wQkLthhHKA

https://www.youtube.com/watch?v=6TbyXq3XHSc

https://www.youtube.com/watch?v=6TbyXq3XHSc

https://www.youtube.com/watch?v=9qG-angqHTU

https://www.youtube.com/watch?v=9qG-angqHTU

DURING THE TEST

Give clear instructions. You might give the tasks to the user on a piece of paper one at a time.

Ask if it's okay to start.

Tell the user when a task is completed - easy to misinterpretate

Speak the user's language - no slang or terms invented by you

Start with an easy task - it gives the user confidence.

Encourage the user to think aloud if it doesn't come naturally (if the protocol is used)

DURING THE TEST

Questions like:

- What do you see now? - Where would you go next? - What are you looking for?

It's surprisingly easy to (unconsciously) help the user with gestures, sounds etc. Observe yourself on the tape and try to learn out of it.

If the user gets stuck you may gently interrupt the task so that they don't get overly stressed or help them complete the task and mark it as failed

Sessions should not last longer than an hour if possible: - drop out tasks if necessary

TIPS

you can test different parts of the systems

or you can give an scenario to the user(you want this and this)

focus on having the users behave naturally

60-90 minutes of user interview

focus on what they do, not in what they say

Refreshments, again. Not during the test.

Time for a post-test questionnaire or free-form discussion

Have time for questions and comments

Thank the user for her cooperation

Often some sort of little prizes are given. Preferably not money.

After the test

Suggestions for today teamwork

Plan a remix tool for EuscreenXL

Take in consideration the restrictions of not downloading content

Independent work



Buchenau, Marion and Fulton Suri, Jane (2000) Experience prototyping. DIS ´00, Brooklyn, New York.


WHAT TO OBSERVE?4th day





4th day25.04Friday

5th day28.04Monday

6th day29.04Friday


9.00


9.00


9.00


9.00 -16hs



10-14hs


10-14hs

Video Poem

10-16hs

Independent work



13hs

Final presentations

14hs


14hs



15hs


Positive discoveries - what worked well?

Problem situations - incorrect navigation paths - long pauses - getting stuck

Observe users' gestures

Did your prototype convey a correct mental model?

What corrections did you make?

Your reflections on the method itself

OBERSERVING

Error rates, task completion times, navigation steps etc.Straightforward to analyze statistically

Enables direct comparison of two systems such as prototypes or improved versions

Presented through numbers, charts, graphs ...

Pros: Precise, convincing, easy to understand, brief, often can be collected automatically

Cons: Might be laborious to collect by hand, does not tell much about the user’s thinking, feelings or support a creative progress

QUANTITATIVE DATA

Real-life use cases or test cases used to build up a story

Anecdotes and video clips serve as the material

Make notes, look for emerging patterns, group

Verify your findings with the users

Free-form, rich, convincing, user-oriented - but: not too exact

QUALITATIVE DATA AS STORY

Look for patterns and incidents: delays, user made errors, got stuck

Form categories

Multiple persons work on the same data

MAKING CATEGORIES

Description of a problem or an observation, possibly a screenshot

Again: grouping

0-3 scale (comment, cosmetic, adequate, fatal)

Sorting criteria: part of system, importance, type of problem

Possible suggestions

REPORTING A PROBLEM

What to videotape? The user, the hands,

computer screen?

DOCUMENTING WITH VIDEO

Prototyping produce great amount of data: video/sound clips, photos, sketches, diaries, notes etc.

What should we do with all the data?Analyze and document, learn from it

Who are you writing to? Different stakeholders need different information in different orders of precision.

What are the possible target groups? (managers, software/interface designers, customers)

Always offer an overview where the most important findings are presented in a compact way

Remember to report positive findings as well!

REPORT

Please write a learning diary about your activities in this workshop. The reportshould be at least four pages of A4 (1,5 line spacing, 12pt font) andinclude the following:

- Description of your work with the construction of three different prototypes and test tasks- Experiences you got on the different roles (leader, computer, observer)- Improvements your group made based on the observations- Reflections on the methods (paper prototypes and Wizard of Oz)

Although this is not a learning diary, please elaborate in the end on howone or more of the topics discussed in class are relevant (or notrelevant) to your work. The report is to be written individually, not ingroups.

Deadline:, submit the document by email to [email protected]

Format: PDF written report with images.

(This is not meant to be the same document as your group's final

presentation on Tuesday!)

Suggestions for today teamwork

user tests- observations- redoing the prototypes- more user testsTutorial sessions with groups


Kiitos! Thanks!





4th day25.04Friday

5th day28.04Monday

6th day29.04Friday


9.00

Lecture: Video Prototyping by Ville Tikkanen.

9.00

Main task description and introduction Remix tool

9.00

Lecture on testing

9.00 -16hs


10-14hs


10-14hs

Video Poem(Wizard of OZ)

10-16hs

Independent work

10-14hs 13hs

Final presentations

14hs


14hs

Lecture: formats and tools for remixing

15hs


Interface prototyping 2014

Design

Transcript of Interface prototyping 2014