Heuristic Evaluation of Filters, Search Bar, and Add to Cart Button in Mobile Apps.

Filters

Filters provide a set of controls to reduce items in a collection based on attributes the user is interested in (e.g., filtering items by creation date). Filters and their properties also double as discoverability agents that educate users about the data and what the overall system can offer

Anatomy of a filter

The identifier is the targeted property or category

The value is the specific value of the property you are looking for (amount threshold, specific date)

The relative is the intended relation

Layout and Placement

Top

A top drawer that expands down. Having filters live at the top of the page is pretty expected. The eye will inevitably scan over them

Eg — In H&M’s mobile app the filters are present on the top of the mobile app in an overlay container that displays as a side panel. Having filters live at the top of the page is pretty much expected by the user. The eye will inevitably scan over them.
In Amazon’s mobile app too the filters are present in the top right corner as a dropdown menu. Dropdowns in filtering flow are commonly used for a large number of sorting options or when there is a hierarchical structure to the filtering criteria.

Amazon(left) and H&M(Right)

Bottom

With a bottom drawer, you’d have to be sure it sticks on top of the content so it’s always visible. This is precisely what will make the filter button hard to miss; it’ll overlap on top of users’ precious data and it’s easier to reach with thumbs.

Eg — In Swiggy’s mobile app, you’ll find the filters after a little scroll to the bottom. Also, In Nykaa’s mobile app, you’ll find the filters in the bottom right corner. Users often want to filter content before they start browsing. Placing filters at the bottom allows users to apply filters as their first interaction with the content, helping them find what they are looking for more efficiently and it’s also in close proximity to their thumb so that quick action can be taken.

Icon/Label

Filter list

Tune icon

Eg — H&M, Swiggy, Redbus, Lenskart, Tira beauty

Funnel icon

Eg — Myntra, Nykaa,

Dropdown menu

Eg — Amazon

Examples of filter iconography — Nykaa and Swiggy

Filter Menu Flow

Full-screen form type of flow

In this flow, the user gets a lot of room to open and close dropdowns, and navigate around all the filters, before being satisfied and clicking ‘Apply’.

Eg — Amazon displays its feature in a full-screen form type flow as the users need to select multiple filters at a time so, a full-screen layout works best in this kind of layout. Usually, e-commerce apps use this kind of flow.

Amazon

Overlay/ Flyout flow

The original page remains visible, but it should be grayed out. You can limit the size of the filters and style them so that they appear simply overlaid over the original content no matter where they are located. Adding a subtle transparent overlay can help users recognize they’re in a temporary flow “on top” of the page.

Eg — In swiggy, It appears as an overlay container in 3/4 of the screen in a flyout format, ensuring that the user understands that the flow is temporary and will not be disconnected from the main screen.

Swiggy

Fetching methods

Live-filtering

Google Fonts

Live filtering means that the system pulls new results with every interaction done on the filters. This way you provide immediate feedback while preserving the user’s sense of place. But your data has to be clean so that fetching feels almost immediate.

E.g. — Google Fonts works with the live filtering mechanism where Selecting a single item from the list of filters? Fetch. Moving a threshold slider by one pixel? Fetch. Every interaction generates an output.

Batch filtering

Batch-filtering is when you fetch only once, at the very end of the user selection. This gives users dedicated time to think their selection through, scan all the options, and hit the Apply hard with a super refined query. Once users are done with their selection, they Apply to click out of the filter drawer and explicitly ask for results.

Eg — E-commerce apps like Nykaa, Amazon, and Myntra app allow batch filtering where you fetch only once, at the very end of the user selection. The user here can navigate the various dropdowns, search, and scroll away, and only when all their desired filters have been input, then they click a global ‘Apply’ button. This method works best for very heavy dataset apps.

Multiple filtering methods

Checkboxes

Checkboxes allow users to select multiple options from a list of choices; giving the ability to select multiple options simultaneously, making them ideal for filtering large datasets.

