BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon

Conversational UI

Overview

A conversational UI is a User Interface that uses a conversation as the main interaction between the user and the software in a more natural language. MetLife conversational UI can replace some traditional forms to collect user information in more user friendly way. The user should be able to express themselves in the most natural way possible and in order to achieve the best results.

Click here for example: Make Your Match Tool

Advantages of Conversational Interface

  • • Better engagement/trust building with end-user(s) through meaningful interaction
  • • Superior user experience/convenience & decision support as opposed to filling out a time-consuming form
  • • Cross-platform integration
  • • Perfect for smart form scenarios (adjusting questions based on the user’s answers)
  • • Increased user attention – targeted questions with clear call to action for each interaction

Desktop view shown for illustrative purposes:

conversationalUI
conversationalUI

Where & When to Use

Desktop view shown for illustrative purposes:

Traditional Form

Corporate responsive layout, centered logo

Conversational UI

Corporate responsive layout, left-aligned logo

Best Practices

  • • Personalization: try to personalize your dialogs based on information you get from user. (ex Name, location etc.)
  • • Less is More: keep Introduction short and avoid lengthy instructions anywhere in UI.
  • • Keep it short: Try to make the flow in 5 or less steps.
  • • Keep it interesting: Break questions into sets and add other selection patterns in between steps to avoid long questionnaire.
  • • Clearly Human: use natural language to replace typical form fields. (ex. "What's your name?" vs "Name:_______"
  • • Error Handling: Avoid error scenario by conditional selection and if there is a need for error handling use it simple languages that goes with conversation unlike traditional form validation.

Traditional Error Handling

Corporate responsive layout, centered logo

Conversational UI Error Handling

Corporate responsive layout, left-aligned logo

Example

Click here for example: Make Your Match Tool

Make your Match Tool

Download

You can download and personaized HTML/CSS code below for make your match tool. Pictogram, pictures or any other digital assets used can be personalized based on your project needs.

HTML Prototype: zip