Key ground rules are:
- Icons without labels are worse than labels alone.
- Buttons that doesn’t look like buttons can be missinterpreted.
- Each screen should contain one primary action. No more.
- Design for thumbs. Place main menu items, frequently-used controls and common actions within easy thumb reach.
- Design for fat fingers. Controls should be a minimum of 48px.
- Minimize the need to type.
UI design mantras
- design is design is design
- stop solving other people’s problems
- form doesn’t follow function
- on small screens, less is more
- balance creates visual order + signals relationships
- visual rhythm speeds comprehension and use
- good design is held together by harmony
- dominance directs user focus
- align everything with everything else
- group + organize related content with proximity
Seven rules for effective UI design on small screens
If it looks too complex, we assume it’s hard to use but this isn’t about simplicity for simplicity’s sake. It’s a about making clear, immediate impact by including only what’s useful for the task at hand.
Icons without labels are worse than labels alone
If an opportunity to interact isn’t visible, people assume it isn’t available.
Don’t go too far
Common UI elements (buttons, menus, common actions) are a very significant part of what makes a site or app useful. This is often minimized in favor of increasing valuable content onscreen. This can be dangerous as a button that doesn’t look like a button can be missinterpreted by the users and be harder to find.
Focus on context of use
When are people using the app/site? When they’re bored? stressed? busy? lost?
The available features and functions and the way they work should fit the situation
Simplify, simplify, simplify
Each screen should contain one primary action. No more. That means every screen should provide something useful, meaningul and valuable.
This makes the product easier to learn, easier to use and easier for you to add to later. Abandon the idea that the number of screens or steps matters. It doesn’t.
Design for thumbs
The vast majority of people rely on one or both thumbs to interact on their phones. Place main menu items, frequently-used controls and common actions within easy thumb reach.
Design for fat fingers
Controls and their associated tap targets should be a minimum of 9mm (48px) in diameter. Anything smaller than that makes it hard to tap easily and accurately.
Provide ample space between targets so users don’t accidentally tap the wront target.
Minimize the need to type
Even in the best of circumstances, typing on a phone is a pain. It’s a slow process, almost always filled with errors so the less it’s needed, the better.
Keep forms short and simple; be ruthless about removing unnecessary fields. Use auto-complete and personalized data where possible.