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.

Data-Driven Web Design: Make (Only) Smart Design Decisions

Data-Driven Web Design: Make (Only) Smart Design Decisions

by Adrian Ababei on Jun 01 2017

It's time you embraced the DATA! That's if you still want a leads-generating website and not just a “pretty painting on a wall”, in an art gallery, that, well, everyone's briefly looking at, but no one's buying! The days of aesthetics' “dictatorship” and of the instincts and personal preferences-based decisions are over. It's time you leveled up and took ONLY smart, data-driven web design decision within your organization!

It's data, cold facts and numbers that will hep you get your website from “just pretty” to “both effective and pretty”. It's data, again, that will speed up the design decisions making within your organization and help you launch your Drupal site on time and on budget. 

It will filter all your options down to those that are numbers-backed-up. Those that you can then leverage for ensuring a hassle-free, enjoyable user experience on your website.

And now, let us point out to you the main questions that you should be asking yourself and the key mindsets that you should adopt once you engage in a data-based website designing process.

1. Which Are The Specific Results That Your Website Should Target?

Do you want to attract more subscribers via your website? Or maybe you want to convert your website visitors into customers? Or you aim, instead, for social media sharing or for the downloading of the materials that you're offering on your website?

In other words: which is your specific conversion goal? The one that you're trying to achieve via your website? It's the answer to this basic question that will make the keystone of your whole web design strategy!

2. Move the Spotlight From Your Business Goals to The User's Tasks

First of all, let's get one aspect straight: you are not your website's target user! Therefore, all the data-driven web design decisions that you will make should target the “real” user's needs, pain points and expectations and not yours, as a company!

Now, speaking of expectations, in web design we prefer to call them “user tasks”. The tasks that your website visitors need to complete (to make a booking, to buy a product, to subscribe to a newsletter, to read blog posts etc.)

Your “job”, as the “entity” behind the “front store”, which is your Drupal site, is to make carrying out these user tasks as effortlessly as possible:

 

  • design with user experience in mind

     
  • stick to the generally-accepted design conventions, thus creating a sense of familiarity

     

And it's precisely on those pages on your site where their tasks and your business goals, as an organization, intersect, that your main sources of conversions will be (let's say subscriptions: they can be both something the users need to do, some filling-in forms tasks, and your objective as the website owner, as well)

3. Set Up Your Data-Collecting Tasks, a Key Step in a Data-Driven Web Design

OK, OK, I get it; I need to make data-based web decisions only, but how do I collect that usable, key data?” you might ask yourself.

Glad you asked, actually! Here are some examples of tests you could run and to-do tasks you could set up and assign to different members of your Drupal team:

 

  • identify your users' current pain points, determine the causes why you're losing conversions on your website, it's own weak points (run some surveys, rely on your customer service team's gathered feedback from your clients etc.)

     
  • analyze your competitors' own sites, see what works and what doesn't in your own industry

     
  • turn Facebook Audience Insights into a powerful tool for getting to know your users better

     
  • try identifying the reasons why your users won't convert: find what the key differences are between your visitors and your customers

4. Make Empathy-Driven Design Decisions

Welcome everyone on your website! Users with disabilities here included!

Especially since Drupal makes it so simple for you to meet the web accessibility standards

Therefore, you have no excuse left for refusing to empathize with your users and, this way, for knowingly refusing to achieve your conversion goal.

 

5. Guarantee Your User a “Painless” Visit 

And by “painless” we actually refer to common-sense design “rules” that are constantly being broken by organizations, on their websites, for the sake of innovation.

Remember: when aesthetics interferes with website usability, it quickly turns into a “trap”! Don't fall into it!

