Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Supercharge your application with the best UX practices


Published on

I've given this talk as a guest lecturer at Bogazici University Software Design Process graduate class (SWE530) in Spring 2015.

This talk introduces key concepts of user experience design to software engineering graduate students and outlines the process of integrating design and engineering. Starting from ideation, it goes through all the steps including but not limited to user research, sketching, prototyping, user testing, design validation and iteration.

Hand on best practices are also shared as case studies part of this presenation.

Published in: Design, Internet
  • Login to see the comments

Supercharge your application with the best UX practices

  1. 1. supercharge your application with the best ux practices Gercek Karakus Istanbul, April 2015 SWE530 - Software Design Process Bogazici University
  2. 2. front-end engineers? back-end engineers? ios/android engineers? engineering managers?
  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., …
  12. 12. Use HTML5 input types to trigger appropriate keyboard on mobile devices
  13. 13. <input type=“email” name=“email” />
  14. 14. <input type=“url” name=“url” />
  15. 15. <input type=“tel” name=“zipcode” /> On Android, both “number” and “tel” brings up the number pad keyboard
  16. 16. auto-complete common fields
  17. 17. turn off auto-capitalize when designing form fields on email, password & url
  18. 18. graceful degradation • build for now and future • don’t force yourself to build features for old browsers • make it work and move on
  19. 19. auto-login from emails
  20. 20. be careful! • people forward email • don’t let free riders in… • implement sandbox mode & limit user access
  21. 21. in-place editing
  22. 22. responsive web design
  23. 23. adaptability matters • cross browser • cross device • easier maintenance
  24. 24. flexible images
  25. 25. fluid grids everywhere
  26. 26. mobile first breakpoints
  27. 27. readability matters
  28. 28. characters per line • 60-75 characters/line on larger screens • 35-40 characters/line on mobile
  29. 29. responsive typography
  30. 30. adapt line-height and font-size
  31. 31. no more image icons!
  32. 32. life is happier with font icons
  33. 33. • crisp & clear iconography • single http request • easy maintenance • vector-based (rescale, recolor or animate with no hassle) font icons
  34. 34. perceived performance vs actual performance
  35. 35. build single page web apps
  36. 36. make it feel fast • pre-catch views on the front-end • cache in memory for fast access • separate content and chrome
  37. 37. add touch states to your buttons
  38. 38. enable momentum scrolling
  39. 39. 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.
  40. 40. Improve the experience with animations
  41. 41. Improve the experience with animations
  42. 42. smooth animations • 60fps • bust janky animations with devtools • pre-load views • contextual transitions
  43. 43. Performing Actions Optimistically
  44. 44. respond to user interaction in less than 100 ms
  45. 45. if it absolutely has to take longer than 100ms,
 it should definitely respond within 1s.
  46. 46. should make you feel bad anything that takes longer than 1 second
  47. 47. Take Advantage of Natural Gestures • Side-to-Side Swiping (Photo Galleries) • Pull-to-Refresh • Long Press • Pinch-Zoom
  48. 48. increasing conversion
  49. 49. 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.
  50. 50. suggest continuity
  51. 51. don’t ever ask for the information that you don’t really need
  52. 52. building the billion dollar landing page
  53. 53. focusing on conversion • first impression 
 ~3 seconds attention span • responsive
 needs to adapt all devices • high performance
 small footprint and fast loading time
  54. 54. • width • height • pixel density adapt to viewport
  55. 55. all the roads should lead users to the same goal
  56. 56. design validation
  57. 57. build funnels
  58. 58. identify drop-offs
  59. 59.,to_date:-67
  60. 60. iterate your design
  61. 61. rinse & repeat
  62. 62. always track form interactions • formInit • formSubmit • formSuccess • formError
  63. 63. case study: a/b testing Hypothesis
 When users click on images or links in the content section, we were displaying the modal with the contact form. We thought we can personalize each modal depending on how users triggered the modal and display related information to them in order to build more trust. edit#heading=h.r64h2lswjsr8
  64. 64. the design sprint
  65. 65. five simple steps • Ideation • Sketching • Deciding • Prototyping • User Testing
  66. 66. monday: unpack • On the first day of the sprint, your team will “unpack” everything they know. Expertise and knowledge on most teams is asymmetrical: Sales knows things engineering doesn’t, customer support knows things design doesn’t, and so on. • We’ll explain how to draw insights from the team together, create a simple user story, set the scope for the week, and take useful notes as a team.
  67. 67. tuesday: sketch • During Sketch day, your team will work individually to draw detailed solutions on paper. As you sketch, everyone works separately to ensure maximum detail and depth with minimum groupthink. • By breaking it down into four discrete steps (Notes, Mind Map, Crazy 8s, and Storyboard), we show you how CEOs, engineers, and sales folk alike can contribute their ideas effectively. • After sketching, you’ll use a structured critique and weighted voting to select the best ideas from the field of possibilities.
  68. 68. wednesday: decide • By Wednesday, you’ll have over a dozen solutions to choose from. That’s great, but it’s also a problem, because you can’t prototype and test a dozen solutions. You’ll have to narrow down and make tough decisions. • To prepare for Thursday, you’ll draw a storyboard, which serves as a blueprint of your forthcoming prototype. Meanwhile, it’s time to select research participants and get to work planning Friday’s interviews.
  69. 69. thursday: prototype • You’ll spend Thursday in the flow, being ridiculously productive. We show you our systematic plan for doing the impossible: build an entire realistic- looking prototype in just eight hours. • Like George Clooney in Ocean’s Eleven, you’ll gather a team of experts, assign roles, and put your plan into motion. And just like in the movie (sorry, spoiler alert), you’ll get the job done and still have time to enjoy your evening.
  70. 70. friday: test • On Friday, you’ll show your prototype to real customers in 1-on-1 interviews. We show you how to make sense of what you observe, taking notes as a team and finding patterns in real time. By the end of the day, your ideas have all been exposed to oxygen — some will be smash hits, while others will meet an early end. • Obviously, when a risky idea succeeds, it’s a fantastic payoff. But it’s actually those epic failures which, while painful to watch, provide the greatest return on investment. When a prototype flops, it means we’ve spotted critical flaws after only five days of work. It’s learning the hard way — without the “hard way.”
  71. 71. build for future!
  72. 72. `
  73. 73. Help people. Build solutions. Work passionately. Change an industry.
  74. 74. thank you! follow me on twitter: @gercheq