In light of the recent COVID-19 pandemic - OPTASY would like to offer DRUPAL website support for any Health Care, Government, Education and Non-Profit Organization(s) with critical crisis communication websites or organizations directly providing relief. Stay Safe and Stay Well.

It’s Fast, It’s Lean... But Is Your Site Engaging Enough? 7 Interactive Website Features to Implement

It’s Fast, It’s Lean... But Is Your Site Engaging Enough? 7 Interactive Website Features to Implement

by Silviu Serdaru on Oct 04 2019

How do you get from a large audience to an... actively engaged large audience? How do you turn that massive volume of traffic that you've striven to attract into... actual sales? It's simple: you incorporate interactive website features into your site.

For it's elements like built-in feedback system, chatbots, or interactive photos that would get that large audience of yours involved on your website. 

A fast, visually stunning, and mobile-friendly website won't grant you more leads. Instead, a website that retains and connects with its visitors will...

But let's dive right into these (not so) “mysterious” website design interactive features that will help you boost user engagement on your site:

 

1. What Is an “Interactive” Website?

But first, let's see what an interactive website is NOT:

 

It's not a site that simply displays... content.

 

Instead, an interactive website IS, in fact:

 

A site that gets visitors to interact with its displayed content. Instead of merely “consuming” it...

 

A website that drives users to communicate with its interface by filling in popping-up forms, typing in comments, or clicking on the on-screen image of a product...

 

2. Why Does Your Website Need to Be Interactive?

In other words: why would you care about adding this level, as well, to the user experience delivered on your website?

I mean, your website's already super fast, visually striking, and conveniently responsive. It should be more than enough to... engage visitors, right?

Well, not really. Here are the strongest reasons why you should consider making your website strategically interactive, as well:

 

  • it cuts down your bounce rate: users tend to spend more time on a website that interacts with them than on a static one that reduces them to... mere content consumers
  • it builds long-term relationships: engaged visitors are much more likely to turn into... returning visitors
  • it boosts your brand awareness: interactive user experience is always a high impact one, that clings to visitors' memories, making your brand... memorable
  • it boosts user engagement (duh!): strategically placed interactive website features trigger more action than a mere display of content

     

3. What Are the Best Interactive Website Features to Consider? Top 7

Disclaimer: there's no such thing as “universally best” interactive website elements.

There are, though, the “most suitable” interactive features for your own industry sector and business goals. 

For instance: is it financial services that you provide? Then an interest calculator is the “best” interactive feature to incorporate into your company website. Relevance is key here...

Now, let's dig out the interactive website features with the biggest impact on user engagement metrics.

 

3.1. Simple Interactive Tools

Simple yet... highly effective, these tools range from short games to quizzes, to ad ROI calculators, to budgeting tools, to... math tools. 

Needless to add that their selection depends entirely on your business goals.

 

3.2. User-Generated Content

And this must be one of the most powerful interactive website features that you could integrate into your site.

Interactive Website Features- user comments

Image by OpenClipart-Vectors from Pixabay  

Empower users to create and upload content on your website:

 

  • product/services reviews
  • pictures of them wearing/using your products
  • guest posts
  • comments

     

It's a highly effective means to connect with your website users.

… to make them feel that they have the power to influence the user experience delivered on your website, to make them spend more time there, and even attract other potential customers with their reviews.

 

3.3. Wisely Used Interface Animations

Animations should be on anyone's list of interactive features on a website.

Word of caution: mind you use animations sparingly and with the sole purpose of enhancing your website's usability.

If instead you use them to visually “wow” your visitors, you'll only risk making your website look amateurish and untrustworthy.

Not to mention that a site crammed with animations would make your content difficult to read, as well.

Still, when used wisely, scrolls-triggered animations and dynamic hover states on images or links, for instance, will engage users.

 

3.4. Social Media Apps

Interactive Website Features- social media apps

Image by ijmaki from Pixabay  

The handiest way to “inject” interactivity into your website: social media apps.

