+ All Categories
Home > Technology > Tablet Interface Design Considerations

Tablet Interface Design Considerations

Date post: 11-May-2015
Category:
Upload: btfresca
View: 1,106 times
Download: 0 times
Share this document with a friend
Description:
Thoughts on design considerations for ecommerce sites on tablet devices from BTFresca, the UK's leading ecommerce SaaS platform. http://www.btexpedite.com/ecommerce
Popular Tags:
32
Transcript
Page 1: Tablet Interface Design Considerations
Page 2: Tablet Interface Design Considerations

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 beforebuying 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 toWaitrose coming on line as delivery locations

Here are some facts:

Page 3: Tablet Interface Design Considerations

…predicted that by 2014, one in three internet users will be using a tablet device

-source: eMarketeer.com November 2011

Page 4: Tablet Interface Design Considerations

…predicted that by 2014, one in three internet users will be using a tablet device

-source: eMarketeer.com November 2011

Page 5: Tablet Interface Design Considerations

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?

Page 6: Tablet Interface Design Considerations

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

- Mouse ≠ Finger

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

Page 7: Tablet Interface Design Considerations

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.

Page 8: Tablet Interface Design Considerations

Case study

Nike created a new site specifically for the ipad.

Apple updated their website to ‘fit’ on an ipad

Page 9: Tablet Interface Design Considerations
Page 10: Tablet Interface Design Considerations
Page 11: Tablet Interface Design Considerations
Page 12: Tablet Interface Design Considerations
Page 13: Tablet Interface Design Considerations
Page 14: Tablet Interface Design Considerations
Page 15: Tablet Interface Design Considerations
Page 16: Tablet Interface Design Considerations
Page 17: Tablet Interface Design Considerations
Page 18: Tablet Interface Design Considerations
Page 19: Tablet Interface Design Considerations

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

Page 20: Tablet Interface Design Considerations

If web design is Lego, iPad design must be Duplo– Oliver Reichenstein

Page 21: Tablet Interface Design Considerations

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

- Mouse ≠ Finger

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

Page 22: Tablet Interface Design Considerations

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

Page 23: Tablet Interface Design Considerations

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?

Page 24: Tablet Interface Design Considerations
Page 25: Tablet Interface Design Considerations

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.

Page 26: Tablet Interface Design Considerations

Make it work seamlessly in landscape and portrait mode

Page 27: Tablet Interface Design Considerations

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?

Page 28: Tablet Interface Design Considerations

to maximize ecommerce revenues from tablets you should aim to deliver fast, quality, optimized web experiences to this growing sector.

Page 29: Tablet Interface Design Considerations

to maximize ecommerce revenues from tablets you should aim to deliver fast, quality, optimized web experiences to this growing sector.

Page 30: Tablet Interface Design Considerations

END

The iPad brings hands and eyes back together. There is more to say, but for a first impression that’s probably enough.

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.

Page 31: Tablet Interface Design Considerations

END

The iPad brings hands and eyes back together. There is more to say, but for a first impression that’s probably enough.

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.

Page 32: Tablet Interface Design Considerations

END

The iPad brings hands and eyes back together. There is more to say, but for a first impression that’s probably enough.

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


Recommended