Design = emotions + usability

Default avatar.
May 23, 2013
Design = emotions + usability.

thumbnailWhile fine art is a subjective field, graphic design is more formulaic in its fundamentals. An effective design should make people feel a certain way and take a certain action. In this article I’d like to share Gravity Switch’s web design principles and our thinking behind them.

Those rules are: define goals first; focus on users second; design for emotion; follow the rules of visual design; build a clear, visual hierarchy; be consistent; break the rules (when necessary); don’t overuse gimmicks; and finally test, measure & improve.

1. Define goals first

I bet you thought I was going to say "focus on users first", that's what most people say. Forget that, let’s start with your goals. Begin every website design project with a brainstorming session that outlines clear, realistic website goals that reinforce to your business objectives.

To better illustrate this let’s look to Amazon. Their objective is to maximize product sales. Through “upselling” and “cross-selling” they can maximize the purchasing power of each user, but to be successful in this they slow down the buying process. Unlike many of their competitors, Amazon does not have a “buy now” button in their search results. Users must visit one more page (with potential upsells) before making a purchase. This is a perfect example of how a site design can meet clear business goals.

buy-now-example

Most modern ecommerce sites have removed the “buy now” button from their search results, although some brick and mortar outlets still have it.

2. Focus on users second

With your clear goals top of mind, you’ll then need to define and prioritize users. Be as specific as possible. Some examples of questions to ask are:

  • Male vs. female breakdown?
  • Education level?
  • Locations in country?
  • Related hobbies?
  • Income bracket?
  • Who’s driving kids' product purchases? Kids? Parents? Grandparents?

The key point is that designers should be aware of users so they can ensure their designs don't block key usage paths.

3. Design for emotions

Be sure you understand what emotions your brand should convey. Brainstorm. Ask questions. Get agreement. And possibly most importantly, focus on these emotions when presenting back to your clients. Never ask if your client “likes” a design. When you deliver designs you should instead ask questions such as “Which of these makes you feel most professional?” or “When you compare these two designs you’ll see that this one is more modern, while this one is more dynamic. Those were both emotions that were important to you, now that you’re seeing them visually which do you think is the most important emotion for you to present to your target audience?”

emotions

Which of these organizations are fun? Relaxing? Innovative? Busy? Real? (Designs by @JessicaShiner and Christine Mark)

4. Follow the rules of visual design

There are many small elements that website users consciously and subconsciously use to decide if they’re going to trust a website. The most important ones are:

  • Cropping: selecting photos is only half the battle, cropping photos is what makes or breaks a page layout.
  • Negative space: paying careful attention to margins, padding, and line height is the difference between looking like the New York Times vs. a high school newsletter.
  • Fonts: everyone loves choosing fonts, but a great designer can spot a professional font quickly and has the restraint to keep the number of fonts on the website to 1-2 (not counting the logo which is often its own font).
  • Colors: colors are one of the hardest things for designers to use effectively. There are so many rules to picking a good color palette, and while it’s tempting to use online color palette generators, spend time designing your own color palette.
  • Layout: create good visual page “flow” so that the user’s eyes go where you want them to go on the page without other elements visually clouding your objectives.

5. Build a clear, visual hierarchy

Website visitors skim. They don’t read. Grab their attention and get them to the most important information with a clearly defined, well thought out visual hierarchy. A well thought out design — site > page > section — leads the user through the page the way you want. Users should be able to glance at your page and understand it in a split second.

Look at the following example of an article and notice how it’s hard for your eye to tell what the page is about or where the article starts!

bad-visual-hierarchy

Below is a mockup I made by changing about a dozen lines of CSS to create a clearer visual hierarchy on this page in the following ways:

  1. The article title should be the most prominent element on the page. It’s currently a smaller font size than the heading further down the page! So I increased the size of the article title, and decreased the size of the headings.
  2. The heading further down the page was also disconnected from the content it was a heading for visually, so I also tightened up the spacing below the heading while leaving the space above the heading to let users know that it is a heading for the paragraph below it.
  3. I also moved the little image to the right of the title instead of the left so that when a user scans down the left-hand side of the page to orient themselves the article title is in their vision.
  4. I removed the border and background classes on the blue blurb so it no longer competes with the heading and removed the top margin. There was already a class in place to make it grey, which works fine in this instance.
  5. I also removed the distracting text and image which highlights that this is a reprint article as well as some empty paragraphs and <hr> tags.

