We take a look at 5 successful apps and explore why good UI design is so important and some key UI design considerations.
What is UI Design and why is it important?
The term ‘UI’ is often misused or confused with the term ‘UX’. Although both UI and UX relate to different aspects of a user journey, both elements are crucial to a product and work closely together.
UX design covers the more analytical and technical components of the design. UX design is the process of enhancing customer satisfaction and loyalty by improving the usability, ease of use, and pleasure provided in the interaction between the customer and the product. It also tries to ensure that the look and feel of all screens have a coherent flow and journey. UI stands for ‘user interface’ and refers to the series of pages, and visuals (such as buttons and icons) that allow a person to interact with a digital product or service. Therefore, UI designers need to ensure that the functions and navigation on digital products are as intuitive and user-friendly as they can be.
Here are the key considerations when designing with UI in mind, according to The Interaction Design Foundation:
1. Make common elements such as buttons perform predictably so users can unconsciously use them everywhere.
2. Maintain high discoverability by clearly labelling icons and CTAs.
3. Every element should serve a purpose to avoid confusion.
4. Focus on hierarchy and readability:
- Minimise your number of alignment lines, justify your text; typically use edge alignment.
- Draw attention to key features using:
- Color, brightness and contrast.
- Text via font sizes, bold type/weighting, italics, capitals etc.
5. Minimise the number of actions for performing tasks but focus on one chief function per page; guide users by indicating preferred actions.
6. Keep users informed with responses/actions and feedback.
7. Consider defaults to reduce user burdens (e.g. pre-fill forms).
8. Reuse design patterns to help guide behaviour regarding navigation and search functions.
9. Brand consistency.
1. Costa Coffee Club App
In its first year, Costa's Coffee Club became one of the top 10 largest loyalty programmes in the UK. Graphite provided the initial innovation, UI and UX design that contributed to the success of the well-loved Costa Coffee app. Costa wanted to offer greater value in its loyalty scheme, by enabling members to access their daily coffee more quickly by creating a new ‘pay and collect’ feature in-app, and a fast-lane in store.
Naturally, the ease of the user experience hides incredibly complex UI and material design. The app has intuitive navigation, call to actions are made clear throughout the app, so users can find what they need with speed and ease.
The buttons are large and clear. For example, in image 1, through the use of large, named buttons, the user instinctively knows how to ‘Login’ or ‘Register’. The app navigation is simple through the use of tabs at the bottom of the screen. Also, there aren’t very many pages which provide all the user needs in order to complete their goal on the app without making it a difficult or timely task. This relates to Hick’s law by the psychologist William Edmund Hick. He stated that the more choice a person has the longer it will take that person to make a decision.
The use of small arrows helps the user identify that when clicking on a button/word, that they will be taken to another screen (as seen in images below).
As seen in image 2, the points page presents the user's points information so that they don’t have to search for it and can simply check their balance at a quick glance.
2. Harvey Nichols
The luxury British department store Harvey Nichols has a rewards app that can help users build up points to graduate to the next level of membership (bronze, silver, gold & black). Customers get more rewards as they move up, including access to exclusive offers and content. The Harvey Nichols Rewards app uses burger menus, bold titles and small arrows to communicate to the user where they can click on the app to view new screens. The app has several screens that are easy to navigate by selecting a section from the burger menu. The first page you see when you open the app (image 1) presents key information to the user so they can quickly access it including their points balance, points level (e.g. Silver) and current offers that may be of interest.
Headspace is a meditation and mindfulness app where users can listen to different types of meditation tracks focused on specific areas such as anxiety and sleep. The navigation in this app is smooth and straightforward via use of the bottom nav bar, meaning that users can easily get to the section that they desire.
The app also has a search function to further promote the ease of finding a particular track. Buttons are intuitive - they keep to the theme of coloured boxes with titles- elements that aren’t clickable remain white to show no significance to the user. Branding is also consistent through the use of calming colour palette and characters. The app is considered one of the most successful applications in its industry, having been estimated to be worth more than £250 million in value by Forbes recently.
The now world-famous Airbnb almost needs no introduction. It’s a hospitality service that helps users find a place to lodge or arrange a homestay, or tourism experience. The app allows users to quickly find a result perfect for them by using the two filter boxes at the top left of the screen. ‘Dates’ one of the first things a user will discover. You are also able to filter based on what you are looking for with ease, by clicking on the boxes underneath the question ‘What can we help you find?’. As users know intuitively that they can scroll down the page to view more content, they also know that they can scroll sideways through all of the hospitality options due to one of the boxes being half visible. Instinctively, users pick up on the UI design of buttons having a grey outline around them, so that the majority of people will understand that anything without that outline won’t be clickable, avoiding user frustration.
Asana is a web and mobile application designed to help teams organise, track, and manage their work. The app uses the same intuitive navigation bar at the bottom of the screen as 3 of the other apps explored in this article do. The basic UI design makes the experience stress-free for users. There are not too many options, navigation is clear and there is a clear route to achieving goals. The simple design also ensures that all elements have a purpose. Buttons and actions are made clear with icons and drop down arrows which the user intuitively interprets as clickable.
Through everything we design at Graphite, we strive to make a positive impact on people. Human centred design is at the very heart of what we do. We’ve worked with global enterprise clients to design bespoke and strong UI focused applications. This process often starts with a design sprint. If you’d like to find out how Graphite can help your business, please get in touch via the form below.