User Interface 101: The Good, the Bad, the Basics

by Isaac Joekong, Jun 02, 2017

We've all had those moments where we start using software or we're navigating through a website and it just gets so damn frustrating. This often comes down to user interface (UI). The goal of UI design is to ensure your end user's interactions with your website or app are as simple and efficient as possible. We can do this by anticipating the actions our users need to perform in order to accomplish certain tasks and ensuring the interface has elements to facilitate those actions. These elements should be easy to understand, accessible and appealing. These elements need good UI design.

UI Basics

Simplicity is key! The best interfaces are almost undetectable by the end user. Try to avoid unnecessary elements and use clear language when you're labelling. It's always good to provide shortcuts that let your users get from A to B in the quickest way possible without overpopulating the page.
Be Consistent. Your application/website shouldn't seem as though it's been designed by four or five different UX designers. What I mean is that an action should produce a similar outcome throughout the application. For example; if double-clicking on an item produces an effect in one list, then the same action on a different item in any other list should produce a similar effect. As a result, once a user learns how to do something, they can transfer that skill to other parts of your app/site.
Design is King. There are quite possibly thousands of web pages/applications that do the same thing or something similar. Make sure your site stands out from the crowd. Utilise colour and texture to direct attention toward an item or redirect away. Consider the spatial relationships between items on the page and develop your page structure based on importance. 
Test, test, test. Prototype your design ideas and UI design tools using wireframes and user flows. Remember: what you think your end user's workflow looks like and what it actually looks like can be very different. To create a good UX, you need to know what problem you're solving before you can make good UI.
Keep your users in the loop. Be sure to inform your users of location, actions, changes in state, or errors. The use of UI elements to communicate status and next steps can reduce frustration for your user. This is especially the case when it comes to forms. Users want to know how long it will take to complete the form and where they are in the cycle.

UI Design Tools

Users are now familiar with certain interface elements acting in a particular way. It's important not to frustrate your users by deviating from what they know. Listed below are a number of interface elements that are known to users.
  • Input Controls: checkboxes, radio buttons, dropdown lists, list boxes, buttons, toggles, text fields, date field
  • Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons
  • Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows
  • Containers: accordion
Good UI design isn't rocket science. It really comes down to giving the users what they want, which is generally an easy to use, streamlined application/website. The basic principles mentioned in this article are good ways to satisfy your end users. A UX designer can help implement these practices and ensure your user interface doesn't lead to any of these moments.