SlideShare a Scribd company logo
1 of 32
Download to read offline
Here are some facts:


John Lewis quote from Paul Coby


20% of John Lewis web sales now from iPad

Assumption 40% of sales will be from 'online' by 2020

30% browse in store to later purchase online; 63% research online before
buying in store

16% use mobile for research before shopping

33% use store locator on mobile

10% of orders are now click & collect; this has recently doubled due to
Waitrose coming on line as delivery locations
…predicted that by 2014, one in three
internet users will be using a tablet device


-source: eMarketeer.com November 2011
…predicted that by 2014, one in three
internet users will be using a tablet device


-source: eMarketeer.com November 2011
So should I create a brand new site just for tablets, use the
mobile version of my site or modify my current site to work
on tablets?
Who bloody knows! – I think we should suggest that we
 know or at least have some ideas! ;^) How about ‘You have
 options and one will be the right move, right now.’

 Ask what your objectives are and this will help you

- The tablet is not an overgrown smart phone
- Nor is it a pc or laptop

- Mouse ≠ Finger
QUOTE

For me I find most sites don’t look great on the iPad as I either
get a mobile site, which looks pants on such a big screen, or I get
the desktop site and have to zoom in to read something properly
or touch anything.

It’d be awesome if we had a layout totally geared towards the
iPad, somewhere in between mobile and desktop sites.
Case study




Nike created a new site specifically   Apple updated their website to
for the ipad.                          ‘fit’ on an ipad
In either case, you must bear in mind lots of design things

In either case, you must bear in mind that there are many
design challenges
If web design is Lego, iPad design must be Duplo

– Oliver Reichenstein
Who bloody knows!
 Ask what your objectives are and this will help you



- The tablet is not an overgrown smart phone
- Nor is it a pc or laptop

- Mouse ≠ Finger
Create a dead simple information architecture
and an elaborate an interaction design pattern
with a minimal number of actions


- Minimize input, maximize output
- don’t make me swipe and touch too often
Design with the finger in mind

Make sure navigation buttons are large enough
and sufficiently spaced for an adult finger to tap.

44 x 44 px is guide for finger press


This will look great with a 44 x 44 box. Maybe
show a standard small web button to make it
clear?
Typography
Not too small (have to zoom to read), not too big (leads to
too much scrolling). The answer is text that’s “just right” as
Goldilocks might put it. This doesn’t just mean finding the
perfect font-size though; It means finding the perfect
combination of font-face, size, line-height, and line length.
Make it work seamlessly in landscape and
portrait mode
Testing times

Is it easy to use? How disruptive is the purchasing experience?

Is there a consistent brand experience across platforms?

vvFor example,

Is there specialized content that takes advantage of tablet/smartphone interface
capabilities — swipe, »»tap, etc.?

Is the design simple and easy-to-use?»»

Is content appropriately sized and formatted for the device screen?»

Are fonts readable?»»

Is the site cluttered?»»

Are there video or content outages?


Maybe split across two slides so the text can be nice and big?
to maximize ecommerce revenues from tablets you should
aim to deliver fast, quality, optimized web experiences to this
growing sector.
to maximize ecommerce revenues from tablets you should
aim to deliver fast, quality, optimized web experiences to this
growing sector.
The iPad brings hands and eyes back together.
There is more to say, but for a first impression
that’s probably enough.


END


Alternative text (if you like it):

Tablets are making digital interaction more
intuitive and put simply, easier.

Existing markets are shifting to tablet use and
new markets are opening up. Let’s be in the
right place to serve them.
The iPad brings hands and eyes back together.
There is more to say, but for a first impression
that’s probably enough.


END


Alternative text (if you like it):

Tablets are making digital interaction more
intuitive and put simply, easier.

Existing markets are shifting to tablet use and
new markets are opening up. Let’s be in the
right place to serve them.
The iPad brings hands and eyes back together.
There is more to say, but for a first impression
that’s probably enough.


END


Alternative text (if you like it):

Tablets are making digital interaction more
intuitive and put simply, easier.

Existing markets are shifting to tablet use and
new markets are opening up. Let’s be in the
right place to serve them.
   http://www.btexpedite.com/ecommerce

More Related Content

Viewers also liked (14)

Matter 123
Matter 123Matter 123
Matter 123
 
The alabama girl fall 2012 sneak peak
The alabama girl   fall 2012 sneak peakThe alabama girl   fall 2012 sneak peak
The alabama girl fall 2012 sneak peak
 
Rotary club of Dhone Oct 2012 pml
Rotary club of Dhone Oct 2012 pmlRotary club of Dhone Oct 2012 pml
Rotary club of Dhone Oct 2012 pml
 
Rotary club, dhone may 2013 pml
Rotary club, dhone may 2013 pmlRotary club, dhone may 2013 pml
Rotary club, dhone may 2013 pml
 
تعليمات الجنة العليا للأنتخابات
تعليمات الجنة العليا للأنتخاباتتعليمات الجنة العليا للأنتخابات
تعليمات الجنة العليا للأنتخابات
 
IT3196 final presentation
IT3196 final presentationIT3196 final presentation
IT3196 final presentation
 
