The latest area to come under the spotlight is that of the User Interface (UI for short) Design. One reason for this is that Google is now giving ‘points’ to sites that offer the best ‘User Experience’. As these lead to higher rankings, they have added focus to this area for many.
The other reason is the rise (and rise) of the mobile device as a Web Surfing tool, the smaller screen size ‘forcing’ designers to put more thought into the layout of the page and the navigation of the sites they design.
These are the reasons for the increased awareness of IU, but what are it’s basics? Fundamentally, IU is all about focusing on anticipating what users might need to do next and then making sure that the interface has elements that can support his action and that these are easy to access, understand, and use to.
UI thus brings together concepts from 3 areas:-
1) The way the users interact with screens
2) The visual design of the screen
3) The way that the information they want to access is structured
Interface Elements
Some web designers are often tempted to change the way users interact with the sites they design. Now whilst that may sound like a great idea as it makes the sites they design different, it can also be a terrible move as users have over time become familiar with the way things work, and simply cannot get used to any new form of design.
Thus it is always best to fit in with what is expected and try to be consistent and predictable in your choices of layout. Following this rule helps with completion of the tasks that need to be done on the page, increase efficiency, and above all user satisfaction.
The main Interface elements are:-:
- Input Controls: buttons for selections, text fields for input, checkboxes (another method of selection), toggles and radio buttons (often only one being selectable), dropdown lists and list boxes (yet another selection system) and date fields.
- Navigational Components: breadcrumbs, search fields, page numbers, tags and other icons.
- Informational Components: tooltips, progress bar (so you can tell how far you through a process), notifications, and message boxes.
- Containers: accordions and tabbed content.
Of course there are instances when many of the above elements are appropriate for displaying the content on the page. When this occurs, it’s vitally important to consider which ones work the best together. A good example of this is that some elements which help you save valuable screen space, increase the mental burden on the user mentally by making them guess what is within these space saving elements.
What Are The Best Practices When Designing an Interface
Here everything depends on fully knowing your users, including understanding their goals, skills, preferences, and their tendencies. This is important as once you know your user its make it easier to choose the right interface elements / practices from the list below:-
- First keep the interface simple. The best interfaces are those that are almost ‘invisible’ to those using them. They avoid all unnecessary elements and are clear in the language they use on all the labels, and in their message.
- Be sure to create consistency and use the common UI elements that are expected. The use of the common elements in your UI is vital as your users will feel more comfortable and are thus able to use the site more efficiently. One vital part of this is the ‘rule’ that once a user learns how to do something, they can transfer that ‘skill’ to other screens and parts of the site.
- Choose your page layout carefully. It is vital to consider the spatial relationships between items on the page and structure all the elements based their importance. Carefully placing the items will help draw attention to the most important pieces of information and interactive elements and increases the scanning speed on the page as well as its readability.
- Use Colour to direct attention. The careful use of colours and texture can help you direct attention toward, and as importantly redirect attention away, from less important items, thus helping users to interact more efficiently.
- Similary, you can use typography to create hierarchy and improve clarity. It is vital to carefully consider the use of typefaces. The different sizes, fonts, and arrangement of the text can increase legibility and readability.
- Communicate what is happening. Users are easily confused and can lose heart when dealing with complicated (or for that matter simple) interfaces, so it is vital to keep your users of where they are in any interactive process. By using the various UI elements you can communicate the user’s status and thus reduce frustration. One vital point here is that you can show the user the steps they can take to get over any problems that they are experiencing.
- Always display the defaults. With some careful planning you can anticipate what your users want to do when they get to your site, and can thus use the best defaults in the interactive elements on the screen. Doing so reduces the burden on the user, increases efficiency and also improves user satisfaction. This is vital when it comes to form design as here you have an ideal opportunity to populate fields with pre-chosen data.
By using the above you can be sure to design a screen using the very best User Interface and thus improve the experience your users have.
