Mistake #3. A Website Design That Gets in the Way of Good User Experience 

You are the expert and will remain the expert if you keep ahead of your rivals. Keep up with web design trends. Create a clear understandable, consistent-usage, user-friendly “I like that” website. Add photographs that entice potential clients to stop long enough to be interested and confirm they’ve come to the right place.

Keep up with the Latest Trends in Design. Do Not Go against the Trend  

For example, in 2016 flat design was trendy.  Using comments, exaggerated shadows, and 3D effects were big don’ts. Keep it simple and clean and add only subtle details. Follow the trend setters for an attractive look and feel. Just check what Apple, Facebook, Google use on their websites and you’ll get the big idea.

Create a Screen-Friendly Brochure

Not all of us will read your amazing guide on desktop. Be sensitive. Don’t go below 12pt or even better 14pt. Maximise the readability of your text. Good font size, spacing, alignment, line length, colour, text and background will make your guide much easier to read.  

The company in this example got it all wrong.  While their design is maybe ok for print, it is not at all ok for the screen.  

• The 9-point fonts are way too small
• The portrait orientation does not work for laptops
• There is far too much text

They do help us scan the text by breaking it into sections and the contrast is not that bad. The overall feeling though is “oh my god I wish I had this printed before leaving the office”. 

Do not assume people will print your brochure! This is simply wrong from so many points of view. Environment, User Experience, Convenience, Our whole lifestyle in the 21st century. You put your brochure online, make it screen friendly!

Check this as an example from our client Nanny Express to see how to get it right.

• They used large fonts (32, 16 and 12 points)
• Great contrast
• 3-level hierarchy for the text

Choose Wisely. Choose Landscape

Computer monitors have a landscape orientation, so if your PDF brochure has a portrait orientation (say, vertical 8.5×11), the viewer will have to do one of two things. Look at the whole page in total, which will be quite small because of the wasted spaces on both sides of the screen, or the width of the page can fill the screen when scrolling from top to bottom. It’s the same for online brochures and e-guides. If your potential customers read them online, landscape is better than portrait.

Be Consistent about the Way You Write Your Titles

Almost everything goes here. Capitalized, lower case, capitalizing words with four or more letters Chicago style. But be consistent. We prefer the Chicago style but sometimes our copywriters are not happy about it.  Go Chicago, go API, or just capitalize words with four or more letters.

How can you do it without enrolling for a Ph.D. in professional editing? This might help you if you are the copy-paste type: http://titlecapitalization.com/

Choosing Fonts Smartly - Legibility Over Funkiness - Why I Don't Love Garamond Anymore

Use a maximum of 3 fonts, preferably 2, and ensure your body text font is easy to read.  Go for a sans serif font rather then a serif font. This will improve legibility. Funky fonts are ok for emphasis but your body text font must be legible! Ask a designer friend how you can pair up the fonts. If you get no help play safe.

You can get some combinations that work together here:
https://www.canva.com/font-combinations/

Almost forgot. Do you want to know about Garamond?

Back in the days I used to love this font and use it across the board. Until our branding consultant told us the story about this 5 centuries old font. Unsurprisingly enough, it was invented by Parisian craftsman Claude Garamond in the 16th century.  Although popular among French engravers it is not ok for sophisticated devices of the 21st century. 

Use Seductive Photos to get Your Potential Clients to Download and Read Your Online Guide

A Picture Is worth a Thousand Words. Yes, it is a cliché. But it’s also true. Make your point by showing potential clients how uncomplicated their lives will be when they sample the benefits your solution provides. Use seductive or aspirational photos that can propel your readers into the future where their problems are solved (by your product or service). Voila!  A nicely designed cover using an aspirational photo, a title and a subtitle is a great idea since this cover will be featured on your landing page or in the opt-in form on your website.

Keep the design simple and clean. Do not go overboard with stock photos. Real photos telling the actual story of your business are more authentic and convincing. Look how Nanny Express pictured the dream of every parent. These children are in good hands. Oh, just what we’re looking for! Who are these guys?

An alternative approach that works just as well is to use a photo to reassure potential clients it is for them.

Use Photos to Tell Visitors “Yes, You Are in the Right Place” so They’ll Stay on Your Website

  Xelf studio is a gym in Hamilton, Ontario, Canada specialising in training beginners to get fit and adopt an active lifestyle. One of our “Online Website Reviews” assessed their website and we loved what we saw. Look how masterfully the photo shows who it is for. And how beautifully the copy and the visual components reinforce each other. 

As I recommended in the “Online Website Review Session” Xelf needs to fix the call to action button. A high contrast combo would also greatly improve the user experience of this otherwise outstanding website. White text on light blue is never readable enough.

The Holy Trinity: Title – Subtitle – Body Text

Title – subtitle – body text is the holy trinity of text hierarchy. It never gets old! See how this structure helps to effectively build the case for 3D Property Tours.

Why is this structure effective?

