4 Key Principles for Product Design
When building digital products these four design principles are extremely helpful for creating easy to use products. Design principles are the foundation of good design. We build off of them, apply them, and sometimes break them.
1. Hierarchy
When we visit a website, use an app, or play a video game we scan the screen for information. Imagine if all the information was similar in color, shape, size, and location. Would it be easy to find the most important information? How quickly would you give up and move on to something else? Informational hierarchy and visual hierarchy are fabulous tools that allow designers to display information from most important to least important. Here are some great examples of hierarchy used in product design.
This is a site map that helps establish a digital product’s hierarchy early on. By using a site map you can use your user research to organize your information in a way that is natural and desirable for the user.
Here, Zendesk uses visual hierarchy to communicate importance. There are different font sizes and weights to direct your eye as well as heavily contrasted calls to action that grabs the user's attention. Visually this site directs the user’s attention to its most important callouts.
2. Consistency
It’s jarring to be on a website and to navigate to a different page on the website and have it feel completely different. Out of place pages feel suspicious and are likely to make the user leave the website completely. Consistency is critical to making a trustworthy and cohesive product.
How would you feel if each Apple product had different elements and interactions? Would it be worth it to learn how each one works and functions? One of the reasons companies like Microsoft and Apple are so successful is because their products are designed consistently. Consistency helps us use products faster and feel more confident when using them.
3. Alignment
This one might seem a little evident, but it is integral to successful product design. Alignment keeps your elements organized and balanced and guides a user’s eye through your design. How you align elements in a product can communicate their relatedness which can direct a user. When elements are aligned incorrectly, it can communicate unease and shoddiness of design.
The goal of Google Drive is to organize and store your documents in a neat and tidy fashion. Google uses alignment to communicate order and organization. The top section is vertically aligned to communicate sameness (folders vs documents). Often product teams will use grid systems to ensure that for mobile, tablet, and web everything is aligned.
Here is a sample from a project I worked on. For this project, we used a grid system to make sure everything was aligned correctly. This was extremely helpful for us and it also made sure that our product was perfectly aligned.
4. Accessibility
To start this one off I want to quote an article by Pablo Stanley that I feel encompasses accessibility for digital products. “Digital accessibility refers to the practice of building digital content and applications that can be used by a wide range of people, including individuals who have visual, motor, auditory, speech, or cognitive disabilities.”
As UX designers who are deemed “advocates for the user” we need to be able to design smart and empathetic so we can create comfortable experiences for all users.
This is a beautiful example of what not to do from UX Booth. Solutions to accessibility issues are often quite simple. Common accessibility issues include color blindness, total blindness, lacking the capacity to use a mouse, etc.
At a glance which one is easier to read? Now imagine you have impaired vision. Making sure there is high contrast in your digital products is critical. Too often do we visit websites where low contrast is accepted for some aesthetic quality. There are tons of useful tools out there to see if your elements have good contrast such as the WEB AIM Contrast Checker.
Conclusion
Design principles are great to return to again and again. They offer a strong base to bounce our designs off of and are ok to break if we know what we are doing. Do you use any of these principles in your work? If so let me know in the comments.
Jeremiah Bradshaw is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Interaction & Design. The following article relates to (Design Principles) in the (DGM 2250 Course) and representative of the skills learned.
