User Interface Design II: Process · User Interface Design II: Process J.Serrat 102759 Software Design November 22, 2016 Index 1 How to design UI ? 2 User research 3 Paper prototyping

User Interface Design II: Process

J.Serrat

102759 Software Design

November 22, 2016

Index

1 How to design UI ?

2 User research

3 Paper prototyping

4 User testing

5 Forms

Readings

1. Slides of MIT course 6.813/6.831 User interface design andimplementation. Spring 2011. Lectures on User-centereddesign, User testing, Prototyping.http://ocw.mit.edu/

2. Getting the most out of personas, website UX for the masses byNeil Turner, http://www.uxforthemasses.com/personas/

3. Personas: practice and theory, John Pruitt and JonathanGrudin, Conf. on Designing for User Experiences, 2003.http://research.microsoft.com/en-us/um/redmond/groups/coet/

grudin/personas/oldversions/pruitt-grudinold.pdf

4. Prototyping for tiny fingers, Marc Retting. Communications ofACM Vol 37, No. 4, 1994.www.marcrettig.com/prototyping-for-tiny-fingers/

5. 7 myths about paper prototyping,www.userfocus.co.uk/articles/paperprototyping.html

Books

1. Paper prototyping: the fast and easy way to refine userinterfaces, Carolyn Snyder, Morgan Kaufmann, 2003.www.paperprototyping.com

2. Rocket surgery made easy: the do-it-yourself guide to findingand fixing usability problems, Steve Krug. New Riders, 2010.http://sensible.com/rsme.html

3. A project guide to UX design, Russ Unger, Carolyn Chandler.New Riders, 2009. Ch. 7 “Personas”

4. User interface design and evaluation, Debbie Stone, CarolineJarret et al. Morgan Kaufmann, 2005.http://booksite.elsevier.com/9780120884360/ chapters 1-4, 6, 8, 10

available to download.

http://ocw.mit.edu/

http://www.uxforthemasses.com/personas/

http://research.microsoft.com/en-us/um/redmond/groups/coet/grudin/personas/old versions/pruitt-grudinold.pdf

http://research.microsoft.com/en-us/um/redmond/groups/coet/grudin/personas/old versions/pruitt-grudinold.pdf

www.marcrettig.com/prototyping-for-tiny-fingers/

www.userfocus.co.uk/articles/paperprototyping.html

www.paperprototyping.com

http://sensible.com/rsme.html

http://booksite.elsevier.com/9780120884360/

How to design UI ? User research Paper prototyping User testing Forms

How to design UI ?

We have studied what’s a good UI:

behaves according to user expectations: the UI does what theuser thinks it should, mental model

good usability : easy to learn, use, remember + few errors,nice and fun −→ what to do and not to do

Today’s question: How to design ? How to start from scratch andget to a fully designed UI ?

Scratch ?

we have got a requirements specification

maybe a rough idea of who the target users will be

and which tasks do they need to perform, and why

5 / 47


How to design UI ?

How to develop software ? Waterfall model

Problems:

we don’t know everything we need at the beginning but as theproject evolves

even with feedback between stages, mistakes made at an earlystage are discovered too late and are cost too much

6 / 47


How to design UI ?

Waterfall model is not suited either for UI development

can not predict whether a UI design will succeed, don’t knowhow the user will think about it

users appear in the process just at the beginning(requirements) and at the end (acceptance): don’t get toknow we are wrong until the end

errors require dramatic changes

7 / 47


How to design UI ?

Spiral model:

Design

BuildTest

Design

BuildTest

Design

Build

Prototype 1

Prototype 2

Prototype 3

Userresearch

8 / 47


How to design UI ?

Spiral model:

starts with user research: who is the user ?

iterate: successive refinement

first iterations based on cheap, low-fidelity designs:storyboards, paper prototypes

late iterations with higher fidelity designs: mockups, UIimplementation

evaluation with a well defined procedure: “formative testing”

lab testing with selected users

at one stage it is possible to test several alternatives indifferent prototypes

more iterations means better UI

9 / 47


User research

What’s user research ? Get to know

who are the users ?in an e-commerce website, shoppers : regular, bargainhunters, connoisseurs

what do they need to do with the UI ?to purchase an item, download catalog, return an item, checkorder status . . .

why ?check order status because it has not yet been delivered,consult price to check discounts, download catalog to browseoffline

how ? where ? the contextfrom a smart phone while commuting, from a tablet at home,desktop computer at work . . .

