Following up on last week’s post on my disdain for the tab bar controller, I was inspired to provide a few examples of how I would rework some existing applications to remove the tab bar and improve the user experience.
I use each of the applications I am planning to highlight on a daily basis. If the developers of said applications should happen upon this blog post, I hope that look at it as constructive criticism of how to improve in future releases. Every developer has a different thought process when putting together their application, and I hope that a second opinion is welcomed.
The first application I want to highlight is the SiriusXM iPhone app. Anyone that knows me personally knows that I am a big fan and proponent of satellite radio and have been a happy XM subscriber for several years. When the company decided to release an iPhone app to allow streaming of most of the music and talk channels, I was quick to download it from the store and start using it.
As I’ve used the app over the past few weeks, I can’t help but feel frustrated by several of the weird UI inconsistencies that it suffers from. When you first launch the application, it loads a splash screen with the SiriusXM logo and a bit of status information on what the application is currently doing: checking credentials, loading content, etc.
I am not a fan of splash screens, but in this case I think it works because there’s no content to display in the application until it’s fetched from the servers out in satellite radio land. The only issues I take with the loading screen is the black status bar looks wrong and the upper-left corner being used to show a version number of the application. It looks incredibly out of place and reeks of something you’d see in a Windows product.
Once you are authenticated, the main view of the application loads. The app uses a tab bar with five items in it: Categories, Channels, Favorites, Shopping and Settings. This is where the app starts to fall apart for me in terms of usability.
The Categories tab lets you browse through each of the channels available to you by genre. The categories themselves are properly named and follow suit with what users see on their radios or the online streaming player. The group heading titles are in all caps though, which looks wrong and doesn’t match what Apple does in its own applications: first letter capitalized only.
Now things start to get really weird. When you click on the category you want to browse, it switches you to the Channels tab and shows you the channel listings for that specific category. Following typical iPhone application behavior, I was expecting to remain in the Categories tab and be pushed to a different table view that listed the categories.
The layout of the Channels tab is decent. It still suffers from the all caps section headers, but in terms of table layouts I have seen far worse. I do question why the designers of the app decided to create a custom disclosure detail button instead of using the system defined one. When you press the disclosure detail button it pushes you to a poorly laid out view that gives you the current playing information, a play button and the channel’s description. This is all stuff I’d argue should be attached to the now playing view (more on that later).
The Favorites tab is a listing of all your favorite channels. You can mark a channel as a favorite by clicking on the black & gray gradient area next to the play/pause button. The Shopping tab lets you add the currently playing song on any Sirius channel to your shopping cart so you can buy it from iTunes. This is an awesome feature and eliminates me having to write down what tracks I am discovering when listening to Alt-Nation or any of my other favorite music channels.
The Settings tab is the most puzzling of all. There are two settings and three other rows with help and legal information. Settings belong in the Settings app. The two settings that you can check are one-time settings that you will most likely never adjust again. The Help & FAQ information is unnecessary in an iPhone application as well. If your app requires you to have bundled support, you need to go back to the design room and make the application more intuitive for your users. Mobile applications shouldn’t require instruction manuals.
Now let’s focus on the main purpose of the application: playing music.
The music player is integrated into every other view on the screen. At the top, just below the SiriusXM logo is a view with the play controls, channel info and an arrow button. Tapping the play button is obvious. Tapping middle control flips to the Favorite/Shopping cart action screens. The arrow button is the most interesting part of the player controls. Tapping it slides the play controls to the bottom of the screen, hides the tab bar controller entirely and exposes a larger version of the channel’s logo. It’s a good looking view, but it’s really odd behavior for an iPhone application.
If enabled in settings, the volume control remains along the bottom of the screen, just above the tab view at all times. Unfortunately, the volume control overlaps the table views, so you can’t easily select the last items in each respective view. I would have preferred to see it attached to the rest of the playing controls along the top instead.
Let’s Fix The App
The SiriusXM app isn’t anywhere near the bottom in terms of quality applications on the iPhone. It shouldn’t require too much work to improve the usability and user experience of the application to make it more in tune with the highest quality iPhone apps.
I’ve sketched up how I’d improve the application. Apologies for the rudimentary nature of the sketches, but this is just a blog post. The goal is to give a birds eye view of how to improve the application’s design. Hire me if you want a fully designed UI.
The way I’ve redesigned the application breaks it into two views total: a third of what currently exists in the application. Most of this is by removing the tab bar along the bottom, but it’s also by adjusting how the applications functions in certain ways.
In place of the tab bar, the first view the user should see is a channel listing sectioned by the genre. The top section has the favorite channels as marked by the user. Most users have a few favorite channels, so having them front and center for the user to get at is better than having to load the application and tap over to a favorites tab.
The table cells of the channel listing remains mostly the same. I’d ditch the custom accessory indicator for the standard one included in UIKit, but that’s minor.
Once the user selects the channel they want to view, it pushes them to the now playing view. In many ways I am mimicking the iPod application, because users are attuned to how it functions. In the upper-right corner I put an info button item that will flip the channel logo area to show the channel description text. A user should also be able to double tap on the logo to perform the flip similar to iPod.app.
The channel, song and artist information is still along the top, but I removed the tapping action that was associated with it. Instead I opted to put a toolbar along the bottom of the view with two buttons. The heart icon that lets the user toggle whether a channel is a favorite. The shopping cart icon lets the user purchase the currently playing song via iTunes.
The current version of the SiriusXM app has the concept of a shopping cart so you can queue up several songs and purchase them at once. I waffled about how to include that in my remodeling. If I were designing it I’d ditch the cart totally and make each purchase instantaneous. Alternatively you could toggle the shopping cart icon to pop up an action sheet that lets the user choose to add a song to the cart, view the cart or buy all items in the cart at once.
I cleaned up the player controls by grouping them all along the bottom somewhat inspired by iPod.app as well. Since streaming radio doesn’t have the concept of fast forward and rewind, I grouped the play/pause button to the left of the volume control. It’s less use of space and puts related actions in the same user space.
If the user wants to go back to browsing other channels on the Sirius platform, they can press the arrow button to get back to the channel listings. The currently playing view will then be available by the new forward arrow button on the right side of the tab bar: another homage to iPod.
I think you’d agree with me that these layout and usability tweaks would offer users of the app a much more streamlined and iPhone intuitive user experience. I hope it also highlights an example of how with just a bit more work in the design room, you can find better, more suitable alternatives to using a tab bar control as the cornerstone of your iPhone application’s user interface.
