The pursuit of tapiness - A case study in making tablet friendly websites
•Download as PPTX, PDF•
13 likes•4,021 views
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.
Recommended
Recommended
More Related Content
What's hot
What's hot (19)
Viewers also liked
Viewers also liked (20)
Similar to The pursuit of tapiness - A case study in making tablet friendly websites
Similar to The pursuit of tapiness - A case study in making tablet friendly websites (20)
More from Neil Turner
More from Neil Turner (12)
Recently uploaded
Recently uploaded (20)
The pursuit of tapiness - A case study in making tablet friendly websites
- 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. Former UX lead at TUI
- 3. Working on two of the UK’s leading travel websites
- 4. What I’m not going to talk about…
- 5. Not so long ago in a galaxy not very far away….
- 7. http://thebrandplan.files.wordpress.com/2012/11/1-27-ipadjpg-817c465328b7f6b0.jpeg The iPad was only launched in 2010
- 8. Prior to 2010 this was how people accessed websites http://photos.pcpro.co.uk/blogs/wp-content/uploads/2009/02/ion-pc.jpg
- 9. Tablet use is on the increase… http://www.google.co.uk/think/research-studies/the-world-has-gone-multi-screen.html
- 10. Especially for travel http://www.thinkwithgoogle.com/research-studies/the-new-multi-screen-world-study.html
- 12. The user experience on a tablet http://wind8apps.com/wp-content/uploads/2012/10/broken-ipad.jpg
- 13. 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
- 14. What does tablet friendly even mean? http://img2.wikia.nocookie.net/__cb20130707145337/degrassi/images/f/fc/Britney-confused_zps9eff516a.gif
- 15. “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
- 16. 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
- 17. “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
- 18. Reviewed the sites on a range of tablets
- 19. “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
- 20. Usability tested the sites on a range of tablets
- 21. The site required extensive zooming on a tablet
- 22. Some features simply didn’t work on a tablet
- 23. The site provided a poor user experience on a mini tablet
- 24. “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
- 25. Collated the findings & cross checked with known usability issues http://4.bp.blogspot.com/-D84Fs5t3Ydg/USQjZxxvUKI/AAAAAAAADOg/4Yocid1ZBCI/s1600/diary+copy.jpg
- 26. Cost to fix Impact on UX Low High Low High Prioritised usability issues by impact to UX and cost to fix
- 27. “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
- 28. Diary study … Created compendium of tablet web design best practice guidelines
- 29. Collaboratively came up with design changes http://www.lushai.com/wp-content/uploads/2013/03/IMG_4343.jpg
- 30. Created Axure prototype to test more complex changes
- 31. Carried out informal usability testing to evaluate complex changes http://www.monteithscott.co.uk/wp-content/uploads/2011/05/tui-5.jpg
- 32. “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
- 33. Tablet fixes and improvements currently being developed http://rack.1.mshcdn.com/media/ZgkyMDEzLzA1LzA2LzliL2h0bWxjb2RlLmM3MWYwLmpwZwpwCXRodW1iCTEyMDB4OTYwMD4/6498c8ff/1d8/html-code.jpg
- 34. “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
- 35. “To design for the tablet, your team must be at one with the tablet” Old Chinese proverb (probably)
- 36. Everyone should know about good tablet design https://evbdn.eventbrite.com/s3-s3/eventlogos/52084516/apdclassroomtraining.jpg
- 37. Ideally everyone should have access to a tablet http://postmediamontreal.files.wordpress.com/2014/02/photo-13.jpg
- 38. Agree and document tablet design best practice
- 39. Include ‘Usable on a tablet’ as acceptance criteria for user stories http://watirmelon.files.wordpress.com/2013/02/tick-the-acceptance-criteria.jpg
- 40. Formulate your long term tablet (and mobile) strategy http://farm5.staticflickr.com/4134/4822043116_3db8af817c_o.jpg
- 41. “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
- 42. TABLET FRIENDLY WEBSITE TIPS http://terriblecopywriter.files.wordpress.com/2012/09/borat-thumbsup.png
- 43. • 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
- 44. • 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
- 45. • 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
- 46. “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
- 47. THANK YOU www.uxforthemasses.com @neilturnerux
Editor's Notes
- Part of the UX team in Luton Primarily looking after Thomson & First Choice websites Going to take you through the journey we took to make the websites tablet friendly
- Just to set expectations, I’d like to quickly run through what I’m not going to talk about… Not going to talk about good tablet and mobile design guidelines and design patterns Not going to talk about apps, only websites Not going to talk about responsive design strategies Not going to talk about good mobile coding practice
- Before I being our story I want to take you back Back, not so long ago to some would say simpler times
- Easy to forget that tablets are a relatively new phenomenon Launched in 2010
- Prior to 2010 this was how most people still went online And this was reflected in the way that websites were designed and developed Still designed for a mouse, keyboard and relatively large screen
- But, we know very much live in a multi-device, multi-screen world Who owns a laptop, tablet and smartphone? As we can see from this relatively recent Google report, average Brit now uses 3 devices And both tablet and smartphone use are on the increase
- And this is especially true for travel Another Google report outlining that 43% consumers use multiple devices when planning a trip The norm to use multiple devices when planning and even booking travel
- Which leads me back to the 2 websites I was helping to look after at TUI Thomson and First Choice Imperative that both offer a fantastic multi-channel experience, from desktop to tablet and mobile
- But fair to say that at the time the experience on a tablet wasn’t great Small text, fiddly tap targets, non-responsive pages, features that simply didn’t work on a tablet Will see some usability testing clips later on that demonstrate this
- So the challenge was to make the websites tablet friendly But to keep changes to a minimum so that costs can be kept to a minimum
- So we, the UX team were tasked with making the websites tablet friendly, but what does that even mean? What does tablet friendly mean? Are we talking about mini-tablets, just iPads? Just how usable does the website need to be on a tablet?
- Which brings me to the first words of wisdom from Yoda Yoda will pop up from time to time with his wise words of advice when it comes to making websites tablet friendly What Yoda is saying here is you should be aiming to support the majority of your users You should be aiming for an acceptable online experience – which is something you should define Not necessarily the best possible, but good enough
- So we reviewed the site analytics to see which tablets people were using to access the sites Any analytics package will give a device breakdown of site visitors We also looked at which pages and features people used on a tablet
- Your analytics should drive which tablets you focus on, not what you own or the tablet your director owns In the absence of analytics can use more general web stats Generally safest to focus on iPad and Android, such as Samsung Galaxy
- Having established the tablets to focus on we carried out a number of usability reviews of the sites on tablets Wanted to experience the sites as a customer would on their tablet Made a note of problems, issues and areas that could be improved
- As Yoda points out it’s a good idea to get multiple people to review the site A good way is to ask different people to review the site, each with a different device Can then pool the results because different people will pick up on different things
- We created an Axure tablet prototype for the more significant changes Allowed us to try out some of the changes on a tablet and to iterate Axure is pretty good for prototyping on tablet, can upload to Axshare and then access on tablet
- To get some quick feedback we tested more significant changes in the office Picture of the rather nice TUI cafeteria Although not as good as testing with real customers, meant we could quickly get some feedback and iterate the designs
- Because as Yoda says, important to get feedback as soon as possible Ideally want to test some stuff before it goes live (unless trivial changes) Important if possible to test on tablet, rather than desktop as quite a different style of interaction
- Having tested the changes these are now being made to the live site Can take a while to update the 2 sites as release schedule pretty clogged up
- Hopefully see that like a lot of UX design and optimisiation best taken in small steps Rather than make a huge raft of changes best to make smaller changes, see how they perform and then iterate if necessary Avoids headache of bigger changes and makes the transition easier for users
- So those were the steps the team took But what steps are the team taking to bake good tablet design into the team and wider organisation? As the old Chinese proverb says – your team must be at one with the tablet
- Important that everyone knows about good tablet design, not just mobile specialists Designers, developers, product owners, testers etc.. Should know a bit about what good tablet design looks like We arranged some internal training with Spotless Interactive to cover mobile (and tablet) usability Provided a good overview within the team
- It’s important that lots of people in the team have access to a tablet Difficult to test, evaluate and generally learn about tablet design, without having access to a tablet At TUI have a set of tablets that anyone in the team can use
- Want to establish and agree good tablet design in the team Want to establish tablet design patterns and best practice At TUI have set-up a style guide outlining UI components and best practice, including for tablet
- If you’re using Agile & SCRUM good idea to include tablet usability in acceptance criteria Acceptance criteria outlines what needs to be true for a piece of development work to be accepted For a story will want product owner or testers to ensure that story is usable on a tablet Ensures that tablet is considered within Agile developments