To Tab A Bar Or Not To Tab A Bar – on iOS

As you might have guessed from our last blog post and the one before, we are already working on the iOS app of Swapit. Unlike many of our competitors, we decided not to use any of the cross-platform development tools out there, but to go real native and build the app for each platform from scratch. We believe, this is by far the best way to provide the stellar user experience everyone expects from Swapit – may it be on Android or iOS.

This approach does come with challenges, but also with opportunities. One of the great freedoms we have, when going native on each platform, is to create a custom user interface design that fits perfectly to the target platform. On Android for example, we did a deep dive into the Material Design Guidelines published by Google to ensure all Android users feel right at home when they’re opening the app.

For example, on Android we implemented the standard left side slide out navigation drawer as well as the “+” floating button to create new posts. Those concepts feel very natural to Android users and they feel right at home when they’re using Swapit.

Now, we did some tests by handing our Swapit Android app to some iPhone users. They immediately felt lost, didn’t know what to do and started clicking randomly around the screen, trying to find something useful to do. Especially the floating button at the bottom right corner was something rather unusual for them. So to us it was obvious that we need to cater much more to the standard user behavior of iPhone users in our iOS app.

Last Friday, we finished our very first internal beta of the Swapit iOS app. It can only list items nearby the user’s location and show details of each item. There is not much interaction possible in the app yet. So we started a very small internal beta test of about 10 friends and family folks who have iPhones. Just to see if the app starts up properly on different iPhone models, OS versions, network carriers, locations, indoors/outdoors. Conclusion thus far: it’s lookin’ good!

(Note: Everyone who signed up for our Swapit iOS Beta will get an email when the next version is ready. Stay tuned!)

The Tab Bar Discussion

Two days ago, we had a very heated discussion about the general structure of Swapit on iOS. I’d like to share some details because I feel it might give everyone some insight in our thought and decision making process.

The main question was: should we use a tab bar at the bottom of our standard list screen or should we not use it, but rather bring over the left side navigation pane, which we use in Swapit on Android. Such a tab bar is very common in many standard iOS apps. Just go and check the App Store, iTunes, Safari, Notes, etc. They all have a tab bar. Usually that’s being used to switch between tabs, but sometimes there are also some “actions” in there, which are not particularly switching tabs, but perform a certain action. For example: the Notes app has a “New Folder” action in that bar.

We a camp of people that was for a tab bar and one against it. I personally was against the tab bar, mainly because I feel having a tab bar constantly there, wastes screen real estate, which I’d prefer to use for displaying content. Think, cinematic feel of an app.

However, this is not about what I feel makes sense – in the end, I am not actually a real world iPhone user. Yet, given our experience and the feedback we collected from iPhone users trying to use our Android app, it was clear that we need to cater directly to those iPhone users – no matter what.

On top of that very simple discussion came contextual discussions about the general workflow and where, from a contextual point of view, it will make sense to put certain modules of content in Swapit. Let me give you a quick overview of the top level user interface elements that are accessible right from the main screen in the Swapit Android today:

1. My User Profile (left navigation drawer)
2. Swapits Nearby (left navigation drawer)
3. Inbox (left navigation drawer)
4. Settings (left navigation drawer)
5. Invite Friends (left navigation drawer)
6. Write a Review (left navigation drawer)
7. Stats (left navigation drawer)
8. Website (left navigation drawer)
9. Blog (left navigation drawer)
10. About (left navigation drawer)
11. Map (top toolbar, right)
12. Search (top toolbar, right)
13. Filters (top toolbar, right)
14. Post Item (bottom right floating button)

Obviously, it would not be possible to move all such elements into a tab bar on iOS. Adding a left navigation drawer like on Android might be a solution, but it is not standard iOS design — even though some popular apps on iOS have that. To make Swapit’s feel for iOS users as native as possible, we decided to integrate a tab bar at the bottom. It still bugs me personally that we are wasting that screen real estate for this, but if it results in a higher user engagement in the end, then it was the right move.

Now the next question was about what to put into that tab bar and how to order it. Contextually seen, the tab bar’s purpose is to allow the user to switch between tabs. Usually, those are content-related tabs. For example, on the Apple App Store you can switch between Featured Apps, Top Charts of Apps, Categories of Apps, Search of Apps, Updates of Apps. It’s obvious, those tabs switch between viewing apps in a different way or it just orders apps differently.

For Swapit, we want to make sure our users have quick access to the content of the app. Thus, we put all important content-related tabs in the first 4 elements of the tab bar:

1. Swapits Nearby (left)
2. My User Profile (center-left)
3. Sell/Post Item (center)
4. Search (center-right)

This is how a quick sketch of that looks like:

Assuming the majority of our users are right-handed, we needed to make sure that the tabs we want the users to use most, are reachable with their thumb when holding the phone in their right hand. One very important goal of Swapit is to encourage people to post their items quickly — in under 30 seconds. That includes finding that “Sell/Post Item” action right away. Therefore, we put that in the center of the tab bar. In this case “Sell/Post Item” is actually a bit of a deviation from the content-related purpose of switching tabs. However, it is essential to have this action right here in the middle to make it as obvious as possible to users on how to post items.

The three other directly accessible tabs here, are essential tab-switches between different ways of viewing items on Swapit. The standard tab that will open when the app starts is the most left “Nearby” tab. You can easily open up your own profile, which also lists your own items. The search field is within a 1-click reach as well. Additional content-related tab switches as well as other functions (About, Website, Blog, etc.) are then accessible through the “More” tab at the bottom right corner.

Now we needed to cover two other important functions:

1. Inbox
2. Filters

Filters. We offer very sophisticated filters in Swapit, so you can easily find what you are looking for. As you can see from the Android screen shot (on the right), that’s a rather complex and busy panel, which we might be able to improve/simplify a bit, but in the end it will always have a lot of options. Therefore, we need to reserve a whole panel for our filters on iOS as well. So similarly to Android, the filters panel will be accessible through the top right corner of the top toolbar.

Inbox. The Inbox on the other hand is – from a contextual point of view – very different to most other screens on Swapit. It’s a communication center which combines all notifications you receive through Swapit. May it be comments to items, new item notifications, interested buyers or most importantly chat messages. Furthermore, it is important to know, that the main entry point of users to the inbox is not expected to be through the Swapit app itself. Generally, people enter the inbox through a notification they receive in their Notification Center. So from a navigational point of view, it is absolutely fine to put the inbox at top left corner, like shown in the sketch above. If you would be accessing it a lot from within Swapit’s navigation, it might be cumbersome to reach the Inbox, but in our case that should not happen too often.

Conclusion

After a two hours of a discussion involving pretty much everyone, we settled for the above main structure of Swapit on Android. It is very important to create a clear path for this early on. You don’t want to waste time designing something that people won’t use. Personally, I still prefer Android’s Material Design more because it offers us more screen real estate. Our discussion got heated, emotional and brought out everyone’s passion for Swapit’s success. Yet, in the end we found a solution, that I believe works best for iOS users.

Are you an iOS user? What do you think? Does our reasoning make sense to you?

 

Do you have an Android phone and want to try Swapit? Download it from: http://get.swapit.la

Do you have an iPhone and want to test our Swapit beta? Join the Swapit iOS beta here: Get Yourself on the List Today!

 

Advertisement