7 Great Examples of Intuitive User Interface Design


Intuitively designed products work in the way the user expects them to. Users are more likely to abandon your product if they spend more time figuring it out than actually using it. If this happens, they may form a bad impression of your company as well. It is much better to delight users by designing a user interface that is intuitive and easy to navigate. In this article, we’re sharing 7 products that are great examples of intuitive user interface design.

1. Spotify

Spotify is a popular platform for streaming music and podcasts. Spotify’s key to success has been in large part its great user experience and subsequently its user interface design. Additionally, Spotify’s personalisation aspect is key. From Discover Weekly playlists and their annual Spotify Wrapped, Spotify consistently nails user personalisation. They make suggestions based on each user’s preferences and habits, making it easier and more intuitive for the user to access exactly what they want.

A unique aspect of Spotify’s UI is their dark screen. A dark background with lighter text can be easier to read, and a dimmer screen is easier to view for longer periods, even in dark environments. This also makes light-coloured elements stand out and draw attention, like the Sign up free bar shown below.

Their buttons are well-designed, too. Brighter buttons draw attention to the primary button, making the other “ghost” button less prominent yet still easy to find. Spotify’s use of hover states to indicate that the action has been received is very clever as well. Additionally, when an action is completed such as Follow, the text and word change from Follow in white to Following in green to communicate a completed action subtly.

Another key element to their great UI is their device optimisation. Both the desktop and mobile apps are fine-tuned to make each interface as intuitive as possible. Spotify optimises the app to show a simplified screen with enlarged versions of only the most important buttons when you’re in the car. On the same note, Spotify presents information in a visual hierarchy that is easy for users to absorb. As seen below, a quick search of a popular band shows their hit songs at the top, which users are most likely to be searching for. The use of different shades of black and grey separates sections and elements on the screen.

2. Notion

Notion is a productivity tool with a clean, simple design. It was born in 2013 and almost died completely. However, in 2018 after some serious redesigning Notion rose to popularity as a productivity tool for both personal and corporate use. It is immediately recognizable by its black-and-white, minimalistic interface. Notion uses little colour, generally only using colour in emojis/icons.

The beauty of Notion is that even first-time users are able to get the gist of the app quickly. Notion was redesigned with a lot of consideration which shows in the UI. There is little visual distraction thanks to the simplistic design, allowing users to be more focused on their work.

There are UI elements that only become visible as needed, which keeps the workspace clean and tidy. For example, using a forward slash enables the user to access shortcuts quickly. This avoids the need for a bloated toolbar or menu, while still providing tons of functionality.

3. Canva

Canva is an easy-to-use app for creating visual content in a user-friendly way. It is loved by many because you don’t need to be a graphic designer to create beautiful content. Their interface is easy to navigate, allowing first-time users to create content in a matter of minutes with simple drag-and-drop elements.

Canva has a lot to offer, especially when it comes to templates. They do a great job with the visual hierarchy of the content on each page. For example, on this templates page, templates are presented so that you can easily find exactly what you’re looking for. At the top, recommended templates are presented to the user, with other popular categories to toggle through. A simple purple line indicates which category the user is in. To the left, the clean sidebar helps sort templates into other categories. Additionally, popular topics are larger, calling attention to templates that users are likely to use based on popularity.

The design page is clean and uncomplicated. The collapsable toolbar is tidy and crisp and only shows the most important buttons and options. It contrasts with the light grey background of the design area, keeping the focus on the design while remaining easy to locate.

4. Loom

Loom is a super simple tool used to record videos with your camera and/or screen. You can quickly adopt the tool without having to watch how-to videos or do a lot of reading. Loom was engineered to be fast and simple. This is reflected in the interface which is straightforward, with only the essential buttons and options visible.

This simple design lets you quickly choose your screen, camera and recording settings. Once a recording is done, Loom uses intuitive editing tools to improve it.

Once you’ve got your final product, you can download it to use for any project at hand. The use of their signature purple colour in buttons draws attention to the often-used buttons such as Share, Upgrade and Record. Loom keeps things simple, with a minimalistic colour palette and a light background. The toolbar is highlighted with a light grey colour with friendly icons accompanied by an uncomplicated, dark grey typography.

Loom’s hover states are pleasant to interact with. Small info bubbles pop up where there is no text to help the user understand the function of the button. The toolbar is at the top and provides a helpful prompt with examples of searchable items, which is useful for someone who might be using Loom for the first time.

5. Trello

Many people know Trello as a light-use Project Management app and collaboration tool. Its simple design and organisation make it easy to grasp, perfect for teams of any kind to use.

You can jump in, create a board and immediately start creating cards, even if you have never used Trello before. Their onboarding process guides users through actions with visuals and text, which provide a quick explanation of the features available. Also, it gives helpful Trello Tips to advise you on how to better use the cards and the board.

In the cards, you can add as little or as much detail as needed. The design of the card is uncomplicated but has the capacity to hold a lot of information. Trello’s use of colour helps identify and sort information, as well as draw attention to useful buttons. For example, the button “Create board from template” stands out thanks to the contrasting blue colour. The slight changes in colour in hover states show the user which button they’re interacting with and also indicates when the action has been completed. For example, on this board, you can toggle between Board and Table format, the button changing from a translucent white to an opaque white to indicate the selected button.

6. Calendly

Tope Awotona founded Calendly after he struggled to set professional appointments efficiently without the hassle of back-and-forth emails. Tope identified a gap in the market with a simple solution and set to work on making a hassle-free app.

Calendly has become an essential tool for professionals all over the world. Its blue, unfussy design is quickly recognisable and super easy to use thanks to its intuitive nature. When booking a meeting, the screen is uncomplicated, and the use of colour highlights important elements. Different shades of grey differentiate past/future dates and call attention to more important headings etcetera.

Calendly is a great example of functional and utilitarian design. The subtle use of colour helps you differentiate different types of meetings, as seen in our Calendly review below. They keep things simple with a small, organised menu with only a few menu options. See what else makes Calendly’s UI great in this video.

7. AirBnB

The application is super simple to navigate. They offer curated wishlists, great onboarding, and a streamlined checkout experience. Their UI is consistent across the app to make it feel more unified. AirBnB has designed their UI in order to help make its app immediately recognisable as AirBnB no matter the platform the user is accessing it from. To remove ambiguity, the UI makes use of a good amount of typography. Differences in type sizes help users to identify differences in the content hierarchy. The chosen font is friendly-looking and compliments the logo icon well.

AirBnB’s search bar is a great example of an intuitive UI. Even if you’ve never used AirBnB, upon entering the app, you are presented with a search bar that helps you easily narrow down your search. Interactive hover states prompt users to complete an action and highlight key information. They use minimal colour throughout their UI, with a colour palette of white, black, and their signature coral colour with various shades. Simple icons and typography help to sort the abundant information in a way that is easy for users to digest. There is so much information to be shown and lots of ways to filter it, so simplifying it with icons and a well-organized visual hierarchy help to not overwhelm the user.

Need Help Designing Intuitive User Interfaces?

We’re passionate about creating insanely great interfaces for SaaS products. If you would like to make your UI more intuitive, book a 15-minute call to speak with a product design expert. Finally, if you enjoyed this article, head over to our YouTube channel to watch other UI design reviews!

Source link

You might also like