ruk·si

🧑‍🎨 Design
📱 Mobile

Updated at 2013-11-13 05:56

These notes focus on smartphone and tablet design guidelines. Most guidelines can be applied to all Android, iOS and Windows Phone devices but there are also exclusive sections for those.

Take advantage of the whole screen. Especially always the full width of the device. Only show what the user needs to know. Hide everything irrelevant to the task at hand.

Cache data locally for offline access. Connectivity may be going on and off, but user would like to use the application. Consider if you can cache data even for a small session.

Spotify mobile application caches whole next song if left to pause.
When user has no connectivity, he will only notice it when the next song starts.

Delay registration as much as possible. People like to try out an app before giving away personal information.

Avoid blocking interaction. Prefer showing error message as the content and do not require user to provide any input on the error. Only interrupt the user if it is important and requires an action.

# bad
iTunes: show alert box with content "Cannot connect to the iTunes"
        and a button "OK"

# good
iTunes: content has text "Cannot connect to the iTunes".
        user can shut down the app if they want.
        Show an alert if user still ties to use the feature.

Launch the application in a supported orientation. Regardless of the current device orientation. Allow 180 degree rotations for each supported orientation.

Respect the system settings. If the device is set to silent, your app should also stay silent.

Avoid ongoing animations. Same as with color, if you emphasize everything, nothing is emphasized. Show loading indicator, transition animations and provide feedback on interaction, but avoid anything that would play continuously.

Prefer standard gestures. All non-standard gestures require visual hints.

  • Single Finger Tap: mouse left click, selecting.
  • Long Single Finger Press: mouse right click, menu, drag-and-drop.
  • Single Finger Double Tap: zoom in to a predefined level.
  • Pinch Close: zoom out, less precise info.
  • Pinch Spread: zoom in, more precise info.
  • Vertical Swipe (slow drag on screen): mouse scroll.
  • Vertical Flick (rapid drag on screen): mouse scroll.
  • Horizontal Swipe (slow drag on screen): next or previous view.
  • Horizontal Flick (rapid drag on screen): next or previous view.
  • Shake: undo or retry.

Use non-standard gestures only as shortcuts. There should be alternative way to do those tasks.

Button placement should reflect physical device usage. Consider how people use the mobile device e.g. place most frequently used actions to thumb hot zone for single handed device resolutions. Tablet browsing is done by index finger, but screen size is limited, so you can use either offer desktop or single hand device version.

Android

Android has had less standards about what front-side hardware buttons the devices have. Hardware button placement is always at the side which is at the bottom of the device when in portrait orientation. But you can always expect to find Back and Home.

New Androids with no hardware keys:
Back is 1st from the left.
Home is 2nd from the left.
Recents is 3rd from the left.

HTC Sensation:
Home is 1st from the left.
Settings is 2nd from the left.
Back is 3rd from the left
Search is 4th from the left.

Use color primarily only for emphasis. Consider using your brand color on action bar as well as on emphasis.

Use Roboto typeface. Font size of 12sp, 14sp, 18sp or 22sp.

All elements should be made from 48 dp boxes. All spacing between content should be 8 dp. That way the layout will look uniform and easy to tap the elements. More about screen pixel densities in responsive design.

Icons:

  • Launcher Icon: (ic_launcher) 48x48 dp. 512x512 px on Google Play. Style should show some form of depth as if it was watched from above.
  • Action Bar Icon: (ic_menu) 32x32 dp, where the icon itself should be in a 24x24 dp square. Accepted colors are #333333, enabled 60% and disabled 30% or #FFFFFF, enabled 80% and disabled 30%.
  • Small Icon: (ic_dialog, ic_tab) 16x16 dp, where the icon itself should be in a 12x12dp square.
  • Notification Icon (ic_stat_notify) should be 24x24 dp, where the icon itself should be in a 22x22 dp square. Should be same style as the launcher icon.

Android device and application elements:

  • System Bar: Located at the top of the device. Shows notifications and device status.
  • Action Bar: Located just below the system bar and contain name of the current view. Usually also contains extra actions on top right with last being "other" actions which opens a dropdown of actions. Action bar may have a "Up" button that works much like "Back" button but follows the application hierarchy, not the path user took. Up button is usually the launcher icon with <. If the application is at the top most level, you may replace Up button with a button to open navigation drawer. Action bar may also contain contextual information e.g. how many items are currently selected in the place of the view name.
  • Navigation Drawer: Drawer slides open from the left side of the screen and contains main navigation options. Opened by pressing top left corner or sliding finger from the left side of the screen to the middle. Alternative is using tabs as top bar if you have only a few options, do not use them together both as top level navigation. You may use fixed tabs to show filtering under the action bar. Navigation drawer should be between 240 - 320 dp.
  • Bottom Bar: Optional element located at the bottom of the screen. It can be used as a list of most frequently used actions or such as filtering. Note that a bottom bar should never contain tabs to switch between views.
  • Content Area: The rest of the screen.

iOS 7

The only front-side hardware button for iOS is Home.

Use color to highlight interactivity. Color may also give app a consistent visual theme. Do not use the same color on non-interactive elements.

