January 31, 2021

Learn the Secret to Great Web Design. Simple Psychology

Web sites to communicate a message, quickly & effectively. If not done well with great web design, then the results, dwell time, bounce, or conversion, will suffer

In our post on Business2Community “Learn the Secret to Great Marketing. Simple Psychology”,  we went into great detail on how to develop a marketing message. In this post, we will summarize those concepts briefly, and then dive into how they impact web design. 

Your Web Pages are a Communications Tools

As with any marketing vehicle, your web page needs to communicate a message to your target audience. If your message is not communicated well via your website design, then the results, dwell time, bounce, or conversion, will suffer.

Why Communication Can Be Challenging

Communication is a social process, which means it not only involves the sender and receiver, but it also is impacted by the environment and context in which it is viewed. 

The classical model of communication has a sender and receiver in a feedback loop.

Web Design Communication Feedback Loop

The receiver will extract the meaning of the sender message based on the symbols are the images, designs, colors, fonts, etc. that are sent along with the message. In web design language, we would call this the user experience (UX).

UX design is so critical because the meaning extracted is heavily impacted by the symbols (images, fonts, colors) and the environment (device, web browser, screen size, etc.) in which it is received.  

There is also a pitfall here. We or the client can get so enamored with a high interactive design, which while captivating, can also distract. You will need to be mindful of both. 

Tying Our User’s Needs to Our Communication Goals

We, or our clients, have communication goals. Our shared goal is to have the end users take some action. The best way to motivate them to take action is by helping them solve their needs. 

While this may seem simple in concept, it is difficult in practice. It is difficult because of the inherent challenges in communication. We may think we are communicating one thing, while they are receiving something different. The same is true in reverse.

Typically, the web designer is not responsible for developing the client’s messaging strategy. However, so much of what we do can affect the clarity or meaning of their message. There needs to be a point in your design process where you validate that you have a clear understanding of both the client’s and end user’s needs  

Therefore, web designers need to have a basic understanding of the basic human needs hierarchy. Much has been written on human need states, but, for our purposes, we will use a simple model, Mazlov’s hierarchy of needs.

Maslov Hierarchy of Needs

This model has been around since the 1940s so you may be familiar with it. There are a number of inherent challenges with it, such as assuming a linear pathway akin to a sales funnel. However, it remains useful with a few caveats

Working with Maslov

In our Business2Community post, we share a case study on two razor companies. Here, we will summary the most salient points. 

Choosing the Right Level of the Pyramid

If given a choice, you should always try to aim for the highest level possible. Again, this probably is not the web designer’s choice. However, it is always a good question to ask your client. 

Being Consistent with the Level

When creating visuals or other design elements, you will want them to match the need level. For example, if your users are worried about keeping their job, worried about their health, or other security issues, elements communicating “be all that you can be” are not likely to resonate.

Key Communications Takeaways

In web development, it is important to remember:  

  1. The website is first and foremost a communication tool
  2. Communication is messy and complex. Our job is to try to make it easier and not over complicate it.
  3. There should be a validation step in the design process where you validate the client’s goals and end user’s needs are aligned. The client is not likely to blame themselves if the site does not perform.
  4. When designing the site ensure you stay consistent with the targeted need state.

How Web Design Choices Impacts the Message 

Now that we have covered meaning, we switch our focus to symbols and environment. The graphic design of the page can either enhance the message and support the meaning, or it can distract from the message and dilute the meaning.

Basic Elements of Good Graphic Design

Three of the main elements of a good graphic design are layout, images, color, and font choice. Color is very symbolic. However, the meaning of those symbols varies by culture. For example, in North America and Western Europe, red is a warning, whereas in China, it means good fortune or luck. 

Layouts, images, and fonts can be symbolic as well, but for the purposes of this article, we will focus more on their role in navigation, legibility, and comprehension.

Layout: Making and Breaking the Grid

In the Making and Breaking the Grid, Timothy Samara[1] deconstructs a page into the margins, flowlines, spatial zones, markers, modules, and columns.

Graphic Design Example of Concepts

Margins and columns are self-explanatory. Flowlines are alignments that break the page into horizontal bands and help guide the eye across the page. 

Modules are individual units that repeat uniformly across the page. The most simple execution of this idea is the simple grid pattern or repeating units of the same area. 

