supercharge your front end with the best ux practices

  • 787 views
Uploaded on

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

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.

More in: Design , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
787
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
9
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. supercharge your front-end with the best ux practices Gercek Karakus Linz, May 2014
  • 2. 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
  • 3. 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.
  • 4. everything on the web is a form
  • 5. validate to bring user on your side
  • 6. meaningful error messages
  • 7. huge drop-off after front-end validation
  • 8. test different validation messages
  • 9. do your homework first
  • 10. validating phone numbers remove non-digit characters and reformat in the backend
  • 11. validating email fields • capture common mistakes in email fields • ie. gnail.com, yhoo.com …
  • 12. https://medium.com/ui-ux-articles/3d1b0a9b810e
  • 13. think about mobile input entry
  • 14. Use HTML5 input types to trigger appropriate keyboard
  • 15. <input type=“email” name=“email” />
  • 16. <input type=“url” name=“url” />
  • 17. <input type=“tel” name=“zipcode” /> On Android, both “number” and “tel” brings up the number pad keyboard
  • 18. auto-complete common fields
  • 19. turn off auto-capitalize when designing form fields on email, password & url
  • 20. graceful degradation • build for now and future • don’t force yourself to build features for old browsers • make it work and move on
  • 21. auto-login from emails
  • 22. be careful! • people forward email • don’t let free riders in… • implement sandbox mode & limit user access
  • 23. in-place editing
  • 24. responsive web design
  • 25. adaptability matters • cross browser • cross device • easier maintenance
  • 26. flexible images
  • 27. http://www.slideshare.net/AaronGustafson/intro-to-adaptive-web-design-chadev-lunch fluid grids everywhere
  • 28. mobile first breakpoints
  • 29. wrestling with bootstrap
  • 30. customizing bootstrap
  • 31. leverage !default
  • 32. define your variables first because some internal variables are dependent on each other. ie. $link-color
  • 33. disable unused components
  • 34. 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
  • 35. readability matters
  • 36. characters per line • 60-75 characters/line on larger screens • 35-40 characters/line on mobile
  • 37. responsive typography http://ia.net/blog/responsive-typography-the-basics/
  • 38. http://typecast.com/blog/a-more-modern-scale-for-web-typography adapt line-height and font-size
  • 39. no more image icons!
  • 40. life is happier with font icons • crisp & clear iconography • single http request • easy maintenance • rescale, recolor or animate with no hassle
  • 41. Perceived Performance ! vs ! Actual Performance
  • 42. build single page web apps
  • 43. make it feel fast • pre-catch views on the front-end • cache in memory for fast access • separate content and chrome
  • 44. http://www.mobify.com/blog/beginners-guide-to-perceived-performance/ add touch states to your buttons
  • 45. 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.
  • 46. smooth animations • 60fps • bust janky animations with devtools • pre-load views • contextual transitions
  • 47. respond to user interaction in less than 100 ms
  • 48. if it absolutely has to take longer than 100ms,
 it should definitely respond within 1s.
  • 49. should make you feel bad anything that takes longer than 1 second
  • 50. increasing conversion
  • 51. 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.
  • 52. suggest continuity
  • 53. don’t ever ask for the information that you don’t really need
  • 54. building the billion dollar landing page
  • 55. focusing on conversion • first impression 
 ~3 seconds attention span • responsive
 needs to adapt all devices • high performance
 small footprint and fast loading time
  • 56. • width • height • pixel density adapt to viewport
  • 57. all the roads should lead users to the same goal
  • 58. what’s next?
  • 59. ` http://www.slideshare.net/jamesgpearce/html5-and-the-dawn-of-rich-mobile-web-applications-pt-1
  • 60. thank you! follow me on twitter: @gercheq