What do UX specialists and developers have in common? Probably more than you are aware. :) Did you ever think about UX when you are writing programs? UX from Developer’s perspective. I will be doing a session covering what UX is, how it's differs from UI and how UX is a close cousin to development with loads of "how to get started" info. I’m excited to share some interesting stories too. light deep-thinking discussion on self-controls, disciplines and how to get start doing UX in your programming life.

1. UX : A Developers Perspective
#UXchat #UXchecklist
Sandaru Paranahewa
Senior UX Engineer
@sandruparo
@sandruparo

2. ONE PICTURE
My Journey
@sandruparo

3. ONE PICTURE
@sandruparo

4. ONE PICTURE
@sandruparo

5. ONE PICTURE
@sandruparo

6. User Interface Designer
ONE PICTURE
Information Architect
User Experience Architect
Interaction Designer
User Experience Designer
Usability Specialist
User Interface Architect
Usability Engineer
User Experience Specialist
@sandruparo

7. How UX wants to be seen ?
Field Research
Face to face interviewing
Gathering and organizing statistics
Creating personas
Product Design
Feature writing
Graphic Art
Animations
Interaction Design
Navigational Design
Information Architecture
Usability
Prototyping
Interface Layout
Interface Design
Visual Design
Iconography
Taxonomy creation
Terminology creation
Copywriting
Presenting and speaking
Working tightly with programmers
Brainstorm coordination
Design culture evangelism
Creation of user tests
@sandruparo

8. How UX is typically to be seen?
Interface Layout
Interface Design
Field Research
Face to face interviewing
Gathering and organizing statistics
Creating personas
Product Design
Feature writing
Graphic Art
Animations
Interaction Design
Navigational Design
Information Architecture
Usability
Prototyping
Visual Design
Iconography
Taxonomy creation
Terminology creation
Copywriting
Presenting and speaking
Working tightly with programmers
Brainstorm coordination
Design culture evangelism
Creation of user tests
@sandruparo

9. USER EXPERIENCE
@sandruparo

10. ONE PICTURE
@sandruparo

11. ONE PICTURE
@sandruparo

12. “ UX design is a combination of methods
with which you can solve design problems
while focusing on the user ”
@sandruparo

13. UX != UI
@sandruparo

14. UX
&
DEVELOPMENT
@sandruparo

15. What is UX Pattern ?
“ Reusable solutions to
usability problems”
@sandruparo

16. TARGET
1. Don’t make user wait.
3. Consider the different States
2. Above the fold
4. Earn the user’s trust
5. Enhance UX with transitions
7. Play on persuasion
6. Make it work offline
@sandruparo

17. 1. Don’t make user wait
@sandruparo

18. 53% of mobile users abandon sites that take longer
than 3 seconds to load
@sandruparo

19. @sandruparo

20. 1. First Paint
@sandruparo

21. @sandruparo

22. Typical HTML
@sandruparo

23. Typical HTML
index Image
JS CSS
First Pain
@sandruparo

24. What is the browser waits for before
its can actually render ?
@sandruparo

25. What blocks rendering ?
CSS
JavaScript
@sandruparo

26. Unblocking CSS
Inline critical CSS
Dynamically injecting the rest
@sandruparo

27. Critical CSS
@sandruparo

28. Unblocking JavaScript
@sandruparo

29. If you have many JS ?
@sandruparo

30. Optimized HTML
@sandruparo

31. @sandruparo

32. 2. When app is ready for Interaction
@sandruparo

33. What’s the bottleneck ?
nasa.gov
Real trace took from Macbook pro with only 5 times CPU throttling
@sandruparo

34. Possible solutions?
Ship less JavaScript
Source map explorer
Code Splitting
@sandruparo

35. 2. Above the fold
@sandruparo

36. Glimpse of
interesting stories
Focused Content
Attractive
Give the “ oh yeh “
feeling to user to scroll
@sandruparo

37. Content

38. 3. Consider the different States
@sandruparo

39. @sandruparo

40. 1. Nothing
@sandruparo

41. 2. Loading
@sandruparo

42. 3. None
@sandruparo

43. 4. One
@sandruparo

44. 5. Some
@sandruparo

45. 6. Too Many
@sandruparo

46. 7. Incorrect
@sandruparo

47. 8. Correct
@sandruparo

48. 9. Done
@sandruparo

49. 4. Earn the user’s trust
@sandruparo

50. Functionality
@sandruparo

51. @sandruparo

52. Make actions reversible
@sandruparo

53. I confirm that :O
@sandruparo

54. OH NO, YOU DIDN’T !
@sandruparo

55. Timing
@sandruparo

56. Bad Timing
@sandruparo

57. Good timing
@sandruparo

58. 5. Enhance UX with transitions
@sandruparo

59. @sandruparo

60. What makes a good transition ?
@sandruparo

61. @sandruparo

62. From DOM to Pixels on the screen
@sandruparo

63. I’ll just use CSS3 transitions and animate the
width and height..
@sandruparo

64. Pipeline
That browser follows in order to draw
animations on the screen
@sandruparo

65. Trigger animation
either using JS or
CSS
Calculate
Styles
Calculate
geometry
Paint pixels
in to
different
layers
Draw to screen
Most process follows this pipeline
@sandruparo

66. Animation Scenarios
@sandruparo

67. Width
Height
Margin
Top
left
Mapping to CSS Properties
box-shadow
border-radius
Background
transform
opacity
@sandruparo

68. Width
Height
Margin
Top
left
1. Animating width
@sandruparo

69. 2. Animating background-color
Box-shadow
Border-radius
Background
@sandruparo

70. 3. Animating transform
transform
opacity
Most desirable for high pressure points
like animations or scrolling
@sandruparo

71. 4 things a browser can animate cheaply
@sandruparo

72. For high pressure points move all visual
effects into transform & opacity
@sandruparo

73. Live demo
https://codepen.io/jadjoubran/pen/reQexd
@sandruparo

74. 7. Make it work offline
@sandruparo

75. Dynamic Caching
cacheFirst
networkFirst
Fastest
@sandruparo

76. 8. Play on persuasion
@sandruparo

77. Curiosity
@sandruparo

78. @sandruparo

79. Scarcity
@sandruparo

80. @sandruparo

81. Reward
@sandruparo

83. THANKS
sandruspsp@gmail.com
sandaru@gapstars.net
#sandaru-paranahewa