Now here are those “common sense rules” that we were referring to:

 

  • always choose context-sensitive icons with meaning (no need to demand your users to “solve mini-puzzles” for figuring out what action each icon triggers)

     
  • resist the temptation of breaking the tried & true conventions ensuring usability on your website (place your shopping cart, your sing in button, your navigation bar and all the other key elements on your web pages precisely where your visitor's used to finding them)

     
  • always “bid on” high contrast for your written content

     
  • guide them through the steps of their tasks with the help of gestural interactions

 

We're more than sure that these web design conventions are nothing new to you. Nevertheless, what we're trying to point out by enlisting them here is that: you should never compromise usability for the sake of innovation, of breaking the norms!

Serve your users' needs of usability first and impress them later!  

6. Keep Key Information Above the Fold

Although some might argue and feel like going against this convention, keeping the top benefits, the key information above the fold still is a more than relevant “rule”.

You might be thinking that not revealing your products'/services' “luring” benefits from the very beginning builds up suspense, yet you'd better handle your visitors' time with great caution. The more time you ask them to invest in the visit on your website, the fewer your chances to convince them to convert will get.

To sum up: display all your main benefits, your CTA elements and all the other crucial information above the fold. The deeper you'll bury them, the better you'll hide them from your users, “bidding” on suspense, the more frustrated they'll get.

7. Go for an Ideal Number of Choices, A Key Rule in Data-Driven Web Design

And by “ideal” we mean that too many options could get their decisions making process way too cumbersome and challenging. While too few will only confuse your users and make them feel not properly cared for and attended to.

How do you achieve this ideal number of choices? Well, here are some simple tips you can easily put into practice:

 

  • create filters that will help them “swim through” the whole set of options, but make sure you make them as specific as possible and that you add them to the most popular (and therefore the choices-packed ones, too) categories on your site

     
  • opt for simple, straightforward categories

     
  • structure them in a hierarchy by assigning priorities

     

8. Tailor A Personalized Experience for Each One of Your Users

Is there any point in stressing out that we're living in a personalization-dominated digital world?

Users already expect you to “orchestrate” some perfectly tailored experiences for them on your website, so... there's no hiding from this trend anymore.

How do you comply with it while ensuring that all this effort will translate into conversions? Well, by studying your visitors and collecting a whole load of key data regarding their browsing histories on your website, regarding their geolocation, their purchasing histories etc.

Next, you get to leverage all that data for crafting your personalized content (in the format of personalized recommendations) for each one of them.

It's not going to be a quick and easy process, we won't hide this from you, yet a personalized content marketing strategy still remains THE most effective one. If Amazon keeps using personalized content for boosting their sales, then it must be (still) working, right?

 

9.Leverage The Power of Video Content on Your Website

We won't be focusing on this aspect, since we've already dedicated it a two-parts blog post on this site. Using video content on your Drupal site is not even a matter of a “web design trend”, but a data-driven web design decision. It's plain, "cold" data that supports the usage of video content.

10.Use Social Proof For Building Credibility

Testimonials, previous partnering companies' logos, an “impressive” number of sign ups, customer reviews, these all make the type of data that the user, too, collects before he makes his own decision while on your website.

So, make sure you have them all there, displayed and visible enough for your users to easily spot them. This type of social proof is the type of credibility evidences that your users expect to see on your website!

11. Constantly Monitor Your Data and Make The Due Adjustments

So you've launched your website, created based on data-driven web design decisions only. What now? 

Well, now you get back to work and you collect even more data! Site monitoring never ends and designing your website's a continuous process. 

Therefore, always be ready to make some small adjustments here and there if the data you'll collect via GoogleAnalytics, Hotjar or via any other business intelligence tool that you prefer indicates that you should:

 

  • monitor your users' clicks and scroll behavior

     
  • leverage all the information that the heat mapping process delivers you and make the right changes on your Drupal site

     

How about you? Have you already incorporated and turned data into a key component of the web designing processes within your organization?

Development

We do Web development

Go to our Web development page!

Visit page!

Recommended Stories

How to Make Icons Accessible to the Widest Range of Users? 10 Best Practices
Material icons, flat icons, thin icons, ready-made or fully custom, on-brand icons... No matter what type of web icons you opt for, the same rule applies: the need to be visible to all users. So, you ask yourself: "How to make icons accessible to... everyone?". For, in vain you go with an eye-catching web icon design if its color contrast is so low that some users just don't see it. Or if it's interactive, but only when... mouse clicked. See my point? Therefore, in today's post I'll tackle aspects like:   what accessible icons are what goes into making icons accessible: most effective approaches and best practices what are the different types of web icons and the specific techniques for making them accessible    Let's dive in:   1. What Are Accessible Icons More Precisely? What makes an icon accessible to screen reader users? What requirements should it meet to be fully inclusive? Here are the 6 most important things to consider when you're designing accessible icons:   1.1. Make Them Noticeable For, it's pretty logical:  If an icon's not instantly perceivable to all visitors, it becomes inaccessible. And by "instantly perceivable", I mean that users shouldn't be constrained to perform some sort of action in order to make the icon... visible. 1.2. If It's Purely Decorative, It Shouldn't Be Read Out One of the best practices for designing accessible icons (decorative icons) is to skip the part where the ALT text gets read out to screen reader users. That's because, in the case of a decorative icon, informing the user about its existence on the page (e.g. "There is a key icon!") is just... superfluous. Which leads us to the next requirement that all "wannabe accessible" web icons should meet:   1.3. Always Add a Text Label The magnifying glass icon is universally recognized as a "search" tool. But that's the only universally recognizable icon... Therefore, it's best to play safe if you want your icons to be accessible to the widest range of visitors. Whether you have a hamburger menu icon or a house-shaped one, accompany it with a text label to prevent any ambiguity.   1.4. Keep in Mind the Color Contrast  This is one of the recommendations on top of any "How to make accessible icons" list that you might stumble upon: Make sure there's enough foreground-background color constrat in your icons, so that visitors with different levels of visual imparirment can easily notice them.   1.5. Make Sure They're Properly Sized And by "properly sized" I mean somewhere around 44x44 pixels. Pay particular attention to the size in the case of icon links: Any smaller than 44x44 pixels and they become inaccessible on smaller devices: some users won't be able to click on them.   1.6. Make Sure They're Mouse, Touchscreen, AND Keyboard Accessible Have you decided to "sprinkle" some interactive icons across your website?  Then make sure that users can easily click on them whether they use their mouses, they tap on their touchscreens or they depend on their keyboards for that. 2. How to Make Icons Accessible: 10 Approaches & Best Practices  Now that we've gone through "what" makes an icon accessible, let's get to the "how-to" part: How can you make your web icons more accessible for screen readers users? Here's a list of simple approaches and valuable tips to consider:   2.1. Consider Pixel Measurements and Square Dimensions  Most icons have square dimensions.  And if you're curious which are some of the most frequently used sizes for web icons, here are some popular examples:   128x128 16x16 512x512 64x64 256x256   2.2. The Easiest Way to Make Your Linked Icons Accessible Is to... ... add an ALT-text that lets the user know what the link does. What its destination is. For instance, you can add "Email us" as the ALT-text accompanying your "@" email icon. 2.3. When In Doubt, Choose an SVG or a PNG File Format  Even if some prefer the SVG icons systems, while others choose to go with PNGs (making icons accessible is easier with that file format), all web designers agree on this: Icon fonts should be the very last option to consider.   2.4. Make Sure Your Document and Your Icon Are The Same Size    2.5. See that There's Enough Icon-Background Color Contrast Will you be adding your web icon to a background?  If it's a yes, then check and adjust the color contrast.   2.6. Check Your Icon's Size Before Exporting It The 6th tip on our "How to make icons accessible" is pretty... predictable: All web icons should be properly sized prior to export, making sure they're not too large.   2.7. Hide the Text Accompanying the Icon, but Keep It Visible to Screen Readers Let's say that you've inserted an explanatory enough copy text within your link icon, but you don't want it to be visible to all users.  You want it to be visible to screen readers only. For this, you can use a visible-hidden class selector.   Word of caution! Going with this solution does call for 2 compromises:   the click/touch area is smaller screen reader users might not understand what that icon does (the VoiceOver will then read something like: "internal link, home"). 2.8. Accompany Your Semantic Icons with Visible Text to Avoid Ambiguity "What's a semantic icon?" you ask?  A standalone icon that has meaning.  Now, if you want to make sure you'll prevent all situations where users might just overlook it, just add a visible "Menu" text next to it. This way, its meaning will be 100% clear to anyone.   2.9. The Simplest Way to Make Icon Fonts Accessible Is... ... to add aria-hidden="true" to the element. Note: again, whenever possible, avoid icon fonts and opt for inline SVGs instead.   2.10. Skip Adding ALT-Text to Text-Based Icons Let's say that you have an "Email Us" linked icon.  Now, it would be quite superfluous to have an ALT text added to, saying the same thing to the screen reader user, wouldn't it? In this case, the icon is purely decorative, since the copy text around it already conveys the meaning on its own.   The END! Now you have at least 10 different answers to your "How to make icons accessible to the widest range of users" question. But maybe you need help choosing the best approach and implementing these best practices in order to make your brand icons more accessible.  We're here to help! Just drop us a line and let's find the most suitable solution for making your web icons available to everyone visiting your website. Image by Виктория Бородинова from Pixabay  ... Read more
Adriana Cacoveanu / May 06'2020
How Good of a Website Analysis Tool Is Google Lighthouse? 6 Reasons to Use it (plus, OPTASY.com Lighthouse score)
“What's the best audit tool that I can use to check my website's performance?” you ask yourself. Why would you consider Google Lighthouse? How reliable is its scoring system? And how accurate are the results that it provides? Now, let's get you some answers on:   what is how to use  why you'd want to use … the Google Lighthouse testing tool. 1. What Is Google Lighthouse? Before we get into the “Why”, let's see “What” the Google Lighthouse score is, actually: It generates separate scores for different aspects on a web page, like:   SEO rundown of best practices accessibility performance PWA   In other words: it evaluates precisely the factors with the strongest impact on the user experience (page load time, anyone?). What you get is a report on the measures to take in order to fix the identified issues. And to hopefully get a maximum Google Lighthouse score next time...   2. How Do You Use Google Lighthouse? And here we tackle one of this testing tool's biggest selling points: ease of use. Now, there are 3 ways that you can run a Google Lighthouse report:   2.1. Use it Right in Chrome DevTools  The simplest way to run this audit tool on your website is to:   Download Google Chrome for Desktop (if you haven't done that already) Enter the web page's URL in your browser Click F12 to open up your Chrome Developer Tools (or just click “Inspect” anywhere on the page) Hit the “Audits” Tab Click “Perform an audit” (you'll see there the aspects of your website that it's about to check: SEO, Accessibility, Performance...) Hit “Run Audit” to have Google Lighthouse generate your audit report directly through your browser   Easy peasy... 2.2. Install the Lighthouse Chrome Extension If you prefer to run this website analysis tool as a Chrome extension, just:   Download Google Chrome for Desktop Install the extension from the Chrome Webstore Go to the web page that you want to test Click the “Lighthouse” icon newly added to your Chrome address bar Hit the “Generate Report” button   Just wait for about 30-60 seconds for the tool to inspect the page and generate the results in a new tab. Source: developers.google.com   2.3. Run It Via the Node.js Command Line  If you're more of a CLI person, you'll find this workflow more suitable:   Again, if you haven't downloaded Google Chrome for Desktop already, now it's the time Install the latest version of Node.js   Install Lighthouse by typing npm install -g lighthouse into your command line Next, enter the lighthouse <url> to run an audit   Note: use the lighthouse –help command to get an overview of all the options. That's it! Note: it's an HTML version of the audit report that you'll get when you run Google Lighthouse via the command-line tool. Just so you know it. Tip! There's also a... forth way to use the Google Lighthouse audit tool, probably one of the quickest ways to run your report:   Just go to web.dev Click “TEST MY SITE” Enter your URL  Click “RUN AUDIT”   And voila: you'll have your Google Lighthouse score generated for that particular web page in no time! 3. 6 Reasons Why You'd Use Google Lighthouse (And Why We're Using It) Now that you know precisely what it is and the different ways that you can use it: Why would you choose this particular website auditing tool over... all the other testing tools out there? To give you an honest answer, let me share with you the key reasons why we, the OPTASY team, are using it on our clients' websites and even on our own site:   it's so easy to use: why compromise ease of use for accurate audit results, when... you can have both? it's Google-developed (not just a no-name third-party testing tool) it's open-source it's fully automated it tests how the scanned web pages look and perform on mobile devices, as well it's user-centric metrics that it provides: what's the point of optimizing a website merely for our own “fame and glory” and... risk losing sight of the user's own expectations?   Whether we're:   building a new website for one of our clients optimizing a client's existing website optimizing OPTASY.com itself   … and we want to check how well its web pages perform, we just run a Google Lighthouse audit. And speaking of using it on our own website, here's a sneak peek into the Lighthouse Score that it's got after we put it through some major optimization work: In short, the scoring system and suggestions of improvement that Google Lighthouse generates make the best "barometer" for us to:   assess the quality of the audited pages (in case of an existing website, so we know what we're dealing with) evaluate our work (after we've built/improved a website) identify existing issues and prepare our “To Do” lists to get them fixed   4. Final Word  Do you want to learn more about how to use Google Lighthouse to its full potential? About how you can boost your Google Lighthouse performance score, like we have for OPTASY.com? Or maybe you've already generated a report, you have the list of recommendations at hand and you need help to implement them on your website? Either way, we're here to help. Just drop us a line. ... Read more
Adriana Cacoveanu / May 01'2020
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