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.

The pursuit of tapiness - A case study in making tablet friendly websites

3,728 views

Published on

How hard can it be to make a website tablet friendly? Hang about, exactly what do you mean by tablet friendly? Are we including mini tablets? What sort of usability quirks and foibles will tablet users put up with? How can something that sounds so simple prove to be so tricky to pin down, let along achieve?

Come with me on a journey through space and time as I discuss how TUI, Europe’s largest holiday tour operator set about making Thomson.co.uk and Firstchoice.co.uk more tablet friendly. I’ll discuss why designing a great experience for tablet users is so important, what it means to optimise a website for tablet and how we went about doing it. I’ll discuss how we identified the most important improvements to make and how we’re ensuring that future designs are always tablet friendly.

Published in: Design
  • DOWNLOAD FULL eBOOK INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookeBOOK Crime, eeBOOK Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

The pursuit of tapiness - A case study in making tablet friendly websites

  1. 1. THE PURSUIT OF TAPINESS A case study in making tablet friendly websites Neil Turner www.uxforthemasses.com @neilturnerux http://www.dailyfreepsd.com/wp-content/uploads/2013/10/Free-ipad-Mockups-psd-Vol-2-2.png
  2. 2. Former UX lead at TUI
  3. 3. Working on two of the UK’s leading travel websites
  4. 4. What I’m not going to talk about…
  5. 5. Not so long ago in a galaxy not very far away….
  6. 6. http://thebrandplan.files.wordpress.com/2012/11/1-27-ipadjpg-817c465328b7f6b0.jpeg The iPad was only launched in 2010
  7. 7. Prior to 2010 this was how people accessed websites http://photos.pcpro.co.uk/blogs/wp-content/uploads/2009/02/ion-pc.jpg
  8. 8. Tablet use is on the increase… http://www.google.co.uk/think/research-studies/the-world-has-gone-multi-screen.html
  9. 9. Especially for travel http://www.thinkwithgoogle.com/research-studies/the-new-multi-screen-world-study.html
  10. 10. http://www.e-communication.hu/assets/reszponz%C3%ADv%20cikk.jpg Multi-channel is a must
  11. 11. The user experience on a tablet http://wind8apps.com/wp-content/uploads/2012/10/broken-ipad.jpg
  12. 12. Challenge = 1. Make the websites tablet friendly 2. Keep changes (and hence costs) to a minimum http://englishmum.com/wp-content/uploads/2011/11/Challenge-Anneka.jpg
  13. 13. What does tablet friendly even mean? http://img2.wikia.nocookie.net/__cb20130707145337/degrassi/images/f/fc/Britney-confused_zps9eff516a.gif
  14. 14. “Provide an acceptable online experience to the majority of your tablet users you must.” http://img1.wikia.nocookie.net/__cb20130810203813/starwars/images/d/df/Yoda's_hover_chair.png
  15. 15. Reviewed analytics analytics to determine to determine tablets tablets to target to target http://cdn3.pcadvisor.co.uk/cmsdata/features/3451310/Tablet_Group_test_206PCA_206_Photoshoot-212.jpg
  16. 16. “To your analytics to determine the tablets to focus on you must look.” http://img1.wikia.nocookie.net/__cb20130810203813/starwars/images/d/df/Yoda's_hover_chair.png
  17. 17. Reviewed the sites on a range of tablets
  18. 18. “Pool the results of a number of tablet reviewers you should.” http://img1.wikia.nocookie.net/__cb20130810203813/starwars/images/d/df/Yoda's_hover_chair.png
  19. 19. Usability tested the sites on a range of tablets
  20. 20. The site required extensive zooming on a tablet
  21. 21. Some features simply didn’t work on a tablet
  22. 22. The site provided a poor user experience on a mini tablet
  23. 23. “With experienced tablet users usability test key tasks you must.” http://img1.wikia.nocookie.net/__cb20130810203813/starwars/images/d/df/Yoda's_hover_chair.png
  24. 24. Collated the findings & cross checked with known usability issues http://4.bp.blogspot.com/-D84Fs5t3Ydg/USQjZxxvUKI/AAAAAAAADOg/4Yocid1ZBCI/s1600/diary+copy.jpg
  25. 25. Cost to fix Impact on UX Low High Low High Prioritised usability issues by impact to UX and cost to fix
  26. 26. “Hmm, focus on show stoppers and quick fixes you should.” http://img1.wikia.nocookie.net/__cb20130810203813/starwars/images/d/df/Yoda's_hover_chair.png
  27. 27. Diary study … Created compendium of tablet web design best practice guidelines
  28. 28. Collaboratively came up with design changes http://www.lushai.com/wp-content/uploads/2013/03/IMG_4343.jpg
  29. 29. Created Axure prototype to test more complex changes
  30. 30. Carried out informal usability testing to evaluate complex changes http://www.monteithscott.co.uk/wp-content/uploads/2011/05/tui-5.jpg
  31. 31. “Evaluate changes on a tablet as soon as possible you should.” http://img1.wikia.nocookie.net/__cb20130810203813/starwars/images/d/df/Yoda's_hover_chair.png
  32. 32. Tablet fixes and improvements currently being developed http://rack.1.mshcdn.com/media/ZgkyMDEzLzA1LzA2LzliL2h0bWxjb2RlLmM3MWYwLmpwZwpwCXRodW1iCTEyMDB4OTYwMD4/6498c8ff/1d8/html-code.jpg
  33. 33. “The true path to tapiness in small steps is taken.” http://img1.wikia.nocookie.net/__cb20130810203813/starwars/images/d/df/Yoda's_hover_chair.png
  34. 34. “To design for the tablet, your team must be at one with the tablet” Old Chinese proverb (probably)
  35. 35. Everyone should know about good tablet design https://evbdn.eventbrite.com/s3-s3/eventlogos/52084516/apdclassroomtraining.jpg
  36. 36. Ideally everyone should have access to a tablet http://postmediamontreal.files.wordpress.com/2014/02/photo-13.jpg
  37. 37. Agree and document tablet design best practice
  38. 38. Include ‘Usable on a tablet’ as acceptance criteria for user stories http://watirmelon.files.wordpress.com/2013/02/tick-the-acceptance-criteria.jpg
  39. 39. Formulate your long term tablet (and mobile) strategy http://farm5.staticflickr.com/4134/4822043116_3db8af817c_o.jpg
  40. 40. “Without a strategy, an organization is like a ship without a rudder, going around in circles.” Joel Ross and Michael Kami (Corporate management gurus) http://www.bbcamerica.com/top-gear/wp-content/blogs.dir/52/files/2011/10/topgear_epguide_s10_ep02_04_web.jpg
  41. 41. TABLET FRIENDLY WEBSITE TIPS http://terriblecopywriter.files.wordpress.com/2012/09/borat-thumbsup.png
  42. 42. • You must provide an acceptable experience to the majority of your tablet users • Look to your analytics to determine the tablets to target • Pool the results of a number of reviews of the sites on a tablet • Usability test key tasks with experienced tablet users
  43. 43. • Prioritise changes - focus on show stoppers and quick usability fixes • Evaluate changes on a tablet as soon as possible • Focus on small changes at a time and continue to evaluate live changes • Bake tablet design into your web design process
  44. 44. • Get everyone up to speed with good tablet design • Get as many tablets in the office as possible • Agree and document tablet design best practice • Include usable on a tablet as acceptance criteria for user stories • Formulate a long term tablet (and mobile) strategy
  45. 45. “Tablet web design a one-off activity is not, mind-set it is. Yes” http://img1.wikia.nocookie.net/__cb20130810203813/starwars/images/d/df/Yoda's_hover_chair.png
  46. 46. THANK YOU www.uxforthemasses.com @neilturnerux

×