Better User Experience Of Your App. Tips For Vue.js Developers
After spending some time in Warsaw, I came back to Ukraine. That wasn’t an easy decision. Russian missiles constantly attack my country. Winter has come, and this time their goals are power plants. As a result, all regions faced emergent and scheduled power outages. Here, in Kyiv, we experienced the first total blackout last week. I hadn’t had electricity, water, heating, and mobile communication in my apartment for two days. To be able to work, I had to go to the office. My daily routine changed. I couldn’t go to the gym, meet my friends for a walk or a drink, read books, listen to music or watch Netflix as I usually do. Apart from that, I started smoking; I spend more money on donations to the Armed Forces of Ukraine; I try to call my relatives more often. Every day could be your last day. It is a war reality Ukrainians have been dealing with for nine months.
Those are the circumstances I’ve been going through right now. Nevertheless, I do my best to keep being concentrated and productive. I take care of my physical and mental health. I try to learn something new when it is possible. Today I want to show you my new Vue 3 project, written with Composition API. It is a simple personal library manager where you can register your book, rate it and leave a comment. I created it to test modern Vue.js libraries — Pinia and VueUse. When it was ready, I showed it to my colleague. He left some comments and inspired me to write this post. So, here are a few tips on how to improve the user experience of your application.
Your application runs fast. Good for you. But not always for users
The first version of my app ran fast, and I was proud of it. It took me less than a second to register or delete a book. But the truth is that it may be confusing for a user to understand what’s going on. Where is a record I’ve just created? What should I do if I want to undo the deletion? In my app, all books were sorted by date, from the oldest to the newest one. And if there were a lot of books, a user wouldn’t be able to see the one they just created. Also, there were no warnings about removing a book and no possibility of restoring it. That meant a lot of work ahead.
Users need visual hints. Try to add some animation
First, I created a new computed, which solved a sorting issue. Now a user could see a new record in the first place in the list. That was easy, but not enough. I needed to add some animation, which helped to make user actions more noticeable. I managed to achieve this with the Vue.js TransitionGroup. Check the BookList component for more details.
Modals can be nasty. But users do need them
The only modal I added to my project is connected to the delete action. A user got a chance to think twice before removing a book from their library. After seeing the popup message: “Are you sure you want to delete this book?”, you can choose between two options — keep the book in your library or delete it. Also, you can close the modal and continue working with your library.
Netflix uses toast messages. And you should
I’ve borrowed one fancy feature from Netflix. When you remove a movie from your list, the service first tells you that the action was successful and then allows you to restore it. I tried to do the same in my application. In the BookList component, I created a toast message with a button. If you click it, the undoRemoving function will fire. Now you can have your book back. Happy end.
That’s it. I hope you enjoyed reading my post. Here you can play with my application, and here you can check the project repository on Github. If you have any comments or suggestions, text me on Twitter @ni4yja.
