8 minute read
Final Screens_dashboard design
Advertisement
1. Introduction to Voice User Interface
“OKAY GOOGLE! Play Lua By Bright Eyes” “ALRIGHT! PLAYING Lua by Bright Eye on Spotify” is your AI taking voice commands from you.
This process of setting any ai to talk to you and respond with an appropriate response is VUI. In textaul language: Voice user interfaces (VUIs) allow the user to interact with a system through voice or speech commands. Virtual assistants, such as Siri, Google Assistant, and Alexa, are examples of VUIs.
The primary advantage of a VUI is that it allows for a hands-free, eyes-free way in which users can interact with a product while focusing their attention elsewhere. Today VUI’s are everywhere. We can find voice user interfaces in phones, televisions, smart homes and a range of other products. With the advances in voice recognition and smart home technology, voice interaction is only expected to grow.
Sometimes, voice user interfaces are optional features of otherwise graphical user interfaces—e.g., when you use it to search for movie titles on your TV or a song to search in your phone as it is illustrated below.
Design Brief
The brief was to design a VUI for alexa. This VUI was exclusively designed for the in house product i.e Yellow.live. The whole idea was to present this VUI using alexa skill set and using the product as a complimentary gift to the certain big buyers of the product. This was a marketing gimmick and an idea was to promote Unthinkable as a brand on every Principles desk.
Design Challenge
I was given a task to design a VUI. Till that day all I knew about VUI was my google assistant and the movie “Her”. To start the project I backed myself with information on VUI and Alexa skill sets. Going through each and every alexa design guideline was the last thing I was reading at night. The main challenge was not just designing a Voice User commands and favourable response but also the graphics for the same. The device we choose was Echo Show gen 2 (shown below). One of the echo device that came with a ten inch HD screen. So my challenge was not limited to designing the voice, I was responsible for possible graphic user interface (GUI) for the same purpose. Since the idea was to teach Alexa a new skill.
The options to play around were very limited as this is something still emerging. The idea of teaching a specific skill to Alexa is still new. The number of references I could look up was bare minimum.
• Create a great user experience • Apt voice interaction • Understanding how people naturally communicate • Fundamentals of voice interaction
Guidelines
Design Process
This project took more than three weeks to create the first version. As while working on this project there were a number of steps I had to go through and get feedback. Getting feedback is really important to make yourself better. Listening to feedback is always helpful. Below I have mentioned the steps
Steps taken
1. Understanding Alexa 2. Knowing the limits/scope of Alexa 3. Identifying the ultimate user and building user persona 4. Creating questions and commands 5. Coordinating with developer for building Alexa Skill. 6. Questions selected 7. User Interface Design
1. Understanding Alexa
Alexa is a virtual digital assistant developed by Amazon for its Amazon Echo and Echo Dot line of computing devices. Alexa’s capabilities mimic those of other intelligent assistants such as Apple Siri, Microsoft Cortana, Google Assistant, and Samsung Bixby. Alexa responds to voice control by returning information on products (on Amazon of course), music, news, weather, sports, and more. The back-end engine for Amazon’s Alexa runs on Amazon Web Services in the cloud, enabling Alexa to learn an individual or family’s preferences and expand its functionality over time. This step involved using the product on which we were going to run Alexa. The product we were using was the Echo show, 2nd generation.
2. Knowing the limits/scope of Alexa:
To learn and understand the design scope of Alexa I did brief research with the data provided by Alexa. This included the following data research and learning new terminologies:
Alexa Presentation Language:
It is a visual design framework, which allows you to build interactive voice and visual experiences across the device landscape. This multi-modal experience can make skills more delightful and engaging to the customer. APL provides visual elements including:
1. Graphics 2. Images 3. Slideshows 4. Video
Need for APL:
Amazon created APL so that one can design custom experiences that combine voice, audio, and visual elements in a single customer interface. • This framework is adaptable so one design can scale to multiple device types while keeping the visual and voice elements synchronized. • APL supports voice commands as well so that customers can ask for an item on screen instead of relying on touch interactions only.
Designing with Alexa
To understand how efficiently one can design with Alexe, I did a study of Alexa design Guidelines. This whole research was in the form of a presentation. I have summoned the presentation in the form of multiple paragraphs and topics to include it in this document as a research.
We get the freedom to define where our visual elements are placed on screen, matching our visual expression and brand identity across many Alexa-enabled devices. One can run a test simulation in the Alexa Developer Console to see what your design looks like across Alexa-enabled device types built by Amazon.
Amazon provides sample APL layouts. These layouts are designed to work well across a broad range of Alexa-enabled device types. One can use the layouts as-is, modify them, or build your own from scratch.
The ultimate user of this product was a school principal or a school owner. So to narrow down the needs/types of questions that would come to a principal’s mind, I created a user persona of a principal to understand and articulate his pain points in this new VUI skill that we were trying to create. From the beginning, we knew this product is a marketing gimmick offered with the goal of flattering the customer with a complimentary gift. Along with that we also saw it as a scope to brand ourselves as an esteemed service provider on a principal’s desk.
Understanding User
Creating Principal’s User Persona:
To create an ideal user persona, first I should have created an empathy map in regards to the product (yellow.live) we offered. Since the product is all about student’s safety while commuting from school to home and vice- versa. The empathy map had to revolve around the same notion and data regarding the same service. But due to lack Field study, I created Questionnaire with the help
4. Creating Questionnaire and commands
For creating the questionnaire we worked with the sales team to incorporate more question that we could teach our skill. As initially the plan was to make a whole some vui that could answer atleast any general question that subconsciously came to a principals mind. With the same notion of creating something new, we created of the sales team. Why the sales team? Because the sales team was the team that dealt with the real users. They understood their needs completely. But if I consider the essential steps, empathy mapping was a must. Lesson: Empathy Maps are important for field research.
more than 200 questions that a principal could ask. These question s were in an excel sheet form. I have pasted screenshots of the same to show the examples of questions that were created by 20 members of the sales team.
Screenshots of excel sheets with questions
Screenshots of excel sheets with questions
Developer is very crucial in building prototypes into real life. The developers are responsible to code our thoughts and design ideas into the form of workable products, understanding a developer becomes important. But a developer and a designer are like two poles (at least according to my limited knowledge).
Identification of the limitations:
As I worked with the developer, I understood that not every idea can be executed with limited human resources. After coordinating with the developer, I learnt about the limitations of Alexa as a skill set. We had 200-300 questions to create a VUI but the execution part was difficult.
Teaching an AI to respond according to your needs and desires was actually more than a 2 weeks task. This might be because of our amateur skills or maybe because Alexa worked on the personal language called lambda. I did not understand the technical part much since code is like putting energy cells into an idea you create as a prototype. With the limitations of Alexa or our understanding of Alexa, we came to a conclusion that we will be focusing on 4 questions
for the first version.
Another challenge we faced was the workability of the Graphical User Interface along with the Voice user interface we were aiming to create. According to Alexa design guidelines, Alexa could only display text/images for each action.
Also rendering a real time report was a question too. As we wanted the skill to answer questions like: How many are using bus services or how many buses are on route 9?
This seemed to be too specific for Alexa. As Alexa has to have skills coded for everything apart from show weather and play music. I personally found Alexa a dumb possibility But still an employee got to do what he is asked to do. So we worked on an implausible idea for 3 weeks and created version one that answered 4 questions.
