User Interface Design Basics and Fundamental Principles
User Interface / UI Design focuses on what users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate the actions.
UI is all about the concepts of interaction design, visual design, and information architecture.
Choosing Interface Elements
Users have become familiar with interface elements and acting in a certain way; So try to be consistent & predictable in your choices with the 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 & Know your user: 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.
Your user’s goals are your goals, so learn them. Restate them, repeat them. Then, learn about your user’s skills and experience, and what they need. Find out what interfaces they like and sit down and watch how they use them. Do not get carried away trying to keep up with the competition by mimicking trendy design styles or adding new features. By focusing on your user first, you will be able to create an interface that lets them achieve their goals. - Pay attention to patterns: Users spend the majority of their time on interfaces other than your own (Facebook, MySpace, Blogger, Bank of America, school/university, news websites, etc). There is no need to reinvent the wheel. Those interfaces may solve some of the same problems that users perceive within the one you are creating. By using familiar UI patterns, you will help your users feel at home.
- Be consistent and use common UI elements: Users need consistency. They need to know that once they learn to do something, they will be able to do it again. 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 are just a few interface elements that need consistency throughout the site to help facilitate efficiency.
A consistent interface enables your users to have a better understanding of how things will work, increasing their efficiency. - Be purposeful in page layout & Keep it simple: 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.