the pursuit of tapiness - a case study in making tablet friendly websites

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