21 UI design secrets you need to know

[Rss Bot 1]

Beyond session times and bounce rates, the core purpose of user interface design is to make things as effortless and enjoyable as possible for the user. And like most areas of design, having the right tools can help (see our list of web design tools).

If you're looking to break into the world of UI, then take a look at our design jobs board to see what opportunities are out there. For now, though, here are 21 UI design tips and tricks based on 10 years of experience in the field.

01. Know who you're designing for

Tasks like user research, wireframing, testing and information architecture design are often seen as the responsibility of a UX designer, but we’re starting to see a growing blend of the UX/UI designer role emerging. 

According to Invision, “66% of UX designer job postings request UI skills” , so if it has become important for UX designers to understand visual design, branding and typography, it’s only right that UI designers should get involved, or at least have a base understanding of the aforementioned UX skills. 

A UI designer who gets involved in the creation of, or at minimum, pays heed to, the personas, wireframes and information architecture developed in the UX workstream,  will make interaction, colour and type choices that are influenced by the people using the product or service, rather than their own stylistic preferences. By taking the time to understand the users they are designing for, UI designers will create interfaces that are more likely to suit users’ needs, both visually and functionally. 

02. Overcome choice paralysis

Reducing the top level options in the Nike mega menu will help limit choice paralysis for users

Mark Zuckerberg has a pretty simple wardrobe; it’s all grey t-shirts. In his own words: “I really want to clear my life to make it so that I have to make as few decisions as possible”. This principle maps across to interface design, as providing users with too many options makes them overwhelmed, causes them to over-analyse, and ultimately makes them less likely to complete an action or process. Where possible, we should limit the options available, or alternatively hide the options that are less relevant at that stage in the journey.

02. Help direct with default states

Skyscanner opt for default states allow users to customise options

Our default states can do more than just ask users to 'please select'. Websites like Skyscanner find the closest departure airport to the user, suggest dates that correlate to upcoming holidays, and preselect the amount of passengers flying. Designing default states based on what is commonly chosen reduces the amount of effort required by users, allowing them to customise preselected options.

03. Prompt action with empty states

Tidal’s empty states prompt discovery of music you may have never heard before

Unfilled baskets, uninhabited playlists and default search interfaces can often leave users with a sense of emptiness. Take heed from Tidal, who direct users that “don’t have any albums” towards their top recommendations. Rather than creating dead-ends within our interfaces, we should use empty states as an opportunity for discovery of new features and functions that will be of benefit to our users.

04. Fail flatteringly with error states

Kitchen Stories error states apologise for not finding what the user wants

In the realm of digital, things sometimes go wrong, and not designing for this can lead to the user feeling disgruntled. As UI designers, create error states that encourage positive action and sentiment rather than throwing unintelligible messages. The Kitchen Stories app handles this brilliantly, apologising when they return a blank result for a kitchen recipe, and providing a call to action that allows users to submit new requests. See our favourite 404 pages for more examples.

05. Break choices down

Apple break down the process of choosing an iPhone into clear and concise steps

As well as limiting and grouping choices, we can make them less complex by breaking them down into processes. One can imagine that Apple’s back end inventory of iPhone XRs is a big matrix list of hundreds of products with a variety of colours, sizes and networks. But to the user selecting a new Apple iPhone XR via its website, a simple step-by-step interface allows them to narrow down their options one selection at a time. If we are presenting a lot of configuration options, the interface should do the heavy lifting rather than the user.

06. Reduce resistance 

Slack’s interface does the hard work, rather than the user

The interfaces we design should make it as easy as possible for users to complete the tasks within them. When signing into their mobile app, Slack leans on a 'magic' verification link that gets sent to the user’s email address to beautifully skip the odious task of remembering and typing out their complicated password. 

Putting the burden on the interface, rather than the user, makes them far less resistant to get to the end of any process within your website or application. If we have the technology available to speed up the interactions within our interfaces, we should design with this in mind.

07. Take only what you need

Allow users to sign up with minimal information, and let them add once on board

To create a path of least resistance, we should ask the user for as little information as possible at any given stage within our interfaces. The less data a user has to input, the more likely they are to complete an exercise. 

Sites like LinkedIn ask for the bare minimum data (First name, Last name, Email and Password) when signing up to their platform, then gamify the profile creation process by letting them fill out one piece of personal information at a time once they’re onboarded. There’s no way anyone would sign up to LinkedIn if they had to input their entire professional history just to get through the door.

