Not all development journey’s are glamorous or make you feel like a ninja programmer. In this case I was getting re-educated on UX principles. This is a tale of how it took weeks to go through many iterations of a screen design to finally have people stop asking questions on how it works. it shows the gap between design by a developer who know how it works to a user who is coming in with fresh eyes. Just a note all of what happened below was in a UAT environment. its always recommended to go through UAT first to iron out these types of issues. However as the title mentions, it took weeks to eventually finalize a solution.
Splash Screen
This wasn’t a normal splash screen, it was a page we showed after the user tried to log in and showed some news about the company, while in the background it automatically logged into multiples systems. Once the login was complete, they could move into the main part of the app. Here is what we did to give the user the ability to move into the app.
#1 – Swipe Up Gesture
First is starts with the swipe up to move to the next page. Once its logged in they could swipe up on the page to move into the main app. But it was very quickly clear we needed a away to inform the user they could swipe.
#2 – Add Toast Notification
Now we add a toast notification to the top of the screen with a message saying they can now swipe up. But people don’t read their notifications thoroughly and they still needed to be taught what to do.
#3 – Add a Tab with arrow up at the bottom of the page
Now a small tab with an up arrow image appeared at the bottom of the page and they could hold that and swipe up to go to the next page. However people keeping with what they knew were trying to swipe anywhere on the page and new users still didn’t know what to do. Plus the page now looked horrible and cluttered.
#4 – Lets add a Button
Its all getting far too complicated, lets get back to basics. Lets remove all the other elements and swipe gestures and just add a button at the bottom of the screen, saying “Continue >” when its finished logging in. People must know what to do now. I will be smart as well and even add a loading indicator where the button should pop up to ensure people know something is happening and they need to wait.
And what happened next.
Can you please make the button load faster, was a response we received from that.
Foiled once again.
#5 – Lets add loading text
Now we also display “Logging in, please wait …” underneath a loading indicator.
Then someone had Large Text enabled in their accessibility options and the text ran off the screen.
#6 – Format design to work with Accessibility options
Keeping the text at a maximum font size for the appropriate screen size resolved that issue.
And now we have finally finished that small feature on a page.
This just shows that trying to add cool features or gestures and not sticking with basics can really leave people confused.
Lessons
#1 – Don’t make hidden gestures
#2 – Don’t make hidden elements, one common example is the Hamburger menu.
#3 – Need to tell the user what is happening
#4 – Need to show the user something is still happening.
#5 – Ideally it would be good to show them how long they have left to wait until a timeout or success.
#6 – Don’t make them read text to understand what to do next
#7 – Account for accessibility options
#8 – Make button text descriptive of the action
For an example of a button with a loading indicator I have a small code example at Custom Animations in Xamarin Forms.
Cross platform mobile developer who loves delving deep into frameworks and solving problems.