Justinmind-logo

20 UX design principles for website and mobile app design

March 03, 2021
List of UX design principles

The 20 UX design principles you should always practice when designing websites and mobile apps

What exactly is a great website or mobile app? Is it something that engages users or helps them get the job done – perhaps a bit of both? Why do some websites and apps that have such a basic UI design (and business models) turn out to be among the most successful?

Apply UX principles in your web and mobile prototypes
Download Free

It’s chiefly because they follow the correct UX design principles. In this post, we’re pinning down the best UX principles you should practice when designing a website or app in your prototyping tool, as well as running through some examples of them in action.

5Es of usability - UX design principles

Back in 2001, Whitney Quesenbery wrote about the 5Es of usability, which were as follows:

  1. Effectiveness
  2. Efficiency
  3. Engaging
  4. Error tolerance
  5. Ease of learning

We could say that Whitney was ahead of her time, as it seems like back then most websites actually wanted to overwhelm the user or give them a migraine after five minutes of use. We can and should still be applying the 5Es of usability to web and app design today and the best way to do that is by following good UX design principles.

Let’s take a look at 20 of the most important and universal UX design principles for both website and mobile app design that reflect the 5Es of usability.

Website UX principles

1. Clear and minimalist

The most important thing about your website is the reason that your users come in the first place. So it’s natural that you’ll want to remove as many barriers as possible to helping them achieve what they came to do, whether that be finding products or information.

Keeping your UI design minimalist in detail can help towards achieving this goal. Make sure there are no superfluous details that can distract the user from finding whatever it is they need to find. Cluttering the screen with lots of irrelevant controls and content can distract the user from the main task at hand. Only include what needs to be on a given screen at that moment, i.e. the content or products your user is looking for, along with navigation options.

If it’s an ecommerce design, you’ll want to ensure that the user finds the products they’re looking for as quickly as possible, and that while they’re browsing, there’s as few distractions as possible. Consider this example of a great ecommerce that simply just provides the products in grid format with plenty of white space all around.

UX principles - clear and minimalist David Firth website

Maybe you’re designing a hotel website and want to captivate the audience. Can you use eye-catching hero imagery and storytelling videos? Certainly. But just make sure the user can find what they need immediately, with a big gaping call to action saying BOOK NOW.

Remember: simple and intuitive layouts tend to work the best when it comes to the UX principles of effectiveness and efficiency. There’s a reason no one wants a return to what web design was like in 2001!

2. Learnable UI

A user walks into a bar and says they understood your UI at first glance. And if they’re not joking, then it’s because you nailed Krug’s 1st law of usability. This UX principle states that a UI should be self-explanatory which makes for easy learning.

UX principles - Krug's law in effect with a learnable UI

Make your UI as simple to navigate as possible. Have the main navigation menu at the top in which users can access the most important features, product or content of your website. Hide less important options in subcategories.

Know your users’ mental models

Above all else, make sure you’re adhering to users’ mental models. A mental model is an idea that a user has of how something works. Most people, when they see an arrow in a field, understand it’s a dropdown menu and most understand the pagination metaphor. However, it always helps to test your designs on your target users just to be sure. Your idea of how something works might not be the same as your users’.

Consistent elements and language

Lastly, one of the most natural ways to facilitate quick learning of your website is to be consistent in your use of elements and language. This reduces cognitive load for the user as there is less to interpret each time.

UX principles - examples of consistent elements and language

For example, let’s say that you use an orange button to add an item to a shopping cart and a green button to proceed to checkout. Maintaining this color combination throughout your website will create consistency. Likewise, if you use a date picker on one form, it makes sense to repeat this through all forms on your site. date field throughout your website.

Creating consistent, learnable web designs in Justinmind is easy as you can create your own custom widget libraries and reusable templates.

3. Design for quick use

The UX principle of efficiency is all about focusing on the speed with which your users are able to carry out their tasks.

Efficient flows

Always think about how you can reduce the number of clicks, strokes and scrolling to an absolute minimum for each task. A good rule of thumb is that most tasks shouldn’t take longer than two minutes for the user to complete.

Another trick to boost the speed with which users carry out tasks on your website is by grouping similar content or elements together, and by grouping similar questions together on forms. You can also speed things up a notch by regaling users with accelerators.

Accelerators

You may also want to factor in power users when it comes to the UX principle of efficiency. Users who will be using your product frequently, or who use other similar products will appreciate not having to perform the tasks at the same speed as newbies.

A solution to this is to use accelerators. These are any controls that help users literally speed things up, usually by using keyboard shortcuts. Everyone knows the universal accelerators ctrl+c and ctrl+v. If possible, examine the other tools that your user base uses.

UX principles - accelerators for Flickr

This will not only help to demonstrate the mental models and UI metaphors they’re already likely to understand, but will also help you to copy any accelerators used in those products as well, so in doing that, you’re minimizing the learning curve as much as possible.

