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?
5Es of usability - UX design principles
Back in 2001, Whitney Queensberry wrote about the 5Es of usability, which were as follows:
Effectiveness
Efficiency
Engaging
Error tolerance
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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).
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.
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. Aftercall, 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.
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.
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.
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.
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, minimizing 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.
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.
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.
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.
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.
Comments