User interface best practices

• 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

Gestures in iOS

• 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

Organising content for iphone/ipad

1. Flat pages

Pros

• 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

Cons

• 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

Pros

• One-tap access to all of the app’s main features
• Clearly labeled menu advertises primary features, shows current location

Cons

• 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

Pros

• 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

Cons

• 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

iPhone and the physical world

Everything on the iphone responds to the familiar rules that apply to the everyday physical world: inertia, momentum, friction, elasticity, follow through.

Clark 2010, p.56

iPhone environment of scarcity

• Limited attention
• Limited time
• Limites pixels
• Limited device memory
• Limited processing power

Clark 2010, p.48

(Can be added:)

• No plug-ins
• Limited context

Last 12 Months: Show me latest pictures first!

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?

iPhone / iPad Gestures

• 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

Iphone app essentials

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