An E-Commerce Interface Menagerie

The other day on Discord, I was trying to convince someone that they should not build a chatbot. Crazy, right?

But here’s the thing: Chatbots are an interface, just like buttons and tabs, and just like other interfaces, there are times when they do more harm than good. Just imagine if your phone’s settings app was a chatbot, and you had to type in a message or a talk to it just to enable or disable airplane mode? Awful, right?

So for this post, I’d like to go over some popular interfaces and talk about the different elements, and how a chatbot could help or harm the experience.

Buying a Laptop

I’ve been drooling over the new M3 Mac Pro for weeks now. When you’re looking at configuring and purchasing one, Apple’s website makes use of a ton of UI elements, starting off with a gorgeous picture of the laptop in the top left, which never goes away.

Scrolling down, Apple begins the configuration options with buttons for memory and storage. This really plays to buttons’ strengths:

1. Quick, easy selection of options - users don’t need to type or speak, just click.
2. Implicit exploration - users can see what the available options are without asking.
3. Extra metadata - price changes are shown in the button labels, again giving more information implicitly. And it doesn’t just have to be text- color, shape, and location can also convey information about a button.
4. Reversibility - if the user wants to change their selection, they can do so just as easily as selecting the first time.

There are also a couple of key elements here to point out:

• Free Delivery shows up twice and and never goes away. This gives me the feeling that a lot of people ask about free delivery and Apple wants to get ahead of them by making it super obvious.
• Price at the bottom updates automatically and also never goes away.
• Info links for memory and storage open handy modals with a paragraph about what memory and storage are, and how much they recommend for workloads.

The trend continues for choosing a power adapter.

However there is a dropdown for choosing your keyboard layout. Dropdowns are great for showing a long list of options. Extra-long dropdowns can also feature a search or dynamic filter option that lets users jump around by typing.

Like buttons, a dropdown shows all the available choices at once, unless they can’t fit on the page and a scrollbar is introduced.

Once drawback of dropdowns is that they lack extra metatextual information. You could put colors on different rows, or add cost change info, but this quickly crowds the interface. And what if the user wants to compare the layouts of US English and International English? They’d need to visit a third party resource to look up pictures and comparisons.

Perhaps Apple could replace this with a carousel of keyboard images or diagrams, but it is likely that a dropdown is just good enough and improvements are not worth the invested time.

Finally we get to the end with add-on software options. Since this is a yes/no question, Apple could have used a checkbox or a toggle.

However toggles and checkboxes lack the extra metatextual information and they also introduce new elements to what has, so far, been a buttons-and-dropdown-only interface.

Overall, since there are not too many configuration options when buying a Macbook pro, the interface is quite simple and can get away with using only buttons. And simplicity is great!

When it comes to chatbots, if we could get away with using buttons and dropdowns only, that would make my job so much easier! No worries about NLU, user will always be on a known path, and bots would be 100% deterministic. But buttons also are limiting, especially in situations that have more options or require more nuance.

So, in summary about buttons, they are good for: * Quick, easy selection of options * Implicit option exploration * Giving metatextual information via color, image, or location * Modifying selection

And buttons are bad for: * Long lists of options * Long labels * Choosing between very similar options

Buying Clothes

Taylor Stitch is has a great online store, and when you are purchasing clothes, many UI elements work together to give you all the information you need.

Starting with search results, we see pictures of the product, and the picture turns into an auto-changing gallery on mouse over. Size availability also shows up on hover.

This is a great example of Progressive Disclosure, a fancy way of saying “only give the user more information when they show interest in existing information.” Chatbots do this all the time, though it’s called “Escalating detail” in conversation design.

After you click on a jacket, you’re taken to its product page. The pictures are much clearer here, and there is a slew of options to the side.

At the top, we have the product name and price, and then some image buttons for the colors. I love these image buttons! A picture is worth a thousand words, and the thumbnail for the shirt does a much better job communicating color than the words “Organic Charcoal Foundation Twill.”

Below the color options are size buttons, and then another button to add to cart. Notice the difference in colors- “Add to Cart” is a solid color and pops, making it really easy to find!

At the very bottom are more buttons, though less obvious. These open up a left-side panel with more elements.

The “garment specification” button opens up a sizing table. Tables are great for use cases like this. 1. Easy comparisons - when you can distill an option down to one or two key features, it becomes much easier to make decisions 2. Interactive - when users can filter and sort table data, they can better find exactly what they want, but some interfaces make this difficult. 3. Quantitative comparisons - it’s easy to compare numbers and see trends when they are in close proximity.

However tables have a few drawbacks, too: 1. Intimidating - casual users might get scared off by the amount of data or not know how to use it. 2. Imperfect information - what if I have a really big neck and I want to verify that I won’t be choked by this jacket? If key data isn’t listed, the entire table becomes useless. 3. High data requirements - gathering, validating, and maintaining data to populate these tables with is no small feat. 4. Hard to read on mobile - modern phones are big, but tiny cells of tiny text is still hard to read, especially for older users.

To address the first weakness, TaylorStitch has a great interactive form that recommends two sizes for you based off of your hight and weight. This is a great way to leverage the data from your table and make it accessible.

Forms are great for simple question and answer interaction like this. A form gives information about what input is needed, can do some basic validation with regex, and then send the information somewhere upon submission. Forms also let the user implicitly review and modify answers without needing extra interaction from the UI.

A lot of people think that Chatbots are a direct upgrade to forms, but the reality is that forms still beat bots in certain use cases. Chatbots don’t allow easy modification like forms do, and reviewing previous answers requires scrolling back up or asking the bot a new question. Finally, bots are still unable to leverage all the UI elements that a web form can.

The recommendation gives a “fitted” and a larger “roomy” size, presented with toggled buttons.

Finally, for shipping and return information, they give this as fine print in a side panel, too.

It’s really tempting to jazz this information with icons, lists, or maybe even a carousel. Legal and accessibility requirements, however, can be an obstacle here. Additionally, if this information needs to change quickly in case there is, I dunno, a massive global logistics crisis precipitated by a pandemic, complex elements can make moving quickly hard.

So in summary, TaylorStich shows great usage of image buttons, as well as interactive forms and tables!

Lessons for Chatbots

What can we take away from this exercise?

1. Don’t underestimate buttons

If buttons are good enough for Apple’s sales funnel, they’re good enough for your chatbot! Buttons… * Provide a clear sense of direction * Reduce ambiguity * Are faster than typing (especially on mobile) * Provide extra metatextual information

However, buttons also… * Create boring, linear conversations * Are frustrating when they diverge from the user’s needs * Require short labels

2. Chatbot UIs are limiting

Typical chatbot UIs do not make reversing decisions and comparing two different answers very ergonomic. Traditional HTML elements still win out in this regard.

How can a chatbot help these pages?

Chatbots excel at making niche or scattered information more accessible. To use Apple’s page as an example, if I want to know how fast the RAM is, or if different RAM options have the same speeds, I have to leave the “add to cart” page to find out. This could mean lost sales! A chatbot on the page can tell me that exact information.

Additionally, they can make recommendations, and the more personalized the better. For Taylor Stitch, if the bot can see what is already in my shopping cart, it could recommend additional items that go with the outfit.

Both of these possibilities can help motivate sales, but a chatbot is not the only way to do this. Sales-focused bots compete against much cheaper options like email campaigns, social media advertising, and bright shiny “Buy Now!” popups. It comes down to a good old-fashioned cost-benefit analysis.

Alright that’s all for today!

❤️ Gordy