Why the iPad UI matters, And how it differs from the Tablet PC, but also from the iPhone.

Why the iPad UI matters And how it differs from the Tablet PC, but also from the iPhone. Slightly updated since UXCamp London 1.5 (April 17th, 2010)

Tablet Computer?

Tablet Computer? “Within ﬁve years I predict [the tablet] will be the most popular form of PC sold in America."

Tablet Computer? “Within ﬁve years I predict [the tablet] will be the most popular form of PC sold in America." Bill Gates, 2001

2001: The Tablet PC concept (from Microsoft’s press release)

2001: The Tablet PC concept (from Microsoft’s press release) • Speech input

2001: The Tablet PC concept (from Microsoft’s press release) • Speech input • Pen input with “The Stylish Stylus”

2001: The Tablet PC concept (from Microsoft’s press release) • Speech input • Pen input with “The Stylish Stylus” • "Customers have to feel they're gaining functionality, not giving up functionality”

2001: The Tablet PC concept (from Microsoft’s press release) • Speech input • Pen input with “The Stylish Stylus” • "Customers have to feel they're gaining functionality, not giving up functionality” • Runs Win XP

2001: The Tablet PC concept (from Microsoft’s press release) • Speech input • Pen input with “The Stylish Stylus” • "Customers have to feel they're gaining functionality, not giving up functionality” • Runs Win XP • “Supports all Windows applications without modiﬁcation”

A wimp?

Why the Tablet PC failed

Why the Tablet PC failed • By using the same UI as the traditional computer, Microsoft failed to recognized the tablet’s need for an interface appropriate for touch.

Why the Tablet PC failed • By using the same UI as the traditional computer, Microsoft failed to recognized the tablet’s need for an interface appropriate for touch. • Microsoft and partners were aiming at a form factor than was too large (and heavy) to be usable.

Why the Tablet PC failed • By using the same UI as the traditional computer, Microsoft failed to recognized the tablet’s need for an interface appropriate for touch. • Microsoft and partners were aiming at a form factor than was too large (and heavy) to be usable. • No desire to reduce the feature set, leading to cluttered interfaces.

2007: The iPhone

The iPhone is not a WIMP • No Windows, but full screen apps • No icons (only shortcuts) • No Menus • No pointers, but direct manipulation by multitouch

Apple’s new UI guidelines for a new platform

Apple’s new UI guidelines for a new platform • Focus on the Primary Task

Apple’s new UI guidelines for a new platform • Focus on the Primary Task • REDUCE the number of features

Apple’s new UI guidelines for a new platform • Focus on the Primary Task • REDUCE the number of features • Provide Fingertip-Size Targets

2010, The iPad

- But wait, the iPad isn’t new, it’s just a big iPod!

- Yes, it is bigger...

Browsing a newspaper site on the iPhone

- But no, it’s bigger, so the UI has to be different!

An layout optimised for iPhone won’t work for iPad

Apple’s new guidelines for a different device.

Apple’s new guidelines for a different device. • Resist the temptation to ﬁll the large screen with features that are not directly related to the main task.

Apple’s new guidelines for a different device. • Resist the temptation to ﬁll the large screen with features that are not directly related to the main task. • Consider ways to combine the content from separate iPhone screens into one screen on iPad.

Apple’s new guidelines for a different device. • Resist the temptation to ﬁll the large screen with features that are not directly related to the main task. • Consider ways to combine the content from separate iPhone screens into one screen on iPad. • Consider Multiﬁnger Gestures.

Apple’s new guidelines for a different device. • Resist the temptation to ﬁll the large screen with features that are not directly related to the main task. • Consider ways to combine the content from separate iPhone screens into one screen on iPad. • Consider Multiﬁnger Gestures. • Add Physicality and Heightened Realism.

Combine the content from separate iPhone screens

Mail on iPhone

Mail on iPad

Consider Multiﬁnger Gestures

Multi ﬁnger pinch to open an album

Multi ﬁnger drag and tap to match photo sizes

Accordeon!

Add Physicality & Heightened Realism

The limits of realism

Why should you care? • Since the mainframe days, there is a strong historic trend towards easier to use applications, the iPad could be the next step. • First signs show the market will be big and apps will be priced higher than the iPhone’s, supporting an healthier industry. • You have to make sure the websites you produce will look great on iPad, or at least still work and don’t look too bad. • Sooner or latter, a client will ask you to work on his iPad app. • Even Web Apps are moving towards platform speciﬁc layout.

Gmail on the iPad

Sources • “Tablet PC: The Laptop Evolves Into a True Mobile Computer”, press release from Microsoft (http://www.microsoft.com/presspass/features/2001/nov01/11-11tabletpc.mspx) • Apple’s Mobile Human Interface Guidelines (http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html) • Apple’s iPad Human Interface Guidelines. (http://developer.apple.com/iphone/library/documentation/General/Conceptual/iPadHIG/index.html) • Apple Keynote’s videos. • Extracts from Fraser Speirs’ “iPad UI conventions Flickr set (http://www.ﬂickr.com/photos/fraserspeirs/sets/72157623224262135/) • Martin Vidberg, “Des BD à la page” (http://vidberg.blog.lemonde.fr/2010/04/02/bd-numeriques/) • Matt Legend Gemmell, “iPad Application Design” (http://mattgemmell.com/2010/03/05/ipad-application-design) • InformationArchitects.jp, “Designing for iPad:Reality Check” (http://informationarchitects.jp/designing-for-ipad-reality-check/) • Stephan Spencer, “6 ways to optimise your site for the iPad” (http://www.searchenginejournal.com/is-your-site-ipad-ready/20094/)

Thanks for reading! Fabien Marry @AlphabUX www.AlphabUX.net

http://www.slideshare.net	664
http://shesthegeek.co.za	15
http://bikolabs-ux.tumblr.com	8
http://aneyeforideas.tumblr.com	6
http://www.linkedin.com	3
http://paper.li	3
http://jalley-hci.blogspot.com	2
http://translate.googleusercontent.com	1
http://safe.tumblr.com	1
http://www.brijj.com	1
http://www.alphabux.net	1

Why the iPad UI matters, And how it differs from the Tablet PC, but also from the iPhone.

by Fabien Marry

Accessibility

Categories

Upload Details

Usage Rights

11 Embeds 705

Statistics

Why the iPad UI matters, And how it differs from the Tablet PC, but also from the iPhone. Presentation Transcript