Workshop Designing Useful apps

96
Designing & prototyping useful apps-I Joris Klerkx - Robin De Croon http://hci.cs.kuleuven.be [email protected] 1 Human-Computer Interaction Dept. Computerwetenschappen KU Leuven

Transcript of Workshop Designing Useful apps

Page 1: Workshop Designing Useful apps

Designing & prototyping useful apps-I

Joris Klerkx - Robin De Croon

http://hci.cs.kuleuven.be [email protected]

1

Human-Computer InteractionDept. Computerwetenschappen

KU Leuven

Page 2: Workshop Designing Useful apps

Our research “Toaugmentthehumanintellect”(Engelbart,1962)

2

Page 3: Workshop Designing Useful apps

Human-Computer Interaction

“a discipline concerned with the

• design

• evaluation and

• implementation

of interactive computing systems for human use and with the study of major phenomena surrounding them."

ACM

Page 4: Workshop Designing Useful apps

Today

Some key aspects of Human-Computer Interaction Designing & Building a useful app: steps Brainstorming & prototyping your own app

Page 5: Workshop Designing Useful apps

http://www.web42.com/badday/

Page 6: Workshop Designing Useful apps

http://www.interaction-design.org/encyclopedia/usability_evaluation.html

Page 7: Workshop Designing Useful apps

Removing friction between users and machines

Page 8: Workshop Designing Useful apps

Not so easy…

http://erikduval.wordpress.com/2008/09/10/laptop-fun/http://www.popsci.com/gadgets/article/2013-07/one-laptop-childs-de-evolution

Page 9: Workshop Designing Useful apps

But important…

Page 10: Workshop Designing Useful apps
Page 11: Workshop Designing Useful apps

Also important…

Page 12: Workshop Designing Useful apps

organisational & social

CHI

TASK

USERTECHNOLOGY

Page 13: Workshop Designing Useful apps

Microsoft word

Evernote

TASK

Page 14: Workshop Designing Useful apps

Autocad

TASK

Paint

Page 15: Workshop Designing Useful apps

TECHNOLOGY

Page 16: Workshop Designing Useful apps

USER

Page 17: Workshop Designing Useful apps

USER

Page 18: Workshop Designing Useful apps

Usability

The effectiveness, efficiency, and satisfaction with which specified users achieve specified goals in particular environments

This does not mean you have to create a “dry” design or something that is only good for novices – it all depends on your goals

Page 19: Workshop Designing Useful apps

19

Page 20: Workshop Designing Useful apps
Page 21: Workshop Designing Useful apps

Building a user interface

Building a useful app

=

Page 22: Workshop Designing Useful apps

Building a user interface

Building a useful app

Page 23: Workshop Designing Useful apps

http://www.nngroup.com/articles/definition-user-experience/

Page 24: Workshop Designing Useful apps

We can fix the interface at the end=> good design is more than just user interface=> having right features, building those features right

Myth

Page 25: Workshop Designing Useful apps

Traditional Design Process

Image from http://uxdesign.smashingmagazine.com/2010/10/05/what-is-user-experience-design-overview-tools-and-resources/

Page 26: Workshop Designing Useful apps

You are not the user!

(if you are the designer)

Page 27: Workshop Designing Useful apps

USER-CENTERED DESIGN Image from http://connectedsocialmedia.com/10134/inside-it-user-centered-it/

Page 28: Workshop Designing Useful apps

Know your users Study workflow & habits

Page 29: Workshop Designing Useful apps

(image from http://paznow.s3.amazonaws.com/User-Centred-Design.pdf)

Page 30: Workshop Designing Useful apps

“Logical analysis is not a good way to predict people's behavior (nor are focus groups or

surveys): observation is the key”

(Donald A. Norman, 1998)

Page 31: Workshop Designing Useful apps

Users cannot tell you what they need (Steve Jobs)

Study behaviour not opinions

Don’t ask for opinions

Page 32: Workshop Designing Useful apps
Page 33: Workshop Designing Useful apps

THE USER IS ALWAYS RIGHT

If the user does something “wrong”, it is the fault of the system designer!

Page 34: Workshop Designing Useful apps
Page 35: Workshop Designing Useful apps

USER-CENTERED DESIGN Know your users!

Understand the users’ mental model

Page 36: Workshop Designing Useful apps

Mental Models

“Internal constructions of ‘some’ aspect of the external world that are manipulated, enabling predictions and inferences to be made (Craik, 1943)”

Both conscious & unconscious

Page 37: Workshop Designing Useful apps

A mental model represents what a person thinks is true… but isn’t necessarily true

BeliefTruth

Know

ledg

e

Page 38: Workshop Designing Useful apps
Page 39: Workshop Designing Useful apps

Wouter Walgrave - http://www.slideshare.net/wouterwalgraeve/mental-models-as-information-radiators

Page 40: Workshop Designing Useful apps

Important!

Page 41: Workshop Designing Useful apps

Very important!

image from: http://www.wsj.com/articles/SB10001424127887324767004578485061565368992

Page 42: Workshop Designing Useful apps

Users & Designers have very different mental models

Page 43: Workshop Designing Useful apps
Page 44: Workshop Designing Useful apps

Shopping Cart Expectations

Page 45: Workshop Designing Useful apps

“Users spend most of their time on websites other than yours”

(Jakob’s Law of Web User Experience)

Page 46: Workshop Designing Useful apps

http

://de

sign

ingi

nter

face

s.co

m/p

atte

rns/

Page 47: Workshop Designing Useful apps

Groupthink or the bandwagon bias

Page 48: Workshop Designing Useful apps

Design Process

Page 49: Workshop Designing Useful apps

User-centered Design - Rapid Prototyping

