Lets Talk! Uniting Dev and UX to design for Voice Pascal Heynol @ - - PowerPoint PPT Presentation

▶
let s talk
SMART_READER_LITE
LIVE PREVIEW

Lets Talk! Uniting Dev and UX to design for Voice Pascal Heynol @ - - PowerPoint PPT Presentation

Jan 11, 2024 158 likes •813 views

Lets Talk! Uniting Dev and UX to design for Voice Pascal Heynol @ UX Cambridge 2018 Pascal Heynol Senior Experience Designer @ USEEDS Above all else, design is communication. Its about getting ideas and information across from one

slide-1
SLIDE 1

Let’s Talk!

Uniting Dev and UX to design for Voice

Pascal Heynol @ UX Cambridge 2018

slide-2
SLIDE 2

Pascal Heynol

Senior Experience Designer @ USEEDS° “Above all else, design is communication. It’s about getting ideas and information across from one to another.”

@thepascalheynol

slide-3
SLIDE 3

Hello World! We are USEEDS°

  • Over 50 UX enthusiasts

in the heart of Berlin

  • Experts in User

Centered Design for

  • ver 10 years
  • Part of SYZYGY Group
slide-4
SLIDE 4

Voice is important…

@thepascalheynol

slide-5
SLIDE 5

Voice is important…

for users

@thepascalheynol

slide-6
SLIDE 6

Accessibility

@thepascalheynol

slide-7
SLIDE 7

Efficiency

@thepascalheynol

slide-8
SLIDE 8

Voice is important…

for business

@thepascalheynol

slide-9
SLIDE 9

Ultimate personalization

@thepascalheynol

slide-10
SLIDE 10

Voice is important…

for you!

@thepascalheynol

slide-11
SLIDE 11

Ultimate responsive design

@thepascalheynol

slide-12
SLIDE 12

“Computer?” - A New Normal

Source: Star Trek IV: The Voyage Home, Paramount Pictures, 1986

slide-13
SLIDE 13

It’s all about the

intent

@thepascalheynol

slide-14
SLIDE 14

“We’d like to introduce a new Voice User Interface for our

  • Customers. Are you up for it?”
  • Mr. Client, MyBank Inc.

@thepascalheynol

slide-15
SLIDE 15
  • Mr. Client, MyBank Inc.

Long-standing collaboration Constant exchange about innovation Mutual trust

@thepascalheynol

slide-16
SLIDE 16

It’s dangerous to go alone... Take a friend with you!

@thepascalheynol

slide-17
SLIDE 17

Challenge accepted!

We signed the contract for our Project @thepascalheynol

slide-18
SLIDE 18

Our Vision: To create interfaces based on natural language that are intuitive to use and

  • ffer value to users.

@thepascalheynol

slide-19
SLIDE 19

Process

Build Measure Learn

1 2 3

@thepascalheynol

slide-20
SLIDE 20

Process

Build Measure Learn

2 3 1

@thepascalheynol

slide-21
SLIDE 21

Learn

1UP

@thepascalheynol

slide-22
SLIDE 22

Understand the

basics

@thepascalheynol

slide-23
SLIDE 23

Design Guidelines

  • Google Design Guidelines

https://designguidelines. withgoogle.com/ conversation/

  • Alexa Design Guidelines

https://developer.amazon. com/designing-for-voice/

@thepascalheynol

slide-24
SLIDE 24

Basic Jargon

  • VUI
  • CUI
  • NLU
  • Skill / Action
  • Utterance
  • Slot

@thepascalheynol

slide-25
SLIDE 25

Structure of Voice Platforms

slide-26
SLIDE 26

Problems with Voice

  • Low discoverability
  • Disappointment hinders

use

  • Data privacy is a

necessity

  • Needs to connect to

existing channels

@thepascalheynol

slide-27
SLIDE 27

Conversation Flow

  • Benevolently engaged
  • Listening
  • Understanding

@thepascalheynol

slide-28
SLIDE 28

Anthropomorphization

@thepascalheynol

slide-29
SLIDE 29

Build a

team

@thepascalheynol

slide-30
SLIDE 30

Share space and thoughts

@thepascalheynol

slide-31
SLIDE 31

Change roles and build together

  • Create empathy
  • Build shared

understanding

  • Strengthen team skills

@thepascalheynol

slide-32
SLIDE 32

Designers: Get coding

@thepascalheynol

slide-33
SLIDE 33

Amplify knowledge

Workshop at MotorTalk: Getting input from the outside

@thepascalheynol

slide-34
SLIDE 34

“Excellent! What are the next steps?”

  • Mr. Client, MyBank Inc.

@thepascalheynol

slide-35
SLIDE 35

Build

@thepascalheynol

slide-36
SLIDE 36

Voice

design

@thepascalheynol

slide-37
SLIDE 37
  • 1. Use Case

@thepascalheynol

slide-38
SLIDE 38

