I’ve been writing mobile and web applications for a while. I mainly use async tasks, two way data binding etc. I’m updating / changing UI as data arrives from server or internal services. I have a problem here.
For example, for the case of login:
I have an Android app, and a login screen in it. When user clicks on the Log In button, I’m hiding the keyboard and showing a dialog which is saying ‘logging in, please wait’.
Sometimes the login process takes maybe less than 1/5 second. Sometimes it takes much more, for slow connections or other heavy web requests.
Again, for the devices which has good processing power and internet connection, at that really short time, I’m
- Hiding the keyboard,
- Showing a wait dialog,
- When response arrives, removing the wait dialog
- Changing the whole page.
That makes the UI look very confusing to me. I can’t remove the loading dialog or put a delay since there will be slow connections. Since I don’t know what kind of response I’ll get, I couldn’t find a way to use animations to prevent this confusion.
Similar thing for web (Angular) apps too. I’m loading a page. Then the arriving data is just changing UI in front of user. Even though there is a loading dialog, the showing/hiding of elements moves the whole page around in the background.
I’ve been thinking about dimming the page completely and adding a loading message with a minimum fixed wait time (like maybe 1.5 seconds). Is that a good approach for this kind of situation or did I totally misunderstood UI update stuff? Any alternative recommendations are welcome.