Responsive Web Design

Responsive Web design is a combination of fluid grids and images with media queries to change layout based on the size of a device viewport. It uses feature detection (mostly on the client) to determine available device capabilities and adapt accordingly. With responsive Web design one code-base, deployment, and URL provides you with access to many devices including future ones you haven’t encountered yet. But optimizing images, video, third party widgets and more using client-only solutions can be challenging.

Luke Wroblewski

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

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

The mobile content ‘paradox’

How can people simultaneously want to kill time and get angry when their time is wasted? A conundrum to be teased apart. The solution to the puzzle lies in recognizing that even relaxation is purposeful behavior: according to information foraging theory, users seek to maximize their cost/benefit ratio. That is, people want more thrills and less interaction overhead.

(…)

Two solutions:

• Cut the fluff. In particular, ditch the blah-blah verbiage.
• Defer background material to secondary screens that are shown only to users who explicitly ask for more info. Such additional content supports people who have extra time on their hands or an exceptional interest in the topic.

From Jakob Nielsen: Mobile Content: If in Doubt, Leave It Out

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

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