Interfaces exist to enable interaction between humans and our world. They can help clarify, illuminate, enable, show relationships, bring us together, pull us apart, manage our expectations, and give us access to services. Breathtaking and useful designs happen because the UI has been worked on tirelessly. It takes a real UI Master to understand how to make a terrific user experience. The best interfaces can inspire, evoke, mystify, and intensify our relationship with the world.
Here are 12 extremely useful principles to help you understand how to design your UI and Ux’s:
1. Know your user
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.
2. Composition: The Look and Feel of an Application
The composition or layout of a UI not only influences its appeal, it also has a tremendous impact on the usability of the application in which the UI is used. Composition includes such factors as positioning of controls, consistency of elements, affordances, use of white space, and simplicity of design.
Positioning of Controls
In most interface designs, not all elements are of equal importance. Careful design is necessary to ensure that the more important elements are readily apparent to the user. Important or frequently accessed elements should be given a position of prominence while less important elements should be placed to less prominent locations. Buttons, such as OK or Next, should be placed in the lower right portion of the screen as the user normally won’t access these until they have finished working with the form. Grouping of elements and controls is also important. Information should be grouped logically according to function or relationship.
Consistency of Interface Elements
A consistent look and feel creates harmony in an application – everything seems to fit together. A lack of consistency in an interface can be confusing, and can make an application seem chaotic, disorganized, and cheap, possibly even causing the user to doubt the reliability of an application. Language, layout, and design are just a few interface elements that need consistency.
For visual consistency, you should establish a design strategy and style conventions before moving on to development. Design elements such as the types of controls, standards for size and grouping of controls, and font choices should be established in advance.
Also, try to use controls appropriately; while a text box control can be set to read-only and used to display text, a label control is usually more appropriate for that purpose. Remain consistent in the setting of properties for your controls – if you use a white back color for editable text in one place, don’t use grey in another unless there’s a good reason. Pick a style and stick with it throughout your application, even if it means redesigning some features.
Affordances: Form Follows Function
Affordances are visual clues to the function of an object. A user interface also makes use of affordances. For instances, the three-dimensional effects used on command buttons make them look like they are meant to be pushed. If you were to design a command button with a flat border, you would lose this affordance and it wouldn’t be clear to the user that it is a command button.
Use of white space
The use of white space in your user interface can help to emphasize elements and improve usability. White space doesn’t necessarily have to be white – it refers to the use of blank space between and around controls a form. Too many controls on a form can lead to a cluttered interface, making it difficult to find an individual field or control. Consistent spacing between controls and alignment of vertical and horizontal elements can make your design more usable as well.
Simplicity & Clarity
Perhaps the most important principle of interface design is that of simplicity & clarity. When it comes to applications, if the interface looks difficult, it probably is. A little forethought can help you to create an interface that looks (and is) simple to use. Also, from an aesthetic standpoint, a clean, simple design is always preferable.
To be effective using an interface you’ve designed, people must be able to recognize what it is, care about why they would use it, understand what the interface is helping them interact with, predict what will happen when they use it, and then successfully interact with it. Clarity inspires confidence and leads to further use.
3. Choosing a color
Color is an important visual element of most user interfaces. Beyond pure aesthetics, color has associated meanings and elicits emotional responses. To prevent confusion in meaning, color must be used consistently. To obtain the desired emotional responses, color must be used appropriately.
Effective use of color can make your program’s user interface (UI) more effective. Color can help users understand certain meanings at a glance. Color can also make your product appear more aesthetically pleasing and refined. Color can evoke strong emotions, and if you’re designing for international audiences, certain colors may have cultural significance. It’s usually best to stay conservative, using softer, more neutral colors.
Of course, your choice of colors may also be influenced by the intended audience and the tone or mood you are trying to convey. Bright reds, greens, and yellows may be appropriate for a children’s application, but would hardly evoke an impression of fiscal responsibility in a banking application. Small amounts of bright color can be used effectively to emphasize or draw attention to an important area. It’s best to stick to a standard 16-color palette if possible.
4. Use of Images and Icons
Icons and images are used more frequently than ever before to aid people in quickly finding and gathering information. Using icons and images forces you to organize and verbalize your information in a more structured, compact, and visual way. Icons and images are evolving and becoming the dominant way of conveying information.
It is also important to consider the cultural significance of images. Many programs use a picture of a rural-style mailbox with a flag to represent mail functions. This is primarily an American icon (although it is now found in rural areas elsewhere, including Australia); users in other countries or cultures probably won’t recognize it as a mailbox.
In designing your own icons and images, try to keep them simple. Complex pictures with a lot of colors don’t degrade well when displayed as a 16-by- 16 pixel toolbar icon, or when displayed at high screen resolutions
5. Fonts Selection
Fonts are also an important part of your user interface, because they often communicate important information to the user. You need to select fonts that will be easily readable at different resolutions and on different types of displays. It’s best to stick with simple sans serif or serif fonts where possible. Script and other decorative fonts generally look better in print than on screen, and can be difficult to read at smaller point sizes.
It should also be kept in mind that if the user’s system doesn’t include a specified font, the system will make a substitution, resulting in a completely different appearance than what you intended. If you’re designing for an international audience, you’ll need to investigate what fonts are available in the intended languages. Also, you’ll need to consider text expansion when designing for other languages – text strings can take up to 50% more space in some language. Again, design consistency is important in choosing fonts.
6. Conserve attention at all costs
Attention is precious. Don’t litter the side of your applications with distractible material. If someone is reading let them finish reading before showing that advertisement (if you must). Honor attention and not only will your readers be happier, your results will be better. We must conserve attention at all costs.
7. One primary action per screen
Every screen we design should support a single action of real value to the person using it. This makes it easier to learn, easier to use, and easier to add to or build on when necessary. Screens that support two or more primary actions become confusing quickly.
8. Provide a natural next step
Very few interactions are meant to be the last, so thoughtfully design a next step for each interaction a person has with your interface. Anticipate what the next interaction should be and design to support it well.
9. Provide feedback
Your interface should at all times speak to your user, when his/her actions are both right and wrong or misunderstood. Always inform your users of actions, changes in state and errors, or exceptions that occur. Visual cues or simple messaging can show the user whether his or her actions have led to the expected result.
10. Handling the error
No matter how clear your design is, people will make mistakes. Your UI should allow for and tolerate user error. Design ways for users to undo actions, and be forgiving with varied inputs. Also, if the user does cause an error, use your messaging as a teachable situation by showing what action was wrong, and ensure that she/he knows how to prevent the error from occurring again.
11. Help and Documentation
No matter how great your user interface, there will be times that a user needs assistance. The user assistance model for your application includes such things as online Help and printed documentation. Online Help is an important part of any application – it’s usually the first place a user will look when they have a question. Even a simple application should provide Help.
12. User Assistance Tools
The user assistance model for your application should also include:
Tool tips
Tool tips are a great way to display information to the user as they navigate the user interface. A Tool Tip is a small label that is displayed when the mouse pointer is held over a control for a set length of time, usually containing a description of the control’s function. Normally used in conjunction with toolbars, Tool Tips also work well in most any part of the interface.
What’s This Help
“What’s this” Help provides a link to a pop-up Help topic when the user selects What’s This Help and clicks the What’s This cursor on a control. What’s This Help can he initiated from a toolbar button, a menu item, or a button on the title bar of a dialog box.
Status Displays
A status display can also be used to provide user assistance in much the same way as a Tool Tip. Status displays are a good way to provide instructions or messages that may not fit easily into a Tool Tip.
