The application is almost complete, at code level there are just some details to finish and the implementation of a basic Spring Security authentication.
These past days I noticed there were some things that needed to be better done, mostly to be friendlier with the user :
- A better alert/notification system, not just the classic browser alert.
There were some errors thrown in the console lacking information.
- The settings button has the same icon when you’re in the settings screen, which is not very intuitive since in order to go back you have to click in the same icon.
- When cameras were loading there was just an empty space, nothing to let the user know that the cameras are actually loading.
- As with the last two issues, the first time you get in a session there are no cameras so, the user can get easily lost, because there is no help whatsoever with where to start.
This is definitely prettier and it’ll let you know faster and easier if there was an error. I modified it a little to adapt it to my application and since the code was well done, it was very simple.
Errors in the console.
Most of these errors where just functions called in the wrong place or a bad error handling. There was also an error about “expression changed after checked”, this one is very well explained here.
The last points in the list are all usability issues, the app is not easy to use if you are new to it. There are more things to improve, but here’s how I fixed some of them.
First the settings button, this one is easy, I just changed the icon when you click on it.
Next there was the loading cameras with an empty space problem, the cameras were there, loading, but you wouldn’t know. So I found this page called loading.io where you can make a custom loading gif/image/animation for free.
I made this one using the color palette of my application in coolors and then downloaded different sizes of it, as the main camera has a bigger screen and it was showing in a very low quality.
The last issue is for people that access to the app for the first time, just a simple empty screen and not a clue of what to do.
When the user system is done there may be a better way to do this, but for now you get this message where you can click on the icon displayed on the alert or search for it on the screen. From there, you’ll know what to do when you see an “Add camera” button.