Downloaded 13 times
Uploaded byGercek Karakus
supercharge your front end with the best ux practices
The document provides best UX practices for front-end development, emphasizing the importance of enhancing customer satisfaction through usability and mobile input design. Key recommendations include validating user inputs, responsive web design, and maintaining readability across devices. Additionally, it highlights the significance of perceived performance and conversion optimization for better user experience.
supercharge your front end with the best ux practices
- 1. supercharge your front-end with thebest ux practices Gercek Karakus Linz, May 2014
- 3. how many peopleare front-end engineers? write html, css & javascript daily as part of their job how many people are designers? build flow charts, wireframes, graphics design how many people are unicorns? best of both worlds
- 6. ux design the processof enhancing customer satisfaction and loyalty by improving the ease of use and pleasure provided in the interaction between the customer and the product.
- 10. everything on theweb is a form
- 12. validate to bring useron your side
- 13.
- 14. huge drop-off after front-endvalidation
- 15.
- 16. do your homeworkfirst
- 17. validating phone numbers removenon-digit characters and reformat in the backend
- 18. validating email fields •capture common mistakes in email fields • ie. gnail.com, yhoo.com …
- 19.
- 20. think about mobileinput entry
- 21. Use HTML5 inputtypes to trigger appropriate keyboard
- 22.
- 23.
- 24. <input type=“tel” name=“zipcode”/> On Android, both “number” and “tel” brings up the number pad keyboard
- 25.
- 26. turn off auto-capitalize whendesigning form fields on email, password & url
- 27. graceful degradation • buildfor now and future • don’t force yourself to build features for old browsers • make it work and move on
- 29.
- 32. be careful! • peopleforward email • don’t let free riders in… • implement sandbox mode & limit user access
- 33.
- 36.
- 38. adaptability matters • crossbrowser • cross device • easier maintenance
- 39.
- 41.
- 42.
- 44.
- 45.
- 46.
- 47. define your variablesfirst because some internal variables are dependent on each other. ie. $link-color
- 48.
- 49. maintaining responsive components • makesure create separate files for your components • include all the media queries at the end of each file • all the changes should be tested in different sized devices
- 51.
- 52. characters per line •60-75 characters/line on larger screens • 35-40 characters/line on mobile
- 53.
- 54.
- 55. no more imageicons!
- 56. life is happierwith font icons • crisp & clear iconography • single http request • easy maintenance • rescale, recolor or animate with no hassle
- 59.
- 60.
- 61. make it feelfast • pre-catch views on the front-end • cache in memory for fast access • separate content and chrome
- 62.
- 64. avoid spinners whenpossible • animate on waits shorter than 300ms • display chrome instead of a spinner • use short animations to distract the user from the wait — instead of staring at a spinner they’re simply waiting for a short animation to finish.
- 66. smooth animations • 60fps •bust janky animations with devtools • pre-load views • contextual transitions
- 68. respond to userinteraction in less than 100 ms
- 69. if it absolutelyhas to take longer than 100ms, it should definitely respond within 1s.
- 70. should make youfeel bad anything that takes longer than 1 second
- 71.
- 72. auto-fill whenever possible Oneof the worst things from an experience and conversion stand point is to ask people for data that they have already provided in the past, repeatedly over and over again.
- 73.
- 74. don’t ever askfor the information that you don’t really need
- 75.
- 77. focusing on conversion •first impression ~3 seconds attention span • responsive needs to adapt all devices • high performance small footprint and fast loading time
- 79. • width • height •pixel density adapt to viewport
- 80. all the roadsshould lead users to the same goal
- 82.
- 83.
- 88. thank you! follow meon twitter: @gercheq