Will you be a superhero or a villain? What are you going to do with all those superpowers that UX invests you with?
Will you be a superhero willing to build trust and to nourish long term relationships with his/her users or a manipulative villain driven by his urge to get his numbers up at all costs?
UX invests you with so much power! It practically reveals to you all the valuable cognitive psychological biases, all the mechanisms to use for triggering certain emotions in your customers (pride, greed, anger, envy etc.) and for manipulating them to act in certain ways.
It's this power that can either help you gain success or ruin you (you sooner or letter)!
A solid understanding of user psychology, when used the right way, will help you "perfect" your visitor's journey on your website. It gives you the ideal resources for making this journey as logical, intuitive, pleasant and meaningful as possible. Good UX leads to happy customers first, then to loyal customers!
A solid understanding of user psychology, when used the “bad” way will help you deceive your visitors, through certain tricks applied to your interface. It will help you influence them to carry out certain actions that are beneficial exclusively for your business: purchasing, subscribing, installing your software on their devices, revealing the details of their credit cards etc.
In this respect, here are some of the most “popular” manipulative design practices that have taken over the internet (being widely used even by some of the most influential brands, too) and that we advise you to stay away from (“Better safe than sorry!”):
1. The Disguised Ads
You click on what looks like “genuine” copy and "Boom!": a commercial pops up on your screen or (and this is the really bad scenario) a software starts to download on your device!
Does this sound familiar to you? Have you been there already? Have you visited that website since the “incident”?
Well, if you've already been a “victim” yourself, then you (should) have even more reasons to empathize with your own customers: don't use disguised ads on your website! It will only grant you (really) short term gains, but you'll lose a potentially loyal customer (which is gold) and credibility.
2. The Roach Motel
Here is another tricky web design practice that's widely used by web/apps owners, accepted and “perceived” as “an innocent little scam” (pick a web developer at random and he/she will deny that the "roach motel" might be considered as a “truly” deceiving practice). When it fact it's nothing but a skillfully crafted means to trick and to retain users.
You convince them to subscribe to your newsletter or to sign up for your your software free trial, then you turn the whole process of unsubscribing into a discouraging “ordeal”.
By deceiving your users and hiding away from them the information on how they can close their accounts, you will get them hooked on your product for a long, long, long time!
Step into the light! Use your UX superpowers the right way:
inform your users, from the very beginning, that they'll actually need to call you or to write to you if they decide to unsubscribe
make your unsubscribing method(s) visible on your website
Turn UX into a force for good!
3. The Forced Continuity
This UX design practice is so ingrained into the digital world that you might even not perceive it as “dark”, but simply as “common”.
How does it work? Picture this scenario: you “lure” your online customers to sign up to your free trial and it's at this point, as well, that you ask them for their credit card details. You're also cunning enough to let them know that they have total control over their accounts, meaning that they get to cancel their memberships any time after the trial period if they're not satisfied with your product (or due to any other reason).
What you (let's assume that it's you who is using this “devilish” UX technique) rely on is that in many cases users forget to unsubscribe after the trial period and that you get to keep charging them, since you have their credit card details.
In those rare cases when they do remember to close their accounts, you'll make it as discouragingly hard for them to do that as possible.
Tricky isn't it? We, at OPTASY, our web design company in Toronto, think it's just “lame” to “glue” customers to your products against their will instead of making them desire your product!
Step into the light and use your UX superpowers the right way:
notify your customers once the end trail ends and give them the possibility to choose whether they cancel or continue to use your product/service
make your cancellation method/policy visible on your website
4. The Sneak Into Basket
Now this is one annoying UX design practice (from the online shopper's perspective), that way too many e-commerce websites continue to use!
How does it work? Let's assume you're the next “victim”: you add an item to your shopping cart and you then realize that the website has automatically added another product or service (such as insurance), that you don't want to purchase. Or at least you would have preferred to be asked if you wanted to purchase it before instead of having it “sneaked into” your basket.
OK, so you might “trick” some clients and increase your gains, but just imagine all the negative publicity that all those frustrated customers will create around your brand!
Not only that you'll lose those specific customers, but by spreading the news about the bad experience they will have had on your site, they'll discourage your potential customers, as well, from ever accessing your site.
5. The Misdirection/ The Bait and Switch
A more than suggestive short description of this deceiving practice would be: changing the patterns that you've set up on your website and that your user will have got accustomed to, without warning him/her!
Therefore, you take him/her by surprise and “trick” him into performing a certain action.
In most cases it's about clicking a link/button which, till then, used to lead to a certain page, with no exception: your visitor will click on it without knowing that he/she has just bitten your “bait”.
Now try to imagine the long-term consequences, especially if you're using this deceiving technique for tricking your customers to spend their money on certain items on your website!
Step into the light! Use your UX superpowers the right way:
make all the options of same size and equally visible
ask for your user's confirmation: give him the choice to either continue or to cancel
6. The Scarcity Inflation
Admit it it! How many times a day does your inbox get “loaded” with newsletters striving to catch your attention and to make you react immediately to expressions such as: “Only 1 hour left till”, “Hurry Up! The sales end today”, “Only a few left!” etc.?
This deceiving pattern, too, is “exploited” to such extent in the highly competitive digital world (where competition for customers is truly fierce), that you may even not even perceive it as “sinister” and manipulative.
But it sure is! Our advice for you is not to go there: don't “exploit” your users' emotional biases towards scarcity and limited availability. Building trust should be one of UX design's most honorable goals!
Unless, of course, you do have limited availability to certain products/services that you promote on your website.
7. The Trick Questions
Resist the temptation to “exploit” users' tendency to (just) scan through the written content on a website and to use deceiving copy for disguising opt-in buttons as opt-out buttons!
Be better than that! Be future-oriented instead of (just) “hunting” only short-term gains!
Put these 7 UX patterns on your “Not To-Do List” and decide to put on your superhero “costume” instead of your villain mask!
Adrian Ababei / Dec 21'2016
Visual hierarchy, especially on an e-commerce website, is a way too powerful “weapon” for you to underestimate it or to ignore it!
When used right it empowers you to steer your visitors' attention on key elements on your website and, moreover it eases their “job” as visitors (possible future shoppers), too. We all need guidance so that's precisely what you'll be offering your visitors: guidance. You'll build “bridges” between different types of content on your website so that they can navigate through, smoothly, without getting disoriented or discouraged by a rigid, monotonous block of content.
By joggling with different sizes, with contrasting colors, with spacing and with overall layout, you determine what gets noticed first and which elements on your website carry more “value”.
Therefore, you discreetly guide your visitors towards “key” components doing them a favor: making their journey time-efficient. They get from point A to point B (your shopping cart page) as quickly and intuitively as they hoped when they landed on your website.
Your make your website “usable”, you upgrade it with “usability”, which is the to foundation stone of user experience.
Enough beating around the bush now: here are 6 “way too powerful for you to ignore” methods that you could use for crafting efficient visual hierarchy on your e -commerce website, 6 techniques that any Toronto web designer should add to his/her own "toolbox":
1. Be Generous With Your Negative Space
Remember that we've “talked about” the white space's importance when we pointed out how the human brain reacts to differently to different colors (in our post on user psychology and web design)? It's there that we mentioned that white space “helps you put together a clean, pure design, one showcasing certain elements of your work“?
Well, well, well! It's time to start perceiving this “empty space, “white space” or “negative space”, however you wish to call it, as a distinctive “element”, one claiming its real importance, and not just as a “absennce of elements”.
Once you've started perceiving it as an element on its own, you should consider it the card up your sleeve that you could use for grabbing your users' attention and for steering it towards elements of high importance on your website.
How? Here are just a few examples:
be generous with spacing between paragraphs and with the margins framing your blocks of text so that your shoppers can perceive your written content as “important” (we talked about “adding value” through visual hierarchy: well this is an example of “how it's done”) and “digest” it more easily
put your call to action button into the spotlight by simply adding more negative space around it. It's that white space that will set it apart from the rest of the elements on your website and make it instantly pop out!
dare “derailing” from the so very “trendy” and overly used web deign practice where you place a large image on your front page to draw attention to and you “suffocate” it by other elements crowded around it. Give this central, visually-arresting image a bit (jut a bit more, no need to exaggerate now) more space, white space, and you'll instantly balance out the whole layout and, moreover: your attention-grabbing central image will grab even more attention now with that “barrier” of negative space framing it!
2. Juggle With Different Sizes
Get playful, get daring, but mind you don' forget that: balance makes it efficient after all!
Therefore, enjoy the power of “manipulating” that size invests you with, make sure you don't “sabotage” yourself!
Neighboring elements of different sizes, where some are a lot bigger than others, will draw attention to the oversized one, that's true, but it might as well cast an unwanted veil of shadow on still quite important sections on your website. And you don't want that!
So, make use of this technique while remaining conscious of its counter-effects, of the importance to keep a certain balance in everything.
When it comes to e-commerce web design, we recommend you to play with sizes on your homepage, on the key imagery and text that you have there!
3. Think Contrast When Choosing Your Color Palette
As we already mentioned in the introductory paragraph: you need to adopt a more refined color contrasting technique than the now rudimentary ones like: “paint it all in red” or “set it against a background in a muted color”.
You need to start thinking through how you actually pair those colors, how you group them on your site.
Go for wining “combos” of red-and-green, yellow-and-purple, orange-and-blue and variations of these combinations of complementary colors.
Think through the selection of your call-to-action and sales announcing elements. Challenge your skills at pulling off the most efficient eye-catching color contrasts: go for a black background and neon colors or simply make sure the elements on your website (images, texts) neighboring thoae key elements that you want to draw your visitors' attention to, are in contrasting colors.
So, you've got our point: bid on color contrast and start viewing the colors on your website as parts of a whole “ecosystem” where each color can outshine/be outshone by or highlight/be highlighted by its neighboring colors.
4. Grab Attention Through The “Static vs In Motion” Effect
It's a scientifically proven fact: our attention gets instantly caught by things/persons in motion. The question that arises now is: how are you going to use this information for determining, in advance, what your shoppers should notice first once on your website?
You have three options for getting the most out of “motion's power”:
you add one or two discreet animations here and there, on key places on your website. And here we need to stress this idea of “discreetness”: your animations should be subtle; it's highly important that you don't go too far. It's quite easy to overdo it, you know, and instead of “cunningly” driving your visitors' attention towards the elements of major importance to you, to annoy them instead, to drive them off your website due to your too flashy, bling-bling animations. Not only that these “overly flashy” animations will annoy your shoppers, but they'll steal even the minimal attention away from the other elements on your website. And you don't want that!
you add an auto-playing video. Again, be very cautious not to go for a too absorbing video that leads to nothing (no subscription, no purchase). One of the best practices in this case it to design pages around your video, that your visitors should be discreetly “tempted” to access.
you go for a photo-video hybrid. They're such a popular trend in e-commerce web design these days! No wonder, for they put together the visual power of an image with the one of a motion, the latter being so discreet and idealy subtle. Therefore, it comes with the advantage of not outshining the neighboring elements. It's a type of motion-implying (visual hierarchy providing) technique which works wonders especially when applied on a visual that's already stealing the spotlight on your website (e.g. the large central image on your front page).
5. Set Up a Scanning Pattern
No need to strive to reinvent the wheel, when you can just as well use it to your own benefit!
This is the case with the ways users usually scan through the content of a website: there are two main human behavior-determined, already tested patterns: no need to invent a third one. All you have to do is pick one or another.
So, which one will it be? The F pattern or the Z pattern? Even the web design forums in Toronto are divided in 2 groups, depending on the scanning pattern they prefer.
Let us detail each one a bit before you can make a decision:
they both start in the upper left of the website (where usually logos are placed), go all the way to the upper-right corner (so this explains why upper page horizontal navigation bars still rock) and it's from there that they go on separate ways
in the F pattern the user's eye returns to the left side of the screen sort of mimicking the left-right-left-right eye movement specific to the act of reading (this is why this pattern is used predominantly on blogs). How is it useful on your e-commerce website? It enables you to nicely structure and display rows of images that shoppers can easily scan through. A “trick” you could use when adopting this pattern is to display secondary promotions on the right side of your website. It's there that the user pauses for a second or two before going back to the left side of the web page. So, “exploit” that short pause, so to say!
the Z pattern is already an “emblematic” one for front pages. Here you have the upper row, then the attention-grabbing image in the center of the page, presenting the site's man features or showcasing its products/services, then the bottom row. It's an ideal pattern for pages centered around one single action: such as landing pages or one page presentation websites, but it can be effectively adapted to the specific needs of an e-commerce website.
6. Set Up a Rhythm Only To Break It In The Name of Visual Hierarchy
Crafting a truly effective visual hierarchy is all about mastering the “establishing vs breaking up” patterns technique!
By simply derailing from a repetitive construction on your website you'll instantly draw attention, you'll break up the routine and “make them wonder” while they pause on that disruptive element.
Therefore, dare breaking up the repetition you will have set up in your layout organization, in the whole structure of rows on your website, for drawing attention.
Then, feel free to “exploit” the empty space you will have created there, in that section on your website “different” from the rest, for placing the key element(s) that you want to draw shoppers' attention to.
Maybe “manipulating” is a too strong word, but it describes perfectly the power that a strategically constructed visually hierarchy places in your hands. Give it a try! Pick one of our suggested techniques and see how it works for influencing your users' behaviors on your e-commerce website!
Adrian Ababei / Dec 20'2016
We're back with 5 more (priceless) storytelling design principles for you, as promised in our previous post! 5 other means for crafting an engaging story around your brand/products/services and for telling it on your website as compared to “just” presenting/showing stuff on your site.
And before we break them down, let's recap, very briefly, some main points from Part 1:
your story is already unique, but you need to make it interesting as well
your story should focus on interactivity and it MUST engage
your story should put together a whole experience (an authentic one, one that users can enjoy only on your website
6. Make Them Interact With Your Story
Remember those really good stories from your childhood? And by “good” we mean those that had the power (or maybe it was just the talent of the storyteller himself/herself?) to get you in the story itself. How they managed to stir your imagination to the point that you were the main character yourself, you were in the story, fighting bad guys, rescuing princesses or being a rescued princess yourself?
Well, that's (more or less) the same effect that your visual storytelling should have on your users! The effect that your web design and development efforts should focus on. Your users should be subtly “dragged” in the story and turned into its lead characters.
Besides engagement, interaction in visual storytelling means discreet guidance, too.
Your visitor should feel, as if he's getting deeper into your story while he's navigating on your website; as if he's turning over the pages of a book.
Make sure you insert all the right directional cues, so that your user's journey, from the “once upon a time” on your homepage, all the way through the “intrigue” (your products pages) and up to the last “happily ever after” (your shopping cart page/subscription page) is as fluid as going from one chapter to another.
7. Let Your Mascot Tell It For You
Mascots make some great alternatives to “client testimonials” taking the role of storytellers, to a rather invisible storyteller or to the team itself telling your company's/brand story.
It can be either the storyteller himself or a character within the story and it adds that overdose of personality and uniqueness to your visual storytelling (there can't be two identical mascots, therefore yours is as authentic as the story itself).
So, think it through: what if a mascot personalizes a character within your story? Don't you think it would breath life in your products/items and help the customer relate to your story far more easily?
Homework: try thinking about 3 iconic mascots of worldwide brands and how you'd perceive those companies' products/services if there had been no emblematic mascots in the first place!
8. Let Your Background Image Tell It
From silent “story whisperers”, in the background, to secondary characters, to lead characters, large background images can take any role you'd like them to play in your story.
When used right, background images can instantly get your visitor in the story from the very front page. So, what role would you invest your background image with:
will it be a subtle background image, discreetly setting up the right mood of your story?
will it be strategically blurred in some parts and focused in others, thus conferring a felling of depth to your website's design and steering your users' attention towards certain elements of your story?
will it be clear and meaning-conveying, telling the story all by itself?
9. Go For Parallax Scrolling and Turn Your User Into a Narrator
Here's another great visual storytelling technique that's used more and more frequently in web development and that helps you turn your visitors into your story's narrators.
How does parallax scrolling work and help you create that sense of “authorship” in your users? Easy: you get to show different layers of a design on your website and, depending on your users' scrolling behaviors, these layers respond differently.
Therefore, there you have it: your visitors get that highly engaging feeling that they're actually the ones putting together the story that's being told on your site.
10. Tell It on Social Media
Remember when we mentioned, in Part 1, that visual storytelling is aimed at helping you build your own community, your own loyal audience?
Well, social media platforms are an amazing resource for achieving this particular goal. They are, by nature, far more “personal” and thus you get to create that emotional bond with your visitors far more quickly.
So, rely on social media for telling/sharing your story. “Write” it with brand-related images that are impressive enough to be shared and commented upon, with events and discussions around your products/services.
“Write” it and “tell” just like a traditional storyteller would, by getting the most out of the newest resources of web design.
This is it! This is how our list of 10 design principles that are great for helping you design and tell your visual story looks like. How about yours?
Adrian Ababei / Dec 17'2016
“Any good story should give you a promise that it will lead somewhere that's worth your time” (Andrew Stanton).
This quote is just perfect as a starting point for our discussion on design principles that help you narrate your own unique (engaging and interactive) story on your website!
What does it mean actually?
It means that you need a “good story”, and yours and yours only can be nothing less but 100% authentic (for it's “yours” and no one else's, of course it's unique!) and it's up to you to make it look as fascinating as possible.
Then, you need a “promise”, which in visual storytelling terms it relates to the “emotion” that your web design should stir in your user.
Your company's craftily designed story will add meaning to products/services and will trigger emotions in your users. Without the story that you wrap them up in your products are just, well, products, like any other millions alike.
OK, so you must have a story to tell, anyone has, but how do you incorporate it in web design? How do you tell it to your users (or to your client's users, if you're a web design and development agency who needs to design an engaging story while building the website itself, too) just like a truly gifted storyteller would: keeping his/her audience fully engaged and thus far more likely to receive his/her message?
First, you answer to this 3 major questions:
Who is your audience?
What goals have you set up for your brand?
Which is the message you want to convey?
Next, you'd better write down (and hopefully keep this post-it somewhere close to you) the 3 major components of any engaging visual storytelling:
CONTENT IMPACTFUL IMAGERY INTERACTIVITY
Then, you take a close look at our 10 design principles for incorporating storytelling into your web design:
1. Let the Images Tell Your Story
Face it: people would always “assimilate” images way better than long, text-stuffed content!
Images have the power of triggering those emotions that you want them to way faster than words so, you should reflect on that.
After your seconds of reflection, you should start to carefully pick your images and to put them together in the album that will make the best storyteller for your brand.
It will not just appeal to your users and enchant them, visually, but it will gradually guide them deeper and deeper into your story. It will slowly “pour” your own brand message into their minds.
In short: images will always make far more than “just” a “nice wrap” for your story, they can be the story itself if selected and handled with great craftsmanship.
2. Tell It Through Words, Powerful Words
And by “words”, we do mean“words”, you know, not long, tiresome textual stories (like chapters in a book).
Therefore, think through your choice of words for your call to action button, for your navigation menu, for the central content itself.
Think cohesion, as well, when you choose your words (they should complement and put together the whole “plot”) and see each one as a truly powerful little storyteller (if chosen right).
It's the words that you choose that will create the “voice” that will narrate your story. Therefore, depending on your company's profile, on its message and on your target audience, your “narrator” could be formal or casual, for instance.
Invite your visitors to “delve into” the story that's being told on your website. Invest your words with some of the “once upon a time” introductory phrase's power!
Note: always keep in mind that the “supreme” goal of your “string” of words narrating your brand's story is to engage and to get your visitors to interact with your website. Make your users interact, whether that means clicking on your call to action button, signing up to your newsletter or purchasing a product.
3. Put a Face on Your Storyteller(s)
In other words “breath” some personality and authenticity into your website! Breath some “life” into its design.
It's such a popular trend these days that companies should reveal the team behind their brand message, the people who had been hidden behind the user interface and whose presences the visitor could just “sense”.
In other words: let your team tell your company's story. They're the ones that know it better!
Your future customers will relate far more easily with people than with the products/services that they create/provide. So, add the human factor to your brand's message, making sure it's a human factor with a unique personality (it's “your” story, after all: dare to show off its uniqueness).
4. Instead of “Telling” Your Story, How About “Illustrating” It?
Now that we've just talked about infusing personality into your visual storytelling, we should point out, as well, that illustrations add even more personality to your website than images!
The roles they can take on are far more varied and far more refined. And where do you add that they can be (depending on the artist of your team who created them, of course) a bit more “personal” and therefore more “powerful” than images.
Take a collage of crafted illustrations, for instance! You get to use them for pointing out relationships between different elements of your visual storytelling and you get to use them for presenting sequential steps (e.g. how your “innovative” product should be used).
They're far more dynamic than images, so consider them turning into your storytellers!
5. Tell It Through a Video
Just imagine your visitor: instead of having to go through your written or visual story, he/she'd just lay back on his chair and enjoy watching a video story! Far more convenient, don't you think?
Create a powerful story around your product and tell it in a video. Make it fun and wacky, artsy and visually appealing, educational, or truly impactful, depending on your company's profile.
You decide whether it's you who'll actually narrate it or someone else (one of the most efficient ways still is that where some your happy customers tell your story in that video).
And these are just the first 5 tips and tricks that we've prepared for you (from a series of 10), tips that are part of our own "toolbox", the one we rely on here, at our web design agency in Toronto, so that you can go ahead and get the most out of the true power of visual storytelling on your website.
To be continued, with our other 5 tips in our next post!
Adrian Ababei / Dec 16'2016
Don't you just feel the sweet taste of new possibilities right now?
And still, any new Drupal 8 project comes with its own set of challenges, as well, and choosing a theme, from the very start, is probably one of the greatest ones.
What should it be then?
Should you go for a classic base theme (AdaptiveTheme or Zen, maybe), for a contributed theme instead or maybe you prefer implementing the framework yourself or build your very own theme, from scratch, relying on Drupal core?
Before you make the decision that will have a huge impact on your whole project's structure, take some time to go through this quick “quizz” here and try to give yourself some clear answers:
are you dealing with a multi-site project (meaning that your theme, once chosen and implemented, will be used across all the other websites, too)?
is the person maintaining the theme a HTML guru or a CSS expert?
will this theme be used just on the website itself or for internal apps as well?
what level of front-end performance optimization does it imply?
Classy vs Stable: Which Base Theme Works Best for You?
This might just be the most important choice to take during your Drupal project's life-cycle!
It's your theme that dictates/overrides your CSS, JS and Drupal's markup, you know. Where do you add that your chosen theme can feature a parent-child relationship, where the sub-theme inherits the base theme's templates, JS and CSS.
In short: think through your theme choice for the sake of your project's success and your whole workflow!
“And still, which one to choose: Classy or Stable?”, you might ask yourself.
Here's how you can tell which one suits you (as a Drupal developer, with certain goals in mind and with a certain theming experience) and your particular web project (which comes with its own set of particularities):
are you planning to add classes only where the context demands them? Then Stable's The base theme for you!
do you want lean markup, with very little classes (e.g toolbar and contextual links), giving you the freedom to customize your own markup patterns in your theme, to create only those classes that are required by your project? Stable again, is the “lucky” word, in this case!
do you want to have a set of classes at your disposal, to tweak and use as styling hooks, right from the starting point? Then it "write" Classy all over your Drupal project!
This being said, let's see which are the 5 factors that you should consider before you choose your Drupal 8 base theme:
1. How Much CSS and Markup Updating Does it Require?
How much CSS out-of-the-box does your chosen theme come “equipped” with?
It makes a great difference, you know. Take these two examples for instance:
You decide to build your website on Classy theme, which in Drupal 8 comes with very little core CSS, so you will have to write your own classes and occasionally even to override the templates, depending on what you want your classes to style.
You're building your theme on Zurb Foundation or Boostrap, which come with their own of out-of-the-box classes that all you need to do is apply to your markup. What's important for you to keep in mind, if you incline for this particular work scenario, is that once you have your Drupal site built, there's going to be a lot of template customization to do for adding all those out-of-the-box classes to your site's new components!
2. Has Your Client Expressed Any Preference?
Your client may or may not come with his/ her own preferences when it comes to the theme that you and your team should to build his website on.
Be sure to have one aspect settled with your client, during your before-the-project meetings: are you supposed to maintain the theme that you two will decide upon on the starting point or is there a chance that this should be replaced with a new one, as the project unfolds? It's essential that you discuss this aspect with your client, for it's important for both of you to consider the learning curve (and implicitly the extra time) of each new theme.
In case your client has no specific preferences regarding the theme to be used for his site, your own theming experience and your development process preferences will be the only factors that will influence your theme choice!
3. Consider the Design
It's no news for any developer, no matter his/her level of experience, that Drupal is tremendously flexible! When it comes to theming, it allows you to build practically anything you want: ranging from a large web app, to great customer-facing websites in the latest design and functionality trends!
Depending on what exactly you need to design in Drupal, you get to choose among several platforms:
Ember or Adminimal make some great administrative themes, that will do their job superbly helping you build your back-end app
Zurb Foundation or Bootstrap make great choices if your web project includes components such as tables and forms
4. Will You Be Using a Pattern Library?
A base theme always makes the perfect choice if you're planning to create your own patterns.
In other words: keep it simple, at the theme level, especially if you'll be applying your own classes, which will then get themed by your own pattern library styles!
5. Consider Performance
Less is always better! You keep that in mind and let this common-sense motto guide you through your theme selection!
The more functions, JS libraries and settings your website needs to load, the heavier its “burden” will be (and the longer its load time will be, as well).
Go for a light theme based on Drupal core, which won't come equipped with its own heavy load of out-of-the-box JS libraries and CSS and remember that if less is always more, so does “testing makes it perfect”!
Remember to test all the theme settings on your website, thus keeping its front-end performance closely monitored!
These is our list of factors that any Drupal developer should take into account and think through before choosing the base theme for his/her project. Do you have any other aspects that you usually consider and which determine you to go for a specific base theme or another once you start your Drupal web projects?
Adrian Ababei / Dec 12'2016
We're back, as promised in our previous post, with 7 more design principles that you should “steal” from those e-commerce websites that have already “made it big”.
If the 5 principles that we revealed to you in that post revolved around the visually-appealing aesthetics that any website should “wrap” its conversion goals in, today we'll be tackling the issue of usability.
After you've learned all about delighting your visitors and visually enchanting them, today we'll reveal to you the 7 (surprisingly) subtle changes that you could apply to your website for discreetly guiding your visitors towards the final purchase, for making the whole “path” they'll need to cross from the moment they land on your site to the shopping cart page as easy to follow as possible.
1. Make Your Search Box Visible
Run a test! Go online, pick, let's say, 10 random websites, access them and try to time how many seconds it takes you to spot the search box on their homepages.
Needless to add that the “winner” is the site that “scores” the shortest time needed for you to track down its search box.
It's the same with your e-commerce website. You should, indeed, invest lots of time and creativity in getting it upgraded with striking visual elements to delight and to engage your visitors with and to pay great attention to the whole information structure and to the layout of your website, but mind you don't overlook the search box's major importance!
All your efforts in making your products/services as visually-appealing and desirable as possible might just go down the drain right from the start if you “manage” to frustrate your visitor by wasting his/her valuable time looking for your search box.
In a nutshell: make your search box pop out!
2. Discover Which Colors and Color Contrast Convert For You
Before you rush in to paint all your call to action buttons in red (since it's a general consent that red triggers a sense of urgency and therefore that it converts better) or before you rush in to change it from red (since you've discovered that, well, it did not help you reach that high conversion rate you expected it would) to orange (for you've red about it being the perfect call to action color for “aggressively” urge your users to buy), you should first:
consider which is the emotion/which are the emotions that each colors conveys (maybe if you're selling beauty products you'd better go for cheerful pink rather than “alarming” red, for instance)
run some tests for finding out which is the color that converts better for you and you only (what works for others might not work out for you, too)
depending on the color that you decide to choose for your foreground and, most of all for your call to action button, you should choose a contrasting color for your website's background.
And here we are! To the very color-related “subtlety” that we wanted to point out to you: strive to find not just “your” website's color, the one that converts best for you, but the high-converting CONTRAST for your website, too.
It's the contrasting background that will help you make your call to action buttons pop out, you know. So, think in pairs of colors: purple and yellow, orange and blue and so on...
3. Go For An Attention-Grabbing Call To Action
Put your call to action in a container, make it stand out!
Your call to action button should be grabbing your visitors' attention even quicker than your search box.
If in the case of the latter your role is more that of a guide, one willing to assist the visitors to quickly find the information they're looking for, when it comes to your call to action you should make sure it simply grab their attention the very moment they land on your website.
We've talked about “wooing” your website's users, about delighting and “spoiling” them with striking imagery and quality content, but even so: you should keep in mind that at the any of their “visits” you still want them to buy or to subscribe.
In short: don't rely exclusively on the foreground-background contrast and add do more! Try a contrasting container for your call to action! It's the key element of your website, so you should make use of all the available resources for making it grab the attention!
4. Give White Space Its Due Importance
Here's another design subtlety that you could apply for making your call to action stand out: placing it against white space! Give it a try, test it on your website and see whether it works for you, too, whether a white background makes your conversion button even more visible!
5. Put Together a Visual Hierarchy
Remember that we've already talked, in our web typography-related post, about the hierarchy's high importance in web design?
Well, it's time to lay stress on it once again: visual hierarchy paves the way to an optimized user experience (and therefore to that conversion rate that you've been dreaming of)!
Display all the elements on your website in a powerful visual hierarchy and you'll discreetly and efficiently guide your visitors towards the target (purchase or subscription) that you've set up for him/her.
Turn his/her delve into the multiple layers of content (all the way to the final purchase) on your website as smooth and fluid as possible with the help of an effectively-structured hierarchy!
6. Keep Your Navigation Bar Short and Simple
Now it's time you examined your navigation bar!
How many links/buttons do you have there? Is it on top of your page or somewhere else? Are its labels generic or descriptive?
Once you've moved your magnifying glass across it and (maybe) you've “detected” some aspects that could be improved, here are our navigation bar-related tips for you:
keep it short: go for an ideal no. of 5 items
go either for a standard horizontal one, placed on top of your page or for a vertical one, placed on the left side of your front page: no need to get creative here, for “innovation” in this case is more likely to affect usability
go for descriptive rather than generic labels: give your visitors a hint of what you do, who you are and not just standard, impersonal information (“Who Are We”, “What We Do”)
put your key items at the beginning and the end of your navigation bar
links, links, links, not buttons: links are far better for SEO reasons, since search engines can detect the written text, they're easier to edit and where do you ad they they load quicker than buttons, too!
7. Guide Them With Directional Cues
We all need a bit of guidance!
Therefore, help your website's visitors quickly spot your lead-generation forms and your call-to-action buttons with directional cues.
Use them for directing their attention to the conversion-generating elements on your website. They help you minimize the risk that your users may get too distracted by/captivated by all the other appealing types of content on your website and that they may outlook (or, even worse: that they may not spot them in due time once they've made up their minds) the “really” important ones (for you): call to action buttons.
And here we are, at the end of our list of conversion-centered design tips and tricks for you. Have you had the chance to test them already (or maybe just some of them? Have they worked for you? Feel free to share any other design subtleties not showing up in our list here and which worked “wonders” for you!
Adrian Ababei / Dec 06'2016
First of all, we should get one thing very straight: you will never ever meet your conversion goal if you're “just” selling stuff on your website.
“But it's an e-commerce website, it's supposed to sell products/services!”
That's perfectly true, but you need to strive luring, delighting, engaging and “giving” something to your visitors first (pretty much like in real-life, where you greet your guests with yummy snacks or at least just coffee). It might be some visually-arresting photos to please their eyes with and to trigger certain emotions in them or some interactivity features to show them that you care etc.
The actual sell will eventually come, stay reassured, if you master all the preliminary “customer wooing” steps! But it should come last!
In other words, your site's conversion goal should be... “camouflaged” by and beautifully wrapped in the whole aesthetics of your website. It's your website's design that will entice your visitor to prolong his/her visit on your site and it's design, again (certain usability-related design subtleties), that will “light his/her way” to the final purchase.
Let's see now which are these 5 design principles that turn web design into “web design that sells”:
1. Spoil Them With High-Quality Photography
It should be visually-appealing! That's the golden rule of any e-commerce website.
Hiring a good photographer for upgrading your website with sharp, high-quality, beautiful shots of your products might just be the best investment you'll make!
It's no subtle “trick”, if you think about it! Just put yourself in your visitor's shoes: aren't you more inclined to buy products presented to you in some visually-striking photos that scream “you need me in order to be fully happy”, than products featured in low-resolution, blurry images, that tell no story, either? That don't lure you and make you “need” them?
So, what we've learn from this first “lesson”?
That you need to make your products look really, I mean really, hard-to-resist-to and that amazing photography has always been the surest and quickest means to help website developers/owners reach that goal!
2. Balance It With A Great Layout
We could as well call this second design principle: COHESION.
Make sure that the key elements on your website, those that you want to drive the visitors' attention to (i.e your product shots), are nicely complemented and highlighted by your website's layout!
Think “cohesion” when you design (or, even better, hire an experienced web designer, since the “one man show” method is not always the most efficient one) your layout. Put together all the colors, shapes and textures so that the result should harmoniously complete the “story” told on your website and not steal the spotlight away from your products/services or clash with them.
3. Bring Interactivity To Your Website
Face it (and adapt to it) or lose it: there's a new word for “selling” these days! It's called “engagement”!
So, how does your website keep your digital addicted users engaged? They definitely expect to get engaged, you know, to be offered the possibility to write comments, reviews. They like to stand out from the "faceless" mass of generic visitors on your website.
What are you going to do about that?
Well, there are plenty of user engagement tools that you could upgrade your e-commerce website with and we're going to list only 2 of them:
add videos to your website; stunning video elements focusing on your products, that will grab your visitors' attention and will keep them engaged for a minute or two (videos will continue to be, in 2017, too, a major online sales-booster)
implement a separate window where users get to take a really close look at the products they're interested in; it should allow them to move those products, to zoom in and take a close look at them in different angles before they decide to purchase them
In short: get creative and strive to add a few more in-between elements to the conventional “customer-purchase” schema!
4. Give Background Its Due Importance
You need to embrace your the backing image's full potential! It's far more than merely “something” that just fills up just the space behind your products, the main focus on your website.
When used right, when strategically selected, a full-sized backing image can enhance your products even more.
First, consider your type of business (needless to add that it's a different image that you should go for if you're selling financial products on your website and a totally different one if you're selling artsy handmade products).
Next, adapt your banking image to the type of message that you're trying to convey. It should, as already mentioned: enhance your product (make sure to strike a balance between minimalist and visually-appealing).
A major trend these days, when it comes to backing images, is the blurred background. Give it a try! See what's there, online, come up with your own blurred backing image, integrate it in the “story”, test it and see whether it meets your website's goal.
5. Add the Human Factor
Show the clothes that you're selling on a model's body, show the gadget that you're selling as being used by someone, add at least one person to an otherwise "antiseptic" representation of a room decor if you're selling furniture and so on.
You've got the point, haven't you? You should help your visitors relate to the “character/s” in the “story” you're presenting on your website.
You should help them empathize with them, feel as if they're the ones happily using those specific products.
It's always easier to relate to an emotion (the happiness, the relief, the pride, the satisfaction that your product triggers in the person showing up in your photos), than to a product.
Face it, do what it takes to adapt your website's design to this principle or lose it (lose that conversion rate that you've been fantasizing about)!
So there you have them! The first 5 answers to the question that has probably been on your mind for some time now: “what are those high-converting sites doing differently?”
STAY TUNED, for in our next post we'll be sharing with you 7 more design subtleties that top converting e-commerce websites rely on!
Adrian Ababei / Dec 05'2016
Since the Web pays tribute to the whole concept of UX these days, since all web developers direct their efforts towards “hooking”, engaging and pleasing (whether that means impressing, informing, shocking or enriching) the User, typography has started to regain its glow!
Even now, in the age of breathtaking imagery and attention-grabbing videos, typography is still king! Add a short, impacting text line (in a strategically chosen typeface) to a striking image or upgrade a stunning, hypnotizing video with a powerful written text and you'll instantly strengthen your message, you'll instantly add a new layer of meaning to it!
On the other hand, “worn out”, conventional typefaces or too embellished typefaces, that won't support the literal message you're trying to convey, bad spacing, lack of contrast or any other unfortunate way of handling web typography can ruin your website (if it's not easy-to-read your visitors will definitely bounce off, whereas if it does not complement and strengthen your message, if it does not help it trigger the type of emotion you're trying to trigger in the user, all your efforts put in web design and programming are at risk).
But What Is Typography After All?
Very basically put: typography is how the text looks.
If we are to elaborate this rudimentary definition a bit: typography is more than just the arrangement of written content (paragraphs, forms, sentences, words); it's also how written text interacts with all the other types of content on your website: videos, images, color. It's about how it manages to “collaborate” with all the other content types for conveying the message/triggering the emotion you want to trigger in your users.
Why Should You Bother So Much About It?
Because it's that “invisible” force that might either strengthen your relationship with your User or “destroy” all your hard work. It depends a lot on how you use it (or how you refuse to use it).
Since 95% of the content on the web is written content and considering the “fierce competition” out there, among websites, you just can't afford ignoring or not paying enough attention to how texts gets displayed on your website.
Learn to use web typography to your advantage: when done right, it's a “force” that helps you create visual interest, better structure your information design, make your written content readable and in a nutshell: influence your users. A too powerful of a “tool” not to strategically use it, don't you think?
Easy-to-read! Persuasive! Does that ring any bell, you UX expert, you?
Tips For Improving Your Website's Typography Now
No need to panic now if, let's say, you're still displaying a way too “dusty” font on your website (such as Arial), or if you've taken a wrong decision and, driven by a wish to innovate, you've gone for a way too embellished typeface, when your text should just convey its literal meaning instead. There's nothing that some good practices in web typography can't fix. Here are our 4 tips for you!
1. Hierarchies Are Major Readability-Boosters
Don't take our word or granted! Test it and see it for yourself. Do an A/B test:
on the left side: a piece of content with no hierarchy whatsoever, a block of text featuring pretty much the same font size (or with very little variations) for its headlines, title, body etc.
on the right side: a hierarchy-type of content with, let's say, a 15-17 px font size, a visible first headline, followed, closely, by the secondary ones (of about 150% of the body size), making reading much more fluid, featuring white spaces for the eye to rest on etc.
Isn't the whole information far better structured in the second example?
2. Choose the Right Typeface
“And how do I know which one of “THE ONE”? Especially when the Web unfortunately “spoils” us with such an overwhelming “repertoire” of temping typefaces?
Well, to this question we have no unique valid “recipe” for you: see what's out there, on the web, analyze your competition, those websites that try to convey the same type of messages as yours and examine their fonts. Conduct your own “investigation”, see which are the most “effective” typefaces.
In between your own “investigations”, you could as well try out (and see if they work for you, too) these 3 body text typefaces-related tips that we've prepared for you here:
Even color: stay away from body text typefaces that break the rule of “evenness of color”, those that display patches of whiteness and blackness. Body text fonts should be consistent for displaying an easy-to-read text for your users
Sturdy shapes: make sure the typefaces you choose for your body text are easy-to-read at small size, too. So, a good practice is to choose high x-heights typefaces with less frills (lest the glyph shapes should turn into distraction for your users and the way too “subtle” fonts, at small sizes, should get outshone by the environment on the web page)
Active texture: do your best to balance various aspects of the text block and type. Make sure your body text font's active texture (meaning the typeface's contrast with the white space of the page, the one enhancing visibility around the glyphs) is neither too dull or too lively. In other words, it shouldn't distract the reader/user from the text's message itself, nor bore him/her (making it difficult for him/her to actually distinguish the letters' shapes).
3. Adjust Your Line Spacing
In other words: allow your written copy to breath! How? By setting up your vertical spacing and giving your text more room (it will be a lot easier for the User's eye to scan it).
A good practice, in this respect, would be to go for a line-height of 15-19pt if you're going for a 12pt font, for instance. You do the math what line-height you should go for if your font is bigger.
4. Adjust Your Line Width
“How many?” you may ask, “How many words should there be in a text line, within a paragraph?"
It's a common sense approach to go for an average of 45-75 characters if you're handling with a one-column web page and for 40-50 characters if there are multiple columns on your page.
How about you? Which are your own web typography good practices? How do you make use of typography's “arsenal of cool tools”? How do you make it “serve” your website's purpose?
Adrian Ababei / Dec 01'2016
How do you find the online landscape now, when the air is filled with new possibilities, opportunities, forecasts, and wishes for 2017?
You do find it dominated by the digital environment’s own trends, and technological breakthroughs, right? Moreover, it’s just dictated, as it has always been, by the future-oriented end user, let’s face it.
Since more and more mobile users won’t even get to visit your website on their desktop devices anymore, but exclusively on their mobile devices. And since they will visit it more frequently from their mobile phones you need to cope with this context or else you’ll turn into a “dinosaur” stubbornly attached to his “desktop supreme” belief.
How should you cope with the (not so) latest shifts in the online world? You should go beyond the “mobile-friendly” approach and you should adopt the forward progression, the “mobile-first” plan!
Draft Your Mobile-First Strategy from Day One
If you want to boost its effectiveness, you must draft it from the very beginning, from the product’s/services creation phase, so that you can align it with all your further marketing strategies and business maneuvers.
Practically, starting with a mobile-first viewpoint allows you to automatically make all the other business strategies and operations revolve around it.
But First, Let’s Analyze Three Different Approaches to Mobile-Friendliness
1. Responsive Web Design
Let’s call this approach (which emerged in 2003) “the pioneer of all mobile-friendly techniques”.
It practically revolutionized the way web designers and mobile users started to envision and to navigate through mobile websites and it’s still quite alluring even now, for many developers, due to its obvious advantages:
one URL for a given website across all devices
cost-effectiveness (derived, of course, from the above-mentioned advantage)
adaptability: web pages/content resize to any given width, enabling web users to quickly switch from the way they used to navigate through websites on their PCs, to the vertical type of navigation (scrolling)
And yet, as any “pioneer” in its field, responsive web design has slowly started to show its weaknesses:
“adapting” content-heavy website for mobile devices with fewer functionalities and far less equipped for supporting all the heavy content lead to a significant increase in loading time
it inevitably looks like some sort of “compromise”: developed for the desktop and re-thought so that it should somehow fit the small screen devices’ features
2. Dedicated Mobile Site
Then, when web design responsiveness starts to show off its limitations, it was time for the “dedicated mobile sites” to shine!
Basically, they were subdomains of desktop websites. Users got “detected” when they accessed websites from their mobile devices and they got automatically directed to the mobile version of the desktop site, using a different URL.
The big step forward? This was the very first attempt of customizing the experience for the end-user visiting a specific website on his mobile device, instead of just delivering him/her a “compromise”: a shrunk version of the standard desktop site.
This approach paved the way for mobile-specific content strategies. And yet, there are certain disadvantages to this mobile-friendly approach, as well:
You have multiple URLs to juggle with (mobile and desktop version)
If wrongly configured, it could easily lead to SEO-related trouble
3. Dynamic Serving (Server Side Components+ Responsive Web Design)
And here is the most complex (for the team of developers who’ll have to respond so some bigger challenges now), but surely the most efficient (from the user’s experience standpoint) mobile-friendly approach!
What makes it better?
As a web developer, it allows you to display content, using just one URL, based on a user agent. The user reaches a specific website from his mobile device, he gets “detected” by the server-side JavaScript and the HTML, CSS, and JavaScript written and adapted to the mobile is delivered to him.
That, instead of the same content being created for the desktop version of the website and then adapted... somehow, so that it should fit the mobile, too.
Let’s sum up the pros:
one URL
a much-improved user experience
mobile-targeted content
Now, Let’s Dive Into the Mobile-First “Philosophy”
“I think it’s now the joint project of all of us to make mobile the answer to pretty much everything” Eric Schmidt (Google).
Do you need more reasons for making your mobile-first website a top priority than these 2 major ones?
desktop devices’ supremacy has started to fade away (more web users will try to access your website from their mobiles and, moreover, there will be quite a lot of them who will be using only those devices for visiting your site)
Google itself is all into the “mobile-friendly” “craze”
To these two main reasons for “saying yes” to a mobile-first approach, add 2 main targets, too:
freeing your future mobile-first website off all the heavy, unnecessary content, just an unwanted “legacy” from its “bigger brother”, the desktop version of the website
reducing Its loading time and overall making all the displayed info looking neat irrespective of the technology used on the specific devices that your website’s accessed on.
Graceful Degradation vs Progressive Enhancement
As we delve deeper into the mobile-first type of mentality that more and more website developers and website owners adopt these days, we should point out two main viewpoints that subsequently developed.
1. Graceful Degradation
It is a concretization of the need for a design to work properly across as many platforms and browsers as possible.
With this “goal” in mind, designers strive so that the user enjoys the best experience while visiting a certain website and makes efforts so that this website functions properly, despite the inevitable shortcomings.
Basically, the resulting website would need to scale back and lose some of the content that would slow it down or just didn't adapt to certain viewpoint sizes. It was about “losing the heavy content”: graceful “degradation”.
This viewpoint’s limitation is obvious: the final product often features the look of an afterthought, of an unpolished (one-size-fits-all) product.
2. Progressive Enhancement
The whole perspective changes when you adopt this mobile-first viewpoint.
You practically start by making your website look amazing and function properly on a low technology mobile device, thus trimming it to its core features, and then you progressively add new, heavier content, new features and turn it into a more robust desktop-ready website.
See the difference?
It’s a much more organic way of developing a website: from its nucleus, made of its most vital elements, to a far more complex version of it.
No need to rethink it from scratch so that it should work properly on mobile or, even worse, to “make it fit” (and it never does in a “natural” way) for mobile devices. You go your way up!
Also, when it comes to content (you know, “the all mighty king”), to the way that it gets enhanced or constrained by these two types of “methods”, the progressive enhancement “wins again”.
It’s obvious why:
the graceful degradation: all the heavy content gets loaded on the largest platform and even though much of that content is removed from the mobile web pages, the already loaded heavy content still slows down the mobile website.
the progressive enhancement: the basic elements get loaded first, making navigation much smoother on a mobile device and loading time much lower, and then progressively additional resources get added, when/if needed (to platforms that can support them well).
The Top-Down Method vs The Mobile-First Method
We’ve already tackled these two mobile-friendly types of approach, but without actually naming them, so we’ll just sum up the basics:
1. The Top-Down Method: creating a website for large-screened devices, then “decreasing” it for smaller and smaller-screened devices.
The main shortcomings are:
overloading mobile devices with way too heavy content, with too much information
omitting many of the tempting features and functions specific to mobile phones
2. The Mobile-First Method is all about usability, all about user-friendliness.
Start with the highly simplified, core version of your site which should work perfectly on devices equipped with lower-tech and level it up so that it should evolve into a website suitable for the latest high-tech devices.
Facing simplicity (you’ll practically have to “work” with only 80% of your desktop’s screen size), maintaining it and turning it into your main goal, enables you to keep focused on the core elements of your website. And on how the end-user can carry out any given action on your site as quickly and intuitively as possible!
Going from small to big is always far easier and it seems to be far more efficient, too!
Needless to add that the approach to mobile-first design is a flexible, constantly evolving strategy.
It needs constant “trimming”, constant modifications so that it organically adapts to all the technological changes and to the shifts in mobile users’ way of interacting with the digital world, as well!
Adrian Ababei / Nov 21'2016