What is the biggest nightmare you have with your existing product? Nightmares don’t always have monsters. Well, kind of. Maybe it is having a well-maintained living library that an entire organization can rely on, but that doesn’t deliver on usability and greater user experience. Knowing that your product doesn’t work because form and function were never aligned can be your team’s worst nightmare. In today’s enterprise world, these libraries or design systems are essential to your team’s efficiency, helping to deliver projects at scale. However, we shouldn’t and don’t have to sacrifice smart design in the name of efficiency.
If you want your product to thrive today and in the future, design is your secret weapon. It will allow you to outperform the products that are treating design as an afterthought. If your library is already developed, work with a designer that understands visual perception and knows the small fixes that can be done to improve the experience of the UI in your system. They won’t make it perfect, but it will get you closer to perfection.
This may seem like “double work”, but a trivial decision made by a product owner or an engineer can take the entire experience from extraordinary to average to repulsive. That’s not to mention how this descent compounds after several trivial decisions are made.
If you keep looking at the components of your library or pages and things don’t look right, you can be sure you didn’t start with a solid baseline. This is where visual perception theories like Gestalt Principles, Hick’s Law, etc. come into play. Visual perception, type hierarchy, and positioning are particularly important in digital product design. This is because all product attributes (sizes, shapes, colors and patterns) are exclusively perceived through vision. Making smart design decisions and pairing elements in your interface in a way that’s comfortable to the user’s eyes is the first step to improve your products’ usability and increase user engagement.
What can be done?
In the digital world, Form and Function go hand in hand. Let’s imagine you have the function figured out. Here are some some of the most common Form baseline issues I have seen, as well as some recommendations on how to fix them.
Baseline #1 Round Corner vs Sharp Edges
Hard sharp edges in actionable elements
Our eyes are very sensitive to hard, sharp edges, because they take more cognitive effort to visually process. Another interesting point is that we naturally avoid hard, sharp edges because in our daily lives, they are presented as threats (i.e a knife). We have been trained that way. As a mom, I keep all knives and forks locked in my kitchen’s drawer. Rubber spatulas stay in an open container on the kitchen counter. Round corners feel safer to humans.
This is very important to keep in mind when designing products, because what drives human behavior is our daily experiences. In the example below, are you more inclined to click the buttons on the left over the one on the far right? You probably are.
In the example below, we can compare how a single design choice in the interface makes a huge difference. Both design versions have the same height and width. However, the one with 4px round corner seems to have more spacing between elements. Imagine a long form; Which one do you think will be easier on the user’s eyes?
Buttons are a very popular element in a digital product and, without a doubt, the most important one. Make sure users feel comfortable while interacting with these elements, and that these elements are able to guide users throughout the experience.
Baseline #2: Well-Balanced Icons
This is a tricky one. Creating a set of icons that look well balanced takes some prep. We want to avoid icons that stand out too much or that look too tiny right next to each other (unless this is intentional). Sometimes, making sure all icons are the same size is not enough. This is where you need to put on your designer glasses to make sure elements look balanced, even if they are not the same exact size.
Let’s take a look at this example where all shapes are the same size (height and width). However, we can’t perceive them as one unit, because their visual weight is different
This is where the Gestalt principle of similarity should be applicable. Our brains are fighting hard to make sense of this grouping, which is why we sometimes have to go back and fix the math ourselves.
In this example, I reduced the size of the square by 10 points to make sure the “Medium” icon looks visually balanced compared to the Twitter icon inside a circle. By the way, I would normally have used either a circle or square shape for both icons, so this is just for explanation purposes.
If the goal is to have a set of icons that appear equally balanced and equally important, which set accomplishes that goal? The one on the left, correct?
Keep in mind your file should be the same size, as this will help with consistency and management. We are only focusing on visual sizes and weight.
Baseline #3 Type Hierarchy
This may not be the easiest one to implement, but if the sizes of headlines and paragraph styles are all over the place, your layout flow will be effected. We can apply the Gestalt Principle of Continuity that states that elements of objects tend to be grouped together, and therefore integrated into perceptual wholes if they are aligned within an object. Establish a sizing scale that will determine how exponentially font sizes increase across the page and system. This will eliminate unnecessary similar sizes and ensure that there’s a broad range of usable sizes. Without a set baseline, users will struggle to make associations between related content blocks and headlines, affecting the content’s readability and causing confusion. For designers, the trick is to always use the principle we learned in school to organize the content and never confuse or delay users with the tasks they are trying to to accomplish
In the same topic of typography, make sure to implement vertical rhythm in your grid system. The baseline will be determined by the line-height of the body text. Using multiples of 4’s makes it easier for the designer to manage in the design file and for the engineer to implement it.
The Compound Effect
“No matter what you learn, what strategy or tactic you employ, success comes as results of the Compound effect” — Darren Hardy
The compound effect is based on a principle that I use in my everyday life. Every decision I make-- what I eat, whether I get 8 hours of sleep, if I get my workout in--all these decisions I make today will shape my destiny. The same applies to design, especially when it comes to living libraries; The smartest decisions are the ones that will allow you to master your system and shape it to the desires and needs of the product. It is the sum of the smallest decisions that will shape the final outcome. The application of Visual perception and Gestalt principles to design provides us with psychological proof and new ways of design problem solving. Knowing how the human brain perceives elements on a page, what causes distraction, and unnecessary cognitive load will help you build ultimate aesthetic and usability for all.
In Conclusion…
With these examples, I hope you have a better understanding of the fine line between an average product and a GREAT product, as well as some context on how small (but smart) decisions can make an impact. The digital product design world has become increasingly competitive, and products are using living libraries and design systems to keep up with the demand. At the end of the day though, the products that succeed are the ones that truly meet the needs of customers in both form and function. If you use a product that works seamlessly with an easy user experience, you can determine that multiple design decisions were made correctly.
There are some things only designers will see. If you made it this far and are not a designer, I appreciate you sticking through this. There are many other examples regarding color and accessibility that I’d like to cover under this topic, so keep an eye for that post in the future.
