Untangling invisible knots: UX in voice technology products
•Als PPTX, PDF herunterladen•
2 gefällt mir•85 views
This case study on focuses on the Kroger voice action. This involved speaking about design hurdles as a designer, user pain points, how to design a voice product, as well as how to approach prototyping and usability testing.
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Untangling invisible knots: UX in voice technology products
Ähnlich wie Untangling invisible knots: UX in voice technology products (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Untangling invisible knots: UX in voice technology products
- 1. UNTANGLING INVISIBLE KNOTS UX IN VOICE TECHNOLOGY PRODUCTS JESSICA KAINU UX DESIGNER KROGER CHARLOTTE
- 2. CASE STUDY Kroger Voice Action
- 3. VOICE PRODUCTS We rely heavily on sight Without a visual interface users are burdened with processing and organizing information mentally. User focus may not be on you No focused interface leaves room for distractions.
- 4. DISTRACTION DIFFICULTY Voice technology is hands-free Driving and cooking keep the users hands and attention occupied. Voice should be used to enhance these experiences. How does a user follow a recipe when their hands are dirty? How do they access navigation and radio when they are driving?
- 6. STOP
- 8. When we design for voice, we don’t want to create complicated tasks. We need to give users a few choices and hand hold often without being too wordy. Don’t overload your users MILLER’S LAW Humans can keep around 7 pieces of information in their short term memory at a time.
- 9. Repeated onboarding is lengthy and can be annoying. However, discovery and learning is important in a VUI. There needs to be a balance. Onboarding with voice is tricky THE FORGETTING CURVE People will recall 80% of information learned the previous day.
- 10. Creating user paths Without visual guidance, how does the user discover features and orient themselves? Product structure No wires or mocks creates a need for a new way of handling this voice products. How do we create some kind of visual that can be referred to? DESIGN HURDLES
- 11. VOICE PERSONA Creating a “cool auntie” Consider your brand and how users like to interact with it. What do they expect from you? Kroger is the cool informative aunt. She’s warm, helpful, and conversational. Help with adding items “To add an item to your cart, like milk, say "Add milk to my cart." You can ask me to repeat this or to get more help say "help," anything else?” Suggesting a found item “That item isn't in your cart but I found Kroger 2% Reduced Fat Milk 1 gal. Would you like to add it?” Substituting items and quantities “All right, Apple - Honeycrisp have been changed to 7 Simple Truth Organic Gala Apples, anything else?”
- 12. DESIGN GUIDELINES APIs Make sure your APIs can make calls quickly as this hurdle will allow you optimal time to interact with your user. Make sure your APIs are calling engaging content. Brevity A good rule of thumb is the least amount of syllables you can get away with. Our persona says “you’ve” instead of “you have.” Natural conversation Eliminate as many steps as you can and make the conversation natural. Unlike an app where you want your user to stay in and engage, we aim to get the user in and out. Error handling Something will ALWAYS go wrong. How will a VUI recover? How do you escalate when the error continues?
- 13. DESIGN GUIDELINES Conversation markers These create an engaging VUI that is more human-like. Where is the user within the conversation? Confirmation messages Excessive confirmation leads to poor UX. What is the confidence of the VUI’s respondes? Coreferencing The use of two different terms to refer to the same thing. Utilize for continued conversation.
- 14. VOICE ACTION FEATURES Add Adding items including quantities, multiple items, and substitutions. Search Searching for items within the user’s cart including suggestions for not-found items. Remove Removing items with or without quantitiy from the user’s cart. Coupons Clipping coupons when adding items as well as for items already in cart.
- 15. PRODUCT ORGANIZATION Spreadsheet Everything a user and the action can say is represented by a code in the green boxes. The spreadsheet includes: Storyboard version, category, feature, code, and the actor the phrases belong to. Storyboards Storyboards reflect everything the action is able to perform at a technical level.
- 16. Brainstorming Storyboards Start with a user task and work collaboratively on how they will reach their goal. At Kroger… The PM knows the vision The Tech Lead knows what is is technically possible The UX Designer decides the language and pathing
- 17. LOW FIDELITY PROTOTYPES FOR TESTING 1 1 1 Write out a script If your interaction has a script you can start testing. Map out what the user could say and every response from the action. Add context Use a phone or hide the person acting as the action. It provides context for the user. Pain point Sometimes users respond in ways you don’t for. This can cause hiccups during testing. Make sure your script is robust. Help needed You should have a moderator, notetaker, and someone to play the action. It helps if you are all familiar with the product. Low fidelity is possible when the feature is very straight forward without much room for deviation.
- 18. HIGH FIDELITY PROTOTYPES FOR TESTING 1 1 1 Best option The prototype will handle all user input accordingly. There will be less hiccups. More work up front Error states should be handles and all pathways should be accounted for. However, this gives great context for the user. Pain point You can’t interupt the user during a task or the action may cancel. Less manpower There will only be a moderator and notetaker for these types of tests. High fidelity is a great option if you have the ability to rapidly develop.
Hinweis der Redaktion
- Ask who uses a voice assistant
- The case study we will cover today will cover how the Kroger voice team developed a voice action.
- Voice products can be inherently difficult to use because we as people rely so much on our sense of sight. Having no visual interface for an action leads to difficulty with orienting ourselves and discovering new features. Even with these pain points, users are adopting voice technology. Since there is no visual interface, we have to combat against user distraction. With a mobile app, user’s are able to look for what they want and they are inherently focused on a task. Without a visual UI, they could be distracted by the world around them.
- Think about the user’s environment and where your voice product lives within their life. How can a user stop being lost while driving and use GPS navigation? How could they use a recipe without touching their mobile device because their hands are covered in raw chicken? Voice technology can be a great help in both of these situations but, if implemented poorly, can make an annoying situation into a memorably frustrating one. Let’s run through an exercise...
- Here is a list of 21 words. For the 15-30 seconds try to memorize as many as you can. Keep them in your head and don’t write them down.
- Take another 15-30 seconds to recall as many words as you can. You can write them down or use your hand: (motion with hands), like seashell, puppy, water…
- How did everyone do? Who remembers 1-3 words? 4-6? 7-10? More than 10? Awesome. Most likely you will have 5-9 words correctly recalled.
- As people, recalling information especially without a visual can be difficult. George Miller was a psychologist from the 50s that found the human brain can only remember 7 bits of information at a time on average. Keeping a lot of information mentally organized as a user is easily overwhelming. At Kroger, my team and I have had to consider how to tackle this without much guidance. We have started with only providing 3 pieces of information at a time as to help the user keep track of what they’re hearing.
- To talk a little bit more about human memory, we have the Ebbinghause Forgetting Curve. This essentially means that when you learn pieces of information, you only recall 80% the next day and without repeated learning it goes own to less than 70% on day two and below 60% by day 3. Ways to balance this are to provide a tutorial for first time users that can be accessed immediately, skipped through, or passed. If the user isn’t up to learning all the commands your VUI can perform, interject with help when appropriate. At Kroger, a user may add an item but the wrong item was added. They can say, “remove that,” but in order to do so, we need to tell them that’s possible. If a user hasn’t gotten this hint before, or it’s been awhile since they accessed the Kroger action, after a user adds an item to their cart we will say, “<item> added to your cart. If this item isn't correct, you can always say "remove that" after adding. Anything else?” Interjecting every 5th or 10th time for example to ensure a user knows what the action can do is less intrusive but still keeps valuable features accessible.
- There are few design hurdles that need to be overcome when creating a voice product. Consider how to create user paths and mock-ups of UI when the product doesn’t have a visual component and how the user will access features. On top of it all, how, as a UX designer, am I going to keep track of this product? Although I love the work I do, I don’t have the luxury of looking at wireframes and immediately having an idea of navigation structure or how content is organized. All of this can be a bit overwhelming but that’s okay. At this point in the design we have a great starting point and that’s having the user’s context. Their hands are tied, they’re distracted and we can design for this.
- When you’re starting to design a voice product, consider your brand. As humans we are wired to anthropormorphize. We see faces in every day objects (Pareidolia) and talk to our pets like they’re babies. Users will do the same with a VUI. Think, iIf they were a person, how are they going to speak to your customers? How will your customers expect you to speak to them? At I/O ‘18, Google asked, is our assistant a butler or a helpful mentor? Since Kroger has an established brand persona of a “cool aunt”, that aided us in considering how a “cool aunt” would speak. She uses contractions and casual language. Kroger is informative, helpful, warm, and conversational. On the other hand a butler would be formal, articulate, and precise. We did some groundwork into how the voice action will also sound and are in process of how we will implement our idea. I started to listen to actors and speakers that were similar to the Kroger persona and then thought, why not try to emulate the narrator from a Kroger commerical spot? Using that laid some ground work of what to aim for. Other things to consider when designing how your brand persona will sound outside of language are cadence, tambor, and rasp.
- Now that we have our voice persona squared away, how do we make sure we are clear and quick? Google voice actions allow for a 5 second window to talk to your user, listen to the user’s request, and make any API calls for the next interaction. This can sound difficult on the surface level, however any longer than that and your user may wonder if you are listening to them or will forget what you told them which means they become frustrated and leave your action. Make sure your APIs can make calls quickly as this hurdle will allow you optimal time to interact with your user. It’s not just about calling the API though, you should be retrieving quality content. For instance, if had a cart API but could only search for existing items, rather thand adding, removing, and substuting, it would not be engaging for the user. A good rule of thumb is the least amount of syllables you can get away with. Our persona says “you’ve” instead of “you have.” Eliminate as many steps as you can and make the conversation natural. Unlike an app where you want your user to stay in and engage, we aim to get the user in and out. For instance instead of having a user ask if they have milk in their cart and then having to add it, they can ask if they have milk and the action will tell them, I didn’t find milk but I found this milk that you always buy, do you want to add it? This eliminates a step in the conversation. What was clear to me during testing and from what I have researched is that something will ALWAYS go wrong with a VUI. Ways this can happen is when there is no speech detected, speech is detected but not recognized, something was recognized correctly but the system did the wrong thing with it, and something was recognized incorrectly. If we didn’t understand a user and left the conversation for instance, the user would have to go through the whole, “OK Google, talk to Kroger,” shpiel again which would be an irritating interaction. If we don’t understand, we ask the user to repeat themselves. Another way we could do this is not answer back immediately. Silence is an indicator for people to repeat themselves without prompting.
- Conversation markers allow the user to be oriented within a conversation. They are given an idea about how much information to expect the action to give them. For instance, the Kroger action will tell you that you have 7 items in your cart. Your first three are a, b, c. The next three are x, y, z, and your last item is d. We only give 3 items at a time and allow the user to escape this interaction if they aren’t interested in hearing all their items. Confirmation messages can aid with error handling. When a user says, “add milk to my cart,” we respond with the exact item name. Say if we were 100% correct on listening to the user we could say, “got it.” If we were only 70-90% we could say “milk added to your cart,” and if we were less than 70% we could ask the user to repeat themselves. It’s imporant that we don’t annoy the user with over confirmation as well. An instance of this was asking about items in the cart. It would say your first item is a, your second item is b, your third item is c. To hear more say, “more.” The ranking of the item isn’t important for the user to know and we could simply ask the user if they want to hear more. Rather than becoming repetative with our commands. The use of two different terms to refer to the same thing is called coference, and is an essential part of communication. Without it, conversations would quickly break down. For instance a user says, “add milk to my cart” and then once it is added they say, “remove that.” The Kroger action is able to understand that “that” refers to milk. The user can have multiple actions in one interaction with natural conversation.
- We need to figure out the top user tasks that are contextual for voice. For Kroger, these include adding, removing, searching for items. Without these features, adding especially, you can’t use the action. There are many other features we’ve designed such as cart details, clipping coupons, onboarding, and store locator. To discover these for your product, you can bust your your traditional UX research methods via stakeholder and user interviews, competitive analysis, or even ethnography if you are able to reach the user’s environment.
- We know that users want to add, search, and remove items but how will they do so? To design this, we need something visual we can refer to. Though they aren’t the most glamorous, storyboards and spreadsheets are essentially our wireframes for understanding this invisible product. From these two deliverables, we are able to craft scripts and usability tests to find where users lose their way or if we hit the mark. The spreadsheet and storyboard compliment each other and are similar to sitemaps. The storyboard reflects how the action works from a technical side and have codes that relate to phrases on the spreadsheet within the green boxes. These were created to fulfil the need to keep the action organized. Since we work with developers overseas, this allows us to have a stable tool they can refer to when we aren’t able to communicate because of timezones.
- How do you design a storyboard though? A Kroger we have the product manager, tech lead, UX designer work collaboratively on designing a feature. We start with a task the user wants to take. Along the way in the storyboard we ask yes or no questions in order to cover every scenario variation. The product manager has a say if we get off track or the story isn’t accomplishing what he needs it to, the tech leads provides technical limitations and the UX designer identifies paths that are confusing and what language the action should respond with. By working together in a small group, we can design efficiently.
- We performed usability testing with low fidelity prototypes as well as high fidelity. They each have their pluses and minuses. To start, low fidelity will be the easiest to set up and the most difficult to perform. In order to test a feature, say a user wants to add an item to their cart, a script can be written out what the user and action will say. I tried to identify every phrase the action can say and how you expect the user to respond. However, I had testing participants reply in unexpected ways which had me fumble with the script and ultimately had the interaction lose its authenticity. During testing, 1 out of 4 users would say something unexpected, it’s almost unavoidable. I would have ideally liked to have someone playing the part of the action while I moderated. This was definitely something I have to consider for any future testing. It was too much to juggle at once. For context though, if someone could play the action and be in another room, it would give the testing participant a more realistic context. They aren’t talking to a person, they’re talking to a robot. The biggest thing learned from testing in this fashion is that more people needed to be incolved to run it. The ideal would be a moderator, notetaker, and a person to play the role of the action.
- High fidelity means having a prototype where the user can speak to the google action and it responds. This is the best option if you can swing it. I was lucky enough to sit next to the voice developer and we were able to prototype and test different features on a weekly basis. A pain point for high fidelity prototype testing is that you cannot interrupt the user until they are done with their interaction. This is because if I speak, the Google mini or smart display is continually listening and will change or end the interaction. The way I have gotten around this is that I instruct the user beforehand I will make a gesture for them to turn off the mic so we can speak about things they are saying, thinking, and feeling. With a low fidelity prototype, you would be able to interupt them at any time. I highly recommend having a notetaker for this process as you moderate. As with any user test, this puts your full attention on your user. These interactions are quick and close attention is needed more so than when a user is testing amobile app. Less manpower is needed as only a moderator and notetaker are needed for this type of prototype.
- Go forth and make awesome voice products, thanks for listening!