Keep your text readable. Use single font throughout your app. Text should never be smaller than 22 pt. Even in extra-small sizes. Default is 34 pt (large).

All elements should be made from 44 pt boxes. But most user interface elements are borderless.

Simplicity over performance. Prefer giving user only one path to each view.

iOS device and application elements:

  • Status Bar: Located at the top of the screen. Displays notifications and device status.
  • Navigation Bar: Located at the top. Shows current location in hierarchy and has a back button. Name of the current view is at the middle. Back button has a label with the name of the destination view. May possibly have third button on the right edge, but nothing more.
  • Segmented Control: Located under the navigation bar. Shows different categories or perspectives of the content. Segmented control is not for navigation. If you use segmented control, do not show name of the current view or a third button on the navigation bar.
  • Tab Bar: Located at the bottom. Used to show equal categories of content or functionality, like switching between different views.
  • Toolbar: Located above the tab bar or in its place.. Shows controls that act on the content of the current view. Use icons if you need more than three actions.
  • Page Control: Located above the toolbar or tab bar and highlights pagination. Contains a box with circles inside of it, one of them highlighted
  • Content: The rest of the screen.

If you have two buttons, most likely button should be on the right. But if the most likely button is a destructive action, it should be left.

[Cancel]       [Send]
[Delete]       [Don't Delete]

Keep modal tasks simple, short and focused. Because user is pulled away from the context. Always provide a way to exit without commitment.

Popover: Like a modal window that points to the place it originated from. Should be closable by tapping the same location. Translucent background that blurs the content behind it. Used to provide additional actions on the tapped element.

App Icon: App icon should be unique, uncluttered, engaging and memorable. Note that the corners are rounded on all devices.

iPhone:
60x60 px       (AppnameIconPhone)
120x120 px     (AppnameIconPhone@2x)

iPad:
76x76 px       (AppnameIconPad)
152x152 px     (AppnameIconPad@2x)

Both Devices, Spotlight Search Result Icon:
40x40 px       (AppnameIconSpotlight, add CFBundleIcons key)
80x80 px       (AppnameIconSpotlight@2x)

Both Devices, Settings Icon:
29x29 px       (AppnameIconSettings, add CFBundleIcons key)
58x58 px       (AppnameIconSettings@2x)

App Store:
512x512 px     (iTunesArtwork)
1024x1024 px   (iTunesArtwork@2x)

Web Clip Icon on iPhone:
60x60 px       (AppnameWebClipPhone)
120x120 px     (AppnameWebClipPhone@2x)

Web Clip Icon on iPad
76x76 px       (AppnameWebClipPad)
152x152 px     (AppnameWebClipPad@2x)

Bar Icon: Bar icons used in tab bars, toolbars and navigation bars. Use the default iOS 7 set and extend it when required. Consider using short text in place of a icon but try not to mix text and icons on a same bar.

Tab Bar:
25x25 px    (TabIconIconname)
50x50 px    (TabIconIconname@2x)

Toolbar/Navigation Bar:
22x22 px    (ActionIconIconname)
44x44 px    (ActionIconIconname@2x)

Windows Phone

All Window Phones have at least three front-side hardware buttons. They are called steering hardware buttons.

  • Back: Takes you one view back to where you came from, if the app in question does not overwrite the functionality. Press and hold to open the App switcher, showing all open applications.
  • Start: Takes you to the Start screen. Press and hold to open the Speech app.
  • Search: Takes you to search engine.

Windows Phone device and application elements:

  • Status Bar: Located at the top edge of the screen. Contains notifications and device status.
  • App Bar: Located on the same edge of the display as the steering hardware buttons, extending to the full device width. Up to four common functions as icons. Always 72 pixels high if the App Bar Menu is not open.
  • App Bar Menu: Located inside the App Bar. Opened by tapping dots-icon. Tapping App Space or Back button will close the menu. Menu can have five items tops or otherwise it requires scrolling.
  • App Space: The rest of the screen.

App Bar Icons: Size should be 48x48 px, where the icon itself should fit on 26x26 px area. So it does not overlap with the circle drawn on top of it by the OS. Icons should have white foreground on a transparent background using an alpha channel.

Understand Tiles. On Windows Phone, applications are presented as Tiles on the start screen. There are three sizes of tiles: small, medium and wide. All apps start at medium size which is resized to make the small size. Supporting wide tile size is optional and wide tiles should be used only if app has at least weekly notifications. Number-only notification, like SMS count, can easily be presented in small and medium tiles.

Understand control schemes. Windows Phones have two main control schemes, panorama and pivot. Pivot is better if views are more related to each other e.g. filtering views for the same content.

  • Panorama control: Multiple subviews might be placed on a single main view and the subviews can be switched by swiping left or right. Usually has parallax background effect where the background appears to be further away than the user interface. User cannot not see the names of previous and next views. User can see a 24 pixel preview of the next view.
  • Pivot control: Multiple views are placed side by side and the views can be switched by swiping or by tapping the name of another view. User can see the names of previous and next views on the top. User cannot see a preview of the next view.

Sources