Eg — Swiggy uses checkbox categories like — delivery time, cuisines, ratings, and cost for two — allowing users to select multiple options from a list of choices simplifying the filtering process and making it easier for users to navigate through large datasets.

Nykaa uses Checkboxes in categories like brands, price, formulation, ingredients, etc. Checkboxes are easily recognizable visual elements. Their presence and state (checked or unchecked) provide immediate feedback to users about the options available and the choices they have made.

Swiggy(left) and Nykaa(Right)

Radio buttons

Radio buttons, a type of input control, allow users to select one option from a set of mutually exclusive choices. In filtering patterns, they serve the purpose of allowing users to make single selections from a range of available options.

Eg- Swiggy uses radio buttons for its sort option present inside the filters menu to allow users to make single selections from a range of available options. Radio buttons are designed for exclusive selection within a group. This is valuable in situations where a single, mutually exclusive choice needs to be made.

Sliders

Sliders are interactive input controls that allow users to select a range of values by moving a handle along a track. They are commonly used in filtering patterns to enable users to refine their search or filter results based on a continuous numerical range.

Eg- In H&M Sliders are used for displaying the price range as Users can easily slide the handle to select a specific minimum and maximum price, refining their search results accordingly.

Chips

Filter chips represent selected options within a larger selection of options through their small, self-contained form. In addition to allowing easy modification or removal of active filters, the chip provides a clear visual indication of active filters.

Eg- In Amazon’s mobile app, Inside the selected category of the filters, chips are used for the selection/application of filters. Chips serve as a visual representation of the applied filters, enabling users to select and apply multiple filters simultaneously.

Accessibility in Filters

Filtering accessibility refers to designing and implementing filters in a way that ensures users with disabilities and impairments can access and utilize them effectively. It involves creating inclusive filtering experiences that provide equal access and usability for all users.

Clear Reset Functionality:

Clear/Reset Buttons are user interface elements that allow users to quickly discard all applied filters and revert to the default state. Including a clear and easily accessible option to reset all filter selections, allows users to start anew if needed.

Eg- In Amazon, Clear filters are present in the bottom left corner which allows users to quickly discard all applied filters and revert to the default state.

Progressive Disclosure:

This is used to reveal advanced filters or secondary filter options, allowing users to see relevant options without overwhelming them initially.

Eg — In Myntra, Progressive disclosure is used to reveal advanced filters or secondary filter options, allowing users to see relevant options without overwhelming them initially.

Multiple Select Options

Allow users to select multiple options within a filter category to accommodate diverse preferences and refine search results.

Eg — Nykaa filters have categories like preferences too which include results like cruelty-free, vegan, sulfate-free, and organic, all of which cater to individual needs and Skin type

Search or Type-ahead Filters

A Search or Type-ahead Filter method is also used to offer such functionality for filters with many options — users can quickly find needed options instead of scrolling a lot.

Eg- Apps like Nykaa, and Swiggy offer such functionality for the ease of their user under categories like search brands, search cuisines, etc.

Visual Feedback in Filters

Filtering visual feedback refers to the visual cues and indications given to users to communicate the status and impact of their filter selections. It allows users to quickly understand the effects of their filters and aids in their decision-making process.

Methods of Visual Feedback

Applied Filters Display: Display the selected filters prominently, either in a separate section or within the filter interface itself. Provide clear visual indicators, such as tags or labels, to show which filters are active.

Eg — In Swiggy Applied Filters Display is present they highlight the filters applied with the help of dots that work as visual cues for users to see what filters have been applied.

Active Filter Count: Show the number of active filters alongside the applied filters display. This gives users a quick overview of how many filters are currently active and encourages them to review their selections if needed.

Eg — In Nykaa’s app the active filter count shows the number of active filters in the bottom right corner inside the APPLY button and in front of each category.

