User interface web design principles
Effective website UI design is both pleasant to look at and easy to use. To create such interface you’ve got to understand the fundamentals: how users interact with UI, what they expect from it and what can potentially cause them problems. Here we will look at graphical user interface design principles used for creating beautiful and functional web UI.
First of all, you need to understand that interface is not simply buttons, menus, colors and fonts. It is a set of tools that help users solve their problems. That’s why the first principle is as follows:
1. Know your users
The more details you know about them, the better. Understanding who your users are, why and how they act is vital for creating working UI website design. Here’s an example of typical MailChimp users:
Famous usability consultant Steve Krug goes even further and says that good interface doesn’t make users think. Make decisions based on who your users are and implement them in your desktop or mobile interface.
2. Use patterns that look familiar
It is easy to forget but most of your users already spend a fair amount of time in other interfaces, from Facebook and Gmail to Flickr. Check UIs of websites popular among your users and figure out what you can learn from them. By using already known patterns you will help users easily understand how a new service works and simultaneously earn their trust.
For example, readiness indicators that often appear in social networks can also be used to show learning progress:
3. Be consistent
After doing something in a certain way user expects similar actions to be done identically. Just imagine if the interface for opening a new file was different for all Google Docs products! No user would be happy about it.
For the same reason reddit uses similar approach to links on all the pages: external links are shown in big font with no underline and internal links are displayed in smaller underlined font. Different sections of the website can have their own features and even use another color scheme but user still understands that it’s the same website:
4. Create visual hierarchy
User has to understand what parts of the page are the most important. Size, color, location and negative space around every element should communicate its role (primary or secondary) to the user. Correctly build hierarchy allows to present complex concepts in an easy to understand way.
5. Provide feedback and protect user from accidental actions
Tell user what’s going on. Has the letter been successfully sent? Was the download completed? Is this file type supported or not? Make sure you can’t delete everything with just one button and no confirmation. Users want to know that they aren’t left alone with their problems. Make them feel comfortable.
6. Don’t show all controls at once
They can scare away less experienced users. A great idea is to put all advanced functions ordinary users won’t need on Advanced tab or hide them in a special menu:
7. Give more control to experienced users
Believe us, those who are extremely experienced with your product would love to use shortcuts for routine operations. Many popular services provide this function to their users, Google Docs and Github included. And here is an example of hotkey bar available in Coggle mind mapping service:
8. Never show a blank page to your users
When users see the new tool for the first time, show them how to use it, what can be achieved with it and demonstrate some example projects. Be ready to inspire them to work with your product.
In his book “Don’t Make Me Think” Steve Krug argues that interface has to be self-sufficient and explain itself. If a user needs to read an instruction to understand your navigation system — it’s bad UI in action.
9. Don’t overcomplicate
Before adding yet another UI element ask yourself, whether it simplifies the life of the user or simply eats away the time. Here’s how American Airlines site looks after redesign (on the right):
10. Test
The earlier you start and the more tests you perform, the better will be the quality of the end product. Don’t rely on your own instincts only — test your interface on people who haven’t participated in its development. To learn more about user testing, read our case study on prototyping mobile app for patients.
The next phenomenon doesn’t exactly belong to web design principles of user interface but is rather something web designers and content creators should keep in mind. When users come to your page, they don’t read it, they scan through it. That’s why modern user interface web design is created with F and Z-shaped reading patterns in mind. But don’t forget that they are meant for languages with left to right writing.
F-pattern works on sites with a lot of text content: users look through the top part of the page searching for keywords, then look through the subheadings below it:
That’s why on content-heavy websites all the important information should be located on the left, where users expect to see it. This pattern is used on such websites as CNN and New York Times.
On pages without big text chunks (such as landing pages) you should use Z-pattern. At first visitors look through the heading moving from left to right, then look at the lower left part and repeat left to right eye movement.
Graphical user interface design principles described above can be summarized as follows: UI have to solve user problems in the most simple way possible.
We, studio stfalcon.com, create modern user interface web design and will be happy to design an effective UI for your MVP, website or mobile app.
