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