Android #protip: How to properly do split views on tablets
TL;DR: Look at the pictures, but also look at them if you are reading; it’s hard to understand otherwise:)#androiddesign
With the Nexus 7 out, Android tablets are finally in the spotlight. One of the most used UI patterns on a tablet is the split view. In the split view, two views which fill a whole screen on the phone are displayed next to each other on the tablet. For example, you might have a list on the left and the selected content on the right. On the 10 inch tablet, many apps with a split view use it in both portrait and landscape. Notable examples are Settings, Talk and People. Other apps use the split view only in landscape on a 10 inch tablet. Examples are Gmail, Google Reader and Tasks by +Team Tasks
(of which I am one of the developers).
When I got my Nexus 7, one of the first things I noticed is that there was no split view in either Settings, Talk and People. Those are the apps which have the split view in both portrait and landscape on the 10 inch tablet. Now why did this happen? The answer is given in the Google I/O session ‘So you’ve read the Design Guide; Now What?’ at around minute 30 (http://youtu.be/2jCVmfCse1E
): The split view doesn’t fit into the portrait mode. Now if you only use the split view in landscape, but not in portrait, you run into a problem, which I will illustrate by looking at the Settings app. Imagine a user is looking at the topmost screen, the list of settings. Now if a user were to rotate the screen to landscape with a split view, some second level settings screen will be displayed on top (probably the first one, ‘Wi-Fi’). This is all good, but if the user now rotates back, it is not clear whether the app should rotate back to the topmost settings view or to the Wi-Fi settings view. In short: Rotating from the split view to portrait is ambiguous, and the worst thing that could happen is that user accidentally rotates the tablet to landscape and back and then lands in another view.
Now that we have identified the problem, let’s look at solutions.Solution #0: Remember where the user rotated from
This is not really a solution, hence the number 0. One could imagine that the program remembers if you rotated from landscape and then rotate back accordingly. This behavior is hidden and not consistent and will probably not provide a good experience for the user.Solution #1: ’Rotational stability’ according to Google
At the Google I/O session I mentioned before, the solution is given as a principle called rotational stability which says “Don’t change the number of panes during runtime”. This is what they did with Settings, Talk and People: Just drop the split view and use the phone view.
Actually, since they handed out the Nexus 7 the first time, they have changed the People app in an OTA and it now has a split view in both portrait and landscape. Funny enough, the people app was exactly the one used as an example in the Google I/O session...
In my opinion, solution #1 is not satisfying, as the user gets the phone view on a tablet. It doesn’t really matter in an app like Settings which you rarely use, but it matters in an app like Talk.Solution #2
It’s a bit strange that solution #1 was the only solution presented at Google I/O, considering Google already has another solution on 10 inch tablets for Gmail and Google Reader. The solution is to have two views for the list in landscape: Once if no content is selected and once if some content (e.g. an email) is selected. This way, the rotation is never ambiguous. If an email is selected in landscape, the corresponding view in portrait is the email view; if no email is selected in landscape, the corresponding view in portrait is the list view.
In Gmail in landscape, if you select an email, it slides in from the right. Furthermore, the list view has an extra list on the left to switch between different parts of Gmail (inbox, sent, labels...), so they used the extra space nicely.
In Google Reader, they don’t use the extra space and simply spread the list over the whole screen. Unfortunately Google Reader displays the phone view on the Nexus 7, even though it could easily have the split view.
The way to think about this solution is that in the split view, you are actually in the content/detail view and the list on the left is only a nice convenience. This also shows in the action bar design: The portrait content view and split view have the same controls. And also the portrait and landscape list views have the same controls.
There is one more thing to be said about the Gmail app. If you are on ICS on a 10 inch tablet in portrait and you hit on the top left ‘home’ button, you get into a special view (have a look at the attached pictures). You don’t get into this view if you use the back button. The view is actually a split view, but the email on the right is cut off and the split view closes as soon as you choose another email. It’s a quick way how to switch emails and it is actually a nice idea. The problem however, is that it is not rotationally stable: If you go to landscape and back you are again in the email view. Now I don’t think this is a big problem, as this view is only meant for quick switching and does not persist. Maybe the problem is more that the home button does something you would not expect, but that’s another discussion...Solution #2.5
The last solution I’m going to talk about is the one we used in our Task application. It’s almost the same as the second solution: In landscape, we also distinguish the cases where we show the content view next to the list and when not. However, instead of filling up the whole screen when no content is selected we use something that we call an ‘empty view’. The empty view is simply there as a placeholder when nothing is selected. We could also have used the additional space to put a navigation list on the left, but I am usually annoyed by Gmail sliding over (it mainly annoys me when I’m archiving) and the empty view prevents any sliding from happening.
In the empty view, we put a bigger version of our logo so that it is not just a huge white area, and we also inform the user that no task is selected. One could actually think of adding additional functionality to the empty view. For example the Talk app could use this easily, as it has a view where you can set your status. It is reachable by clicking your own contact above the list and it is also displayed by default when you start Talk.What to do in your app
I hope I could convince you that there are ways how to bring split views to 7 inch tablets, even if the space is too limited in portrait. Both Solution #2 and #2.5 are viable, so choose what suits your application best.
And don’t forget to check out +Team Tasks