LATEST FROM OUR BLOG

Take your daily dose of (only) relevant news, useful tips and tricks and valuable how to's on using the latest web technologies shaping the digital landscape. We're here to do all the necessary information sifting for you, so you don't have to, to provide you with content that will help you anticipate the emerging trends about to influence the web.

Blog Placeholder
How much time and effort do the web forms on your Drupal site demand from your users?   No matter what your estimations might be: there's always room for optimization, don't you think?   There is an optimal length that you should consider when building your web forms, a certain format that converts better, as well. Any web design and development team will confirm you this.   Moreover, there's a better way of crafting the messages that you deliver to your users and a certain level of anticipation involved, too. Meaning, of course, that you need to be able to predict the common errors that your users will be making during the “ fields filling in process”.   Oh, and you'd better not leave out this key aspect, either: the whole “information typing in” process should run equally fluidly on all devices. No “discrimination” whatsoever!   Put your user first!   On how you can ease your his/her navigation and ask for as little of his time and effort as possible during this part of his journey (on your Drupal site).   Then you'll implicitly be “working your magic” on your conversion rates, as well!   And here is our list of best practices for creating web forms that convert:   Let The Data Determine Your Web Form's Structure    Let's assume that you're optimizing an existing checkout: your analytics is relevant enough for determining your next structure-related moves.   Which are the elements you should prioritize?   Which are the most popular payment options on your site? The answer is in your analytics: do some research and then push forward those key payment methods in your web forms.    Do you visitors order seasonally or infrequently on your Drupal website? It's all there, in the data! The analytics will let you know whether you should go for a guest checkout or not!   Make a habit of turning analytics into the most valuable resource for optimizing your web forms!   Use The “One Question Per Page” Method   OK, not “literally” one question/field for each page, but one “topic” for each page (or at least for each “section”).   For instance, you could have once separate page for shipping options, one for address details, another one for payment details.   This segmentation will streamline the user's navigation (especially on mobile), will ease understanding and improve error recovery, too.   No need to just bundle up all the fields one on top of the other and make your web form look just like a “questions-packed survey”. It will only confuse the user and imagine how discouraging it would look be on a mobile device's screen!   In a nutshell: the multi-page web form design converts better!   Focus On The Most Common Situations First   No need to stick in the mud, to complicate your whole web form optimization process from an early stage.   Instead, focus on the common scenarios first:   in most cases the user filling in the web form is the same one that the item/s will get delivered to in most cases he/she is using his/her card and, surprise, surprise: same shipping and billing address and so on Handle the exceptions, the less common scenarios, later!   Indicate Progression    This is a significant UX booster!   An progress indicator will help you discreetly guide your user through the whole process (whether he's singing up or completing a purchase). Our team of Toronto developers couldn't imagine building in a web form lacking this feature anymore!   Here are ways of incorporating progress indicators into your web forms:   you integrate a progress bar, in case of a multi-page web form; it will let users know how many more pages they'll need to fill in (keep in mind to add brief descriptive headings indicating the topic of each page/section)   you integrate a scroll-length, in case of a single-page web form    Implement Field Type Indicators   Here's another great way for reducing the time and effort required from your users: suggesting browsers the type of information that the user is required to type in.    Here's a great example: use field type indicators for “programming” browsers to display a numeric keyboard when the user has to fill in his card numbers.   Provide Field Hints To Help Users   Any user will appreciate a little guidance, instead of being left to handle the whole process, to figure out the “less intuitive” steps, all alone.   So, why not streamlining his operations with various hints, such as hints suggesting him the information he needs to type in various fields of your web form?   Your “hints” could be annotations, graphics or text placeholders.    Anticipate Uncommon Scenarios, too   Since not all the “user filling in the web form” scenarios will be common and easily predictable, you should prepare yourself for the unexpected, too!   “Uncommon” cases could be those where your users need to go back in the form and change certain information.    Monitor your analytics and consider whether you should apply some changes to your web form, yourself, in case certain “uncommon” scenarios turn into “way too frequent scenarios to be ignored”.   Implement Auto-Formatting    At some point, during the web form filling in process, your users might get “unsure” of the correctness of the information the will have typed in.    So, why not streamlining their whole auto-formatting operation: use dash or space after one set of digits from their the card numbers, so that they can effortlessly correct the wrong ones?   And this is just one example!   Check for Errors And Get Them Fixed in Due Time   Keep a close eye on your web form's performance!    You never know what errors you might track down and, you know what they say: the sooner the better. Get them fixed and then look out for new ones!   Use them as “pretexts” for some more optimization!     What's your own “recipe” for web forms that convert? Are there any other “best practices” that you could add to the list? ... Read more
Adrian Ababei / Jan 21'2017
Cards vs Lists: Which UI Style Best Suits Your Type of Website?
It's not a matter of “better or worse”, but one of “appropriate or inappropriate given context”. This is what our experience as Toronto developers has taught us.   And that given context is given by your website's specificity itself!    So, you should start weighting up the two UI styles, the two ways of displaying content on your website, from this perspective: each one provides the best UX for a particular type of website that you're owing/developing.   It's your Drupal website's particularities that shape your own purposes and your users' main goal, too, once they land on your website, and which determine the best type of web design to use, as well.    In this respect: what kind of website do you have in mind?   Now, how about pushing these 2 “leading actors” into the spotlight?   How about shading some light on each one's advantages and limitations and pointing out the best contexts when they can help you provide the best UX to your visitors?   What's a List (or Grid) Design?   A more or less basic definition of a list would go something like this: a list is a page featuring several entries or candidate items meant to match the user's search criteria.   Lists are ideal for newspaper websites!   They ease users' “job” of quickly scanning over the headlines in order to gain an overview of the latest news before they decide which article's worthy for being further explored.   Till they decide which is the piece of news worthy, interesting enough for them to “click on for more information”, they need to quickly “overfly” all the headlines.    And a list design, being more compact, is by far the best means for organizing content, for steamlining this scanning process after all.   Did anyone said that: facilitation is a synonym for “better user experience”?   What's a Card in Web Design?   An “entry point”, a “container of related information” or a “brief summary of information”. These are but three possible vague definitions of a card in web design.   Now, let's detail a bit, shall we?   Imagine a card as some sort of an “informational teaser”: it's a container that gives users just an entry point to some more detailed information.   “More detailed information” that the user can access, for further exploration, once they've clicked the card-shaped entry point.   It's no news for anyone that Pinterest's been THE card-based UI's trend setter.   Its popularity, among users, convinced Google, Jelly, Tinder, Weotta, and other giant “players” on the online arena to adopt this UI design.   Although a product of flat design, a card is rather a Flat Design 2.0, since it features light 3D effects (such as drop shadow) pointing out to users that they should click for “unlocking” the rest of the information prepared for them.   What else could we briefly (for now) say about cards?   They work best on archive pages, where you, as a web developer in Toronto/Drupal website owner want to just “tease” your users with brief summaries of the additional content available for them for further exploration.   When Should You Go For a Card-Based UI?   1. For Grouping Various Types of Content   If lists make the best choice when it comes to organizing and displaying similar content, cards, on the other hand, work wonders for helping users easily navigate through several types of content.   Just rely on borders for marking the differences among various elements on your website, among the various pieces of content. Thus, you'll provide a visual boundary for your users to rely on for easily navigating through your “puzzle” made of several distinct items.   2. For Enhancing Information Browsing   Think of Pinterest (again)!   You don't visit Pinterest to search for a particular piece of information.    Instead, you have a content category in mind and some spare time to invest in exploring whatever collections of stunning images you'll might get surprised with.   So, basically you go on Pinterest for scanning through pins, through all those stunning images.    And there you have it!   You've just named precisely the type of user goal that the card-based web design best responds to: “scrolling through”/”scanning through”/”browsing through” or however you wish to call it.   It's not for searching for specific information that you should use this type of UI, but for encouraging and enhancing the act of browsing through a whole collection of bits of information.    You impose your users no content hierarchy whatsoever (like you do when using a list-style design).   Instead, you grab their attention with visually-arresting images encapsulated in those cards and, moreover, you layer bits of information on their surfaces, making teasing textline + eye-catching images work together hand-in-hand.   And since it's browsing that you're encouraging and not the act of quickly accessing a particular type of information, the card-based UI turns all the “scanning through” into a delightful, effortless and fun scroll down card-shaped results.    Whenever your users spot something that surprised/intrigued/stirred their curiosity, they get to click the specific card(s) and indulge in further exploring the additional content.    And there you have it: instant gratification!   When Should You Go For a List-Style Design?   1. For Ensuring Quick Access To The Needed Information   As already mentioned: the list-style web design is perfect for newspaper and newspaper-like websites.    How come?    Just think about it: on this type of site users usually land for eye scanning the given content and for quickly spotting precisely the information/article that they're interested in.   It's not for passing time browsing through a visually-appealing collection of card-based results that they'll access your website.   No sir! In fact they'd hate spending too much of their priceless time looking at amazing pictures, for they're on the look for specific information and they want to gain access to it as quickly and as effortlessly as possible.   So, quickly scanning through a vertical list (far more easily to eye scan than a dashboard of cards featuring no helpful hierarchy) increases their chances to find what they're looking for quick and easy, with no unnecessary distractions whatsoever.    2. For Smaller Screens    It's obvious why lists make a better choice for smaller screens than cards: they take up less space on the screen.   Therefore, users aren't constrained to keep scrolling down, when using their mobile devices, if they want to access more content and they're not forced to rely on their short-memory either.    And this can only lead to better UX!   It's no rocket science why: list-style design enables you to display more choices, in short rows down the length of your web page.   Thus, you take out the (otherwise imminent) possibility of the discouraging “never-ending” scrolling of the equation!   In Conclusion   Cards are informational “teasers” linked to the content to be explored deeper into the website navigation.    They make the ideal choice when it's information browsing (instead of searching) that you'd like your users to do on your website and when you're displaying several types of content that they need to easily navigate through.   Lists are pages displaying search results matching the search items that your users will have typed in.   Being far more compressed and allowing you to establish a visual-guiding hierarchy, too, they enable users to quickly access particular information as they scan through similar types of enlisted content.      With these contexts, specific to each one of the 2 dominating UI styles, in mind, you should now be able to choose one over the other and thus to organize your content for ensuring the best user experience on your website. ... Read more
Adrian Ababei / Jan 16'2017
What Are the 3 Most Common Web Design Mistakes and How to Avoid Them?
User experience and usability!   Such “trendy” principles in today's web-design communities. Such powerful trends influencing major decisions-making processes in the digital world.   And yet, recent studies have proven that, although every web designer appears to be striving to craft the most engaging user experiences, to create web design “in the name of usability”, too many of them make the same mistakes as 20 years ago (when the approach to web design wasn't as sophisticated as nowadays or the expert advice as accessible as in the present days).   Well, it's time for you to “shake off" these “bad habits”, to take advantage of this time of year (a time of resolutions making) for making some strong commitments in this respect.   And here they are, the 5 long-lasting web design errors that we'd like to “confront” you with:   1. Failing at Responding to Users' Need for Clarity   Whether you're deliberately compromising clarity for the sake of “innovation”, for showing off your creativity, or you're simply overlooking its key role, it's time you helped your design (re)gain its clarity!   It's time you (re)considered your relation with your website's visitors:    you need to “serve” them first, by making it crystal-clear where they need to click and where exactly all the clicking will take them to and only then to “gain them over” with your talent and “appetite” for innovation.   It's not the other way round. It never is!   Now here are some “long-living” web design mistakes affecting clarity:   A. Unexpected content placement/Ambiguous category names   We preferred pairing these two examples of “popular” web design mistakes since they both lead to the same unwanted result: users getting the feeling that the particular content they're searching for is always somewhere else on the website.   It's perfectly legitimate and even advisable, as a web designer in Toronto or as a website owner, to want to break up the conventional patterns of design.   And yet, be aware that “you're playing with fire”.   Interfering with you users' browsing habits, placing certain pieces of content where they would never have expected to find them, might have the opposite effect: discouraging your visitors due to the time they will have wasted looking the information they needed.   Also, if you fail to clearly name your categories and your visitors land on web pages of your site having nothing to do with the content they were expecting to find (signaled by the “inappropriate” way in which you named your categories), you risk to make them bounce off your site for good.   B. Hidden fees   Reducing prices' visibility or hiding away certain fees is the quickest way to “crafting” a negative user experience!   So, shake off this bad habit and make a pledge for designing exclusively big and bold pricing information this year!   C. Misleading, almost identical links or navigational categories   It says it all: you risk (again) to piss off your visitors, who'll land on the “wrong” pages on your website for didn't stick to the principle of clarity when naming your links/navigational categories.   And this is how you lose some potential loyal visitors which could have converted into customers!   2. Failing at Efficiently Applying Basic UX Principles   How will your website's visitors find the needed information on your website? This is the question!   The question that should keep you alert throughout the whole designing process, lest you should wrongly apply or forget all about the fundamental UX “rules”.   You should envision your “mission like this: blazing your user's path to the due destination. Which is the information that he/she's searching for on your site!   And by “stuffing” your text paragraphs with internal links, placing your buttons in unexpected places or hiding away your navigation bar sure is not the way to do it!   Now here are some common UX errors you should commit yourself to avoiding this year:   A. Repetitive similar links   Resist the “temptation” of turning your visitors' quest for specific information hosted on your website into a “mission impossible”.   Forcing them to click on a heavy loads of almost identical links, over and over again, in order to access the information they're actually looking for, is nothing but a “sloppy” web design practice.   And you will only “succeed” in discouraging your visitors.    B. “Islets” of information   Here's a basic UX principle that way too may web designed keep “overlooking” even now, when “usability” is one every web designer in Toronto's lips: connecting together webpages hosting similar type of information.   You should avoid stranding your visitors on “final destination” type of web pages on your site. They do find the information they were looking for (hopefully), but are not “lured” with alternative destinations, as well: other pages on your website presenting a similar type of information that they might find useful.   In conclusion: make sure you don't “sabotage” yourself. Permanently “tempt” visitors with alternative pages they could visit, pages linked to the ones that they'll access first both through phsycal clickable links and through the similarity of the information that these pages provide!   C. Irrelevant search results   Remember: UX is all about lightening your users' path to the information they need.   Now imagine the following scenario: your visitor types his/her search items into your navigation bar, get the suggested link of a specific page on your website only to land there and to discover that it has nothing to do with the type of content he was expecting to find, based on his specific search terms.   How did you let this happen?    You've incorrectly or insufficiently tagged your facets and filters!   Now that you know how to avoid this mistake, you'll have no excuse for letting the above scenario turn into reality on the websites you'll design in 2017!   D. Casting away users on micro-sites   This is a web design mistake related to the one causing “islets” of information (that we've already detailed here).   Probably the most popular website relying on sub-sites is Yahoo. And this is a good example of web design: users are directed to visit certain subsites while they're provided with the way to go back on the main site, as well.   This is a good practice that you, too, should stick to when you handle sub-sites web design: whenever you suggest your users to visit a certain sub-site, remember to always make the home button as visible as possible. Otherwise you'll just cast them away, you'll drive them off the main website and thus “sabotage” yourself.   Why would you want that?    3. Failing at Creating An Effective Information Architecture   What's the point in creating valuable content when you, afterwards, “sabotage” yourself by making it discouragingly difficult for them to scan through it?   A well planned information architecture is what makes the difference between hasty web design and perfectly structured, intuitive navigation flow-ensuring web design. It's the very foundation stone of good design!   An effective information structure implies organizing, labeling and structuring the whole content available on your website as clearly as possible.   By the time you start to actually design your website, you'll have everything planned: how your future visitors will get from one section of your website to another, your page order, the number of pages your website will have, everything, to the slightest details, will have already been thought through.   What's the purpose of all these content structuring efforts?   Your users will effortlessly and quickly understand what your site is about, will be able to scam through its content and to easily “detect” the specific information that they're looking for.   Now here are 2 major information architecture mistakes you should avoid:   A. Content clutter   We'll never stop “bugging” you with this advice (presented to you in various forms) on this blog: declutter your website and you'll half won your “battle”!   Think “5 second attention span” and then think “fierce competition in the digital marketing arena” (competition which will get even fiercer this year).   No visitors will have the time or the will to try and “digest” huge blocks of text and to waste too much energy trying to navigate their way though piles of images, overcrowded products galleries or cluttered apps (weather app, countdown app, audio player etc.).   So, never bid on your user's goodwill!   Instead, do your best or easing his/her job for “digesting” the content on your website:   shorten your paragraphs give white (or so called: "empty space") space its due importance always bid of bullets   B. Hidden relevant links   And here we get to the risk of “auto-sabotaging” again!    Avoid placing relevant links in totally inappropriate, hard to find places on your website, such as amidst ads.   It will be like “looking for a needle in a haystack” for your visitors to find these particular links and thus you'll run the risk of blocking their access to key pages on your website.     This is how our list of web design “don'ts” for 2017 looks like!   Think them through, see which one(s) of them has been part of your work routine for too long now and make a pledge to “brake up with it/them” this year! ... Read more
Adrian Ababei / Jan 10'2017
Find Out What Is Trending in Web Design This Time of Year
Curious what 2017 has in store for you in terms of new powerful web design trends? It is crucial for you, as an entrepreneur or business owner operating in the online world to “tell the future”, isn't it?    Well, allow us to be your “fortune tellers”!   To reveal to you 3 web design trends that will dominate the web design industry this month and which we anticipate that we'll “dictate” how designers and business owners will approach web design this year.   Ready?   Here are the most influencing trends in web design in January 2017:   1. Crafting Visually-Appealing Shopping Experiences    Stunning imagery + (unique) story telling products = new shopping experiences based on planting the “seed of desire” in your viewers!   That's how we could call these new shopping experiences that (usually) high-end online stores, with fewer items on their inventories, have started to craft.   We already “suspect” it to become one of the most influencing of all the 3 web design trends that we've selected for you for this post! Definitely the trend that will influence how we do web design in Toronto!   So, you'd better give it a great deal of consideration if you own a Drupal e-commerce website or if you're planning to boost your business with one such website this year.   It might just be the surest way of setting yourself apart from all the common shops offering clunky shopping experiences, requiring to much clicking from their visitors, annoying them with too many options to select from and with over-sized navigation menus.    Set yourself apart and join the high end shops' exclusive league instead!   The league of those brands that focus on the pure beauty of their products and that masterfully showcase it to their users triggering a sense of desire in them. All while while making sure that their online shopping experience is seamless (take Amazon's example for instance).   It's no news to anyone: Instagram has influenced and will continue to influence the way digital business owners approach to web design in 2017.    So, bid on visually-arresting images, on card-style interfaces and remember to invest your products with a unique story (your brand's unique story) to “tell” your website's visitors!   First you visually dazzle them away with your high end design and it's only afterwards, once they've started to scroll down, that you reveal to them all the other “details” such as prices.   This is how major brands have been “charming” their customers with great success, so how about adapting their techniques to your own website?   Instill that sense of “gotta have this high-end, beautifully designed and unique story-telling product” in your website's visitors!   2. Using Ample Negative Space for Directing Viewer's Eye   When used right, the web design technique of "playing with" an ample “empty” space is such a powerful one!   Whether we're talking about the “empty” space that you'll decide to surround your images or text with, or about the background color or simply the strategically placed white space on your website, this “airy” space on your website lacking any visual elements can help you direct your visitors' attention to key elements on your web pages.   You'll practically guide the viewer's eye to the more “crowded” part of your design. You'll actually “tell” your users where to look and where to click!    Note: when considering the use of ample negative space, think beyond (commonly) symmetrical design! Get creative and strive to strike a visually impacting balance between text or images and negative space in a rather asymmetrical format.   3. Breathing Life In Material Designs Using Pastel Colors    Get ready to witness a shift in the usage of colors in web design this year!   If bold, neon colors have been “the go-for trend” in 2016, we've been collecting some “solid proofs” that pastel hues will steal the spotlight this year! As a Toronto web designer or entrepreneur operating in the digital “realm”, you should definitely keep an eye on how this trend will continue to evolve over the year!   Softer colors will climb the colors' hierarchy, going from (just) background colors to hero headers'/main imagery's dominating colors.   Expect to witness more and more brands (and you should seriously consider jumping on this trend yourself, too):   pairing pastel colors with images featuring the same soft hues pairing photography with imagery featuring the same pastel palettes   Note: pastel colors will continue to perfectly complement material and flat designs as they've had over the last years, too.   So from this point of view there's nothing new under the sun in 2017's web designs! And yet, softer colors won't be playing just a “secondary” role, somewhere in the background.   Designers will start matching and pairing them in various ways for putting together the central images themselves.   Therefore, you'd better start considering playing some more with pastel color palettes when designing or redesigning your Drupal website/s this year.      What do you think? Will these 3 web design trends, that have influenced designers more than other trends this month, turn into THE most powerful ones this year?   Which one(s) of them (if any) is it more likely to “influence” you, too, when you develop the web projects that you've planned for 2017? ... Read more
Adrian Ababei / Jan 06'2017
7 Dark UX Patterns and Their Negative Impact on Your Brand Reputation
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! ... Read more
Adrian Ababei / Dec 21'2016
6 Techniques to Create an Effective Visual Hierarchy on Your E-Commerce Website
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!   ... Read more
Adrian Ababei / Dec 20'2016
Does Your Website Tell a Story? Part 2
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?  ... Read more
Adrian Ababei / Dec 17'2016
Does Your Website Tell a Story? Part 1
“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!  ... Read more
Adrian Ababei / Dec 16'2016
Consider These 5 Aspects When Picking Your Base Theme in Drupal 8
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? ... Read more
Adrian Ababei / Dec 12'2016