Design, UI, UX, Inspiration
10 Golden UI Design Principles and How To Use Them
with Examples and Practical Tips
Let’s review the 10 Golden UI Design Principles, see some real-life examples, break them down and learn from them.
When it comes to mapping out the structure of your website or app, the aim is to create an environment that all users find fluid and intuitive to navigate; allowing them to achieve their objectives with a minimal amount of client agitation.
It can be easy for software developers to fall into the habit of designing trendy user interfaces in which users have to navigate through multiple screens, menus, and options in order to complete even the most basic tasks. It’s important to keep in mind that no matter how powerful your software is, customers will never be able to use it if they get lost in the interface they’re using.
That is why there are 10 key UI design principles that you must follow to keep your customers aboard.
Article Overview:
1. Less is more
2. Make users feel in control
3. Provide consistency
4. Avoid cluttering
5. Include Visual Hierarchy
6. Make your UI design inclusive
7. Tolerate user errors and don’t tolerate your design ones
8. Use natural design
9. Provide System Progress visibility
10. Allow real-world design resemblance
1. Less is More
Designers must balance the need to stand out with the need to create an intuitive and user-friendly experience. Too many designers fall into the trap of only thinking about aesthetics and completely forgetting that people still operate computers.
Ludwig Mies van der Rohe has changed not only architecture but web design with his theory about minimalism. And it makes sense.
Websites that have a UI interface that lacks excessive options are often faster, cleaner, and easier to navigate which is crucial for the site’s success.
Being one of the most important UI design principles, simplicity comes with a few rules on its own. Here are the 7 main rules of balance and simplicity that show Less Is More in practice.
1.1. Simplicity
The key to minimalism and Less is More is to keep things as simple as possible. This means you should avoid using too many visual elements, especially ones that suit no purpose in terms of functionality. Simplicity refers to colors, fonts, layout, and images.
Example of Simplicity in web design by Deidre Driscoll.
1.2. Functionality
This puts the main focus on functionality rather than visuals. Simple minimalistic design that knows that Less is More prioritizes the content and accessibility. Every element is functional and has a purpose, or else it shouldn’t be in the design.
Example of Functional design by Filippo Bello.
1.3. Visual Hierarchy
The principles of visual hierarchy organize your content and the info you wish to communicate in a way that it tracks the viewer’s eyes in the direction you want. You create your visual hierarchy by designing your composition through fonts, colors, contrasts, and white space.
Example of Visual Hierarchy in Web Design by Big Bets.
1.4. Proportions
Especially when you use a small number of graphic elements, it’s essential to take care of the proportions. Always use grids to organize your elements on the layout. This will guide the viewer to identify the most important information at first glance.
Example of using strict proportions by Norm.
1.5. Simple Typefaces
Typography is one of the most important aspects of graphic design and can become the difference between mediocre and truly great effective design. Your fonts must be legible, readable, and simple, to allow your viewers to easily scan the information. Use big bold fonts for headers and straightforward clean font without elements for the body.
Picking the perfect UI font for your website or app has its challenges. The good news is, we have already reviewed the best UI fonts in action with some real-life examples.
Example of websites using simple readable and effective UI fonts by Carlos E. Molina Tovar.
1.6. Limited Color Scheme
Try to limit your color scheme to two or three colors and in some cases, accent color (or gradient). It’s not necessary to stay on the flat design, as in many cases, gradients are a great way to give an accent to important elements or create something truly captivating.
Example of limited color scheme with gradient accent by NVP Review.
1.7. White Space
You can use white space as a graphic element itself to your advantage. By adding more blank space around elements of importance in your composition, you give them more weight and focus.
Example of white space by Dylan B.
2. Make Users Feel in Control
The next one of the 10 UI design principles is to give users control. Why is that? Brands need to abstain from making users feel like they are forced into a certain action or like they’re being manipulated. Even if this may be exactly what’s going on in some cases. Instead, brands should make users feel like they are the ones in the driving seat and not just taking a free ride.
Example by Romagnoli.
This can be easily achieved by applying visuals – eCommerce websites are especially good at customizing user experiences. But if you have a normal website, adding navigation options like buttons “Proceed” or “Go Back”, an option to return to the Home page, arrows, etc. will pretty much be all you need.
Remember: Users feel in control when they can choose.
Amazon is a perfect example of giving customers a choice to select whatever they like. Users can select the quantity, size, and color. On top of that, they can also proceed to checkout or add the pair of fitness shoes in the basket and proceed with their browsing.
3. Provide Consistency
Among the UI design principles and guidelines, this is probably one of the most important ones. A good interface is the result of a solid design process, where the user is in the center. While an attractive design can be captivating, it should also be functional. Consistency creates familiarity and usability, so users need to get used to a product’s style and operation. A good interface strives to be consistent in order to help users find what they’re looking for quickly and without headaches.
Imagine having a three-course meal but you start with the dessert, then move on to the main course and you finish up with an appetizer or a salad. Same with design. You won’t see a bank app design that shows your positive balance in red and negative in green.
Consistency through colors and labels in dashboard design by Theme Looks.
4. Avoid Clutter
Unfortunately, the human brain cannot accept tons of data simultaneously. Just like the computer, it turns it into small modules. For instance, most people know their phone number by heart and even if you wake them up, they can tell it. However, do you know someone who can tell you their phone number in a full block of 10+ digits? Most humans are able to break down to 3-digit blocks that are easier to remember.
If you stick to the rule “Don’t make users think”, this will most likely end up as a successful UI design, believe it or not.
Unless you’re going for a psychedelic, trippy or retro Internet experience on purpose, of course:
An example of cluttering that makes you think as a part of a hardcore psychedelic experience by Cameron’s World.
5. Include Visual Hierarchy
Visual Hierarchy helps consumers grasp what is most important about a product. It organizes the components into groups and arranges them so that simple elements are easy to see, while complex ones are more difficult to spot.
Some of the most used visual hierarchy types include:
F-Pattern | Z-Pattern | Spaces | Direction and others
The visual presentation of UI elements has a great influence on the consumer experience of a product. If content components look like a mess, consumers can’t navigate within a product or perform their tasks properly. In this example by Generation Church, the hierarchy uses the rule of thirds and Z-Pattern to navigate the viewer’s eye.
Build-in Amsterdam is an example of a visual hierarchy, and more specifically – the rule of thirds.
6. Make Your UI Design Accessible
Designers are trained to see the world within the context of visual aesthetics. While these skills are essential in designing a logo, website, or poster, they can often be a detriment to people with visual impairments.
Many people who have eyesight issues or a color-blind to some degree can have issues finding details that are usually there for people to see. This creates a negative user experience, and I can confirm from my own experience as partially color-blind that some websites are just painful to watch.
What do accessible websites do right?
- Keyboard Navigation: Helps users with limited mobility to jump between buttons and links using the tab key and “clicking” with the enter key.
- Alt-Text: Gives a text equivalent for visual and auditory page elements.
- Color Contrast: Accessible websites eliminate contrast errors for a ratio of less than 4.5:1 with the background.
- Clear Links: Using meaningful text for hyperlinks.
- Scalable Text: This allows users to increase the size of text up to 200% without disruption to the page layout.
Built by Silo shows a great example of attractive visuals and accessibility. Users can scroll down and experience the cool animations and parallaxes while jumping from navigational links to projects to contact information.
The same website also uses high color contrast, lots of white space, and simple readable fonts, which helps to make the website more accessible to everyone.
7. Make Innevitable Interface Errors More Tolerable
Interface error is the state or condition when the website cannot do what the user wants. There are three reasons interface errors may occur:
- Unexisting function: The app fails to do what’s requested because such a function literally doesn’t exist.
- Invalid Input: The app cannot understand the input from the user.
- Incompatible operations: The user tries to combine operations that cannot work together.
There is no way to avoid interface errors, however, you can think of a way to make that kind of interaction more user-friendly and smooth.
Users are typically more anxious when they are entering contact forms or other things. When a user makes a mistake in these fields, companies should not force the customer to re-enter the data. Instead, the company or eCommerce platform should allow the customer to correct this information quickly and easily. This is one of the key UI design principles.
Virtual mistakes can make a psychological impact and form a negative emotional response. It can actually increase the anxiety feeling and make the user stop interacting with the website without even starting to analyze the cause.
This example by Facebook actually gives us a lot of insight for practical tips on how to help your users deal with interface errors with less anxiety and frustration.
Here’s what to do:
- Make the error instantly noticeable: For example, if the user has made a mistake in one of the 20 fields in your form, make the mistake super visible. This way instead of forcing the user to search for the wrong input field, you save them precious energy and time.
- Use well-recognized visual markers: Use markers easily and universally recognized by most users. For example, the red color and exclamation marks attract users’ attention to the errors.
- Explain what happened: Quickly explain the nature of the error. For example, “The username or password do not match” is a concrete specific error message that instantly tells the users what to fix.
8. Make Your Design Intuitive
Natural is all about people feeling comfortable visiting your website from both desktop and app. Don’t overcomplicate things for users. With the world moving rapidly towards a mobile-first approach, you’d have to plan everything for mobile devices. For example, every high-priority menu should be visible right from the start. Avoid adding crucial details near buttons and edges of phones or tablets, as you might create an inconvenience for users.
Imagine being a user – when you visit a website, you need to navigate through the pages quickly and find everything you need to know within 3-5 seconds. Anything “extra” might make you close the tab and visit another site.
Example of intuitive design with easy navigation for both desktop and mobile by Houston Exponential.
9. System Progress Visibility
When users are taking action on a site, they need to know if the system is working correctly. They need to be able to see their metrics and understand what is going on, so they can make quick decisions. If a user is downloading a file, they need to see a progress bar showing the download’s time left. Without it, they might get frustrated and leave the page with unfinished work.
Also, when users click on a design element, your design should register that action and respond to it with feedback within a reasonable amount of time. Good fonts, for example, should let users know when they’ve clicked on an area of the page; if users feel like they’re clicking aimlessly, this will hurt your brand’s reputation.
In many cases, websites provide visual feedback on the progress of file downloads/uploads and other tasks that require more than 3 seconds.
Example of download progress stages by Yasir Eryilmaz.
10. Use Universal Language and Visuals
To create a successful design, it is best to use language your target audience will understand. This involves avoiding “tech speak,” or jargon and technical terms, in favor of simple, understandable language.
Designers should also use elements that are easy to understand yet familiar to the user. For example, if you are using an icon representing a house, then users should intuitively guess it’s the Home screen.
Example of using universal visuals and language in a mobile app by Cuberto.
Conclusion
Some UI design principles are very limiting for designs. It’s true that professionals can come with amazing aesthetics and sometimes are limited in their options. But after all, every CEO is aware that user experience comes at the top of any company in the world – from the smallest studio to Fortune 500 corporations. Following the best practices in the industry will help you achieve your business goals.
Continue reading: