Continuing with the primer series, this part covers some key fundamentals for shaping an effective user interface. Each should be carefully interpreted and absorbed (not just skimmed), to help achieve a solid foundation for good design in your product. Applied diligently (and repeatedly), they form the basis for a sound design practice and habit that will carry forth in subsequent revisions and related products/service offerings (i.e., mobile, web, etc.).
* Layout, structure, hierarchy, clutter, emphasis, fonts, colors, language…Yep it ALL MATTERS to good UI design. Below are some basic UI design principles to help:
* Having a good mental model (organization of elements) is critical. Should be simple, intuitive to understand.
* If your user asks “how do I get back?” or “where is that page?”, just generally lost/confused, that’s a sign you have a poor mental model.
* Structure is vital: navigational structure (taskflow), informational structure (menus and tabs), visual structure (layout of elements).
* Grids provide the order, regularity, hierarchy, and stability for understanding a product UI layout. Respect and persist the grid! Don’t just randomly put stuff in places that “look nice”. Be sensible and logical.
* Use contrast and whitespace to create visual emphasis. There should always be a single clear emphasis of what’s most important. Limit the number of emphasized elements otherwise everything is shouting.
* Cluttering a screen with every possible piece of data only creates confusion, hurting the priority of content and overall legibility.
* When it comes to fonts, start simple: Start with just 3 fonts and limit the overall number. A font is any variation of weight, style, color, typeface.
* Ditto for colors, start simple: Pick a color system that serves the need of the product at a functional level. Start with a base color, up to 3 compliments, 1 highlight color and black and white (yes, white is a color too! it’s not “nothing”)
* Reduce complexity: Remove all extraneous lines and ornamentation. Check for repeated words and symbols that can be consolidated. Pick a primary way to perform an action and do it well. Do you really need all those buttons, dropdowns and sliders?
* Language is vital: Avoid marketing labels in the UI. Just call things what they are to the user in their language. Always use industry standard language when possible for specific domains, like bio-tech or financials. Be consistent with terminology! Especially across platforms and devices.
*All UI actions require visual feedback. Make sure there are visual cues as to what is draggable, clickable, etc. If the UI lags in response to a user’s action, it will be perceived poorly by the user. Performance matters to good design!
* Being consistent for the sake of consistency is unwise. Cohesiveness and being sensitive to the context, purpose, goal of user’s task…that’s far more important.
* After doing all this…seek out moments of delight, something fun, positive, surprising to make your product more desirable. Clever uses of animation, sounds, graphics, casual language are all examples.
* Ultimately you want to be sure your product instills a sense of trust (confidence and reliability), desire (emotional bonding), and integrity (authentic, cohesive, fully formed all the way).