10 User Interface Design Principles
There’s a misconception that a website is just a bunch of pages grouped under a website. But it is so much more than that! It is an interface where a person or company can interact with their audience. Through that interaction, you can ensure quality experience to your viewers.
Essentially, User Interface (UI) design is the subset of User Experience (UX) design, that focuses on the functionality & layout of interfaces. User Interface is the part of the website or mobile app that the user interacts with.
Now that we have the definition down, the following list contains UI tips you need to know and need to apply:
Know Your User
Also known as Know Thy User
Above everything else, you must know who your users are! More specifically, know what your users need, dream of, or aspire, and know what is in the way of getting it. That gap between their current state and their future (dream) state is what you will fill.
However, getting this kind of insight is not easy. Getting to that level of empathy requires extensive and careful observation and analysis. It requires you to interact with your website users and ask them questions that focuses on them:
- What are their goals?
- How can a website help them achieve those goals?
- Etc.
But don’t just stop at the fundamental needs, but investigate their wants as well. After all, desires are just outgrowths of needs. If you want to ensure maximum satisfaction with your users, address their wants while simultaneously fulfilling their fundamental requirements.
Analyze all of the data you have collected on your target persona and keep them in mind with every decision you make, from how people use your interface to what types of content you’ll highlight within that interface.
Specify How Customers Will Use Your Interface
Before you start to design your interface, you first need to define how people will use your product to achieve their goals. It is estimated that there will be 270 million smartphone users by 2022. Therefore this kind of planning is more important than it may appear.
People can use your website in two ways; directly or indirectly:
- Directly — as in interacting with the elements of your product
For example: swiping a card, selecting an item using a fingertip, tapping a button, etc.
- Indirectly — as in interacting with an element external to your product
For example: Using a mouse or keyboard, drawing on a Wacom tablet, etc.
When planning your user interface, your decisions should heavily revolve around the collected information of (1) who are your end users, and (2) what devices they use.
If you are targeting the millennial generation, you should probably go with touch/swipe with minimal interaction, whereas if your aim is to target programmers, you’ll want to support all the common keyboard shortcuts to minimize time working with the mouse.
Lay Down User Expectations
Many interactions with a site or app have consequences: clicking a button can mean placing an order, spending money, giving feedback, influence others, etc. The bigger the consequence, the higher the stress level. A well developed UI helps the users and does the best it can to lower the stress levels.
One way to do so is by letting your users know what will happen after they click that button before they proceed to do so. You can warn them through either design and/or copy:
Lay down user expectation with design:
- Highlight the button that corresponds to the desired action
- Use commonly recognized symbols (like a trash can for delete something, a plus sign to add something, etc.)
- Add colours with a relevant meaning (green for “go”, or red to “stop”, for example)
Lay down user expectation with copy:
- Writing a clear button copy
- Provide warning and ask for confirmation
- Provide directional or encouraging copy in empty states
When it comes to irreversible actions, such as permanently deleting something, it is always good to double check people if they are sure.
Prepare For Mistakes
People make mistakes. What I’m trying to say with this painfully cliché statement is that we should anticipate mistakes. There are two ways to help lessen the impact of human error:
Preventing mistakes before they happen, and providing ways to fix them after they have occurred.
Prevent mistakes before they happen:
There are several mistake prevention techniques in e-commerce and form design. Buttons remain inactive until you fill out all fields. Forms detect that an email address hasn’t been entered properly. Pop-ups ask you if you really want to abandon your shopping cart.
Being proactive about preventing mistakes is less frustrating than trying to fix your mistakes afterwards. The reason for that is because people are usually overcome with a satisfied feeling after they click on the “Next” or “Submit” buttons.
Providing ways to fix mistakes after they have occurred:
Having said the previous things, mistakes can still occur regardless of our efforts to minimize them. That’s when a detailed error message comes in really handy.
Your error message should contain the following 2 things:
- Explain the problem, and
- Explain how to fix it
If it’s a mistake or a problem that can be reversed or restored, add a link where the user can learn more about how and where they can reverse it.
Give Feedback A$AP
In the digital world, we are often left in the dark. We are used to having our surrounding environment give us feedback. We speak, and others respond (usually). But when users interact with websites or apps, we don’t see their reactions, we don’t know what’s happening in front of the screen. Same goes for digital interface as well. Too often we are left to wonder what is happening behind the screen, whether we should reload the page.
Use interface design to give your users feedback right away! Use animation or a loading bar, to ensure their engagement if loading or processing something takes longer than expected. It is always better to communicate with the user what they are waiting on instead of letting them overthink why the loading is taking this long.
Be Careful With Feature Sizing and Placement
When it comes to sizing and placement, there are the 3 most important UI design principles to consider:
- Make buttons and other “click targets” stand out, (this is especially important with menus and other link lists, where you have to make sure users don’t click on the wrong button by accident.)
- Buttons with the most common actions should be the largest and most prominent.
- Place commonly interactive elements (like navigation or search bar) on the edge or corner of the screen.
As you are considering your element sizing and placement, always keep your interaction model in mind. Meaning, make sure the placements are well-placed with your horizontal or vertical scrolling of the screen, and with other similar layout factors.
Don’t Ignore Standards
There’s a misconception that you have to “reinvent the wheel” to stand out. It is false, and let me tell you why:
Because a revamped version of a familiar interaction or interface adds “cognitive load”: it makes people think again about a process they’ve already learned.
The moral of this segment is that having a similar outline to your competitor is not necessarily a bad thing, because it helps more people to transition to your product.
Make Your Interface Easy To Learn
When it comes to simplicity, people often cite a paper by Harvard psychologist George Miller called, “The Magical Number Seven, Plus or Minus Two: Some Limits on our Capacity for Processing Information.”
The article suggests that people can only hold 5 to 9 things in their short term memory with any reliability. So, whenever possible, limit the number of things a person needs to remember to use your interface efficiently and effectively.
You can facilitate this by chunking information, i.e., breaking it into small, digestible chunks.
Pro tip: Don’t use “learn more” or similar non-specific texts in links and buttons. It is not effective because it doesn’t necessarily tell the reader what they will “learn more” about.
Decision-Making Should Be Simple
In addition to Miller’s law, Hick’s Law provides us all the reasons to build a calmer, non-pop-up-y, advertisement-clogged website.
Hick’s law is sometimes cited to justify menu design decisions. For example, to find a given word (e.g. the name of a command) in a randomly ordered word list (e.g. a menu), scanning of each word in the list is required, consuming linear time, so Hick’s law does not apply. However, if the list is alphabetical and the user knows the name of the command, he or she may be able to use a subdividing strategy that works in logarithmic time.
The more options you present a user, the harder it becomes for them to make a decision. This goes for almost everything we build:
- Overall layout
- Navigation menus
- Pricing pages
- Blog indexes
- Content feeds
The lesson is this: the simpler we make our designs, the faster and easier it is for users to make the decisions we want them to make. That’s exactly why landing pages and non-newsletter emails should only have one call to action.
Learn From The Data
While user research and testing can be incredibly helpful in guiding your design decisions toward fulfillment of your site’s goal, data gathered after launch remains invaluable. There are a bunch of analytic tools which you can use for monitoring these achievements.
You can use Mixpanel, which focuses on events, while Google Analytics is more behavioural, providing you with session times, traffic sources, etc. And, of course, both of these tools are FREE!
Alright, now that we have got the basics down, and you (hopefully) picked up everything that I have laid down, go and create beautiful and user-friendly interfaces! 😍 😍 😍
Good luck, and don’t forget to tell us how it goes…
Lattice Studios is a product development & design studio based out of Calgary, Alberta. Check us out at latticestudios.com and on our social media @latticestudios.
