workshop designing useful apps
Post on 13-Apr-2017
218 Views
Preview:
TRANSCRIPT
Designing & prototyping useful apps-I
Joris Klerkx - Robin De Croon
http://hci.cs.kuleuven.be joris.klerkx@cs.kuleuven.be
1
Human-Computer InteractionDept. Computerwetenschappen
KU Leuven
Our research “Toaugmentthehumanintellect”(Engelbart,1962)
2
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
Today
Some key aspects of Human-Computer Interaction Designing & Building a useful app: steps Brainstorming & prototyping your own app
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
CHI
TASK
USERTECHNOLOGY
Microsoft word
Evernote
TASK
Autocad
TASK
Paint
TECHNOLOGY
USER
USER
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
19
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
Myth
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
Know
ledg
e
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)
http
://de
sign
ingi
nter
face
s.co
m/p
atte
rns/
Groupthink or the bandwagon bias
Design Process
User-centered Design - Rapid Prototyping
0%
0%
100%
100%
OLD
UX
Paper prototypes
Digital prototypes
Usable Products
Fidelity
http://www.wired.com/design/2013/09/appseed-transforms-your-sketches-into-app-prototypes/?mbid=social12565664
time
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
http
://w
ww.
usab
ility.g
ov/h
ow-to
-and
-tool
s/m
etho
ds/p
erso
nas.
htm
l
http://user.com/assets/files/downloads/sample-persona-from-interaction-design-inc.pdf
Persona development
http://www.usability.gov/how-to-and-tools/methods/personas.html
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
http://www.usability.gov/how-to-and-tools/methods/personas.html
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://hci.stanford.edu/courses/cs147/2009/assignm
ents/storyboard_notes.pdf
http://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf
http://hci.stanford.edu/courses/cs147/2009/assignm
ents/storyboard_notes.pdf
http://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf
http://hci.stanford.edu/courses/cs147/2009/assignm
ents/storyboard_notes.pdf
http://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf
http://hci.stanford.edu/courses/cs147/2009/assignm
ents/storyboard_notes.pdf
http://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf
http://hci.stanford.edu/courses/cs147/2009/assignm
ents/storyboard_notes.pdf
http://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf
http://hci.stanford.edu/courses/cs147/2009/assignm
ents/storyboard_notes.pdf
http://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf
http://hci.stanford.edu/courses/cs147/2009/assignm
ents/storyboard_notes.pdf
http://hci.stanford.edu/courses/cs147/2009/assignments/storyboard_notes.pdf
http://hci.stanford.edu/courses/cs147/2009/assignm
ents/storyboard_notes.pdf
http://hci.stanford.edu/courses/cs147/2009/assignm
ents/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
Sketcheshttp://w
ww
.cs.berkeley.edu/~landay/research/publications/SILK
_CH
I/jal1bdy.html
70 secs.
329 secs.
https://medium.com/accurat-studio/sketching-with-data-opens-the-mind-s-eye-92d78554565
86
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!
top related