Golden rules for UI design best practices
Before we go into the guidelines, we should ask ourselves, “Why should we obey these rules?”
According to a study by Google, most applications lose 77% of their customers within the first three days, and bad UI design is one of the reasons. Because the user interface is one of the initial touch points for interaction, it is one of the most significant variables in user activation and adoption.
If you want to avoid your product being included in that long list of failed apps, then you’d better consider the principles suggested by professionals:
1. Lower the short-term memory load
Mostly what we read throughout the day is saved in short-term memory, and only a few that stand out will be moved to the following memorization stages.
Avoid stuffing your website or application with too much content. Ensure your visitor is focused on the primary content regardless of where you set your site, whether it’s the main page or the menus. Displays must also be simplified, multiple-page collections must be consolidated, window-motion frequency must be minimized, and appropriate training time must be allowed for codes, mnemonics, and action sequences.
2. Aim for consistency
It is critical to maintain consistency across the site, whether it is the layout, the size of the button, the color code, or the tone used while authoring the page. This consistency will help you to build brand image while preventing people from leaving your site.
3. Don’t make users think
Good UI design examples’ navigation and content are self-explanatory. Users should spend little to no time figuring out the next step within your website or mobile app. Otherwise, they will leave. To establish familiarity and lessen cognitive strain, you should strive to employ industry-standard UI patterns.
4. Make actions reversible
This rule states that users should always be able to reverse their actions swiftly. This enables customers to explore the product without fear of failure – knowing that mistakes can be readily undone encourages consumers to investigate novel choices. On the contrary, requiring users to be exceedingly cautious with each step almost definitely leads to a slower exploration and nerve-racking experience that no one wants.
Text and graphics editors are two of the most frequent GUIs providing users with the ‘Undo/Redo’ options. ‘Undo’ allows users to make modifications and go back through changes made when editing text or generating visuals. ‘Redo’ allows users to undo the undo, which means they may go back a few steps and go through their adjustments again.
16 good UI design examples from top brands
1. Spotify’s consistency in design
Spotify, a music streaming service, has over 188 million paying subscribers, making it the leading music streaming platform. While numerous variables are at play here, Spotify’s success is partly due to its user-friendly and enjoyable layout.
What you can learn
This may be more of a criticism of Apple Music – its competitor – but navigating via Spotify’s UI seems lightyears ahead of Apple Music. Spotify’s app design seems lightweight since it seldom has blank loading windows or glitches while searching for artists or scrolling through the material. Its user interface is easy to use and understand; preliminary information is highlighted; necessary buttons are within reach.
All of this is attributed to their consistency in design. They retain a dark background throughout every page. All daily mix designs are the same, telling the user that this is a special treat for you made by Spotify while distinguishing themselves from mixes made by their subscribers. Not to mention the consistency in fonts and theme.
2. Medium’s minimalism
Medium is an open platform where readers can discover dynamic thought and where emerging writers can freely publish their work.
What you can learn from this good UI design example
Medium encourages visitors to concentrate on its written content by using a consistent and straightforward UI and page design for all articles. Professional visuals and customized pages do not indicate quality; instead, the thoughts and ideas expressed in writing do. This fosters an environment of inclusivity and equality among professional authors and amateur contributors who submit material on the site and an environment where the best content triumphs.
This simple yet good UI design example also emphasizes the lack of advertisements on the site, which is an essential design aspect of Medium’s digital publishing strategy. The material may speak for itself without advertisements affecting what consumers click on, generating nuanced and sophisticated debates.
We have always said how unique and invested UI design can impress visitors. But it’s not always the best practice. The key is to provide the UI design that your user needs. A website like Medium doesn’t need an imagery showcase like an eCommerce shop.
3. Notion’s onboarding design
Notion is a note-taking software platform aimed to assist members of businesses or any individual in managing their information for increased efficiency and productivity.
What you can learn
As the initial point of contact between a user and a product, onboarding is critical to user activation. Its second primary purpose is user retention, which significantly influences a user’s capacity to learn how to utilize an app.
Notion’s onboarding process starts with this straightforward and well-structured Getting Started page, which provides instructions in simple stages, a list to monitor and check off progress and inspire users to complete the tasks, and a helpful video and articles for more resources. Notion guides customers through fundamental activities on their product page—a quick and sensible way for both activation and adoption.
4. Mailchimp’s error notification
Mailchimp is a robust marketing platform that allows you to manage and communicate with your clients, consumers, and other interested parties. Their marketing strategy focuses on effective contact management, aesthetically designed campaigns, and robust data analysis.
What you can learn
A significant aspect of UX is dealing with user pain points. An error can occur when signing up for a product or amid using. The objective is to make the encounter seamless and pleasant for users. A good UI design may be helpful when creating these sorts of communications, using funny tone to relive the stress.
Mailchimp’s user interface includes a modal prompt box to assist users in identifying and avoiding potentially crucial errors. It also have minimalist styles with funny sketching or illustrations, making it more friendly.
5. Superlist’s color choices
Superlist is a time-saving app that aims to be a central hub for all professional or personal tasks. It has a friendly interface and is easy to use, but behind the scenes, it has cutting-edge tools to improve teamwork.
What you can learn
Choosing what colors, typefaces, and icons will be used in a project is often the first, most challenging stage. After all, you needed to give more thought throughout the first low-fidelity design phase.
Discovering new things on Superlist is a blast. The font is a mashup of a classic sanserif and a kid-friendly one used to convey essential information. A freehand ellipse encloses the “fun” typefaces.
Superlist’s homepage implements a trending feature in UI design where the backdrop color changes in tandem with the cursor’s left and right movements. The palette has a warm undertone, with the predominant hue being a vivid orange.
6. Butter’s popping graphics
Butter is a comprehensive online tool for teamwork that facilitates productive meetings from anywhere in the world. With Butter, you can host highly engaging seminars, training, and conferences without juggling many programs.
What you can learn from this good UI design example
If Butter’s user interface (UI) design, an online platform that aims to make virtual communication “as smooth as butter,” is any indication, they succeed admirably.
The layout of Butter’s website is relatively user-friendly. Butter’s brand values of being approachable, simple, and enjoyable to use are all brilliantly communicated through bright colors, adorable visuals, strong writing, and even the occasional GIF.
Butter’s website is not only attractive to the eye thanks to its clean, but straightforward user interface design also that makes good use of white space and contrast. In addition, the UI design makes it simple to go about.
7. Glide’s clear CTA
Glide is a no-code app creation platform that allows users with no coding skills and a little technological understanding to create mobile, website, and web applications.
What you can learn
A call-to-action (CTA) button is an interactive UI element that may be seen on both the web and mobile. Its primary goal is to entice users to do activities that result in a conversion for a specific page or screen, such as purchasing, contracting, or subscribing. Excellent UI design may assist support that calls to action using color and contrast to highlight crucial buttons and links.
Glide allows you to build web apps using Google Sheets. The purpose of their home page is to entice you to join. Glide employs a luminous blue for the CTAs on the main page and a “Sign Up” button in a sticky header.
Glide also does an excellent job of explaining its product and the issue it addresses using color, photos, GIFs, and typography—allowing non-tech folks to design an application. As you browse the website and learn more about the goods, that luminous blue CTA stands out, saying CLICK ME!
8. Lunchbox’s menu UI design
Lunchbox is a one-of-a-kind online ordering and guest interaction solution that allows you to connect with existing and new visitors. Lunchbox helps restaurants increase repeat orders by removing data silos between their ordering, loyalty, and marketing systems.
What you can learn
Lunchbox’s designers had a great time building an engaging and enjoyable user interface design experience. Lunchbox assists restaurants with digitizing their menus, ensuring that everything is food related.
The designers altered the pointer to a chef’s knife to reach the primary menu and physically fashioned a hamburger from the hamburger symbol. The menu features a strike-through hover effect, giving the impression that the blade is cutting it in two. The whole website of Lunchbox is loaded with these immersive experiences that entice you to explore and read the information through mouth-watering images. Lunchbox is worth a visit if you want to learn how to utilize UI animation to market a product.
9. Dropbox’s color collection
Dropbox serves as a repository for all your work, similar to Google Drive. Whether working alone or with colleagues and customers, you can save and share files, collaborate on projects, and bring your finest ideas to life.
What you can learn
Adaptive color schemes are becoming more common in user interface design, and well-known companies are jumping on the bandwagon. Many best UI design examples no longer have to employ a single, symbolic hue; instead, they may use a variety of predetermined colors or a dynamic color system that adapts to its surroundings.
Dropbox uses 18 colors to represent the brand. These hues were designed to complement one another, encouraging bold and unexpected color combinations.
Within the Dropbox color scheme, there are 32 distinct color combinations. Both power and vitality, or subtlety and tranquility, may be evoked by carefully combining colors. It’s important to remember this color interaction while choosing colors for messages.
10. Slack’s feedback
Slack is a corporate chat platform that links individuals to the information they need. Slack alters how businesses interact by bringing employees together as a united team.
What you can learn from this good UI design example
This good UI design example’s simple but effective feedback messages guarantee that users are constantly updated on the web/app’s status and are never left wondering what is happening. If they encounter a difficulty, an alert will appear informing the user of the issue, what they should do next, and links to obtain assistance.
Slack makes every feedback visible and transparent with its UI Design. When the users hover over navigation items on desktops or laptops, you expect them to change color or launch a submenu. That is Slack indicating that it is clickable.
Similarly, anytime users are kept waiting, Slack employs loaders and updates messages to signal that there is no problem, and that the user interface is working correctly. This feedback reduces confusion, assists users in resolving technical difficulties, and eventually allows them to return to using the app.
11. Airpods’s max scrolling
AirPods Max provides an unmatched listening experience by combining high-fidelity music with industry-leading Active Noise Cancellation. What do you do when attempting to sell a $549 set of headphones in a crowded market? Create an engaging user interface experience that employs movement and effects to entice customers to purchase your goods!
What you can learn
Apple’s product pages are well-known for their slick animations. As you scroll down the website, for example, goods may slide into view, MacBooks may fold up, and iPhones may spin, all while displaying the hardware, exhibiting the software, and providing interactive tales about how the products are used. And they apply the same feature to Airpods Max.
Apple’s landing page models how UI design can sell a product. Designers use text, motion, color, photos, and video to create an engaging product experience as you navigate. Apple has done a fantastic job of combining UI features and movement to convey the narrative of the AirPods Max, why they are the finest headphones, and why you need them.
12. Pinterest’s waterfall dashboard
Pinterest is a digital bulletin board where people may save and organize photos and videos they find interesting, then share them with others. Images are more memorable and elicit more intense reactions from the viewer. As Pinterest has shown, a picture is worth a thousand words.
What you can learn
Pinterest’s primary form of media presence is a collage that scrolls, with photos and videos taking precedence over text. The emphasis is still on building a community of individuals brought together by shared pictures rather than talks, even if you can add captions to the photos and click to access a long list of comments.
No blog article providing examples of inspirational UI design would be complete without mentioning Pinterest’s groundbreaking interface. Pinterest, a true innovator in the field of card design, blends card design with a waterfall flow to present its customers with an exceptionally fluid and stress-free experience.
Pinterest has cleverly increased readability and given the components the appearance of “clickability” by tinting each card a little different color upon mouse interaction.
13. Bauwerk’s search filter UI
A search filter, an extension of faceted search, is a specific property that a visitor may use to narrow the search results of a particular product page listing, such as by size, color, price, or brand.
The immersive and simple property search filter on Bauwerk assists consumers in narrowing their search to locate what they’re searching for. The user interface does a good job of emphasizing the user’s option and the ability to delete any field by clicking the X—providing the user with clear feedback and the opportunity to alter their mind.
The bottom left also displays the user how many properties they may anticipate based on their current choices, which helps to manage expectations. To draw users’ attention, designers ingeniously employed distinct, bright colors for the number of properties UI elements and the “display results” button.
14. Tumblr’s customized settings
Tumblr is a blogging and social networking platform that allows users to create short blog postings called “tumblelogs.” Tumblr’s main distinction is its free-form nature and users’ ability to modify their sites significantly.
What you can learn
Unlike Medium, Tumblr allows users to tailor the interface to their objectives and demands. This improves user efficiency, general usability, and user experience.
Tumblr’s interface basically screams to the users: “Hey let’s be creative.” The customize button is conveniently located in the top menu bar and offers a variety of choices ranging from adjusting the page width to changing the color palette. The appropriate color scheme may improve readability, fulfill aesthetic tastes, and speed up navigation.
They also feature a “keyboard shortcuts” option, which allows their experienced users to break through the efficiency plateau and be even quicker and more productive while using the website. Instead of pointing visitors to it, Tumblr has placed it in a menu where users may return to it after they’ve mastered the fundamentals.
15. Duolingo’s gamified UI design
The goal of Duolingo, an online language-learning platform with over 100 courses in 40 distinct languages, is to make learning a new language as simple and enjoyable as possible for people of all ages and backgrounds.
What you can learn
This UI best practice throws its users right into language learning with visual and audio-based exercises. Users practice their input and output abilities by reading, writing, listening, and answering the questions in their target language.
Studying is boring. And Grammarly makes it “fun” or “exciting” by using projections of forthcoming modules that get harder every time user passes a test. They did this to keep players engaged, as does a weekly leaderboard that pits them against one another. Duolingo employs login streaks and incentives to keep players returning every day, much like many smartphone games.
Since users never know what sort of question they’ll be asked next, the combination of these four elements not only ensures a degree of engagement that retains their attention for longer but is also necessary for language acquisition. Duolingo employs a point-earning, level-climbing structure to make learning like playing an engaging and motivating game.
16. Headspace’s access option
Headspace Health is the world’s most accessible and comprehensive mental health and well-being treatment source. Headspace also includes Headspace for Work and Ginger, which works with over 2,500 employers and health plans to give their employees access to meditation, mindfulness, coaching, counseling, and psychiatry.
What you can learn from this good UI design example
Headspace makes feature accessibility for people with impairments much easier by using text-to-speech captions and keyboard shortcuts.
Headspace’s accessibility settings are an excellent example of a UI design that includes all users. Users may customize the size, colors, navigation choices, and readability settings and employ features like voice communication, text magnifiers, and a virtual keyboard. The bright orange stands out against the backdrop, attracting the attention of its target audience—those who have difficulty seeing user interfaces.
This adaptability allows all users to shape the program to utilize it effectively. It will enable customers to flexibly control their experience, encouraging them to return.
As a widely successful meditation software, this example of accessibility in user interface design throughout their website and app fully displays Headspace’s principles of tolerance and acceptance.
Wrapping up
That wraps up our countdown of 16 good UI design examples that successfully grab the attention of their target audience. Businesses are beginning to realize that it pays off to put in the effort (and resources) required to create visually appealing, informative, and shareable blog material.
More related posts from Web Development blog you shouldn’t skip:
