“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