UX primer for startups (Pt 2): UI fundamentals

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).

Recent posts

Older Posts

Let’s go meta