Designing for the iPad

Designing for
the iPad:
Critical Considerations for
a Unique Interaction Model

5.18.11

Megan Geyer
Lead Experience Architect

MISI Company, Ltd. | Classification: Confidential | Information owner: Exp Design | Disclosure range: MISI & Client employees

Contents

 Introductions

 Considerations Before Design

 iPad Design Best Practices

 Conclusions


Introductions :: A Little Bit About Me

 Lead Experience Architect with MISI Company

 Worked with a variety of industries for audience-focused
experience design projects, including:
 Pharmaceutical  Financial
 Non-profit  Nutrition & Wellness
 Online Education  Music/Entertainment

 Lead projects at a global financial company to determine the
right role for the iPad within their company, and then create
iPad design standards for their unique needs.

 Independently researched and published pieces on the
applicability of / considerations for iPad in the enterprise.

 Generally a bit of a dork and gadget geek.


Introductions :: A Little Bit About You

 How many of you have used an iPad before?

 How many of you own an iPad?

 How many of you have designed something for
the iPad?


Considerations Before Design


Considerations Before Design :: Know Your Audiences!

In order to ensure that any iPad solution is going to be
successful, you need to answer three key questions:

1. Who is your audience?
2. What are they trying to do?
3. How can you help them do it?

 The iPad in particular is all about individual preferences,
personalized experiences, context of use, and targeted task-
driven solutions.

 In order to deliver on these expectations, you need to know
your audiences and design for them. Some methodologies
that help in doing this are:

 Contextual inquiries  Journaling exercises
 Ethnographic studies  Persona development


Considerations Before Design :: Put It Into Context

The iPad is proving to be an integral component of a suite of devices for many. It
has obvious benefits, but also works in conjunction with other common devices. So it’s not
necessary or expected for you to provide everything on an iPad.

Think about the types of tasks that are done
best on the iPad based on it’s primary
benefits, and what is easier or more likely to
be done on another device such as a laptop
or a smartphone. SMARTPHONE
• Phone calls
• Easy & quick email
• Extremely portable
Primary iPad Benefits
 “Instant-On” Capability LAPTOP
• Full computing functionality
 Portability and Convenience • Comfortable for content creation
 Extended “PDA” Functionality • Portable (but not convenient)

 Ease of Use for Basic Tasks
 Stunning Graphics and Visuals DESKTOP
• Lots of processing power
 Extended Battery Life
 Supports Work / Life Balance Goals
Unique aspects of most common devices


Considerations Before Design :: Solve for Specific Tasks

The iPad is an instant-on device used for specific tasks, as opposed to the broader and more
time-consuming usage a laptop or desktop. Because of this, iPad products aren’t expected
to solve for everything; they should support specific tasks that are most desirable in the
context of iPad usage.

Quickly access targeted online
information
Share content with friends,
family, and co-workers

Read, bookmark, and Create light informal content
annotate e-books

Play quick low-
commitment games
Search and view videos


Considerations Before Design :: Keep It Flexible

Since the iPad is such a personal device, designers need to create products that
are flexible and compatible with the various ways that one could use an iPad.

Some questions to ask yourself to build
in flexibility to your iPad product are:

 How will the product behave in landscape vs.
portrait?
 What type of connectivity, if any, is needed to
use the product?
 Are any accessories needed to use the product?
Will it work well with the most common
accessories that people will want to use?
 Is the interface easy to use by people who are
new to the iPad as well as people who may be
more familiar with it?
 How will the product integrate with other apps,
which will vary from iPad to iPad?


Considerations Before Design :: Think About It Globally
When designing an iPad product, you need to think about the context of it as a global
product. The iPad is being adopted across the world, in various countries by a wide
breadth of people. Designs may need to reflect different languages, orientations,
connectivity, and interaction styles based on cultures.

Denmark: iPad’s
recognition of Danish
is poor so email China: It is
writing is harder. easier to type
in Chinese on
the iPad
because the
language
recognition is
excellent.

