Instant Support: +1 917-274-7327 or contact.us@prostrategix.com
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.
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.
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.
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.
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.
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.
In our Business2Community post, we share a case study on two razor companies. Here, we will summary the most salient points.
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.
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.
In web development, it is important to remember:
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.
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.
In the Making and Breaking the Grid, Timothy Samara[1] deconstructs a page into the margins, flowlines, spatial zones, markers, modules, and columns.
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.
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.
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.
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.
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 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.
When users were asked “What is the most important factor in the design of a website?”[4], this is what they said:
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.
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.
Mobile has overtaken desktop in device usage[6][7]. Tablet remains somewhat inconsequential.
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.
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.
These data are a bit dated as they come from a 2018 study by Pingdom. They show a dramatic:
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 in the form of unused cascading style sheets (CSS). 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.
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.
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.
In summary, the key to leveraging the psychology behind good web design is to remember the following:
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.
Enjoyed this post? Consider following us daily.
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
In marketing, so much depends on your website performance. Website audits are incredibly useful in unlocking your site’s full potential. Here’s how.
Gain More Insight!
Web design and development are not the same. Web design is about beauty, while development is about brains. Both are important when finding the right agency.
Gain More Insight!
When it comes to web design in New York City, you’ll want to make sure that your site includes a strong mobile page and the needed local tags
Gain More Insight!Schedule a discovery Call and find out what ProStrategix Consulting can do for you!
Book Discovery Call!