Page 50: Workshop Designing Useful apps

0%

0%

100%

100%

OLD

UX

Page 51: Workshop Designing Useful apps

Paper prototypes

Digital prototypes

Usable Products

Fidelity

http://www.wired.com/design/2013/09/appseed-transforms-your-sketches-into-app-prototypes/?mbid=social12565664

time

Page 52: Workshop Designing Useful apps

Prototyping

Page 53: Workshop Designing Useful apps

Involve users

(image from http://paznow.s3.amazonaws.com/User-Centred-Design.pdf)

Page 54: Workshop Designing Useful apps

Where do you start?

Page 55: Workshop Designing Useful apps

Step 1: Define purpose

Define goals of your app Your vision for it. The intended tasks to use it for.

Page 56: Workshop Designing Useful apps

Remember!

Antoine de Saint-Exupéry:

“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.”

Page 57: Workshop Designing Useful apps

Develop persona’s

Fictive users based on real data & facts

Step 2: User research

Page 58: Workshop Designing Useful apps

https://benmelbourne.files.wordpress.com/2011/05/persona-example-2.png

Page 59: Workshop Designing Useful apps

http://www.usability.gov/how-to-and-tools/methods/personas.html

Methods

Page 60: Workshop Designing Useful apps

http

://w

ww.

usab

ility.g

ov/h

ow-to

-and

-tool

s/m

etho

ds/p

erso

nas.

htm

l

Page 61: Workshop Designing Useful apps

http://user.com/assets/files/downloads/sample-persona-from-interaction-design-inc.pdf

Page 62: Workshop Designing Useful apps

Persona development

http://www.usability.gov/how-to-and-tools/methods/personas.html

Condensed user research

Page 63: Workshop Designing Useful apps

Effective personas• Representative of a ‘big’ user group

• Show user needs and expectations

• Show how an app will be used

• Make universal features and functionalities apparent

• Describe ‘real’ people with background, goals and values

• Rule of thumb: max. 3 à 4 personas per project

http://www.usability.gov/how-to-and-tools/methods/personas.html

Page 64: Workshop Designing Useful apps

https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/personas

Page 65: Workshop Designing Useful apps

http://www.smashingmagazine.com/2014/08/a-closer-look-at-personas-part-1/

Step 3: storyboarding

Page 66: Workshop Designing Useful apps

http://hci.stanford.edu/courses/cs147/2009/assignm

ents/storyboard_notes.pdf

http://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf

Page 67: Workshop Designing Useful apps

http://hci.stanford.edu/courses/cs147/2009/assignm

ents/storyboard_notes.pdf

http://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf

Page 68: Workshop Designing Useful apps

http://hci.stanford.edu/courses/cs147/2009/assignm

ents/storyboard_notes.pdf

http://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf

Page 69: Workshop Designing Useful apps

http://hci.stanford.edu/courses/cs147/2009/assignm

ents/storyboard_notes.pdf

http://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf

Page 70: Workshop Designing Useful apps

http://hci.stanford.edu/courses/cs147/2009/assignm

ents/storyboard_notes.pdf

http://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf

Page 71: Workshop Designing Useful apps

http://hci.stanford.edu/courses/cs147/2009/assignm

ents/storyboard_notes.pdf

http://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf

Page 72: Workshop Designing Useful apps

http://hci.stanford.edu/courses/cs147/2009/assignm

ents/storyboard_notes.pdf

http://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf

Page 73: Workshop Designing Useful apps

http://hci.stanford.edu/courses/cs147/2009/assignm

ents/storyboard_notes.pdf

http://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf

Page 74: Workshop Designing Useful apps

http://hci.stanford.edu/courses/cs147/2009/assignm

ents/storyboard_notes.pdf

Page 75: Workshop Designing Useful apps

http://hci.stanford.edu/courses/cs147/2009/assignm

ents/storyboard_notes.pdf

Page 76: Workshop Designing Useful apps
Page 77: Workshop Designing Useful apps

http://dl.acm

.org/citation.cfm?id=163268

http://dl.acm.org/citation.cfm?id=163268

Page 78: Workshop Designing Useful apps

1) Form teams2) Define purpose of your app 3) Develop persona(s) 4) Develop storyboard

Page 79: Workshop Designing Useful apps

Step 4: (Paper) Prototyping

Page 80: Workshop Designing Useful apps
Page 81: Workshop Designing Useful apps
Page 82: Workshop Designing Useful apps
Page 83: Workshop Designing Useful apps
Page 84: Workshop Designing Useful apps

Paper prototype

http://ww

w.paperprototyping.com

/

Page 85: Workshop Designing Useful apps

Sketcheshttp://w

ww

.cs.berkeley.edu/~landay/research/publications/SILK

_CH

I/jal1bdy.html

70 secs.

329 secs.

Page 86: Workshop Designing Useful apps

https://medium.com/accurat-studio/sketching-with-data-opens-the-mind-s-eye-92d78554565

86

Page 87: Workshop Designing Useful apps

Sketcheshttp://w

ww

.cognetics.com/ui.htm

l

Page 88: Workshop Designing Useful apps

Transition Diagram

http://www.cc.gatech.edu/people/home/dzook/JavaVis.htm

Page 89: Workshop Designing Useful apps
Page 90: Workshop Designing Useful apps
Page 91: Workshop Designing Useful apps
Page 92: Workshop Designing Useful apps
Page 93: Workshop Designing Useful apps

Paper prototyping http://ww

w.nngroup.com

/reports/prototyping/video_stills.html

Page 94: Workshop Designing Useful apps
Page 95: Workshop Designing Useful apps

4) Develop paper prototype

Page 96: Workshop Designing Useful apps

THANKS!