Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Supercharge your front-end with the best UX practices

9e617e965f31e95a12478c207187ab7c?s=47 gercek
May 10, 2014

Supercharge your front-end with the best UX practices

A whirlwind tour of best practices for building responsive, fluid and transitional interfaces for the web, mobile and beyond.

This talk sheds some light on improving perceived speed, optimizing conversion funnels, building polished apps and provides tips & tricks for better maintainability.

9e617e965f31e95a12478c207187ab7c?s=128

gercek

May 10, 2014
Tweet

Transcript

  1. supercharge your front-end with the best ux practices Gercek Karakus

    Linz, May 2014
  2. None
  3. how many people are 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
  4. None
  5. None
  6. ux design the process of enhancing customer satisfaction and loyalty

    by improving the ease of use and pleasure provided in the interaction between the customer and the product.
  7. None
  8. None
  9. None
  10. everything on the web is a form

  11. None
  12. validate to bring user on your side

  13. meaningful error messages

  14. huge drop-off after front-end validation

  15. test different validation messages

  16. do your homework first

  17. validating phone numbers remove non-digit characters and reformat in the

    backend
  18. validating email fields • capture common mistakes in email fields

    • ie. gnail.com, yhoo.com …
  19. https://medium.com/ui-ux-articles/3d1b0a9b810e

  20. think about mobile input entry

  21. Use HTML5 input types to trigger appropriate keyboard

  22. <input type=“email” name=“email” />

  23. <input type=“url” name=“url” />

  24. <input type=“tel” name=“zipcode” /> On Android, both “number” and “tel”

    brings up the number pad keyboard
  25. auto-complete common fields

  26. turn off auto-capitalize when designing form fields on email, password

    & url
  27. graceful degradation • build for now and future • don’t

    force yourself to build features for old browsers • make it work and move on
  28. None
  29. auto-login from emails

  30. None
  31. None
  32. be careful! • people forward email • don’t let free

    riders in… • implement sandbox mode & limit user access
  33. in-place editing

  34. None
  35. None
  36. responsive web design

  37. None
  38. adaptability matters • cross browser • cross device • easier

    maintenance
  39. flexible images

  40. None
  41. http://www.slideshare.net/AaronGustafson/intro-to-adaptive-web-design-chadev-lunch fluid grids everywhere

  42. mobile first breakpoints

  43. None
  44. wrestling with bootstrap

  45. customizing bootstrap

  46. leverage !default

  47. define your variables first because some internal variables are dependent

    on each other. ie. $link-color
  48. disable unused components

  49. maintaining responsive components • make sure 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
  50. None
  51. readability matters

  52. characters per line • 60-75 characters/line on larger screens •

    35-40 characters/line on mobile
  53. responsive typography http://ia.net/blog/responsive-typography-the-basics/

  54. http://typecast.com/blog/a-more-modern-scale-for-web-typography adapt line-height and font-size

  55. no more image icons!

  56. life is happier with font icons • crisp & clear

    iconography • single http request • easy maintenance • rescale, recolor or animate with no hassle
  57. None
  58. None
  59. Perceived Performance ! vs ! Actual Performance

  60. build single page web apps

  61. make it feel fast • pre-catch views on the front-end

    • cache in memory for fast access • separate content and chrome
  62. http://www.mobify.com/blog/beginners-guide-to-perceived-performance/ add touch states to your buttons

  63. None
  64. avoid spinners when possible • 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.
  65. None
  66. smooth animations • 60fps • bust janky animations with devtools

    • pre-load views • contextual transitions
  67. None
  68. respond to user interaction in less than 100 ms

  69. if it absolutely has to take longer than 100ms,
 it

    should definitely respond within 1s.
  70. should make you feel bad anything that takes longer than

    1 second
  71. increasing conversion

  72. auto-fill whenever possible One of 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. suggest continuity

  74. don’t ever ask for the information that you don’t really

    need
  75. building  the billion dollar landing page

  76. None
  77. focusing on conversion • first impression 
 ~3 seconds attention

    span • responsive
 needs to adapt all devices • high performance
 small footprint and fast loading time
  78. None
  79. • width • height • pixel density adapt to viewport

  80. all the roads should lead users to the same goal

  81. None
  82. what’s next?

  83. ` http://www.slideshare.net/jamesgpearce/html5-and-the-dawn-of-rich-mobile-web-applications-pt-1

  84. None
  85. None
  86. None
  87. None
  88. thank you! follow me on twitter: @gercheq

  89. None