08. Give a sense of progression

Pinterest show progress towards the end goal of signing up with a simple visual indicator

There are some instances where lengthy forms and processes are a necessity. For example, many financial applications require extensive data input and time to complete. When signing up to the Pinterest app, there is an indicator within the interface to show what step (of 4) the user is at in the journey, providing assurance that they are making progress towards their end goal. This sense of momentum makes users less likely to become frustrated about not knowing when a process will end, and therefore less likely to abandon it altogether.

09. Pay heed to conventions

As UI designers, we naturally want to push our creative juices to the limit, and devise new and exciting ways for users to interact with and experience our digital products. That said, we need to strike a balance between originality and familiarity in order to ensure that our users don’t have to spend too much time learning how to use our interfaces. Apps like Snapchat – which got a new logo lately – have alienated many older users with radical navigation options, so much so that the New York Times wrote a guide to Snapchat for people who don’t get Snapchat. 

Given that “you can swipe in every direction and even pinch in and out to access different screens” (see more on Medium), there is an amount of time that needs to be invested in order to learn the interactions before you can effectively use the application. 

Younger users have embraced the discoverability of Snapchat, but adults who understand the conventions of tapping and clicking as means of navigation have adopted the app in fewer numbers. As the web has grown, a number of conventions for element positioning (like baskets in the top right and hamburger menus in the top left) have emerged and should be considered. Our interfaces should excite and delight users, but should also be predictable enough to use if we want to keep up conversions and limit bounce rates.

10. Provide visual feedback

Timely feedback from Google’s Snackbars

Feedback is a gift, and should be treated as such within our interface designs. Google’s Snackbars are a smart little micro-interaction that live in its Material Design system. Snackbars appear temporarily on the screen of an app or website interface to provide brief contextual instructions, errors or acknowledgements that keep the user informed of any consequences of the actions they have taken, be it saving a photo, sending an email or prompting a 'retry' when the app has an error. 

As UI designers, we should provide visual feedback for each of the key interactions within our interfaces. If an item has been added to the user’s basket, let them know. If their payment has gone through successfully, inform them with a thank you message and direct them where to go if they have any queries about delivery or returns. Visual cues and animations can help users to acknowledge the completion of tasks, big and small, within your website or application, giving a sense of accomplishment and helping to reduce anxiety by acknowledging that an action has been taken.

11. Utilise user-generated content

People buy based on what other people say, not just the whimsical copywriting from brands. It’s the reason why so many ecommerce sites make a big thing of customer reviews. Sunglasses brand Meller increased its conversion rate by 13% by featuring images of enjoying their products on their product pages, alongside the more traditional ecommerce photo gallery. 

If you have user-generated content (UGC) available for the brand or company you're designing for, weaving it into the pages of our website or application UI can help increase conversions, especially if the audience are millennials.

12. Treat users as advocates

GoPro’s homepage hero uses video shot by its users to demonstrate the power of the product

Delighting users with products and services is one thing, but they can also be our advocates, or even form part of our marketing team. GoPro’s main hero video on its homepage features footage shot entirely by customers who have used its HERO7 camera (see the best GoPro deals to get your own GoPro).

Using film shot by users of the product demonstrates the capabilities of the camera to prospective buyers in a relatable context, and also rewards the 25,000 people who submitted their videos with a bit of exposure to the GoPro community. If we have a loyal audience, there are myriad ways we can utilise their voices and content, so this should be factored in when designing our next interface.

13. Use imagery to guide users

Line of vision prompting email sign up vs models looking off into the distance

Beautiful imagery has the power to enhance an interface visually, but can also be used to direct attention to specific places within a page or screen. If an image contains a person, users subconsciously follow that person’s line of vision, providing UI designers with an opportunity to subtly direct them towards calls to action or useful information.

The Sunglasses Hut website utilises this concept in its website footer, with the eye line of two people pointing users towards their email sign up. If you flip the image horizontally, they’re just models staring off into the distance.

14. Use negative space in clever ways

There's plenty of room to breathe on the Dropbox Business site

It’s a common mistake for UI designers to want to cram as much information as possible into each and every interface, but this can lead to visual overload, and will ultimately overwhelm users whose attention is being drawn to too many different areas on a page or screen. 

The Dropbox Business landing page uses negative space to great effect, giving each and every element enough room to breathe, whilst providing a concise overview of the product’s benefits. Strategically maximising the space around key information and calls to action will draw users towards them, without other elements fighting for their attention.

