Design of ‘Progress Bar’ for Chatbots
Uncertainty is irritating. More so if you are filling a mandatory survey with zero involvement.
“How long is this survey?”
“What? there’s yet another question?”
“Goddd!! this is never ending…!”
“Let me just choose random options and get back to work already!”
And gone.
Thats one more user’s valuable response lost, this is a common scenario we have faced while filling survey forms which doesn’t give any feedback as to how much of it is completed and how much more is left.
Context Setting
The design challenge that I have taken up is about an AI chatbot that is built for communicating with the employees to understand their concerns in the workplace. The responses are analysed and the insights/recommendations are given to the employer with the intention of improving the work place culture and reducing the attrition rate.
Now, the duration of conversation between chatbot and the user is dynamic, depending on the responses given by the user, the questions asked by the chatbot may vary, in turn increasing or decreasing the overall conversation time of a session.
But, how do we ‘not’ irritate the user about this ambiguity of varying duration of conversations ? in other words, how do we give a feedback about the progress of chat between the bot and the user?
Well, that is the challenge I’m trying to solve here using design process.
Methodology
I have approached the problem as a concept design challenge. After briefing the problem, user profile and needs are defined. Few literature on enhancing the workplace culture, chatbots and progress bars were referred to get a holistic understanding of the problem.
Since the activity was completed in less than 2 days, the final output talks about concepts and key insights in design of progress bars. User testing and validation of concepts with real users have been omitted.
User Profile
User Needs
- A platform where user can express her concerns anonymously.
- The solution must be crisp and the interactions with it must have sufficient feedback.
- There needs to be elements of fun while doing a task that has high chances of quickly turning out to be monotonous and boring.
Key Insights from Desk Research
- ‘Effective communication’ is a simple and efficient way to improve workplace culture
There are a plethora of ways in which companies can try to improve their work culture, but there is one effective method which repeats itself in many studies time and again. The method is very crisply captured in a Forbes article — ‘Talk to your employees, ask them what they want’. But would all employees be comfortable expressing their concerns with their higher management ? Well, many would not be. So is there an intelligent way to capture the feelings of employees ? without the fear or anxiety of being judged upon ?…. Well, yes, chatbots might be the answer.
2. Important takeaway from Chatbot UX design and consideration
When users first come to chat with a bot, there is a high chance of them loosing trust over the bot if the advancing dialogs are not convincing and ambiguous. Designers must take charge and design a flow that will lead users smoothly through the intended conversation. One of the heuristic principles is to provide enough guidance for users to know where they are in the system and when there will be a conclusive end.
3. Principles of progress bar design
Progress indicators inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. The design of progress bars are driven by following principles -
Progress bars should be -
Ideations
Idea 1 :
Classical progress bar
A horizontal progress bar indicates the completion of the survey questions.
In this straight-forward approach the progress bar is placed at a strategic space of the screen such that there is not too much of a visual interference with the key function of the product.
Pros -
- Simple and minimal
- Does not occupy a lot of screen area
- Does not occlude the main information
Cons -
- Boring, lack of play value
- Progress bar has no other supplementary purpose
- Lack of inherent novelty
Idea 2 :
Surprise reveal progress bar
A circular progress bar with organic motion and gamified animation element which reveals itself with the progress of the conversation
This idea quite literally makes progress bar the hero of the app screen. Being placed at the helm of conversation between the bot and user, it slowly reveals itself keeping user hooked till the end of activity.
Pros -
- Captivating and fresh
- Slow reveal leads to curiosity
- Gives novel identity to the product
Cons -
- Lot of attention on progress bar
- Chat thread can’t be seen
- Unusual chatbot interface
Importance of Surprise and Delight
Having surprise and delight moments create differentiation from competitors and give a competitive advantage. They create a connection that people remember and have the opportunity to create a long-term connection with the brand. In our solution the surprise element also serves the purpose of keeping user hooked onto the conversation till the very end and gives a sense of enjoyment even while actually performing a rather serious task.
Proposed Design Concept
Chat bubble with progress bar
Based on the evaluations of option 1 and 2, it is quite clear that the final solution for the chatbot should in the end look like a chatbot while still having the element of delight.
Features
States of Progress bar
Typing indicators allow a chatbot to interact with the user in a more natural kind of conversation. If a chatbot needs to send multiple responses to a user, it is ideal for the bot to wait momentarily in between messages with the typing indicator present.
Give sense of accomplishment
Reward systems are powerful tools used to ensure that users get the most value out of their products. Presenting visual design solutions like a celebratory animation makes the solution appealing to the target audience and adds the motive of aesthetic satisfaction. It also helps end a serious activity on a fun, happy and positive note.
Make it look faster
During the conversations between bot and the user, using distractions and varying speeds in the circular bar can help create the perceptions of speed.
In the image alongside, a slow start (region 1) fast midway (region 2) and faster in the end (region 3) will give the feeling of speedier completion.
In order to achieve this in our problem, the progression speed of segments in the bar can be tweaked while the questions are being asked.
Conclusion
Progress bars may be an understated design component, but lack of it or a badly designed progress bar can make the difference between an honest response and a hasty mindless one.
While I have jotted down my ideas and thoughts on the problem, I am still working on the animations and high fidelity sketches to convey the information with more impact.
Thank you for reading. Do share your thoughts on the article.
