UX Planet — Medium | CanvasFlip (Image source)

H&M, the leading fashion destination, as an example

H&M is an amazing fashion and one of my favourite go-to-places for those shopping sprees.

Lately, I was finding a knitted cardigan at H&M. It was quite an engaging conversation with the employee. He was friendly and quite helping. Amazing experience, but hey …..w-a-i-t; this time it was on their app and the person I was in conversation with, wasn’t a human, it was a bot! Did that ruin the experience? Not really, rather it was just like visiting one of their stores where one of the employees help you find the best garment for you. 🙂

Conversational UI is already making waves in tech circles with organisations automating their processes around how chat bots interact with their customers. Today, we’re witnessing an exponential growth of applications that no longer have a graphical user interface (GUI). What they have is a conversational UI.

Having said that, a designer often struggles with designing it because it isn’t as easy as it might look. Structuring out and shepherding a seamless flow demands a lot of homework. Back in 1995, Jakob Nielsen formulated the 10 Usability Heuristics for User Interface Design, that holds true even today and fairly applicable for designing conversational UI.

So let’s scan the H&M bot through these usability heuristics. I have clubbed a couple of them for making the study I little more crisp.

H&M Bot

Before we get into breaking down the design, you’d love the experience the entire prototype of the H&M bot. This prototype is made on CanvasFlip.

This flow is made for a girl, aged 25, looking for a knit cardigan. OPen prototype in a new link and play with the app prototype!

(Open prototype in a new link)

These conclusions on the bot are drawn after studying the user experience test on the prototype. The UX analysis was recorded on CanvasFlip.

1. Visibility of system status & recognition rather than recall

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

✅ H&M has done a great job at using structured messages to guide a user through the interaction. It streamlines the requirements and search of the user beautifully.

agStructuring and streamlining the flow

2. Match between system & real world.

The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

✅ The app uses words and phrases that are relevant to the initial information tell collect. For eg, for a female of age in 20s words and emoticons are wisely chosen!

Today teenagers to peoples in their 30s, everyone uses emojis. And it shouldn’t be a surprise. They’re universal and extremely useful, and they add the non-verbal layer to written communication. That is something H&M has held onto.

Wisely crafted language

3. User control and freedom & Error Prevention

Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

⁉️ H&M does have options for user control, i.e., the user can revert and start a new search all over again. But what would be more recommendable is if there was an option just to undo the last message (/user input).

User feedback control

4. Flexibility and efficiency of use

Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

✅ H&M has executed a nice use of humans to fill in the gaps; novice users would appreciate the human touch, while power users can get right to ordering.

It gives a flexibility of options while making choices.

Flexibility of choices and default states available

5. Consistency and standards & Aesthetic and minimalist design

Users should not have to wonder whether different words, situations, or actions mean the same thing.

Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

✅ It’s consistent and also has a voice that directs the user to what they are looking for. It isn’t like browsing through never ending options. Honestly it is quite similar to trying to buy a commodity offline in the stores.

Conclusion

The dream of conversational interfaces is that they will finally allow humans to talk to computers in a way that puts the onus on the software, not the user, to figure out how to get things done. There are amazing bots trying to replicate humans. Know of any such bot? Let me know in the comments section.

The best way to predict if the bot is human enough or not is to test — test with a large section of users to understand how human it is. Here’s what I turn to when I need to test — CanvasFlip

Designing and validating a Conversational UI was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.