Designing iPad Interfaces: New Navigation Schemas

As new devices become mainstream, it is our responsibility as interaction designers to understand the patterns, capabilities and limitations of these devices. Let’s take a look at some of the current “best practices” that are emerging around the iPad.

We are moving away from the textual part and moving more toward visual representation of the stories. This allows people to be able to flip through and “snack” on things. Some useful techniques: presenting news as if they are tacked up on a board; allowing users to skim content.(e.g. Epicurius, Flipboard, CNN, Reuters.)

Recreation of the physical with ability to deep dive, if desired. There is lots of photograph; presenting of the product in big touts.. Notion of a layer with the ability to navigate by looking through stories. (e.g. Wired Magazine) We are used to sliding down menus that go away when we don’t need them; commonly represented within a table of contents.

It’s important to use elements that you know work, things that are intuitive to the user. If there are things hidden, make it obvious and help users discover. (e.g. Style.com)

“Infinity navigation” allows discovery and exploration; rotate for women and men. (e.g. Gap)

Lean on the conventions but use the opportunity to teach alternate navigation. Give users a sense of discovery and allow them to see what they have already done. Additional elements can become alternate layers. “The principles are more important than the navigation devices you use.”

Carousels are now pumped up for iPad with rows moving independently. Split screen gives maximum flexibility, also layers help to do this. (e.g. NPR) Buttons are not always contextual. Main functions are fixed, similar to the main items within a typical OS.

Simplicity of design allows you to explore (e.g. Yellow Pages)
– Be explicit and provide users a quick snapshot of your navigation.
– We are starting to train users on new interface paradigms. (e.g. Food & Wine Magazine)

Overall considerations when designing iPad interfaces:
1. Use common constructs
2. Hint at physical experience
3. Re-purpose relevant web/mobile concepts