• Chasm Communications

Defining UI and Its Importance in Creating a Good UX

July 01, 2017

In a previous blog post entitled "What Is UX?", we highlighted 7 core components that play an important role in shaping a user's perception of their experience with a website or software application.  The user interface, abbreviated UI, is one of the most universally familiar of these core components. 

UI is defined by PC Magazine as “the way a person interacts with a computer, tablet, smartphone or other electronic device. The user interface (UI) comprises the screen menus and icons, keyboard shortcuts, mouse and gesture movements, command language and online help, as well as physical buttons, dials and levers. Also included are all input devices, such as a mouse, keyboard, touchscreen, remote control and game controller.”  A common example of a UI is the on-screen menu used to tune your cable box to a specific television program.  Using your remote control (your input device), you are interacting with the cable box (the electronic device) through the on-screen menu (the UI).  

An effective UI uses a balanced combination of graphic elements, visual cues and controls to engage users and provide them with an effective method for interacting with your product in a natural and intuitive way. For instance, if you're creating a web application, your UI would likely consist of design patterns and controls such as navigational menus, buttons and accordions to support your user's interaction.  These controls would be styled using a variety of elements and cues to create a visual flow and complement your company or product's brand.  Colors, iconography and typography are examples of some of the visual elements included in the UI.  The way in which these visual elements are organized on the page and the prominence afforded to each of them through the use of font weights, sizing and colors provide the user with cues on how to engage with your UI. To support a great UX, your UI elements should be visually appealing, intuitive, and most importantly, support proper interaction and functionality.

Ultimately, your UI should be:

  • Functional
  • Consistent
  • Easily accessible 
  • Clear and well defined
  • Aesthetically pleasing
  • Intuitive & easy to use

Remember, your UI is the primary medium through which users will interact with your website or software application.  During the design and testing of your UI, you will need to think about the types of devices your UI will be accessed from as well as the environment the user will be in at the time.  Will they be using a large screen device? A touch screen? Will they be trying to interact with your UI with the same hand they are holding the device with? What will light conditions be?  The answers to these questions are important to consider while you are selecting your UI components and strategy (e.g., text size, background colors, button placement).  Additionally, if your UI will be utilized on multiple devices, you will likely need to adapt the UI to the various devices to achieve the best overall user experience.  

So, how do you know if your UI is going to create a good UX?  Test, test and test again.  As you are designing the interface, always put your users first.  Create personas, define user stories and talk through the user requirements with real users.  Before you invest in the programming, review and test your UI design with stakeholders and a few representatives from your user group.  There are several inexpensive programs, such as Invision, that will allow you to upload static designs to create a simple prototype for testing.  Although this may add a bit of time on the front end, it will save you an immense amount of time in the end and will lead to happier users.