Indie music
Indie musicIndie music
Indie music
 
Nov gml
Nov gml Nov gml
Nov gml
 
How to create facebook ads
How to create facebook adsHow to create facebook ads
How to create facebook ads
 
Novo Presentation
Novo PresentationNovo Presentation
Novo Presentation
 
July GML
July GMLJuly GML
July GML
 
Actividades Colegio Cervantes
Actividades Colegio Cervantes Actividades Colegio Cervantes
Actividades Colegio Cervantes
 
R.C DHONE November pml
R.C DHONE November pmlR.C DHONE November pml
R.C DHONE November pml
 
Sach ve thuong mai dien tu
Sach ve thuong mai dien tuSach ve thuong mai dien tu
Sach ve thuong mai dien tu
 

Recently uploaded

Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
FIDO Alliance
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
FIDO Alliance
 

Recently uploaded (20)

Collecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The InsideCollecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
 
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties ReimaginedEasier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
 
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
 

Tablet Interface Design Considerations

  • 1.
  • 2. Here are some facts: John Lewis quote from Paul Coby 20% of John Lewis web sales now from iPad Assumption 40% of sales will be from 'online' by 2020 30% browse in store to later purchase online; 63% research online before buying in store 16% use mobile for research before shopping 33% use store locator on mobile 10% of orders are now click & collect; this has recently doubled due to Waitrose coming on line as delivery locations
  • 3. …predicted that by 2014, one in three internet users will be using a tablet device -source: eMarketeer.com November 2011
  • 4. …predicted that by 2014, one in three internet users will be using a tablet device -source: eMarketeer.com November 2011
  • 5. So should I create a brand new site just for tablets, use the mobile version of my site or modify my current site to work on tablets?
  • 6. Who bloody knows! – I think we should suggest that we know or at least have some ideas! ;^) How about ‘You have options and one will be the right move, right now.’ Ask what your objectives are and this will help you - The tablet is not an overgrown smart phone - Nor is it a pc or laptop - Mouse ≠ Finger
  • 7. QUOTE For me I find most sites don’t look great on the iPad as I either get a mobile site, which looks pants on such a big screen, or I get the desktop site and have to zoom in to read something properly or touch anything. It’d be awesome if we had a layout totally geared towards the iPad, somewhere in between mobile and desktop sites.
  • 8. Case study Nike created a new site specifically Apple updated their website to for the ipad. ‘fit’ on an ipad
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19. In either case, you must bear in mind lots of design things In either case, you must bear in mind that there are many design challenges
  • 20. If web design is Lego, iPad design must be Duplo 
– Oliver Reichenstein
  • 21. Who bloody knows! Ask what your objectives are and this will help you - The tablet is not an overgrown smart phone - Nor is it a pc or laptop - Mouse ≠ Finger
  • 22. Create a dead simple information architecture and an elaborate an interaction design pattern with a minimal number of actions - Minimize input, maximize output - don’t make me swipe and touch too often
  • 23. Design with the finger in mind Make sure navigation buttons are large enough and sufficiently spaced for an adult finger to tap. 44 x 44 px is guide for finger press This will look great with a 44 x 44 box. Maybe show a standard small web button to make it clear?
  • 24.
  • 25. Typography Not too small (have to zoom to read), not too big (leads to too much scrolling). The answer is text that’s “just right” as Goldilocks might put it. This doesn’t just mean finding the perfect font-size though; It means finding the perfect combination of font-face, size, line-height, and line length.
  • 26. Make it work seamlessly in landscape and portrait mode
  • 27. Testing times Is it easy to use? How disruptive is the purchasing experience? Is there a consistent brand experience across platforms? vvFor example, Is there specialized content that takes advantage of tablet/smartphone interface capabilities — swipe, »»tap, etc.? Is the design simple and easy-to-use?»» Is content appropriately sized and formatted for the device screen?» Are fonts readable?»» Is the site cluttered?»» Are there video or content outages? Maybe split across two slides so the text can be nice and big?
  • 28. to maximize ecommerce revenues from tablets you should aim to deliver fast, quality, optimized web experiences to this growing sector.
  • 29. to maximize ecommerce revenues from tablets you should aim to deliver fast, quality, optimized web experiences to this growing sector.
  • 30. The iPad brings hands and eyes back together. There is more to say, but for a first impression that’s probably enough. END Alternative text (if you like it): Tablets are making digital interaction more intuitive and put simply, easier. Existing markets are shifting to tablet use and new markets are opening up. Let’s be in the right place to serve them.
  • 31. The iPad brings hands and eyes back together. There is more to say, but for a first impression that’s probably enough. END Alternative text (if you like it): Tablets are making digital interaction more intuitive and put simply, easier. Existing markets are shifting to tablet use and new markets are opening up. Let’s be in the right place to serve them.
  • 32. The iPad brings hands and eyes back together. There is more to say, but for a first impression that’s probably enough. END Alternative text (if you like it): Tablets are making digital interaction more intuitive and put simply, easier. Existing markets are shifting to tablet use and new markets are opening up. Let’s be in the right place to serve them. http://www.btexpedite.com/ecommerce