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.

Jon Maskrey UX designer Zengenti - UX for-mobile

225 views

Published on

Presentation delivered in the mobile workshop at Connected Local Government Live on 28 June

Published in: Government & Nonprofit
  • Be the first to comment

  • Be the first to like this

Jon Maskrey UX designer Zengenti - UX for-mobile

  1. 1. UX for mobile Jon Maskrey UX designer, Zengenti
  2. 2. UX for mobile Key takeaways 1. Design principles for mobile 2. Speed optimisations 3. Testing techniques
  3. 3. Design principles
  4. 4. Design principles Key takeaways 1. Tap size 2. Thumb reach 3. Menus 4. Readability 5. Search 6. Forms 7. Testing
  5. 5. DESIGN PRINCIPLES 1. Tap size Fingers and thumbs are chunky!
  6. 6. DESIGN PRINCIPLES 1. Tap size Fingers and thumbs are chunky! Minimum target size > 7mm (48px) 48px
  7. 7. DESIGN PRINCIPLES 1. Tap size Fingers and thumbs are chunky! Minimum target size > 7mm (48px) Tap target proximity Cancel Save
  8. 8. DESIGN PRINCIPLES 1. Tap size Fingers and thumbs are chunky! Minimum target size > 7mm (48px) Tap target proximity Cancel Save32px > 5mm (32px) away from other targets
  9. 9. DESIGN PRINCIPLES 2. Thumb reach Phones are getting bigger image source: http://www.core77.com/posts/27656/mobile-interface-design-thumb-zones-for-the-new-iphones-27656 Most people use a phone one handed The top of the screen is out of thumb range Consider putting frequently used items at the bottom
  10. 10. DESIGN PRINCIPLES 3. Menus Simple and to the point Not too many items 2 sub levels Keep some navigation visible
  11. 11. DESIGN PRINCIPLES 4. Readability Large text - at least 15px Line height - increase legibility Use negative space to simplify Contrast - used in bright daylight
  12. 12. DESIGN PRINCIPLES 5. Search Make search visible
  13. 13. DESIGN PRINCIPLES 5. Search Make search visible Make search easy
  14. 14. DESIGN PRINCIPLES 5. Search Make search visible Make search easy Use location services
  15. 15. DESIGN PRINCIPLES 6. Forms Keep them simple
  16. 16. DESIGN PRINCIPLES 6. Forms Keep them simple Use labels above each field
  17. 17. DESIGN PRINCIPLES 6. Forms Keep them simple Use labels above each field Use placeholder text to provide hints
  18. 18. DESIGN PRINCIPLES 6. Forms Keep them simple Use labels above each field Use placeholder text to provide hints Allow autocomplete Jon Maskrey j.maskrey@zengenti.com
  19. 19. DESIGN PRINCIPLES 6. Forms Keep them simple Use labels above each field Use placeholder text to provide hints Allow autocomplete Jon Maskrey j.maskreyzengenti.com Please use a valid email address Provide real-time validation
  20. 20. DESIGN PRINCIPLES 7. Test on actual devices Emulators are ok for quick checks Test on a range of devices and device sizes Test on older versions of devices
  21. 21. DESIGN PRINCIPLES Any questions? ?
  22. 22. Performance
  23. 23. Perfomance Key takeaways 1. Importance 2. Optimisation techniques 3. Example
  24. 24. PERFORMANCE The importance of a fast site Shortening attention spans Visitor retention Search engine ranking Users not guaranteed to be on a fast connection ⚡
  25. 25. PERFORMANCE Optimisations Minification Concatenation Defer render blocking resources Image optimisation File compression
  26. 26. PERFORMANCE Minification Spaces in text files increase file size Uglify js
  27. 27. PERFORMANCE Concatenation CSS JS Icons HTTP2
  28. 28. PERFORMANCE Defer render blocking files
  29. 29. PERFORMANCE Defer and Async
  30. 30. PERFORMANCE Optimise images Reduce file size Reduce image dimensions Reduce cost to user kraken.io
  31. 31. PERFORMANCE Defer image loading (lazy loading) Only load the images the user can immediately see Reduces perceived load times Reduce cost to user
  32. 32. PERFORMANCE Enable Gzip A method of compressing files to make them smaller Faster transfer time Results in 50-70% smaller files
  33. 33. PERFORMANCE Recent example Testing using chrome dev tools Throttled to 750kb/s, 250kb/s, 100ms (regular 3g) Image heavy site
  34. 34. PERFORMANCE Baseline DOMContentLoaded: 16s Load: 34.5s Weight: 3.1MB Optimise images DOMContentLoaded: 16s Load: 22.5s Weight: 2.5MB
  35. 35. PERFORMANCE Optimise images DOMContentLoaded: 16s Load: 22.5s Weight: 2.5MB Minify files DOMContentLoaded: 9.27s Load: 21s Weight: 2.5MB
  36. 36. PERFORMANCE Minify files DOMContentLoaded: 9.27s Load: 21s Weight: 2.5MB Gzip files DOMContentLoaded: 2.78s Load: 17.9s Weight: 1.6MB
  37. 37. PERFORMANCE Gzip files DOMContentLoaded: 2.78s Load: 17.9s Weight: 1.6MB Defer js DOMContentLoaded: 0.8s Load: 17.9s Weight: 1.6MB
  38. 38. PERFORMANCE Defer js DOMContentLoaded: 0.8s Load: 17.9s Weight: 1.6MB Lazy load images DOMContentLoaded: 0.8s Load: 4s* Weight: 504kb* *Initial load before scrolling
  39. 39. PERFORMANCE Baseline DOMContentLoaded: 16s Load: 34.5s Weight: 3.1MB Optimised DOMContentLoaded: 0.8s Load: 4s* Weight: 504kb* *Initial load before scrolling
  40. 40. PERFORMANCE Any questions? ?
  41. 41. User testing
  42. 42. User testing Key takeaways 1. Expensive? 2. How many to test 3. What to test 4. Tools
  43. 43. USER TESTING User testing doesn't have to be expensive You don’t need an expensive lab or equipment It doesn't have to take a lot of time Small amounts of testing can yield large results
  44. 44. USER TESTING 0 users tested = 0 insight gained
  45. 45. USER TESTING How many users should I test on? http://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/

  46. 46. USER TESTING Iterate
  47. 47. USER TESTING What to test
  48. 48. USER TESTING What to test Site structure - IA
  49. 49. USER TESTING What to test Paper wireframes Hi-res designs Site structure - IA
  50. 50. USER TESTING What to test Paper wireframes Hi-res designs HTML mockups Working site Site structure - IA
  51. 51. USER TESTING Useful tools Optimal Workshop www.optimalworkshop.com
  52. 52. USER TESTING Useful tools Lookback lookback.io
  53. 53. USER TESTING Summary It doesn't have to be expensive Aim for testing with 15 participants Iterate Test early Check out Lookback and Optimal Workshop
  54. 54. USER TESTING Any questions? ?
  55. 55. Thanks!

×