A web application is only as good as its ease of use. After all, if it is difficult to understand or work with, you will likely be called upon to make changes or upgrades sooner, rather than later. So, to ensure that any user interface you design is simple and uncluttered, be sure to apply the following techniques and recommendations:
- Modal windows– Similar to pop-up windows, although not so annoying or blocked by browsers, modal windows can be used to display login forms, or edit boxes for settings rather than needing to open a new page.
- Hover controls – Rather than displaying every command and function, a user interface is simplified by hiding the lesser used controls from default view, but does have them visible when the mouse hovers over it (e.g. Twitter or Facebook uses hover controls for features like “add to favorites” or “remove content”.)
- Controls on demand – Things can also be hidden by using JavaScript and displaying a set of controls when the user clicks on a pre-set location. Remember, not everyone using the UI needs to have access to the more advanced or specialized controls.
- Labels inside input forms – To make forms less tedious to fill out, consider moving labels from outside the input areas to the inside so that it is viewed as a pre-filled value within the text field. However, this practice should be designed so that the label is dimmed when the user clicks on, then hides once the user begins to type.
- Icons not text – Look closely at the UI. If there is an abundance of labels, consider replacing some of the verbiage with an icon. Not only does an icon take less space, but it also is easier to focus on and can show its meaning just as easily as text. If there is any fear of ambiguity, use a text label.
- Context based controls – Display only the items a user needs to accomplish the task they are working on. By showing only the needed elements, you are able to actually have more control—think ribbons or tags used for Office 2007.
- Visibility of a system’s status – To enhance user experience, a UI should let one know what is going on behind the scenes and if their actions are getting the expected results. This can be done through using AJAX, or perhaps visual feedback such as some type of animation.
- Shortcuts anyone? – In this fast paced world in which we live, everyone is interested in ways to save time. Your UI should be no different. When designing UIs, create shortcuts that allow the user to navigate the pages quickly and easily. This can be implemented by using the onKeyPress-DOM and manipulating the document’s appearance using JavaScript’s window.scrollTo function.
- Color Coding – Many people work best when color-coding is used to help distinguish one item from another. A user interface that is designed to help users quickly distinguish from one job to an unrelated job is easier for people to use. However, be careful that the color scheme is not random and that similar colors are not used for completely different tasks!
- Can it be personalized? – When possible, allow the users to select colors, layout, page appearance, etc. so long as the choices do not compromise the UI’s effectiveness.
- Feedback messages – The feedback message is one that shows up whenever there is an error, it may be a warning or it may appear when an action is completed. A good way to make the feedback messages more user-friendly is to color code the messages based on level of importance, to add a unique icon for each message type and to have a way for the user to close the notification if they will be on the page for an extended time.
- Have help messages to make it easy for people to begin (and continue) using the UI. Whether it is on the sidebar, vibrant graphics, a new icon, etc. a UI is only beneficial if it is being used.
When designing a user interface, remember simplicity of use is the key. Choose your features with care because once you add an element and people begin using it—perhaps relying on it—you will be hard-pressed to take it out. Keep in mind, that a UI with minimal buttons is not necessarily less powerful, it is just better designed. These 12 techniques are ways that you can create an effective user interface.
Whether you design your next UI yourself, or contact Page Progressive to do it for you-either through our website or via Page Progressive on Facebook or Twitter-we want to see your user interface to be all that you need it to be. Contact us today, if we can be of service to you!