WHAT THE !@#$ IS UX ANYWAYS?
A fun and concise introduction.
!"#$%&'()*"$+","(+%(-%.#
)",,-*/0,'!0,'!%(-%.#
111%/0,'!0,'!%(-%.#
23456789:;6235<=>68?635@<533>
WHAT THE !@#$ IS UX ANYWAYS?
!"#$%"&%'"()%(*+,"*%-.)'$(-*)%/
UI?
Business
Analysis?
IA?
Cognitive
Psychology?
Design
Thinking?
User
Research?
Usability?
Prototyping
and Testing?
HCI?
Sociology?
!"#$%&$'($%)$*+$!&$*+,-(.##$#&
.//&.#($+0#&,1&02$&$*345#$%6#&
)*0$%.+0),*&7)02&02$&+,-(.*89&)0#&
#$%:)+$#9&.*3&)0#&(%,35+0#;
4 <,*&=,%-.*&.*3&>.?,@&=)$/#$*&
UI
Business
Analysis
IA
Cognitive
Psychology
Design
Thinking
User
Research
Usability
Prototyping
and Testing
HCI
Sociology
PRODUCT VISION = …
?
PRODUCT VISION = FEATURES!
USER NEEDS =
?
…
USER NEEDS = SIMPLICITY
PRODUCT VISION = …
?
PRODUCT VISION = PERFORMANCE!
USER NEEDS = …
?
USER NEEDS = VERSATILITY
Ask them.
!"#$%"&'"()*"+&,*"-,"$"./0
1)*"./"23-4*55"5&62+&,&*#
78+*5",-3"9--#"
85$:&+&(%;.<
=->"(-"4-'#84("%-83"
->'"85*3"3*5*$34)1--+5"-,"()*"(3$#*
?*5&9'"1)&'@&'9
=->"./"4$'"$,,*4("%-83"
23-#84("6$(*3&$++%
A-66-'"./"6&5($@*5"(-"
$B-&#C
7$4%"2&4(83*5"-,"
1-6&5+$BD5"4)*5(">&()"9-+#"
4)$&'
DESIGN THINKING
!"#$%&'()
*)+',)
-.)$%)
/01%1%2#)
3)(%
-"#4)"),%
!"#$%&'()
!"#$%"
!"#$%#
!"#$#$%&'
!"#$#$%&'
!"#$#$%&'
!"#$
!"#$%"%&'
But we are all human.
Everyone has different
cognitive profiles.
GESTALT - DESIGN FOR HUMAN EYE
Visual grouping, pattern recognition and
mental associations means good UI.
Our goal is to visualise 6 different groups of 1 dot and three lines.
Law of Proximity
Our goal is to visualise 6 different groups of 1 dot and three lines.
Do Don’t
Our goal is to visualise 3 content groups of 1 icon, 1 headline and
three lines.
Law of Similarity
Our goal is to visualise 3 content groups of 1 icon, 1 headline and
three lines.
Do Don’t
Our goal is visualise a dashboard with 3 different groups of metrics.
Law of Common Region
Do Don’t
Our goal is visualise a dashboard with 3 different groups of metrics.
Our goal is to highlight the search bar when active.
Law of Figure/Ground
Our goal is to highlight the search bar when active.
Do Don’t
Our goal is to design a list that suggests a swipe gesture is needed.
Law of Closure
Our goal is to design a list that suggests a swipe gesture is needed.
Don’tDo
NIELSEN’S 10 USABILITY HEURISTICS
NIELSEN’S 10 USABILITY HEURISTICS
NIELSEN’S 10 USABILITY HEURISTICS
!"#$%&'()%*+%,-./'0'123%45(1$6($1%7.).8'($9
!"#$%),6,%*+%:$/%;.)$%,-./'0'123%4"#$%<$=%>*6&%
"'?$-9
!"#$%($@1%/$-1%1#'()%1*%.%16,$%1'?$%?.A#'($3%
4BCD%"*E.29
VISIBILITY OF SYSTEM STATUS
! !""#$%&"'&$()*+',"-.
! /'+0(-"$*""-1234$5+$%&"'.
01
02
03
04
05
06
07
08
09
10
VISIBILITY OF SYSTEM STATUS
01
02
03
04
05
06
07
08
09
10
! !"#$%&'(#)*(&+$,-'$-#.
! /0123&(4(5#671)2#,5#3&5#)6(.
! 8$5')$+&$,3&+1-29$+&1)3#)&1:&2,:1)6$521,.
01
02
03
04
05
06
07
08
09
10
MATCH SYSTEM AND REAL WORLD
01
02
03
04
05
06
07
08
09
10
MATCH SYSTEM AND REAL WORLD
! !"#$"%&'(#)%*+,#%#$$&$"-
! ./00&$(%/)1&%+)1%$#1&-
01
02
03
04
05
06
07
08
09
10
USER CONTROL AND FREEDOM
01
02
03
04
05
06
07
08
09
10
USER CONTROL AND FREEDOM
! !"##"$%&#'()"*+%,"-./-(0"-12
! 3/45,/%,"6-0(0./%#"'4%7 0-(50(0./2
01
02
03
04
05
06
07
08
09
10
CONSISTENCY AND STANDARDS
01
02
03
04
05
06
07
08
09
10
CONSISTENCY AND STANDARDS
! !"#$%&'()*'+&'$%,#+('&-.'$+'(("(/
! 0'12+-$'(+)3"%&+4%$*)5'$/
01
02
03
04
05
06
07
08
09
10
ERROR PREVENTION
01
02
03
04
05
06
07
08
09
10
ERROR PREVENTION
! !"#$%&'($)*+,%")*-&.+,%"./%&0*-&.+%1-+-'2$3%
! 4+$5%+6&72/%.&*%6"1$%*&%5$8$8'$5%-.9&58"*-&.3
! :.+*57)*-&.+%+6&72/%'$%1-+-'2$%&5%$"+-2;%5$*5-$1"'2$3
01
02
03
04
05
06
07
08
09
10
RECOGNITION OVER RECALL
01
02
03
04
05
06
07
08
09
10
RECOGNITION OVER RECALL
! !"##$%&'()$%&*"&('+,-'.%/0"/,&'+*&1$,('.$%'+-2+,*/-'"(/%(3
! 4/(15,'+..$%-+,*/('.$%',$21*/'"(/%(3
01
02
03
04
05
06
07
08
09
10
FLEXIBILITY AND EFFECIENCY OF USE
01
02
03
04
05
06
07
08
09
10
FLEXIBILITY AND EFFECIENCY OF USE
! !""#$%&$'%(#)"*
! +"(,-"$.//"0"''123$0,/&"/&*
! 4%5"$0,6"7$8,,6$%/&"2910"$6"'%8/$%'$1'$)%&&)"$1'$#,''%:)"*
! ;1'%01))3$<=>?@$6,$AB1&$C?($8,%/8$&,$'B,A$3,.$/,AD
01
02
03
04
05
06
07
08
09
10
AESTHETIC AND MINIMAL DESIGN
! !"#$%&%'()**+*(,)--./)-0
! 1$).*(.23(-%,#$)($.2/4./)0
! 566)*(.(-+$4'%+20
01
02
03
04
05
06
07
08
09
10
HELP RECOGNISE, DIAGNOSE, RECOVER
01
02
03
04
05
06
07
08
09
10
HELP RECOGNISE, DIAGNOSE, RECOVER
! !"#$%&'()'*+(,-&(&#./0'-1,1%#-2
! 344'"(1/1#"%,*5(4#"(4%"51(1%0'(/5'2
! 6**#7(/5'"5(1#(4%-&()'*+(',5%*82
01
02
03
04
05
06
07
08
09
10
HELP AND DOCUMENTION
01
02
03
04
05
06
07
08
09
10
HELP AND DOCUMENTION
Slack
#ux-design
UX
Incubator
UI Dojo
Design
Thinking
Dojo
UX Guild
UX
Incubato
r
UI Dojo
THANKS!
!"#$%#"%!& '()'*+,-./012,!"#$
3(*1456789(1:(;(7:47<4=*
8(;;<9>.;63.;6347<4=*
???4>.;63.;6347<4=*

What the !@#$ is UX? A fun and concise introduction