Design = emotions + usability

While 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.

0 shares
  • http://collectionwordpressthemes.com/ Eddie

    Thanks very much!

  • http://yopdesign.com/ Yofie Setiawan

    Most graphic designers have no clue about how to do a web design. This article could help a lot. Of course i want to add, that they need to understand UI and UX…

    • Jason Mark

      Yofie… humm… sounds like I might need to do an article about that next. :)

      • http://yopdesign.com/ Yofie Setiawan

        That’s great Jason! Looking forward for that :)

  • http://tipigraphics.com/ Tzvi Perlow

    Interestingly enough, immediately when I saw the first version, I was like… wait, this doesn’t look trustworthy..why?

    Oh! That is the design style I see on all those spam websites :)

    You gotta make sure your site looks PRO (though I still hate the design in general)

    • http://twitter.com/jasonnmark jason mark

      Tzvi, I agree with your take on the design, but keep in mind that different audiences respond differently to different materials. As much as I dislike spam, it’s designed a certain way because specific audiences respond to that look. I’d encourage you to shift your thinking a little on design and maybe try to think of it as a tool to bridge the gap between what your audience *expects* and where you want them to be, and a great designer can make that very successful.

  • http://www.chromatix.com.au/ Amber Lara

    Thanks for sharing this interesting article!

  • http://twitter.com/jasonnmark jason mark

    Testing is key. We actually ran a couple of related tests to narrow that down and went with the one that provided the best results.

  • christianbonner

    Jason nice article! I’m not designer but I have a question.. In Test Measure and Improve I see a landing page (left side) vs normal page (right side) and I would like your opinion about how can Image right side could be more atractive than left side for people to sign up. Thanks.

    • Jason Mark

      Hi Christian. UI/UX is an amazingly humbling experience. The only way you can do it right is to admit that you don’t know everything and test. As to *why*, I can make some guesses:

      1) people see content before image in this case
      2) they can’t get distracted
      3) there’s something about the shape/size of the image which sets them off.

      Here’s an interesting one. We’ve had a few clients come to us in the tech field with blue branding, and we suggest they change the color (or at least the shade). It turnes out there are certain shades of blue which people associate with a Windows “blue screen of death”. On the gut level clients were feeling “our site looks big and corporate” but their customers were feeling “blue screen of death”.

      At first our designers just said “that blue isn’t right” but as we experienced it more and more we could help track down the source of it, and it was a pretty abstract source.

      In the case of TCI it might be something that’s specific to New York City (where they’re based) which has a similar weight or color scheme?

  • http://www.rasmussen.edu/student-life/blogs/ Callie Malvik

    Great article! The last point about testing and improving is huge. Many designers assume that once the website up and running and looks pretty, they’re work is done. In truth, that’s only the beginning. Learning how to measure analytics and use them to optimize performance is key to improving your site and maintaining your audience! Thanks for the read, Jason!

  • http://entertainmentbuzzz.com/ Jia

    Nice article, I think usability is more important than emotions.

  • http://www.swiftprintuk.com/ jean

    really some of the best design you have gather here

  • Sara Harriet

    I believe that the right emotion can make user forgetting about bad usability. On the other side great usability really have to fight its battle if it wants to win when the site is lacking emotion. If you want to make great design you most definitely need both.
    Great article! Keep them coming :D Love it – wish I wrote it ;)