What's your favorite tool for creating content layouts in Drupal? Paragraphs, Display Suite, Panelizer or maybe Panels? Or CKEditor styles & templates? How about the much talked about and yet still experimental Drupal 8 Layout Builder module?
Have you "played” with it yet?
As Drupal site builders, we all agree that a good page layout builder should be:
flexible; it should empower you to easily and fully customize every single node/content item on your website (not just blocks)
intuitive, super easy to use (unlike "Paragraphs", for instance, where building a complex "layout", then attempting to move something within it, turns into a major challenge)
And it's precisely these 2 features that stand for the key goals of the Layout Initiative for Drupal:
To turn the resulting module into that user-friendly, powerful and empowering page builder that all Drupal site builders had been expecting.
Now, let's see how the module manages to “check” these must-have strengths off the list. And why it revolutionizes the way we put together pages, how we create, customize and further edit layouts.
How we build websites in Drupal...
1. The Context: A Good Page Builder Was (Desperately) Needed in Drupal
It had been a shared opinion in the open source community:
A good page builder was needed in Drupal.
For, even if we had a toolbox full of content layout creation tools, none of them was “the One”. That flexible, easy to use, “all-features-in-one” website builder that would enable us to:
build complex pages, carrying a lot of mixed content, quick and easy (with no coding expertise)
fully customize every little content item on our websites and not just entire blocks of content site-wide
easily edit each content layout by dragging and dropping images, video content, multiple columns of text and so on, the way we want to
Therefore, the Drupal 8 Layout Builder module was launched! And it's been moved to core upon the release of Drupal 8.6.
Although it still wears its “experimental, do no use on production sites!” type of “warning tag”, the module has already leveled up from an “alpha” to a more “beta” phase.
With a more stable architecture now, in Drupal 8.6, significant improvements and a highly intuitive UI (combined with Drupal's well-known content management features) it stands all the chances to turn into a powerful website builder.
That great page builder that the whole Drupal community had been “craving” for.
2. The Drupal 8 Layout Builder Module: Quick Overview
First of all, we should get one thing straight:
The Drupal 8.6. Layout Builder module is Panelizer in core!
What does it do?
It enables you, the Drupal site builder, to configure layouts on different sections on your website.
From selecting a predefined layout to adding new blocks, managing the display, swapping the content elements and so on, creating content layouts in Drupal is as (fun and) intuitive as putting Lego pieces together.
Also, the “content hierarchy” is more than logical:
you have multiple content sections
you get to choose a predefined layout or a custom-design one for each section
you can place your blocks of choice (field blocks, custom blocks) within that selected layout
Note: moving blocks from one section to another is unexpectedly easy when using Layout Builder!
3. Configuring the Layout of a Content Type on Your Website
Now, let's imagine the Drupal 8 Layout Module “in action”.
But first, I should point out that there are 2 ways that you could use it:
to create and edit a layout for every content type on your Drupal website
to create and edit a layout for specific, individual nodes/ pieces of content
It's the first use case of the module that we'll focus on for the moment.
So, first things first: in order to use it, there are some modules that you should enable — Layout Builder and Layout Discovery. Also, remember to install the Layout Library, as well!
Next, let's delve into the steps required for configuring your content type's (“Article”, let's say) display:
go to Admin > Structure > Content types > Article > Manage Display
hit the “Manage layout” button
… and you'll instantly access the layout page for the content type in question (in our case, “Article”).
It's there that you can configure your content type's layout, which is made of:
sections of content (display in 1,2, 3... columns and other content elements)
display blocks: tabs, page title...
fields: tags, body, title
While you're on that screen... get as creative as you want:
choose a predefined layout for your section — “Add section” — from the Settings tab opening up on the right side of the screen
add some blocks — “Add block”; you'll then notice the “Configure” and “Remove” options “neighboring” each block
drag and drop the layout elements, arranging them to your liking; then you can click on either “Save Layout” or “Cancel Layout” to save or cancel your layout configuration
And since we're highly visual creatures, here, you may want to have a look at this Drupal 8 Layout Builder tutorial made by Lee Rowlands, one of the core contributors.
In short: this page builder tool enables you to customize the layout of your content to your liking. Put together multiple sections — each one with its own different layout — and build website pages, carrying mixed content and multiple layouts, that fit your design requirements exactly.
4. Configuring and Fully Customizing the Layout of a Specific Node...
This second use case of the Drupal 8 Layout Builder module makes it perfect for building landing pages.
Now, here's how you use it for customizing a single content type:
go to Structure>Content types (choose a specific content type)
click “Manage display” on the drop-down menu
then click the “Allow each content item to have its layout customized” checkbox
and hit “Save”
Next, just:
click the “Content” tab in your admin panel
choose that particular article that you'd like to customize
click the “Layout” tab
… and you'll then access the very same layout builder UI.
The only difference is that now you're about to customize the display of one particular article only.
Note: basically, each piece of content has its own “Layout” tab that allows you to add sections, to choose layouts.
Each content item becomes fully customizable when using Drupal 8 Layout Builder.
5. The Drupal 8.6. Layout Builder vs Paragraphs
“Why not do everything in Paragraphs?" has been the shared opinion in the Drupal community for a long time.
And yet, since the Layout Builder tool was launched, the Paragraphs “supremacy” has started to lose ground. Here's why:
the Layout builder enables you to customize every fieldable entity's layout
it makes combining multiple sections of content on a page and moving blocks around as easy as... moving around Lego pieces
By comparison, just try to move... anything within a complex layout using Paragraphs:
you'll either need to keep your fingers crossed so that everything lands in the right place once you've dragged and dropped your blocks
or... rebuild the whole page layout from scratch
The END!
What do you think:
Does Drupal 8 Layout Builder stand the chance to compete with WordPress' popular page builders?
To “dethrone” Paragraphs and become THAT page layout builder that we've all been expected for? Or do you think there's still plenty of work ahead to turn it into that content layout builder we've all been looking forward to?
RADU SIMILEANU / Nov 02'2018
Here you are now: your Angular 4 front-end app ready to... wow its users! “Almost ready” actually! For it still needs styling... And what better HTML and CSS framework to go for than Bootstrap, right? But how to use Bootstrap with Angular 4 more precisely?
How do you properly integrate it into your Angular 4 CLI project?
Great news: you have not just one, but 3 options at hand for adding it!
Let me get into details:
On Using Bootstrap in Your Front-End Development Process
Is there any need to list here the reasons why it's precisely Bootstrap that you're planning to implement into your Angular CLI project? Angular 4, to be more specific.
After all, it's the most popular framework for styling websites built in HTML, CSS and modern web & mobile JavaScript frameworks (like Angular here):
It's an open source, feature-rich framework that turns front-end development into a such a “breeze”. Basically, it empowers you to build responsive layouts without the need to be a CSS “expert”.
And now, let's break down further with the step-by-step “tutorial” on how to use Bootstrap with Angular 4:
Step 1: Create a New Angular Project Using Angular CLI
The very first step to take is obviously setting up a brand new project.
Use the Angular Command Line Interface to generate it.
But first, install it to on your system:
$ npm install -g @angular/cli
It's only then, once you've installed its NPM package, that you can go ahead and... generate your new project.
For doing this, just type the following command in your CLI:
$ ng new myproject
Next, feel free to change into that specific directory and to turn on the web server:
$ cd myproject
$ ng serve
“App works!” This is the message that you should be seeing in your browser right now.
Step 2: Install Bootstrap to Your Project
Now that you've launched your new Angular project, it's time to add your Bootstrap library, as well.
And you sure aren't nickel and dimed in options. There are 4 ways to add Bootstrap to Angular 4.
Step 3: How to Use Bootstrap with Angular 4 — 3 Different Ways to Integrate It
Option 1: Install Bootstrap from CDN
And there are 2 particular files that you'll need to install from CDN into your project:
the Bootstrap CCS file
the Bootstrap JavaScript file
Note: keep in mind to add the jQuery JavaScript library file, as well!
Next, open the src/index.html file and insert the following:
the <link> element to add the Bootstrap CSS file at the end of the head section
a <script> element for adding jQuery at the bottom of the body section
a <script> element for inserting the Bootstrap JS file at the bottom of the body section
Eager to see “Bootstrap in action” in one of your project's component templates? Then give it a try:
open the src/app/app.component.html
enter the following code there:
<div class="container">
<div class="jumbotron">
<h1>Welcome</h1>
<h2>Angular & Bootstrap Demo</h2>
</div>
<div class="panel panel-primary">
<div class="panel-heading">Status</div>
<div class="panel-body">
<h3>{{title}}</h3>
</div>
</div>
</div>
And it's the following message that this HTML template code should trigger in your browser:
“app works!”
Note: go for a Bootstrap theme of your choice; once you've downloaded it (from Bootswatch.com for instance), its bootstrap.min.css file will get instantly opened up in your browser.
Just copy the file's URL and use it to replace the string assigned to the href attribute of the <link> element, in the index.html file.
And voila! It's precisely those colors, defined by your chosen theme, that get displayed in the browser now!
Option 2: Install Bootstrap using NPM
And here's another valid answer to your “How to use Bootstrap with Angular 4” dilemma!
Simply enter:
$ npm install bootstrap@3 jquery –save
It's this command that will integrate Bootstrap and jQuery into the node_modules folder of your Angular 4 project directory.
Moreover, it will include these 2 dependencies in the package.json file, as well.
Once properly installed, you can find both packages at:
node_modules/bootstrap/dist/css/bootstrap.min.css
node_modules/bootstrap/dist/js/bootstrap.min.js
node_modules/jquery/dist/jquery.min.js
Note! You have 2 options for integrating those files into your Angular 4 project:
add the file paths to the script array and to the file path of the angular-cli.json file
add the corresponding <script> and <link> elements to your index.html file
Option 3: Add NG-Bootstrap to Your Project
The great thing about this method is that you'll no longer need to add jQuery and Bootstrap dependencies. Ng-Bootstrap comes packed with a set of built-in native Angular directives which are already CSS and Bootstrap's markup-based.
Now, getting back to our initial “How to use Bootstrap with Angular 4” question, let's see how we install this NPM package.
For this, just enter the following command in your Angular 4 project directory:
npm install --save @ng-bootstrap/ng-bootstrap
Next, make sure you also install Bootstrap 4 to your project:
$ npm install bootstrap@4.0.0-alpha.6
And, the final step is to add the following files:
jquery.min.js
bootstrap.min.js
bootstrap.min.css
… to your .angular-cli.json file
Now you still need to import the Ng-Bootstrap’s core module — NgbModule — from its @ng-bootstrap/ng-bootstrap package.
To do this, just type the following import statement into app.module.ts:
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
All there's left for you to do now is to add the NgbModule to the @NgModuledecorator's imports array.
And since we're here, you'll find some more than “enlightening” info (chunks of code here included!) on the 2 different options at hand for importing the NGBModule:
either in your project's child modules
or in your the root module itself
… in this article here on Using Bootstrap with Angular.
Using The NG-Bootstrap Components: Which Are They?
With the NgbModule installed into your Angular 4 project, you're now able to use the Ng-Bootstrap components.
To leverage them in your app.component.html.
Speaking of which, here are the components at hand:
Accordion
Alert
Rating
Tabs
Carousel
Progressbar
Collapse
Datepicker
Buttons
Pagination
Typeahead
Popover
Timepicker
Dropdown
Modal
Tooltip
The END! Does this answer your “How to Use Bootstrap with Angular 4” question?
Which method of adding this front-end framework to your project is more suitable for you?
Silviu Serdaru / Apr 30'2018
Conveniently customizable, ideally flexible and unexpectedly feature-rich... No wonder that you consider moving your site to Magento 2. Or having your brand new e-commerce site built on the latest version of Magento. And now you must be wondering: which are the best free Magento 2 themes to choose from?
And let me guess, your “feature wishlist” goes something like this:
responsive (it goes without saying)
functionality-rich
visually-appealing
flexible enough
capable to accommodate both medium and large-sized online store (you need to consider your growth plans, too, when choosing your theme, right?)
Oh, and yes: most probably time is not your best ally, am I right?
Therefore, you can't afford to invest too much of it in comparing, weighing pros and cons, setting up a never-ending list, then trimming it down to the very best themes for Magento 2.
Well, no need to, for I've got your back!
Here's a top 10 for you, including only those themes with the best user reviews, themes that strike the perfect balance between great looks and powerful functionality:
1. Ves Yume
Feature-packed, fully responsive and... free of charge. What more could you possibly ask for your theme?
And speaking of its features, although they do come with no price tag on, they're unexpectedly powerful. For example:
gallery image product detail
off-canvas menu & header link
Ajax cart
checkout improvements
font awesome
a handful of static blocks
In short: a full-collection of features and functionalities for providing both rich and convenient online shopping experiences to your customers.
2. F2
If it's a sleek & clean web design, suitable for a professional e-commerce site, that you're aiming at, then F2 is the theme to power your plans with!
One which — although designed by the latest web trends — doesn't trade functionality for visually-striking looks.
And speaking if its features, let me point out to you the most tempting ones:
responsive design
sticky header
drop-down cart
multiple product types
configurable swatches
Moreover, it's one of those best free Magento 2 themes that are surprisingly flexible, as well. You're free to adjust it to perfectly fit your Magento project's type and size.
Tip: where do you add that — although looks play a major role here— F2 is NOT overburdened with visual effects. Effects that would negatively impact your online store's performance!
3. Best Free Magento 2 Themes: Ketty, One of the “Oldest” Ones, too
“Oldies, but goldies!”
For, even if it's one of the “oldest” Magento 2 themes, Ketty's packed with some truly powerful features. And thus capable to “rival” much newer/younger themes.
Now, if I am to highlight some of its attention-worthy features:
Ajax cart
product zoom
user-friendly admin panel with a new design
highly customizable
configurable swatches
improved checkout
cross-browser support
Also, F2 is one of the responsive Magento 2 themes, in case you were wondering...
4. Absolute
One of Magento's “star” themes for 4 years now, Absolute's now available for Magento 2, as well.
A highly professional theme overloaded with options to suit your every feature need. If I were to name just some of these hard-to-resist-to ones:
image slider
theme editor
featured product slider
newsletter subscription
my cart and compare product blocks on the homepage
quick product overview
A responsive theme that has already earned itself a “reputation” among Magento users, conveniently packed with features to answer all your e-commerce requirements.
5. BizKick
BizKick's made it to almost all users' personal lists of best free Magento 2 themes.
And for 3 strong reasons:
it's responsive
it “spoils” them with a whole collection of advanced features
it “tempts” them with a handful of clean and classy layouts
6. Ves Need
Is it health spa services, glasses, beauty products, handbags, shoes or maybe clothes that you'll be selling on your Magento 2 e-commerce site?
Then you might want to consider Ves Need.
It comes with an elegant, neat & clean design that will surely appeal to your (mostly) female audience.
And where do you add that it's free, too!
7. Ves Fasony
Designed with the customer's needs and expectations in mind, Ves Fasony is a responsive theme for Magento 2 built with Bootstrap 3.x.
The key reasons behind its listing on this exclusive top here — featuring the very best free Magento 2 themes — are the following:
it's built with online customers' needs and expectations in mind; it anticipates their requirements and delivers an amazing shopping experience
it's optimized for touch drag and drop
it comes with an owl carousel controlling the image slider
Moreover, Ves Fasony's ideal for women and men fashion, watches and bags stores. So, do keep this aspect in mind when you're evaluating the themes listing in this top, looking for the one that best fits all your e-commerce requirements.
8. FreeGo, One of the Best Free Magento 2 Themes
It has the functionality — since it comes packed with a full set of powerful features — and it sure has the looks: a clean-elegant (almost minimalist) design.
Moreover, FreeGo's fully responsive and puts a powerful back-end panel at your disposal. One that you can use for customizing your theme to suit your Magento 2 project in the slightest detail.
And now, when it comes to its “load” of powerful features:
sold out label extension
touch optimized slideshow
child theme ready
features product list (showcasing featured products)
child theme ready
all browser compatibility
off-canvas menu
9. Ves Kasitoo
A Magento 2 theme with a product-oriented and therefore attention-grabbing design, perfect for the following types of online stores:
glasses
equipment
fashion...
Moreover, it's turbocharged with a plethora of advanced features to power your e-commerce website with:
retina-ready images
featured block on the homepage
touch optimized deal products carousel
off-canvas menu
social media buttons
product tabs carousel
10. Ves Vigoss
If you have a “guilty weakness for cutting-edge, clear design, you'll definitely love this Magento 2 theme!
Apart from its great looks, it comes with a full set of outstanding features to tap into:
brand logo slider
Ajax cart
front interesting
quick view
it's fully responsive
checkout improvements
And to this list of features, I cannot but add the Magento 2.0 UI and the Bootstrap 3.x layout components, as well.
The END! So, now that you've scanned through this list of best free Magento 2 themes, which is the perfect fit for your own e-commerce web project? Which one of them supports all your feature needs?
Silviu Serdaru / Apr 20'2018
Adaptive vs responsive design. Is there really a matter of “better vs worse”? What's the difference anyway?
For the boundaries sure look blurry enough. Especially since both types of web design provide you with a solution to the same challenge. The one you're facing as a web designer:
A design that should cater to all screen sizes.
Now, instead of delving into this confusion even deeper, let's shed some light on:
the responsive design key features
the adaptive design's particularities
each option's advantages and drawbacks
key differences between adaptive and responsive design
1. Responsive Design: What Is It?
Using one single layout when designing a web page, that adjusts itself to fit the given screen size.
This would have to be a concise, yet comprehensive definition.
If I am to add a bit more details to it, I would have to say that:
It's a “fluid” layout, a “fluid” grid that we're talking about here, one using CSS, Content (Based Breakpoint) and media queries
… for setting up different style roles for each device/media type
Long story short: the responsive design approach enables your site's pages to (more or less seamlessly) adapt to various screen resolutions.
Note: implementing a responsive design does call for a website conceptualization phase and a deep understanding of the end user's needs and expectations!
2. Adaptive Design: A Concise Definition
Or “progressive enhancement of a website” if you prefer:
This approach to web design is centered around “multiple fixed layout sizes”. Basically, you'll need to create different layouts, one for each screen size. Once the website “identifies” the type of device the user's accessing it from, it just triggers the appropriate pre-set layout.
A layout that you/your team will need to prepare in advance, needless to add (so, you'll need to plan your time and budget accordingly).
Who's leveraging this approach? Apple, About.com, Amazon are just some of the big names.
It's an alternative to the “one-size-stretches-to-all” option in modern web design.
Note: since we can't be talking about a unique layout being re-sized over and over again, there's no impact on the overall design; no more over-stretching or other inconveniences of the sort.
3. Responsive Design: Why Would You Use It? And What Could Discourage You?
Why and when would/should you be “tempted” to go with this approach to modern web design?
Let's go through some of this type of web design's most “irresistible” strong points, shall we?
it's easier to set up and less time-consuming to implement
since the same design is being used, seamlessly, on all devices, a certain feeling of familiarity is being instilled, enhancing the overall user experience
… we can talk about a unified visual (and operational) end-user experience
the collection of affordable templates at hand, suitable for most CMSs, is ideally rich and particularly “tempting” if it's a brand new website that you need to design
a “one size fits all” type of flexibility
it's SEO-friendly; since we can't be talking about distinct design versions, there's no negative impact on the SEO strategy either
lower maintenance costs
no redirection needed for establishing the connection between mobile and desktop sites
And yet, this approach does come packed with certain disadvantages, as well. Limitations that you need to note and ponder on before you make your adaptive vs responsive design decision:
you'll have less control over the screen size design
expect longer mobile download times
no possibility to fine tune the advertisements showing up on your website
expect to have certain elements scattered, moving around the screen once the design readjusts itself to the given screen's width
4. Adaptive Design: Main Advantages & Drawbacks
Your “adaptive vs responsive design” dilemma becomes even acuter when you realize that you need to choose between:
A seamless design, plus a certain sense of familiarity and a suite of tailor-made design solutions catering to users' specific needs.
And how do you choose, since both familiarity and customization have a huge impact on the user experience?
Now, let's have a look at some of the adaptive design's strong points:
as mentioned: it enables you to deliver custom-made web design; different layouts created for various screen resolutions (instead of one layout “stretched/shrunk to all of them”)
it complies with the requirements of modern user experience: personalization-focused UX and user-centric approach to web design
… meaning you're not creating the best UX, but the best UX for each one of the devices that your users will be accessing your website from
by “tailor-made” I do mean “tailor-made advertisements”, perfectly optimized to your relevant user interface and tailored to the user data collected from smart devices
in an adaptive vs responsive design debate, the first one will always win when it comes to performance: sites using an adaptive design are just faster
… and speed will always be a differentiating factor in Google's eyes
coding an adaptive design is more time-efficient
implementing it is more cost-effective
managing it tends to be easier since you only need to consider few states
testing it is much easier (with more accurate results, as well)
And now, are you ready for a list of drawbacks to balance adaptive design's advantages with? Just so you can gain a more objective understanding, evaluating all the pros and cons in full:
it usually requires more work, and therefore it's used mostly for overhauling existing websites, rather than with new websites (considering that “more work” stands for “more time-consuming”)
the site configuration being either desktop or smartphone-focused, tablets and notebooks users are... left in the middle
it impacts your SEO strategy, since search engines will detect and penalize identical content showing up on different websites (“.com” and “m.com” sites)
5. Adaptive vs Responsive Design: Key Differences to Take Away
The most notable differences for you to keep in mind from this comparative analysis of the 2 popular options at hand are the following:
a responsive design is a consistent one: what you get on desktop, you get on a smaller screen size, as well
a responsive design might turn out to be easier to maintain on the long run: with every new screen size emerging, it will adapt to it, by default
… by comparison, with an adaptive design you'll need to create a brand new layout for every new possible device, with a specific screen width, that might get released
on a long-term, we could say that maintaining a site using adaptive design gets more challenging: it's several fixed layouts that you'll need to manage (instead of just one)
the adaptive screen size (you'll be using static breakpoint for building adaptive design) is less flexible than the responsive screen design: you'll need to design (from scratch) for every display that you target
The END! Are all these strengths and limitations of the two popular approaches to modern web design of any help to you? For solving your “adaptive vs responsive design” dilemma?
Silviu Serdaru / Apr 13'2018
It's no longer a matter of “Why?”, but a matter of “How?”. The conversational interface trend isn't going anywhere but... UP.
So, if you want to keep up with the break-neck pace at which your competitors will be launching their own chat-based apps this year, you first need to:
put an end to your “to go or to go conversational?” dilemma. You only have one option...
Then, to start focusing on more pressing issues:
what are the user experience challenges to expect when designing conversational user interfaces (CUIs)?
what are the best practices to adopt for creating state of art conversational experiences?
how do you design a... conversation, after all? One that's natural, seamless, quick and ideally convenient for the user?
And once you've pondered on these 3 questions, go ahead and turn the following “enlightening” answers into your trump cards for designing your own rival to Siri, Alexa and or OK Google.
1. Put Together An Exhaustive List of Hypothetical Use Cases
In other words: leave no dead ends in your chat-based app's script. No weak links that could impact your conversation's fluidity.
And how do you get “unpredictability” down to zero? By getting knee-deep in user research work.
Invest plenty of time and teamwork in identifying all the possible use cases that your chatbot's scrip should cover... impeccably!
How will users react to hypothetical scenario A? And what queries is he/she likely to input in scenario B? What “tricky” request will he/she make?
Once you have THE list at hand, filling in your script with copy will sure feel just like putting the puzzle pieces together.
2. The Onboarding Experience: Be Sure to Give It Special Attention
The more straightforward your chatbot's onboarding message is, the more chances there are for the user to interact with your conversational interface.
In other words: take no chances, don't try to play smart, resist the temptation to turn your app into a “guessing game”!
Let the user know which are your bot's functionality and key features and how precisely it may serve him/her via:
a speech bubble
an intro message
a suggestive animation
… from the very beginning.
3. Focus on User Convenience When Designing Your Conversational Interface
And convenience in conversational UX translates into minimal user input!
Now here are 2 best practices to consider for achieving the proper level of user convenience:
keep your copy crystal-clear and straight to the point: avoid ambiguity at all costs, like giving more than one answer to the same question or answers completely out-of-the-conversational-context, irrelevant to the user's intent
keep the user's input to a minimum: the less your customer will need to type in/interact with your chatbot, the better; aim for “yes/no “questions and avoid overburdening them with too many choices to scan through and to select from
Extra tip: make your content ideally easy to squeeze through; keep your sentences conveniently short, thus anticipating that the user might head straight to the call to action.
Why should you discourage him/her with an almost impenetrable block of text to keep on scrolling through?
4. Set Up Visual Cues-Based Replies to Your Users' Queries
How would you improve readability in “conventional”/non-conversational design? You'd instantly reach out to your not-so-secret trump card — the whitespace — right?
Well, in case of a conversational design, your trump cards are the visual cues.
Here are 2 examples of how/when you can use them for boosting readability and turning your conversational interface into a truly intuitive AI experience:
Use them to assist your customers when in need; for conveying bite-sized information and addressing your users' queries in a highly intuitive way. Maps, charts, infographics images, GIFs will be far easier to “digest” than chunks of text and far more efficient for relaying the message
Use them to convey... emotions: whenever words are not enough to convey the feelings you need to convey (e.g. giving them a warm welcome into the app), go with... visual cues; and emoji make the handiest of them all
5. Empathy Is Key to Designing a Human-Like Chatbot
A natural conversational interface experience is a human-like one. And a “humanized” AI app is one that easily passes the empathy test.
Now here are 2 suggestions on how to “inject” empathy into your chatbot:
Read the script out loud: how does it sound? Would you say those lines to someone close to you? Do they sound natural enough? Or rather robot-like? Is the conversation fluid enough?
Pay attention to context and adapt your script accordingly. Now you wouldn't want your app to give a robotic-like, impersonal reply such as “I hate to hear that” to a user writing: “I feel a bit dizzy”. It goes without saying that you should anticipate all use cases and user queries and have all the context-suitable replies ready (popping up a map showing the nearby hospitals in this case, for instance)
6. Embrace the “Less Typing on the User's Side” Principle
For the less they'll need to type, the more fluid the whole conversational UX is going to be.
And, in this case, by far the most popular example to inspire you is Linkedin messager's automated replies. See how it provides users with plenty of choices, right at hand (multiple buttons, “attach a file” option, automated replies etc.)?
In other words: whenever suitable, automate... everything and aim for user convenience at its best!
These are the “tips and tricks” that you may want to consider if you're determined to create a highly intuitive conversational interface experience for your chatbot's users. Ponder on them and see how you can adapt them to your own app's and use cases' scenario.
Adriana Cacoveanu / Jan 16'2018
Did you see this coming? 2016 was, undoubtedly, the year when chatbots ruled over the digital landscape. When all the “players” in the arena rushed to jump on this mega-trend and to ride the tide.
And then some of the voice interface's limitations have started to come out.
It's in this very context that the conversational form interface (not yet a mega-) trend has started to “steal away some of the spotlights”! It's then that designers with a vision decided to dig deep into the "old trunk" with out-of-fashion web interfaces and take out the “dusty” old web form!
Yet, they weren't that naive to think that users would just move away from cool chat-based interfaces to... filling out clunky, long web forms. They definitely had to give web forms a modern touch to ensure user engagement.
And so, they made them... conversational!
This is how this “experimental” approach, the hybrid conversational form interface, was “born”! It's designed to improve user experience where conversational interfaces start to show their “weaknesses”. And it's designed to drift away from the classy, unanimously hated web forms.
Now, let us highlight for you here both:
the most “irksome” limitations that voice interfaces have started to show
how precisely the conversational form UI succeeds to deliver a better user experience where chatbots fail
The Biggest Inconveniences of Using a Purely Conversational UI
“... for both users, development teams and site/app owners.”
It looks like chat-based conversational UIs have slightly loosened the “spell” that they had cast on users.
Customers have gradually started to grow frustrated (and this is due mostly to their (too) high expectations in chatbots) when they realized that:
they have to (there's no other way) go through each and every single sentence that the bot asks, which leads to more tapping (and friction) than they would have expected
they can't just skip some of the questions in case they don't feel comfortable giving away certain sensitive information
they experience the whole information-collecting process as being mandatory, as if they're being “constrained” to divulge that data
On the other hand, compared to a conversational form interface, a purely conversational interface isn't any more convenient on designers'/developers' and their clients' side either:
dealing with the validation of some "tricky" answers isn't precisely a breeze (like when someone enters an invalid phone number, for instance)
in order to prevent all kinds of “dumb bot” experiences, the bot has to be perfectly “trained” to parse users' answers correctly (even when faced with situations where users give “I'm a butterfly collector” type of answers to a “What's your job title?” question)
it's no easy task for the app's/website's owner to actually set up the chatbot; they need to carefully plan ahead how the questions will be phrased, the used tone and voice etc.
How Exactly Does a Conversational Form Interface Increase User Engagement?
Now that we've “exposed” to you the voice interfaces' limitations, it's only logical that we present to you a solution to these issues, right?
Introducing web forms turned into conversations? Or conversational forms, if you prefer!
What started as an experiment now stands all the chances to perfectly fit all those scenarios when companies can't afford to just blindly jump on the latest UI trend! And where they need to go for a hybrid type of approach instead: conversational UI & web forms.
Here's what these “experiments” revealed:
users feel more comfortable knowing that they DO have the option to simply ignore filling in these conversational forms if they want to
since users interact with these forms only within conversations, practically these web forms aren't intrusive, like the old web forms used to be, when they would overlay on top of the open text fields; it doesn't feel like a disruption of the user's flow anymore
the same users tend to provide the required information much quicker than they do when faced with a conversational UI (they're already familiarized with web forms and they do not experience that “awkward” feeling that someone's “asking” them to give away information).
it calls for minimal bot interaction since users get to control, right within the form, whether they've correctly filled in the required fields or not (once they chose a wrong format, they can just correct it themselves)
In short:
it's not just the old “dreaded” type of web forms that users choose to fill in
they're actually delivered within the conversational UI itself
implicitly, it's not an exclusively voice-based conversation that we're dealing with
... but with a CI incorporating one or multiple web forms
Bottom Line
“If it doesn't fit, just don't jump on the latest design trend!” As simple as that.
Conversational UI doesn't have to be “purely” conversational after all! It could also mean voice-based conversation AND interactive elements such as buttons, cards or forms.
If you anticipate that this type of chat-based conversational UI:
won't get you too far with your information-collecting
will just manage to irritate your customers
… you can always take a step back from what's currently “hype” and experiment another type of UI instead. Maybe this hybrid conversational form interface will best fit your needs and your customers' expectations.
Maybe you'll be surprised to discover that it's those “oldies but goldies”, “dusty” designs that help:
your users carry out the given tasks faster and with minimal friction
you to collect that concise, basic information or data that you need for tailoring your offers/products to your questioned customers' own needs and preferences
What's your opinion on this hybrid approach to UI design?
Adrian Ababei / Oct 25'2017
“Riding the waves or caught in the tide?” Do you simply comply with whatever is hot in digital product graphic design at the moment or do you dare to go beyond just following the trend of designing a conversational interface and turn it into an experience instead?
A natural, authentic, “human-like” one!
If you've chosen the first option, then you can remorselessly go back to doing what you were doing and spare the time you would invest in reading this post.
But if you're determined to go beyond the very basics of conversational UI design and to strive and “humanize” the experiences that you deliver, then you'll find the “UX toolkit” that we've “wrapped up” for you here more than helpful!
Basically, it contains all the core principles for designing a conversational interface that's closest to a human-like conversational experience.
Let's dig in:
First Things First: What Is a Conversational Interface?
When you say “conversational interface” you instantly say Siri or virtual assistant M!
And it's precisely these 2 examples that “authorize” us to divide them into:
chatbots (besides Siri, think of H&M's chatbot for instance!)
virtual assistants (Amazon's, Alexa's virtual assistant, etc.)
What these conversational UIs do is practically mimicking human chatting!
And it's the verb itself, “to chat”, that “warns” you that there's a shift of focus (as compared to the graphical user interface) from visuals to words themselves. With this in mind, you'll implicitly need to revise your set of core UX design rules that you would have normally designed your GUI interface by!
But What Turned Conversational UI Into Such a Phenomenon?
That conversational interfaces have become ubiquitous is no news for anyone.
But what are the factors that keep influencing its ascension in the digital world? Let us point out the 2 most impactful ones:
natural language processing technologies
artificial intelligence: is rapidly improving its capabilities to accurately “grasp” intentions interpreting the user's uttered words
last but definitely not least: our human nature itself; chatting is carved in our very DNA as social beings
In short:
recognizing the user's uttered input is no longer a challenge for nowadays technologies
as users (and “chatting human beings) we're instinctively drawn to this “new” type of interaction with technology
The Challenge You're Facing From a Conversational UX Standpoint
For there is, indeed, a challenge that you need to respond to once you go ahead and start designing your (first) conversational interface: adding the authentic human touch to your bot!
That's right! Since accurately interpreting the user's spoken input is no longer a challenge, “humanizing” the conversational experience that you deliver via your interface is a serious challenge!
How do you craft conversations that sound natural and authentic, that are both helpful and... delightful? This is the question!
And now let's dig deeper into our list of UX design principles to apply for successfully responding precisely to the aforementioned challenge: creating human-like conversations!
1. Create a Consistent Persona
How could you possibly “humanize” your conversations with no information (or with just vague info) precisely on those “humans” that your bot will be chatting with?
This being said: defining a persona is the very first step to take, way before you even start to design a “draft” of your future conversational UI!
Draw your target user's “portrait” by determining and then writing down its personality traits. It's these traits that will let your team know how to approach him/her. What conversational scenarios to put together. What vocabulary to start setting up and so on.
And did we mention “consistent persona”! By “consistent” we meant that once you have your user's backstory and personality traits established, your conversational UI needs to remain consistent in the tone, words, and phrases that it will use.
You don't want a banking app to start with a formal tone and then “spice it up” with one or two slang words, now do you?
2. Create and Maintain a Natural Conversation Flow
Conversations between your users and your chatbot/virtual assistant should simply... flow fluidly, naturally!
This means that at no time should your user feel like he/she's putting some sort of effort to overcome obstacles for establishing good communication with your system.
And here are some UX “hints” for keeping that conversation flowing:
2.1. Promptly Guide Your Users With Hints
… don't wait till they get too confused and clueless about how they're supposed to start the conversation with your chatbot or about how precisely this one can help them!
How? By simply providing them guiding hints!
For instance, your chatbot/voice assistant can initiate the conversation itself via a short introduction and a clear call to action button!
2.2. Set Up Your System's Purpose
What should your voice assistant/chatbot do? What user problem should it solve, promptly and effectively (with at least input/effort from your users as possible)?
Make sure you define one clear purpose that your chatbot should serve!
Make it:
unique (no need to go for a multi-purpose, too-hard-to-handle type of system)
make it clear (for your team)
2.3. Strategically “Sprinkle” Some Well-Timed Earcons
And we feel like stressing out the word “strategically”!
For it's only the proper, well-thought usage of earcons (well-timed earcons) that will help you liven up your conversations!
When triggered precisely at key stages of the conversation these audio sound effects (applause, musical feedback, beeps) will come to break an otherwise monotonous tone of the conversation. To infuse some personality!
It's also a sign for users (take Siri's “Ding!Ding” earcon) that it's their turn to ask questions, that the app is then “listening” to them.
2.4. Keep Away from Open-Ended Questions!
“And from the rhetorical ones, too!”
Once you've given your users the chance to choose from a multitude of possible answers to the questions asked by your chatbot... you'll “lose” them!
And it's the same case with rhetorical questions, too, since users tend to respond to them anyway and confuse your system.
In other words: stick to close-ended questions, giving your users no possibility to confuse your system with a “surprise” answer, one that you haven't pre-set in its conversational scenarios!
3. Keep The Conversation Natural and Authentic
Modeling the conversation to an authentic, real-life human one should be your main objective once you start designing your conversational interface!
And here are some universal principles of UX design to follow for achieving this level of “authenticity”:
3.1. Humanize It
Go beyond the “robot-like” chatbot and aim for a human-like one!
And you'll only get to this level of “humanization” if you properly leverage those persona traits and back-story that you will have established!
Don't be afraid to throw in a slang word or two (if your target audience's profile and your own app's nature permit), to go informal and to use that specific tone and vocabulary that your target users would use in their day-to-day life.
Familiarity is key here!
If you manage to make your chatbot talk like a member of that specific community, then you will have won them over, you will have convinced your users to go on and keep engaging in conversation with your system!
3.2. Keep It Concise and To the Point
Since mimicking natural, real-life chatting sure means sticking to short phrases. For that's how we communicate, in brief, succinct phrases, and your system should stick to this pattern of the conversational speech.
And speaking of concision in real-life conversations, here are 2 “paths” that your conversational UI should stick to:
avoid asking multiple questions at once
request information from your users one by one
Note: It's true though that utterly concise and straightforward “yes” and “no” answers tend to make a conversation sound a bit mechanical. This is why our Toronto web development team's advice to you is to masterfully alternate phrases/answers of different lengths and to rely on turn-taking, too. This way, even if the answers are just the simple “yes” or “no” type, the conversation becomes far more engaging, less robot-like.
4. Let Your Users Be in Control
Make them feel that they're in control at all time! During the entire conversational experience!
Now here are some user experience design tips and tricks to apply for placing total control into your users' hands:
4.1. Enable Them to Start All Over Again
It's crucial that you provide this possibility! Your users should be able to reset the conversations that they'll engage it. At any time!
4.2. Provide Helpful Guidance and Assistance
Whenever your customer/user feels lost and confused make sure to prompt in some help messages and to suggest him several options to choose from!
4.3. Provide "Undo" and "Cancel" Functionalities
And this is a key UX principle to apply, both in case of a graphical user interface and of a conversational one!
Allow them to change their minds and don't turn wrongly inputted data into an “irreversible mistake”!
Remember to integrate those two crucial functionalities into your conversational interface and thus enhance your customers' experience!
4.4. ASK Them to Confirm, Don't Just State
And following this “rule” is critically important when you're dealing with sensitive user inputs (credit card details for instance).
Each time you need them to confirm an option that they will have selected or an action that they will have asked the system to carry out for them, it's always best to “ask” for their confirmation. To “double-check” with them, instead of just stating the action that's being performed on their behalf.
Needless to add than by asking them to confirm you're making them feel in control of the app!
5. Boost Their Confidence
Reinforcing users' perceived self-efficacy goes hand in hand with restoring their confidence. And with smoothing their experience with your chatbot or voice assistance, too, of course!
Let them know that your system has understood their questions and requests! That your chatbot has validated and confirmed the data provided.
So, “sprinkling” some “Got it”, “OK” and “Sure” acknowledgers throughout the conversation will just keep your users going, keep them listening to your bot and willing to chat with your system.
Note: for a more natural conversational experience randomize your acknowledgers! It will make the conversation sound less monotonous and more fluid!
And our list of 5 universal principles for user experience design to apply when you design your conversational interface ends here! Have we missed any key “rule(s)” to be followed for “humanizing” chatbots/voice assistants?
Adrian Ababei / Jul 12'2017
It's no doubt that these web design myths “controlling”, just like some “tyrants” the online world, have initially emerged as web design innovative notions, turned into widely used techniques, and, finally, into highly influencing web design trends.
It's also true that since their “adopters” have started to take them way too literally or to refuse to adapt them to the ever-evolving digital landscape, to the ever-changing users' digital behaviors, these web design practices have gradually turned into... myths. Into rigid, “dusty” web design mindsets risking to affect both the design's quality itself and the website visitors' experiences.
Be better than that! Be smarter than that! Take smarter design decisions than those still “stuck” with these preconceived assumptions which are no longer relevant in 2017's web design context.
And here are the 10 web design myths “exposed”:
1. "The 3 Second Rule"
This is probably the best exemplification of a notion turned into a rigid “rule”. Of a concept taken ridiculously literally!
No need to develop a paranoia imagining your generic website visitor holding a timer in one hand and his mouse (if we're talking about a desktop user) in the other and counting precisely those 3 seconds! It's absurd!
The 3 second rule is just a figure of speech (it could easily be a 2 second a 4 or 5 second rule) “invented” only to stress the importance of an optimized page loading time. To “warn” you that you should constantly strive to boost your website's performance.
If your web pages load in, let's say, 4 seconds, it's really not the end of the world!
Instead, if they load in 3 seconds just to show a bad design and low quality content... then you might be, indeed, facing a major traffic problem!
2. "White Space Is a Wasted Chance of Capitalizing Space on My Site"
This is already a “prehistoric” type of web design preconception!
And we couldn't give you better examples than Google's front page and Apple's clean and airy design where big chunks of white space act as spotlights directing our eyes towards their “star” products!
“Clutter” is your biggest enemy when it comes to web design! While white space and moreover, strategically using it for guiding your users' attention towards key points on your website, well, this is almost an “art”!
Less sure is more, in this case! White space acts as a spotlight focused on the key content(s) on your web pages, but only if you just know just how to focus it!
3. "Mobile Device Users Are Always On the Fly and Easily Distracted"
It's a false assumption now “cemented” in the collective thinking: mobile device users are always on the go, always in a rush and easily distracted!
It's noting but an exaggerated generalization!
In fact, studies (Google's studies, the one that we're referring to here taken in 2012) have shown that:
68% of mobile device users are, in fact, accessing websites from their smartphones in the comfort of their homes (surprise, surprise!)
67% of desktop users are simultaneously using another device, as well, as compared to 57% of mobile device users.
We're all living in the age of distractions. We get constantly distracted whether we're just watching TV, doing online shopping on our smartphones or reading articles on our PCs!
You should still design for highly mobile users, but being fully aware that “on the run”, “striving to resist various distractions”, is not the main context that your mobile device users will be visiting your website in!
4. "Good Usability's a Must, While Good Aesthetics an Option"
This thinking's maybe one of the riskiest user experience pitfalls!
With all the web designers and web owners out there playing all their cards on good usability, they tend to undermine good aesthetics' key role or (even worse) to ignore it completely.
You can't effectively reach out to your users and turn them into customers, if you don't emotionally connect with them, first. If you don't strive to make the very best impression (and since we're all highly visual creatures, a “good first impression” is nothing but another word for “great looks”).
Usability's a very technical concept, made of certain (equally) technical, precise tactics to implement for achieving good usability on your website. While aesthetics is far more “human” and it's to humans that you need to reach out to first and only then to... “prospects”. Do keep that in mind!
When combined, these two “powers”, good usability and good aesthetics, or, better said, good usability and credibility (that good aesthetics invests your Drupal website with) you can't get but a superpower to turbocharge your website with!
5. "User Feedback Is Not to Be Questioned or Debated"
Of course that you should constantly ask for your users' feedback, it's vital for every business, be it online or not!
What you should avoid doing is: taking that feedback, all the comments that your visitors will leave on your site, too literally!
People don't always know what they want and they're quite bad at explaining their preferences, why is it that they like/dislike certain features on your website or anticipating their future choices/behaviors.
A “healthy” way of doing web design is to dig in, starting from your users' comments, to the core problems! Base your design decisions on those core problems to be solved, first and foremost! Complying with your users' suggestions/complains, should come second on your list of “motivations”.
6. "Simplicity Can Only Mean Minimalism"- One of the Popular Web Design Myths
And this web design myth is still influencing, to a great extent, web designers' work and website owners' design decision-making!
There's this popular belief turned into a whole trend, that you can't possibly achieve a simple design than by cutting out UI elements, by drastically reducing steps and user interactions on your website.
False! Even a complex web design can be made simple if you're a gifted web designer!
Focusing on simplifying users' experiences and reducing the visual surface (minimalism) is not the same thing as reducing all the “friction” that a way to laborious, overly demanding design would imply from the user's point of view (simplicity).
Its not the same thing as striving to reduce some of the energy that he/she would invest in visually “digesting” the content on your website.
Notice the difference?
7. "Good Design is Self-Sufficient"
“Design in the absence of content is not design, it’s decoration.”
Therefore, looks aren't everything and good design isn't self-sufficient! Visually-arresting graphics, cool fonts and visually-appealing colors won't compensate for the absence of high quality content.
In other words: if there's no happy “marriage” between web designers and content marketers, you'll be left with a great looking website that only you and your team will get to admire. For no user will ever find it!
If you don't enhance your great looking design with meaningful, engaging content that not only that completes it, but adds extra value to it, with content that addresses your visitors' needs, then your design won't go beyond its decorative function.
8. "The Homepage Is The Most Important Page on My Site"
Homepage's “supremacy” has started to fade away! If it used to be the page that users always landed on first, since it served as the main directory and, therefore, since there was no other way for accessing a website, today this is no longer the case.
And it's time that you, too, started to see the homepage's supremacy as a web design myth!
Now users can land directly on a product page, coming from certain links posted on social media or on other sites. Your website's visitors might not even get to visit the front page at all.
Moreover, and this is especially the case with websites selling products or services, you should accept the fact that your users aren't there for delighting themselves with the “wow” content on your homepage! For them your front page is nothing but a “gateway” to the product pages that they're really interested in. Or, depending on the site's specificity, to the information they can find on other pages of your Drupal site..
Think of Facebook! How often do you visit its homepage as a logged in user?
Put together, all the web pages on your site are much more frequented than your homepage. Just think about that!
9. "The Three Click/Two Tap Rule"
This is another baseless assumption! That all the elements on your website should be at a three-click's distance or a a two-tap's distance (on mobile devices).
Irrelevant! Whether your users decide to prolong their visits on your site or to leave it after just a few seconds, has nothing to do with this rule. User's main interest is to carry out his task (purchasing something, getting a key info etc.)
You could abide by the three click rule and still witness visitors leaving your website in a rush if the content that they'll you'll deliver them, after precisely these three clicks/two taps, doesn't engage them or meet their needs.
As a general rule: it's precisely when web design rules are taken too literally that they risk to turn into web design myths!
10. "Cutting Out The Navigational Choices"- One of the Influential Web Design Myths
Somehow this theory initially related strictly to short term memory and to multiple product choices, has started to impact web design, particularly navigation, as well!
It's one thing to cut out items from an excessive product/services collection (leading to the paradox of choice) and a completely different thing to start removing pages from your navigational bar/menus.
It's those pages that grant your user easy access to the content on your site that he's interested in. It's them that will enhance his/her exploration of your website!
So, instead of blocking his/her access to different web pages on your Drupal site and of negatively impacting his overall experience with your website, you'd better figure out how to efficiently group these pages.
And it seems that we've reached the end of our list of 10 web design myths you should be aware of and... stay away from! Have you “busted” others, as well?
Adrian Ababei / Mar 22'2017
Mobile rules the day or better said: mobile has been ruling the whole year of 2016 and is here to stay, to constantly evolve and to dominate the digital landscape in 2017, too!
It will continue to redefine the way users perform different actions online and it will definitely continue to reshape the way companies conduct their businesses online.
Implicitly, it has started to redefine the way online marketers are crafting their landing pages, too.
How are you adapting to “the new way” of designing landing pages? Have you gone beyond the “simply stacking content at mobile size” mentality? Have you started to approach content differently when you build your mobile landing pages?
To cut out the lengthy content? To reconsider the placement of your conversion elements, due to the limited amount of space at your disposal?
As you ponder upon the above questions and reexamine your previous mobile landing pages, scan through these 5 strategies bellow, strategies that we, ourselves, are using here, at our web development company in Toronto, strategies aimed at helping you convert your users on mobile:
1. Think Through Your Mobile Content
Content is (the almighty) king on mobile, too! Just make sure you don't “push it off” its throne by approaching it the wrong way.
Which is this “wrong approach” you say?
Not adapting your mobile content to your own specific area of activity and, therefore, to your specific target audience's expectations, as well!
Instead of “jumping on whatever's the most popular trend right now” when it comes to content's ideal length on mobile devices (some will say you should go for a 500-word, others for a 1000-word piece of content for your landing page), you should run some A/B test yourselves.
But that only after you've drawn some pretty logical conclusions from analyzing your area of activity and studying your target audience, too:
Let's assume you run a plumbing company; well, then, my friend, you can't expect a user accessing your landing page (going through a pipeline leak “crisis”) to be willing to read a lengthy piece of content detailing various types of pipelines (let's say), before he/she will have scrolled down like a madman for finding your contact details. It's common sense deduction don't you think?
Let's assume that you run a luxury goods company; considering your items' high prices, you should expect your potential customers to want to read detailed product descriptions, including all the details they need for making their final decision. You should expect them to want pictures, lots of pictures, which will help them visualize those expensive items from various angles, to read all about the lifetime guarantee that you provide and so on.
In one word: you can't just play by “what's most likely to happen” and you definitely can't risk guessing, either.
Just keep in mind the type of products/services that you're selling through your landing page!
Takeaways:
A common sense rule is to place your conversion elements and important content as high as possible on the page, but not to be afraid to continue to deliver quality content and more information about your business bellow the “fold” at the bottom of your users' screens
It's perfectly true that more often than not mobile users would stop with their scrolling (and reading) to he bottom of their screen
But! There are also surveys revealing that if websites feature a user-friendly interfaces and engaging content (such as video content) they're more likely to keep scrolling down
Shorten your paragraphs, more frequent paragraph break will help your mobile (potential) shoppers to easily “digest” your content. Remember that a paragraph of reasonable length on desktop will look awfully “crowded” when compressed for the mobile screens! Therefore: ease your reader's job and break your content into breaf paragraphs!
2. Consider and Prevent User Experience Barriers
As we've already relentlessly pointed out here, on our blog: user experience is and will be the main “generator” of online initiatives, strategies and plans impacting your business. You simply can't afford underestimating it!
How does the user experience factor shape your mobile landing page designing efforts?
Easily! It will challenge you to foresee that whole journeys that your users will take once they visit your landing page. It will also challenge you to to review it, beforehand, on multiple mobile devices and by asking the opinion of several users.
Now speaking of the user experience barriers that you should avoid, here are a examples:
1. Illegible Text on Mobile Devices
Don't just transition your text from desktop to mobile and consider your job done!
Make sure your text, once shrunk to mobile size, still looks legible. Is the font too small? How about the background color? Does it impair legibility or not?
Tip: your goal shouldn't be to keep your user “captive” on your mobile landing page, but to direct him/her on your primary Drupal website instead. Therefore, remember to make your logo visible and to provide footer links back to your site.
2. The Temptation of Using Interstitial Forms
No matter how tempting it might look to you to use such conversion tactics, resist it!
The result is sure to be a high number of users who'll instantly bounce off your landing page instead of that luring no. of converted users that you might have in mind!
Note: if on the desktop variant of your website it might be easier for your users to click the “X” for closing your newsletter sign up form, just imagine how frustrating this action gets on mobile. Your users might just assume that you will have specifically made it impossible for them to close your form and you can just guess how this will affect your conversion rate, right?
3. Faulty Responsive Design
Take your time (it will be well invested time) to think through how you'll stack all the elements of your landing page at a mobile size!
By doing so you'll avoid risks such as: users having to scroll down excessively in order to reach your “Contact” button or your form.
This will also allow you to apply the right layout adjustments for placing your contact form higher on the mobile-size page or for opting for a “Contact” button that remains visible on the page as the user scrolls down.
3. Don't Lose Sight of Your Goal: Conversions
It's not (just) for presenting your products/services, for “wowing” users or for “showing off” your design skills that you're building your mobile landing page! But for converting your users!
That's your main goal and you should steer all your efforts towards reaching it!
How do you do that “constrained” by the limited pace you have on a mobile devices' screen?
Here are a few tips:
you keep in mind to place and to make visible a click-to-call button; remember that it's from their mobile devices that your users access your landing page and, therefore, they're far more likely to place a call for service than desktop users
you keep in mind to place both a “Contact” button and a prominent contact form on your mobile landing page
you keep in mind that your form's fields might get awfully shrunk and thus impossible to be tapped on when transitioned from desktop to mobile. Make sure to fix this issue!
4. Make Sure That It Loads “Instantly”
Remember that it's mobile users that you're reaching out to! They don't expect your landing page to load (just) quickly, but instantly!
Gather your team of web development experts and run some speed tests and then figure out how you could optimize your mobile landing page for a better performance!
You simply can't afford to underestimate this aspect!
5. Properly Test It Before Launching It
Without proper testing all your (mobile) landing page building efforts risk to be nothing but a waste of resources!
How do you run “proper” tests on your landing page? Here are some good practices for testing your landing page performance before launching it:
You “recruit” your testers from both the Android and iOS users' communities; make sure to pick users owing different types of mobile devices for getting them to test your landing page
You run A/B tests (you could use tools such as Google Analytics, Optimizely, Content Experiments) to find out which is the most efficient way of placing elements on your landing page
You install a heatmapping tool (we recommend either Hotjar or Crazy Egg) to discover how far into the content your users would scroll down and what elements on your landing page they're more likely to engage with
And here is how you do it! Here is how you put together not just visually-pleasing, but also efficient mobile landing pages.
What other strategies have you been successfully implementing for converting your mobile users?
Adrian Ababei / Jan 06'2017