And this “too” common functionality of enabling users to share your content and to follow your brand on social media is, still, one of the most effective ways to boost user engagement.

So, mind you don't underestimate the power of these buttons...

 

3.5. Live Chats or Chatbots

Assisting users throughout their visit on your website, being ready to anticipate and to promptly answer their questions... There's hardly a better way of connecting with and retaining website visitors.

Take live chats and chatbots as a too powerful mix of stellar customer service and “excuse” for users to stay on your website for a longer period of time.

 

3.6. An Interactive Feedback System

A built-in online survey tool or a contact form are other great ways of injecting a high level of interactivity into your website.

Take, for instance, the contact form: you get to reach 2 major goals with one shot.

 

  • you enrich your database of leads
  • you convey a “We Care” message to your online customers

     

3.7. Interactive Images and Videos

Let's try a little empathy exercise: get into the shoes of your eCommerce website user!

Now, answer this question:

 

“How convinced are you that you're making the right choice when you buy a product displayed in an on-site picture?”

 

Don't you struggle with the doubt that you might not make the best decision?

An interactive photo or video revealing certain features of that product in detail or showing it in action, in the real world, would have a dramatic impact on your customer journey, don't you think?

The END!

These are the 7 high impact interactive website features to put on your shortlist when you plan to make your site more engaging.

Which of these elements are you already making the most of on your website?

Main image by Caroline Attwood on Unsplash

Development

We do Web development

Go to our Web development page!

Visit page!

Recommended Stories