In the office At home Outside with friends In the city

Context matters

In the car

slide-39
SLIDE 39

“VUIs are k3wl! But is this use case meaningful? Let’s take a closer look.”

Sayeth the team at USEEDS° @thepascalheynol

slide-40
SLIDE 40

Evaluation Criteria

  • Convenience
  • Accessibility
  • Frequency

@thepascalheynol

slide-41
SLIDE 41
  • What is the current value of Deutsche Telekom?
  • How much has the Stratec Biomedical stock changed in

the course of last week?

  • Put Adidas on my Watchlist
  • How is my stock doing?

Alexa, ask MyBank...

@thepascalheynol

slide-42
SLIDE 42
  • 2. Assistant Persona

@thepascalheynol

slide-43
SLIDE 43

How do you talk to your customers?

@thepascalheynol

slide-44
SLIDE 44

Voice Style Guide

  • Pace / Tempo
  • Tone
  • Energy Level
  • Linguistic

characteristics

  • Use Examples!

@thepascalheynol

slide-45
SLIDE 45
  • 3. Scripting & Acting

@thepascalheynol

slide-46
SLIDE 46

Spoken and written language differs

  • Conversational

principles are hard to anticipate and to absorb

  • Apparent replies aren’t

always so apparent (“Ready”)

@thepascalheynol

slide-47
SLIDE 47
  • 4. Finding Intents
  • Analyze written dialogs
  • Separate out individual

intents

  • Visualize in tree

diagram

@thepascalheynol

slide-48
SLIDE 48

Don’t forget visuals

Find a visual representation to your content.

@thepascalheynol

slide-49
SLIDE 49
  • 5. Refine &

Diversify

  • Split up dialogs in

utterances and replies

  • Diversify utterances for

different users

  • Diversify replies to

keep your persona “human”

@thepascalheynol

slide-50
SLIDE 50

Voice

development

@thepascalheynol

slide-51
SLIDE 51

Unique aspects

  • Deciding on cloud

infrastructure may lead to vendor lock-in

  • Use Google’s Dialogflow

to develop for a variety

  • f devices
  • Privacy & data safety

challenges

@thepascalheynol

slide-52
SLIDE 52

Structure of Voice Commands

„Alexa, ask MyWeather is it going to rain this friday.” “You may need an umbrella this

  • friday. There is a forecast of 14°C

and light showers for Berlin.”

Alexa

WAKE WORD

ask

LAUNCH

MyWeather

INVOCATION

Is it going to rain

UTTERANCE

this friday

SLOT

slide-53
SLIDE 53

Slots

These are variables like “Today” or “in Berlin”

Utterances

A command anticipated by the device

Intent

The assistant interprets the spoken word as “Intent”

Function

Comprises the CUI behavior and business logic

Reply (SSML)

Standardized Markup Language for Voice Interaction

User Assistant Cloud REQUEST RESPONSE

Handling Voice Requests

slide-54
SLIDE 54

Win-Win: Devs & Designers

  • Decisions on IT

Infrastructure influences UX

  • Learn to effectively

communicate needs, requirements & limitations to all stakeholders

  • Build better, faster

@thepascalheynol

slide-55
SLIDE 55

Measure

@thepascalheynol

slide-56
SLIDE 56

Prototyping

  • Code

https://developer.amazon.com/de/alexa

  • skills-kit/learn
  • Dialogflow

https://dialogflow.com/

  • Twine

https://twinery.org/

  • Other tools

https://botsociety.io/ https://getstoryline.com/ https://www.sayspring.com/ @thepascalheynol

slide-57
SLIDE 57

Testing

  • Test at every stage

(colleagues, then users)

  • Be creative with setup
  • Longer flows can’t be

interrupted

  • Ask expectation before,

experience after

@thepascalheynol

slide-58
SLIDE 58

Analyse, learn and improve

@thepascalheynol

slide-59
SLIDE 59

“Awesome! So what are we gonna tackle next?”

  • Mr. Client, MyBank Inc.
slide-60
SLIDE 60

Highscore

What did we learn?

slide-61
SLIDE 61

Design for Voice

1. Use Case 2. Assistant Persona 3. Scripting & Acting 4. Finding Intents 5. Refine & Diversify

@thepascalheynol

slide-62
SLIDE 62

3… 2… 1… GO!

★ Learn the basics ★ Form a team ★ Design & build together ★ Test & iterate

Source: Mario Kart 64, Nintendo

slide-63
SLIDE 63

Read on!

Intro to Designing for Voice - Pascal Becker http://bit.ly/2hC1obX From Awkward Silences to Magical Moments - Conny Kawohl http://bit.ly/2xNsuXL USEEDS° @ Medium: https://medium.com/useeds-from-berlin

slide-64
SLIDE 64

Pascal Heynol

Senior Experience Designer @ USEEDS° @thepascalheynol thepascalheynol@gmail.com