Engineers are great at understanding and building complex logical systems, but often fail when it comes to understanding the people that use them. Unlike logical systems, people often behave unpredictably. In order to help users behave as rationally as possible, we need design to show them something they recognize and understand. Implementing consistent design rules that utilize concepts like contrast, spacing, and alignment will help users focus on the right elements in your product, and will teach them to behave appropriately within the environment you’ve built for them.
As a member of Privy’s lean startup team, I have the unique honor of being both the lead engineer and the company’s only designer. You might find this curious, considering that engineers are often notoriously bad at design. Many can understand intricate and complex systems built with multiple tech stacks, but fail to understand one thing: the people that use the products they build. For this reason, I firmly believe that more engineers should learn the basic principles of design. Design soothes users into behaving rationally by showing them something they recognize, understand, and even love.
Negative emotions cause users to behave unpredictably.
To throw a user into a brand new product experience without the scaffolding of consistent design patterns would cause a lot of confusion, frustration and fear. Imagine trying to use a product where buttons didn’t look like buttons, text sizes changed randomly throughout, and nothing lined up. There would be no visual cues to guide you; no focus. You’d have no idea if your next click was going to accidentally delete all your hard work. It would be a nightmare. It would be anarchy.
With that said, I want to share some high-level design concepts that engineers can utilize to remove some unpredictability from the human component of their product, and keep users happy.
Pay Attention to These Design Patterns
Colors, Contrast & Saturation
One of the most important things to keep an eye out for when designing a product is contrasting colors. Luckily for you, that’s pretty easy! Your eye is naturally drawn to the places on the screen with the highest contrast. Use this to your advantage to emphasize primary call-to-actions. If your site has a dark background, try a light-colored button and vice-versa. Seems obvious, right?
But contrast isn’t just about dark vs. light. Think about colors and saturation as well. Complementary colors (opposites on the color wheel above) have the highest amount of contrast with one another. So if your background has a cooler tint like blue or purple, try a warmer color like orange, red or yellow to get increased contrast against the background. Saturation is important too. Higher saturation draws the eye. By keeping your backgrounds duller and less saturated, you make it much easier to get a user looking in the direction you want them to look with a more saturated color on the page. Again, this is fairly straightforward stuff.
When it comes to picking a palette for a new project, I often like to employ a more advanced technique called hue-shifting. I first learned about hue-shifting while creating pixel art during my game dev days. The basic idea is that instead of creating color ramps that use tints (adding white to a color) and shades (adding black to a color), you use hue shifts. This limits your palette in such a way that all elements (whether sprites in a game or buttons in your product’s dashboard) are consistent and have high contrast and readability when placed next to one another.
Here’s an example:
Notice how the colors in the hue-shifted tree “pop” considerably more compared to those of the shaded tree. The shaded tree has many similar colors that all blend together. It looks muddy, and some of the details are hard to make out. With the hue-shifted palette, however, every color is completely distinct. Notice how instead of ramping from dark green to light green and dark brown to light brown, it ramps from blue to yellow, and purple to orange. This same technique can be a great way to increase readability and contrast when applied to product design.
Spacing, Grouping & Alignment
The number one mistake I see other developers making when it comes to front-end design is not leaving enough space between elements. Clutter is bad. It leads to confusion and misclicks. When elements are too close to one another, it becomes hard to tell them apart unless they have very well-defined edges. Think about it this way: if you were reading this blog post but it was just one gigantic wall of text with no paragraphs or headers, you would have stopped reading a while ago. Separating things out helps your brain digest the content more easily. So pay attention to the amount of whitespace (both padding and margins) surrounding elements. When in doubt, add more space.
However, you shouldn’t just evenly space every element on the page. Properly grouping similar elements is just as important as spacing them out. Users can only focus on one area of the screen at a time, so make sure that that area contains all the related functionality the user might want, otherwise they could get lost. The spacing rules above apply to spacing in between groups too!
Lines are another important concept in design. They help visually define the groups mentioned above by separating elements with something other than whitespace (however, lines don’t have to actually be drawn on the page, they can be invisible).
Making sure things are properly aligned will ultimately help users find what they are looking for (or what you want them to look at). A good trick is to try to design a page under the assumption that your users can’t change the direction their eyes are moving in until they reach the edge of the screen. They should still be able to find everything they need to find.
Less is more
It’s better for users to need nothing than to have everything. The best designs trim the fat away until all that’s left is the essentials. Everything on the page should serve a well-defined purpose (even if that purpose is simply to draw the eye towards another more important element). Don’t go overboard with adding things like icons, images or other extraneous elements. Too much can distract from what’s really important on the page.
Even if you’ve been following the patterns laid out above, it’s important to remember that it’s all for naught unless you create a consistent set of design rules and stick to them. For example, based on design alone, which of the buttons below do you think would perform a more important action when clicked?
Is it button 1, which is bigger with capitalized text, or button 2, which is bright red (a color commonly used to indicate a dangerous action, like deleting something)? If you were to use both designs in a product, users would likely be very confused; there’s no consistent rule to indicate which button is more important because the two buttons differ across multiple dimensions: size, border, color, gradient, and text capitalization.
Now take a look at these buttons:
It should be pretty clear that between buttons 3 and 4, button 4 performs the more important action. Users will be much quicker to understand the difference between what actions these two types of buttons represent since they differ in only one dimension: color.
You should be as consistent as possible when using buttons (or any element design) of a particular type so that users will associate form with functionality. The more consistent your design rules are, the more comfortable users will feel, even when thrown into a brand new area of the environment you’ve created for them. Additionally, you create less work for yourself by not needing to redefine style classes every time you start working on something new.
The Solution is Design
We as engineers often struggle, and even outright fail, when we’re forced to deal with the irrational human element in the products we build. The volatility of user emotions can throw a wrench of unpredictability into even the most finely tuned systems.
As much as you may have hated (or loved) Apple’s old skeuomorphic designs — apps that look and feel like real world objects — they did a great job of comforting users by showing them something familiar. When iBooks looks like a wooden bookshelf, users immediately know how to interact with it because they’ve seen it a million times before in real life. Even in Google’s more modern material design patterns, elements are still made to reflect the real world. Subtle drop shadows separate layered cards. Buttons have soft gradients and highlights not just to make them look nice, but to make them feel tangible and scream “I’m clickable!” to users.
Design is there to guide users through your product, and to hint to them how they should behave inside the environment you’ve created. That way they don’t end up e-screaming at you in all-caps after getting frustrated enough to open a support ticket.