By giving certain users the option to use accelerators, you’re allowing newbies to do things just as intuitively the conventional route while allowing power users to speed through their tasks. A good experience for both.

4. Effective language

Using clear and simple language is an important UX principle that will help your users get the job done faster. It’s as simple as that. The International Design Foundation recommends using language that could be aimed at 6th graders.

If you’re not sure on how complex the language is that you’re using, you can measure it using any of the myriad Flesch-Kincaid scale readers on the web, such as Grammarly and Pro Writing Aid. These will tell you the level of reader that would be suited to reading your text.

UX principles - Flesch-Kincaid school levels

By using clear and simple language, you help increase not just your users’ comprehension, but also accuracy in carrying out certain tasks. Remember – with today’s fast-paced lifestyle, users are often in a hurry and tend to have shorter attention spans. There’s no benefit in using convoluted jargon or trying to be wordy.

Instructions and error messages

Make sure instructions are as clear as day and helpful. An example might be when filling in forms. Error messages that appear on-time before a user enters in too many details.

UX principles - always use clear instructions

It should be useful and explain what the problem is. For example, “credit card number too long” or “credit card number invalid”, or “please enter a date before 2015”.

CTAs

Another important factor to take into consideration is to make sure that the copy you write on CTAs is clear and concise. This depends a lot on your brand, product and target audience, but mostly, you’ll want your CTAs to be clear and simple. Start with an action verb and state very matter-of-factly what will happen, such as “subscribe to monthly newsletter” or “download app”. Sometimes catchy, yet descriptive CTAs also work, but you need to know your audience well.

UX writers often take on the task of designing and refining the language used in digital products. Check out our guide to UX writing to learn more.

5. Helpful information architecture

Deciding on the way to prioritize your content will help you design an information architecture that suits your users and helps them find their way around your site and get to the content that they need much faster.

Sometimes the best way to learn both how to prioritize your content for your users, but also how they would logically expect it to be organized on your site is through card sorting. Determining the optimum information architecture before beginning any design work will also help you decide on the content that’s most relevant to your users.

6. Relevant content

When users come to your website, they’re looking for something. Making sure your content’s relevant to your target users is an important UX principle focusing on effectiveness.

One way you can do this is by ensuring that menu and navigational items reveal the most sought-after content or content categories immediately, and in an order that makes sense to your visitors.

In the case of an ecommerce, you might want to place your most popular categories starting from left to right in the menu bar at the top of the screen, or as the first options in an overflow menu.

UX principles - Apple website homepage showing relevant content

In the example above from Apple, the most popular products are listed from left to right as navigation options on the menu, while the entire homepage is dedicated to their latest product releases.

7. Error tolerant forms and navigation

Your website should be as error tolerant as possible. This is an important UX principle because you’re users aren’t robots and everyone can make errors, especially when in a hurry. To increase efficiency, you should help your users correct any systematic error they make as soon as possible.

UX principles - example of an error tolerant form

Imagine the scenario where they’re filling in a form. If a user makes one mistake in a field or leaves that field blank, a very unhelpful response would be to simply refresh all the fields and make them start again. This would be unproductive and frustrating for the user.

Sticking to the UX principle of error tolerance, we could retain the correct information in all other fields, while highlighting the field with erroneous data. We could further help the user by providing some clear inline instructions, such as “please enter a valid email address”. Even more helpful is when the user attempts to submit a form with an error, if it’s a long form, that the page automatically scrolls back up to the offending entry, without the user having to go back and search for it.

Our guide to form design has everything you need to know about the tricky but worthwhile pursuit of good form design.

Another way of making sure your website is error tolerant is by including warning messages whenever a user is about to perform a potentially risky action such as “by leaving this page, your transaction will be canceled” or “are you sure you want to abandon the contents of your cart?”.

8. Useful 404 pages

Helpful 404 page design is something that every single website out there should have. While it’s true that we should do everything in our power to ensure that users don’t land on this page, the truth is you can’t always prevent it, no matter how hard you try.

To prevent frustration and to keep users on your site, your 404 page should provide as much help as possible to guide the user to where they need to be. Providing a bit of entertainment at this stage is optional but highly recommended to earn engagement points.

UX principles - 404 page from Github

A good example here is Github. On their 404 page they have a search bar, a sign in form and a few navigational options below, in addition to an entertaining hero image (check). Giving the user the freedom to continue their search is less frustrating than simply showing them there’s been a 404 error. You’re saying “there’s been a problem, but here’s a possible solution” as opposed to simply “there’s been a problem, suck it up”.

9. Always-visible system status

One of Nielsen Norman’s ten usability heuristic evaluations states that a product’s status should always be clear to the user. That is, it should always communicate what’s going on in any given moment, as well as what’s transpired.

