3 iPad Design Elements You Ignore At Your Own Risk

by 1 03/16/2012

The iPad has become a leader in mainstream computing appliances – allowing you the best there is in web, email, movies, music, and much more all in a compact aluminum and glass body.

Designing for the iPad is an in-demand skill to possess and one that should be approached differently than your typical website.

In this article we’ll look at how designers can successfully work through the parameters of designing for this ever-evolving medium.

Although there are no hard and fast rules about designing for the iPad there are some guidelines to consider when designing for the medium.

I suggest you get started by taking a look at an iPad GUI Template for Photoshop like the one you will find here.  This will give you a great start.

Here are three critical iPad design elements that should be considered in all iPad design.  Ignoring any of these areas could lead to a poor user experience on the iPad.

1. Fluid Width Design

I won’t spend a lot of time here, but this one is super important.

Your website can be viewed in either landscape or portrait mode on the iPad.

There’s no right way to view a website on the iPad, but it’s recommended that fluid width design be used to account for these two different viewing modes. With this in mind a combination of CSS and Javascript improves the overall user experience in creating a smart fluid width design.

This post on Smashing Magazine is a great resource for anyone looking to learn more about fluid width design.

2. Minimalism

Although the iPad has more screen real estate than the iPhone, it’s still best to keep it simple. The user is most likely only interested in the content and controls relevant to them at that moment.

Consider the following in your interface design:

Use Contextual Menus

Contextual menus are an efficient way to organize information and keep your UI nice and clean. Use them when you want the user to access other parts of the app that are kept out of the primary navigation.

Clutter is reduced on the app for Epicurious, the popular recipe and shopping list site, through the inclusion of a contextual menu that appears when the user is interested in knowing the ingredients.

 

Contextual menus are great for presenting items at the appropriate time – effectively cutting down on the clutter on your interface. As you’ll see on the above app, a long touch on a menu item brings up a context-menu, allowing you to add songs to your playlist.

Use Modal Windows

Modal windows are another way to effectively organize your interface design. Packing everything onto one screen not only looks bad, but isn’t user-friendly. Modal windows are great for segmenting features of your app. In the example below, clicking on the session filters icon reveals modal windows.

The modal UI was designed as the easiest and most reliable way to access the session filter preferences.

3) Consider the Audience First

Although it is third in our short list, considering the audience is certainly not least important.

Always consider who will be using the website or app.  The capabilities the app or website needs will only become apparent when you consider the audience.

Ask yourself this:  “How will this app/website fit into the life of my target audience?”

The app for ABCKit was designed with kids in mind.

Because they’re developing fine motor skills, it’s best to design things big, and this is no exception for an app that teaches the ABC’s. The app also provides positive reinforcement to keep the child motivated and want to move forward.

The simple interface on the app works well for kids who don’t yet understand how to navigate through a lot of information. ABCKit accomplishes this by using buttons sparingly.  The few buttons they do include are the maximum size of a “tappable” area.

Facebook for iPad takes advantage of the medium by allowing photos and maps to shine. Photos are bigger and easier to flip through. You can also easily scroll through your news feed with your fingertips and enjoy Facebook in the same manner as on your desktop.

Simply pinch a picture to zoom in. You can also take pictures using the iPad and transfer them directly to Facebook. The result is an engaging and fun experience for those with the tablet.

 

The Martha Stewart cookies app takes into consideration the needs of the baker in the development of this useful app.

]The cookie app not only lists recipes for the cookies, but also tells you the ingredients which you can add to your shopping list. The app also includes a built-in timer as well as numerous videos of each cookie being made.

The app is easier to use than flipping through page after page of a recipe book to find the recipe you’re looking for.


The iPad app for Khan Academy allows the user the same videos, resources, and lessons plans as the website.

The Khan Academy is an online non-profit organization whose goal is to provide a “free world-class education to anyone anywhere.” The design is clean and modern with plenty of white-space. The app is developed using HTML5 and jQuery Mobile. With a plethora of videos covering everything from physics to arithmetic, Khan Academy helps you learn what you want, when you want, and at your own pace.

Developing a good user experience can be achieved through understanding the target audience and how the app will best suit their needs, then designing it to help them reach their goals as simply as possible.

Think beyond simply scaling your site or application down for a smaller screen.  The most successful apps and websites make tasks simpler and more enjoyable for their target audience.

Remember, every time someone visits your website or opens your app on their iPad, they are on a mission.  Help them accomplish that mission by considering the above iPad design elements.

What are some of your favorite iPad websites and apps? Why do you like them?  Let us know in the comments.

Print Friendly

About 

Stephanie Hamilton is the Owner/Creative Director of Atticus Pet Design Studio and a freelance Web/UI Designer. Holding a BFA in Graphic Design, she has several years experience helping businesses reach their full potential through strategic branding and good design. Follow her on facebook and twitter.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

1 COMMENT

Ed Lazor

Have you ever tried scrolling to see everything in a modal window, only to have the darn thing move as it tries to automatically center against a page width that differs greatly from the width of the screen width of your portable device? It’s no fun.

July 2, 2012 Reply


Leave comment

Some HTML allowed

Get conversion optimization & A/B testing articles FREE >>>