Which Drupal Page Builder Should You Use: The Gutenberg Editor or Cohesion DX8?
You want to enable your content editors to build new pages on their own. So, which drag and drop Drupal page builder do you choose? Let me try and guess what's on your "wishlist":   to be super easy to use, with an intuitive front-end editing interface to be light to be compatible with your Drupal theme to load fast to provide a decent collection of ready-to-use designs to be conveniently flexible   Have I guessed it right? Now, which of these 2 popular editors for Drupal 8 — Gutenberg Editor and Cohesion DX8 —  checks the most must-have features off your list? Let's compare them: 1. Introducing: Acquia Cohesion DX8 “The only low-code platform for the design, build and management of Drupal 8 websites.” (Drupal.org) A Drupal website builder that empowers you (your designers and content editors) to create all the visual aspects that make a website:   layout theme element styles templates components   And all that in the browser, via a highly visual drag-and-drop user interface... With no need to write CSS, PHP or HTML. Here's how it works:   Acquia Cohesion DX8 provides your editors with a library of branded (reusable) content components — sliders, tabbed elements, hero sections, banners, video players, feature panels they select, mix and match, and assemble together the blocks of their choice … and fill them in with content.   Tip: your non-technical editors can also edit, inline, those display components (block “templates”). And voila: A simplified way of building Drupal websites. A component-based approach to building a Drupal site. And during all this time, your development team can focus on building all those unique functionalities that you have in mind. 2. 5 Reasons Why You'd Want to Use Cohesion DX8 Now, let's talk... benefits. What are the main advantages of choosing Acquia Cohesion as your Drupal page builder?   2.1. Your content editors can assemble new page layouts quick and easy. And “quick” is the keyword here.  The non-developers in your marketing and other teams can assemble new web pages in no time: They just drag and drop and arange different components available in the library, making them fit into the design pattern that you've already defined for them.   2.2. Your marketers are free to edit content & layouts right on the page. Another strong benefit that you can reap from using this particular Drupal layout system is that your editors can easily modify content/layout right on the live website. In other words, Acquia Cohesion DX8 provides them with an easy to use in-context editor. This means that your content editors can open the page that they need to update and make any change in... seconds. Tip: you get to set different levels of permissions and keep track of who's updated what on the website.   2.3. Your content editors can build and manage your website with no coding skills needed. In other words, you'll turn your editors into... web designers. Source: Dri.es They need no coding skills, except for a low-level understanding of some general website concepts, to put together a new enterprise-grade Drupal website if needed.   2.4. You can replicate the newly created design on all your Drupal websites Why would you opt for this low-code site builder?  Because it enables you to export and reuse the same style configuration and web design across your entire ecosystem of websites. To sync your brand styles across your whole network. An easy way to control your brand across a multi-site structure.  And a guarantee that your non-developers, who are granted such “power”, will keep brand-compliant in their work.   2.5. Your non-technical teams can build uniquely designed and fully responsive websites The non-developers in your team (content editors, designers with little coding knowledge) can easily put together custom layouts using this drag and drop page builder for Drupal. Source: Acquia.com Moreover, Acquia Cohesion DX8 makes it easy for them to preview their newly created layouts in multiple device aspect ratios.   3. What You Can Expect from Using this Drupal Page Builder Let's say you've already found the answer to your “Gutenberg Editor vs Cohesion” dilemma: you've opted for Cohesion DX8. Here's what you'll notice:   your team sets up and launches brand new Drupal websites faster now the costs for developing new websites have lowered all the Drupal 7 to Drupal 8 website migrations have been streamlined keeping brand consistency across your multiple Drupal websites is no longer a challenge your digital marketing and content authors are more confident to experiment with new content (since updating and reverting changes is so straightforward) your senior developers gain more time to innovate; to focus on their own development tasks   4. What You Can Build with Cohesion DX  Let's see precisely what you can create using this page editor for Drupal:   full page content templates  master templates that your content editors can use to put together headers, navigation systems, footers... menu templates, from basic list menus to interactive, multi-level ones content components, which can then be assembled together into unique layouts CSS styles view templates for your blocks or page page content layouts   5. Introducing: Drupal Gutenberg       The Gutenberg Drupal 8 module comes as an alternative to the body field editor in Drupal: Editors can build a new page by assembling content blocks instead of writing text in a text body. Source: Drupalgutenberg.com A Drupal page builder that enables them to:   move blocks around the page, as needed reuse uniquely designed contrib blocks across multiple pages on your Drupal site and even across multiple projects select from the pre-built blocks — lists, paragraphs, tables — that Drupal Gutenberg provides them with insert raw HTML in the form field   When it comes to the “user-friendliness” factor, Drupal Gutenberg “bids on” a highly visual editing experience, just like Cohesion DX8 does: Any member of your team, regardless of his/her technical skills, can easily build a new page by putting together media, text, and content blocks.   6. 4 Reasons Why You'd Want to Use Drupal Gutenberg  “Why would I choose precisely Gutenberg as my page editor?” Here are some compelling answers:   6.1. You empower your editors to build new landing pages on their own. It's all about “democratizing publishing": Drupal Gutenberg enables them to add, move around, and edit blocks quick and easy.   6.2. Your editors get a whole collection of custom blocks to choose from That's right: Gutenberg Cloud library comes as a rich content repository for contributed blocks. From:   call to action sections to uniquely designed forms to web components   ... your content editors get a whole collection of blocks created by other developers to dig into when building new pages.   6.3. You grant your editors a flexible, visual editing experience.  One of Drupal Gutenberg's biggest selling points is its React-powered UI API. The JavaScript type of “fuel” that makes the editing experience both flexible and powerful:   a scalable, high performant editor that content creators can use with great ease; no technical background needed   Where do you add that they get “spoiled” with lots of pre-designed elements to choose from, as well.   6.4. You enable your editors to use and... reuse Drupal media assets. Gutenberg's conveniently integrated with Drupal's media library. This means that your marketing team can easily scan through and choose the media assets that they need to incorporate into their landing pages. And even re-use them as many times as needed.   7. What You Can Expect from Using this Particular Drupal Page Builder A more independent, empowered marketing department. Which automatically translates into a more productive development team, as well.   8. What You Can Build with Drupal Gutenberg “What are the most typical use cases for the Gutenberg editor?” you might ask yourself.   landing pages text-heavy content types (e.g. blog posts) designs that don't call for a lot of dynamic configurations  simple layouts content structures and designs that blend in perfectly with your theme's looks   9. Final Word  “So, which Drupal page builder should I choose: Drupal Gutenberg or Cohesion DX8?” It depends greatly on your feature needs and on your content team's skill level, as well. For instance: do you value the convenience of replicating the same designs on all your websites (Cohesion) more than... having an entire library of contrib content blocks to select from (Gutenberg)? Keep “confronting” the features of these 2 website builders and put them against your team's needs and experience, as well.   The END! How flexible is the authoring experience for your own team? Have you tried implemeting any of these page editors into your page building workflow? Feel free to share your experience, good or bad, in the comments below. Image by 200 Degrees from Pixabay   ... Read more
Silviu Serdaru / Apr 14'2020
What Are Some of the Most Popular Websites Built on Drupal in North America? Top 10
Let's say that you're considering using Drupal for your next web project. You've read about its unmatched robustness and flexibility... And still: real examples of brands that have their websites built on Drupal in North America would weigh heavier in your decision-making process than just... statements about its great features, right? But which are they? These websites powered by Drupal that are well known in Canada and the USA? We've done our research and put together a list of both highly popular and uniquely designed Drupal-based websites. So, here they are: the 10 best Drupal websites in North America to inspire you in 2020: 1. Ontario Institute for Studies in Education of the University of Toronto OISE, Canada's most reputed center for graduate studies in education, has its website powered by Drupal. And built by our own team of Drupal developers... Why did they trust Drupal 8 with their digital presence?   because it's fast and good page load time was crucial for them because Drupal's designed to “cope with” high volumes of content  because Drupal enables building websites with responsiveness in mind because of Drupal's modular structure and flexibility: the OISE editorial team can easily add, update and publish new content, whereas new functionalities can easily be implemented in the future 2. World Vision International A global organization impacting the lives of millions couldn't have chosen but a robust CMS platform like Drupal to power its website with. With:   an intuitive UI design clean and conveniently minimalistic design a reliable content management system to support a site representing +90 countries   ... the World Vision International's Drupal-powered site is built to make an impact.    3. MIT List Visual Arts Center, One of the Top Websites Built on Drupal in North America How could we have possibly left it out of our Drupal websites list? MIT's website taps into:   the flexibility of the Drupal entity system to grant visitors a content-rich user experience centered on content diversity: text, audio, lists, images Drupal's features aimed at providing the editorial team, as well, the best experience   The result? An intuitive, brand-driven content-rich experience for the users on the MIT website. One that comes to complete the actual visiting experience at the MIT physical art museum and virtual art lab.   4. University of Arizona    One of the well-known websites using Drupal 8. And it's no surprise that they've chosen precisely this CMS since Drupal's been the go-to platform in the higher education sector since... forever:     it empowers the staff to easily create, edit and publish content on the run it enables that editorial team to easily share/reuse content across multiple sections of the website (and a high ed site is usually an intricate "ecosystem" of content sections and smaller sites) it advocates for a "mobile-first" approach to website development   In the case of the University of Arizona, its old website got migrated to Drupal 8 and its design revamped, all in the name of a better user experience.   5. Think Global Health Another one of the well-known websites built on Drupal in North America is this multi-contributor site that explores the way health changes impact societies, everyday lives, and economies on a global scale. With such a heterogeneous content team and a wide variety of content being edited and added regularly on this newspaper website, no wonder that they've turned to Drupal. 6. Canadian Museum for Human Rights   Humanrights.ca has earned its own star on the Drupal websites' "hall of fame" due to a cutting-edge functionality that it incorporates: Enabling visually impared users to configure their own experience on the site. From adjusting the contrast to selecting the font size and style, they get the most of Drupal's "empower the end-user" philosophy.   7. Nature Conservancy California Another one of those Drupal website examples where content variety "rocks supreme". From video content to video footage, to interviews, to ambient sound, this platform's using Drupal for handling the multiple types of content formats that support its project stories. 8. Princeton University Admission   What makes this high ed website stand out from all the other university websites built on Drupal in North America?   the non-conventional visual storytelling techniques that it leverages in order to highlight what's representatively unique about this school the impactful content (linear media), ranging from narrative faculty portraits to textural videos of the campus life, photo content providing visitors a more in-depth view into the life at Princeton   Furthermore, they chose Drupal in order to inject" top performance and give their "Undergraduate Admission" website a fully responsive web design.  9. Jack Daniel’s Tennessee Whiskey  JackDaniels.com makes a great example of a website that makes the most of Drupal's powerful content management features:   again, the site comes as a complex ecosystem of different types of content: immersive photography, video content, cinemagraphs... local markets around the world get to custom-tune the website to suit their own local customers' needs; to personalize it with translated copy, market-specific programming...   A robust content management system along with the "empower the user" philosophy, these are 2 of Drupal's defining features that JackDaniels.com taps into in order to provide:   an engaging experience to its visitors an empowering experience to its users (admins across the globe) 10. TraffickWatch The storytelling Drupal website of a nonprofit that raises awareness about human trafficking.   The END! What other famous websites built on Drupal in North America have we missed? Feel free to... scold us in the comments section down below.   ... Read more
Adriana Cacoveanu / Feb 25'2020
How Creating a Mind Map Helps You Make Your Website More User-Friendly
The line between useful and... useless (or pushy or simply annoying) is thinner than you think. That's why creating a mind map that aligns your site's content structure with the user intent is... critical. "Whether you’re a product owner or designer, you don’t want your website to be a maze with nothing but frustrating blind alleys.” (source: altexsoft.com) And there's no guessing work or discouragingly complex process in identifying the current user flow on each web page on your website: Just take a look at the behavior flow report in your Google Analytics. No rocket science here... Take it from there and:   identify the roadblocks restructure content on each page so that it matches user intent and is fluid and easy to read But let us give you a hand with that. With mind mapping your current customer journey and planning its improved version: In this respect, in today's post we'll:   give you the “anatomy” of a user-friendly website: what elements make a website, well, user-friendly? define mind mapping with respect to designing the user experience on a website teach you how to create a mind map: an easy step-by-step guide show you how to use a mind map to make UX improvements on your website   1. The Anatomy of a User-Friendly Website: 4 Essential Features “A vague objective leads to poor results.” There's no point in creating a mind map that would hopefully make your website more user-friendly if... you're not quite sure what key elements make a website user-friendly. So, here's the list of must-haves for any website aspiring to deliver a great user experience:   1.1. High Speed It's no news to anyone: the page loading time has a huge impact on the user experience. Unnecessary interactive elements, that don't match users' needs and don't play any role in the conversion process either, will only get you a clunky and... well... slow website.   1.2. Useful Features And “intuitive” I must add. Again, we go back to the “elements justified by the user's needs” principle: Is that slider useful and relevant for the user behavior on your website? It it too bulky, loaded with endless options that just ... discourage the visitor? You might want to re-evaluate all the features on your website: are they relevant and intuitive enough?   1.3. A Well-Structured Information Architecture Information that's:   easy to access easy to interpret   … is key for a wannabe user-friendly website.   1.4. Content that Matches User Intent If users are looking for online cooking classes, let's say — and that's precisely what you promise to deliver them — and you're only trying to sell them kitchen gadgets on your website, the only result that you'll get is them bouncing off in seconds.   2. What Is Mind Mapping with Respect to Designing the User Experience? An overly simplified definition would be: A way to brainstorm and present the generated information in a visual way. Now, since I've promised you a definition “with respect to” creating the user experience, here's a more... context-specific definition: Mind mapping is a vesatile technique where you put together a visual hierarchy of your site's present or future content. It lists out the key pages on your website (homepage, service pages, blog page, etc.),  the various relations between different web pages, the links and CTAs on each page... Source: altexosft.com In short: mind mapping reveals how data is structured on your website. Of course, you'll then consider creating a mind map of the target version of your current website. The more user-friendly one...   3. Main Benefits of Using Mind Mapping: From Great Ideas to... Actionable Steps Finding new ideas is exciting. But jumping on every new great idea that someone in your team has, without first checking whether it aligns with the user intent, is just like... making shapes out of soap foam. Not only that they're not future-proofed, but that clutter of ideas might not work together either. By using one of the best mapping tools available online for structuring those ideas as they... pop out, you turn them into actionable steps in your strategy for improving the UX on your website. And the clear benefits to mind mapping are:   you define your ideas' roles: what role do they play in your UX strategy (if you can't assign them a role, they're just “Wow” ideas with no solid justification) you assess their value: how does implementing this new idea bubble up to the user experience? you identify the various relations between them: you might want to avoid “island-ideas”, with no connections to other ideas listed out in your mind map   4. Creating a Mind Map: 5 Simple Steps Now that you know what a mind map is and why on earth you'd bother making one, let's see how you can actually put one together:   4.1. Create a Mind-Map Template Just so you can have a basic idea of the current information architecture on your website. List out how data's being structured on your website now and how you plan to structure it for its more user-friendly future version...   4.2. Map Out Your Ideal User Flow How would you like your website visitors to engage with your content? What actions would you like them to perform? Source: mindmeister.com Once you've outlined the key pages on your website (homepage, services, features), start planning out the user flow.   4.3. Compare it to the Current Behavior Flow Available on Your Google Analytics Before you can properly map out the user flow, you need to know what's the standard customer journey on your website now. For that, just delve into your Google Analytics data and look for the user behavior report. It'll show you all you need to know about:   how users are engaging with your website's content  what paths they usually take when navigating through your current information architecture   4.4. Identify the Roadblocks The user behavior data might reveal to you some unwanted realities regarding the user experience on your website:   poorly structured content a bulky and tiresome collection of interactive elements irrelevant features (embedded videos, interactive elements, social sharing functionalities) too many tools that don't respond to users' needs   4.5. Make the Appropriate UX Decisions to Influence the User Behavior Now that you've identified the main roadblocks in delivering the best user experience, it's time to... remove them, one by one:   turn chaos into a logical content hierarchy trim irrelevant page elements, with zero value in the conversion process  adapt web pages' content structure to the needs of specific audience segments (make sure to include relevant information for those customer personas, redesign your CTAs if needed...)   5. How to Use a Mind Map to Make Powerful UX Improvements Creating a mind map is but the first step: Turning it into powerful UX decisions should be your main objective. So, the answer to the question “Are mind maps effective/useful?” is: They are if and only if you make them useful and... usable. You can turn your mind map into:   an effective sitemap a customer journey map   But let us take a real-life scenario and point out specific UX decisions that you could make with your mind map at hand. It's an example that I've run into reading Mindmaster team's great blog post: A Simple Way to Design UX, UI and CX Using Mind Maps: Say you're targeting 3 different customer personas on your website. You then need to plan 3 different user flows.  You start by grouping the web pages on your site into 3 categories, each of them corresponding to one audience segment. Then, you start doing some user behavior mapping: how do you want each customer persona to navigate to the corresponding web page so that he/she clicks the CTA placed there? Now, it's time to make some critical UX decisions:   what relations to set up between various pages on your website? You might have a user on a service page and you need him/her to visit your “get a quote” page, as well what's the best CTA design for each one of your 3 types of pages? what key information should you include on a page, depending on the customer persona accessing it? See? Not only that creating a mind map helps you put together an effective information architecture, but it's also a great technique for generating content ideas that match the user intent.   6. Final Word In the end, it all comes down to goal setting. Creating a mind map is a great way to:   understand your website goals: what type of conversion actions do you want users to perform? achieve those  website goals by delivering a user-friendly experience: content that's useful, accessible, easy to read and to interpret   The END! Do you usually create mind maps when building new websites, to ensure they'll deliver the best user experience? Or for existing ones, to improve their UX? Do you consider them critical or optional in designing the user experience? Image by Biljana Jovanovic from Pixabay   ... Read more
Adriana Cacoveanu / Dec 14'2019