There are only a few jobs that, even on an entry level, are as strict as app development. You can make anything you like, but if the app is not easy to understand, Apple or Google might decline your update. And if it manages to sneak by those inspections, an end-user might give you a single star rating that might hurt the app’s performance in the stores.
More than ever, a good User Experience is a key factor in a successfull product. In this article I would like to share my experience with UX in apps, how I look at certain problems and how I overcome them. We will use one of my apps I have developed from the ground-up: Glow FM.
When I started developing the latest major version for Glow FM, I only had two constraints: it needs to be able to play a live stream and it has to fit into the Glow FM brand. This basically meant that I had a blank canvas to work with.
The home screen
The single most important spot in any app is the home screen. Anything a user wants to do quickly, should be in reach. Most users, eventhough they have used the app before and fully understand it, will never see any other screen than this. That is a compliment, since users can get their tasks done quickly.
Design
A couple of things to note about the design. First, the background. For many apps an afterthought, if it even has a background at all. I have treated it as an important part of guiding people’s eyes. For example: the bottom part of the background is ever so slightly brighter than the top part. That forces the eyes of the user to look to the main navigation at the bottom.
The main navigation is also an unusual shape, compared to most apps. By integrating the play button in the center, it almost begs the user to press it.
UX
Now we have grabbed the user’s attention, we guide them trough the features of the app. All buttons on this screen are on the bottom, easy to reach with just one thumb. The next thing a user might notice is the icon on the left that has an ever so slightly different background color then the rest. It peaks the user’s interest to see if they can do more with the app. And as a matter of fact, they can!
Tabbed apps, but ever so slightly different
The user will be rewarded by 3 more pages, or tabs, within the app: schedule, starting a chat and news. At this time, a user might have noticed something that was a very intentional choice: there is little to no text, only if it is really necessary. No buttons are labeled with text, other than invisible content descriptions for vision impaired users. Even the news page has not much text. If a certain text doesn’t add anything, I discarded it. That only leaves the title, which accurately describes what a certain news article is about.
Design
The home page design can be found on this page too. Some spacing gives the app some room to breathe. No date/time is being displayed or “you’ve read this article”, since it would make this page feel cluttered.
UX
There are three very small details that are crucial in this tab to make it work. You might not even notice them the first time around.
- The main article on the top has a gradient, so the text on the bottom is always clearly visible, even if the picture has an all white background.
- When an article has no image, like the bottom article in this example, a placeholder is being displayed. That prevents breaking the style.
- This page can scroll. To make that clear, a gradient is added behind our main navigation that fades out overflowing articles, keeping the bottom of the app clean for normal system navigation elements.
Multitasking is key
This is a different thought than you might find in most apps: the idea that your app is not always the most important thing for a user. Switching between tasks is on both Android and iOS easier than ever before, especially on tablets. Docking apps to the side of a screen is a very comon use case. But apps take up 100% of the screen realestate, so you better make it worth the pixels. That’s where the screenshot above comes in.
When a user clicks on the camera icon on the right, a part of the screen is used to show the live video stream that Glow FM provides using YouTube. But where YouTube only allows you to watch related videos or comments on that same video, the Glow FM app allows users to fully use the app below the stream. Do they prefer a full screen experience? No problem. By quickly rotating the device, the stream becomes full screen.
The idea of having an app that doesn’t turn into a reduced experience was in my head for a long time. With the redesign of the Glow FM app, the perfect opportunity arose to make this a reality. And the beauty of it all was that with some clever design choices, this experience was available for both Android and iOS.
How about Android and iOS differences?
This is always a hot debate when making UX: what transfers over to other platforms and what has to be different. The standard way of doing tabbed applications on iOS is very different from our design, so during the design process, this was taken into account.
I quickly realized that what I wanted to achieve was actually already part of iOS: paged tabs. You have seen this everywhere, mainly when apps have an onboarding screen. This is actually a more elaborate version of that. That enables horizontal scrolling on both platforms, which is treated as a “power user” feature. The buttons are part of the main navigation, whereas swiping is not. But if a user clicks on any of these buttons, they will quickly notice that this is an option. So for a user, they get the added benefit of seeing where they are in the app. The moving tabs suddenly show there is a link between all screens.
This design choice allowed for an always visible live stream on iOS. This is something that wouldn’t be possible with a regular tabbed application.
In summary
My quest in making great user experiences for all will never end. New ideas arise, old ideas become deprecated, but in the end it all boils down to one simple question: without providing any explanation, would a user understand it? Ask yourself that question with everything you create, and the world of applications will be a better one.
