Overview

The purpose of this guide is to aid designers through the mobile web and application experience. This is a high-level primer on the best practices. A developer-specific guideline is available.

Key Points

CONTRAST

  • Strive for color contrast ratio of 4.5:1, especially icons, active / inactive states

  • Minimum Font sizes: 16px for field inputs & body text; 14px for secondary, such as captions, labels

  • Touch Targets should be 9 mm x 9 mm at minimum.

  • Provide at least 8dp spacing around touch targets.

  • Use correct semantic markup (BE a <button> not a sneaky <div>)

  • Position field labels above field, not only inside.

  • Consider using in-line validation and input masks.

  • Use input validation for errors

  • Provide descriptive error messages

STATUS MESSAGES & NOTIFICATIONS

  • Use a combination of shapes, color, shading, text for Status Messages

  • Include App Tutorials for first-timers, or those who have Short-Term Memory | NAVIGATION

  • Include “tips” and/or progressive disclosure on using app | NAVIGATION

  • Provide Help links for unusual inputs. E.g., “what’s this?”

  • Use autocomplete, auto-fills when possible.