In my last article, I laid out some of the key differences between user experience (UX) and user interface (UI) design – two distinct elements that play a critical role in the development of eye-catching, user-friendly games, websites, and other digital creations. With these definitions now established, today’s blog will take things one step further – offering a glimpse of some of my favorite UX/UI do’s, as well as a closer look at my most cautionary design don’ts. Let’s kick things off on a positive note with five of my favorite recommendations for aspiring (or professional!) UX/UI designers:
👍
1. DO respect the hierarchy king.
Good design attracts a user to the “whole” while simultaneously guiding them down an engineered pathway through each of the unique “parts.” Design is a goal-oriented art form, and creating visual priority is a designer’s secret weapon. When crafting your composition, you want the audience to grasp the big picture quickly, but also to know where to look (or click) for a call to action or more detailed information. In a successful layout, this knowledge will feel like intuition to the user, but you and I know they were gently nudged in the right direction using a number of design tactics.
2. DO be mindful of both color theory and popular connotation.
Did you know that warm colors move forward in space? It’s true! The wavelengths of warm colors are longer, so your optic nerve processes them before the shorter wavelengths of cool colors, creating spatial proximity illusions that painters have been using to create two-dimensional depth since the Renaissance. In addition, colors evoke emotional responses that can be used to a designer’s advantage to manufacture desired feelings and responses in an audience. An understanding of color theory, temperature, and psychology will help you turn wireframes into engaging and effective digital spaces. However, our perceptions of color are also shaped over time by how colors are commonly used in our culture.
For example, since warm colors jump forward on screens and pages, it may seem to make theoretical sense to make a button at the end of a call to action red, right? Sure! Depending on several complex factors, you might observe huge success with that strategy. But let’s keep in mind how red is commonly used in our culture, and how that might play into your users connotations. Red is the primary color of emergency vehicles like fire engines and the flashing lights of ambulances. Stop signs are red. Red is also used across the web as the standard color in error messaging as well as ‘close’ and ‘cancel’ buttons. The usage of the color red in society and technology has created connotations of fear, alarm and caution that might affect the behavior patterns of your users.
3. DO leverage animations to support interactions and guide users.
Smart design makes the user feel smart, and movement is a powerful supplementary tactic that can take effective designs to the next level. Any animated element will draw more attention to itself than the rest of the page, and makes a web page or app more dynamic – and fun! Utilize simple animations to draw attention to key areas and make interactions more enjoyable. Visual feedback like touch impressions and loading screens let users know that the app is processing their action and prevent feelings of uncertainty that they did something “wrong.” Transition animations such as a nav bar sliding out from the right after tapping on a right-aligned menu button support UI design placement. Engage users with eye-catching embellishments on important areas of interaction, empower them to engage with the goal-oriented areas of the product, and then reward them with animated feedback.
4. DO keep it simple.
Occam’s Razor tells us that the simplest solution is often the best solution! The more decisions a user is presented with, the higher the risk of them making no decision at all. Bloating your app or website with features that only have a “cool” factor and don’t drive users toward the end goal of your organization obscures your message and hinders success. Keeping it simple in no way means creating something boring! Read more about how to make a simple project shine here.
5. DO use consistent styling.
Each time a user performs an interaction, they learn something. Even standard touch-based interactions such as horizontal swiping or press and hold will reveal something to the user within the specific context of your website or app. The further in a user ventures, they are learning that this does that, and applying that knowledge to newly discovered screens along the way. Applying a completely different interaction to a button style previously used for something else requires the user to learn and remember contradictory information. As you design, gradually introduce users to new interactions by using visual cues that build upon each other!
👎
1. DON’T assume… Anything.
Remember the points made about color theory and red buttons earlier? So which is it? To use a red button or to not use a red button? The answer to that conundrum is not to assume that your users will, or will not, have any certain connotation. The solution to any UX or UI related issue is to make an educated hypothesis, and test, test, test! Making assumptions can lead us too far down the wrong path, when instead you should always be following the data.
2. DON’T dismiss the practicalities.
So you’ve gone through the motions – sketches, wireframing, storyboards, focus groups, revisions, more wireframes – and you have a shiny completed mockup ready for development. I know – that already seems like so much, and I hate to add more to the process, but in design it is so important that you do sweat the small details. The best user interface in the world will completely unravel if the most necessary, albeit not as exciting, best practices aren’t followed! Accessibility is key. Take care to use web safe fonts at legible sizes, action areas and buttons large enough to be easily pressed (Apple recommends a minimum of 44px), and double check that your website has enough contrast to still be usable by someone who is colorblind.
3. DON’T underestimate the power of negative space.
Negative space has an unjust bad reputation as the “leftovers” of a layout. Too often, clients view negative space as a missed opportunity, or lack of content or creative direction, rather than an intentional decision. Negative spaces are another design element to be used strategically – white space is not wasted! Some primary uses of negative space are to increase legibility, emphasize interactive elements, and content prioritization. No white space means no visual hierarchy, and filling up all available white space removes a designer’s ability to tell the story you want a user to hear. Just as a pause in a speech is used for emphasis, rest, or a chance to consider, white space is far from an awkward silence.
4. DON’T reinvent the wheel.
“Does this look too similar to another app? What if I’ve designed something new to me, but someone else, somewhere, has already thought of it? How much of my work needs to be unique? If I don’t make each element special, am I a fraud?”
Every designer has had these thoughts. Every designer has wandered into the trap of thinking it’s necessary to create each design element from scratch, overcomplicated their work, and labored over the unattainable goal of “uniqueness.”
Consider this: conventions are your friends. Best practices and UX patterns are shared knowledge between you and users. You don’t have to provide and instruction manual for what is already commonplace. Better yet, these standards enable you to dedicate more creative energy to the specific interactions and goals that differentiate your app or website from all the rest! When you try to make everything in a design sparkle, does any of it truly shine? There will always be new creative problems to solve that require your full attention and energy – so go ahead, download that icon pack, it will only make you more efficient, not less talented.
5. DON’T fall victim to UX myths.
There are a whole plethora of UX myths out there, but for now, let’s explore the concept of The Fold.
If you are a designer or developer, you likely already know that the fold is the screen area a user first sees when landing on a web page – without scrolling. In my experience, the finalization of a homepage and exactly what content lives above the fold is the most iterative process of the entire website development. The concern and indecision around this single portion of a website is astounding, challenging, and exhausting all at once. First impressions really do matter, and just as we all stress about first encounters in everyday life, clients stress about the first impression their website creates for potential customers. But what are they so afraid of? “What if someone doesn’t know to scroll?”
The fear of a user not knowing how to scroll on the web is a remnant from the 90’s when a user’s ability to scroll was a real concern of the newly developing world wide web. The Web and technology have since evolved exponentially, and users have adapted alongside such advancements. New devices have introduced smaller screen sizes that make it impossible to fit lots of content above the fold, and users have not been deterred! Look around you now, and you’ll likely see someone scrolling through content on a tablet or smartphone at this very moment. The fold is an opportunity, not a hindrance – a chance for a design to create and engaging first impression and encourage users to explore further.
That’s all I’ve got for now – I hope these tips prove useful to someone out there! Fellow UX/UI designers – can you think of any other considerations worthy of a spot on our list? Let us know what you think over on our Facebook or Twitter!
More UX/UI Insights From the Filament Games Blog:
How to Get Hired at a Game Studio: UX Designer Edition
UX vs. UI Design: What’s the Difference?
How to Make a Simple Project Shine