Did you know it’s illegal to have an inaccessible site in Norway – that is, a web site that did not invest in accessibility? As technology improves and new legislation that manages accessibility is put into action, accessible design is no longer optional.
In the ever-evolving world of eCommerce, the devil is truly in the details. While major elements like layout, color schemes, and navigation play significant roles in shaping the user experience, it’s often the smaller, seemingly minor details that make the biggest impact. One such element is micro-interactions. As a UX/UI designer, understanding and implementing effective micro-interactions can elevate an eCommerce platform from good to exceptional.
In our last accessibility blog, we discussed the fundamentals of accessibility, its legal requirements, and why it’s essential for creating inclusive digital experiences. Accessibility goes beyond merely accommodating users with disabilities; it involves designing inclusive and functional experiences for everyone, including those with situational or temporary impairments. In this blog post, we’ll dive deeper into implementing these accessibility principles and exploring best practices and strategies to create both compliant and user-friendly designs.
Accessibility & Usability – What’s the Difference?
Both are integral to an excellent User Experience (UX) process, yet they are distinct concepts. Usability focuses on ensuring designs are effective and satisfying to use. Accessibility, however, ensures that all users can access an equivalent user experience, regardless of any disabilities.
How to Adhere to Accessibility Guidelines?
WCAG (Web Content Accessibility Guidelines) are the international standard for building accessible sites and applications on the web. They were developed by the Web Accessibility Initiative, a W3C initiative. You can learn more about the WCAG here.
It’s important to address accessibility from the very beginning of your project, starting at the research stage rather than waiting until the design phase. By considering accessibility early on, you can reduce the need for extensive modifications during development. Delaying attention to accessibility makes it significantly more challenging to address issues later in the project.
WCAG Principles
WCAG principles are four principles that ensure web content is accessible to everyone. These principles — Perceivable, Operable, Understandable, and Robust (POUR) — focus on making content visible, usable, clear, and reliable across different technologies and user needs. By adhering to these guidelines, designers and developers can create web experiences that are inclusive and functional for all users, including those with disabilities.
Perceivable – Information and user interface components must be presentable to users in ways they can perceive.
This means that users must be able to perceive the information being presented (it can’t be invisible to all of their senses)
Operable – User interface components and navigation must be operable.
This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform)
Understandable – Information and the operation of the user interface must be understandable.
This means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding)
Robust – Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible)
Three WCAG Levels
WCAG has three levels of requirements, increasing in their scope and difficulty to support, with Level A being the lowest level and Level AAA being the highest. Each level includes the success criteria from the lower levels.
Level A guidelines
This level includes providing text alternatives for non-text content, making sure that the site is usable when stylesheets are turned off, and ensuring that the site is keyboard accessible. Support for TalkBack/VoiceOver is also included.
Level AA guidelines
On top of the Level A guidelines, this level takes additional steps to ensure that content is accessible to users in a wider range of scenarios. Most accessibility regulations require this level at the moment.
Level AAA guidelines
Represents the highest level of conformance and the strictest set of guidelines. It aims to make information and user interfaces accessible to all users, including those with severe disabilities. This level is recommended for tools that have elderly and disabled people as a target group.
How to Make Your Design More Accessible
1. Maintain consistency
Do: Ensure that repeated components follow the same design, as well as maintaining consistency through your components that have the same functionality.
Don’t: Avoid recreating the same things in a different style, this will lead to unnecessary confusion and difficulty in use.
2. Scalable text
Do: Ensure that text can be resized up to 200% without losing functionality or readability. This accommodates users with visual impairments who need larger text.
Don’t: Use fixed text sizes that the user cannot adjust, making your content inaccessible to those with low vision.
3. Use various elements to convey a message
Do: Combine text, colors, and shapes to effectively share information and convey a message.
Don’t: Rely solely on one method, as this may exclude many users.
4. Alt text for images
Do: Actionable elements must have an appropriate ID name. At the same time, images need to be provided with a brief description of what is on the image so the users who use screen readers can understand the meaning and intent behind the read elements. Make sure that you don’t just label it as “picture”; give it some context, describe what is happening in the image, and what the image is trying to convey.
Don’t: Label image elements as “picture” without context, as this benefits no one.
5. Color contrast
Do: Use high-contrast color schemes to ensure the text is readable against its background. Small text needs to pass the 4:5:1 color contrast ratio in order to achieve maximum readability. Large text needs to pass the 3:1 color contrast ratio in order to achieve maximum readability. There are various plugins to help you with this, such as Contrast and A11y Color Contrast
Don’t: Release designs without checking element contrast, as it can lead to more work later. It’s better to address this in the design stage.
6. Keyboard navigation
Do: Ensure all interactive elements (links, buttons, forms) are accessible via keyboard. Users should be able to navigate and interact with your site using their keyboard keys.
Don’t: Rely solely on mouse-based navigation, as many users with motor disabilities depend on keyboard navigation.
7. Avoid image and color dependency
Do: Include important information as regular text and additionally in image format. Adding visual cues will help visually impaired or color-blind users distinguish between the elements they are looking at.
Don’t: Avoid placing important information only inside an image. Images can be stretched; the right color contrast may not be met, and the content inside can become blurred or pixelated, making it harder for users to perceive.
8. Clear and descriptive labels for inputs, buttons, form fields, and links
Do: Make sure inputs, buttons, form fields, and links have a label that will help users make decisions. That label should complement the body of the dialog. This benefits all users since we’re not wasting anybody’s time and energy on clicks that are not valuable to them.
Don’t: Avoid the same generic labels for a wide array of options, as they are not precise enough.
9. Identify Errors
Do: Clearly indicate where and what type of error has taken place. Focus on the element in question, provide an error text next to it, use color, and describe the issue. The message should be specific and to the point.
Don’t: Avoid using color or text alone; using them together makes the message you’re trying to convey much easier to understand.
Tools and Resources
But the list doesn’t stop here. There are many more guidelines to explore, so check out the linked resources.
Designing with accessibility in mind is not just a good practice; it’s a necessity. By following these guidelines, you’ll create an inclusive, user-friendly eCommerce site that benefits all users, including those with disabilities. Remember, accessibility is an ongoing process. Continually test, iterate, and improve to ensure your site remains accessible to everyone. Your efforts will not only comply with legal standards but also create a more inclusive and welcoming online shopping experience for all.
Stay tuned for the next installment in this blog series, where we’ll discuss the business requirements of accessibility and how you can achieve them with Hyvä!
“I don’t care for stories, only cold, hard facts”, the eCommerce Man said. Then scowled.
But what gets people interested? There is no singular answer – we all have our own motivations – but in every aspect of our lives, stories take hold of us and keep us close. Novels, films, TV, video games, websites: there is a narrative in everything we consume that creates an emotional attachment and keeps us coming for more.
In today’s digital world, ensuring that your eCommerce site is accessible should be a moral imperative and will soon also be a legal requirement. The European Accessibility Act (EAA) that comes into force on June 28th, 2025, will require most digital products to conform to Web Content Accessibility Guidelines, level AA. This Act covers a broad spectrum of digital content and emphasizes the need for accessible online experiences for everyone, including those with disabilities. Let’s take a closer look at accessibility as a whole.
Data has revolutionized how eCommerce works today and, more importantly, significantly impacted decision-making. Nowadays, we (business owners, eCommerce managers, and development teams) turn to data for decision-making. However, we often struggle with data interpretation because we’re unsure how to define success.
Given the complexity and volume of data in eCommerce, this is not a surprise.
In addition to the main navigation, search is typically the second most popular strategy for finding products on eCommerce websites. Customers often use the search function when they know exactly what they are looking for or when the main navigation does not yield the expected results.
How do you design and configure the search engine of your Magento site for the best usability? Keep on reading!
It’s easy to fall into a creative slump—it happens to everyone. There’s nothing worse than feeling uninspired and unmotivated when all you want to do is create.
Humans are visual beings, and we process information based on what we see. Studies show that people remember 80% of what they see and 20% of what they read.
Ready to give your customers the best user experience on your Magento 2 store, but you’re still not sure how? Let us highlight some of the best UX features for Magento store owners included in Inchoo Flavored Magento, which we already introduced you to in our previous article.
Automotive parts website design has its challenges and they are revolving around parts search & fitment. Being in this industry for a long time, we’ve learned so much from observing an infinite number of visitors, converters, and returned buyers. We will be sharing our best practices in this blog post so keep reading!
So you’ve decided to do a complete site redesign or came to a conclusion your metrics don’t behave as you thought they would? Have you finally decided to implement that feature you’re sure will skyrocket your conversions?
Here are some common eCommerce design pitfalls we often see in the wild you think about when considering taking the next step in growing your eCommerce business.
Returns can be a major headache for eCommerce retailers. While in-store purchases don’t get returned so often, there are estimates that customers return up to 40% of goods bought online.
This is especially the case in the Fashion & Apparel industry. Online store customers can’t touch the product, hold it nor feel it during online shopping.
Some customers deliberately resort to the practice of over-ordering. This increases the quantity of returns and their negative environmental footprint.
Since the Covid-19 pandemic turned the online store into the only sales channel for many retailers, the problem with returns is more critical than ever.
In this blog post, we’ll demonstrate how one of our clients improved their returns management by developing a custom Returns Portal on the Magento platform.
Magento 2 checkout page is the crucial page of your Magento 2 store. It is the final stage of the checkout flow and only motivated users interested in purchasing your products will reach this step.
Many still remember the complicated 6-step Magento 1 checkout. Compared to that, checkout in Magento 2 has been significantly improved. Yet, there are some usability problems that we encountered during our analyzes, and there’s always room for improvement.
In this blog post, we’ll suggest design improvements for 5 known usability issues on the checkout page in Magento 2
The shopping cart sits near the end of the shopping flow – just a step before the actual checkout and payment process. It’s the place where totals, discounts, taxes, and shipping costs get calculated. Most importantly, it is a magical place where the final purchase decision often happens.
Besides providing an order overview, the cart page is also an ideal place to show some vital purchase information that can weigh in the purchase decision. It can also offer products for impulse shopping to increase the average cart value.
However, we often see shopping cart pages having high abandonment rates. There are many disappointments customers can face on the cart page and leave the store before completing the purchase. Here are some tips for Magento cart page design to lower those abandonment rates and push your customers to the checkout!
Product pages are the center stages of any web store. They carry significant weight in the purchase decision, and they are often the landing pages for people coming from search engines. It’s, therefore, important that product pages perform flawlessly for the customers.
Magento’s product page layout comes with several key elements, such as product name, product gallery, descriptions, pricing, CTAs, reviews, and upsells. Still, it leaves plenty of room for enhancements that can be incorporated into the product page design.
We’ll cover some of the fundamentals of Magento product page design and see how we can utilize existing elements and expand them to achieve more benefits for both your customers and your eCommerce business!
Category pages serve as a bridge between the homepage and the product pages, bringing the customers one step closer to finding the right products.
They are an essential step in a customer purchase path for customers browsing the store using the main navigation as opposed to search. They are also among the top pages customers will land on. It means that a lot of users will start their browsing and shopping process here. This makes them even more critical.
Read on to see the best practices for category page design in Magento.
Did you know that customers are more likely to land on a category or a product page of your Magento store than on the homepage? Nevertheless, the homepage remains an essential part of an eCommerce store for many customers who start their shopping process. It also acts as an anchor to refer back to throughout the shopping experience.
The homepage introduces the website, explains what it sells, and sets some expectations. It should convey brand values, inspire customers to explore, display product ranges – and accomplish that without visual clutter.
It acts as a shop window to an online store, so cramming things inside might result in a lower perceived value. You wouldn’t clutter your shop window, would you?
This article is the first from a series of articles that will address the concepts and best practices for creating Magento theme design. In this one, we’re talking about prerequisites for designing a custom Magento theme, the difference between custom and off-the-shelf themes and the decoupled approach for Magento theme design and development.
It’s been over a decade we’ve been surfing using our mobile phones. Gone are the days we browsed the internet on mobile phones in a hurry, used it to kill some time while waiting (or riding) the bus or to check the weather for the day.
Over the years, our mobile phones became fierce rivals to our desktop device, and they are slowly and surely taking over.
Are your optimizing for conversions? How do you measure the impact of UX design and incremental changes on an eCommerce website? What are the key metrics (KPIs) you should track to effectively monitor your website’s performance?
Is there a one-size-fits-all type of a report that can give you good enough clues on just how successful are all the efforts you (or an agency you are working with) are putting in? To see the results your optimization efforts brought in?
Here is a really good solution we’re introducing in working with our clients. An eCommerce UX Scorecard – check it out!
With great pride, we can announce that our designers Marko and Zoran have earned their UX certification after a demanding and exhausting program with the leaders in user experience, Nielsen Norman Group! And we must state that they are the first designers from Croatia who can proudly wear their NN/g UX certification badge.
Want to know more about the whole training and certification program, and the key benefits it brings to our designers and our clients?
If you have been involved in building your eCommerce website on Magento, you’ve probably come across some frictions between designers, frontend developers and online marketing team (I’ll leave out all other possible connections for the time being). Why?
Because, more often than not, the UX/UI designers on the project are “outsiders” who may have some great work behind them, but lack eCommerce and, in particular, Magento knowledge.
Now, is that even important? Should a designer understand the platform they’re designing for? And, let’s push that even further – should your designer be Magento certified?
As a website owner, you’ve probably invested a lot of time and money in development, UI design, marketing etc. But what was the last time you asked yourself questions like: “How easy is for users to find what they are looking for? What frustrates them? How do they feel and will they come back?”
Online shopping went through a dramatic transformation in the last few years. The responsive design is adopted and it is needless to say mobile is important in 2018, so what’s the next big thing?
Whether it’s a website, an app navigation, your mobile phone menu or the menu in your car – navigation is one of the fundamental features of every digital product. By providing clear and well-structured navigation, you relieve your users of confusion. This makes it easy for them to find what they’re looking for. If users can’t find their way around your product it will frustrate them.
The only point of contact your customer has with your online store, is the designed interface. Ever wondered exactly what they think of it? Long gone are the days when the design was purely a visual discipline. It shifted into a responsibility, where designers are also to be valued for their understanding of the product being built. Design doesn’t just paint the building, it builds the stairs to an overall better usability and collaboration of everyone included. It is necessary to update our processes with thorough understanding of end users, colleagues and stakeholders to make responsible and risk-reduced design decisions. Change through user testing is what keeps the design process relevant and competitive.
The buzz these days is all about design systems, but design system by itself is not enough to ensure consistency through all designs. When working with design systems, the main challenges are ongoing maintenance and informing everyone about the changes.
For a long time, there wasn’t a thorough solution for designers who design in Sketch which would provide easy access to the latest styles and propagate changed assets to team members. Yeah, we had the ability to share symbols via plugins for a while (Craft’s Library), but there were too many problems, and sharing library is too important to rely on a third-party plugin.
Our design team switched to working in Sketch a while ago but it wasn’t until version 43 we really started seeing some opportunities to change our workflows more significantly. It was also an opportunity for more designers to work on the same project as well as collaborate with developers more easily. If you’re looking for professional Magento web design services, feel free to check out our Magento Web Design Service for more information.
As designers, we’re often faced with a lot of questions about our process. We never just dive into design and bask in the glory of amazing typography and brilliant color schemes because without the phases that precede it – it just wouldn’t even begin to be possible.
Getting your store up is a process. One which starts with a revelation that, if you want to make things work in the long run, you’ll need a webshop. An online place for reaching new and informing existing customers. For them, it’s a brand new channel where they can buy your products. For you, it’s a strategic decision. Why? Because the idea behind that action is growing your business.
But, apart from choosing the platform or the hosting, you should also think about the visual appeal of your store. In this interview, Marko Briševac, one of Inchoo designers, answers the most frequent questions we get from prospective clients. Read more to find out what’s it all about!
Drop us a line. We'd love to know more about your project.
We use cookies on our website to support technical features that enhance your user experience. We also use analytics. To opt-out from analytics, click for more information.