How do you get people to stay longer, and keep coming back? Seven tips from pro designers.
Ensuring your client is happy with your website design is only the first step. Once it’s out in the world, your site is competing for attention with millions of others, and you need to find ways to encourage visitors to stay longer and keep coming back.
Engagement is one of the most difficult aspects of user experience to design for, because it requires not only quality content, but also clever and exciting ways to present that content.
If your website is feeling a little lifeless, these tips should help breathe new energy into it and win back those visitors!
01. Parallax: turning scrolling into engagement
Imagine if you could get as much as 70% more engagement from one single change. Could such a thing exist? As a matter of fact, it does!
Parallax scrolling is a trend that’s sweeping the design industry, and with good reason—it provides a unique and eye-catching way to visually deliver a message.
Parallax refers to the use of several elements that individually move as you scroll down the page, resulting in a dynamic experience that encourages further scrolling.
A great example is Sony’s remarkable Be Moved campaign, which stretches the limits of what parallax can do.
Advanced code-free website design platforms, like Webydo, mean you can now design amazing, parallax websites with pixel perfect accuracy. They have recently unveiled their code-free, Parallax Scrolling Animator, to facilitate the production of pixel-perfect, parallax websites.
02. Symbols and iconography: visual lubricant
On information-rich sites, you need a lot of text to describe things. This means designers must devise ways to present that text with maximum impact.
The use of icons can help your website visitors find what they’re looking for much more quickly. The tiny visuals not only illustrate the concepts they accompany, but their distinctive look helps guide the eye from place to place, like visual signposts.
In the early days, icons had to be implemented as bitmap graphics, which was cumbersome to implement and modify, and there was no simple way to style the icons.
Nowadays, designers make use of icon fonts to produce glyphs that behave exactly like text: vector-based, infinitely scalable, and customizable via CSS. One of the nicest is undoubtedly Glyphter. With its appealing and intuitive tools, Glyphter allows you to draw from various open-source icon sets (including Font Awesome!) or upload your own SVGs to create custom icon fonts that you can freely download and use on your next site.
With icons supporting your text content, paragraphs and interface elements become more than simple blobs of text, and combined with the use of dynamic typography, your site becomes enjoyable and easy to read.
03. Flexible typography: responsive design for content
Responsive design isn’t just about layout – it should be about content too. It’s great if a layout adapts to the necessary screen size, but the content must also adapt accordingly:
Mobile users don’t have time to read long paragraphs, so make sure your mobile version is concise and offers clear calls to action. Reading on a tiny screen isn’t fun if the text is too small; so use dynamic type techniques to keep text at a comfortable size — don’t make users zoom!
The best example of this can be seen in the design of the Information Architects site — one of the originators of the practice. Their blog discusses the theory and techniques of responsive typography at great length and makes a clear case for why it’s preferable to static type sizes.
Having content that responds to the visitor’s reading situation makes the website itself feel more fluid, more aware, and overall more engaging. This same idea extends to imagery too…
04. Vector images for responsive visuals
Text is only one piece of the web design puzzle, imagery is usually just as important. Typically, this imagery has come in the form of bitmap files like JPGs, PNGs, and of course GIFs.
The problem with these bitmap images is twofold:
- Bitmap images are of a fixed size, so they cannot losslessly scale to fit new layout sizes or resolutions, requiring the addition of more graphics assets to account for mobile, Retina screens, etc.
- Each time an image like this is used, it adds an HTTP request to the loading process of your site. As images become more and more popular on sites, this can start to bloat your loading time significantly, not to mention add to the amount of data that needs to be loaded to render your page.
The solution: vector graphics. Since vector images are simply mathematical instructions for rendering a visual, they can be scaled to any size and any resolution with no effort and no degradation.
SVG is an increasingly popular vector image format, one that web designers are particularly fond of because it can be actively styled and manipulated like any other markup, resulting in some beautiful and interactive implementations.
Best of all, these are lightweight and are rendered directly by the browser, meaning no extraneous loading of assets!
05. Gamification
One of the trickiest techniques to implement well is gamification, or the introduction of game-like elements in your design that help give visitors a sense of interaction and reward when they navigate.
Gamification most often appears in the form of badges that you can unlock for completing various tasks; on sites like Treehouse where you go through courses, this makes a lot of sense. But what if you have no courses or similar structures to work with?
For blogs, ecommerce sites, and other more standard web properties, gamification can take the form of coupons or discounts that are offered to visitors in specific circumstances. For example, a blog could offer a free ebook download for tweeting a link to the site, or an ecommerce site could provide a discount coupon when a visitor has explored the full catalogue.
Small things like this help personalize a visitor’s experience, and the sense of receiving individual attention is key to fostering a sense of engagement and encouraging them to come back.
06. Image compression: the need for speed
Nothing kills engagement like slow load times on your website. In a world of short attention spans, if a site is taking too long to load, your visitors will almost invariably leave – who has the patience to wait for slow pages?
With websites becoming more and more complex and visually appealing, load times are inevitably impacted. Luckily, there are a number of techniques that can help mitigate the issue:
- Minifying content
- Optimizing images for the web
- Serving your site through a Content Delivery Network
For starters, many designers like to minify their site’s assets when publishing. Minimization strips all whitespace, comments, and redundancy from CSS and JS files, resulting in tiny versions that load slightly faster.
Similarly, there are a number of algorithms that can help reduce the size of your site’s image assets without compromising their visual quality. Multiple algorithms can be run in sequence, and apps like ImageOptim (Mac only) can make preparing images a one-click process.
Finally, websites often make use of Content Delivery Networks (CDNs) to distribute files more quickly. CDNs work by spreading your site’s data across multiple servers around the world, ensuring that the closest server to your visitor is the one that serves the files. CDNs make the most noticeable difference in page loading times, and are often used to help keep larger sites from buckling under the load of thousands of visitors from around the world.
One of the advantages of working within a cloud hosted, web design platform like Webydo is that this kind of optimization is all handled for you.
07. Push notifications
On many sites, engagement goals come in the form of welcoming visitors back as you post new content, whether they be blog posts, videos, or something entirely different.
Typically, designers use forms to get people to sign up for email newsletters. While these remain popular, a new technology is emerging that has 30x better opt-in than email, and is significantly more engaging: browser push notifications.
Using tools like Roost, designers can easily implement browser notifications that alert visitors to new content even when they’re not on your site!
For now, only Safari is fully supported on the latest OS X, but both Chrome and Firefox are launching push notification support within the year, so now is the perfect time to get in on this exciting new technique.
Welcome back to life!
The techniques above always have a place in the design process and should be considered before you start your web design.
Ensuring your sites are quick, beautiful, and dynamic encourages visitors to engage with your content more thoroughly! There are plenty of tools that existing in the market, that offer you effective ways to design and redesign advanced, engaging websites that will single handedly combat low engagements.