USA: Many
WiFi spots
are available Hong Kong:
so 3G isn’t as Many WiFi
necessary as South Africa: spots are
in other WiFi is hard to find available so
locations. so 3G is crucial to 3G isn’t as
the iPad’s value. necessary.


Design Best Practices


Design Best Practices :: Tailor Products to Primary Tasks

 When creating an iPad product that is also available on other platforms, it
often should not be a one-to-one translation of functionalities, features,
and content.

 Your iPad product should be tailored for completing the primary user tasks
with very little additional content or distractions from these tasks.

 There are 3 primary reasons for needing to tailor your product:
1. Different user expectations on the iPad vs. other platforms
2. More focused user objectives
3. User’s desire to quickly, easily and intuitively accomplish a task without
unnecessary or distracting content, which is particularly true on the iPad

 These primary user tasks are best determined by conducting thorough
preliminary user research and usability testing throughout the design
process.


Design Best Practices :: Tailor Products to Primary Tasks


Design Best Practices :: Create a Shallow Information Architecture

 Users tend to view iPad products as a collection of screens, as opposed to
a website that they navigate through and around. Because of this, iPad
products need to have the smallest number of unique screens as possible.

 Additionally, it is much easier for a user to get lost within a product since
there aren’t the standard elements of a website that ground a user and
reiterate where they are in the IA (ex. breadcrumbs, back buttons, URLs).

 Some UI elements that can be used to avoid deep information
architectures while still providing a rich and robust experience are:
1. Popover menus
2. Modal windows
3. Action sheets
4. Segmented Control Bars
5. Tab Bars


Design Best Practices :: Create a Shallow Information Architecture


Design Best Practices :: Leverage Different Orientations

 People can enter your iPad product from landscape or portrait orientations
so they expect it to function in either orientation. Whenever possible, you
should meet this expectation by enabling your product in both portrait and
landscape.

 The two orientations offer different opportunities for the layout of your
product. For example, portrait works very well for reading e-books, while
landscape offer more real estate for “carousel” styles.

 Although designers should optimize their iPad products for the different
orientations, the product should not drastically change based on it’s
current orientation.


Design Best Practices :: Leverage Different Orientations


Design Best Practices :: Use High-End Graphics and Videos

 One of the most impressive aspect of the iPad at first glance is it’s high-
quality display. People expect it’s content to be pretty, crisp, and stunning.

 The iPad is designed for high-definition content. Therefore your iPad
product should contain high-quality graphics, pictures, and videos.

 Additionally, you should use graphics to quickly convey content or further
details where you can.


Design Best Practices :: Use High-End Graphics and Videos


Design Best Practices :: Provide Visual Feedback to User Actions

 In a touch-screen interaction paradigm, it is more difficult for users to
know when their actions have been recognized by a system. There is no
tactile change such as a click or a depressed button.

 Therefore, iPad products need to provide subtle yet frequent visual
feedback when a system has acknowledged user input.

 Audio feedback can also be used to convey that the system has
acknowledged user action. However it should not be relied on, since the
iPad could be muted. It also should not be used as frequently as visual
feedback since this could become a nuisance on the user.


Design Best Practices :: Provide Visual Feedback to User Actions


Design Best Practices :: Minimize Content Creation

 The iPad is great for retrieving, reading, and sharing content – but it gets a
little more complicated with creating content.

 The iPad keyboard is a different size and feel from traditional keyboards.
The physical design of the device itself causes barriers to inputting data.
Because of these things, there is a high likelihood for error when creating
content. This also creates the potential for typing to become
uncomfortable much more quickly than on other devices.

 To minimize these barriers, designers should create products that facilitate
quick and simple data input. Some standard methods/UI elements for this
purpose are:
1. Pickers
2. Popover Selection Menus
3. Auto-fill forms
4. Switches
5. Custom keyboards


Design Best Practices :: Minimize Content Creation


Design Best Practices :: Enable Quick Access & Retrieval of Content

 Everything about the iPad is fast-paced. It turn on instantly. It runs fast. It
immediately responds to your touch. And it’s portable and convenient so
that you can use it in your own fast-paced world. Your iPad product needs
to mirror all of these qualities.

 This is particularly true for content delivery products. People expect to be
