Surprisingly enough, the hardest part of software development is not the code, but the interface. Even a Windows developer would admit that the way a user interacts with the code is just as important as the list of features, although clearly this is not a rule that they generally enforce with their own apps. Mac apps, however, have a very high and exacting standard for UI design. TiMo poses an especially big challenge: Fitting an entire animation tool in a small space, while keeping it easy enough for grandma to use with only a few minutes of training. I’m currently working through a major redesign, here’s what I’m up to:
NOTE: This post is ongoing, and will keep changing as TiMo’s new interface keeps changing, nothing is final. If you have any ideas please leave a comment below, but you knew that already.
TiMo is the first cocoa app I’ve ever made, and it’s been a bigger learning curve than I anticipated. I thought that as soon as I learned to code I was done, but as it turned out a whole new set of challenges lurked just around the corner. When I started TiMo I had no clue about interface design, and so up until about a week ago it was littered with sheet windows, panels, and wasted space. Just to convince myself that it was actually feasible to make a vector animation program that grandma could use, I decided to redesign before it was even close to being done. The main point of the redesign is getting almost everything into one window and making it all accessible with as few clicks as possible.
One of the other things I realized is that even though the interface has to fit in a small space, it can’t be cramped. Essential controls, such as the object library pictured here, need some breathing room. The library has it’s own tab now, meaning that when you want to add an object, the entire sidebar is devoted to the task of helping you find the one you want, which is especially helpful if you’ve got a big library of plugins or presets (both of which will be supported somewhere down the line). Each item has an icon so users can see what an object is at a glance, and a title and description so that if an object catches the users eye they can see exactly what it does without having to go through the docs. My old toolbar method took up way less space, but didn’t have any of those advantages.
Another thing I’ve noticed is the importance of visual cues, less obvious UI components that hint to the user what exactly is happening. Notice this image, for example. The plus badge is a cue that releasing the mouse button will cause something to be added, the picture icon suggests that it will be a picture of some sort, and the little blue highlight (which goes all the way around the view that the mouse is over, the image had to be cropped to fit) suggests that the view is ready to have something dropped on it. Combine those cues, and the user can infer that releasing the mouse button will add an picture to that view, which is exactly what it does. Animation also infers a lot, when you let go of the mouse, the view quickly scales down to nothing, then in it’s place an image object scales up. Of course, that’s a basic example, OS X has done that from the beginning, but since I had to write that from scratch in TiMo I had to actually think about it.
Turns out the OS X toolbar is there for a reason. This one is pretty self-explanatory, and most people know this already, but you can put essential controls, not just buttons, in the toolbar. TiMo is using a segmented control in it’s toolbar to switch between the different sidebar views. Controls in the toolbar stand out, are always visible (unless the user chooses to temporarily hide the toolbar), and tend to look pretty good. Don’t over-use the toolbar though, more than one or two controls can make the app look cluttered and messy (although it can be done well if you know what you’re doing).
For actual the actual graphics of the UI, I admit it’s quite tempting to make my own skin for UI controls that’s unique to my application. Don’t do it. A big part of the beauty and usability of OS X is it’s unity, every app looks and feels more or less the same, with enough wiggle room that they are all unique. Basically: USE COCOA! The only exception to this rule is if you need a control that’s not part of cocoa, like my keyframe indicator (to the right of all of the objects). In that situation, just make it look as cocoa-ish as possible (A surprisingly hard task that I haven’t quite figured out myself yet).
I’m still working on lot’s more stuff, like a nice timeline editor, a more complete inspector, a redesigned (unfortunately for me, also mostly re-written) CIFilters editor, and so on and so forth. Also, if anybody is interested in professionally designing me some better graphics (Object icons, Keyframe indicators, etc) for a cut of the profits that would be very nice, although I should probably worry about those later.