Spatial zones are groups of modules. A simple example would be 3 columns and 2 rows. If you use an CMS program or layout, the vast majority use the grid format. You may need to create a custom design if you wish to break that grid.

Markers are akin to headers and footers as they only occur at the certain defined points on the page.

Common Grid Patterns
  1. Manuscript: Has one main module, which is constrained horizontally by the margins and vertically by the header and footer markers.
  2. Column: Has 2 or more columns and 1 or more modules per column. The columns are constrained horizontally by the margins and vertically by the header and footer markers.
  3. Hierarchical: Margins constrain the page horizontally, the markers vertically. The body consists of a number of spatial zones arranged in the order of importance, usually following the golden ratio.

The most common for web design are the column format or the hierarchical. Before the onset of mobile, hierarchical was common. However, given the smaller display sizes and challenges with maintaining legibility and proportionality in responsive web design, the column format has gained precedence. 

The column layout is the most flexible and mobile-friendly, and therefore, the recommended default format. Whichever design you choose, you will want to ensure that your style sheets are aligned.

Color Theory

The impact of color on mood and meaning has been studied and hypothesized for centuries, and it remains more of art than a science. Part of the reason is that color is very context related, like most symbols. 

For example, blue, blue-green, green were seen as the most pleasant colors[2], few would find blue-green pasta appealing. 

When using color, it is helpful to do some competitive research to see what color pallets are being used in your category. It doesn’t mean that you need to copy them, but you will at least have a sense of how those colors are being interpreted.

Color Harmonics - Color Wheel

Using colors, however, is more science than art. The idea of a color wheel was first introduced by Issac Newton in the 17th century. It was advanced through Goethe and has progressed to this day. 

The basic concept is that certain wavelengths of light are better suited with others. Thankfully, we do not have to cover all of the theory in order to leverage it in our designs.

Adobe has a very helpful tool called the Adobe color wheel. There are several approaches that can be taken depending on the degree of contrast you need. 

  1. Analogous or Monochromatic: Less need for contrast and more for consistency
  2. Triad: Provide a hierarchy for contrast: Body, CTA, background
  3. Complementary: Natural contrast
  4. Others (split complementary, square, etc.): Available if you want more than a three tier hierarchy for contrast, such as body, CTA, background, and link, for instance.

Font

There has been much debate on font type, size, etc., but there has been little agreement. A literature review by Tarasov summarizes it well:

Almost equal  numbers  of  studies  showed  advantages  and  disadvantages of  serifs,  as  well  as  a  preference of numbers  of  columns  in  text.  The  preferences  of  specific  line  length  and  font  size  are  highly  dispersed.  The  mean  value of legible line length is about 100-120 mm. The mean value of the most legible font size is close to 12 points but without specification of typeface.[3]

Thankfully, there are places where you can turn for help. Whether you hire a local designer or a company such as DesignRush or BestDesigns, get the help you need to keep your imagery captivating and engaging.

How User Experience Impacts the Message

How users interact with content has vastly increased and will likely continue to do so. Therefore, our designs need to keep in mind the multitude of ways a user can view our content. This is not only in regards to visual design but also to speed of access.

Finding What They Need Quickly

When users were asked “What is the most important factor in the design of a website?”[4], this is what they said:

Most Important Aspect of Website Design

This is correct 76% of users replied: “Easy to Find What I Want”. It was nearly eight times as important as appearance and experience.

In another study, NN Group[5] found the main cause of failure was the lack of findability.

Why Users Leave Web Design Causes

This is why all of the discussion on needs and communication are so critically important. Users expect to find what they want quick, and if they don’t, they leave.

Creating a website requires a significant investment in time and money. Therefore, to have a positive return on this investment, the site needs to perform. In order to perform, the site needs to have the information that the user needs presented in a way that it is easy for them to find.

Responsiveness

Mobile has overtaken desktop in device usage[6][7]. Tablet remains somewhat inconsequential.

Mobile Share of Global Traffic
Mobile Share of Global Traffic
Share of Device Usage

Given these data, designing a site solely for desktop or using only a desktop view in your content management system is not a wise choice.

Responsiveness is key. The site needs to work at least equally well on both. When it comes to “responsive” themes, I think that is an oxymoron. 