10 / 47


User research: user groups

How to get userdata ?User-researchtechniques

11 / 47



How to get userdata ?User-researchtechniques

11 / 47



Make user groups on the basis of a list of relevant attributes like

Demographics: age, sex, family (single, married, children. . . ),income level, location . . .

Physical disabilities

Experience: education background, computer technologyfamiliarity, subject expertise . . .

Motivation or primary goal

Attitude towards computers (at large)

12 / 47



Example (ATM user groups, from UI design and evaluation, Stoneet al., 2005)

I am a member of a large, extended family. The teens in my familygenerally use their account only once a week —to deposit their allowance(or to make a withdrawal if they have saved enough for a particularpurchase). There are also occasions, such as Christmas and birthdays,where extra money, received as presents, is deposited. For them using acard machine is “cool” and grown up, and it means they won’t have towait in line on a Friday afternoon or a Saturday morning when the banksare already busy.

The young adults in my family use ATM facilities like a wallet. They

withdraw small amounts of money frequently — maybe even several

times a day— as and when they need it, rather than withdrawing a great

wad of cash that they may spend recklessly.

13 / 47



Example (ATM user groups, from UI design and evaluation, Stoneet al., 2005)

The family members between the ages of 25 and 50 are generally busy,working people. Banking is a necessary part of life, but the quicker it canbe done, the better. Waiting in bank lines is something to be avoided,and they prefer to withdraw enough money from an ATM to last severaldays.

The older members of my family bank even less often. They tend to

make a single weekly cash withdrawal to cover the weeks expenses,

although where possible they prefer to get their money from a person

rather than a machine.

13 / 47



14 / 47



14 / 47



14 / 47


User research: personas1

Personas

documents that describe typical user targets

fictional characters that depict target user populations

based on real data from user research

paint a clear picture of who, why, when is using the application

The idea of Personas originated in marketing and was introducedto UI design in 1999 by Alan Cooper’s book The inmates arerunning the asylum.

1A project guide to UX design, Russ Unger, Carolyn Chandler. New Riders,2009. Ch. 7.

15 / 47


User research: personas

A website for electronic child care (EEC) gives child care providersthe ability to view information about their agreements, attendancetransactions, payments, and other program information.

16 / 47



16 / 47



Another website focus on helping singles to start a relationship

17 / 47



17 / 47



Why personas ?

help designers focus on users which are “not like them”

what’s more, on specific target typical users

condensed into a few characters (< 10)

provide a shared basis for communication and discussion,“Fanya cannot use the kindergarten search tool of the ECCwebpage”

but also help other developers to make decisions: testersmanagers, marketing people

for instance: what are the key features of the application ?

18 / 47



Prioritize features for a product development cycle

score the persona . . .

−1 is confused, annoyed, or in some way harmed by the feature0 doesnt care about the feature one way or the other

+1 gets some value from the feature+2 loves this feature or it does something wonderful for her

Features 2 and 4 should be made a high priority. Feature 3 shouldprobably be dropped.

19 / 47



What information goes into a persona ?

Nicolle

34-year-old Certified Hand Therapist from West Chicago, Illinois.She happens to be a non-driving commuter who spends 2 to 3hours per day traveling to and from her job. The fictional client isa company called ACMEblue, a manufacturer of Bluetoothheadsets for Apple.

Nicolle represents a user of ACMEblue website where headsets canbe purchased.

20 / 47



21 / 47



Minimum content to make the person believable

Photo : natural-looking, not posed, in context (commuting),must fit lifestyle

Name : not “mid-30s blonde mom professional” but Nicolle.Different from other personas and invented (not coworkers. . . )

Age : determines behaviour

Location : social level

Occupation : day-to-day live patterns

Biography : it is the compelling story that makes the personareal, made with details coming from user research data.

All of them notably occupation and biography, adds authenticity,credibility. But otherwise irrelevant features must be removed.

22 / 47



name age occupation location

quote

biography

onlineactivities

offlineactivities

goal

trigger point

23 / 47



Some other examples of personas (for other applications) whichdon’t the same pattern, lack some minimum content but exhibitother interesting content:

sliders

’a day in the life’

goals, needs

frustrations

questions

24 / 47



25 / 47



Fred Fish: Corporate Chef “Get me out of the office & into the kitchen.”Employer: Boise ControlsBackground: Masters from Johnson & Wales UniversityComputer skills: Novice

