Designing Interfaces: Mobile Interfaces

My notes from the book: designing interfaces.md

Challenges and opportunities of mobile design

Tiny screen sizes: strip the design down to its essence—take away all the extra stuff.

Touch small targets: Make important targets at least 48 x 48 dp (9mm) for Android & 44pt x 44pt for Apple iOS, and put space between them.

Typing text on touch screen or keypad is difficult. You should design interaction paths through your site or tool in such a way that typing is unnecessary or very limited. Use “Auto Completion” in text fields & prefill form fields.

People use phones in all kinds of places. Think about the ambient light differences—gray text on gray background might not work well in direct sun. Ambient noise differences—some users won’t hear the device at all, others might find sudden noises jarring and inappropriate. Think about motion—tiny text is difficult to read when device is moving around; tiny hit target is difficult to use on a rocking bus; “fat fingers” make mistakes easily.

Mobile devices can locate where they’re being used. → Design for location-related scenarios, better anticipate users’ needs.

Limited attention: Users are distracted. They’ll be doing other things while looking at your design. → Make task sequences easy, quick, and reentrant. Make everything self-explanatory.

Social influences: Lots of mobile users will be engaging in conversations or other social situations. They may show people what’s on the screen. People might look over their shoulder. They might suddenly turn off the sound if it’s not socially acceptable or might turn it up to let others hear something. Does your design behave well in these situations? Can your design support graceful social interaction?

How to approach a mobile design

1. What do users in a mobile context actually need?

   Design for use contexts such as these:

   • “I need to know this fact right now, quickly.” • “I have a few minutes to spare, so entertain me.” • “Connect me socially.” • “If there’s something I need to know right now, tell me.” • “What’s relevant to the place I’m in right now?”

2. Strip it down to its essence

   Take away the extra content, eye-catching features, sidebars, pull quotes, ads, images, site maps, social links, etc. Focus tightly on the few tasks that mobile users need, use minimal branding.

   On Home screen or 1st screen, relevant content appears high on the screen.

3. Use mobile device’s hardware: location, camera, voice integration, gestural input, haptic feedback, multitask, etc.

4. Linearize your content: Accept that your content will end up being laid out vertically.

5. Optimize common interaction sequences:

   • Eliminate/reduce typing to as few characters as possible
   • Use as few screen loads as possible. Don’t inflate screens with unnecessary bytesthat make download times slow.
   • Reduce scrolling & sideways dragging, except where it eliminates screen loads & typing. One long vertical screen > many small screens.
   • Reduce the number of taps to reach the desired info or accomplish a task.

The patterns

Vertical Stack

• For text-based content & forms
• Useful content—from the user’s perspective, that is—should show up in the first 100 pixels (or less) of the Vertical Stack. This top part of the screen is precious real estate.
• Put form labels above their controls, not next to them, to save horizontal space.
• Put buttons side by side only if you’re really sure their total width will never be wider than the visible screen. If the buttons contain long text that might be subject to localization or font enlargements, forget it.
• Thumbnail images can fit beside text fairly easily, and it’s common to do this in lists of articles, contacts, books, and so on. Make sure the design degrades well when the screen width is reduced to 128 pixels (or minimum).

Filmstrip

• Users swipe back n forth to view content one screen at a time.
• Used when screen of content are conceptually parallel, e.g the weather in different cities. Users won’t mind swiping and going through several because they’re all potentially interesting — this pattern encourages browsing and serendipity.
• Cons: Doesn’t scale well; you can’t use too many top-level screens as users might be irritated at being forced to swipe too many times. Lack of transparency; new users can’t easily see swiping is how they get from one screen to another.
• This pattern can sometimes be a viable alternative to other navigation schemes for mobile apps, such as toolbars, tabs, or full-screen menus.

Touch Tools

Show certain tools in response to a touch or key press. Functions appear in small, dynamic overlays atop the content.

E.g.

• When touching a video, the play/pause buttons appear, with an overlay.
• When touching a note, editing tools appear.

Used when designing an immersive or full-screen experience, such as videos, photos, games, maps, or books. Users will sometimes need controls—navigation tools, media player tools, information about the content, etc. The tools require significant space but are needed only sometimes.

To avoid accidentally bringing up the tools, show Touch Tools only when user touches a certain region of the screen.

Remove the tools after a few seconds of nonuse, or immediately if the user taps the screen outside the bounds of the tools.

Bottom Navigation

Low-priority navigation links are put in the footer.

Create a set of vertically arranged menu items on the bottom of the screen. Make them easy to tap with a finger on touch screens—stretch them across the full width of the mobile screen, if necessary, and make the text large and readable.

Collections and Cards

Collections are series of thumbnail photos that serve as a list of items from which a user can choose. Cards are similar but they contain content and functionality.

Reading conditions on mobile devices are rarely ideal. By adding colorful images, you can improve the visual differentiation among items, which helps people scan and parse the list quickly.

Don’t be afraid to use bright or saturated colors. You probably wouldn’t design so much visual stimulation in a desktop context, but in a mobile context, it works. Even if the colors seem garish, don’t worry—small screens can handle strong colors better than large screens can.

Infinite List

You need to show long lists of email messages, search results, an archive of articles or blog posts, or anything else that is effectively “bottomless.”

The user never needs to context-shift by going to a new screen to see new items.

Truncate the list at a reasonable length (item size, download time, user’s goal). At the bottom, put a load button. Let the user know how many more will be loaded.

Alternatively, you could use no button at all. After the user has loaded and can view the first chunk of items, silently start loading the next chunk. (lazy loading)

Generous Borders

Put large margins and whitespace around buttons, links, and tappable controls.

Consider: large fingers, people who don’t have good control over their fingertips, people use mobile devices in bad light, moving vehicles, little attention.

How big? Depends on device and resolution. Some dimensions for reference:

• 48 x 48 dp (9mm) for Android devices
• 44 pt x 44 pt for Apple iOS

Loading or Progress Indicators

Can make a slow download bearable and even create a brand-building moment.

Richly Connected Apps

Use the features that come for “free” with your mobile device: direct links to other apps, such as the camera, the phone dialer, map, or browser; and prefilling credit card passwords and address.

Consider all the ways that data in your app can connect directly to other mobile functions:

• Phone numbers connect to the dialer
• Addresses connect to the map, or to the contacts app
• Dates connect to the calendar
• Email addresses connect to the email app
• Hyperlinks connect to the browser
• Music and videos connect to media players