uxversity of livechat #1 "using conversational interfaces to build (better?) web forms"

29
uxversity of LiveChat

Upload: livechat

Post on 11-Apr-2017

1.128 views

Category:

Design


3 download

TRANSCRIPT

Page 1: UXversity of LiveChat #1 "Using Conversational Interfaces to Build (Better?) Web Forms"

uxversityof LiveChat

Page 2: UXversity of LiveChat #1 "Using Conversational Interfaces to Build (Better?) Web Forms"

uxversity

Using Conversational Interfaces to Build (Better?) Web Forms13 January 2017

by Maciej Serafinowicz

Page 3: UXversity of LiveChat #1 "Using Conversational Interfaces to Build (Better?) Web Forms"

uxversity

What is Conversational Interface?

“It enable users to command the computer with plain text (e.g., via text messages, or chatbots) or voice commands, instead of graphic elements. These interfaces often emulate human-to-human conversations.”

- Wikipedia

Page 4: UXversity of LiveChat #1 "Using Conversational Interfaces to Build (Better?) Web Forms"

uxversity

Voice assistants- Siri (Apple) - Alexa (Amazon) - OK Google - Cortana (Microsoft)

1.

Page 5: UXversity of LiveChat #1 "Using Conversational Interfaces to Build (Better?) Web Forms"

uxversity

Chatbots- Slackbot - Facebook M - Magic - Kik

2.

Page 6: UXversity of LiveChat #1 "Using Conversational Interfaces to Build (Better?) Web Forms"

uxversity

Pseudo-chatbotsTraditional point-and-click GUI

(3.)

- Microsoft Clippy - Quartz

Page 7: UXversity of LiveChat #1 "Using Conversational Interfaces to Build (Better?) Web Forms"

uxversity

What is web form?

“A webform, web form or HTML form on a web page allows a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms because web users fill out the forms using checkboxes, radio buttons, or text fields. For example, forms can be used to enter shipping or credit card data to order a product, or can be used to retrieve search results from a search engine.”

- Wikipedia

Page 8: UXversity of LiveChat #1 "Using Conversational Interfaces to Build (Better?) Web Forms"

uxversity

Web form components- text input (with or without validation) - radio button - file upload - textarea - select (dropdown) - checkbox (multiple seclect) - submit - reset

Page 9: UXversity of LiveChat #1 "Using Conversational Interfaces to Build (Better?) Web Forms"

uxversity

Conversational formschat + web form =

Page 10: UXversity of LiveChat #1 "Using Conversational Interfaces to Build (Better?) Web Forms"

uxversity

LiveChat Survey Bot(prototype)

Page 11: UXversity of LiveChat #1 "Using Conversational Interfaces to Build (Better?) Web Forms"

uxversity

Regular Web Form

Page 12: UXversity of LiveChat #1 "Using Conversational Interfaces to Build (Better?) Web Forms"

uxversity

Regular Web Form Conversational Form

Page 13: UXversity of LiveChat #1 "Using Conversational Interfaces to Build (Better?) Web Forms"

uxversity

Regular Web Form Conversational Form

Page 14: UXversity of LiveChat #1 "Using Conversational Interfaces to Build (Better?) Web Forms"

uxversity

Regular Web Form Conversational Form

Page 15: UXversity of LiveChat #1 "Using Conversational Interfaces to Build (Better?) Web Forms"

uxversity

Regular Web Form Conversational Form

Page 16: UXversity of LiveChat #1 "Using Conversational Interfaces to Build (Better?) Web Forms"

uxversity

Regular Web Form Conversational Form

Page 17: UXversity of LiveChat #1 "Using Conversational Interfaces to Build (Better?) Web Forms"

uxversity

Regular Web Form Conversational Form

Page 18: UXversity of LiveChat #1 "Using Conversational Interfaces to Build (Better?) Web Forms"

uxversity

Regular Web Form Conversational Form

Page 19: UXversity of LiveChat #1 "Using Conversational Interfaces to Build (Better?) Web Forms"

uxversity

Regular Web Form Conversational Form

Page 20: UXversity of LiveChat #1 "Using Conversational Interfaces to Build (Better?) Web Forms"

uxversity

Regular Web Form Conversational Form

Page 21: UXversity of LiveChat #1 "Using Conversational Interfaces to Build (Better?) Web Forms"

uxversity

Regular Web Form Conversational Form

Page 22: UXversity of LiveChat #1 "Using Conversational Interfaces to Build (Better?) Web Forms"

uxversity

Regular Web Form Conversational Form

Page 23: UXversity of LiveChat #1 "Using Conversational Interfaces to Build (Better?) Web Forms"

uxversity

Regular Web Form Conversational Form

Page 24: UXversity of LiveChat #1 "Using Conversational Interfaces to Build (Better?) Web Forms"

uxversity

File upload

Page 27: UXversity of LiveChat #1 "Using Conversational Interfaces to Build (Better?) Web Forms"

uxversity

Summary

+ personal, human touch - deeper relation, more engaging + fresh and innovative + convenient, natural way + cross-platform + perfect for smart form scenario - adjusting questions based on answers.

— length of form - how long will it take to complete the form? — complicated mistake correction — limited trust for providing sensitive or confidential data

Page 28: UXversity of LiveChat #1 "Using Conversational Interfaces to Build (Better?) Web Forms"

uxversity

Want to know more?

More…

Read my article on LiveChat's developer blog: "Using Conversational Interfaces to Build (Better?) Web Forms”

Page 29: UXversity of LiveChat #1 "Using Conversational Interfaces to Build (Better?) Web Forms"

uxversity

More…

This presentation was brought to you by LiveChat - online chat with help desk software

for an amazing customer service!