In light of the recent COVID-19 pandemic - OPTASY would like to offer DRUPAL website support for any Healthcare, Government, Education and Non-Profit Organization(s) with critical crisis communication websites or organizations directly providing relief. Stay Safe and Stay Well.

6 Techniques to Create an Effective Visual Hierarchy on Your E-Commerce Website

6 Techniques to Create an Effective Visual Hierarchy on Your E-Commerce Website

by Adrian Ababei on Dec 20 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!

 

Development

We do Web development

Go to our Web development page!

Visit page!

Recommended Stories

Blog Placeholder
The design and development industry continues to grow more competitively over the years. Agencies that have specific niches and all-around firms are popping left and right. Aside from those, there are also different types of development and design works. As a player in this game, we are driven by our clients’ reception. We value their success and their feedback more than anything else because that’s how we will continue to thrive and grow. We are OPTASY, a digital commerce, marketing, and web development agency based in Toronto. With 16 years of experience under our belt, we’ve experienced so many ups and downs that equipped us with the knowledge we need. We’re an internationally renowned and award-winning team that continues to work hard for our clients. With that said, it has just recently come to our attention that we’ve been selected by Clutch, an established B2B review agency, as one of our nation’s industry leaders. Our team has ranked among the top Drupal and Magento designers and developers because of our spot on projects. "We are thrilled to have been chosen as one of the leading web developers by Clutch!" - Adrian Ababei, CEO of OPTASY, Inc. Clutch also created a list of the top fifteen companies. They measured agencies’ ability to deliver and service focus to determine the industry leaders — and OPTASY ranked sixth on their Leaders Matrix. In addition to that, our team is also found on The Manifest’s, Clutch’s sister site, top 100 mobile app developers in Canada list. This helps us prove that we can handle different projects and deliver phenomenal results. These two recognitions are igniting our drive to further our success this 2021. We are grateful for those who support us, especially our clients. This means so much to the whole OPTASY team.  What can we help you with? Contact us and let’s start collaborating! ... Read more
Adrian Ababei / Feb 15'2021
5 tips to pass your Acquia Site Studio (Cohesion) Certification Exam
A few weeks ago, I had the chance to take the Acquia Site Studio (formerly Cohesion) Certification exam. In this post we are going to discuss why I took this exam and more importantly, how I passed it and became an Acquia Certified Site Studio Site Builder. Optasy and its commitment to quality through knowledge You already know that quality is part of the corporate culture of Optasy. For us quality is a key factor to protect our clients' investments and guarantee them a high ROI. But having a good QA department is not enough. Actually, it's often too late when the QA team detects an issue. At Optasy we prefer to ensure quality at the early stages of our projects, analyzing deeply the needs of our clients and transform them into effective digital experiences but we also know that the quality of the code we produce comes from the experience and the skills of our developers. That's why Optasy has an internal 'skill knowledge acquisition program' to help its employees (optasians) to acquire new skills or improve them. This program gives to each optasian one day off per month (paid by the company) to study a particular field. As a way to ensure knowledge acquisition and validation, optasians also receive paid leave to study and give their Acquia certification exams. This includes the exam cost too, that’s why many of the optasian developers are actually Acquia Certified developers or Acquia Certified site builders All things considered, it was a pretty easy choice for me to take the exam, not only do I get to improve my skills, but I get paid for it too! What are the Acquia certification programs? Acquia is a preferred Optasy partner that delivers a cloud-based digital experience platform built on Drupal that enables organizations to build experiences that scale. Acquia is committed to facilitating certification programs allowing developers to validate their Drupal skills year after year. Acquia certification exams are administered at Kryterion Testing Centers in more than 750 locations across the globe. Exams are also available as online-proctored tests and are often offered at DrupalCons across the world. What is Acquia Site Studio? Acquia Site Studio (formerly Cohesion) is a low-code solution for building and editing Drupal sites. As an Acquia partner, our team got the chance to become an early adopter of the technology.  Acquia Site Studio is a sort of layout builder on steroids without writing any line of code. Not only can you build layouts or templates, but also you can build whole websites from the headers to the footers, and everything in between, like components and widgets, just by using the interface. No code required! It's a kind of atomic design system (like Pattern Lab) where you can create and preview CSS style guides, components, template layouts, page layouts or view layout from a visual user interface with simple “drag and drop”. And all of this within your Drupal site! To be fair, Acquia Site Studio is an amazing tool allowing designers and marketers to create and modify any layout component without calling the development team. If you’re a designer with no coding knowledge you’ll be able to create totally unique layouts based on your designs using intuitive drag and drop layout builder. If you're an editor, you may choose the layout you want to use and add all the pre-designed components you wish. Want to add a slider or a 'Related Articles' block? You drag and drop it in your layout! 5 tips to successfully pass your Acquia Certified Site Studio exam As other Acquia Certification exams, the Certified Site Studio exam requires both experience and knowledge. Though the test is not difficult, it’s not something you want to run into unprepared. From my experience, the questions ranged from a very low to medium range of difficulty, there were barely any difficult questions. This exam validates your ability to: Understand the features and functionality provided by Site Studio Install and configure Site studio environment on new or existing websites. Build a website using Site Studio style builder, components and website structure design elements. The official description of this exam can be found on Acquia's certification overview page. But in short: The tests are all multiple choice. They don't require that you actually configure a Drupal site or write any code. They are available in person at a testing center, or at home by installing the exam software on your computer. The price was $155 (In my case, Optasy paid for the test) Get a good understanding of Drupal Layout Builder As I mentioned earlier, Acquia Site Studio is a Layout Builder on steroids and many concepts are the same, so having some experience with this Drupal module will help you a lot, like the inline editing tools or the concept of drawing element into the layout. This is not mandatory, but I felt really comfortable with Site Studio having this previous experience. Read carefully the contents of the exam On Acquia's certification overview page you'll find the blueprint of the exam like the following: But below it, you'll find the content itself. Read it carefully and repeatedly. This should be your guideline during your study. This will help you focus on what really matters but also to recap and structure your notes. Read and study the documentation While there are really good videos on the Acquia Academy site about Site Studio, watching all of them won't be enough. If you don't have prior experience with Site Studio, it's a good starting point. But it definitively won't give all the knowledge you need to pass the exam. Reading the documentation should sound obvious, but you'll really need to read and study all the documentation in depth. Don't leave anything behind cause the exam covers all the aspects of Site Studio, from the basics to more advanced topics. This will also give you the right vocabulary to understand the questions of the exam, since sometimes they can try to trick you changing just one word. So the technical vocabulary has an important role, and that's where the documentation comes into play. Write down some notes after reading each section. This will help you a lot during the recap! Train on the Acquia Site Studio demo environment You can request an online demo environment for free at the bottom of this page The main benefit is that you won't need an API key or an Agency key, so you can test Site Studio for free, the environment acts just like a normal Drupal website. and the site will be all yours to experiment on. This site will be your friend during your study, you should test everything you learned in the documentation here. Do it several times and try different cases. The night before the exam, after reading back your notes, try to build a site from scratch in this environment to recap all the main concepts. This is key! Don't forget the 'Miscellaneous concepts and features' part These three concepts are not placed in one section, they are dispersed in the documentation. Study and practice all of them because you'll have a question about each one. They are only three, it doesn’t sound like a lot but they are worth 15% of the exam! That is a quick and easy win! A bonus tip What really worked for me was to read a section, practice the concepts of this section in the demo environment, read again the same section and take some notes. The day after, read all the notes of the previous day, do the same 7 days later, reading back your notes and practicing again on the demo site. That way, 80% of what you studied will stay forever in your memory. Conclusions Acquia Certification Site Studio Site Builder can be a good way to validate your skills and knowledge There are barely any difficult questions Study all the documentation because the exam is based on it, but also because the exam will cover all of it. Practice a lot, recap a lot. ... Read more
Karim Boudjema / Aug 27'2020
Why Do You Need a User Journey Map? 7 Clear Benefits of Customer Journey Mapping
How precisely does a user journey map help you improve the user experience on your website/app? What are the benefits of customer journey mapping?  Should you expect a direct impact on your conversion rate? In other words, why would you bother creating one? In this post, I've listed the 7 best answers (or “benefits”, if you wish) to your legitimate question: “Why use customer journey mapping?” 1. But First: What Is a User Journey Map? What exactly is a customer journey? And why should you bother... mapping it? It's a timeline that shows all the touch points between the user and your website or application, along with the emotions, motivations, and thoughts that he/she experiences at each step of the process. A shorter “definition” would be: A user journey map is the visualization of an individual's relationship/experience with your website/app across different channels that he uses to interact with it, over time. Does this answer your question: “What is user journey mapping in design thinking?” With this map at hand, it becomes easier for you to... locate the weak spots, where you need to improve the user experience... Too many teams focus almost exclusively on the user experience at the top and on the bottom of the sales funnel and underestimate the steps in the middle. So, they ignore precisely those touchpoints that drive conversions...  2. Why Use User Journey Mapping? Top 7 Benefits What's the purpose?  Why and when to use a user journey map? What design problems does it help you solve? Here are 7 strong reasons why you'd want to bother mapping users' journey on your website: 2.1. It urges you to adopt a more user-centric approach to web design In short, you get to see your website/app through the user's eyes. From his/her point of view. You step into the user's shoes, see how the user interacts with your site, and detect those areas of the user experience that... could be better. 2.2. It helps you answer your “What if...?” questions In other words, with all the valuable information of a customer journey map at hand, you're free to brainstorm ideas. To plan new features, ambitious updates for your website that would: improve the user experience increase engagement with your website and eventually... boost conversions 2.3. It enables you to make strategic recommendations backed up by UX data Are you monitoring quantitative KPI metrics in your company? If so, then a user journey map will help you back all your future recommendations for improving your site's performance with user experience data. 2.4. It helps you see where exactly your website doesn't meet the user's expectations By mapping the customer journey, you get to detect those specific systems and processes — part of the user's journey on your website — that are not aligned with his/her expectations. And to address these inconveniences that are costing you sales. 2.5. It helps you identify opportunities and pain points in the user experience Opportunities that, otherwise, you might just... overlook. And which you can now tap into for... further research (the “what if” question, remember?) A customer journey map helps you visualize both successes —  where your website performs best from a UX standpoint — and areas where you could make an impact. 2.6. It gives you a realistic picture of the user experience on your website Maybe you're convinced that you're doing a great job, yet users are having a really bad experience.  Mapping the user journey will provide you a realistic evaluation of the situation from the user's perspective. 2.7. It helps you evaluate the impact of the changes that you make to your website A user journey map makes a great tool for measuring the impact of the updates that you make.  Updates that you'll decide to implement based on the information that such a map will provide you with. To sum up, here's a short inventory of the benefits that you get from mapping the user journey: you improve your website's/app's design you improve conversion funnels you can compare the experiences of different audience segments you get to “fuel” your user research you get to measure the impact of touchpoints 3. How to Create a User Journey Map: 8 Steps Now that you know why you'd want to map your user's journey on your website, let's see how you do that. What key stages should your user journey map template include? And I've broken the whole process down into 8 simple steps: Step 1: Set a scope for your customer journey map Which could go from a high-level map — the end-to-end user experience — to a more elaborated map, that focuses on one specific user interaction (i.e. filling in the check out form). Step 2: Create your user persona To put together an accurate persona profile, you need to do some user research. Collect as much relevant information about your target audience as possible before putting together the user persona's profile. Step 3: Determine the scenario and the user expectations For instance, a scenario could be: buying an item from your store using your eCommerce app. Whereas the user expectation, in this case, could be: having that item delivered in 2 days at most. Step 4: List the touchpoints It's that step in creating your user journey map where you make a list of all the user actions and interactions with your website/app, as well as of all the channels associated with them. Step 5: Define the problem that the user's trying to solve What's the user's motivation/intention?  What drives him/her to interact with your website?  Is he/she looking for more information on your products/services? Or has he accessed your website to buy a specific product? Step 6: Make a Sketch of the User Journey With all the information you've collected up to this point, put together a step-by-step interaction map. Where each “step” stands for a specific experience that the user persona has when interacting with your website. Step 7: Pinpoint the user's emotional state at each step in the journey What does the user feel at each step of interaction with your website/app? This empathy map will help up visualize the “ups” and “downs” in the user experience, so you should know where to... intervene. Step 8: Validate and adjust the user journey accordingly Rely on the information you will have collected during your usability testing sessions and from your app analytics to put your user journey map against a real use case. No matter how truthful your map might look to you (since you know it's based on intensive user research), it's crucial to validate it and to... adjust it, if needed. 4. User Journey Mapping vs User Story Mapping “Is a user journey like a user story?” Well, there are some key differences to be aware of. What's a user story? user stories describe small, specific tasks a group of user stories forms an “epic” they're essential for user acceptance testing and agile development The standard formula for creating a user story statement if the following: As a..., I want to..., so that I...” For instance: As an SEO specialist, I want to keyword-optimize this text, so that the website ranks higher in Google search results. And how is a user journey map different from a user story? When you map a customer journey you start with post-in notes on a whiteboard. You: determine who your website/app addresses to sketch the big picture detail each “epic” define a release strategy define a learning strategy (small experiments to minimize risks) define a development strategy Is it much clearer to you now why you need a user journey map for improving the UX  on your website, but the process seems too... time-consuming to you? Just shift the burden to us then... Drop us a line and let's identify all those opportunities for improving the experiences your users have when interacting with your site/app. ... Read more
Silviu Serdaru / Aug 26'2020