The title attracts initial interest by mirroring questions potential buyers have in their heads. Why should I go for it? The subtitle qualifies the early adopters of new technologies. This is intentional, as the target audience of Immersive Property Tour are technophiles and the company is recruiting their early adopters. The body text, a bulleted list in this case, gives compelling reasons for the potential buyer to go for it. Many Reasons always sound better than one and some NLP gurus claim to have magic properties. Our client loved all the above 8 reasons so much we simply couldn’t leave any of them out.

Use a Clear 3-Level Structure to Drive Your Point Home on Your Website’s  Homepage

Let’s look at two webpages now.

The yoga challenge page has all the “must have” information on the page. However, the structure is not adapted for people reading from their screens, desktop or mobile.  There is no obvious dominant message on the page.  Visitors need to scroll down in order to find the call to action button which takes them to the “opt in” form. 

Our client, Insight for Good did a better job. The hierarchy of the messages and a clear call to action placed above the fold makes very clear the main message, also known as the value proposition.  

Insights for Good could still improve this by using a more to the point headline, such as “Get in Touch to Achieve a Higher Impact from Better Intelligence”

Design the “above the Fold” Section of Your Webpages Smartly

The “above the fold” section of a webpage - the part of the webpage your visitor can see without scrolling down is the most valuable online real estate on any webpage! Why? Because this section will make or break the success of your website or landing page as a marketing tool.

 Most people would not scroll down to see the rest of your page unless from the moment they land on your page there is something in it for them. If you don’t sell the idea here that you have something of value for your visitors they will simply press the back button or the little X in the corner of their browser.  And we all hate to see bounces in Google Analytics. So the main question is how do you show in the blink of an eye, your products, services or solutions are something of value? See below how our client, Insight for Good, does it. 

Who is it for? Organizations from certain niches who want a deeper insight into their target audience for better results

What’s in it for them? They really understand their markets so they perform better and have a greater impact

What are visitors expected to do? Choose their sector and find out what Insight for Good has in store for them.

See how beautifully Insight for Good answers all three questions featured at the beginning of the article. The visitors can see them without looking for needles in the haystack. Is it for them? What benefits do they get from the information the site presents?  What’s the next step to get these benefits? We do not want small text we can hardly see. We want no distractions, no fluff. We want ppace to breath.

We do not want too much information? We do not want to be lost in the deep forests of cyber space.

What to improve:

Well, we do need to scroll down a bit to find this out but it is something that could be easily fixed. See below how seeing a call to action makes everything much clearer. Of course by face-lifting the design the photo also shows properly. 

How to Design a High-Conversion Opt-in Form on Your Web Page

Let’s take another example and see how a clear message hierarchy can help you design a high performance opt-in form.

This is critical since one of the main objectives of your website is, or should be, to turn your visitors into contacts on your email list. Or, as digital marketers would say, to generate as many qualified leads as possible. How does Anastasia achieve this?

Anastasia is a career coach for millennials and we got to meet her online because she submitted her website to one of our online Website Review Sessions. I loved the way she conceived her website and designed it for the purpose of generating good leads for her coaching services.  Let’s take a look at the way she designed the opt-in form she placed on her homepage to generate qualified leads.  Her strategy is very good. She is offering her latest book for free to her potential clients and thus, collects their email addresses. A perfect example of lead generation on autopilot. 

How does the 3-level hierarchy work here?

Level 1 – A clear Title tells exactly what it’s all about (a book) and what’s in it for the user (free copy)

Level 2 – The Subtitle Spells out the main benefit the user gets from reading this book

Level 3 – The Body Text gives more benefits to make the visitor play along, download and read the e-book.

The clear straightforward and custom-written call to action is also a “must have” for a successful opt-in form and Anastasia got it right.

How much more powerful is this than “Download my latest book” or, God forbid, “Subscribe to my newsletter”?

Could We Make this Opt-in Form Even More Powerful?  [Makeover example]

Absolutely, we can. I would put in the main headline the main benefit the reader would get form this book. The cover of the book already shows that it is her book so it is not really necessary to communicate this in the headline. Ok, so I’m a millennial in search of the best career options. What is more exciting for me: to read a book written by a career coach or to design my own plan for success with the help of this coach? I’m compelled to download something that helps me to take charge of my career.  It’s far more important than simply downloading a book. 

Start now creating the life and career you want!

Design Issues regarding Opt-in Forms

Here Anastasia got almost everything right.

• Using the nicely designed cover of the book to opt-in not only to tell, but also to show what you can download
• Excellent contrast for the text
• Good text structure to reinforce the hierarchy of the messages
• Good color scheme
• Screen friendly fonts

Make Your Calls to Action Pop Up

What should be improved is the call to action button. The grey on light blue contrast doesn’t work. 

The solution is obvious and Anastasia is using the right contrast in other buttons on her website. See how the readability is improved in the button form her contact form.  The white on blue contrast works so much better.

Bigger buttons with bigger fonts will be even better.

Now that the new call to action (“text in the button”) is more visible we don’t need to repeat information about the “free copy” in the text.  Instead of repeating info not visible enough we can use this valuable online real estate to give the visitor an additional reason to take action now. That’s why I included “Start now to create the life and career you want”. It creates a sense of urgency and gives a compelling reason for Anastasia’s visitors to click now, rather than later. Which in most cases, is never.