iPad User Experience Guidelines | UX Magazine

Apple's Human Interface Guidelines for the iPad outline how to create user interfaces optimized for the iPad device. According to Apple, the best iPad applications: downplay application UI so that the focus is on content; present content in beautiful, often realistic ways; and take full advantage of device capabilities to enable enhanced interaction.

The overview of iPad user experience guidelines listed below is © 2010 Apple Inc.

Support All Orientations

Your application should encourage people to interact with iPad from any side by providing a great experience in all orientations. The reason is that people don’t view the device as having a default orientation, because they don’t pay much attention to the minimal device frame and they’re unconcerned with the location of the Home button.

Enhance Interactivity (Don’t Just Add Features)

The best iPad applications give people innovative ways to interact with content while they perform a clearly defined, finite task. Resist the temptation to fill the large screen with features that are not directly related to the main task. In particular, you should not view the large iPad screen as an invitation to bring back all the functionality you pruned from your iPhone application.

Flatten Your Information Hierarchy

Although you don’t want to pack too much information into one screen, you also want to prevent people from feeling that they must visit many different screens to find what they want. In general, focus the main screen on the primary content and provide additional information or tools in an auxiliary view, such as a popover.

Reduce Full-Screen Transitions

Instead of swapping in a whole new screen when some embedded information changes, update only the areas of the user interface that need it. When you perform fewer full-screen transitions, your application has greater visual stability, which helps people keep track of where they are in their task.

Enable Collaboration and Connectedness

Think of ways people might want to use your application with others. Expand your thinking to include both the physical sharing of a single device and the virtual sharing of data.

Add Physicality and Heightened Realism

Whenever possible, add a realistic, physical dimension to your application. The more true to life your application looks and behaves, the easier it is for people to understand how it works and the more they enjoy using it.

Delight People with Stunning Graphics

The high-resolution iPad screen supports rich, beautiful, engaging graphics that draw people into an application and make the simplest task rewarding.

De-emphasize User Interface Controls

Help people focus on the content by designing your application UI as a subtle frame for the information they’re interested in. Downplay application controls by minimizing their number and prominence. Consider creating custom controls that subtly integrate with your application’s graphical style. In this way, controls are discoverable, but not too conspicuous.

Minimize Modality

iPad applications should allow people to interact with them in nonlinear ways. Modality prevents this freedom by interrupting people’s workflow and forcing them to choose a particular path.

Rethink Your Lists

Consider a more real-world vision of your application. For example, on iPhone, Contacts is a streamlined list, but on iPad, Contacts is an address book with a beautifully tangible look and feel.

Consider Multifinger Gestures

The large iPad screen provides great scope for multifinger gestures, including gestures made by more than one person.

Consider Popovers for Some Modal Tasks

If you use modal views to enable self-contained tasks in your iPhone application, you might be able to use popovers instead.

Restrict Complexity in Modal Tasks

People appreciate being able to accomplish a self-contained subtask in a modal view, because the context shift is clear and temporary. But if the subtask is too complex, people can lose sight of the main task they suspended when they entered the modal view.

Downplay File-Handling Operations

Although iPad applications can allow people to create and manipulate files and share them with a computer (when the device is docked), this does not mean that people should have a sense of the file system on iPad.

Ask People to Save Only When Necessary

People should have confidence that their work is always preserved unless they explicitly cancel or delete it. If your application helps people create and edit documents, make sure they do not have to take an explicit save action.

Start Instantly

iPad applications should start as quickly as possible so that people can begin using them without delay.

Always Be Prepared to Stop

Like iPhone applications, iPad applications stop when people press the Home button to open another application.

More details on these guidelines and further information on developing for the iPad can be found in Apple's Human Interface Guidelines for the iPad.

Read more articles about the iPad by Luke Wroblewski at lukew.com.

Carsonified » 10 User Interface Design Fundamentals

Photo of a submarine control panel

It’s no great mystery that truly great user interfaces are the ones that are engineered to stay out of the way.

‘Staying out of the way’ means not distracting your users. Rather, good UIs let your users complete goals. The result? A reduction in training and support costs, and happier, satisfied and highly engaged users.

When getting started on a new interface, make sure to remember these fundamentals …

Editor’s Note: Kyle will be talking about User Interface Design at The Future of Web Design NYC.

1. Know your user

“Obsess over customers: when given the choice between obsessing over competitors or customers, always obsess over customers. Start with customers and work backward.” – Jeff Bezos

