6 Essential Rules of App Design
Learn the fundamental rules to designing good, user-friendly apps.
What’s the difference between good and bad app design? In most cases, it's the user experience. Users expect apps to solve problems quickly and easily, and they expect a fun, intuitive experience along the way. A good app meets those needs.
Follow these fundamental rules of app design to master the art of great user experience.
First rule of app design: Simplify common operations
Well-designed products help people achieve their goals with minimum effort. To help make that happen, product designers must consider user journeys holistically—identify common user operations, visualize user flows, identify areas of friction, and then minimize that friction.
Where you can minimize friction:
Break down complex tasks into easily manageable chunks
Brains only have so much processing power. And an app can easily overwhelm users with too much information at once! This is especially true for mobile design because small screens show only a fraction of the information you’d see on a desktop at one time.
Some operations require a series of actions, but you can make them easier by breaking each action into smaller steps. Smaller steps mean more focused (and more successful) users.
Just consider the checkout experience. You could make it all one big, overwhelming step, but it’s easier and more intuitive to break it down into 4 simpler steps instead: product cart review, shipping information, billing information, and order confirmation.
Design predictable navigation
Navigation is the cornerstone of app design, and it’s your job to make it intuitive. Allow your users to navigate from A to Z quickly and they’ll repay you by sticking around. Of course, you need to create a solid information architecture in order to build that solid navigation.
Do your research. Find out how users access information and validate your findings with techniques like card sorting and tree testing. That will help you understand important mental models (how someone would expect a product to work) and organize your navigation accordingly.
Card sorting technique
When you start digging into the actual menu design, use the 3-click rule to keep things simple. Anyone should be able to find what they're looking for in just three clicks. Keep your navigation hierarchy to fewer than three levels and you’ll build a much smoother experience.
Three navigation levels
Finally, keep your navigation visible. Hidden navigation patterns like hamburger menus have a negative impact on discoverability because they hide important context (like current location and possible directions).
Hamburger navigation in a mobile app
Simplify individual screens
Strong app design prioritizes clarity for both aesthetics and usability. Striking that balance requires that you do two things:
- Prioritize information. Show the most important info up front and allow users to reveal secondary information with things like progressive disclosure. For example, you can display limited preview text with a “show more” link to reveal helpful context.
- Take out all extra functional elements. Every additional text section or functional control added to the page makes the UI harder for users. Make it easy for your users by leaving only the pieces that add value or help them achieve their goals.
Use familiar design patterns
Stop trying to reinvent the wheel by introducing new and unexpected design solutions. Your goal isn’t to make something novel. You want to create something usable.
Be careful not to introduce more friction with something unfamiliar—all users have certain expectations of how something should work. Those expectations are based on previous interactions with other products. Use that to your advantage. Familiar patterns in mobile app design help users understand how your product works.
Stay away from using gestures as a primary navigation pattern, too. They’re hidden and can be hard to find and memorize. Our universal gestures—swipe, pinch, and tap—are the exceptions, but they work best as supportive mechanisms. Not as a replacement for primary navigation patterns.
Text plays a vital role in user experience, but too often we forget our audience and overthink it. Use conversational language and get rid of jargon. Clear, concise copy helps people of all abilities use your app without the need for technical terminology or culturally specific idioms.
For example, try using a simple “Great job!” instead of “You just killed two birds with one stone!” in a success message. The latter might be unclear for non-native English speakers.
Don’t design dead-end states
Dead-end states block users from moving forward. Consider an error screen that tells users they face unexpected conditions and cannot do anything about it. What are they supposed to do next?
"Something went wrong" is one of the most annoying things on mobile
Great product design helps users move forward rather than blocking their journey. Offer contextual next steps to help them solve their problem and the app experience will feel much smoother.
Second rule of app design: Design clear visual hierarchy on individual screens
Good visual hierarchy in your app design acts as an invisible hand to guide users and focus their attention on important objects.
Use visual weight to convey importance in app design
Visual weight attracts the eye. The more weight an object has on any screen, the more attention it will get. Direct user attention towards elements like primary call-to-action buttons to get more engagement in the right places. Three things to consider when giving weight to an element:
- Size. Larger objects attract more attention than smaller objects.
- Color contrast. High contrast helps highlight more important elements, and lower contrast can help deprioritize others.
- Whitespace. Adding whitespace around an element is like shining a spotlight on it. Whitespace adds clarity and focus.
MailChimp relies on size, color contrast and whitespace to direct user attention towards the “Pick A Plan” call to action button.
Prioritizing each of these might feel overwhelming at first, but remember clarity is key. Try starting with a template in Framer to keep it simple.
Reinforce app design with F-shape and Z-shape patterns
People don't read—they scan. They scan web pages and phone screens in patterns, they F-shape and Z-shape patterns being the most common. The NNGroup study shares more on the F-shape pattern, which works well for information-rich resources like news websites and blogs.
F-shape pattern is good for content-heavy screens. Image by Medium
A Z-pattern design traces the route from the top left corner of the screen to the bottom right corner, forming an imaginary "Z" shape. Putting key information in fixation points (1,2,3 and 4) helps increase chances that users see the most important parts of your message. Use this pattern for pages with less information than you would an F-shape page.
A Z-shape pattern is good for screens that balance visuals with text. Image by Moma
Third rule of app design: Strive for consistency
Clear, consistent app design helps new users more easily adopt and interact with your product over time.
Rely on platform guidelines when designing your product
Platform guidelines offer necessary guardrails to support quick adoption with familiar patterns. iOS app designers should use Apple’s Human Interface Guidelines, and you should reference Google’s Material Design Guidelines if you’re designing for Android.
Be sure you stick to the platform for which you’re designing, and don’t carry over UI elements from other platforms. Fonts, icons, and functional elements like buttons and switches should feel native.
Strive for functional consistency in your app design
Interactive elements should look and work similarly across an app. Consistency saves your users from having to learn new patterns with every interaction. When they know what to expect and how to interact, they’ll more easily achieve their goals.
Fourth rule of app design: Minimize the need of typing
Almost every app requires user input, so typing is an integral part of most products. Sadly, though, it’s often the least enjoyable part of the UX due to its high interaction cost and opportunity for errors.
Here are a few key tips to help you minimize those opportunities for error in your mobile app design:
Get rid of all optional fiends
Data comes with an opportunity cost. It’s no secret that longer forms come with lower conversion rates. Ask users only for data you know you’ll use today or in the near future.
When you ask for unnecessary data (for example, if a corporate networking app were asking for gender, birthday, and home address), you’re not only hurting your conversion rate, you’re also opening yourself up to potential future privacy concerns. Consider whether that extra optional field really merits that risk.
Prefill as much data as possible
Don’t ask users to provide data that you already have. For example, when you have access to user geolocation data, you can prefill the user's current address in the shipping/billing form. Tools like Place Autocomplete Address Form can be especially valuable here.
Provide input masks
If you’re expecting data in a particular format—like a telephone number in a specific country—input masks will help you minimize mistakes by restricting user input. Beyond just user function, you’ll also get standardized, usable data to make your job easier.
Phone formatting in placeholder text. Image by https://github.com/jackocnr/intl-tel-input
Validate input dynamically
Use inline validation to help users spot errors and fix them prior to clicking the 'Submit’ button. Meaningful error messages help users understand the root cause of the problem and fix it as fast as possible.
Inline validation for email address. Image by Paul Macgregor
Fifth rule of app design: Design accessible interfaces
Consider that you’ll likely support a diverse user base, and design accordingly. Anyone should be able to interact with your app, no matter whether they are disabled and in need of extra assistance or simply benefitting from thoughtful design.
Effective app design empowers users of all abilities and people using products in real-life situations.
Design for good readability and legibility
Approximately 12 million people 40 years and older in the United States have vision impairment. For these users, too-small text may make the difference between adoption and abandonment. If your users can’t read the copy in your design, they’ll likely leave.
Good readability and legibility start with font size. Start with 16px for text-heavy pages; at that size, users with low vision won't need to zoom in to read.
Roboto font family. Image by Material Design
Last but not least, take color contrast into account. WCAG 2.0 recommends a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. You can use the WebAIM tool to check the contrast ratio.
All too often, an app that looks great on a designer's monitor looks disappointing by comparison on a mobile screen. Look at your designs on an actual mobile-sized screen! You can use Framer to preview your app design on a mobile device in the browser and avoid the heartache of designing something that isn’t functional in practice.
Optimize your app design for color-blind users
Almost 5% of the global population suffers from color-blindness. That’s 1 in 200 women and 1 in just 12 men. Designing for this group of users allows them to navigate without friction.
W3C’s guidelines state that color shouldn’t be used as the only visual means of conveying information. For example, error messages should use visual elements like icons and text as indicators rather than relying on the color red to communicate an error. state that color shouldn’t be used as the only visual means of conveying information. When you design an error message, do not rely on red color to communicate the error. Use other visual elements such as icons and text messages.
Using a visual indicator (icon) along with an error message makes the error state accessible. Image by Material Design
Give users the option to turn off animated effects in an app design
People who suffer from motion sickness (a sensation of dizziness caused by fast-moving objects) should be able to turn off animated effects in your product. Offer this option in your app’s accessibility preferences.
Sixth rule of app design: Make your app work fast
App performance has a direct impact on user experience. Generally, the faster your app, the better the experience your users will have. We live in a fast-paced world and almost 50% of users expect a page to load in 2 seconds or less.
But no matter how fast you make an app, sometimes things don’t go as planned. A slow response could be caused by a slow internet connection (true for mobile design), or an operation itself might require more time to complete.
In those cases, visual distraction can turn user attention away from the time they’ve spent waiting.
Here are a few favorite design solutions for visual distraction effects:
Use animated loading indicators
There are two groups of loading indicators: the infinite loop indicator and the progress bar indicator. For operations that take up to 10 seconds, use an infinite loop indicator. Longer operations (more than 10 seconds) often call for a progress bar, but the choice is up to you.
Design skeleton screens
Skeleton screens, also known as temporary information containers, are essentially a blank version of a page into which information is gradually loaded. A skeleton screen appears the moment your app starts loading content and gives users the impression that the app is responsive. They’re best used for relatively quick operations (3-5 seconds).
Skeleton screen used by Linkedin mobile app
Good app design is good business
Now that you’ve learned the rules of great app design and set a foundation for building usable, beautiful apps, it's up to you to create something great for your users.
Will you design the perfect app on your first try? Probably not. Effective app design is iterative, and you need to go through a few build-measure-learn cycles before you land on something truly great. Put your users first and design to delight them.