supercharge your
front-end with
the best ux practices
Gercek Karakus
Linz, May 2014
how many people are front-end engineers? 

write html, css & javascript daily as part of their job
how many people are des...
ux design
the process of enhancing customer satisfaction and loyalty
by improving the ease of use and pleasure provided in...
everything on the web is a form
validate
to bring user on your side
meaningful error messages
huge drop-off after
front-end validation
test different validation
messages
do your homework first
validating phone numbers
remove non-digit characters and reformat in the backend
validating email fields
• capture common mistakes in email fields
• ie. gnail.com, yhoo.com …
https://medium.com/ui-ux-articles/3d1b0a9b810e
think about mobile input entry
Use HTML5 input types
to trigger appropriate keyboard
<input type=“email” name=“email” />
<input type=“url” name=“url” />
<input type=“tel” name=“zipcode” />
On Android, both “number” and “tel” brings up the number pad keyboard
auto-complete common fields
turn off auto-capitalize
when designing form fields on email, password & url
graceful degradation
• build for now and future
• don’t force yourself to build features for old browsers
• make it work a...
auto-login from emails
be careful!
• people forward email
• don’t let free riders in…
• implement sandbox mode & limit user access
in-place editing
responsive web design
adaptability matters
• cross browser
• cross device
• easier maintenance
flexible images
http://www.slideshare.net/AaronGustafson/intro-to-adaptive-web-design-chadev-lunch
fluid grids everywhere
mobile first breakpoints
wrestling with bootstrap
customizing bootstrap
leverage !default
define your variables first
because some internal variables are dependent on each other. ie. $link-color
disable unused components
maintaining responsive
components
• make sure create separate files for your components
• include all the media queries at ...
readability matters
characters per line
• 60-75 characters/line on larger screens
• 35-40 characters/line on mobile
responsive typography
http://ia.net/blog/responsive-typography-the-basics/
http://typecast.com/blog/a-more-modern-scale-for-web-typography
adapt line-height and font-size
no more image icons!
life is happier with font icons
• crisp & clear iconography
• single http request
• easy maintenance
• rescale, recolor or...
Perceived Performance
!
vs
!
Actual Performance
build
single page web apps
make it feel fast
• pre-catch views on the front-end
• cache in memory for fast access
• separate content and chrome
http://www.mobify.com/blog/beginners-guide-to-perceived-performance/
add touch states to your buttons
avoid spinners when possible
• animate on waits shorter than 300ms
• display chrome instead of a spinner
• use short anima...
smooth animations
• 60fps
• bust janky animations with devtools
• pre-load views
• contextual transitions
respond to user interaction in
less than 100 ms
if it absolutely has to take longer than 100ms,

it should definitely respond within 1s.
should make you feel bad
anything that takes longer than 1 second
increasing conversion
auto-fill whenever possible
One of the worst things from an experience and conversion stand point
is to ask people for data...
suggest continuity
don’t ever ask for the information
that you don’t really need
building
the billion dollar
landing page
focusing on conversion
• first impression 

~3 seconds attention span
• responsive

needs to adapt all devices
• high perfo...
• width
• height
• pixel density
adapt to viewport
all the roads should
lead users to the same goal
what’s next?
`
http://www.slideshare.net/jamesgpearce/html5-and-the-dawn-of-rich-mobile-web-applications-pt-1
thank you!
follow me on twitter: @gercheq
supercharge your front end with the best ux practices
supercharge your front end with the best ux practices
supercharge your front end with the best ux practices
supercharge your front end with the best ux practices
supercharge your front end with the best ux practices
supercharge your front end with the best ux practices
supercharge your front end with the best ux practices
supercharge your front end with the best ux practices
supercharge your front end with the best ux practices
supercharge your front end with the best ux practices
supercharge your front end with the best ux practices
supercharge your front end with the best ux practices
supercharge your front end with the best ux practices
supercharge your front end with the best ux practices
supercharge your front end with the best ux practices
supercharge your front end with the best ux practices
supercharge your front end with the best ux practices
supercharge your front end with the best ux practices
supercharge your front end with the best ux practices
supercharge your front end with the best ux practices
supercharge your front end with the best ux practices
supercharge your front end with the best ux practices
supercharge your front end with the best ux practices
supercharge your front end with the best ux practices
supercharge your front end with the best ux practices
supercharge your front end with the best ux practices
supercharge your front end with the best ux practices
supercharge your front end with the best ux practices
supercharge your front end with the best ux practices
Upcoming SlideShare
Loading in …5
×

supercharge your front end with the best ux practices

1,425 views

Published on

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.

Published in: Design, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,425
On SlideShare
0
From Embeds
0
Number of Embeds
88
Actions
Shares
0
Downloads
13
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

supercharge your front end with the best ux practices

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

×