How to ask your users to do 10 push-ups to help you 🏋🏻‍♀️?

#ux #ui #usability #twil

TWIL – ‘This Week I Learnt’ is a series of article I will be writing every week, which includes a set of UI/UX challenges and funny things.

Situation:

My user is a scientist 👩‍🔬 from ISRO 🚀. She is minutes away from launching her very first rocket into the space. Everything is in place, all she has to do is to follow “5 step to launch a rocket program” in my website to launch the rocket. As she was following she gets stuck in step 4. The page does not respond and clearly shows a message :

“something went wrong please give us the feedback to solve this issue”

Now she is angry😡, frustrated😤, In the feedback form she sees that to fix this issue developer needs some information. like, log data, screenshots, HAR data, and steps to reproduce, description, and of course 10 Push-ups. (Launching in 60 s)

Why 10 Puh-ups?

To solve the issue I need :

Console log data📠.
Screenshots📸.
HAR data📟.
Steps to reproduce📽.
Description📝.
10 Push-ups🏋🏻‍♂️.

These are the all and only things I need. This will help me to exactly point out and troubleshoot the issue in no time so that the scientist won’t miss the launching time. This will prevent me from frequently poking the scientist😤 for more info. I need her to do 10 push-ups so that meanwhile I can successfully fix the issue. (Launching in 50 s)

Can I skip a few? :

Let me find what and all data’s can be automated and collected without users help and reduce the steps.

Screenshot
Screenshots can be taken without users help, I can use any libraries such as html2canvas which converts entire HTML web pages into a canvas or image. So I can trigger it once the user opens the feedback window 🤘🏻🤟🏻. (Launching in 50 s)

Description
We need description so that we will know what exactly the issue the user is facing. May be the scientist was color blind and may be she was not able to see the launch button and all I was fixing was why the button was not working for her. To avoid this I will make this as mandatory field and make minimum of 5 letter long📄. (Launching in 40 s)

Steps to reproduce
Steps to reproduce is a 5 step game 🎮 where user inputs the each steps to reach the closer to the bug. This is not a mandatory field, we still have this step because some times just by recalling the steps to reproduce the user might recognise what step he skipped and ended up in the bug. Also it will be much easier for developers(me) to follow the step to recreate the issue. (Launching in 30 s)

Console log and HAR data
HAR – HTTP Archive file. This holds all the http calls performed in the session, this can be downloaded as .har file from browser’s developer tools.

These are very useful info for a developer. With these files, if there was any network failure or http request failing then the solution is a no brainier and can be fixed in no time. For coding related issues or run time errors the log file will provide the exact error. (Launching in 20 s)
If there are network issues, this will be recorded in the console log as well so I will make console log data as mandatory and HAR as optional. (Launching in 10 s)

How to ask them nicely ?

Now we have listed what is mandatory and what is optional, let’s simplify the mandatory things. As description is just a text area and minimum characters required to explain the issue is 5. Can’t be simplified further. 🤘🏻

The next mandatory field is uploading console log data. This is actually a longer process as the user should open browsers developers tool, reproduce the entire issue open the console tab and copy and save the data in their local system, then they have to upload the same file. This process is absolutely Area 51 for any average end user and of course for the ISRO scientist 🤒. My task here is to ask them to follow the steps nicely and easily🤥.

So, here If I explain the steps in plain text then steps will come up to 8–9 which is bad. If I go with gif , this would be a longest gif in the history and user might get lost or wait till whole gif to complete a cycle to follow after each step. If I go with video , this will be a just overhead and user might need to wait for video to load. So definitely I am not going with single type of approach 🙅🏻‍♂️.

I mixed both gif and text together and ended up in only 5 steps 🧙🏻‍♀️. 3 of the complex steps followed with a 2 second long cropped gifs. This was smooth and easy to follow. Next was HAR, HAR also follows exact same steps as that of console log so this was enabled only after console log has been uploaded. We told them to perform this right after the console log so, We gave exactly 2 steps and a gif to upload the HAR file 🦸🏻‍♂️. (Launching in 10 s)

Conclusion

So this is how we collected all the data from user to troubleshoot the issue. Things went well and we were able to fix the issue in time and quickly. And she was able to launch her first rocket 🚀 into the space. (Successful launch). 👏 👏 👏