Results Count: Display the number of results that match the active filters. This helps users understand the impact of their selections and provides reassurance that their filtering is producing the desired outcomes.

Eg — The H&m app displays the number of results that match the active filters in the bottom area as Show XYZ no. of items.

Filter Highlighting: Highlight the selected filter options to distinguish them from the available options. This makes it easier to locate and modify their selections.

Eg — The Nykaa app uses checkboxes to highlight the selected filters so that the user can come back to the category and know which filters were selected to receive the desired results.

Search Box

A search box is a combination of the input field and the submit button. However since the search box is one of the most frequently used graphical control elements on content-heavy websites or applications, its usability is critical. Depending on the particular implementation, a search box may be accompanied by a drop-down list to present the users with past searches or search suggestions.

Anatomy of a Search Box:

The container holds all other component elements.

Leading Icon: The left side of the bar should contain either a navigational action or a non-functional search icon.

Trailing Icon: These actions can represent additional modes of searching (like voice search), a separate high-level action.

Hinted search text: Provide a short description of what the user will be able to search for.

Input text: Once the user starts typing, the hinted search text is replaced with the input text.

Placement

The search bar is centered and usually at the top of the screen. A prominent placement of search bars helps users easily find the entry point for their search queries

Labeling and Icon

Clear labels and icons in search bars enhance usability, provide guidance to users, ensure consistency, and promote accessibility.

Text Label: An app or a website can have a text label- “Search” or “Find More” etc. which clearly states the purpose of the bar.

Icons: Some applications incorporate the use of icons to convey the purpose which is usually displayed on one corner of the screen.

Text Label & Icon: In some cases, both text labels and icons are present in the search bar.

Eg. the Gmail app’s search bar is located at the top & uses a text label that says search in the mail. Netflix only uses an icon on the homescreen on the top right corner of a magnifying glass which allows users to tap and open a search screen to navigate through shows. The Swiggy app has both an intuitive design with a label and a magnifying glass icon on the right side of the text.

Auto Suggestion

As users begin typing, the interface dynamically generates suggestions related to accounts, streamlining the search process and helping users find specific tailored results. We see Parkinson’s Law being integrated into an auto-suggestion mechanism which becomes a valuable tool that enhances user efficiency, and satisfaction and saves overall time by presenting relevant options.

Eg. When a user types a certain word on Myntra, Swiggy, or Instagram, the auto-suggestion feature suggests a few prompts that might help the user streamline the process of searching for what they are looking for.

In the Netflix application, when the user types a movie name, it starts generating a strip of thumbnails of relevant suggestions in real-time.

Choice Chips

Chips allow users to enter information, make selections, filter content, or trigger actions. Chips should appear dynamically as a group of multiple interactive elements. From a user-flow perspective, they represent forking paths in an experience and they can be scrolled horizontally.

Filter Chip: Filter chips represent filters for a collection.

Eg. the Gmail application allows users to choose from certain filter chips to narrow down their search with “to”, “with” filters, etc. This helps the user to reach their desired search with ease.

Suggestion chip:

Suggestion chips help narrow a user’s intent by presenting dynamically generated suggestions.

Eg. In the Instagram app, when a user clicks the search bar on the explore page, recent topics, trending topics, and words appear as choice chips so they are easily accessible and the user might be intrigued to explore these options without having to specifically type or search them. Nykaa also uses suggestion chips for popular categories, products, etc when the search bar is clicked.

Recent History

The recent searches enable users to resume their search. In content-heavy platforms where there are abundant choices, users may want to revisit previously viewed content. Search history simplifies this process by allowing users to quickly locate and rediscover searches they have accessed before, improving content engagement and user retention.

Eg. Instagram, Swiggy & Myntra are applications that have heavy visual content as they have several products and categories available on the application or website. Having the recent history/search feature in these types of applications helps the user to retain their previous searches and resumes.

Assistive Features:

Voice Enabled Search: Allows consumers to seek information by speaking rather than typing. This technology allows for the simplicity and efficiency of the search process, resulting in a better UX and a more accessible environment for users with disabilities.

Eg. Swiggy and Myntra both have voice-enabled search. It helps their user to verbally describe what they are looking for.

Camera Upload:

Basically, users can use image search in two ways: take a photo or upload it. The site search engine will analyze the visuals and fetch similar results. This aids users in finding what they are looking for when they are unsure of how to describe but have a product/picture for it.

Eg. Myntra has a camera upload option where it allows users to upload pictures or captures of the product the user wants to search and it then provides related images of the same.

Navigation Buttons

In terms of navigation, the app integrates an arrow key for seamless transitions, ensuring users can effortlessly return to the main screen with a single tap. Additionally, the close icon provides users with the flexibility to delete their search queries swiftly.

Text Animations

Implementing text animations in search bar user interfaces can significantly enhance the overall user experience.

Hinted Search Animation: Animated transitions, such as changing text and keywords, capture the user’s attention and make the interface more engaging. An engaging interface encourages users to interact more, promoting a positive user experience.

Eg. Swiggy and Myntra both have hinted search prompts that keep on changing on the screen before a user decides to type in. It prompts the user to engage with the feature ensuring they try to utilize the search bar for their use.

Input Animation: Text animations provide visual feedback to users, indicating that their input has been recognized. This feedback is especially crucial in search bars, where users rely on immediate visual cues to confirm that their query is being processed.

Add to cart button

The “add to cart” button is a crucial visual feature that contributes to your online store’s success. This simple button has a high impact on the revenue-making of your business. You can easily choose the products you want to buy, put them all into the cart, and then pay for them in one shot when you get to the checkout page.

Anatomy:

• Call to action
• Container
• Icon

Placement and Positioning

Add-to-cart buttons are usually located at the bottom of product descriptions and images or on pages that allow users to review the information before making a decision and provide an option to continue shopping. Applications use a combination of button styles on the same screen to focus attention on a primary action while offering alternatives.

Fixed Position: In this case, the button has a fixed position on a product page and doesn’t move while scrolling. The button’s fixed position provides a consistent user experience, as the button’s location doesn’t change regardless of where the user is on the page.

Eg. When a user navigates to a product page on Amazon, they will see images and product details first. Below it, they will find the add to cart button which remains fixed.

Amazon

Sticky Position: A sticky button is a persistent website or app element that remains visible to users as they scroll through the product page. This button allows users to easily add items to their shopping cart without needing to scroll back up, enhancing the user experience and potentially boosting conversions by streamlining the purchasing process.

Eg. Nykaa and H&M both have sticky buttons which remain on the screen ensuring that the button is always in the user’s immediate view. Sticky buttons can be more space-efficient, especially on mobile devices, where screen real estate is limited. H&M has the button fixed on the screen but as the user scrolls, the button appears as a sticky at the bottom of the screen.

Nykaa

Icon/Text-Based

Text/Label Buttons: Label text is the most important element of a button. It describes the action that will occur if a user taps a button. Users immediately understand the purpose of the button. Here, the text on the button and the call to action being used is very important as it’s the communicating factor that will motivate and inform the user.

Eg. Myntra uses a clear text label “add to bag” for their primary action button which lets the user know about the clear purpose of the button and what it does whereas in H&M, the brand only uses the text “Add” along with an icon, this leaves ambiguity and the purpose of the button isn’t clear. The word Add doesn’t simplify the process for the users and instead might confuse them.

Icon Buttons: Icons visually communicate the button’s action and help draw attention to the button. Icons take up less space than text, which can be especially important in responsive designs and mobile interfaces where screen space is limited.

Leading Buttons: When an icon is followed by text to convey its purpose, it is called a leading button. Here the icon visually depicts the meaning of the button which is followed by a call to action text. This dual representation reduces cognitive load, helping users process information more quickly and make decisions faster. This adaptability can enhance the overall user experience for a diverse user base.