For instance, we can see the system status visibility UX principle in action when we hover over links and they automatically underline. It’s also evident or when we hover over a button and they change color to a) demonstrate they’re clickable and b) to show which button the user is about to select if they’re in close proximity with others.

UX principles - always-visible system status Hollister button color change

Yet another example of this principle in action is when the system wants to confirm to a user which actions have been completed. The simplest example to portray this concept might be the Gmail inbox that shows unread email as highlighted and read emails greyed out.

10. User freedom

Freedom and flexibility is a UX principle that’s rooted in effectiveness. Especially when it comes to ecommerce design. Not allowing your users adequate flexibility leads to abandoned shopping carts.

To put this UX principle in action, let’s say your user’s browsing a product range, but they haven’t created an account yet. Instead of forcing them to create one before they can add anything to the cart, just let them add the items for that session.

UX principles - example of Decathlon shopping cart full

Sometimes users do this merely to save products for later reference. But if they’re forced to sign up and fill in forms, that’s a great way to start seeing those bounce rates increase.

When they wish to proceed to checkout, that’s when they should sign up. The same goes for browsing. Make sure they’re free to continue browsing and simply show the depicted number of items that are in the cart.

UX principles - user free to navigate while shopping on Decathlon

Decathlon is a good example of this, where the user, even before signing up for an account can see the subtotal of items they’ve added, then close the window to continue browsing and adding items.

Improve usability with the best usability design tool
Download Free

Mobile UX principles

11. Content prioritization

Content prioritization is one of the most important UX design principles for mobile apps due to the limited screen real estate available. Most usability principles dictate that we should always prioritize our content based on our users, but on mobile, this design principle is even more important.

To do this, we need to ensure that only necessary content is displayed on each screen. If it doesn’t need to be there, take it out because it’s using up precious screen real estate and giving the UI a cluttered feel. Make sure there’s a tighter focus on core features and make sure that each page revolves around no more than one primary feature.

UX principles - content prioritization in app design

Thank you for (not) smoking - Andrey for Zajno Crew

For your content to be effective, you should ideally plan it out before you start designing the UI with your wireframe tool. This will involve carrying out a bit of user research beforehand and getting a list of product requirements, as well as devising an information architecture. Once you do this, you can start designing basic screen flows for each of your core features or content.

12. Onboarding

The onboarding stage is an imperative UX principle that makes all of the difference when it comes to user retention.

Provide a brief walkthrough of the most basic core features of your app. Have the user perform a quick task using these features. Rewarding them during each step will activate the reward center of their brain, causing a small dopamine hit. Even if the reward just takes the form of an unexpected or quirky microinteraction, or gamifying the experience and giving them points (but making it easy).

UX principles - mobile app onboarding

App onboarding design by Raquel Sánchez

Remember, each and every interaction your user has is a chance for learning. Reveal secondary and tertiary features progressively, the more comfortable your user gets with your app. Loading screens are also a great way of teaching your users about extra features as they wait for a page or a feature to load.

This is also a good stage to ask them about notifications. Your app is a guest in on their device and in their lives, afterall. Let them choose if they want to receive notifications as soon as they sign up on your app during the onboarding process.

13. Touchscreen-friendly elements

Making elements like buttons clickable is a crucial UX principle relating to efficiency. When the mobile UI isn’t cluttered up with superfluous content, you’ll be able to capitalize on that space by ensuring any elements that your user will be interacting with are sufficiently large enough.

UX principles - large, touchscreen-friendly elements

Yacht Booking Service Application - Alina V for Ron Design Lab

By elements, we’re referring to buttons, CTAs, sliders, toggle buttons and the typical expand and minimize options for accordions and dropdown lists.

Our post about button design teaches you all the fundamental concepts underpinning this important UX design principle.

A typical rule of thumb to follow for this UX principle is to ensure that the buttons you’re designing are at least larger than the average finger diameter which is 15mm. To learn more about how to design buttons for an awesome user experience, check out our post on button design.

14. Legible text

The UX design principle of legibility is crucial when it comes to mobile app design. Just because the screen size is smaller doesn’t mean that your text should be. Afterall, people’s vision doesn’t suddenly get better according to the device they’re using, so it makes sense to use an adequate font size.

In addition to size, you should also strive to ensure that you’re using a font that’s readable. You can implement branding, personality and style with your fonts, but always make sure it’s readable.

UX principles - legible fonts with personality and functionality

For optimal readability, we recommend going with a sans serif font for most text, including instructions, blog content, messages, alerts and buttons. Helvetica and Proxima Nova are some of the most prolific examples out there. For titles you can use a serif font to distinguish, such as Garamond or Times New Roman. Ideally though, you shouldn’t really be using more than two font families, and those families shouldn’t differ greatly.

See our guide to fonts to learn the best options for fulfilling the UX principle of legibility.