Quick take on FredComputer skills Novice

ExpertJob situation Employee

DirectorManagerVice president

Computer type NetbookLaptop Desktop

Computer tools Advanced featuresCoding toolsEmailWeb browsingWord processing

Background BusinessEngineeringMarketingManagementOther: cooking

Photo from Flickr, some rights reserved

Chefs are different from other usersComputers are just tools for a chef. Fred would rather use a cutting board than a keyboard.

Key goalsFred doesn’t get his hands dirty the way he used to (literally). He stops in at all six Boise Controls sites as often as possible to stay in touch with cooks and cooking.

He wants to learn computer tools, but not at the expense of managing his kitchens.

A day in the lifeOnce a month, he meets with the head chefs and to plan the menu. When they’re done, he sends it to his staff and his manager.

He’s not a computer whiz. On a good day, he can drag in some clip art and do some formatting with fonts. Once in awhile, he’ll format menus with the new editor they on his MacBrook Pro.

He’s figured out a lot, but not everything. He always had a problem sending a message without the attachment, or

an attachment with no message. That’s annoying and embarrassing and used to keep him away from computers.

The new EZ-Write system seems to have some features to help with that. Anytime he writes something like “…see the attached menu...” the program prompts him if he doesn’t attach something. If there were a Nobel Prize for software, he’d nominate the people who designed this.

EZ-Write primary persona: the main user type

25 / 47



25 / 47



25 / 47



25 / 47



25 / 47



How personas work ?

people engages with fictional characters in novels, movies

rise empathy as if it was a real person

may easily imagine behaviour, reactions to new situations likeour UI design

26 / 47



Criticism

temptation of reuse in a different project

marketing is interested in clients, development in users

overuse: personas are not a panacea, cannot replace real users

cost

Perils: don’t work if

not believable

not based on real data

are not well communicated

there’s not understanding of how to use (think of) them

27 / 47


Paper prototyping: what’s it ?

Obviously, UI design does not start programming, that’s tooexpensive:

we still don’t know what to do exactly

it takes too much time to build usable UIs by coding them

Instead, we build iteratively prototypes: from low to high fidelity.Prototypes at early stages are paper prototypes. Later, mockups,and UI code supported by functionality code.

28 / 47


Paper prototyping: what’s it ?

Paper prototyping

Is a variation of usability testing where representative usersperform realistic tasks by interacting with a paper version of theinterface that is manipulated by a person “playing computer” whodoesn’t explain how the interface is intended to work.

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

29 / 47






Paper prototype: what is not

Sketchboard, Storyboard

Series of drawings or images that represents how an interfacewould be used to accomplish a particular task. Spread across awall are typically used to understand the flow of the user’s workand how the interface will support each step.

30 / 47





30 / 47





30 / 47



Wireframe

Page layout for a Web site, showing what content goes where. Canbe low or high fidelity. With the addition of realistic content awireframe could be tested, therefore it would then be a paperprototype.

31 / 47



Mockup

High fidelity prototype which is a “fake” program simulatingthe UI appearance and dynamics of the real application. Butno real computations are performed.

Also, a mockup can be some representation (pdf, web pages)generated by a tool (not coded) which simulates ahigh-fidelity interface.

Preceded by 1) sketchboards, 2)paper prototypes.

Like paper prototypes, built for user testing.

32 / 47



Some fine tools for generating lo-fi and hi-fi sketches and mockups:

WireframeSketcher http://wireframesketcher.com

Pencil Project http://pencil.evolus.vn/

JustinMind http://justinmind.com

Examples: mockup of Android apphttp://www.justinmind.com/prototyper/examples

Problem: limit creativity of designer to controls available in thetool palette (but you can add to it)

Advantages: simulate dynamics (clicks and even gestures), can beshared (as pdf, web pages, app), no need to code

33 / 47


Paper prototype: advantages

Problems of hi-fi prototypes

take too long to build and change

95% of time getting the code right, 5% thinking about thedesign

high fidelity prototypes deviate reviewers attention tosecondary issues: color, fonts, button sizes. . . instead ofcomming up with new ideas

developers resist changes: they get attached to hi-fiprototypes because are hard to implement

a single bug may bring user testing to a halt

34 / 47


Paper prototype: advantages

Paper prototypes solve all of them, plus

even if its paper, it’s interactive (albeit slow) thanks to the“computer” person

fosters creativity: just draw any widget, control, you canimagine (not just the palette of the UI or sketching softwaretool)

