In this post, I'll share with you the top 10 rules of good UI design.
You will be learning:
What are the essential elements of a good UI design
What are the most common UI/UX mistakes that designers make
What are the UI best practices in 2020
Lots more UI design tips
Now, let's get started.
1. Aim at an Almost Invisible User Interface
What is a good UI design?
A logical structure & necessary visual elements only.
In other words, in order to design an almost invisible user interface you need to:
be “merciless” and keep the essential elements only
base your UI on a well-thought-out structure
use clear language in your text messages and on your labels
Source: Medium.com
A poorly structured and cluttered UI would only make the user ask questions like: “Where's the main menu?”
2. Keep It Consistent
And this is one of those good UI design principles that's overlooked or undermined most often.
Consistency should span over the entire ecosystem of elements that make up a UI design: fonts, colors, menus, buttons, icons.
Keeping a consistent UI throughout your website translates into creating patterns aimed at enhancing efficiency.
At improving the user experience.
And here I'm referring to layout, design, language patterns. Once the user gets familiar with a given pattern, it will be easier for him/her to interact with other parts of your website that present the same pattern.
3. Be Purposeful with Page Layout
One of the fundamental rules of good UI design is to structure your pages based on importance.
In this respect, here are the crucial principles of user interface design to guide your page layout creation:
take into account the spacial relationships between various elements on the page
place your UI elements strategically: draw users' attention to the most important information on the page and make it easy for them to scan it through
keep in mind that “form follows function”: design each item in accordance to its function (no need to reinvent the wheel and to turn the hamburger menu into a... sandwich menu, for instance)
stay away from clutter, at all cost: keep the visual elements on the page to a minimum
make smart use of headings, group similar elements together, add numbered items, as well, all in the name of readability
IMAGE Image by 200 Degrees from Pixabay
4. Use Color and Texture Strategically
Make smart use of color, texture, contrast, and light to direct the user's attention to key elements and important information on the screen.
5. Use Familiar UI Elements: One of the Key Rules of Good UI Design
One of the UI best practices that's both:
the easiest to implement
the most underestimated
And it all comes down to intuitive design. To sticking to common elements when creating your user interface.
Again, the hamburger menu makes the best example: once spotted, the user knows what it is and how to open it.
Restrain yourself from showing off your creativity as a web designer. From being "discouragingly" innovative. Form should follow function, remember?
Instead of impressing your users, you should help them get things done quickly and easily.
That's what delivering a good user experience is all about, after all.
6. Put the User in Control of the UI
Instilling a sense of control in the user is one of the most powerful UI design principles.
Source: xd.adobe.com
In this respect, here are some specific measures that you can implement:
6.1. Provide enough context
Ensure that the user knows, at each stage of his journey on your website, where he is, where he's been, and where he could go next.
Tip: place visual cues to help the user develop a sense of mastery and control.
6.2. Be transparent about the system status
Another one of those golden rules of good UI design:
Let the user know, at all times, what's the status of the process that he's initiated.
For instance, he/she might have started an action that requires some time for the computer to carry out.
In this case, make sure you provide feedback, at regular intervals, about the system status, about what's going on.
6.3. Make actions reversible
In other words, allow users to:
unselect
undo their last actions
restart whatever processes that they've engaged in
6.4. Design your UI with all user skill levels in mind
And this is one of the most obvious characteristics of a good UI design.
It's an easy to use interface for both casual and expert-level users.
6.5. Provide feedback on every user action
It's more than a good UI best practice: it's a matter of... good manners to provide at least some sort of feedback at each point of action.
Therefore, make sure your system delivers a meaningful reaction each time a user:
clicks on a menu
hits a button
clicks on a text message tab
Let the user know, using specific UI elements — animations, progress bars, pop-up windows, color change — whether he's successfully carried out the action or not.
7. Minimize Cognitive Load: Recognition over Recall
“Task-relevant information only” should be one of your key rules of good UI design.
And sticking to a limited number of elements within the display aligns with the very limits that the human attention, itself, imposes.
In this respect, it's human nature that your users prefer to recognize information across a sequence of screens rather than to strive and recall it from their memory.
For instance, our cognitive load is always lighter when we're challenged to answer multiple-choice questions compared to having to tackle short answer questions.
8. Stick to One Primary Action per Screen
And here, we go back to the “visual declutter” principle again:
Make sure that each screen supports just one single main action.
Squeezing too much information on the same screen and requesting the user to carry out more than one primary action will just:
confuse him/her
distract him
lead to attention overload
9. Use Typography to Create Visual Hierarchy
Most likely one of the easiest to follow rules of good UI design.
Strategically use different font sizes and display text to enhance:
readability
scanability
legibility
Photo by Alice Donovan Rouse on Unsplash
10. Stick to a Small Number of Gestures
Gesturing, swiping, tapping, pressing... no need to “squeeze” all these user actions into your app. Keep them to a minimum.
Tip: Facebook and WhatsApp make some good UI design examples; their interfaces require a limited number of user gestures.
Pro tip: make sure it's crystal clear to your users what gestures they need to perform in order to carry out certain actions on your interface.
Source: Medium.com
The END!
Now, I'm really curious to hear/read your thoughts:
How does your own list of must-follow rules of good UI design look like? Have I overlooked any key best practices?
Let me know in the comments below.
Image by FiveFlowersForFamilyFirst from Pixabay
Silviu Serdaru / Mar 17'2020
"How do I test my website for accessibility?" And right after you type in this question you discover that there are dozens of free website accessibility testing tools to choose from. So: why use Siteimprove?
In this post, I'll answer your key questions about Siteimprove:
What does Siteimprove do?
Why use precisely this accessibility evaluation tool?
How to use the Siteimprove Accessibility Checker?
Siteimprove vs Axe: what are the key differences?
Monsido vs Siteimprove: which is the best web accessibility testing tool for you?
Drupal 8 Siteimprove: what does it do?
So, let's dive in:
1. How Does the Siteimprove Accessibility Checker Work?
"The Siteimprove Browser Extension is a Chrome/Firefox plugin that allows you to see page specific DCI scores and if a CMS deep link is set-up, it also allows you to fix content to improve the scores directly in your CMS during your browser session." (source: Siteimprove.com)
Once added to your browser toolbar, you can use Siteimprove to identify accessibility issues on specific web pages. At any given time.
It provides you with:
explanations on how they impact the user experience
clear recommendations on how to address them
Free, handy, effective. These are the best 3 words to describe the Siteimprove extension.
Note: since all evaluation is performed in your browser, Siteimprove guarantees you a secure scanning of your non-public pages, multi-step forms, password-protected pages and pages with dynamic content.
2. Why Use Siteimprove over Other Website Accessibility Testing Tools?
What powerful features make it stand out from the crowd of automated accessibility testing tools that you could use?
I've selected the 8 most valuable ones:
2.1. Monitors all broken links and spelling mistakes on your web page
Maybe you consider these issues to be mere... negligences to be put at the end of your priority list.
But just imagine how much these "details" could affect a visually impaired user.
This is where the Siteimprove Accessibility Checker comes in. It keeps your website under "surveillance". Ready to spot and to highlight any broken link, any little spelling mistakes that it detects. Or any other quality issues that it identifies.
2.2. Generates an accessibility report for you to analyze
From ALT missing attributes to accessibility issues spotted in your tables and forms, the Siteimprove report lists all the problem areas to focus on.
A handy overview that you can use to define all future tasks that need to be carried out in order to improve your website's accessibility.
2.3. Pinpoints accessibility issues
It'll highlight them all right on-page and in-code.
In other words, you don't need to do a research on all the latest accessibility guidelines first.
The Siteimprove extension for browsers will outline all the key issues that you'll need to focus on to get started.
2.4. Integrates seamlessly with your CMS
Whether it's Drupal or WordPress that you're using, Siteimprove enables you to fix the signaled issues on the spot. Right there, in your CMS, while you're browsing around your website.
2.5. Allows you to automate the accessibility checks
And by automating the bulk of your testing process, you get to streamline all the tasks that it covers, such as:
testing various color combinations
evaluating your PDF pages' accessibility
testing your form fields
2.6. Provides specific recommendations
Why use Siteimprove?
Because it doesn't stop at pointing out the accessibility issues on your website: it also gives you clear explanations on how to address them.
2.7. Enables you to monitor your progress in improving your website's accessibility
industry benchmarks
historical graphs
automated reports
customizable dashboards
All these Siteimprove features enable you to measure the progress that your team makes for turning your website WCAG 2.1 compliant.
2.8. Allows you to set up a hierarchy for the accessibility issues identified
In short, the Siteimprove web accessibility checker enables you to categorize and to prioritize tasks by:
severity
conformance level
And to assign them by job role (webmaster, editor, developer...) or responsibilities.
3. How to Use Siteimprove Accessibility Checker?
Say you want to try the Siteimprove Google Chrome Extension. Here's how you use it:
install the Siteimprove Accessibility Checker Chrome extension from the Chrome Webshop from your Chrome browser
add the extension to your browser: "Add to Chrome"
look for the newly added icon in your browser window
enter your target web page's URL in your browser
click the Siteimprove Accessibility Checker icon and let it perform its audit
take a look at the results displayed on the right side of the page
Note: Siteimprove Accessibility Checker uses the same checking engine as the Siteimprove Accessibility platform.
4. Siteimprove vs Axe Accessibility Tool
Why use Siteimprove over Axe? How are they different anyway?
Let's compare these 2 popular accessibility testing tools:
4.1. Axe browser extension
It generates detailed results, but you might find its slideshow-style controls a bit challenging
4.2. Siteimprove Accessibility Checker
it stands out as an accessibility testing tool that allows you to filter tasks by "responsibility" (or job role)
also, it displays the issues that it detects following the same structure of the WCAG guidelines
it presents color-codes issues by conformance level (A, AA, AAA)
it points out to the specific WCAG criteria that those issues relate to
5. Monsido vs Siteimprove Accessibility Checker
And why would you choose Siteimprove over Monsido?
Here's what sets them apart:
Monsido provides comprehensive crawls weekly, whereas with Siteimprove you get automated crawls every 5 days
Monsido could discourage you with its less-friendly UI, whereas Siteimprove has a more intuitive dashboard
6. The Drupal 8 Siteimprove Module: What Does It Do?
"The seamless integration between Siteimprove and Drupal streamlines workflow efficiencies for your web team. With the module, your team can fix errors and optimize content directly within the editing environment." (source: Siteimprove.com)
In short, the module (or "Siteimprove plugin", if you wish):
scans your website for accessibility issues (broken links and misspellings, A, AA, AAA conformance level accessibility issues, readability levels, etc.)
that you can then turn into manageable tasks and assign to your team members
who can tackle them right in the editing environment that they're using
Tip: you can even use the Drupal 8 Siteimprove module to see what would be the impact if you unpublished a "problem" page before you apply this measure.
The END!
Have I managed to answer your "Why use Siteimprove?" question?
Are you already using it as your website accessibility checker? If not, what other tool are you using and why have you chosen precisely that one?
Let me know in the comments below.
Image by Sitanshu Kumar from Pixabay
Adriana Cacoveanu / Mar 12'2020
There’s no better way of telling which tool best fits your needs than by putting Drupal 8 Layout Builder and Paragraphs to the test, right?
If you were searching for an honest comparison of the 2 Drupal 8 drag and drop page builders, you’re on the right blog.
Because in this post I’ll compare Drupal Layout Builder vs Paragraphs.
What you’ll get is a straight answer to each one of your key questions regarding the 2 most popular page building tools in Drupal:
Why would you choose Drupal Paragraphs?
What are its main trade-offs?
What are its best use cases?
What are the key advantages of using Drupal 8 Layout Builder?
What are its limitations?
What are the use cases of Layout Builder vs Paragraphs?
Now, let’s get you those answers:
1. Drupal Layout Builder vs Paragraphs: Introducing the 2 Contestants
1.1. Drupal Paragraphs
The Paragraphs module was quite a revelation when it was first released.
Why? Because Drupal rocked supreme at enabling users to create template-based pages, but when it came to uniquely designed pages (i.e. landing pages) it started to show its limitations.
And this is where the Paragraphs module came in. It “seduced” Drupal developers with a new component-based approach to building a page’s layout.
Source: Championsdigital.com
The Paragraphs layout builder would allow developers to create individual paragraph types — popup elements, plain text, code blocks — and editors to assemble those paragraphs into highly flexible pages.
Moreover, they could reuse those page components to create new and new content layouts.
For instance, they could put together a page that included one WYSIWYG Paragraph, a Slideshow Paragraph, and one paragraph with both text field and image field...
The idea of “flexible structured content” had taken over the Drupal planet...
1.2. Drupal 8 Layout Builder
The drag and drop page builder in Drupal core designed to take the content editing experience to a new level.
How? By granting editors more control over the Drupal layouts they create.
Drupal 8 Layout Builder enables non-technical users to easily mix and match nodes, fields, and other types of content via a drag-and-drop UI.
They can create their visual layouts and landing pages in no time. All they need to do is drag and drop, then rearrange site-wide blocks and content fields to their liking.
Source: Drupal.org
Moreover, users can even create new custom “inline” blocks of their own.
Power and flexibility combined into one visual design tool aimed at improving the editor experience.
2. What Are Their Key Strengths?
2.1. Drupal Paragraphs
In a Drupal Layout Builder vs Paragraphs “battle”, why would you go with the “stacked components” approach to layout building in Drupal 8?
Source: Drupal.org
Because the content editing experience is intuitive: editors can use the “Add a popup” and “Add a quote” tabs and rearrange their components with drag and drop
Because it enables you to group multiple fields into new complex elements
Because it allows you to come up with an unlimited no. of ways for combining your paragraphs
Because it enables you to create reusable components that you can then use per node
Because it prevents the workflow of your nodes from becoming too cluttered by providing an entity type for your sub-page components
Source: Drupal.org
2.2. Drupal 8 Layout Builder
What are its key selling points? Why would you choose Layout Builder over Paragraphs?
Because it requires less custom code
Because it grants you a higher level of control over the layouts you’re creating
Because it grants you lower maintenance costs
Because you get to mix field content with blocks
Because you’re free to create and populate new landing pages from the ground up: just set up your custom content blocks and arrange them to your liking within the layout
Because it provides you with an improved authoring experience
Because you can extend the default set of layout grids through custom plug-ins
Because it allows you to keep your structured data
Because it enables you to get the most of the block system for creating your Drupal layouts: custom inline blocks, programmatic blocks, custom global blocks, custom field blocks
“Blocks” that are fieldable, translatable, templatable, reusable, and part of Drupal core, as well.
Source: Phase2Technology.com
In a nutshell, this Drupal page builder provides both:
an easy way to manage fielded content in the backend
the best drag-and-drop editor experience
3. Where Does Each Drupal Page Builder Fall Short?
3.1. Drupal Paragraphs
What could make you… hesitate before choosing the Paragraphs layout builder for creating structured content? What are its key limitations?
You (your content editors) still depend on a developer to set everything up
Managing nested paragraphs when dealing with complex layouts can get quite overwhelming
Source: Evolvingweb.ca
And this is the biggest trade-off that could discourage you from going with Paragraphs as your page building tool:
You get to nest/add new and new elements, which carry their own sets of elements, up to the point where this “unlimited nesting” of paragraphs turns into a too confusing interface to cope with.
3.2. Drupal 8 Layout Builder
Where does it fall short?
In a Drupal Layout Builder vs Paragraphs “debate”, which drawbacks of this visual design tool could make you choose Paragraphs instead?
You might find block content not to be 100% explicitly connected to nodes
Combining template-based with custom layouts is a bit challenging
Enforcing a sitewide consistency of your custom-made layouts is quite a dare
4. When Would You Use One Layout/Editing Tool Over the Other?
4.1. Drupal Paragraphs
When you need to reuse many of the content components on your website to create new pages
When being able to reuse those components “per node” is of particular importance for your workflow
When your structured layout does call for nested paragraph bundles
4.2. Drupal 8 Layout Builder
When would you use this particular solution for creating layouts in Drupal 8?
When is Layout Builder a better choice than the paragraphs module?
When your landing page calls for a grid-like layout, including both dynamic elements (custom blocks, views) and fielded content
When you need to “juggle with” multiple columns for creating your layout
When you need to create a fully customed page from the ground up; a “special” page, that’s not connected to any structured content on your website (i.e. a single “Get a Quote” page)
When you need to custom-tune templated layouts; to override existing page layouts
When you need to set up “layout templates”, such as the layout for your product page or your blog post page
5. Final Results: Which Approach Best Fits Your Needs?
What do the results of this Drupal Layout Builder vs Paragraphs comparison tell you?
That there’s no “best” Drupal page builder. Only the one that best fits your specific layout creation needs.
It all comes down to the level of diversity in your content:
If it’s a particularly intricate page layout that you need to create, you might not want to go with Paragraphs. Its nesting feature can turn against you.
If you’re “craving” flexibility and the content on your Drupal 8 website varies a lot from page to page, yet you still want to keep a level of layout consistency, the Drupal 8 Layout Builder is your best choice
Your turn now: which of these 2 page building tools do you prefer and why?
Let me know in the comments below.
Image by 200 Degrees from Pixabay
Adriana Cacoveanu / Mar 06'2020
You've gone through the guidelines, standards, warnings, and best practices included in the W3C recommendations and... you're stuck. How do you know whether your website is 100% WCAG 2.1 compliant? What are the best web accessibility testing tools out there that you could use?
Free, easy to use accessibility evaluation tools that you could run on your website to spot the issues lurking in there.
And which could even get you some valuable recommendations on the best ways to address them.
All that before you actually have someone (or even a whole team of QA testers) review your website. Before you carry out an in-depth accessibility audit and run user-centric testing sessions with... real people involved.
You must be thinking about browser extensions...
They're so accessible: you just open the page you want to check and click a button in your toolbar. They're free and make great "starts" for identifying accessibility issues on your website. And for getting your hands on some valuable recommendations on how to fix them.
So, here are 5 automated accessibility testing tools that we recommend you try first:
0.1. But What Are Accessibility Tools More Precisely?
"Are there any recommended tools available that can help me test for accessibility issues?"
Take these common accessibility issues that might still go "undetected" on your website:
there's not enough color contrast on certain pages (or no contrast at all)
one or more images don't have ALT descriptions added to
an editor deleted the content for one of the H2 tags but left that tag lingering in there and confusing the screen readers
someone from your design team has put a placeholder text instead of a text field, which risks displaying an unlabeled field, that screen readers cannot... read
there's one label missing from your newsletter sign-up form
These are all frequent issues that web accessibility evaluation tools can help you detect and address.
They fall into multiple categories:
browser extensions, that we'll be focusing on in this post
command-line tools accessibility testing tools that you can integrate with your continuous integration system
Tip: Keep in mind that the following 5 best web accessibility testing tools detect about 30% of the issues. They make a great starting point for a more complex audit and comprehensive monitoring strategy that you should set in place.
1. Wave, The Venerated Web Accessibility Evaluation Tool for Chrome
A full-featured, easy to use website accessibility checker that's been in most developers' toolkits for quite a few years now.
Here's how it works:
it adds a visual overlay of error icons and indications to the web page that you're auditing
icons which, once clicked, provide you with information and recommendations about the accessibility issues detected: redundant titles, structural elements, links to HTML, poor color contrast, how those issues impact different types of users, what WCAG guidelines they violate, etc.
it points out to you the "troublesome" code via annotated HTML popping up in the panel at the bottom of the screen
In short, Wave is one of the robust website accessibility checkers that goes beyond streamlining your audit process.
It's also geared at educating users (website owners, QA testers) about the accessibility issues to pay attention to.
"How to use Wave accessibility tool?"
Either way:
you can just enter your URL in the dedicated field on their website
you can download the browser extension
Go for the extension particularly if it's dynamic, password-protected and locally stored web pages that you need to check.
2. Tenon, Accessibility as a Service
"How do I test accessibility?"
Tenon's another tool that comes both in a free and paid version.
What makes it "worthy" of this top 5 selection?
it addresses the common scenario: running accessibility tests after neglected guidelines have already turned into critical issues that affect the user experience
it's such a flexible tool for content creators, designers, developers, and testers
it generates... generous reports with code snippets for each error, corresponding WCAG guidelines, and recommendations on how to fix them
In short: Tenon helps you run a preventive type of accessibility check on your website. You can detect key issues before they even get to turn into major usability problems
Furthermore, you can easily incorporate Tenon into your toolset via its API. It integrates smoothly with any CMS, IDE, deploy tool or automated build that you might be using.
3. Google Lighthouse, One of the Top Automated Accessibility Testing Tools
"How do I know if my website actually is WCAG 2.0 compliant?"
You give it a full check using a tool like Google Lighthouse here:
it's open-source
it's automated
it's so handy (it's Chrome built-in)
it's super easy to use
Moreover, this accessibility testing tool is part of a whole suite of checks that you can run using Chrome Developer Tools:
SEO
Progressive Web App
Performance
Best Practices
What it does it provide you with a full report of its test results:
whether all the buttons on that page have accessible names or not
whether all the images have ALT attributes added to
whether that page has a title or not ...
Next, you simply take it from there and improve the areas signaled in the report.
And here's how you use it:
open devtools in your Chrome Browser
look for the "Audits" tab
click "Perform an Audit"
Tip: save the report in a JSON format for later (or to send it to someone in your team).
Another great thing about Google Lighthouse is that it's one of those web accessibility evaluation tools that don't require you to sign up. You just drag a report onto the online report viewer that it provides you with.
4. Axe Browser Extension
"How do you know if your site actually is WCAG 2.0 compliant?"
You "grab" a tool like Axe here and give your site an automated audit.
It'll just attach itself as a new tab to your Chrome's Dev Tools. Once you click that blue "analyze" button, you'll be given a whole list of "violations" detected on your page.
Why have we included it in our highly exclusive list of 5 best web accessibility testing tools?
because it's free (a self-contained open-source library)
because you get to custom-tune it to your specific accessibility testing needs: add specific rules, integrate it with testing frameworks and browsers of your choice...
because each signaled issue "exposes" the corresponding markup, as well
Just hit "Inspect code" and you're taken to the tab in DevTools, where the "culprit element" is outlined.
Tip: another reason why this is one of the first website accessibility checkers that you should consider is that the Axe accessibility report goes beyond signaling clear violations of accessibility guidelines.
It also highlights aspects that you could improve on your website's UI.
5. Siteimprove, One of the Best Web Accessibility Testing Tools
We confess: Siteimprove is our favorite website accessibility checker. Here's why:
it provides us with actionable information regarding all the issues that it detects
it generates clear explanations on the impact of those issues on some users
it also "spoils" us with intuitive user experience: issues get highlighted to the right side of the page
Where do you add that the entire web page audit process is performed in our Chrome browsers.
Easy to use and highly efficient. What more could you wish from a free accessibility testing tool?
Final Word
Turn this type of accessibility testing — using Chrome extensions — into a part of a more comprehensive testing strategy.
You shouldn't limit your evaluation to the results that you get by using any of these 5 best web accessibility testing tools.
There's still some level of "human intervention" needed to interpret those results. To come up with the proper set of steps to take, right?
Use them if you just want to check whether:
there are any images without ALT descriptions on your website
the HTML is valid
your form fields have both labels and descriptions
Whereas for assessing:
whether that HTML is semantic or not
whether those form field descriptions are user-friendly enough
whether there's a proper heading hierarchy on a given page on your website
... you'll need human analysis.
Automated accessibility testing will (only) point out key aspects for your QA testers to focus on.
The END!
Have you used any of these accessibility testing tools on your website?
Do you usually stop your audit there or do you use an automated & manual testing type of "combo"? Does it depend on the context actually?
Share your thoughts in the comments down below!
Photo by John Schnobrich on Unsplash
Adriana Cacoveanu / Feb 29'2020
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.
Adriana Cacoveanu / Feb 25'2020
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
Adriana Cacoveanu / Dec 14'2019
For that's the proper question to ask yourself: "What is the best web design platform for my own use case?"
For your own context, which is made of specific:
needs
constraints and limitations
business goals and objectives
particular budget
level of technical know-how
type of website that you need
And this last factor is, by far, the most important criterion to use when you evaluate the most popular web development platforms.
When you try to identify the best one for you...
It's also the criterion that we'll use in today's post to highlight for you the best web design platforms in 2019.
Just scan through the different types of website listed here below, spot your own type, and see which platform makes your best choice.
1. If You're Building a Low-Maintenance, User-Friendly Website...
Say you're not planning to "take over the world" with your new website and you need to be able to keep its maintenance and upkeep to a minimum.
Then you opt for Squarespace...
And here are the top reasons why you would want to choose this particular platform for web design:
you get a conveniently simple interface
it ships with a load of modules to choose from
it provides you with eCommerce functionality
It's true, though, that you don't get that much customization freedom as you'd get with other platforms, but it does the job if it's a:
user-friendly
low-maintenance
... website that you're planning to build.
2. If You're Building a Visually-Appealing Website...
In this case, your 2 best options are WordPress and Drupal.
The first "spoils" you with so many great templates to choose from to create a visually-stunning website. Not to mention the heavy load of WordPress plugins that you can use for custom-tuning your site to fit your aesthetical needs perfectly.
Whereas for Drupal (and particularly Drupal 8), you just can't ignore its built-in responsive design capabilities.
Note: one of the aspects that might discourage you from choosing this CMS to create a great looking website is the lower number of Drupal developers compared to the "deep" pool of WordPress talent. That's why we've focused an entire post on the topic of "hiring Drupal developers" and "stuffed" it with tips on where exactly to find the right Drupal talent for your project.
3. If You're Building an Enterprise-Level, Complex Website...
Drupal "rocks supreme" on this category:
it's equipped to withstand floods of traffic and massive volumes of content
it's designed to handle complex, multi-user content creation and management systems
it's robust enough to power heavy multi-site infrastructures
it ships with tons of modules to extend its functionality even further
In short: Drupal's an "enterprise-ready" platform; it's built precisely for large, high-trafficked websites (think Tesla.com, eBay, NASA, Harvard University's website).
Where do you add that Drupal stands out as the best platform for responsive web design, as well...
4. What Is the Best Web Design Platform to Rank High on Google?
If out-of-the-box SEO optimization features are your top priority, then you'll need to choose between WordPress and Drupal. They both ship with robust plugins, respectively modules, aimed at helping you make your website SEO-friendly.
WordPress
The system's already ideally optimized with regards to SEO:
it's coded so that search engines can easily crawl in
managing heading and title tags is dead-simple
creating and updating content's highly intuitive
Word of caution: WordPress's ease of use and SEO-friendliness does come at a cost: being so popular makes it particularly "tempting" for hackers, too. You don't want to cut down on preventive maintenance costs on your future website.
Drupal
Its SEO modules — Pathauto, Yoast, Global Redirect — are designed to streamline all your SEO efforts, from optimizing your meta tags to... setting up your SEO-optimized URLs.
5. If You're Building a Fully Customizable and Scalable Website...
"What is the best web design platform for me if I want complete freedom of customization and if I'm planning to scale my website over time?"
It's... Drupal, again.
From all the most popular web development platforms out there' Drupal sets itself apart as:
the most flexible one: there's a module for any customization work that you might want to do on your website
the most scalable one: Drupal's designed to scale up, seamlessly, to accommodate huge loads of content and traffic
6. If You're Building an eCommerce Website...
What platform should you power your eCommerce goals with?
Well, it depends greatly on whether it's a powerful "selling machine" that you're planning to build or an online store for your start-up business in eCommerce.
Magento
If you have a huge product inventory (maybe even a multi-source one), Magento's your best option. Here's why:
it's robust: Magento's built to cope with an intricate and heavy infrastructure of multiple stores, currencies, languages...
it's feature-packed
it's scalable: feel free to start with a small online store and to grow it into a complex multi-store network; Magento's designed to accommodate your growth plans, no matter how ambitious
Shopify
If you need a website for your start-up eCommerce business and you don't want to get tangled up in customization, a hosted platform like Shopify is the best option:
it's SEO-friendly
it provides you with unlimited bandwidth
it adjusts to your specific eCommerce business model: POS, dropshop, subscription-based...
it provides affiliates capabilities, purchase buttons, Facebook selling support, etc.
Word of caution: do keep in mind that, if you decide to migrate your online store to another platform, it's just your product information that you can export from Shopify.
In other words: don't expect to be able to transfer your user interface and your website design, as well.
7. If You Need a Beautiful Site but Have no Web Design Experience...
"What is the best web design platform for me if I want to create an eye-catching website but... I'm a non-developer?" you wonder.
"Oh, yes: and I want to build it fast and easy, if possible?" you ask.
It's Wix.
From the best web design platforms in 2019, Wix suits your needs and limitations perfectly:
you get a user-friendly WYSIWYG interface
it "spoils" you with a rich template collection
it's easy to learn and even easier to use
it "tempts" you with both free and low-cost options
In short: Wix is for anyone with close to zero web design experience who wants the freedom to set up, customize and further update his visually-appealing website himself.
8. If You're Building just a Small, Reference-Driven Website...
What if you just need to put together a basic business website to showcase your services? Nothing fancy, just a small website that should provide more detailed information to your potential new clients.
And that should fit your budget...
Then, what you need is the best website builder software that helps you get your site up and running in no time and grants you full control over its code and design.
And there are quite a few great ones:
Site Manager
Weebly
SiteBuilder
Shopify if it's a no-fuss eCommerce website
Wix, again
The END!
Have you found that type of website that you're planning to build listed here?
Photo by Kaleidico on Unsplash
Adriana Cacoveanu / Oct 30'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.
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
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
Silviu Serdaru / Oct 04'2019
They used to be THE norm and to dictate web designers' decisions. No one questioned their usability or long-term efficiency. Or that they would soon grow into some outdated web design trends. Deprecated conventions that, when not mocked, are now regarded as mere haunting “ghost of the past”.
A “past” where glossy buttons, flashy design, and overly embellished page dividers used to steal the spotlight.
Now, let us go against today's trend of talking about “the biggest web trends in 2019” and, instead, dig out some old UI cliches. Just to determine the cause of death so that you:
don't risk falling into yesterday's pitfalls in terms of web design once again
leverage the lessons of the past to contribute to a better future of the web
1. The Flash Menu
Remember those “glory days” of the... flashy web?
There was sound pretty much everywhere on a web page, animated buttons, interactive elements. And there were fancy flash menus, of course.
All web designers used to take “flashy” and “animated” for... “user engaging”.
The causes of death:
applying any changes to a flash menu was discouragingly challenging (you couldn't get away with just editing a text file)
it had a negative impact on the website's SEO; crawling those flash files was “mission impossible” for the search engines
it wasn't mobile-friendly
it had poor loading times
it had to be installed into the browser
plugins had to be updated constantly... frequently
2. The Frame, the Elder “Cousin” of Today's iFrame
Now, let's turn back the hands of time and “freeze” it right at those days before tables stepped into the spotlight. What did we use for basic layouts back then?
We used frames...
Which are now no more than another one of the outdated web design trends that, well, it's not worth resuscitating. Back then, we didn't have JavaScript to overtake the burden of loading data, so web browsers had to do all the heavy work.
The causes of death:
they would compromise the browser history and break the back and forward buttons
copying and pasting links to web pages on the same website was a dread
they would enable the web browser to partly update a page instead of loading a brand new one
reloading a website would, more often than not, mean no more than guiding the user back to the exact front page
3. The Table Layout, One of Those Outdated Web Designs Trends to... Bury
OK, maybe there's no need to “mourn” over this dead UI convention, but we can't just overlook its massive contribution to... the evolution of web design.
Image source: Genealogy Web Creations
Back then, when the table-based layout trend emerged and stole the spotlight, it opened a whole world of possibilities:
It empowered us to structure our web content by breaking it into multiple columns and rows.
Surprisingly enough, that mix of GIF files and inline styles did manage to glue those layouts together.
The causes of death:
it wasn't responsive
<div> tags and classes came to... seal its faith
CSS, “tempting” us with floats, stepped on the stage of web design
4. The Border Ornament and Decorative Page Divider
The overly embellished page separators are another “once a norm, now just one of the outdated web designed trends”.
Image source: Image by Karen Arnold from Pixabay
In its “glory days,” it was our only option to split chunks of text on our web pages. And since the <hr> elements looked a bit too... dull, we went to the other extreme and started using these overly embroidered GIF separators to section our web pages.
Separators which, at first, were no more than some horizontal bars. Until web designers fell prey to the urge of gilding the lily.
The causes of death:
the heavily ornamented borders ended up diverting users' attention away from the essential: the text itself
CSS/CSS3 eventually stole our attention, as web designers
divs and classes made the segmentation of a web page much more... fluid, with no impact on the overall user experience
5. The Blinking Marquee
There was a time, way before image sliders gained their bad reputation when we would have text just... slide across web pages, from right to left.
What made this “sliding” possible? HTML's marquee tag, the equivalent of Internet Explorer's <blink> tag...
The causes of death:
it distracted website visitors from the core message
it affected SEO, since it only displayed partial information to search engines
it was an unnecessary artifice in most cases, for it carried minor information and it was the main “culprit” for a high cognitive load
6. The Image Button
Another one of those outdated web design trends dating back to early 2000, when “flashy”, “cluttered” and (most of all) “fancy” were the best adjectives to describe web designers' work.
And the glossy, 3D-looking image-based buttons created in Photoshop were fancy, alright! Where do you add that they paired with custom-made, animated cursors, as well.
The causes of death:
with text “carved” into the image, buttons were too difficult to manage, too difficult to apply changes to
they weren't responsive (they would get “partially responsive” and that only after a lot of hard work)
CSS3 came to... bury it for good
The END!
These are the 6 most representative UI conventions for the early 2000s that have gradually turned into some outdated web design trends.
Or, better said, into “learning materials” on the old/wrong ways of designing for the web and how they influenced today's UI design best practices.
Image by Mudassar Iqbal from Pixabay
Silviu Serdaru / Jun 03'2019