4 Design Principles That Everyone Should Probably Know
Whether you are creating a site from scratch or using a web design tool , these 4 tips will help you create more conversions.
There’s nothing I like more than a nice website. But what actually makes a great web page? And how can a small business create a great website on their own? I’ve collected four of the most important design principles every small business owner (everyone) should know.
Consistency
Definition:
The usability of a site/system/product is improved when parts are expressed in similar ways.
Example:
Analysis:
I love seeing each product that Nest sells right on the front page. Each item feature page, drop down menu, etc. follows the same design. Because of this, you can quickly learn about each and navigate to what you want.
This is an example of their internal consistency. They illustrate consistency by having their buy now button in the same place on every product. It is easy for the user to learn how to move around the site because of this. Every page on the site is light with blue highlights and lots of imagery. These aesthetics make the experience a delight and gain my trust.
Although, this isn’t necessarily part of their site, their products have great external consistency. My dad bought a Nest and we are astonished with the ease at setting it up. It worked seamlessly with the system we already had. Nest also works well with Google Home, Amazon and other personal assistants. Nest’s brand is trusted because of their consistency, ease of use, and really consistent products.
Bottom Line:
Consistency in a brand is difficult… but well worth it.
Application:
Every page on your website should feel similar. Keep buttons in the same place, colors the same, and page structure the same. Present similar content in the same way. The experience will be better, and people will come back to your website. As an extra, think about your product design as well. Consistency is key.
Hick’s Law
Definition:
“…describes the time it takes for a person to make a decision as a result of the possible choices he or she has: increasing the number of choices will increase the decision time logarithmically.” — Wikipedia. In other words, more options mean more time to decide.
Example:
Analysis:
Ahhh… What a beautiful sight/site. And what a beautiful button! Boom! A bright orange, right in the middle BUY NOW button. Hick’s Law is simple, less options, easier decision making. This is crucial for products and services on your website. You want people to purchase your product and not get lost or distracted by so many options.
Here One is a wireless headphone and it is evident they want you to buy it. Ultimately there are 5 buttons you can actually click on this first homepage (2 of which are buy now, 1 of which redirects you to the same page). Here One doesn’t want you to be confused. They want to tell you why they are here, why you are here and they want you to buy. Everything else is secondary. When you are browsing the site and decide, ok I am going to buy it, Here One is here for you! That Buy Now button is beckoning you over to come press it. Even when you scroll down it is there and the site doesn’t have a whole lot of other options. Hick’s Law at work!
Bottom Line:
Keep it simple if you want people to buy.
Application:
Simplify the number of steps to make a purchase on your website. You’ll lose people along the way, so make it one step.
Aesthetic-Usability Effect
Definition:
The aesthetic usability effect is when a user or customer perceives a site/app to be easier to use because it looks good, despite if it actually is easy to use. Pretty much, if it looks good, people will assume it’s going to be a nice user experience.
Example:
Analysis:
This site is very very pretty and simple. Its sexy with a big dark background and plain white text. Because it’s Apple there already is a perceived visual appeal and also perceived usability appeal. I think this landing page in particular is a great example of the Aesthetic-Usability Phenomenon. It seems really easy to use/navigate because it looks good. Truthfully, all you need to do is scroll down slowly and the experience is pretty cool, BUT it’s not exactly clear what we should do.
Yes, there is a down arrow but after that we just keep scrolling, and scrolling and scrolling. If you scroll too fast, the experience is a disaster and no text populates and the animations are a mess. Forcing the user to scroll to enable the page is a hit or miss. Usually, it’s up to the user. I like this page, but I know people who feel like they have no control, despite how cool it is. The “wow factor “ is evident but that does not mean usability is evident.
Bottom Line:
Sexy does not always mean useful. But sexy rarely hurts.
Application:
Go ahead and make your website look great. It gives off a great first impression. Unlike this Apple Page, however, you need to back it up with functionality first.
Flexibility-Usability Tradeoff
Definition:
Imagine a scale. On one end you have ridiculous usability (one button) and the other you have ridiculous flexibility (100 buttons). You gotta find the sweet spot for your user and your product.
Example:
Analysis:
Banks do a lot. They have a lot of products and services and want their customers to use them all. Needless to say, their site is going to have a lot of pages. Wells Fargo & Chase are two of the biggest and well known banks in America and so I looked at their sites. Both offer a lot, but there is one big tool that helps Chase’s website: The Hamburger. If you don’t know what the hamburger is, it is the three lines in the top left corner, it expands a menu. Chase hides a lot of their options in that menu, Wells Fargo keeps them all upfront all at once.
Wells Fargo’s website is essentially the universal remote your friend has, that you have no idea how to use. Sure it can do a lot but how much of those buttons get used everyday? You might attempt to turn on Netflix but instead you turn on the toaster. Simplify it. Chase does this and their website is more like a remote for a Roku tv. Simpler and easier to manage but just as capable when you need it to be.
Bottom Line:
More does not equal merrier… especially when it comes to numbers of options for a user. Essentials upfront, Extras in the back.
Application:
Hidden menus are a great way to simplify your website. If you have lots of content and services, consider taking these off your main page. Menu bars are intuitive, so don’t worry about people missing things.
Conclusion
There are a lot more principles that impact conversion and usability of your site. The next site you build or have a friend build, keep these in mind and make your site a user centered experience.
