Apps are graded based on the user experience or UX. The user experience includes everything from how smoothly it is installed and upgraded to how easy it is to use on a daily basis. In general, it is the user interface or UI that people judge your app on because that’s what they see when they open it up. A poorly designed user interface is hard to use, whether you literally can’t tap the necessary button or can’t read the text. What are some of the key UI elements, and how do they impact the app’s design?
What Are User Interface Elements?
There are four main categories of user interface elements. They are input controls, navigational components, informational components, and containers.
Input Controls
Input controls are used to make selections that the app then uses to determine the correct course of action. Input controls include check boxes, radio buttons, list boxes, text fields, toggles, date fields and dropdown lists. When app developers create input controls, they need to make sure the inputs work on every device users will be using. A classic mistake is creating selection buttons that work when clicked by a mouse but are not usable if you’re tapping them on a tablet and can’t select it via a phone keyboard. Input controls can be contained inside a container window. Ideally, it will resize to fit the screen it is being used on.
There are too many apps and websites that make data entry fields mandatory. For example, websites will lose people if they throw up too many pop-up ads and requests for people to sign up for mailing lists. Your shopping cart abandonment rate goes up if you push them to sign-up for an account while checking out. Requiring them to click too many buttons to generate a report or see their account balance will turn them off. Make things as simple as possible but no simpler.
Navigational Components
Navigational components are needed to find content or move through the app to get to the required screen. Navigational components include sliders, pagination, search fields and icons. Another example of a navigational component would be breadcrumbs. These tell the person where they were, and they can click on a bread crumb to go back to where they came from instead of having to hit back four or five times. Navigational components are essential if you can’t fit everything on one screen, but you don’t want the navigational components to take up too much real estate in their own right. For example, sliders and page selection options could get in the way of other controls or the content itself.
Informational Components
Informational components are there to give the user needed information. This can include icons, progress bars, in-app notifications, message boxes, modal windows and tool tips. If you don’t provide relevant informational components, users may not know what to expect. On the other hand, app developers who put up so many informational notices that you can’t get to the app itself have failed when it comes to UX. The worst-case scenario is when there are multiple warning pop-ups that you cannot close to get to the app to fix the error.
Don’t try to put too much information in a single component or screen. If people can’t make sense of it, they can’t make use of it. On the other hand, you don’t want a disordered layout, where they’re trying to find the information they’re looking for. Note that this is as true of informational components like the box you click to get help as when you’re trying to find the answer to your question on an FAQ page.
Containers
An accordion is a vertically stacked list that hides the second or third level until it is clicked. If selected, it then expands like an accordion, hence the name. This is similar to the concept of a drop-down menu but takes up less space than a menu that can expand out like tree branches. Containers are necessary when you can’t fit everything in an app interface without making them scroll too far. They’re becoming more common on websites because this is increasingly what users are comfortable with. It has the side benefit of creating a lean, uncluttered screen. Ensure that your content layout is orderly and clean. You can use branded color schemes or occasional branded images like your logo to connect customers with the brand instead of tons of tie-ins.