Successful implementation of conversational product filtering relies on well-thought-out user experience design.
Visual display elements
The placement and appearance of the conversational filter significantly impact its effectiveness.
Handle long attributes
If multiple-choice options are long (such as brand names), don't wrap them to new lines as this adds height to the elements. Instead, allow them to extend horizontally off the page and enable side-scrolling.
Here is an example of a horizontal scroll implementation:
Example of horizontal element display.
Optimize filter placement
Begin by placing the conversational filter in a prominent position, typically where content first appears, which has yielded positive results. A key takeaway for this placement is that the conversation filtering bar should be as vertically compact as possible. When the conversational product filtering feature is positioned prominently, it can shift product displays further down the page, out of immediate view. This can be a drawback, as shoppers see fewer products. Therefore, the products that are visible must be as relevant as possible.
Additionally, consider placing the conversational filter further down the page, perhaps after three to five rows of products. This approach prevents the conversational element from significantly displacing the initial product displays.
If conversational product filtering becomes your main method for narrowing product selections, think about fully minimizing, or even replacing, your current manual filter bar. This could allow you to add another column of product items.
Desktop and mobile
While desktop implementations have proven successful, results on mobile have been less consistent and have shown lower overall performance gains. The limited screen size on mobile requires a more creative and deliberate approach to placement.
Recommendation: Prioritize desktop implementations over mobile, at first. The larger screen size on desktop allows for greater flexibility in creative designs. The smaller screen on mobile forces developers to prioritize certain elements.
Avoid: Chat window interfaces. Don't implement the conversational filter as a chat window. This takes users away from the main web interface and can disrupt the intended web checkout flow design that developers typically spend considerable time optimizing.
Additional mobile considerations
Mobile web and apps should also be treated independently when it comes to testing. Mobile app testing is inherently difficult to conduct, but offers greater flexibility in customization. Mobile web is often quicker to test, but comes with different tradeoffs for various mobile web browsers.
Ideas for experimentation
Some ideas for experimentation are:
- Placement between product rows: Insert the component partway down the page, after three to five rows of products. This approach prevents the conversational element from significantly displacing the initial product displays.
- Fly-out or pop-up: Use a button that triggers a dialog or fly-out menu containing the filter questions. This can be integrated with existing filter pop-ups, or a fly-out can be a separate element.
- Sticky bar: A persistent bar on the screen presents the questions and options. This sits in front of the products rather than pushing them down.
- Testing considerations: When testing mobile and desktop, ensure that these experiments are conducted independently. The shopping behaviors for each device vary greatly, and the visual components that work on one device might not translate to the other.