15. Start with mobile

Given that in 2018, 52.2 percent of all website traffic worldwide was generated through mobile phones, it’s ever more important to craft digital interfaces that are optimised for users of the mobile web. The desktop view has often been the canvas of choice for UI designers, starting with video-led banners and interactions like rollovers and hovers, then having to strip these out or devise workarounds as we scale these down to mobile.

As an alternative, designing the mobile view first forces us to strip out all of the unnecessary noise and focus on the elements that are crucial for users to perform the tasks within the interface. Scaling up allows us to add enhancements to the desktop view, adding features that are more suited to that experience once we have the key components in place.

16. Get the right type licence

There’s nothing worse than polishing off a beautiful interface, preparing the assets for the development team, then realising that our font choices come with a whacking great licensing fee – or even worse, aren’t optimised for web. There are a number of different types of font licence, some of which charge per user, some per time used, and others that charge a one-off fee. Branding agency Blue Egg give a great breakdown of this.

When making font choices, it’s vital that we consider the financial implications that will result, as well as the capability of the font to render on the web. If budgets are tight, open source solutions like Google Fonts offer hundreds of fonts that are free to use. Also see the best free fonts for designers.

17. Write your interfaces

When we strip back an interface down to the bare bones, remove the colours, fonts, images and animations, we’re ultimately left with one thing; copy. It’s tempting to jump straight to the visual aspect of interface design, dropping in lorem ipsum and placeholder text, but taking the time to write out our interfaces first can enable us to better develop the overall tone and reflect on the messages and stories we’re verbally communicating to our audiences. 

We can really understand the flow of our pages when we read the copy in isolation, giving us the opportunity to accompany our words with visual assets that truly support and enforce the core of what we’re trying to say.

18. Onboard as appropriate

DuoLingo's app has a neat onboarding process

Onboarding is “the process of increasing the likelihood that new users become successful when adopting your product,” according to UserOnboard, and as UI designers we play a key role in deciding how best to introduce our digital products and services to those users. 

Language learning app Duolingo utilises an onboarding flow that drops users straight into the task-based interface, allowing them to familiarise themselves with the product’s features and sample how it works, all before prompting sign up. The user has the chance to test the product before committing to creating an account. 

When our interfaces contain unavoidable, complicated or unfamiliar interactions, we need to teach people how to use them, whether this is done through slideshows, explanatory videos or tutorial overlays. Giving users a sample of 'how it works' as part of the onboarding or introduction will result in less confusion once they are fully immersed within the experience, and encourage adoption from those who see value in the offering up front.

19. Involve your developers

As the people who will end up building our designs, it pays to involve our developers at the earliest stage possible in a project. Designers create the things that users see, but developers enhance the experience of the interface by maximising performance, speeding up page load times and optimising what happens under the hood. 

Involving developers continuously throughout the design process allows them to have input into the way the interface behaves beyond the visual aspect, giving them a chance to offer more input as to how tech like the Slack magic link can be utilised to make our interfaces as effortless to use as possible.

20. Utilise a design system

IBM’s comprehensive Carbon Design System

Ensuring consistency across our website or application interfaces can be something of a mission when multiple designers are involved, and we can often end up with countless variations of the same UI components, meaning replicated work across the project as a whole. According to InVision, a design system is “a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications”.

IBM’s Carbon Design System for example, provides a comprehensive repository of assets, code snippets and documentation for both designers and developers to access when working on UI projects, ensuring that the design team can work faster and smarter with one another. Some manner of design system, or at minimum a pattern library with all of the UI components within a specific project, should be utilised to make our interfaces consistent, assets reusable and maintenance easier.

21. Clean up design files

Love it or hate it, some designers just work messy, and while this makes sense during the creative process, it can be frustrating to pick up a design file for the first time and discover that we need to invest a considerable amount of time working out which layer each element lives on. 

Monzo has found that “from the first .sketch file we created at Monzo, we’ve taken care to organise our design files very neatly. And as we’ve grown from a single designer to a team of 13, maintaining a sensible design environment has really paid off.” Taking the time to clean up our design files by naming our layers, artboards and folders will make it much easier for any designer (including our future selves) to pick up and work on. Your developers will thank you too!

This article was originally published in issue 288 of Web Designer. Buy issue 288 or subscribe here.

Read more:

• The best code editors
• 12 magically meticulous style guides
• 9 great UI designs

View the full article