Your user’s goals are your goals, so learn them. Restate them, repeat them. Then, learn about your user’s skills and experience, and what they need. Find out what interfaces they like and sit down and watch how they use them. Do not get carried away trying to keep up with the competition by mimicking trendy design styles or adding new features. By focusing on your user first, you will be able to create an interface that lets them achieve their goals.

2. Pay attention to patterns

Users spend the majority of their time on interfaces other than your own (Facebook, MySpace, Blogger, Bank of America, school/university, news websites, etc). There is no need to reinvent the wheel. Those interfaces may solve some of the same problems that users perceive within the one you are creating. By using familiar UI patterns, you will help your users feel at home.

Graphic comparing an email inbox with CoTweet's inbox
CoTweet uses a familiar UI pattern found in email applications.

3. Stay consistent

“The more users’ expectations prove right, the more they will feel in control of the system and the more they will like it.” – Jakob Nielson

Your users need consistency. They need to know that once they learn to do something, they will be able to do it again. Language, layout, and design are just a few interface elements that need consistency. A consistent interface enables your users to have a better understanding of how things will work, increasing their efficiency.

4. Use visual hierarchy

“Designers can create normalcy out of chaos; they can clearly communicate ideas through the organizing and manipulating of words and pictures.” – Jeffery Veen, The Art and Science of Web Design

Design your interface in a way that allows the user to focus on what is most important. The size, color, and placement of each element work together, creating a clear path to understanding your interface. A clear hierarchy will go great lengths in reducing the appearance of complexity (even when the actions themselves are complex).

5. Provide feedback

Your interface should at all times speak to your user, when his/her actions are both right and wrong or misunderstood. Always inform your users of actions, changes in state and errors, or exceptions that occur. Visual cues or simple messaging can show the user whether his or her actions have led to the expected result.

Screenshot of BantamLive's interface showing that it provides feedback with a loading action
BantamLive provides inline loading indicators for most actions within their interface.

6. Be forgiving

No matter how clear your design is, people will make mistakes. Your UI should allow for and tolerate user error. Design ways for users to undo actions, and be forgiving with varied inputs (no one likes to start over because he/she put in the wrong birth date format). Also, if the user does cause an error, use your messaging as a teachable situation by showing what action was wrong, and ensure that she/he knows how to prevent the error from occurring again.

A great example can be seen in How to increase signups with easier captchas.

7. Empower your user

Once a user has become experienced with your interface, reward him/her and take off the training wheels. The breakdown of complex tasks into simple steps will become cumbersome and distracting. Providing more abstract ways, like keyboard shortcuts, to accomplish tasks will allow your design to get out of the way.

8. Speak their language

“If you think every pixel, every icon, every typeface matters, then you also need to believe every letter matters. ” – Getting Real

All interfaces require some level of copywriting. Keep things conversational, not sensational. Provide clear and concise labels for actions and keep your messaging simple. Your users will appreciate it, because they won’t hear you – they will hear themselves and/or their peers.

9. Keep it simple

“A modern paradox is that it’s simpler to create complex interfaces because it’s so complex to simplify them.” – Pär Almqvist

The best interface designs are invisible. They do not contain UI-bling or unnecessary elements. Instead, the necessary elements are succinct and make sense. Whenever you are thinking about adding a new feature or element to your interface, ask the question, “Does the user really need this?” or “Why does the user want this very clever animated gif?” Are you adding things because you like or want them? Never let your UI ego steal the show.

10. Keep moving forward

Grandpa Bud: If I gave up every time I failed, I would never have invented my fireproof pants!
[Pants burn up, revealing his underwear]
Grandpa Bud: Still working the kinks out a bit.

from Meet the Robinsons

Meet the Robinsons is one of my all time favorite movies. Throughout the movie Lewis, the protagonist, is challenged to “keep moving forward.” This is a key principle in UI design.

It is often said when developing interfaces that you need to fail fast, and iterate often. When creating a UI, you will make mistakes. Just keep moving forward, and remember to keep your UI out of the way.

Editor’s Note: Come hear Kyle speak about User Interface Design at The Future of Web Design NYC.

Photo credit: flickr.com/photos/lostamerica

Zune HD Review: The PMP, Evolved - Zune hd review - Gizmodo

By Dan Nosowitz, 11:00 AM on Wed Sep 16 2009, 123,374 views (Edit, to draft, Slurp)

The big question: Can the Zune HD compete with the iPod Touch? I get the sense that Microsoft isn't trying to, exactly.

While the Touch and its apps are a multi use pocket computer, the Zune HD is an evolution of the PMP—not a devolution of some smartphone model. Every new feature it has is used to expand the way you absorb media, from the HD video output to the HD radio to the redesigned UI.

Hardware

