CXL Institute Conversion Optimization Mini-Degree Scholarship Program Week 6 Review

David Wong
5 min readDec 27, 2020

I left off last week’s blog post covering the ‘website speed optimization’ module for the CRO best practices section of the Conversion Optimization Mini Degree training. This week, I will continue to go through more of the best practices modules starting with the visual hierarchy module.

Visual hierarchy is the order in which the human eye perceives what it sees. It is essential to making effective layouts and web design. If shown a bunch of different sized shapes of the same object, the one that would get the most importance would be the biggest one, while the smallest object would be ranked as the least importance of the bunch. This is without knowing anything about what the shapes of the same object even mean. That is visual hierarchy in action.

Certain parts of any website are more important than others. It is our job to bring more attention to the parts of a website that are most important and less attention to the parts that are not as important. Some examples of important parts of a website can be a call to action button, value propositions, forms, etc. If there were multiple website items on a menu, would they all be equally as important as one another? What do we want a website visitor to do, to click? Knowing these things helps us decide what links are most important to prominently display in accordance with visual hierarchy.

An important to note here is that visual hierarchy is NOT limited by just shapes or sizes. There are other ways to ensure that the visual hierarchy emphasizes the most important parts of a website or a given web page. For example, on product pages on Amazon.com, the add to cart and buy now call to action buttons are prominently displayed in distinct colors that standout from the rest of the items on the page. What matters most here is that there is no “best” color to use for a call to action button. However, the important principle to take away from this is to make it a priority to select a color that stands out clearly on the landing page from the other parts of the page so that it is visibly easy to notice and ranked with high importance in a visitor’s brain.

In order to rank the importance of the parts of a website or landing page, it is important to start with the business objective or end goal in mind. Without a specific goal or objective, you won’t know what to prioritize or how to rank the most important visual components of the website.

An example of this is shown in the module where the home page of the Williams Sonoma website prominently highlights the headline in big font and a piece of juicy meat to sell the end result of juicy delicious meat by checking out and potentially buying the company’s cooking ware.

A habit to takeaway from this is to surf the web and consciously rank different elements of a web page in the visual hierarchy followed by revisiting your own website to see if the significant and important informations aligns with the visual hierarchy elements.

With that in mind, you should rank the most important or wanted/desired actions for every web page. where do we want people to click? Which pricing plan do we want them to choose? Which pieces of information on a web page do you absolutely need your website visitor to see and read?

When you are fully aware of every website page’s priorities, it is easy to set the visual hierarchy right to align with your desired actions. On an e-commerce website, this could be the product page focusing having a bigger “add to cart” call to action button or featuring bigger images to highlight a product’s features and benefits. Or, it could be bolding headlines, sub headlines or italicizing or underlining certain copy in the product description to emphasize and make the main benefits and points a potential customer would need to know to make a proper buying decision for that product. Or, it could be adding reviews with faces of customers to build trust and social proof to entice visitors to pull the trigger on buying. And perhaps it would be best to include these most important elements of the product page above the fold since the visual hierarchy there can make or break whether or not a visitor spends more time on the product page and scrolls further down, which could possibly improve the likelihood that a visitor converts into a paying customer.

Furthermore, including an FAQ page on a website is an interesting topic to discuss. I find it interesting that the FAQs on websites module states that the best interfaces don’t raise any questions and that our number one goal is to eliminate the need for FAQs on a website. Much of what I thought was true was debunked by reading this module.

Your audience should not need to read instructions to figure out how to use your website. That is something I do agree with from the standpoint that people do not want to have to read or think or figure things out or be confused. This obviously is friction and does not help with driving conversions. But I got the notion that not having an FAQ referred to any website. It seems that this caters more towards platforms and not as much to e-commerce products as the example here.

However, FAQs can make a difference if they are really designed to help. Having a dedicated FAQ page is fine but it should NOT belong the primary menu. They are way more effective in context. It is important to pay attention to what is asked by people who are prospects or customers through the phone, email, live chat, and other forms of communication with them. If there is a common question, it is best to answer and address those in the copy itself.

I personally use an FAQ section in my product page for e-commerce, so I find this module interesting in what it states regarding having a standalone page for FAQs. I would believe that adding an FAQ section reduces friction from making a website visitor have to click away from the product page to an FAQ page separately but I may eventually split test this for myself to see if this makes a difference.

To wrap it up, this week I covered the visual hierarchy and FAQ modules of the best practices section of the Conversion Optimization mini-degree training. I will continue next week and likely wrap up the rest of the best practices section of this training.

-David

--

--

David Wong

Conversion Rate Optimization, E-Commerce, Copywriting, Performance Marketing, and Digital Marketing