3214 words on Mac OS X
This is about the user interface feature where a part at the left of the window is separated from the rest of the window and not used to display any of the relevant content but rather to be a naviagtional aid to select which data can be seen, typically in a list. I like to call these lists source lists.
Predecessors of source lists may have been web pages with frames or those hierarchical lists that are sometimes used in Windows for file system navigation. Those weren’t perfect – the frames because they break many features of the web browser, like the back button or the ability to link to the page you’re currently viewing, the Windows file system list, because it crams a very long and deeply nested list into very little room. Having the problems of these predecessors in mind and also seeing them as a way for the software designers to avoid having to create a good (and possibly even spatial!) way to navigate through the file system or database, I started off very sceptical towards them, when they started making their first steps on the Mac in iTunes.
However, with several years of iTunes behind me, I have to say that these lists are quite handy and can be time saving. In addition, the list may even be necessary as a simple way to present all sources of data (music in the case of iTunes) that are currently available. While in theory all the iPods and CDs available to the computer could have been integrated into iTunes’ main library listing, that solution would’ve been something between absurd and impractical. The clear distinction between those sources seems logical (although I wouldn’t mind having a unified list as well).
What started rather simply in a time where there was just iTunes with a library, CDs, and playlists (no iPods, no iTMS, no music sharing, no smart playlists) has evolved to something much more complex today. In addition, similar lists can be found in many other applications, like the Address Book, iPhoto, Safari’s bookmark manager, Mail or the Finder. While all these applications share what seems to be conceptually the same kind of source list, the list looks and behaves differently in each case.
I think that the concept is old and developed enough now that a company like Apple should come up with some clear guidelines on how these lists should be used and how they should behave. Unfortunately that is not the case and even within Apple’s stock of applications you won’t find two in which the source lists behave the same. So it’s really hard to learn what you can expect a source list to do.
It’s astonishing to see how differently source lists can behave. Basically they are just lists of items which usually have icons. But apart from the icons all other aspects of the lists can differ. One aspect is whether the list is hierarchical or not, another is how items are ordered.
The ordering is probably one of the most complex things here: Some items in the list may be at a fixed position because they are so important and they are not user generated (e.g. the iTunes or iPhoto Library or the
Rendezvous Bonjour bookmarks in Safari). All the other items might be ordered alphabetically, or by their type, or in whatever order the user prefers – depending on the application you’re using.
There seem to be two areas in those lists – one of ‘fixed’ items like the iTunes Library and one for the user generated one like playlists. This distinction is far from being clear, though.
What follows are some examples of Apple’s own applications which all show distinct behaviours. A few of these differences may be justifiable by the differences between the applications. But in the majority of cases, those differences seem to be deliberate (or a consequence of having been developed by different teams without a central design strategy for such source lists). Just look at the screenshots and descriptions:
Let me begin with iTunes as it is the first source list I remember in an Apple application – and one of the source lists I use the most. To begin with, the iTunes source list is not reorderable. Everything is automatically sorted by type (Library, Jukebox, Radio, Music Store, CD, iPod, Shared Library, Smart Playlist, Playlist) and alphabetically within the types. It probably makes sense to keep actualy devices like iPods or CDs separated from playlists in this way, although I think a stronger separation of the user-modifiable playlist part and the fixed devices part would be good.
What may be a bit irritating here is that parts of the fixed sources aren’t all that fixed but can be edited. The Library’s name can be changed by clicking it – as can be the iPods and CDs names and the Jukebox, Radio and Music Store options can be turned off in the iTunes preferences. All these things are rather hard to tell just by looking at the items.
While the user editable part of iTunes’ sources list is not hierarchical, the list itself is very well capable of displaying hierarchical information, for example when looking into manually managed iPods, the iTMS or network libraries (when several libraries are available, they’ll even be grouped into another container that holds all shared libraries – making the list capable of two levels of hierarchy).
With iTunes having been around for years and people having generated quite a few playlists, not being able to have playlist folders can be a bit of a pain. Particularly as you can’t even group related playlists in any other way than using the stoneage ‘trick’ of prefixing their names with strange letters.
As for the looks: The source list has a white background, lives in a (pseudo) metal window and can be resized using the bar that separates it from the rest of the window. The list doesn’t honour my preference of the ‘Graphite’ colour scheme but uses bright blue for the selected item when iTunes is active. Once iTunes is in the background, that colour will switch to a shade of grey.
For many years Mail had a drawer to contain all the folders with your filed e-mails of the past decade. This changed in X.4. Personally I think it sucks as Mail’s drawer was brilliant. Not taking up space on your screen when you didn’t need it but quickly available when you wanted to file things. The list’s contents haven’t changed dramatically with the new version – with the only addition being smart folders – and in the X.4 version the e-mail folder list qualifies as a sources list from its location at least.
As in iTunes, the items in the list is not reorderable and items are sorted by type (Incoming, Drafts, Sent, Trash, Junk, Smart Folders, Folders) and within those types alphabetically. The list is hierarchical, though, so you can generate folders. To keep up the strict separation of ‘smart’ and ‘normal’ folders, there is a special item in the menu to create a folder which can contain smart folders. Not particularly user friendly in my opinion.
The looks are quite different from iTunes: A pale blue background, even with the ‘Graphite’ colour scheme used on the computer. A shade of blue that looks rather unfamiliar to me, btw. The selection’s colour will not be dimmed when Mail isn’t the frontmost application. The source list is separated from the rest of the window by its vertical scroll bar alone, which I find quite elegant. It is resized using a little ‘dimpled’ thing not unlike those in the Finder’s column view at the very bottom.
Since X.3 the Finder offers ugly metal windows which offer the benefit of a source list for the price of looking the metal. The Finder’s source list is visually separated into two sections by a horizontal bar. With the upper part featuring mounted volumes and the ‘Network’ and the lower part featuring some of your folders.
While items can appear and disappear in the upper part of the list automatically as volumes are mounted and unmounted, a lot of customisation can be done through the Finder preferences and just dragging things around. I fact all this is a bit confusing: You can only drag arbitrary folders and files to the bottom part of the list while you can drag volumes only to the top part of the list. While remaining in their part of the list, items can be reordered arbitrarily by drag and drop. Quite logically, the list is non-hierarchical
Unlike the lists in Mail or iTunes, the items visible in this source list aren’t actual items but more like aliases to them. Thus dragging them out of the list will not result in nothing or a copy action happening like in the other applications but simply in the selected item ‘poofing’ away, non-undoably. Things you shouldn’t do with this list is drag things to the trash, say. as they’ll just vanish from the list that way but not end up being unmounted. Very strange but pretty much the kind of ace-feature you’ve expect to see from the OSX Finder.
As for the looks – the window is a metal one as mentioned before and the selection colour is blue, regardless of your preferred colour scheme. In inactive windows it changes to grey. The source list is separated from the rest of the window by a small metal bar which can be used for resizing. Resizing isn’t too bad, btw.
Safari has a sources list as well, hidden away in its bookmarks section. It is non-hierarchical and ordered by type (Bookmarks Bar, Bookmarks Menu, Address Book, Bonjour, History, RSS Feeds, Folders). A few of the first items can be turned off in the preferences (for some reason) and only the folders at the end can be customised by the user. Their order can be freely re-arranged, with a slightly jerky animation. [A few things are strange here, like there being a smart folder for all RSS feeds but no general smart folders that contain your own searches, say].
Looks-wise, the list has a white background, lives in a metal window and can be resized using the vertical bar at its right. It ignores the user’s preferred highlight colour but will dim the highlight when it’s inactive.
iCal offers a very plain and simple list of its calendars. Unlike all the other lists, there isn’t an icon for each calendar but there is a checkbox in that calendar’s colour. By clicking the checkbox you can handily change whether that calendar’s entries are shown in iCal’s main view. Selecting an item will highlight all entries belonging to the selection if the item is a calendar.
In iCal 3, the application gained the ability to have a single level of hierarchy, i.e. to group several calendars into a larger one with a name of its own (but no colour obviously). This is quite handy for having a calendar for each seminar, say, and then grouping all seminars into a ‘Uni’ group with the ability to (de)activate all of them at once.
Within the constraint of only allowing a single level of hierarchy, calendars can be re-ordered arbitrarily. Even special calendars, such as those subscribed to from the internet or the birthday calendar that was introduced in iCal
3 , aren’t treated as special objects and listed at the top of all calendars as looking at the previous examples suggests, but they can be freely moved – even into calendar groups.
As for the looks, the source has a white background and lives in a metal window. Just as in Mail, the selection colour is some blue gradient (possibly slightly different, though) regardless of what your preferred colour scheme is or whether iCal is the frontmost application or not.
The Address Book may be conceptually simpler than many of the other applications, but it has a source list as well. One that is ordered by type (All, Directory Services, Last Imported, Groups, Smart Groups) with the secondary order being alphabetical and no hierarchy being available. Unlike all other applications the order by type in this case puts the ‘smart’ groups after the manually maintained ones. Creative!
Regarding the look, this source list is cast in metal and its width can be changed using the vertical bar to its right. The selection will be highlighted in blue regardless of your preferred UI style but the highlight will turn grey once the Address Book ceases to be the active application.
iPhoto offers a source list with a large number of elements. The list is ordered by type (Library, Last Roll, Last 12 Months, Shared Photos, Cameras, Folders, Smart Albums, Albums, Books, Slideshows, Trash) and the secondary order of user-created items being up to the user. Four of these types – Folders, Smart Albums, Albums, Books, Slideshows – are user-creatable, meaning that the strictly pre-defined order by type can be quite confusing and even limiting as you can’t simply have all your holiday photos next to the slideshow you made of them unless you want to clutter things up with a folder for just these two items.
The list is hierarchical, not only for access to your own or one or even multiple shared phot libraries but also for several levels of folders. What’s really odd is that even within user-created folders the order-by-type is enforced. I didn’t really think about it but my first guess would be that making things work in exactly this strange way must be quite an effort and not just the result of programmer laziness.
Another non-standard thing is that iPhoto does have its own wastebasket. No other source list has one, not even the Finder’s since the Dock has stolen it a long time ago. Shouldn’t iPhoto go the iTunes way and just use the usual location for the disposal of files?
Looks-wise iPhoto goes along with many others in ignoring your preference for highlight colours but at least it dims the highlight colour when the source list isn’t active. The list itself sits in a metal frame and can be resized using the vertical bar to its right.
Introduced in X.3, Font Book started off with a source list as well. It’s top part lists the different installation locations of fonts and cannot be altered. The graphically separated bottom part can contain font collections in a fixed alphabetical order which is non-hierarchical. Items’ titles can be dimmed in this list if they are turned off.
As far as the looks are concerned, the surrounding window is of the metal type and selected items respect the selected UI colour theme, as well as being dimmed when losing focus.
A completely new addition to X.4 is Automator. It also features a sources list which consists of three folders – Applications, Examples and My Workflows. Just having the contents of the first folder would be pretty much source list like, but in this way it’s very hard to say what the list is actually doing.
I’d say it’s mildly hierarchical because technically there are folders which can be opened and closed but morally these are just there to enforce the distinction of the different types of entries: Where many other source lists just get by with enforcing an ordering by type, Automator introduces folders. Inside the folders, the ordering is alphabetical in the first two folders and what looks like chronological in the third one which looks like a ‘recent items’ menu.
Many aspects of this are so buggy and nonsensical (e.g. clicking one of the bottom two folders which will just display all actions used in the workflows, including duplicates or the My Workflows folder being rather bad of keeping track of files and noting you’ve erased them. As usual we may have to wait for Automator 3 or 4 before sense has been beaten into this.
Looks-wise we’ve got a metal window once more with highlighting being done in your preferred colour and proper dimmed highlights being used when appropriate. The columns width can be adjusted using a Finder-column-view-style button beneath the vertical scroll bar. And Automator won’t remember the setting you make there globally but only for the current document. Which is a pain because the initial width setting is pretty daft.
Let’s head on to the more obscure Apple applications. Disk Utility also has a list of sources. It’s split in two parts, graphically even. The top one lists all attached disks and the bottom one handles disk images. If a volume is mounted from any of these, it will be displayed a level down in the hierarchy, which is more like a subtle optical hint as you can’t really open or close any items in it.
In the top half items seem to be ordered according to the time they were connected/mounted, while things in the bottom half can be re-arranged at your will. You can remove items from the bottom half by dragging them out of the window and into the Trash. Alternatively, dropping them over the desktop (not other applications, it seems), gets rid of them as well.
As for the looks, this seems to be a standard Cocoa list living in a normal window and using the correct highlight colours and behaviour. The list even displays the little outline to indicate that it is currently active.
Out of competition of mainstream end user applications is XCode. It has had a massive and very powerful source list for ages. While the general order of a few pre-defined categories seems to be fixed, everything else is very flexible, allowing for reordering and deep hierarchies. This list is more complex than all of the others and perhaps isn’t a real ‘sources’ list as the others are. But as XCode is for developers who should be both experienced users and willing to read a manual, this is a different topic.
From the examples I have shown, it can be seen that the concept of a source list is widespread now. Unfortunately, not even within the company that makes up the operating system and writes down the rules for the user interface, there seems to be a single concept of what a source list is and how it should behave. Which means that all of these lists look and behave slightly differently, which isn’t good for the user.
I am sure that certain differences can be justified by the different actions that the source lists are supposed to perform. But looking at these examples strongly suggests that we are not seeing a situation where the concept of a source list exists and well-thought-through options in that concepts are used to work better for the application that is being written. It looks more like every team just create their own source list with its own ordering, behaviour, highlight colours and general looks.
pedantics mode on You mean iCal 2, not 3 pedantics mode off
Nice round-up showing inconsistencies with source lists. As a sidenote:
“I like to call these lists source lists.”
It is, in fact, the official name as per Apple’s HIGs: http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/XHIGWindows/chapter17section3.html#//appleref/doc/uid/20000957-20000961-CHDDIGDE
Thanks for the notes.
As for the name… I’ve been using it for a long time, just from translating the ‘Quellen’ in the German iTunes source list and because I thought it was a good name. Now I start wondering whether stumbling across it in the HIG may have played a role as well.
I had a rant on this very topic this weekend, in response to Bret’s stuff:
In the X.4 version of Mail, the list is somewhat orderable. If you have multiple mail sources (like a couple IMAP accounts and a POP account) you can drag and drop/reorder them.
The curious part of this is if you move the inboxes at the top around, the folder collections at the bottom also move around.
Interesting points on your page Jedd. But I think they at most apply to the ‘looks’ sections of my comments. The rest is about the behaviour I can expect from similarly looking UI items in different applications which does matter for usability. In fact, even the looks – such as a selection that doesn’t dim when the window isn’t active matter with that respect.
And even on the topic of mere ‘looks’ I’d say that respecting the user’s choice of UI theme as ‘graphite’ is something that affects usability. Remember that ‘graphite’ was introduced exactly because people found the flood of colour on their screen distracting. A few apps ignoring that preferences gives them an unwanted focus.
Also in X.4 Mail, Smart Folders are re-orderable, while “regular” mail folders are sorted alphabetically.
Having hierarchichal source lists across the board, as well as a much more standardized implementation of “smart” objects would be a huge improvement IMO for many of these apps. I wish I could have folders of contact groups, folders of font groups, folders of itunes playlists, etc. Having all of these source lists function the same, and well, should be a priority for apple.