Wayfair vs. Arngren.net: A Comparative Analysis of Good and Bad UI/UX in E-Commerce Platforms

Introduction:

What is UI and Why It Is Important?

User Interface (UI) is the point of engagement and communication between humans and machines. In the context of a website, it acts as the bridge connecting users to the platform and extends beyond just aesthetics, encompassing a blend of design elements and functional attributes.

  In today's fast-paced digital world, the quality of a website's interface can make or break a user's experience. The design and usability of a website can determine whether a potential customer stays or exits in frustration.  A good design interface can lead to higher conversion rates and customer satisfaction, while a bad design interface makes it difficult for users to navigate the system or complete tasks efficiently, leading to frustration and ultimately reduces engagement.

Wayfair vs. Arngren.net: A Comparative Study of Interfaces with Good and Bad Design:

To highlight the vast difference in user experiences, and to demonstrate how a good design can significantly enhance user satisfaction and engagement, while a poor design can drive users away, I compared two websites: one with a good design interface Wayfair (https://www.wayfair.com/) and the other with a bad design interface Arngren.net (https://www.arngren.net/). Though both are e-commerce websites that offer products for sale online, however, they differ significantly in terms of design quality, user experience, and usability. The criteria that I used to make the comparative analysis include:

1. Usability                                   2. Accessibility                             3. Visual Design                            

4. Interaction Design                    5. Cognitive Load                         6. Error Handling

 

1. Usability:

While analyzing the usability of Wayfair's interface, I noticed that its interface is very easy to use as it has a well-organized layout that makes it easy for users to access important information like product descriptions, specifications, and prices. Its interface is featured with clearly labeled categories and the search feature which helps users find things faster by providing autocomplete and predictive text suggestions. Users will experience less cognitive burden and find the website easier to navigate. A streamlined checkout process is provided. Furthermore, users may easily refine search results by using Wayfair's user-friendly filtering and sorting options.

 

     On the other hand, while analyzing the interface of Arngren.net, I noticed that its interface is cluttered with a large number of products shown on each page, in an unclear order. Users may find this disorganized design to be annoying and less user-friendly as it becomes difficult for them to focus on what they're looking for. Furthermore, without obvious visual clues and structure, they may find it challenging to recognize clickable components, move between pages, and perform tasks. Flashing banners and animated GIFs create distractions that may interfere with users' ability to concentrate on the task at hand.

2. Accessibility:

Web Content Accessibility Guidelines (WCAG) provide detailed recommendations for making websites accessible to people with disabilities [1]. During the accessibility analysis of Wayfair's interface, I observed that it has numerous accessibility elements to ensure that users with visual, auditory, motor, and cognitive limitations, may access and engage with the website efficiently.  Even though everything on the interface is clearly readable, still the interface allows the users to adjust the magnification and font size, allowing visually impaired users to comfortably read the content. Alternate text is included to help visually impaired users in comprehending the purpose of an image. It maintains appropriate color contrast ratios between text and background to ensure readability for visually impaired users.

     On the other hand, Arngren.net's interface makes it difficult for the individuals with low vision problems to distinguish text and graphical elements on the website due to its crowded background and vivid color palette. Due to the insufficient color contrast, unusual layout, animated GIFs, and heavy picture usage, the readability and usability for visually impaired users is hampered as the screen readers find it difficult to understand and efficiently communicate the content to such users.

3. Visual Design:

While reviewing the visual aspects of the interface, I observed that it has a simple, modern design aesthetics, with an emphasis on high-quality images. Whitespaces and the grid style allows users to easily distinguish the products making it possible for users to view several items at once. Throughout the interface, white backgrounds and soft accent colors are utilized sparingly and the overall visual attractiveness is enhanced by the unified color scheme. Its interface is free of errors. There are no grammatical or spelling mistakes, everything is very clear and understandable.

     On the other hand, Arngren.net's interface is simple and out of date. It seems messy, with a disorganized collection of components. The professionalism of the website is undermined by the use of cluttered background scenes and poor-quality imagery. It uses an informal and inconsistent typographic style. The typography's inability to produce a unified visual hierarchy makes it challenging for readers to comprehend the text. Excessive number of products are shown on each page without a clear hierarchy or organization which makes it difficult for users to traverse the website and quickly locate what they're looking for. Its color scheme is also very showy and ugly.

4. Interaction Design:

Wayfair's interface provides similar interaction patterns as that of other e-commerce websites, like:

• It provides an "Add to Cart" button, which helps users in adding items to the cart.
• Filtering and sorting options are available to improve the search results.
• Choosing different product options, such as size, color, or number, using sliders or dropdown menus.

Throughout the buying process, it provides users a feedback to validate the activities. The following are a few instances of feedback mechanisms:

•  Confirmation messages when a purchase is finished or when user adds products.
•  Visual cues like progress bars and loading spinners are used to notify users about the current processes.

 

    On the other hand, Users may become frustrated by Arngren.net's inconsistent interaction patterns. They may encounter difficulties in comprehending how to engage with various features and functionalities.There is no add to cart button available. User has to click on the buy button directly, which either appears on the item or at some other location. All this detracts the user and reduces customer satisfaction. There is no option available for sorting and filtering the products. Even the search functionality is not clearly visible on such a cluttered interface. Furthermore, it contains many broken links, which on opening displays a 404 error page, which means that the page has been moved.Arngren.net's navigation is unconventional and lacks clear organization. The navigation links are inconsistent. Somewhere these links are placed in the center of the page, somewhere at the start, while somewhere at the end of the page. Buttons lack a clear visual cue that suggests they are clickable.

 

5. Cognitive Load:

During my analysis, I found that Wayfair's interface offers consumers an extensive selection of products from several categories, which might lead to an increase in cognitive load because of the sheer number of alternatives. Nonetheless, the user interface reduces complexity by providing simple navigation, filtering choices, and search capabilities, which makes it easier for users to identify relevant products. Product imagery, descriptions, and prices are clearly displayed.  Product descriptions, navigation labels, and other content is easy to read and comprehend because of the legible text and typography. Consistent usage of visual components like fonts, colors, and symbols gives the interface a coherent and a cohesive look. Users can anticipate where to locate information since navigation structures are consistent.

     On the other hand, Arngren.net's interface looks complicated, with a disorganised layout, multiple products shown on each page. Furthermore, there are no sorting and filtering options. Even though it is difficult to find the search functionality on such a cluttered interface.  Buttons, and navigation links lack easy-to-understand labels. Words are overlapping and are hard to read and understand. Cognitive load is increased by the inconsistent design of the interface. Varied pages of the website have varied font styles, colors, and layouts, which confuses consumers and makes it more difficult for them to anticipate how various elements act.

6. Error Handling:

Nielsen’s Usability Heuristics highlight the need for error messages to help users recognize, diagnose, and resolve issues and emphasize that these messages should be written in plain language, clearly identify the problem, and provide constructive guidance on how to fix it [2]. Wayfair's interface allows users to easily identify and receive timely information about mistakes. Error messages are displayed clearly next to the appropriate form fields or input regions when users enter inaccurate or partial information. These messages make it apparent what kind of error has occurred. Error messages help users understand what went wrong and how to proceed by explaining the problem in clear terms and offering explicit instructions on how to fix it. 

     

 

 

    On the other hand, even though Arngren.net provides error handling mechanisms and effectively communicates the users about it, but its way of displaying an error message is not good as it occupies too much space and distracts the user. For instance, if a form is submitted with incomplete or incorrect information, this website provides a clear feedback regarding what went wrong or how the error should be fixed, but the error message occupies too much space.

    Conclusion:

After analyzing both the interfaces, I identified the following strengths and weaknesses:

Strengths of Good Design Interface:

• Easy Navigation: Wayfair excels in intuitive navigation. The clearly labeled products, prominently displayed categories, and user-friendly search box make it effortless for users to find what they need. This thoughtful layout enhances the overall user experience, allowing customers to locate items quickly and easily.
• Rich Product Presentation: The interface shines with its visually appealing product displays, featuring comprehensive descriptions, high-quality images, and user reviews. This wealth of information not only captivates users but also aids them in making informed purchasing decisions, fostering confidence in their choices.
•  Customization Features: Wayfair offers tailored options, such as curated collections and personalized product recommendations based on browsing history. These features enhance user engagement by providing relevant content that resonates with individual preferences, ultimately boosting satisfaction.
•  Responsiveness: The UI is designed to be fully responsive, ensuring a seamless experience across various devices and screen sizes. Whether accessed on a desktop, tablet, or smartphone, users enjoy consistent usability and functionality.
•  Accessibility Features: Wayfair demonstrates a commitment to inclusivity by integrating accessibility features like keyboard navigation support, screen reader compatibility, and alternative text for images. These elements enhance usability for individuals with disabilities, ensuring a broader audience can navigate the site with ease. 

      

     Weaknesses of Good Design Interface:

• Slow Loading: One notable drawback is the slow loading times, particularly on pages rich in text and images. This lag can frustrate users, leading to increased bounce rates and diminished satisfaction, ultimately affecting conversion rates.

 

Strengths of Bad Design Interface:

• Rich Product Information: One of the standout features of Arngren.net is its inclusion of detailed product information. Each listing typically provides comprehensive descriptions, specifications, and high-quality photos, equipping users with the knowledge they need to make informed purchasing decisions.
• Uniqueness and Eccentricity: The interface is marked by quirky design elements, such as bold colors, flashing banners, and animated GIFs. These distinctive features can attract a specialized audience seeking something unconventional, adding a layer of personality to the site.
• Error Handling Mechanism: Arngren.net effectively communicates errors to users through its error handling system. Clear messages inform users about what went wrong and how to fix it, reducing frustration and effort in troubleshooting.

 

Weaknesses of Bad Design Interface:

• Cluttered Layout: A significant drawback is the cluttered layout, which often displays an overwhelming number of products on each page. This can create a distracting visual experience, making it challenging for users to focus on specific items or find what they need.
•  Inconsistency: The website suffers from inconsistent design elements, with varying font styles, colors, and layouts across different pages. This inconsistency can confuse users, as they struggle to predict how various components function. For example, navigation links may appear in different locations on different pages, increasing cognitive load and complicating user interactions.
•  Unresponsive Design: The lack of mobile optimization results in a poor experience for mobile users. Interactive elements can be difficult to use on touch devices, and the website does not perform well on smaller screens, limiting accessibility for a significant portion of users.
•  Limited Accessibility: Users with disabilities may face challenges navigating the site due to inadequate keyboard navigation, poor color contrast, and lack of screen reader compatibility. These limitations can hinder full interaction with the interface for some user groups.
•  Possibility of User Overload: The abundance of visual stimuli, such as flashing banners and animated GIFs, can overwhelm users, detracting from important tasks. Instead of enhancing engagement, these elements may lead to user overload and frustration.

 

Recommendations to Improve the Bad Design:

Based on my findings, I recommend the following design enhancements:

•  Simplify the Layout: Clear up clutter by making the layout simpler and content more logically arranged. To increase readability and ensure coherence and uniformity between pages, use whitespace and a grid-based layout. Avoid overlapping of text and other elements.
• Boost Navigation: Create menus that are easy to understand and navigate by employing clear and simple navigation. Give menu items clear labeling. Include a search box with autocomplete feature to help users find certain products more quickly. Furthermore, there should be no broken links. Keep on checking the links to ensure that the pages are not moved.
•  Make it Responsive: Make sure the website is completely optimized for mobile devices. Use responsive design strategies to dynamically adjust the content and layout according to the user's device.
•  Maintain consistency: Standardize font, color scheme, and visual components across the interface to provide a consistent design language.