why splitpane views suck..

By on December 18, 2006 4:52 pm

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. )

Comments

  • Pingback: Ajaxian » Do you hate splitpane views?()

  • Dave

    The java IDE intellij has a nice split-pane interface. You can set it up such that when you click out of a pane it closes. So in your example, if you want to see the folders, you’d click an icon to open the folder pane. Then select a folder and see the updates in your main pane. When you click on a message in the main pane the folder pane would hide itself.

    -Dave

  • Shawn Grunberger

    Hey Jesse, I think you make some valid points. Yahoo! Mail Beta can get you close to your preferred UI configuration. Just do the following:

    1. Hide the reading pane (click the “Hide Pane” link, or press “v”).
    2. When you want to read a message, double-click it (or select it and press Enter). This will open the message in a separate tab, which covers the message list and offers a lot more room. You can even open multiple messages in separate tabs and switch between them.

    Hope this helps, and thanks for the comments.

  • Jesse

    Shawn, thanks for pointing these additional options out. I feel a little guilty for not having done a better job doing background research before opening my pie hole. (in my defense though – I wasn’t really expecting more than 6-7 people to read this post) Admittedly it is much easier to criticize than it is to create elegant UI’s yourself.

    Whenever I’ve been in the unhappy position of having to fend for myself in this area it’s always been an agonizing process not unlike watching a fish flop around on hot pavement..Thankfully kind souls do occasionally throw good UI architects at some projects so it’s not always like this.

  • Peroli Sivaprakasam

    Jesse,
    You are not alone in this. I hate Yahoo mail beta too, for exactly
    the same reason. I knew all the keyboard shortcuts, but I use mouse
    most of the time. Like Gmail, keyboard shortcuts should only assist
    us in navigation but Yahoo is pushing that on me.

    – Peroli Sivaprakasam

  • Hi jesse.
    I had to scroll a lot to read this page. ;)
    Nice article. I think the solution to this is to get a 42 inch screen then nothing ever need to be adjusted or be scrolled.

  • Romain Guy

    Your GMail example is a bit weird. Sure there’s no scrollbar in the view that shows your emails… but you have to click to view the next 25 mails. I don’t really see how it’s better.

  • Jesse

    Romain,

    I guess that depends on how many emails you are used to going through at one time. For me personally I find it much more appealing to have a set of 25 at a time to view – thus preventing more scrollbars – than a much longer list that might leave my head spinning.

    I rarely let the mailing lists I’m on get to the point where there are more than 25 ~threads~ unread. (remember that gmail has very good thread handling, so while it may say 25 that doesn’t literally mean just 25 emails…it may very well be 125 )

    It just continues to support my general “feeling” that everything fits on the page..A never ending scrollbar list would just feel overwhelming. Maybe you’ve had better experiences with extremely long lists, but I’ve yet to meet one that I’ve liked. (also see reddit.com / digg.com /etc …All have many more stores than are viewable on the first page, why do they break them up?.. )

  • Pingback: 90 Percent of Everything » Blog Archive » why splitpane views suck… (but they suck less than other stuff)()

  • I love gmail.

  • Interesting take on it. I have some UI issues with Yahoo as well, although the split-pane view is not one of them (I turn it off when I’m on my laptop and turn it back on when I’m on my desktop).

    My big problem with Yahoo Mail is resizing columns and Split buttons … like you mentioned, I believe that web 1.0 apps solved these problems better than classic applications did. I have some Yahoo rants here: http://blog.hanfordlemoore.com/2006/02/02/yahoo-mail-beta-driving-me-buggy

    Perhaps more interestingly, I feel like Gmail has really gone in the wrong direction. They have a lot features-for-the-sake-of-features, and some really weird design choices. Is Gmail usable? Yeah, but there’s just some really weird UI choices going on there. The comments on my gmail rants are also quite interesting:

    http://blog.hanfordlemoore.com/category/google/gmail/

  • Jesse, I think you are spot on. A considerable while ago, I also did some thinking about why typical desktops apps are so static: http://arrenbrecht.ch/articles/WinControls.htm. My conclusion was that, hopefully, Windows Presentation Foundation (formerly Avalon/XAML) is going to change this for Windows. For Unixes, maybe XUL could help.

  • Go Leez

    While I do agree that Yahoo mail sucks (as of now) compared to Gmail, I have the sneaking suspicion that you will see a better set of options in the “near” future. Yahoo mail is in transition and my gut feel is that you will soon see a choice of 2 pane, 3 pane vertical and horizontal layouts (like Outlook 2003)…
    My 2c

  • Monkeyget

    As far as the splitpane is concerned, outlook 2007 is definitely the worst offender. IIRC it has two horizontal splitpane and possibly one splitpane verticaly. With a 1024*768 resolution the space for the content of mails is so small that you wonder if outlook developers have ever used it at that resolution. Pretty stupid for a mail reader.

    As for yahoo mail, I actually like the use of a splitpane. I can jump from one mail to the other fastly and easily.

    The thing i hate the most is that they assigned ctrl+left and ctrl+right to navigate between tabs :
    You have to click on the area were the tabs are to make it work (you have to click to be able to use a shortcut…) EXCEPTED when you are writing a mail and the focus is on the to, bc, bcc, title.
    The problem is that (on Windows at least) ctrl+left and ctrl+right moves you one word to the left or one word to the right. Because i don’t even realise i use that shortcut i often change tab and wonder what the hell yahoo mail is doing before realizing i probably used ctrl+left!

    On second position comes the fact that when you open your mail you are positioned on the “home” tab instead of the incoming mails tab.

    The third annoyance would be the adds on the right and lower left sides.

  • You know, it might be a textual mail client, but that’s pretty much how Mutt[1] works. When you started, you’re presented with a list of your messages and nothing more. You can scroll up and down through your messages without the clutter of the message view. It’s only when you select a message that you get a view, and the number of messages in the message list visible is configurable: I have it set to five because that works well when navigating mailing list threads. I personally wouldn’t be surprised if the GMail interface was inspired by Mutt.

    Now, if only somebody would write a GUI mail client that works as well…

    [1] http://en.wikipedia.org/wiki/Mutt_(e-mail_client)