able to get what they want, when they want, quickly, and with minimal
barriers.

 What does this mean in practice?
1. Stored preferences and user-provided data for quick relevant content
2. No unnecessary logins
3. Absolute minimum amount of user data required for account creations
4. Most important or relevant information up-front
5. No ads/promotions that interfere with the process of retrieving information


Design Best Practices :: Enable Quick Access & Retrieval of Content


Design Best Practices :: Downplay File Handling

 The iPad is new way to create, save, store, and share files. It does not
have an innate folder structure. Instead all files are handled within apps.
This can be confusing and concerning at first.

 In order to address this new and very different file handling paradigm, iPad
products should downplay the way that files are stored/structured and
automate the file handling process as much as possible.

 Whenever possible, create a visual structure for users to navigate and
open files. This makes the storage/structure of files appear very simple
and aligns with the general experience of the iPad.


Design Best Practices :: Downplay File Handling


Design Best Practices :: Use Common Standards & Assets

 As with any new product, it is very important to remain consistent with
industry/device standards. Since the iPad is still relatively new, it can still
be very unfamiliar to some users.

 Standard icons and interactions have developed for common actions
across apps. Many of these are also standardized across iOS. Using
these common and more familiar graphics and interactions will allow users
to adapt to the iPad and learn new products quicker.

 Apple has done a great boon for iPad designers; they have provided a
entire library of assets for use when designing an iPad product, including
icons, UI elements, templates, code, frames, and more. These are your
friend!

 Additionally, all of the standard icons and interactions in the iPad have a
set meaning and purpose. These standards should not be used for any
other purpose or meaning.


Design Best Practices :: Use Common Standards & Assets


Design Best Practices :: Be Consistent with New Elements

 New iPad products often have unique elements to them that are not cared
for in the assets provided by Apple, other related products, or general
standards.

 In these cases, one should create intuitive icons and interactions to
support the tasks/content within the product.

 These new elements should be used very consistently through the entire
product and all related products.

 If a product is being translated from another platform, the unique UI
elements should carry over to the new iPad product, as long as they do
not contradict standard iPad elements.


Design Best Practices :: Be Consistent with New Elements


Design Best Practices :: Keep It Simple & Intuitive

 One of the biggest strengths of the iPad is that it is simple and intuitive.
Therefore any products created for the iPad should be equally intuitive and
easy-to-use.

 Some key factors to be mindful of in order to keep your product simple and
intuitive are:
1. Use common gestures – don’t try to create new ones.
2. Mimic real-world behaviors.
3. Stay within established interaction paradigms.
4. Keep the design clean and clutter-free.
5. Use imagery where applicable to convey extra information.


Design Best Practices :: Keep It Simple & Intuitive


Conclusions


Conclusions :: Your iPad Design Checklist

Use these as guidelines. They will not be applicable to all types of iPad
products. There will be exceptions to the rules. But in the end, audience
analysis and user testing will guide those decisions.

1. Know Your Audiences 1. Tailor Products to Primary Tasks
2. Put It Into Context 2. Create a Shallow Information Architecture
3. Solve for Desired Tasks 3. Leverage Different Orientations
4. Keep It Flexible 4. Use High-End Graphics and Videos
5. Think About It Globally 5. Provide Visual Feedback to User Actions
6. Minimize Content Creation
7. Enable Quick Access & Retrieval of Content
8. Downplay File Handling
9. Use Common Standards & Assets
10. Be Consistent with New Elements
11. Keep It Simple & Intuitive


Conclusions :: Knowledge is Power

Successful iPad products are those designed by people who understand their
audiences, their perceptions of technology, and how technology fits into their
day-to-day lives.


Megan Geyer
Lead Experience Architect
mgeyer@misicompany.com

Connect with me on LinkedIn:
http://www.linkedin.com/in/mgeyer

Follow us on Twitter: @MisiCompany

THANK YOU !

Designing for the iPad

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (19)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Designing for the iPad

Ähnlich wie Designing for the iPad (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Designing for the iPad