The Zune HD is not a simple curved rectangle with a screen, like the iPod Touch, but a resolutely industrial, luxurious, angular and slim design. From the angled back to the visible screws to the long and thin home button, the Zune HD is a look all its own.

Constructed of aluminum, rubberized black plastic and glass, the Zune HD feels tough and solid in the hand. The widescreen display offers less space for non-media applications like web browsing, but for media (which, after all, is the Zune HD's raison d'etre), it's a really nice size. It won't quite fit in the change pocket of your jeans, but it'll slip into even the tightest of regular pockets. The iPod Touch may be a hair thinner, but the Zune HD's narrower body makes it feel much smaller.

The gorgeous 3.3-inch capacitive OLED touchscreen takes up the majority of the device's face. More on that below. It's surrounded by three hardware buttons: Underneath the screen on the face is the home button, on the top edge is the power/hold button, and in lieu of a volume rocker the Zune HD has a button on the left side that brings up Quickplay options. These options drift onto the screen and offer volume, track forward/back and play/pause. Quickplay can be enabled to work even while the player is locked.

On the bottom of the device is the proprietary Zune port (the Zune HD will work with all of the surprisingly easy-to-find existing Zune accessories) and the headphone jack. It's rated for 33 hours of audio and 8.5 of video, which is very strong if it's true (especially since previous Zunes were lacking in battery life, to say the least). The Zune HD lacks both a speaker and a camera, though neither is necessarily a mark against it. Still, both options would be welcome.

Screen
One of the first PMPs with an OLED screen (the Sony X-Series being the other major one), the Zune HD theoretically has a sharper picture and deeper blacks compared with LCD screens like the one on the iPod Touch.

The Zune HD's screen is a 3.3-inch multitouch capacitive touchscreen, in a 16:9 (widescreen) ratio running at an ironically non-HD 480x272. The iPod Touch, in comparison, is a 3.5-inch multitouch capacitive LCD, but in 4:3 (fullscreen) ratio running at 480×320, which is more efficient for web browsing but a waste of space for straightforward media playback. They're pretty equal in responsiveness, both being about as accurate a touchscreen as you're likely to find.

The Zune HD's screen is definitely sharper and with truer colors than the iPod Touch, when compared with the same video (a standard-def episode of Anthony Bourdain: No Reservations). The iPod Touch's pixels were clearly visible and the color seemed washed out and weak compared to the Zune HD. However, it's not a perfect win for OLED: The Zune HD's screen is extremely reflective, making it difficult to read in sunlight, while the iPod Touch's LCD was quite easy to read in the same conditions.

Part of this difference is due to technology and part of this is due to UI. The iPod touch uses black text on white for music and video browsing, while the Zune HD is reversed. The Zune HD's black background acts as a mirror, making it difficult to see anything but your own annoyed face.

Video

To take advantage of that premium OLED screen, Microsoft is really pushing high-quality video playback on the Zune HD. iPod comparisons aside, my sample HD clip (a 720p episode of Battlestar Galactica bought from the Zune store) sparkles. Tap the screen while video's playing and "Quickplay controls" bring up every button you need.

Codec support, however, reduces the Zune HD's appeal as a general purpose video player. It plays WMV, MP4, H.264 and DVR-MS (recorded video from Windows Media Center), which means it will play iPod-formatted clips (though of course not DRMed videos). That's missing every codec video pirates care about, most importantly DivX for SD and MKV for HD. If you've got a load of torrented HD video in MKV like I do, you're a bit screwed—I tried several converters (iSquint, Cucusoft, Handbrake) and never managed to transcode MKV to a decent-quality Zune-compatible file. If Microsoft isn't going to include a converter in the software, the Zune HD should at least support DivX (like Samsung's P3).

The thing is, the Zune HD is actually on par with the category leaders (iPod Touch, Sony X-Series) in codec support: All three force you to either get your video directly from the manufacturer's stores or transcode your video into their specific formats. Microsoft could have scored huge with video freaks by supporting DivX and MKV. It's frankly a huge pain in the ass to have to convert every single video I want to watch on my PMP.

If you're really into torrented videos, I'd recommend the Samsung P3, although in just about every other way the Zune HD is a far superior device.

