What makes a good UI/UX design? Have you ever taken a look at an app, website, or other interface and just thought to yourself, Wow, this user interface/user experience is so awesome? While it can be hard to nail down exactly what makes something aesthetically pleasing, there are definitely some principles that can be applied to great user interface and user experience design. In this article, we’ll take a look at some of the most important principles that make good UI/UX design what it is. What do you think makes good UI/UX design? Let us know in the comments!
What makes a good UI/UX design?
- Visual hierarchy
- Positive feedback loops
- White space
- Progressive disclosure
- Avoiding cognitive overload
- 3 quick rules for designers
Visual hierarchy
When you look at an app or website, you should instantly know where to focus your attention. This is something of an art—but it can be taught and learned. Once your know-how, it’s easy to improve your designs by applying visual hierarchy in four easy steps:
- (1) Use color and contrast to segment information into chunks that are easily digestible;
- (2) A strong headline will help tell people what they’re looking at;
- (3) Add dividers between sections to show how they relate to one another; and
- (4) Make buttons distinct from other elements on the screen so they stand out clearly as clickable options.
It’s just that simple! The more seamless these details appear, however, the better. You want people to get caught up in their experience rather than spending time figuring out which element they should interact with next. If a user has trouble identifying the correct button or navigational path, they’ll become frustrated and abandon the site. The fewer clicks it takes them to get back on track, the better. One way to do this is by using gestures like tapping and swiping instead of using graphical links (like clicking with a mouse).
Positive feedback loops
A user interface (UI) and user experience (UX) are all about instilling positive feedback loops in your users. Positive feedback loops are great for getting things done because they feed on themselves; for example, a shopping cart that includes several products and then shows you how much you’ve saved by buying multiple items is easier to use than one that doesn’t so. This kind of feedback loop quickly tells you what you need to know to get back on track or move forward with ease. To create an effective UI/UX, include lots of positive feedback in your designs. You can even combine several different types of positive feedback in one design if it fits with your overall goals and objectives.
But positive feedback loops don’t always have to be shown in numbers. For example, offering you a customer service phone number after you’ve made order is another great example of positive feedback. It tells customers that their business is appreciated and that there are people standing by to help should they need it. Similarly, a simple email receipt following an online transaction lets customers know their payment has been received and processed—again instilling trust and loyalty.
White space
As far as practicality goes, white space is an interface’s best friend. Not only does it make the text easier to read and allows for more even balance on a webpage, but it also creates order in what would otherwise be cluttered chaos. The same basic principle applies to interfaces. White space gives users breathing room from other elements and helps them focus on what’s important—the content. When designing an interface, less can truly be more; utilize white space as much as possible to ensure that you aren’t cluttering up your page with unnecessary information or components.
In addition to creating an attractive, organized interface, white space is also essential for usability. When it comes to working with an app or website, too much information can make it difficult for users to accomplish their tasks or even navigate around your interface. For example, if you were on a page that listed thousands of products in a list rather than showing them in thumbnails with small bits of descriptive text above each one (think like Amazon’s book product page), it would be extremely difficult to find what you’re looking for because there’s so much information packed into such a small area. Simplifying your interfaces allows users to get their jobs are done more efficiently and easily—which is why utilizing white space is key.
Progressive disclosure
This can be used to give users only as much information about your product as they need. It’s also known as faster, smoother, and easier navigation, where less relevant options are hidden until they’re needed. The benefit of progressive disclosure is that it works well with screens that have limited space. Think of buttons on your car: you wouldn’t want to have dozens of them down one side because it would take up too much space; instead, you’d have them around 10 or so on each side and then move through the central console – giving drivers exactly what they need at any given time.
So, how can you use progressive disclosure in your interface or user experience design? First, think about what you want your users to be able to do. You might have noticed that on Amazon there’s a single search box, but when you go to place an order it pops up several different boxes for different types of products – one for electronics, one for clothing, and so on. This shows that Amazon only gives you what you need when it knows what it is you’re searching for; if it has no idea what type of product you’re looking for then it leaves more space.
Avoiding cognitive overload
First, be aware of how much information you are giving users to process at once. If your page is full of content, too much going on, and fast-moving graphics, your users could get overwhelmed. This will leave them feeling lost and confused rather than relaxed and engaged. Although it might seem like you’re offering them more choices or an exciting experience—you’re doing just the opposite: you’re making their job harder instead of easier. And if they give up in frustration… well, that doesn’t do your business any favors!
3 quick rules for designers
These three rules for designers can help you make any website more user-friendly: 1. Users tend to scan content when looking for something specific, so it’s important to have ample whitespace and headings that indicate where one section ends and another begins. 2. People scan from left to right, so put your most important information on that side. 3. Make your most important information big enough to stand out on its own (if necessary). Your readers will read the first few words of each sentence or paragraph, then skim the rest of the text in order to find what they need. When they spot their search term in the first sentence or two, they know they found what they were looking for and move on without reading the rest of your content. The trick is to create something that looks like a work of art but really is just an easier way for people to find what they need quickly.
