Touch gestures

“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.”

Bret Victor: A brief rant on The Future of Interaction Design

Advertisements

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 / 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