Zune as Media Center
The Zune HD's unparalleled ability to output video in 720p is a major selling point for the device, and let me tell you, it's everything you'd hope it would be. Video is crisp, clear and smooth, looking just as good as the same video played through any bulky media streamer. The interface as a whole actually translates really well to a bigger screen, slightly dumbed down for speed's sake (for example, there's no background artist image on the now playing screen). It's not as full-featured as an HTPC, but for just playing back your media, it does a great job. The screensaver on the now playing screen looks especially awesome on a big HDTV.

But to take advantage of HD content on your television, you'll need to buy the $90 AV dock, which comes with the dock itself (including antenna for radio), a remote, an HDMI cable and a composite cable. Is it worth it? I'd say yes, if you've got an HDTV and plan to buy a lot of HD content from Zune marketplace. If you just want to display some video on a TV, you can buy the last-gen Zune's standard-def AV pack for less than $20, all of which is compatible with the Zune HD. However, if you go the cheapskate route, you'll be missing a major part of what separates the Zune HD from the pack. Not that it's bad to toss a few 128kbps mp3 files on for a bus ride, but you wouldn't really be taking advantage of what the Zune HD can do.

User Interface

Using the Zune HD and the iPod Touch together is jarring—they do mostly the same things, but they look vastly different. The Zune HD's UI is everything but an example of Apple minimalism, constantly teetering between digital eye candy and complete ocular over-stimulation. It's a white text on black layout, and has the very cool (and a little ballsy) design choice to zoom in to certain items so much that they're actually cropped out of the screen. For example, on the homescreen, the word "marketplace" is cut off at the penultimate letter. Some will hate the design, but I think it's a really interesting, aggressively artsy choice. Even when the UI feels too cluttered, which it sometimes does, it's still great to look at.

Homescreen
The homescreen is actually two homescreens in one. You've got the standard list of features, in this case "music, videos, pictures, radio, marketplace, social, podcasts, internet, settings," but there's also a Quickplay menu shrunk to the left side of the screen.

The Quickplay menu mirrors the new front page of the Zune software: It shows the album art and song title of the song that's currently playing (if there is one currently playing), but also your "Pins," "History," and "New." Pins are like favorites—you can tap and hold any item (song, podcast, video, photo) and pin it to this top menu. It's great if you're listening to something long like an audiobook or podcast. History is your recently played items, and New shows the most recent items you've synced to the Zune HD. That last is my favorite of all—I've got a huge and always expanding music collection, and tend to forget which albums I've just added to my PMP. It's also great if you use the ZunePass subscription service, since you'll be downloading so much you'll forget what you meant to listen to.

Content Browsing
The Zune HD uses the same grab-and-flick method of touchscreen navigation as the iPod Touch and Sony X-Series, though like the X-Series it doesn't feel quite as fluid or organic as the iPod Touch. Trying to scroll really quickly through a long list of artists feels like it takes longer than it should, which is probably why Microsoft implemented an alphabet system. As you scroll through the lists of artists, albums or whatever, the actual letters are placed in their appropriate spots (on mine, the list of artists will read "Iron and Wine, Islands, J, Jay Reatard, Joe Strummer and the Mescaleros). Tap any of these letters to bring up the full alphabet, any letter of which can be tapped to take you right there.

This is a decent method to get around long lists quickly, but I'd have preferred to separate the letters from the lists of actual items. I've accidentally hit a letter when I meant to hit an artist, and that could easily have been solved with a scrolling alphabet bar on the side.

Browsing through artist lists is mostly straightforward—mostly. There's a bit of a continuity issue with the "one step back" function. On the now playing screen, it's a left-pointing arrow in the top left corner, which is extremely obvious. But once you hit it, you're on the song's page (with options like email and rate), but now there's no back button. Instead, there's a word written in huge letters, so huge in fact that they're cut off and not readable. Those letters actually spell out the name of the album, and tapping it functions as a back button, taking you back to the album. This can be fixed with a firmware update—just add a clear "back" icon like on the now playing screen!

Now Playing
The Now Playing screen cleverly finds a photo of the artist and uses that as the wallpaper, and I love the screensaver that slowly scrolls the artist, track name, album name, length and album art. Microsoft nails the advanced design work—what about the obvious? How do I pause, navigate forward and backward, and adjust volume? It's not as easy as it should be.

All of those controls are relegated to another Quickplay menu, activated either by the left side button or by tapping anywhere on the now playing screen that's not another button. I don't want to bring up a sub-menu to do things like pause music or adjust volume when relatively unimportant options like ratings get their own space on the screen.

Again, I get the sense that Microsoft was so enamored with the beauty of the UI (and it is certainly full of eye candy) that they refused to adjust it to insert simple playback controls.

Radio
Surprisingly, FM radio has become a hot topic in PMPs, thanks to Microsoft's announcement that the Zune HD will support HD radio and now Apple's reversal on its long-held aversion to FM with its new iPod Nano. But HD radio is another example of Microsoft expanding the boundaries of the PMP: "So you support FM radio? We're going to support it better."

HD radio allows for both more stations and (hopefully) higher quality broadcasts. The Zune HD's radio will often pick up two simultaneous broadcasts from one station, like San Francisco's KFOG-1 and KFOG-2. The Zune HD's reception is excellent, at least as clear as the iPod Nano, able to pick up a handful of HD stations, all with RDS data (artist, song name). Like the Nano, the Zune HD can pause and cache live radio, a great function, though it also cannot record.

Internet Browser

This is a serious surprise, after seeing the similar Sony X-Series's browser crash, burn, and then explode shards of awful all over me, but the Zune HD's internet browser is awesome. The narrower 3.3-inch widescreen isn't as spacious as that of the iPod Touch and pages definitely load a little slower, but besides that it's a full-featured, fast and responsive browser. The accelerometer is very quick, panning is smooth and easy, and the standard multitouch gestures (pinch, drag) work nicely. Unfortunately, the Zune HD does not support YouTube or any other Flash video, which would have been a nice feature for quickly listening to new music.

The soft keyboard is functional (if a little small), built-in Bing search works well, and even an intense site like Gizmodo loads with no problem. Please, Microsoft: Stick this browser in Windows Mobile.

Syncing

The Zune software has been updated with a few features and slight UI changes to match the Zune HD. It now has a front page similar to the Zune HD's homescreen Quickplay, and puts more of an emphasis on Smart DJ, which is an evolution of Microsoft's Pandora-like recommendation service. If you're not a member of the ZunePass subscription service, it'll recommend music in your own library, and if you are, it'll dig through the ZunePass's massive collection. But it's largely unchanged, which is a good thing.

The Zune HD is, like the other Zunes, Windows only. It can only sync with the Zune software, which is restricted to Windows.

This is, of course, a huge mistake on Microsoft's part. Mac users would be right in the demographic sweet spot to be interested in the Zune HD: Media-loving, style-conscious, with money to burn on gadgets. Hell, the 32GB platinum Zune HD even matches the unibody MacBook Pro models. But with yet another Zune shunning Mac compatibility, it seems certain that Microsoft has given up on converting Apple zealots.

Apps
Well, there are apps, technically. But Microsoft has stressed that the Zune HD is a media device first and foremost—there's no SDK, so independent development is out for now, and the Zune team seems to have little interest in competing with Apple's App Store. At launch, the Zune HD has seven games and two utilities (calculator and weather) available. The games are just ports of the games from older Zunes, like poker and sudoku. Even further, Microsoft has confirmed that Facebook and Twitter apps will come to the Zune HD, but only around November. For some, this may be the big weakness. The iPod Touch is really a pocket computer with an excellent touch-based music and video app. When you grab a Touch, you're just as likely to play a game or check your email as you are to play some music. Meawhile, Archos and Creative both use Android, a mobile computing OS, to do similar things. The Zune HD doesn't have the benefit of these ecosystems.

The app selection just confirms that the Zune HD is a PMP and not a mobile computer. You can't even move an app to the homescreen; they stay stuck in the "apps" section, way down the list, confined like a grounded child to their bedroom.

However, the XNA team has just released an add-on for XNA Game Studio 3.1 that will allow developers to create apps for the Zune HD. They've demonstrated a multi-touch drawing app as proof, which is very cool, but remember, apps (like music and video) need to be loaded onto the device via the Zune software—and who knows whether Microsoft will allow third-party apps into the marketplace.

Best of Breed

The Zune HD is the best touchscreen PMP on the market. It's got the most unique vision, the most impressive hardware and the most stylish software. It's priced fairly at $220 for 16GB and $290 for 32GB, though I'd call the $90 dock a required accessory.

But I'm not sure that's enough. PMPs like the Zune HD and Sony X-Series try to advance the genre with new and impressive media playback features, but the success of the iPod Touch shows that that media playback alone isn't necessarily enough anymore. People seem to want pocketable computers, either in smartphone or near-smartphone form, or simpler, smaller devices like the iPod Nano and SanDisk's Sansa line. So it's not going to steal sales from the iPod Touch, but it should make some Samsung and Sony executives pretty jealous.

I'm left wishing Microsoft could get its Zune team to work with (read: boss around) the Windows Mobile team to put together a media phone. The Zune HD is a great PMP, but it could have been a jaw-dropping, unbelievable phone.

Flashy and unusual hardware

Excellent software integration

Advanced media features like HD video-out and HD radio

Surprisingly excellent internet browser

Requires $90 accessory to be actually "HD"

UI is beautiful, but sometimes confusing

Capacity restricted to 16GB and 32GB

Disappointing codec support