why splitpane views suck..

Originally posted by Jess Kuhnert

I’ve recently been involved in some discussions surrounding ixd issues and attempted to use Yahoo Mail and Google Mail as examples of bad/good interface design techniques. There was a lot of push back because there were no follow up details outlining why one was good and the other bad. A complete analysis of the two applications would take much longer and require more effort than a random blog posting so I decided to focus on one core annoyance I have with Yahoo Mail – its use of ye old “Split Pane” re-sizable control.

Anyone doing any sort of UI development for the past few years has probably at one point or another found themselves implementing a Split Pane view. Even if you haven’t you probably have gotten used to them via programs like Outlook Express or the Yahoo Mail web application below:

Yahoo! Mail split view

Pretty innocent looking right? I mean, geez – it’s a tried and true UI concept that we’ve all been using / used to for years. So, what’s the problem? A good deal of the existing issues are rooted in the current offerings of staple desktop UI toolkits like Gtk, Qt, Windows and Swing. (of course there are many others, but these are toolkits this author is most intimately familiar with) With desktop UI API’s it is very easy to get used to the idea that you have one basic set of tools in your UI toolbox and only branch out from there in cases where customization is really needed.

To get back to the original point of the post, my general peeves with a split view for reading emails are:

  • Sizing – The size of the view I care about is never right! When I’m browsing a list of emails I want as much real estate as possible to view them all, I don’t care about seeing any one particular email at that point. When I do select an email and the content within it doesn’t fit into my split view it’s annoying. I don’t care about the emails anymore at that point, I just want to read the email I’ve selected. In fact, I might go so far as to say it’s almost impossible for the view to ever be what I want in this scenario. By nature of the control the size of the view remains static until adjusted by the user, but when reading emails you really need it to change based on what step of reading them you are in. Arghh!
  • Scrolling – I know I know. It sounds like a real whiny thing to complain about, but it is annoying. After selecting an email message I must now consciously think about the interface and move my mouse over to the appropriate area before I can actually scroll through the content – otherwise scrolling right there and then would move me up and down through all of my other email messages.
  • Claustrophobia – I don’t know about you, but these split views tend to make me feel pretty constrained. All of the scrollbars appearing on the page really start to make me feel like nothing is the right size. Like maybe my monitor sucks and I should get a bigger one? I don’t know. The screen looks pretty large, how hard is it to fit everything on there without an all out assault on the senses from a million different UI controls all telling me the same thing – nothing fits!

The web has changed things a great deal. Without a set of standard UI components in your web toolbox to choose from many people have been able to come up with new ways of doing things that really work for web based applications. Such as Google mail. Instead of taking the tried and true approach that Yahoo has they have branched out to create a solution to the exact same problem with a ui view that is much friendlier:

Google list view

That is certainly refreshing feeling after my previous claustrophobic view experiences. Look at that, I can’t spot a single scrollbar on the entire page save for the standard right hand window scroll. My monitor must have been lucky in being the right size for this web site.

Ok, so how did they handle actually viewing a message?:

Google detail view

Hey look at that! Still no scrollbars. I’m impressed. There are so many other subtle ui improvements going on that it could probably fill an entire book on the subject, but I’ll outline what I find particularly pleasing in relation to the subject of this post:

  • No Scrolling! – Just clear blue skys and all the text I care to read.
  • Quoted Text – Even better than no scrolling, when viewing a grouping of emails all related to the same subject you’ll find that only the most recent persons response is viewable when reading the email – leaving all the cruft you don’t care about cleanly out of your way. If you really must see that text you can do a number of things, the least of which is clicking on the simple “- Show Quoted text-“ hyperlink that appears inline where the previous email message content will display when clicked on.
  • No clutter – There is a distinct lack of irrelevant information displayed on my screen when reading emails. Most notably being the removal of a large list of unrelated email subject lines from my view. That doesn’t mean that I’m constrained. Every possible tool / ui trick available to help me focus on this single email are all at my disposal from this view, as well as the context in which I’m viewing it.

Thank you for taking the time to wade through a subject that I don’t know very much about. I hope it at least gives more people pause before choosing one of their tried and true desktop friends on their next application. Split Panes probably do have their place and purpose, but after using both of these applications I’m not convinced that reading email is one of them. (Most of the content in this post was inspired by the good people at Humanized. )

Learn more about how SitePen can be your partner

SitePen is a strategic consultancy committed to achieving technical objectives, solving critical business problems and helping our customers build web applications the right way, the first time.