Eg. H&M uses leading buttons. It has a bag icon followed by the CTA “Add” on its primary add-to-cart button.

Color

For colors, The truth is that there is no “one-size-fits-all” solution.

When conceptualizing button design for optimal conversion rates on your eCommerce platform, it is prudent to prioritize color contrasts. The efficacy lies in selecting a hue that distinctly stands out against the background color of your website. Employing contrasting colors enhances the visibility and appeal of buttons, thereby potentially elevating conversion rates. Utilizing the color wheel proves instrumental in this process, as it facilitates the identification of complementary or contrasting colors in relation to your website’s color scheme.

Brand Color

When the add-to-cart button aligns with established brand colors, it reinforces brand identity and builds a cohesive and familiar interface for users. This cohesion minimizes cognitive load, streamlining the navigation process and contributing to a more intuitive and user-friendly experience.

A significant aspect of the “Add to Cart” button’s design is the strategic use of brand colors. These carefully selected hues are not only visually appealing but also serve a functional purpose by creating high contrast against the surrounding interface elements and making it the primary button on the interface. This deliberate color choice ensures that the button stands out distinctly, catching users’ attention and guiding their actions effectively. It makes this button a good option for the primary call to action.

eg — H&M uses Black as the color for the add to the cart button to establish consistency and overall harmony in their brand identity and visual appeal. The color also contrasts with their background.

Contrasting Color

The most effective hue is one that starkly stands out against the website’s background, enhancing visibility and prompting action. Harnessing the color wheel to discern complementary or contrasting tones within the website’s palette ensures a harmonious visual hierarchy. In essence, the confluence of contrast and cohesion emerges as the catalyst for a compelling and conversion-driven button.

Eg- A lot of brands use this strategy of implementing contrasting colors. The high contrast between the website’s background color and the button color makes it easy for users to distinguish between the call to action button and the page. This is especially important for users with visual impairments or when using the app in different lighting conditions. The visual contrast also draws the user’s eye to the button, making it more noticeable.

(Left-Right) Myntra, Ajio, Nykaa, H&M

State of Button

The ideal state of the button should be filled and bold. Buttons having a container with a solid fill, are designed to draw the user’s attention.

Eg — In the image above, you will see how all the brands use a fill state button for Add to Cart to draw all attention to this button.

Sizing

There is no “one-size-fits-all” button size for the “add to cart” button. However, you should find an optimum size compared to the other elements of your application

1.) Buttons Expanding to the ends of the page

There are large-sized wide buttons that expand to the ends of the page. Large-sized buttons are easily noticeable, ensuring that users can quickly identify the primary call-to-action on the page.

Pros:

• Wide buttons that extend to the edges of the page increase accessibility by providing a larger clickable area.
• Wide buttons are especially beneficial for mobile users, as they offer a larger touch target.
• They are crucial for preventing frustration and errors associated with small, difficult-to-tap elements on smaller screens.

Cons:

• Extensive use of large buttons can visually dominate the page, potentially overwhelming other important elements and information.
• On pages with limited space or a lot of content, wide buttons can contribute to a cluttered appearance
• Implementing large-sized elements, including buttons, can contribute to increased page load times. This is particularly important for users on slower internet connections or using less powerful devices, potentially affecting the overall user experience.

Eg- In H&M, The add to bag button is placed at the bottom of the page and spreads out from right to left covering the entire bottom area of the page.

2.) A button that fits in half the space or 3/4th region

Pros:

• In the constrained space of mobile apps, every element should be designed for efficiency. A button that occupies half the space ensures that other essential information or actions can coexist harmoniously on the screen without feeling crowded.
• Mobile users predominantly interact with apps using their thumbs. A moderately sized button that fits within half the space is within comfortable thumb reach, promoting ease of use and reducing the need for users to stretch or adjust their grip.
• With a smaller button, there’s ample space for additional features and actions on the screen. Users can easily access related functionalities, such as viewing product reviews, exploring similar items, or adjusting quantity, without the interface feeling cluttered.