That doesn’t mean that a theme can’t create a well designed responsive site. Some can. However, the excess html or css code is likely to cause speed problems as we discuss below.

Speed

Page speed has a significant impact on the user experience and a number of key metrics. All of which are directly or indirectly related to message delivery.

Bounce Rate

These data are a bit dated as they come from a 2018 study by Pingdom. They show a dramatic:

Page Speed vs. Bounce Rate

increase in bounce rate for load speeds greater than 3 seconds. This appears to be an acceleration from what Google shared in 2016[8].

Page speed can be affected greatly by the content management service on which you design your site. Most themes carry excess code. This is code that is part of the theme, but not active on the page. 

This is the main reason we prefer custom builds to themes. However, if you decide not to go this route, just be aware that page speed may be an issue for you, especially on mobile.

Conversion rate

According to an article in the Search Engine Journal, “nearly 70% of consumers say a website’s loading time affects their willingness to buy”. Niel Patel states “A 1 second delay in page response can result in a 7% reduction in conversions.”, though it is unclear from where he found this data. 

While the exact data and numbers may be difficult to find, the end conclusion is the same. A slower site converts less.

Dwell Time & Pages per Session

The Pingdom data show that pages per session fall off with decreasing page load times. There is not a lot of data measuring the impact of page speed on dwell time. Therefore, it is unclear whether page speed has a direct impact on dwell time.

Summary

In summary, the key to leveraging the psychology behind good web design is to remember the following:

  1. The grid layout is the simplest and easiest to execute in a responsive environment.
  2. Users need to be able to find what they need quickly and easily. A good navigation and hierarchy can help, as well as, design elements that scale well and do not require unnecessary code.
  3. Ease trumps beauty every time. Therefore, I would recommend spending more time on making things easy to access than creating custom fonts or complex designs.
  4. The days of themes are numbered. Mobile has overtaken desktop usage. Unless you are an expert in coding language, then cleaning up a theme will be challenging.
  5. The 3-second rule: Your goal should be to design mobile pages with load times less than three seconds.

We covered a wide range of topics in this post and glossed over much of the communication section. If you would like to delve into this in more detail, you can download our free eBook.

Footnotes

  1. Samara, Timothy. Making And Breaking the Grid : a Graphic Design Layout Workshop. Beverly, MA :Rockport Publishers, 2005
  2. P. Valdez, et. al., Journal of Experimental Psychology: General 1994, Vol.123, No. 4, 394-409
  3. Dmitry A. Tarasov, Alexander P. Sergeev, Victor V. Filimonov, Legibility of Textbooks: A Literature Review, Procedia - Social and Behavioral Sciences, Volume 174, 2015, Pages 1300-1308
  4. Hubspot, https://blog.hubspot.com/blog/tabid/6307/bid/14953/What-Do-70-of-Consumers-Want-From-Your-Website-New-Data.aspx
  5. https://www.nngroup.com/actiles/top-10-enduring/
  6. https://www.broadbandsearch.net/blog/mobile-desktop-internet-usage-statistics
  7. https://gs.statcounter.com/platform-market-share/desktop-mobile-tablet
  8. Google/SOASTA Research 2016

About the Author

Brian Cairns, CEO of Prostrategix Consulting. Over 25 years of business experience as a corporate executive, entrepreneur, and small business owner. For more information, please visit my LinkenIn profile

Receive Our Newsletter!

Sign-up to our newsletter by filling out your details below.

Related Posts

Want a Lighting-Fast Web Design? Pick the Right CMS
Want a Lightning-Fast Web Design? Pick the Right CMS

If you on the pros and cons of your CMS, you may be in for a big surprise in your web design performance and search engine rankings

Read More!
Web Design Services NYC
Web Design Services That Are Critical to Success

Your website is your most important communication tool, especially in NYC. Web design services are critical in ensuring your desired message gets through.

Read More!
Fast, Responsive, & Intuitive Web Design NYC
Fast, Responsive, & Intuitive Web Design NYC

For a web design to be successful, especially in NYC, it needs to be fast & responsive to do well on mobile, and intuitive so users find what they need quickly.

Read More!

Free Resources:

E-books, Courses, and Other Information

Learn More About Us

Ready To Transform Your Business?

Schedule a discovery Call and find out what ProStrategix Consulting can do for you!

Book Discovery Call!