Workshop Designing Useful apps

Designing & prototyping useful apps-I

Joris Klerkx - Robin De Croon

http://hci.cs.kuleuven.be joris.klerkx@cs.kuleuven.be

Human-Computer InteractionDept. Computerwetenschappen

KU Leuven

Our research “Toaugmentthehumanintellect”(Engelbart,1962)

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."

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

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

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

Removing friction between users and machines

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

But important…

Also important…

organisational & social

USERTECHNOLOGY

Microsoft word

Evernote

Autocad

TECHNOLOGY

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

Building a user interface

Building a useful app

Building a user interface

Building a useful app

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

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

Traditional Design Process

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

You are not the user!

(if you are the designer)

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

Know your users Study workflow & habits

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

“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)

Users cannot tell you what they need (Steve Jobs)

Study behaviour not opinions

Don’t ask for opinions

THE USER IS ALWAYS RIGHT

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

USER-CENTERED DESIGN Know your users!

Understand the users’ mental model

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

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

BeliefTruth

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

Important!

Very important!

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

Users & Designers have very different mental models

Shopping Cart Expectations

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

(Jakob’s Law of Web User Experience)

Groupthink or the bandwagon bias

Design Process

User-centered Design - Rapid Prototyping

Paper prototypes

Digital prototypes

Usable Products

Fidelity

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

Prototyping

Involve users

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

Where do you start?

Step 1: Define purpose

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

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.”

Develop persona’s

Fictive users based on real data & facts

Step 2: User research

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

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

Methods

ility.g

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

Persona development

Condensed user research

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

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

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

Step 3: storyboarding

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

ents/storyboard_notes.pdf

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

http://dl.acm

.org/citation.cfm?id=163268

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

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

Step 4: (Paper) Prototyping

Paper prototype

http://ww

w.paperprototyping.com

Sketcheshttp://w

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

I/jal1bdy.html

70 secs.

329 secs.

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

Sketcheshttp://w

.cognetics.com/ui.htm

Transition Diagram

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

Paper prototyping http://ww

w.nngroup.com

/reports/prototyping/video_stills.html

4) Develop paper prototype

THANKS!

Workshop Designing Useful apps

Education

Getting Started: Designing HTML5 Web Apps

Useful Apps

Developing and Designing Multiscreen Android apps

Designing True Cross-Platform Apps

Designing apps for Android

Designing apps

Most useful apps for university students

Apps Useful Ref

Useful iPad Apps for Special Education

Designing Ecosystems, Not Just Apps

Designing Secure Mobile Apps

Designing apps lecture

Designing iPhone & iPad Apps

Designing native android apps

Designing Great Mobile Apps

Designing apps for children

12 Useful Sites and Apps

Useful iPhone Apps Guide 2011.pdf

Useful iphone apps in canada

Designing iOS apps that rock!