early formative testing: learn what’s wrong to improve, at thefirst stages

maximizes number of iterations before committing to code

allows to quickly generate design ideas to be tested by users

35 / 47

http://wireframesketcher.com

http://pencil.evolus.vn/

http://justinmind.com

http://www.justinmind.com/prototyper/examples


Paper prototype: 7 myths

I can’t draw well enough to create a paper prototypeThe goal is to evaluate the ideas behind the UI, not theprototypeDraw sketches, not illustrationsNo need of stencils either

Wireframes are the same as paper prototypesNo, they focus on layout and are build toward the end ofdesign phase

I can do it just as well with Visio (or whatever the softwearetool)Copy-paste controls with the photocopier is fastSoftware tools constrain thinking on what can be doneDevelopers can solve problems without computers

36 / 47


Paper prototype: 7 myths

Sketchboards are just as effectiveAre necessary for other purposes, not good for formativetesting

Users behave differently with a paper prototype than with areal systemYes, in case of feedback, gestures, response time, precisepointingBut otherwise are just as effective in detecting usabilityproblems

It looks unprofessionalWhat’s professional is doing the right thing: involve usersearly in the design

I can’t prototype interactivity Right in some cases: gestures,scrolling, panning and zooming Most of times interaction ispoint and click plus keyboard

37 / 47


User testing

User testing

Not testing the user but the UI prototype. Better call it formativetesting, the user tests a prototype (paper based or not) duringiterative design with the goal of finding usability problems to fix onthe next iteration.

38 / 47


User testing: ethics

User testing puts psychological pressure on the user. A real story :

1 the originally-scheduled user didn’t show up, so they just pulled anemployee out of the hallway to do the test

2 it happened to be her first day on the job

3 they didn’t tell her what the session was about

4 she not only knew nothing about the interface to be tested (whichis fine and good), but also nothing about the domain

5 the observers hadn’t been told how to behave (i.e., shut up)

6 one of those observers was her boss

7 the tasks hadn’t been pilot tested, and the first one was actuallyimpossible

When she started struggling with the first task, everybody in the room

realized how stupid the task was, and burst out laughing — at their own

stupidity, not hers. But she thought they were laughing at her, and she

burst into tears (from Carolyn Snyder, Paper Prototyping).39 / 47


User testing: conducting a test

Participants

Facilitator

Computer

Observers

User, obviously

40 / 47



Facilitator

greets the user and takes the lead

the only team member which is allowed to speak during thetestcomforts the user:

“we are testing the system, not you”“if you encounter difficulties, it’s the system’s fault”“you’ll help us to detect them”“you can stop at any time”

informs about confidentiality and privacy issues

asks the user to perform some task

tells the user to think aloud while using prototype, asks whyhe/she did something

does not explain him/her how to use it!

ends session with debriefing and thanks

41 / 47



Computer (if paper prototype)

knows the application logic

sustains the illusion that paper prototype behaves as a realbut incredibly slow computer

if the user touches a control, arranges the prototype tosimulate a response

42 / 47



Observers

take notes of positive and negative incidents

stay quiet

do not show any reaction

43 / 47


User testing: Examples

Usability testing of a paper prototype

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

44 / 47



Usability testing a web page

http://www.youtube.com/watch?v=QckIzHC99Xc

http://www.sensible.com/rsme.html45 / 47



Guerilla user testing

https://www.youtube.com/watch?v=0YL0xoSmyZI

46 / 47


Forms and checklists

Planning: Overview of a paper prototyping project1, Usabilitytesting checklist2, Usability test plan dashboard3

Legal stuff: Non-disclosure agreement, Informed consent1,Recording consent form2

What to say: Pretest briefing1, Introducing a PP usabilitytest1, Usability test script2, “Things a therapist would say”2

Template forms: Template for usability test tasks1

Instructions: Rules for usability tests observers1, Instructionsfor usability tests observers2

1www.paperprototyping.com/download.html2http://sensible.com/downloads-rsme.html3www.userfocus.co.uk/articles/dashboard.html

47 / 47









http://www.sensible.com/rsme.html





www.paperprototyping.com/download.html

http://sensible.com/downloads-rsme.html

www.userfocus.co.uk/articles/dashboard.html

Documents

User Interface Design II: Process · User Interface Design II: Process J.Serrat 102759 Software Design November 22, 2016 Index 1 How to design UI ? 2 User research 3 Paper prototyping