Workshop UX Patterns for Developers - MicrosoftCommiunity
3 likes199 views
The document outlines the perspective of a senior UX engineer on user experience (UX) design, emphasizing the importance of addressing user needs through methods like field research and prototyping. Key UX principles are discussed, including making users wait less, ensuring trust, and effective use of transitions in design. The engineer also distinguishes between UX and UI, underlining that UX encompasses a broader range of design methods focused on usability and user satisfaction.
Workshop UX Patterns for Developers - MicrosoftCommiunity
- 1. UX : A Developers Perspective #UXchat #UXchecklist Sandaru Paranahewa Senior UX Engineer @sandruparo @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
- 12. “ UX design is a combination of methods with which you can solve design problems while focusing on the user ” @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
- 21. @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
- 29. If you have many JS ? @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
- 49. 4. Earn the user’s trust @sandruparo
- 51. @sandruparo
- 53. I confirm that :O @sandruparo
- 54. OH NO, YOU DIDN’T ! @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
- 67. Width Height Margin Top left Mapping to CSS Properties box-shadow border-radius Background transform opacity @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
- 74. 7. Make it work offline @sandruparo
- 76. 8. Play on persuasion @sandruparo
- 78. @sandruparo
- 80. @sandruparo