If you need to create some variety in the fonts you use, you can always use different weights and styles, such as bold and italic as well as vary the size a little bit.

15. Controls for common hand positions

The position of the controls on a mobile UI relative to the user’s hand is a UX principle that will set you up well with your users.

UX principles - app controls to suit hand positions

Groovrick Web Design - Abdul Rauf for Rauf Tech

When it comes to things like hamburger menus, the general consensus is to have them at the top right, as normally people hold their mobile devices in their right hand and navigate using their thumb or a finger. For this reason, you’ll often see the typical back-to-top button affixed to the lower-right side of the UI, in addition to other controls, like the typical floating “compose” icon to compose a new email in Gmail.

16. Minimize data input

Minimizing data input on mobile is exceptionally important and a great way of boosting efficiency minimizing errors. On mobile, people will be on the move and will have less time. In some cases, they may have less dexterity than if they were seated at a desktop with a keyboard and mouse.

UX principles - date pickers minimize data input

Picker UI design - Roman Kamushken for Setproduct

When it comes to forms, try and automate as many data entry features as possible. Make it possible for the app to remember emails and passwords. For search bars, apply an auto-predict feature where possible and use dropdown lists for date pickers or multiple choice questions.

17. Obey native design system specifications

As we mentioned above, when designing for platforms like Android or iOS, you should always take into account the following systems: human interaction guidelines for iOS and material design for Android.

The reason for this is because you should design your app to behave like an ios or android app. For example, iOS users will expect the navigation of an app to behave differently to that of an android user. They will also expect it to look different – it should merge seamlessly into the iOS environment.

UX principles - native iOS dropdown list

The other most important thing to ensure is that your app’s controls never interfere with native controls. For example, always use the native iOS dropdown list when designing apps for iOS devices and, as we mentioned above, never interfere with the docked menu bar on Android devices.

18. Design for users on the move

When you’re creating the screens and interaction design that your mobile app will have, you’ll need to take into account that many users will be on the move. For this UX principle, it’s helpful to design for someone standing up on a crowded bus, subway or train.

When you factor users’ motion into your design, minimising the need for data input as we mentioned above makes sense. But your mobile app should ideally also provide adequate contrast to suit the various lighting conditions the user might find themselves with.

On a particularly sunny day, meaning there’ll be lots of glare. Ensuring there’s adequate contrast between background, elements and text will help boost usability and effectiveness.

UX principles - light vs dark mobile app UIs

However, you’ll also need to account for situations where there is low lighting. Having a bright, glaring screen in these situations isn’t optimal and can tire out a user’s eyes fairly fast. For this reason, it also helps to have a dark mode setting for your mobile app. Make sure that you think carefully about how your brand’s color palette and logo will work both with light and dark backgrounds.

19. Seamless multi-channel experience

Users have different devices these days and you’ll want to ensure that their experience across the full range of channels they use is the same. To do this, it’s important to see where in your user journey your app fits into their lives and on which device they might be using your product at which time.

UX principles - multichannel app example

Make sure that you design with a special grid to ensure that the content and the UI layouts of your devices can scale down perfectly. A good example is the one below. Make sure that when it comes to branding, that your product echoes it across all of the touchpoints your user will have with it.

Bonus UX design principle - TETO

We at Justinmind are of the opinion that the TETO UX principle, ‘Test Early Test Often‘, should be applied to every web design project, whether it be moderated or unmoderated. If you begin user testing right from the wireframe design phase, you’re more likely to find and fix problems earlier on in the design process: saving time and undoubtedly a few headaches along the way.

UX principles - moderated user testing

Put yourself in the user’s shoes: you wouldn’t take a new car home without taking it for a spin, or buy a new pair of jeans before making sure they fit just right—the fact is, you want to make sure that you’re getting what you want. After all, the User is King, so consider letting them test your site before letting your coders loose.

Check out the many user testing tool integrations Justinmind has to allow for regular testing and iteration.

We believe a prototype is the best communication tool between users and the software development team. Prototyping your design gives you the opportunity to see where it works and doesn’t by testing, tweaking and adjusting as you go.

Learn more about how you can test out design principles with our guide to the 15 best usability testing tools on the market.

Final thoughts

In many cases, the path to success really depends on the goal of the product and the context. However, these UX principles in this list can be seen as universal across all digital products, whether they be websites or mobile apps.

Many of these UX design principles boil down to having a mix of basic empathy for the user and common sense, however, it can be easy to lose sight of that when you’re in the midst of putting together an awesome UI. However, we hope the examples in this list serve as great reminders of the simplicity of amazing UX design.

PROTOTYPE · COMMUNICATE · VALIDATE
ALL-IN-ONE PROTOTYPING TOOL FOR WEB AND MOBILE APPS
Joseph Downs
In-house UX copy-slinger, foodie and classic motoring enthusiast