10 Must-Know UI Principles
As a digital lab, we are always looking out for insights that inform the work that we do. As you know now we are experts in design, which branches out into multiple facets. In our world, design is simply another word for problem solving.
We live in a digital world and as designers we need to be on top of our game for our sake and that of our end users. As professionals, we need to adopt a human centred approach that leaves our users feeling like they are our first priority, always.
Here are 10 principles we think are absolutely
beneficial for any UI designer.
- Avoid making blank states more than just an empty display
Let’s say a display that would typically be populated with user input is blank because the user has opened your product for the first time. This could be anything. A list of books, a playlist, a quote of the day, but it’s empty because no one has added anything. Don’t leave a blank space because you miss the opportunity to provide guidance or information about what your product can do. Use your empty state to get people interested- give them advice or guidance or lead them to specific actions. Whatever the case, do not just say ‘There is nothing to see here’.
- Never use sliders for quantifiable values
Ever get frustrated when you’re trying to put a value on a specific item but it just keeps skipping your value? It’s not you, it’s the designer.
Sliders are great for a quick show of feeling… When it does not have to be exact. Sliders add to the experience for qualitative values for instance when you want to make something a little warmer, a little brighter, a little louder. We do not use sliders for quantitative values- like age. Keep it simple and give your user the option to input their value if it is specific.
- Only use a dropdown menu if there are multiple options
First, they conserve screen space. Users know how to use a drop down menu, they are standard which means we can keep it that way.
When there are several options like choosing a country, then a dropdown is the perfect component to use. It is important to remember that dropdown menus are always to improve usability. If you only have a handful of options however, consider using radio buttons or sliders as an alternative.
If you have too many options for the dropdown then consider a mini search or a filter. A user will get to their options quicker that way, and you have created a great experience.
- Make controls large enough for human fingers
If your interface is touch based, adequately size your tappable elements. When a user cannot tap an element, this becomes frustrating for them especially if they end up tapping elements they do not care for.
In general, use a 2mm padding between elements as a rule of thumb and avoid mis-taps. Apple’s iPhone human interface guidelines actually recommends a minimum target size of 44 pixels wide 44 pixels tall. Microsoft’s Windows Phone UI Design and Interaction Guide recommends a touch target size of 34px with a minimum touch target size of 26px.
-
- Use infinite scroll for feed style content only
Infinite scrolling is a web design technique that loads content continuously as the user scrolls down the page, eliminating the need for pagination. Social Media platforms such as Twitter and Instagram have popularized this mechanism. The benefit is that you never have to leave a page and content loads continuously as a user scrolls. Content in this set up loads so quickly that users tend to stay on the page for longer- creating user engagement.
While this may be the case for some popular platforms, the rule does not apply to all platforms.
-
- Use pagination for content that has a beginning, middle, and end
Pagination in contrast to the infinite scroll provides a completely different interaction for users. Pagination is good for providing specific results. Pagination provides the user with control and specificity. Pagination allows users to orient themselves by making it clear where the beginning, the middle and the end are. Secondly, displays are most up to date and current and users can scroll down to something that ends, landing in a footer where they can seek further options if they exist.
-
- Never require laborious reading to understand how a program works
Show, Don’t Tell is a technique that is exactly that. This technique allows a reader to experience the story through multiple senses. A reader can experience action, thoughts and feelings rather than merely telling them.
Showing a user how to use something is much more effective than telling them. An easy way to do this is through a video demo and where this is not possible then perhaps opt for illustrations.
-
- Make it easy, give it a label
We are sure you have heard the term ‘Designers designing for designers’. As designers we need to answer two questions: ‘Does it work?’ and ‘Is it pleasing to the human eye?’
Mystery icons without labels serve no purpose to an end user and only work where a user knows the content they are interacting with. Sure, some icons can get away with not having labels: Bold, Italics, underline on your Microsoft doc for instance. Most icons, however, need to be described.
Take this as an example: A magnifying glass icon can either mean zoom (in or out) on one interface or search on another one.
-
- Use device native interface components where possible
Using components that are built into products provides a familiar experience to users.
Regardless of how awesome of a designer you are, you can’t justify designing your own components from scratch. Even if it looks better, the user still has to learn a new component when there’s one built into their device.
Use native components to save time and effort for your team
-
- Use a spinner if the task will take an uncertain amount of time
Using a spinner lets a user know that their request is being processed, without saying how long it will take. A spinner is a good progress indicator, it gives immediate feedback, it removes doubt and provides a sense of time- even though it is not specific.
When you know how long it will take, on the other hand, you can use a progress bar as a perfect communication tool.
We are always looking out for interesting insights that make the design process more valuable. User Interface design is an iterative process that centralizes the user, just like we do.
We are Altivex, a design and innovation lab, what can we do for you?
*This list was adapted from Will Grant’s 101 UX Principles.
article by: Thobile
Recent Articles
Agency? Lab? What are we?
Join our team to create work that will change the way people live. We give our team the support they need to develop personally professionally.
The Designers Guide to Altivex Icons
Join our team to create work that will change the way people live. We give our team the support they need to develop personally professionally.
AI Is Here To Stay, Here’s Why…
Join our team to create work that will change the way people live. We give our team the support they need to develop personally professionally.