Mobile usability

Mobile sites have higher measured usability than desktop sites when used on a phone, but mobile apps score even higher.

Jakob Nielsen

Designing for speed

• Mobile experiences fill the gaps while we wait. Nobody wants to wait while they wait. Mobile needs to be fast.
• To make things on mobile feel really fast you need to invest in back-end and front-end design –in design and engineering. Design can be a speed feature.
• Upload is what got people most excited about the speed of Instagram early on. Most apps upload only after they have all the info they need. Instagram uploads right away while you fill in the rest of the information about your photo like captions and location. This is a non-optimal engineering solution but it makes the app feel much faster. It’s worth it even if you throw the photo away.

…

Mike Krieger of Instagram at the Warm Gun, quoted by L Wroblewslki

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

The ‘one site fits all’ debate

(peaking about ‘mobile’ users:

‘While we have to design for the “I’m microtasking” mindset, optimizing for quick dashes of activity, we also have to accommodate the “I’m bored” mindset, allowing and encouraging leisurely strolls through our apps and data.’

Josh Clark: Responsive Web Design or Separate Mobile Site? Eh. It Depends.

Apps vs Web sites

• Apps need an appstore, websites do not.
• Apps can make money pretty quickly, websites not so.
• Apps have great UX, websites not so.
• Apps have to be downloaded, websites work right away.
• Apps need to be updated manually, websites can be updates as much as you want without having to bug the user.
• Apps are about doing things, websites are about reference.
• Apps have great word-of-mouth, websites not so.
• Apps can speak with each other, websites not.
• Developing an app is a pain, building a website is not; in fact, prototyping a mobile website is a breeze.

Josh Clark: Mobile web vs Native Apps summarised by Johnny Holland

Tab bar

‘As these examples illustrate, tab-bar navigation is ideal for letting the user choose among modes of operation tailored to specific features, information, or even states of mind (“I can’t think of a restaurant, pick one for me”). A tab bar summarizes what your app does; it’s a series of miniature advertisements for how the app can help. Tab bars make for efficient navigation, since they take people directly to specfic screens to perform specific actions, but they require careful planning by the designer. The tab bar should offer a set of options that match up neatly to specific and common missions your audience has in mind when they launch your app.’

Clark 2010, p.108

Slight confusion of tab bar and toolbar!

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 tabZone and pointed design

‘For a comfortable ergonomic experience, you should place primary tap targets in this (side of the screen opposite thumb) thumb-thumping hot zone. (…) This tap zone gives you hints about how to organize the visual hierarchy of tap targets.’
Clark 2010 p.59

Pointed design

• Place important info at the top and sink controls to the bottom
• Design to a 44 pixels rhythm
• Where appropriate, create at-a-glance displays that avoid scrolling
• Whittle onscreen elements to the bare minimum
• Push advanced tools and controls to the background

Clark 2010 p. 73

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