Cons:

• A smaller button may have reduced visibility compared to a larger, more prominent button. This could potentially lead to users overlooking the “Add to Cart” option, especially if it is placed in a less conspicuous location on the screen.
• A smaller button may pose challenges in terms of tap accuracy, particularly for users with larger fingers. This could result in accidental taps or frustration for users trying to interact with the button precisely.
• A smaller button may struggle to effectively convey the importance of the “Add to Cart” action, potentially leading to users underestimating the significance of that step in the purchasing process.
• In scenarios where products are displayed in a grid format, a smaller button might be less impactful and easily overlooked, especially if each product competes for attention within a limited space.

Eg — In apps like Ajio, and Lenskart the button is placed and fits in half the region allocated for the button.

Ajio

Shape of Button

Colors and shapes impact our consciousness, influencing user perception. Understanding the psychology behind each can guide effective design choices, ensuring CTA buttons are not just visually attractive but also emotionally resonant for a more engaging and user-friendly experience.

Shape meanings:

• Squares and rectangles meanings: discipline and seriousness.
  The rectangular buttons give your designs a serious and sophisticated look. They look solid and reliable. Also, Sharp-edged rectangular buttons can be a good choice for accessibility as they provide well-defined boundaries. This makes it easier for users with various abilities to interact with the interface and understand the button’s boundaries

Eg — The sharp-edged, rectangular shape conveys sophistication and seriousness. This can be particularly relevant for brands or apps like H&M where a polished and sophisticated appearance is important.

• Rounded Corner or Pill—Shaped: The use of rounded edges for the button contributes to a friendly and approachable visual style. Rounded corners soften the button’s appearance, making it seem less rigid. This design approach can be particularly effective when the goal is to create a welcoming and user-friendly interface.

Eg — Lenskart uses a pill-shaped button for its Buy Now buttons. Round corners/Pill shaped communicate a sense of simplicity, optimism, and openness. They are easier on the eyes, reducing the visual strain that sharp angles might cause, especially during prolonged interactions with the interface. This design approach aligns with the principles of user-centric design, where user comfort and engagement are paramount.

Lenskart(Left) & Ajio(Right)

Interaction type

Sometimes when we press a button, such as an elevator button, it takes some time for the elevator door to open. The elevator, in this scenario, somehow informs the user that his order has been received and is in the process of visually indicating it to the user. Consequently, the user waits instead of repeatedly pressing the button.

Loading animation

The example above is psychologically true and is the same in the case of an Add to Cart button. When you click on the button the button gives visual feedback by displaying a loading icon when you add something to the bag giving the user a signal/message that your journey has begun and you’ve successfully added the product to purchase it.

Eg — H&M strategically employs UX feedback in their “Add to Cart” button design. Upon clicking, the button responds with a loading icon, visually signaling the initiation of the user’s journey. This subtle animation serves as a reassuring message, confirming the successful addition of the chosen product to the virtual bag. The loading icon not only provides real-time feedback but also imparts a sense of progress, enhancing the overall user experience.

Color Change

The transition from one color to another is a deliberate signal that communicates the commencement of the user’s journey — confirming the successful addition of the product to the cart. This dynamic color alteration not only captures attention but also functions as a tangible indicator, prompting users to wait momentarily as the system processes their request. The intentional use of color in this context enhances user comprehension, contributing to a more informed and user-friendly experience.

Eg — In Lenskart & Myntra, When you click on the button to add a product the button gives visual feedback by changing the color of the button to a different color giving the user a signal/message that your journey has begun and you’ve successfully added the product to purchase it.

Written and edited by — Aashna Khurana & Sahaj Tyagi