designing for the ipad

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

Designing for the iPad: Critical Considerations for

a Unique Interaction Model

5.18.11

Megan GeyerLead Experience Architect

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

Introductions

Considerations Before Design

iPad Design Best Practices

Conclusions

Contents


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

Non-profit

Online Education

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.

Financial

Nutrition & Wellness

Music/Entertainment


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?

Introductions :: A Little Bit About You


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

Ethnographic studies

Journaling exercises

Persona development


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.

Primary iPad Benefits

“Instant-On” Capability

Portability and Convenience

Extended “PDA” Functionality

Ease of Use for Basic Tasks

Stunning Graphics and Visuals

Extended Battery Life

Supports Work / Life Balance Goals

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.

SMARTPHONE

• Phone calls

• Easy & quick email

• Extremely portable

LAPTOP

• Full computing functionality

• Comfortable for content creation

• Portable (but not convenient)

DESKTOP

• Lots of processing power

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

informationShare content with friends,

family, and co-workers

Play quick low-

commitment games

Read, bookmark, and

annotate e-books

Create light informal content

Search and view videos


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 :: 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.


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.

Considerations Before Design :: Think About It Globally

USA: Many

WiFi spots

are available

so 3G isn’t as

necessary as

in other

locations.

South Africa:

WiFi is hard to find

so 3G is crucial to

the iPad’s value.

China: It is

easier to type

in Chinese on

the iPad

because the

language

recognition is

excellent.

Denmark: iPad’s

recognition of Danish

is poor so email

writing is harder.

Hong Kong:

Many WiFi

spots are

available so

3G isn’t as

necessary.


Design Best Practices


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 :: Tailor Products to Primary Tasks


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 :: Create a Shallow Information Architecture


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 :: Leverage Different Orientations


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 :: Use High-End Graphics and Videos


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 :: Provide Visual Feedback to User Actions

http://www.youtube.com/watch?v=R41NNPBqRCk


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 :: Minimize Content Creation


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 :: Enable Quick Access & Retrieval of Content


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 :: Downplay File Handling


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 :: Use Common Standards & Assets


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 :: Be Consistent with New Elements


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


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. Tailor Products to Primary Tasks

2. Create a Shallow Information Architecture

3. Leverage Different Orientations

4. Use High-End Graphics and Videos

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

1. Know Your Audiences

2. Put It Into Context

3. Solve for Desired Tasks

4. Keep It Flexible

5. Think About It Globally


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.

Conclusions :: Knowledge is Power

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

THANK YOU !

Megan GeyerLead Experience [email protected]

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

Follow us on Twitter: @MisiCompany

mailto:[email protected]

http://www.linkedin.com/in/jmmaclarenhall

designing for the ipad

Business

ipad design standards

ipad solution

forthe ipad

contextthe ipad

exp design disclosure

misi client employees

specific tasksthe ipad

thecontext of ipad usage