Tablet Interface Design Considerations
-
Upload
btfresca -
Category
Technology
-
view
1.107 -
download
0
description
Transcript of Tablet Interface Design Considerations
![Page 1: Tablet Interface Design Considerations](https://reader033.fdocuments.net/reader033/viewer/2022052619/5550451fb4c9058f768b4cfa/html5/thumbnails/1.jpg)
![Page 2: Tablet Interface Design Considerations](https://reader033.fdocuments.net/reader033/viewer/2022052619/5550451fb4c9058f768b4cfa/html5/thumbnails/2.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052619/5550451fb4c9058f768b4cfa/html5/thumbnails/3.jpg)
…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](https://reader033.fdocuments.net/reader033/viewer/2022052619/5550451fb4c9058f768b4cfa/html5/thumbnails/4.jpg)
…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](https://reader033.fdocuments.net/reader033/viewer/2022052619/5550451fb4c9058f768b4cfa/html5/thumbnails/5.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052619/5550451fb4c9058f768b4cfa/html5/thumbnails/6.jpg)
- 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](https://reader033.fdocuments.net/reader033/viewer/2022052619/5550451fb4c9058f768b4cfa/html5/thumbnails/7.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052619/5550451fb4c9058f768b4cfa/html5/thumbnails/8.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052619/5550451fb4c9058f768b4cfa/html5/thumbnails/9.jpg)
![Page 10: Tablet Interface Design Considerations](https://reader033.fdocuments.net/reader033/viewer/2022052619/5550451fb4c9058f768b4cfa/html5/thumbnails/10.jpg)
![Page 11: Tablet Interface Design Considerations](https://reader033.fdocuments.net/reader033/viewer/2022052619/5550451fb4c9058f768b4cfa/html5/thumbnails/11.jpg)
![Page 12: Tablet Interface Design Considerations](https://reader033.fdocuments.net/reader033/viewer/2022052619/5550451fb4c9058f768b4cfa/html5/thumbnails/12.jpg)
![Page 13: Tablet Interface Design Considerations](https://reader033.fdocuments.net/reader033/viewer/2022052619/5550451fb4c9058f768b4cfa/html5/thumbnails/13.jpg)
![Page 14: Tablet Interface Design Considerations](https://reader033.fdocuments.net/reader033/viewer/2022052619/5550451fb4c9058f768b4cfa/html5/thumbnails/14.jpg)
![Page 15: Tablet Interface Design Considerations](https://reader033.fdocuments.net/reader033/viewer/2022052619/5550451fb4c9058f768b4cfa/html5/thumbnails/15.jpg)
![Page 16: Tablet Interface Design Considerations](https://reader033.fdocuments.net/reader033/viewer/2022052619/5550451fb4c9058f768b4cfa/html5/thumbnails/16.jpg)
![Page 17: Tablet Interface Design Considerations](https://reader033.fdocuments.net/reader033/viewer/2022052619/5550451fb4c9058f768b4cfa/html5/thumbnails/17.jpg)
![Page 18: Tablet Interface Design Considerations](https://reader033.fdocuments.net/reader033/viewer/2022052619/5550451fb4c9058f768b4cfa/html5/thumbnails/18.jpg)
![Page 19: Tablet Interface Design Considerations](https://reader033.fdocuments.net/reader033/viewer/2022052619/5550451fb4c9058f768b4cfa/html5/thumbnails/19.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052619/5550451fb4c9058f768b4cfa/html5/thumbnails/20.jpg)
If web design is Lego, iPad design must be Duplo– Oliver Reichenstein
![Page 21: Tablet Interface Design Considerations](https://reader033.fdocuments.net/reader033/viewer/2022052619/5550451fb4c9058f768b4cfa/html5/thumbnails/21.jpg)
- 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](https://reader033.fdocuments.net/reader033/viewer/2022052619/5550451fb4c9058f768b4cfa/html5/thumbnails/22.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052619/5550451fb4c9058f768b4cfa/html5/thumbnails/23.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052619/5550451fb4c9058f768b4cfa/html5/thumbnails/24.jpg)
![Page 25: Tablet Interface Design Considerations](https://reader033.fdocuments.net/reader033/viewer/2022052619/5550451fb4c9058f768b4cfa/html5/thumbnails/25.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052619/5550451fb4c9058f768b4cfa/html5/thumbnails/26.jpg)
Make it work seamlessly in landscape and portrait mode
![Page 27: Tablet Interface Design Considerations](https://reader033.fdocuments.net/reader033/viewer/2022052619/5550451fb4c9058f768b4cfa/html5/thumbnails/27.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052619/5550451fb4c9058f768b4cfa/html5/thumbnails/28.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052619/5550451fb4c9058f768b4cfa/html5/thumbnails/29.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052619/5550451fb4c9058f768b4cfa/html5/thumbnails/30.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052619/5550451fb4c9058f768b4cfa/html5/thumbnails/31.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022052619/5550451fb4c9058f768b4cfa/html5/thumbnails/32.jpg)
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