good-visual-hierarchy

I intentionally left all advertisements as they were originally coded, assuming that’s a critical part of this page.

6. Be consistent

Don’t confuse your users. Links should be consistent and distinct. Should you choose to use icons, photos and illustrations throughout make sure they look and feel like they belong as a cohesive set. Inconsistencies will distract the your user and obscure your message. Don't use more than 3 fonts — it’s best if they're all in the same family. Limit yourself to 5-6 colors (Note: the logo can be a different font, and often should be).

7. Break the rules (when necessary)

If there is something particularly unique or important that you need to highlight, you may need to “break the rules.” You can use one or two contrasting colors to help the element stand out. For example the UK website below emphasizes the tax rate by making this a larger element with a pop of color.

vat-rates

When people visit the info page about the VAT tax, the designers of GOV.UK made sure that the information most people need is front and center.

8. Don’t overuse gimmicks

Make your design fun, but make sure those elements support what you’re trying to accomplish on the site. For example the Inze site is beautiful to look at and wonderful on mobile but when I visited it on my desktop computer I was lost. It turns out the navigation is hidden until you start scrolling which unfortunately took my eye to the the bottom of the page. As a result I didn’t even notice the subtle navigation appearing at the top. I scrolled most of the way to the bottom before even realizing that there was (finally) a navigation on the top. The “hidden” navigation is a neat effect, but the “design” prevented me from taking the desired action. In the end, it conveys a confusing, sloppy brand image.

Compare Inze to what happens right in this article here on Web Designer Depot when you roll over a link on your desktop computer. We have a neat effect but it doesn’t create a “barrier” for users for the sake of a gimmick. It also degrades gracefully so it won’t break on mobile or older browsers.

9. Test. Measure. Improve

Websites evolve. Design for flexibility and adaptability. Collecting and analyzing ongoing test data will drive constant improvement. Remember, it’s all about creating a design that meets your goals.

tci-example

By carefully measuring the results of a series of minor design changes to the original landing page (left) we came up with a new design (right) that increased the percent of signups by 60%!

Remember

Effective graphic design needs to emotionally connect the user with the brand while at the same time getting them to do what you want. It can be done.

Do you agree with these rules for design? Would you add any more? Let us know your views in the comments.

Featured image/thumbnail, emotion image via Shutterstock.

Jason Mark

@JasonOnDesign: co-founder of Gravity Switch, frequent contributor to popular nerd blogs, and dynamic speaker on topics such as web & mobile development, graphic design, and project management. In a past life he was one of the first professors to teach internet strategy and web design at a graduate level. His passion? Helping people "take it to the next level". Follow Jason on Google +

Read Next

Exciting New Tools for Designers, June 2024

In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…

3 Essential Design Trends, June 2024

Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!

15 Best New Fonts, May 2024

In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…

How to Reduce The Carbon Footprint of Your Website

On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…

Has AI Killed User Testing?

Web designers employ user testing to evaluate a website’s functionality and overall UX (user experience). Various…

Exciting New Tools for Designers, May 2024

This year, we’ve seen a wave of groundbreaking apps and tools. AI is reshaping the industry, enhancing productivity,…

Using AI to Predict Design Trends

Design trends evolve at a blistering pace, especially in web design. On multi-month projects, you might work on a…

15 Best New Fonts, April 2024

Just like web design, type design follows trends. And while there’s always room for an exciting outsider, we tend to…

3 Essential Design Trends, May 2024

Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…

How to Write World-Beating Web Content

Writing for the web is different from all other formats. We typically do not read to any real depth on the web; we…

20 Best New Websites, April 2024

Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…