User Interface Design

User Interface (UI) Design focuses on anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions. UI brings together concepts from interaction design and visual design.

Choosing Interface Elements

Users have become familiar with interface elements acting in a certain way, so try to be consistent and predictable in your choices and their layout. Doing so will help with task completion, efficiency, and satisfaction.

Interface elements include but are not limited to:

• Input Controls: buttons, text fields, checkboxes, radio buttons, dropdown lists, list boxes, toggles, 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

Best Practices for Designing an Interface

Everything stems from knowing your users, including understanding their goals, skills, preferences, and tendencies. Once you know about your user, make sure to consider the following when designing your interface:

• Keep the interface simple. The best interfaces are almost invisible to the user. They avoid unnecessary elements and are clear in the language they use on labels and in messaging.
• Create consistency and use common UI elements. By using common elements in your UI, users feel more comfortable and are able to get things done more quickly. It is also important to create patterns in language, layout and design throughout the site to help facilitate efficiency. Once a user learns how to do something, they should be able to transfer that skill to other parts of the site.
• Be purposeful in page layout. Consider the spatial relationships between items on the page and structure the page based on importance. Careful placement of items can help draw attention to the most important pieces of information and can aid scanning and readability.
• Strategically use color and texture. You can direct attention toward or redirect attention away from items using color, light, contrast, and texture to your advantage.
• Use typography to create hierarchy and clarity. Carefully consider how you use typeface. Different sizes, fonts, and arrangement of the text to help increase scanability, legibility and readability.
• Make sure that the system communicates what’s happening. Always inform your users of location, actions, changes in state, or errors. The use of various UI elements to communicate status and, if necessary, next steps can reduce frustration for your user.
• Think about the defaults. By carefully thinking about and anticipating the goals people bring to your site, you can create defaults that reduce the burden on the user. This becomes particularly important when it comes to form design where you might have an opportunity to have some fields pre-chosen or filled out.

How to make Great UIs

To deliver impressive GUIs, remember — users are humans, with needs such as comfort and low cognitive loads. Follow these guidelines:

1. Make elements such as buttons and other common elements perform predictably (including responses such as pinch = zoom) so users can unconsciously use them everywhere. Form should follow function.
2. Maintain high discover ability. Clearly label icons and include well-indicated concordances.
3. Keep interfaces simple and create an “invisible” feel. Every element must serve a purpose.
4. Respect the user’s eye and attention regarding layout; focus on hierarchy and readability:

• Draw attention to key features using:
• Color, brightness and contrast. Avoid including colors or buttons excessively.
• Text via font sizes, bold type/weighting, italics, capitals and distance between letters. Users should pick up meanings just by scanning.

1. Minimize the number of actions for performing tasks but focus on one chief function per page; guide users by indicating preferred actions. Ease complex tasks by using progressive disclosure.
2. Put controls near objects users want to control.
3. Keep users informed vis-à-vis system responses/actions with feedback.

• Alignment — minimize your number of alignment lines (think justified text); typically choose edge (over center) alignment.
• Draw attention to key features using:
• Color, brightness and contrast. Avoid including colors or buttons excessively.
• Text via font sizes, bold type/weighting, italics, capitals and distance between letters. Users should pick up meanings just by scanning.

How to optimize user interface design

User interface designs should be optimized so that the user can operate an application as quickly and easily as possible. Many experts believe that UI design should be simple and intuitive, often using metaphors from non-computer systems. With a more intuitive user interface design, users will be able to navigate around a website easily, finding the product or service they want quickly. One way to check the intuitiveness of a user interface design is through usability testing. The feedback from usability testing can then be used to optimize the user interface design of a prototype or final product.

1. Use reusable design patterns to guide behavior regarding navigation and search functions.
2. Concentrate on maintaining brand consistency.