Introduction

I was inspired to create this blog post when I was asked to explain to a client how we go about creating websites and increasing website engagement. I will explain Webfor’s thinking and methodology for creating an engaging website that leads users into conversions. I’ll share my thoughts about important elements of creating an engaging website like:

• Content
• Structure
• Interface
• Calls to action (CTA)

 

Creating Engaging Websites

I use the analogy of websites being like writing a book. Creating websites is similar to creating books; homepages act as book covers, and each web page is a chapter. There are story arcs throughout the book and smaller arcs for each chapter — just like websites, brand messaging, and CTAs. Homepage, aka the book cover, should make a memorable impression, give important details about a company, show the best accolades, and entice the intended audience to delve further into the story.

Web pages should have a beginning, middle, and end. Every web page should tell an aspect of the story. For example,  “About Us” is about the company’s history, culture, leadership, and team.

At each point, there should be hooks for users to engage with. These hooks throughout your website are calls to action. CTAs are where a user converts.

 

Website Elements

Content

Content is the meat of the story. It is the primary way to keep users engaged. Content should have an appropriate tone to match the audience and should answer questions. A user comes to the site for a specific piece of information that they seek and tends to quickly bounce if they cannot find content related to their search query.

Content should be structured as a clear headline, body text on the left side, and then an image/video to the right. A clear headline would tell the user what the body text is about as a user skims through the website. For the next section, flip the order and have a photo/video, then a headline, and finally the body text.

Content should be snackable, meaning it’s broken down into content sections that are easy to understand and follow. Some great ways to make content more snackable are:

• Lists
• Accordions
• Bolding key elements

White space helps make content snackable, stand out, and gives our eyes a break from visual stimuli. Our eyes need a break from stimuli to differentiate content sections and digest information/concepts.

 

Site Structure

Site structure serves as a story outline, outlining a journey your audience will go through. A good user experience should have a logical flow of information and be grouped so that users have accessible areas of content that answer their search query. It is crucial to group information together in places that flow effortlessly in order to guide the user’s journey. 

We use whimsical.com here at webfor, but creating a site journey could be done with sticky notes. I go into more detail about this here.

Say a user wants to learn about a business. They would be interested in the company’s history, culture, and leadership. If they are interested in employment, they would like to know about possible careers, what it’s like to work for that company, benefits, and available positions. 

 

Interface

Desktop, Tablet, and Mobile

Utilizing responsive design is important for good audience retention because users will only engage in your story if they see it in its best light. We recommend using media queries to develop three layouts — desktop, tablet, and mobile. If you are redesigning a live website and you have Google Analytics data, it is helpful to see the data to know where you should focus your design efforts most. Desktop and mobile are the most popular viewports. Knowing what lens a business is viewed through is an excellent boon for creating an engaging website. 

Interactive Interface

Hovers and On-click

Hovers and On-click behaviors on buttons, text links, read more, menus and contact forms encourage interaction with the website. Users need feedback to understand what parts of the websites are interactable. 

Types of effects

• Switching between contrasting colors
• Inverting the color of text and button color
• Solid color background to outline
• Outline to a solid background
• Underlining
• Color overlays

Animations 

Adding design details to load into the homepage above the fold makes a great first impression. Also, adding animation to content sections is a great way to lead the eye and draw users further down the pages as they scroll. Animations offer another way to guide the users’ eyes and increase audience retention.

 

Calls to Action (CTA)

Calls to action should be placed throughout each webpage. CTAs can be buttons that say “Contact Us,” banners with text and a button, or contact forms. The best practice is to have one at each page’s beginning, middle, and end. Various CTAs throughout each webpage allow multiple chances to capture the users on their journey. CTAs are another design element because they break up content and establish separate sections for your audience.

Every CTA doesn’t need to be unique. We recommend having somewhere between three to five different CTAs for your site. Some possible CTA topics could be:

• Call or Email Us
• Join Us (could link to a contact form or email)
• View Careers (this could lead to your Careers page)
• Contact Us (this could lead to your Contact Us page)
• Contact Us Form (this could be a simple form with a name, email, and a message box)

 

Closing

When designing websites, I think about how to tell a client’s story and find this approach is a great analogy to guide clients through their website creation process. What points can we highlight to become the company’s book cover? What content will keep their audience involved, and what story arcs can we draw upon to hook in users and make them conversions? What is the best way to utilize content, structure, interface, and calls to action?