Website Optimization Book of Trends 2017

This article summarizes our observations and insights on how to optimize your website: It covers web design and web marketing techniques to better engage visitors and generate leads.

1. The Mere-exposure Effect

The mere-exposure effect is a psychological phenomenon by which people tend to develop a preference for things merely because they are familiar with them. In social psychology, this effect is sometimes called the familiarity principle.

Applied to websites, it simply means that you should balance originality with familiarity in the site's user experience. Unless you're valuing creativity more than conversion rates, you'll want the overall layout and the main features placement to follow today's standards.

In other words, if you're a company selling subscription-based softwares, looking like a company selling subscription-based softwares will help you generate trust and recognition. Learn the graphical, visual, and rhetorical codes of your industry by looking at other websites, then define and apply your own style and your differentiation, not the other way around. Leave plenty of room for creativity in your brand voice and copywriting, in your graphical chart, choice of fonts, but don't try to rock the boat for the overall layout and features!

Take a look at the websites below. The structure of the top of the homepage is similar and straightforward, even though the branding is totally different and original. The one-word menu items are expected and easily recognizable. At the top right corner of the page, a button indicates the next step. Simple and consistent as it should be.

The Mere-exposure Effect

Responsiveness

2. Responsiveness

The number of mobile devices and tablets sold globally every year is now greater than the number of desktops. Depending on the industry you work in, there is a high chance that most of your users will visit your website on a smaller screen. Is your website responsive (adjusts to the size of the screen)? Are font sizes legible on any screen? Are “tag targets” sized appropriately for mobile?

Follow this link for a free Mobile User Experience assessment by Google.

3. Speed

One of the most overlooked website optimization area is page speed. Your first step is to make your page load fast for a great first impression.

Google tracks visitors bouncing on your page and can rank you on the SERP (Search Engine Page Results) according to your performance. If your visitors go back to Google right away before your website has even the time to load, not only have you lost a lead, but also received bad point from the search engine.

Follow this link for a free Speed Test by Google.

Website Speed

Timing Triggers

4. Timing Triggers

The fold is the invisible line dividing the higher, visible part of your page. Where to place your call to actions? Above of below the fold? That’s the wrong debate. It is generally recommended to place a CTA (call to action) above the fold, but we realized by experience that this rule doesn’t necessarily apply.

The question is "when" to place your call to actions in the visitors' journey. You have the visitors’ attention when your page loads (at least for a few seconds), your job is to encourage them to scroll (not necessarily to click at this point) and learn more about your offer. The key to conversion is to offer the right action (contact, download) when the visitor is ready for it.

Low commitment CTAs should be placed on the sides or mid-content, whereas higher commitment CTAs should generally fall at the bottom of your pages, when the visitor has enough information to take a more important decision.

In the example below, we placed a call to action to download a best practices guide at the end of a blog post. Visitors that reach the bottom of the article are already engaged with the content and might be interested and ready for additional content. The blog post is freely accessible and the paper is gated with a webform for lead generation.

5. Modular Design

Modular design, or "modularity in design", is a design approach that subdivides a system into smaller parts called modules or skids, that can be independently created and then used in different systems. It exists in architecture, furniture design, and any families of design. Applied to web design, it is a technique where the page layout is built using a block grid pattern. Each of the elements of the design fit into the modules in rectangular patterns.

Modular design has the advantage of creating very consistent layouts that become easily "stackable" when displayed on smaller screens such as tablets or phones. It also creates very scalable websites, because almost every element relies on a pre-defined template that can be used to deploy a new element, such as a piece of content for example.

Modular Design

6. Minimalism

6. Minimalism

Minimalism is one of the main trends in modern web design. Simply put, modern websites have a much lighter layout than their predecessors and have a very different approach to space. For example, Medium, the online publishing platform developed by Twitter co-founder Evan Williams and launched in August 2012, offers one of the best browsing and reading experience online. The combination of highly readable fonts, greater font sizes, higher line heights, and a much lighter layout makes it a reference when it comes to minimalistic web design.

This "zero clutter" approach is the fruit of the growing role of User Experience (UX) and User Interface (UI) design in web development. UX approaches websites and webpages as systems to achieve clearly pre-defined functions and focuses reducing on "friction" or "noise" achieve these functions. UI works hand-in-hand with UX and applies that to the interface. It results in more efficient, objective-driven pages, usually entailing a reduced amount of copy and a growing use of minimalistic layouts.

