“That’s the fundamental gesture in this technology. Sliding a finger along a flat surface. There is almost nothing in the natural world that we manipulate in this way.”
- Be welcoming
- Know thy user
- Let the content shine
- Make selections fast and error-free
- Provide appropriate feedback
- Minimize the pain
Ginsburg 2011: p. 192
- Tap – To select a control or item (analogous to single mouse click)
- Drag – To scroll or pan (controlled; any direction; slow speed)
- Flick – To scroll or pan quickly (less controlled; directional; faster speed
- Swipe – Used in a table-view row to reveal the Delete button
- Double Tap – To zoom in and center a block of content or an image; To zoom out (if already zoomed in)
- Pinch Open – To zoom in
- Pinch Close – To zoom out
- Touch and Hold – In editable text, to display a magnified view for cursor positioning; also used to cut/copy/paste, and select text.
Ginsburg 2011, p.22
1. Flat pages
- Ideal for quick, focused content; suited for casual browsing of screens
- Adapts to variable number of screens with customized content Easy to use; navigation relies on familiar swipe gesture
- limited interface chrome; page control requires very little space, leaving lots of room for the content itself
- Must swipe throuoh thr star l onr page at a time; can’t jump to any screen other than immediate neighbors
- Doesn’t scale well to larqe number of screens; page indicator limited to 20 dots
- Doesn’t handle scrolling well, not good for lengthy content
- Users may overlook the small page indicator and miss app’s additional screens
Clark 2010, p.106
2. Tab Bar
- One-tap access to all of the app’s main features
- Clearly labeled menu advertises primary features, shows current location
- Only five tabs can be displayed at once
- Absorbs significant screen space on all (or most) screens of the app
Clark 2010, p.110
3. Tree structure
- Scales well for large numbers of categories, features, and items
- Familiar outline organization is easily understood
- Direct interaction with content is intuitive and limits interface chrome
- List-based display adapts well for user-customized categories
- Primary features are listed only on top-level screen, unlike tab bar’s always-on display
- Inefficient switching amonq main features or categories; you have to surface to top level before drilling down again
Clark 2010, p.114
I only sync pictures from the ‘Last 12 Months’ folder to my iDevices. Xtremely annoying: when you want to see the very latest pictures, you got to drag/scroll thousands of pictures (the harvest of a year). Can we please get a reverse sort order button?
- Tap Press or select a control or item (analogous to a singe mouse click)
- Drag To scroll or pan
- Flick To scroll or pan quickly
- Swipe In a table-view row, to reveal the Delete button
- Pinch open To zoom in
- Pinch close To zoom out
- Touch and hold In editable text, to display a magnified view for cursor positioning
- Shake To initiate an undo or redo action
From Apple iOS Human Interface Guidelines
Kill the clutter:
- Embrace the constraints of a small screen! Zero in on doing one or two functions in an amazingly focused way.
- Strip out features that are not absolutely essential to the functioning of the app. Less is more.
- Break the interface up into logical screens and don’t try to do too much on one screen. Though minimizing the number of taps required for a function is always optimal, sometimes functions are easier to understand if they are split up into multiple screens.
- Only display UI elements that are essential for a given screen to function.
- Padding and whitespace are your best friends.
Design for context. Though contexts vary, there are some general mobile design principles that are often ignored:
- Design big, bold, and minimal. Folks generally aren’t paying full attention to the interface and are often using it while doing something else. They don’t see the interface, they see a blur. Make the important elements pop.
- Beef up the font size. Don’t let the simulator deceive you; fonts look much smaller on the actual device. Be careful not to limit testing to retina-display devices like the iPhone 4. Smaller fonts look great on retina displays but absolutely fail on older devices.
- Do one thing really well and trash the other features. If you’re porting a desktop app or website to mobile, don’t just optimize for mobile; rethink the entire experience.
- Our fingers are very big and imprecise so make targets big.
- When designing forms, don’t forget the digital keyboard is going to take up about half the screen when the user taps on the first field.
From Jeremy Olson: 10 Surefire Ways to Screw Up Your iPhone App
- 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.
From UX Magazine
Just watched the video that introduces to omnigraffle on the iPad. Not really sure whether I’d actually want to use omnigraffle on the iPad, but the video illustrates how sophisticated and yet fairly easy to use applications on the iPad can be. Quite impressive.
Differences between ipad and iphone
- The display is much larger; 1024×768 pixels. Apps with more demanding presentation requirements will be at home here.
- The virtual keyboard is larger, and external physical keyboards are supported via Bluetooth or the dock. Apps which focus on typing are now much more feasible.
- The iPhone supports multi-touch, but only the iPad can credibly claim to support two hands. We’ll talk more about this later.
Two-pane and three-pane interfaces are once again worthy of consideration on this class of device.
- Master-Detail is feasible and acceptable on iPad.
- In landscape, both Master and Detail are visible.
- In portrait, the Master is shown in a transient pop-over.
Editing/viewing: Look like a viewer, and behave like an editor
- Hide configuration UI until needed.
- Edit object properties in place.
- Attach the editing UI to the object. Show/hide/move as necessary
- Inspectors should present context-relevant UI.
- Hide controls which don’t apply to the selection or focus.
- Modes (do one thin at a time) are preferable to clutter; removing a feature might be preferable to adding a mode for it;
- Offer only the most-used/needed features. If in any doubt, remove a feature.
- Discard optional/niche or highly configurable functionality.
- Dual-handed input is acceptable.
- Be usable with one hand. Don’t require two hands for essential features.
- But don’t be afraid to offer time-saving, discoverable dual-handed functionality.
Extracted from Matt Legend Gennel: iPad application design