An entertaining intro to the field of UX, that I presented at Entelect Dev 2018. This talk was centered around the practical applications of UX principles such as Gestalt and heuristics to enable non-UX professionals, mainly software engineers to use learnings from UX in their day to day roles.

1. WHAT THE !@#$ IS UX ANYWAYS?
A fun and concise introduction.
!"#$%&'()*"$+","(+%(-%.#
)",,-*/0,'!0,'!%(-%.#
111%/0,'!0,'!%(-%.#
23456789:;6235<=>68?635@<533>

2. WHAT THE !@#$ IS UX ANYWAYS?
!"#$%"&%'"()%(*+,"*%-.)'$(-*)%/

3. UI?
Business
Analysis?
IA?
Cognitive
Psychology?
Design
Thinking?
User
Research?
Usability?
Prototyping
and Testing?
HCI?
Sociology?

4. !"#$%&$'($%)$*+$!&$*+,-(.##$#&
.//&.#($+0#&,1&02$&$*345#$%6#&
)*0$%.+0),*&7)02&02$&+,-(.*89&)0#&
#$%:)+$#9&.*3&)0#&(%,35+0#;
4 <,*&=,%-.*&.*3&>.?,@&=)$/#$*&

5. UI
Business
Analysis
IA
Cognitive
Psychology
Design
Thinking
User
Research
Usability
Prototyping
and Testing
HCI
Sociology

10. PRODUCT VISION = …
?

11. PRODUCT VISION = FEATURES!

12. USER NEEDS =
?
…

13. USER NEEDS = SIMPLICITY

14. PRODUCT VISION = …
?

15. PRODUCT VISION = PERFORMANCE!

16. USER NEEDS = …
?

17. USER NEEDS = VERSATILITY

18. Ask them.

19. !"#$%"&'"()*"+&,*"-,"$"./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)$&'

20. DESIGN THINKING
!"#$%&'()
*)+',)
-.)$%)
/01%1%2#)
3)(%
-"#4)"),%

22. !"#$%&'()

23. !"#$%"

24. !"#$%#

25. !"#$#$%&'

26. !"#$#$%&'

27. !"#$#$%&'

28. !"#$

29. !"#$%"%&'

30. But we are all human.
Everyone has different
cognitive profiles.

31. GESTALT - DESIGN FOR HUMAN EYE

32. Visual grouping, pattern recognition and
mental associations means good UI.

37. Our goal is to visualise 6 different groups of 1 dot and three lines.

38. Law of Proximity
Our goal is to visualise 6 different groups of 1 dot and three lines.
Do Don’t

39. Our goal is to visualise 3 content groups of 1 icon, 1 headline and
three lines.

40. Law of Similarity
Our goal is to visualise 3 content groups of 1 icon, 1 headline and
three lines.
Do Don’t

41. Our goal is visualise a dashboard with 3 different groups of metrics.

42. Law of Common Region
Do Don’t
Our goal is visualise a dashboard with 3 different groups of metrics.

43. Our goal is to highlight the search bar when active.

44. Law of Figure/Ground
Our goal is to highlight the search bar when active.
Do Don’t

45. Our goal is to design a list that suggests a swipe gesture is needed.

46. Law of Closure
Our goal is to design a list that suggests a swipe gesture is needed.
Don’tDo

49. NIELSEN’S 10 USABILITY HEURISTICS

50. NIELSEN’S 10 USABILITY HEURISTICS

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

52. VISIBILITY OF SYSTEM STATUS
! !""#$%&"'&$()*+',"-.
! /'+0(-"$*""-1234$5+$%&"'.
01
02
03
04
05
06
07
08
09
10

53. VISIBILITY OF SYSTEM STATUS
01
02
03
04
05
06
07
08
09
10

54. ! !"#$%&'(#)*(&+$,-'$-#.
! /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

55. 01
02
03
04
05
06
07
08
09
10
MATCH SYSTEM AND REAL WORLD

56. ! !"#$"%&'(#)%*+,#%#$$&$"-
! ./00&$(%/)1&%+)1%$#1&-
01
02
03
04
05
06
07
08
09
10
USER CONTROL AND FREEDOM

57. 01
02
03
04
05
06
07
08
09
10
USER CONTROL AND FREEDOM

58. ! !"##"$%&#'()"*+%,"-./-(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

59. 01
02
03
04
05
06
07
08
09
10
CONSISTENCY AND STANDARDS

60. ! !"#$%&'()*'+&'$%,#+('&-.'$+'(("(/
! 0'12+-$'(+)3"%&+4%$*)5'$/
01
02
03
04
05
06
07
08
09
10
ERROR PREVENTION

61. 01
02
03
04
05
06
07
08
09
10
ERROR PREVENTION

62. ! !"#$%&'($)*+,%")*-&.+,%"./%&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

63. 01
02
03
04
05
06
07
08
09
10
RECOGNITION OVER RECALL

64. ! !"##$%&'()$%&*"&('+,-'.%/0"/,&'+*&1$,('.$%'+-2+,*/-'"(/%(3
! 4/(15,'+..$%-+,*/('.$%',$21*/'"(/%(3
01
02
03
04
05
06
07
08
09
10
FLEXIBILITY AND EFFECIENCY OF USE

65. 01
02
03
04
05
06
07
08
09
10
FLEXIBILITY AND EFFECIENCY OF USE

66. ! !""#$%&$'%(#)"*
! +"(,-"$.//"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

70. ! !"#$%&%'()**+*(,)--./)-0
! 1$).*(.23(-%,#$)($.2/4./)0
! 566)*(.(-+$4'%+20
01
02
03
04
05
06
07
08
09
10
HELP RECOGNISE, DIAGNOSE, RECOVER

71. 01
02
03
04
05
06
07
08
09
10
HELP RECOGNISE, DIAGNOSE, RECOVER

72. ! !"#$%&'()'*+(,-&(&#./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

73. 01
02
03
04
05
06
07
08
09
10
HELP AND DOCUMENTION

74. Slack
#ux-design
UX
Incubator
UI Dojo
Design
Thinking
Dojo
UX Guild

75. UX
Incubato
r
UI Dojo
THANKS!

76. !"#$%#"%!& '()'*+,-./012,!"#$
3(*1456789(1:(;(7:47<4=*
8(;;<9>.;63.;6347<4=*
???4>.;63.;6347<4=*