McKinsey's website is content heavy, but they managed to achieve a great reading and browsing experience by minimizing superfluous content and their sidebars to the minimum.

7. Icons

There has been a growing use of icons on websites in the past few years, sometimes limited to company services, but often in more creative and interesting places. There are now countless icon libraries (we personally recommend Icons 8 that now includes more than 40,000 icons) and new ones every day. They have the advantage of illustrating a service or a point without cluttering a page with copy. Icons can also serve as bulletpoints, structuring a webpage (ie. file type icons for PDFs, DOCs, etc.). They can also add a personal touch to your website. When used in strategic places such as headers, they can actually replace text and allow you to save space.

Think about the right corner of the Facebook interface on mobile or desktop: It's relying on small icons and doesn't have any words apart from your first name and "Home". Common icons such as the magnifying glass for the search bar or the three lines for the menu can actually help visitors find what they're looking for faster and more instinctively.

Remember that universally understood icons work best (ie. print, close, play/pause, reply, tweet, share on Facebook). When in doubt, always use some text instead of icons for maximum clarity.

Icons

8. Micro Interactions

8. Micro Interactions

In the era of smartphones and smart watches with small screens, it can be difficult to fit a lot of information on one screen. Micro interactions help give websites' visitors access to information usually without reloading the page, and within a very small area. They can be used to preview content or message, give notifications, indicate a change of status, share a piece of content. They are also used to keep users in a continuous flow and show where elements of UI are logically coming from, not just appearing on page refresh. That creates a much smoother user experience.

In other words, they're very useful to keep the visitors on "track" while delivering a very interactive, rich, and dynamic experience. Micro-interactions help keep the layout identical from one state to the another, to lower confusion and create a consistent environment for the use. For example, the text on a button to "place an order" can turn into a "thank you" after a click and before the next page loads. As you can see, well used, they can also present the advantage of giving a very personal touch to websites.

9. Serialized Educational Content

Why is content marketing so important? For B2B companies, content marketing is the key to lead generation. Your contact forms, phone numbers, or “request for proposal” forms are more sales generation than lead generation, in the sense that your visitor is already ready to contact you. Optimizing your website for lead generation means building content (written, audio, video) that will interest your visitor and convert them into leads, that can be nurtured.

We find that the best content is "serialized content", that you can create in series. For example, we developed a series of quarterly networking and panel discussion events for our customer PRC Clinical. They are great for brand awareness and to showcase their expertise locally, but communication before and after the event touches a wider audience and helps generate trustworthiness and keep the company top of mind for prospects, regardless of where they are.

Serialized Educational Content

10. Trust Indicators

10. Interactive Trust Indicators

Trust indicators include customer testimonials, badges and icons indicating secure checkouts or money back guarantee. They're not new, but they're evolving into more interactive pieces. Indeed, the written customer testimonials are not necessarily enough to wow prospects. In our experience, it is often more effective to replace three testimonials by one single case study video, clearly highlighting a benefit of your product or service. Displaying the number of social media shares as "social proofs" is also a more interactive type of trust indicator that we've seen multiply in recent years. Mashable took this a step further and invented the "Velocity graph", a simplified visual representation of how quickly a post is spreading online. We believe that trust indicators showcasing the virality or relevance of a piece of content are going to take more on more importance in the next few years.

11. Smart Gating

Smart gating lets you gate content depending on a specific user flow. For example, if you link to an on-demand webinar on your website from a personal email, you'll want the content to be freely available (so that your contact doesn't have to fill up a form). You can also give access to a library of content for a certain period of time, instead of gating every single piece of content. This creates a more open browsing experience throughout your online content, without sacrificing on leads!

Serialized Educational Content

12. Contextual Pop-Ups

12. Contextual Pop-Ups

Pop-ups are trendy, but they can be overwhelming and hurt your user experience. However, they prove great in the short term as far as conversion rates. Contextual pop-ups aren’t your standard popups: Set these nudges to appear with exact triggers to particular audiences. For examples, you can configure pop-ups to appear after a visitor reads 2 blog posts or sees a particular piece of content. You can set up pop-ups after several revisits, if no lead generation action has been taken.

Thank you for reading. Let's get in touch!






Location

637 Natoma Street,
San Francisco CA 94103

Get in Touch

+1 (415) 216 6181
contact@timelapsesf.com

Let's Meet

M-F - 9-00 am to 6-00 pm
TimelapseSF.com