TweetFollow Us on Twitter

Redesigning Right

Volume Number: 19 (2003)
Issue Number: 4
Column Tag: Mac OS X Migration

Redesigning Right

How we adapted the Transmit interface for Mac OS X

by Cabel Sasser

They'll Notice... Oh, They'll Notice

Mac users are crazy. Not clucking-like-a-chicken-in-the-reference-stacks-of-the-public-library crazy, but the good kind of crazy - the kind that can inspire an intense passion, love, commitment and evangelical fervor for something as dry as a computing platform. And as Mac users, we love our interface in an almost unnatural way - your application could print diamonds and candy from an ordinary bubblejet while whistling Dixie (and I'd like a copy, please), but if your app isn't easy, pretty, and thoroughly Mac-like, it will be dismissed. With the arrival of Mac OS X, the importance of interface has become even more critical - Apple has set the bar for quality UI design even higher.

Thus, if your Mac OS X application at all looks not quite right, you're in trouble. Maybe your default buttons are aligned left, or your status text is still Geneva 9, or your Preferences are only accessible via the "Edit" menu, or the background of your window is filled with a scaled photograph of a beautiful Icelandic mountain goat. No matter what the offense, when a Mac application doesn't follow the Apple Human Interface Guidelines to the letter, people notice, even if they have no idea that there is such as a thing as "Interface Guidelines".

When we took our first stab at a Mac OS X port of our FTP client Transmit (the Carbon-based 1.7b2), we pretty much brought the interface over identically - the good ol' "Bare Minimum" port. We updated the font to Lucida Grande, replaced some old folder icons, spaced things out a little, and added a new 128 x 128 icon, but that was about it. After a few months of getting under Mac OS X's skin, it was clear to us that 1.7b2 wasn't even remotely enough. Mac OS X threw almost everything we knew about Macintosh interface design out the window, but things had improved - now, when we booted in Mac OS 9 things felt odd and cumbersome, no longer the other way around.

So, once we made the decision to rewrite Transmit in Cocoa, we decided we would remodel the entire interface as well: the goal, as with all Panic products, was to make Transmit feel like a part of Mac OS X itself, as if it came straight out of Cupertino.

The Interface

Two things make Transmit unique among FTP clients. First, the main interface is all-in-one - it not only contains its own built-in local file browser, but also an in-line connection panel for entering server information, all in one window. This unification allows the user to breeze through their FTP session. Secondly, we rely heavily on Finder-like metaphors and behaviors to make our application feel more like an extension to the Finder itself rather than a stand-alone FTP app. For example, you drag and drop to upload and download. You click and wait to rename. You drag to the trash to delete. You drag into a folder to move. As we like to say, "If you can use a Mac, you can use Transmit."

When updating the main interface for Mac OS X, it was important that we maintained a careful balance: adopt the best new design features that Mac OS X has to offer, but don't destroy the essence of our application's identity - don't break what works well, but improve what doesn't. It was a very tough task. Here's the result:


Figure 1. Mac OS 9's Transmit 1.7


Figure 2. Mac OS X's Transmit 2.0

Consider Toolbars

The first thing we added to Transmit 2's interface was a toolbar. You'll notice them in virtually every Mac OS X application, from Mail all the way down to the humble Print Center. Despite seeming gimmicky, we've learned to love toolbars: it's far easier to mouse over to a shiny icon than to navigate through menus when you want to perform an action in a hurry. Additionally, some of your best features can get lost under heaps of cascading menus -- toolbars help new users easily discover all your application has to offer.

So, if your application has a lot of "actions" tucked away in the menus, there's no quicker way to make it feel like a good Mac OS X citizen than to install a toolbar. Here are some things we kept in mind when designing the Transmit 2 toolbar:

  • Choose your items carefully. Don't make everything available in your toolbar, only the actions you think the user is likely to access often. If the feature is so obscure that only 5% of your users care, it probably doesn't need to go into the toolbar. For example, we didn't add "Send Raw FTP Command" to the toolbar - it's so hard core, it's best left in the menus.

  • Choose your default toolbar set even more carefully. Don't overwhelm the user with a toolbar longer than the Great Wall of China on first launch. In Transmit, we have "Upload" and "Download" buttons that the user can add to the toolbar if they desire, but we don't put them in the toolbar by default - we want the user to discover the "drag and drop" method of uploading and downloading first, since it's far more natural.

  • Don't add fundamental application actions to your toolbar. It may seem obvious, but your toolbar should not have a "Quit" button. The same goes for "Preferences", "About", "Help", "Hide", etc. Your application should be already providing a common and consistent place for these typical, every-app actions.

  • Try to use the toolbar to simplify your interface. You'll notice we moved the "Cancel" button from our main interface window up into the toolbar - nestled among the other actions, it reduces the clutter in the main interface view, and fits well with other actions.

  • Think a bit about your default toolbar's item order. In Transmit's case, the two destructive actions - Cancel and Disconnect - are the black sheep of the toolbar, shunned away on the right and separated with a flexible space to reduce the likelihood of accidental clicks. You'll also notice that a separator sits between the action icons (New Folder, Refresh) and the location icons (Home, Documents), letting the user know that these sets of icons behave slightly differently. Simple things like spacers and separators can do wonders for usability.


Figure 3. Transmit's default toolbar.

Rework the Interface

With the toolbars set, we started picking and choosing our primary interface elements, carefully considering the usefulness of each and asking ourselves, "Can we do this better?"

In the bottom of the original Transmit window was a "Show More Information" disclosure triangle. When clicked, the window would resize to reveal multiple informational text fields containing data about the active connection. Although it was a fun widget to mindlessly click on while a transfer is running, there was really no reason for "More Information" to be optional - virtually everyone ran Transmit with "Show More Information" open. After all, who wants to choose "I want to know less"? We took the contents of this optional panel and, although we lost a little information in the transition, we managed to roll all of it into a single easy to understand status line in Transmit 2.


Figure 4. The optimization of "More Information"

We kept the trashcan in the lower-right hand corner of Transmit's interface, but it is still a matter of some contention. Optimally, since Mac OS X offers an always-available trashcan in the Dock, we wanted to encourage users to drag their items to the Dock instead, removing an extra control from our window in the process. However, we found that old-school Transmit users felt very lost and bewildered without their convenient trashcan waiting for them in the corner, and users who had their Dock set to auto-hide were even more confused about how to delete items, since no trashcan was visible to them while using Transmit. In short, we let the trash can stay... for now.

Finally, you might have noticed a path pop-up control, and a parent button, smack dab in the main interface. "Aren't we supposed to 'simplify' these kinds of things by placing such items in the toolbar?", you might be asking. Well, technically, you're right. After all, the Finder has both a back button and a path pop-up in its toolbar, and they work just fine.

The problem here, however, is that Transmit has two separate file views in one window to consider: local and remote. If the "parent" button was in the toolbar, the user would first have to click the side they wanted to change -- say, "your stuff" -- and then, with a side selected, they'd be able to click the parent button. By having two sets of these controls, one on each side, the user can immediately affect the one side they wish to affect -- we eliminate a selection step in a frequently used action.

Avoid Metal

There's one very important thing Transmit's interface isn't: metal. With the introduction of Jaguar, Apple provided a simple checkbox in Interface Builder that still to this day gives me night tremors and cold sweats: "Textured Window". This innocent looking box makes your application all shiny and metal, very much like iTunes, iPhoto, and, somewhat questionably, Address Book.

In the Aqua Human Interface Guidelines, Apple provides a very logical description of when the metal look is acceptable. You should read it if you're curious, they've certainly put some good thought into it. But I will personally summarize it thusly: "Your application should use the textured appearance [...] never."

In all seriousness, no Mac user wants a patchwork-quilt of a desktop, with some windows ice-lined and others molten-forged. Unless your application fits the acceptable guidelines to the letter, I say don't check the box. I know it looks cool and has a high novelty value, but if you ship a word-processor with the metal texture, we will come to your house and hurt you. Seriously.

The Preferences

Ah, preferences - gateway for the everyday tweaker, long-standing domain of the power-user, and defender of all-that-can-be-changed. In migrating an application from Mac OS 9 to Mac OS X, you'll likely spend a great deal of time re-creating your preferences, since they're very control and layout heavy. The Mac OS 9 Human Interface Guidelines had a very strict set of rules for typical window layout (lots of group boxes, left-justified controls, tabs galore, and the like), and all of it is irrelevant in Mac OS X.

When it comes to re-designing your preferences, I say: start from scratch! Don't load up your old resources and excitedly start re-arranging and re-sizing them. Instead, open up Text Edit, and write out a good old-fashioned simple list of each of your Preferences. Then, walk through the list, and consider each preference carefully -- look for ways to combine preferences, to clarify controls, or weed out preferences that are so obscure that they're probably not worth the clutter. Finally, once your list is done, fire up Interface Builder, and start building a new Preferences window from scratch, working only from your list. Your preferences will thank you for it! (Although that'd be a little creepy...)

Here's some other advice we took when bringing Transmit's preferences up to code:


Figure 5. The "Transfers" preferences from Mac OS 9's Transmit 1.7


Figure 6. The "Transfers" preferences, all nice and Mac OS X-like. Ahhh.

  • Think centered. Mac OS 9 dialogs and windows were traditionally left justified, but in Mac OS X, the world is centered - even the drop shadows cast down from top and center. That doesn't mean each item should be individually centered, though -- instead, group your related controls and captions, and then center that entire group. See our "Downloads:" group for an example.

  • Keep a close eye on fonts. As of this writing, Lucida Grande reigns supreme, almost always in 12 point. And take heed: there should be no Geneva, Charcoal or, god forbid, Chicago!

  • Let your window breathe. Mac OS X windows and dialogs are much more spaced-out than their Mac OS 9 counterparts, and the result is a much more airy, much less totallysupercrampacked experience. Now that the minimum resolution supported by Mac OS X is 800 x 600, there's no reason to jam all of your preferences into a 100 x 200 window.

  • Get rid of group boxes. They're oh-so-1997. Place a static text heading to the left and top of a series of controls if you wish to group them visually. Or, for bigger groups, use a static text with a horizontal rule bottom-justified to the right of it, then place the controls (and sub-groups) underneath.

  • Remove your tabs. True Mac OS X preferences should now use a toolbar-like control at the top of the window, and the window should resize appropriately when sections are accessed.

  • Prune. Like I said, we took this re-writing opportunity as a chance to re-consider every preference we had. "How many people use this?" and "Is this really that important?" should be questions you ask frequently. If you remove a control that 4 people use, sure, you'll probably hear from those 4 people (it might be the same 4 people we always hear from!), but hundreds of other people might just be more likely to find what they're looking for now that the obscure option has gone away. I know it's counter-intuitive to take something out of your application, but be brave! And if you need moral support, call us.

Follow these basic rules - and keep the HIG on your nightstand for a while - and you'll be well on your way to a shiny, Mac OS X-like preferences experience in no time.

The Icons

In the land of Mac OS X, icons are king. Really. There's no greater investment you can make for your application than going out, finding a quality icon designer, and making an original set of icons. Cobbling together your own icons from other applications, snagging icons from the Finder, or re-using freeware icon sets is almost always a bad idea - this usually lends to situations such as: "Well, I can't really find an icon for 'Reset Cache' anywhere, so I'll use this cool icon of a rubber duck in a top hat wearing a delightful little monocle, since people love rubber ducks! And monocles! Right? Besides, help tags were invented for a reason, right?"

In the case of Transmit, we went straight to The Iconfactory, who we've worked with since 1997 - we're always amazed by their creativity and quality. They're not alone, though - there are many talented Mac OS X-specializing icon artists, some who may even work for free (although, if you work for Microsoft, I suspect they might charge you.)

Your best bet is to Google for something like "Mac OS X Icons" or search through the news links at The Iconfactory, browse the free icons out there, find an artist whose style you like, and write him or her an e-mail explaining that you need their talents! Make sure the artist is equally good at both the tough-to-clarify 32 x 32 toolbar icons and the very-large and photorealistic 128 x 128 application icons. Also, make sure you can clearly explain your exact icon needs. Good direction is crucial! And when it comes down to price (always tricky), I suggest simply asking the author what they want in return for the work. Icon people are good people, as long as you're a good person in return. (I guess that's true for many things in life.)

Toolbar Icons

When working on the Transmit 2 toolbar icons, we kept coming back to the importance of consistency - the icons needed to resonate with each other, in order for the application to feel cohesive and whole. At the same time, we wanted the icons to feel Finder-like. So, we had to strike a delicate balance between our own style and the Finder's style. The complete results are as follows:


Figure 7. The many toolbar adventures of Transmit 2.

As you can (hopefully) see, each icon shares the same language: badges are consistently white shapes with a soft shadow, non-real-world graphics are rendered in graphite, each bookmark-related icon shares the same basic book, etc. As a whole, the Transmit toolbar icons feel like a family, and help the application gel.

Don't be afraid to continually revise your icons, either, as your application winds its way through development. Our toolbar icons went through many revisions before we felt fully comfortable with them. It's an inexact science - my only advice is to trust your intuition and tweak until the icons just feel right. If you know for a fact you have no design intuition, grab the pickiest Mac-using friend you know and run everything by them. (As for our many stabs at the "refresh" icon, pictured below, I'd like to thank Dave at Iconfactory for being so patient when I wrote him notes like "I don't know... that one's a little bit too wispy." Great, Cabel. Thanks.)


Figure 8. Six - yes six! - revisions of Refresh.

There was one snag during the creation of our toolbar icons that is worth mentioning. Since many features in Transmit mirror those in the Finder, our instinct was to make our toolbar icons as Apple-like as possible. We even considered using the exact same icons that the Finder uses for things such as "New Folder". However, as we began to investigate Apple's icon language, we noticed some inconsistencies, and eventually came to the conclusion that it would be smarter to invent our own, Apple-like style, but with a Panic twist.

Take, for example, icon badges - little icons that combine with other icons to create new icons. Phew! Here are three of Apple's:


Figure 9. Some of Apple's different badge styles

As you can see, each icon has a different take on badges - one is pseudo-3D, one is centered flat white, one is white with a border, etc. With so many styles present in Apple's work, we struggled to pick which one was "correct" for our own badges. It was a riddle with no answer, as even Apple is still refining and perfecting their style -- there is no "bible" just yet. So, we wound up creating our own New Folder icon, based on Apple's, but fitting within our own Transmit style. It's a bit smaller, and uses a badge style consistent with all of our other icons. We think it's a good balance.


Figure 10. Transmit's "New Folder" (left), inspired by Apple's.

Application Icons

I've always believed that an application icon needs to have this unspoken attractiveness to it that just makes you want to uncontrollably double click it even when you don't have to. I'm not sure if this is vestigial stimulus from early childhood or some kind of terrible comment on society as a whole, but I think the more attractive, cute, and polished an icon is, the more likely it will gain a permanent place in a user's dock, and thus be a part of their everyday toolkit. Admittedly, I've put some ugly icons in my dock in the past, but only out of necessity - once a more attractive icon came along, I've almost always dumped the old one and immediately upgraded to the new, beautiful one. Okay, now this is just sounds weirdly personal.


Figure 11. Our little guy is all grown up!


(From l-r: Mac OS 7.5, 8.1, 10.0, and 10.2)

The very first Transmit icon used the standard limited color palette for Mac OS 7.5 icons, and was basically a "Copland-style" three-dimensional truck. The next revision of the icon got a whole lot of shading and a little bit of an alpha-channel shadow, thanks to the 32-bit icon capabilities of Mac OS 8. Once Mac OS X came out, the truck grew to 128 x 128 - but it was one of The Iconfactory's first Mac OS X icons, so it was really more of a "scaled-up" 32 x 32 illustrative truck, rather than a photorealistic, Mac OS X-style icon. Finally, the Transmit 2 icon underwent the ultimate upgrade -- a true piece of icon art, even down to the headlights and tire treads, that fits perfectly in Mac OS X.

When designing your application icon, don't forget to spend a few days doing what we call "The Dock Test". That's when you drag your new icon into your dock and.. well.. leave it there for a while! Just live with it. Does it fit in? Does it stand out? How does it look next to everything else? The Dock Test is terribly helpful in deciding if your icon is ready to go.

Finally, in case you've ever wondered "why a truck?" Well, Transmit was originally called Transit! It made a lot more sense back then, really, before the lawyers got involved.

...and the Rest

The HIG, impressive tome that it is, can't always give you all the answers. In our case, there was at least one place where we "flew solo", creating a control that isn't really covered in the HIG or used anywhere else in Mac OS X.

The favorites menu in Transmit sits in the corner of the connection panel, containing a list of the user's favorite servers. In Transmit 2, it's a pop-up menu with no caption to the left, and the pop-up menu itself doesn't display any text - just an icon. Yes, it's not something you see often, and those are certainly two violated rules.


Figure 12. Transmit's unique "favorites" control.

But, in our defense, we think this custom control works pretty well by combining two global concepts. First, a pop-up menu, distinguished with the down-arrow, obviously contains a list of items that are revealed when clicked. Second, a simplified bookmark icon, used throughout our application and nearly universal in its readability, indicates favorites or bookmarks. We think that anyone looking at this control will know that it's a menu that contains favorites. Or, at least, we hope so.

(A note about the design of the bookmark icon itself: we modeled its gray, flat appearance off the "utility buttons" Apple has introduced in applications like iPhoto. But, as a twist, we shaded the icon with glossy white highlights to match Mac OS X 10.2's pop-up menu itself. You won't find this kind of stuff anywhere in the HIG, but darned if it doesn't feel right!)

Before you go whipping up some kind of crazy circular scrollbar, remember: you should rarely, if ever, find yourself rolling your own solution, and if you find yourself inventing your own controls more often than using Apple's, you're either doing something very wrong, or working a new version of Kai's Power Tools.

Good Luck

Here at Panic we've always believed that a truly great application is 50% engineering and 50% design - with any luck, you're now ready to tackle that last 50% and bring every corner of your application up to spec. With a little interface intuition, intense attention to detail, and good old-fashioned Interface Buildin', you can make your application shine as brightly as it deserves to under Mac OS X. It's worth the effort, and believe me - your crazy users will thank you!

References

http://developer.apple.com/techpubs/macosx/Essentials/AquaHIGuidelines/index.html


Cabel Sasser is the other co-founder of Panic Inc., and is Panic's primary right brain, responsible for design in all its many forms. He also buys all the weird new food products for the guys in the office to try out (Funky Fries, anyone?). Feel free to send Cabel any e-mail at cabel@panic.com.

 

Community Search:
MacTech Search:

Software Updates via MacUpdate

How to get all the crabs in Mr Crab 2
Mr. Crab 2 may look like a cutesy platformer for kids, but if you're the kind of person who likes to complete a game 100%, you'll soon realise that it's a tougher than a crustacean's shell. [Read more] | Read more »
How to be a star in Britney Spears: Amer...
If you've ever wanted to be a star, baby, then you've probably already checked out Britney Spears: American Dream and are happily making your way up the charts. But fame doesn't come easy, and everyone needs a helping hand sometimes. So we've got... | Read more »
AppSpy is hiring a part time Staff Write...
| Read more »
How to save lives in ER Surgery Simulato...
A serious earthquake has struck a nearby town in ER Surgery Simulator - Emergency Doctor, and it’s up to you to save the victims. [Read more] | Read more »
Tips and tricks to get a high score in G...
Ketchapp Games loves the endless runner genre. And its newest game, Gravity Switch, is no exception. Gravity Switch takes a fresh approach, though, as you move a block, suspended in zero gravity, safely through a maze of shifting pillars. If the... | Read more »
Tips and tricks to get a high score in S...
Smash Fu is a high-paced tile-tapping game that requires quick reflexes and some practice. You’ll have to smash bricks with the skill of a seasoned black belt to get a high score. To raise the stakes a bit, you’ll also have to avoid tapping any... | Read more »
How to keep the ball rolling in Dropple
If you're new to the minimalist puzzler Dropple, you may find yourself struggling to make it beyond the first couple of steps before your ball falls into the endless abyss below. [Read more] | Read more »
Game Craft releases new Legend of War ti...
Set for release at the end of this month, real time strategy title Legend of War seems sure to delight with a veritable feast of sweet features to get stuck into. Developed by Game Craft, the game is due for release through both the App Store and... | Read more »
How not to die in Traffic Rider
Traffic Rider, an Out Run-esque game in which your ride a motorcycle recklessly into trffic, might not seem particularly complicated. [Read more] | Read more »
How to adjust your chess game for Regici...
At first glance you might likenWarhammer 40,000: Regicide to Chess - and you'd be right. Regicideputs its own spin on the classic board game though, so some of your tried and true methods may not work quite so well here. [Read more] | Read more »

Price Scanner via MacPrices.net

Textkraft Professional Becomes A Mobile Produ...
The new update 4.1 of Textkraft Professional for the iPad comes with many new and updated features that will be particularly of interest to self-publishers of e-books. Highlights include import and... Read more
SnipNotes 2.0 – Intelligent note-taking for i...
Indie software developer Felix Lisczyk has announced the release and immediate availability of SnipNotes 2.0, the next major version of his productivity app for iOS devices and Apple Watch.... Read more
Pitch Clock – The Entrepreneur’s Wingman Laun...
Grand Rapids, Michigan based Skunk Tank has announced the release and immediate availability of Pitch Clock – The Entrepreneur’s Wingman 1.1, the company’s new business app available exclusively on... Read more
13-inch 2.9GHz Retina MacBook Pro on sale for...
B&H Photo has the 13″ 2.9GHz Retina MacBook Pro (model #MF841LL/A) on sale for $1599 including free shipping plus NY tax only. Their price is $200 off MSRP. Amazon also has the 13″ 3.9GHz Retina... Read more
Apple price trackers, updated continuously
Scan our Apple Price Trackers for the latest information on sales, bundles, and availability on systems from Apple’s authorized internet/catalog resellers. We update the trackers continuously: - 15″... Read more
Clearance 12-inch Retina MacBooks available s...
B&H Photo has dropped prices on leftover 2015 12″ Retina MacBooks with models now available starting at $999. Shipping is free, and B&H charges NY tax only: - 12″ 1.1GHz Gray Retina MacBook... Read more
Check Apple prices on any device with the iTr...
MacPrices is proud to offer readers a free iOS app (iPhones, iPads, & iPod touch) and Android app (Google Play and Amazon App Store) called iTracx, which allows you to glance at today’s lowest... Read more
New 2016 13-inch 256GB MacBook Air on sale fo...
B&H Photo has the new 13″ 1.6GHz/256GB MacBook Air (model MMGG2LL/A) on sale for $1149 including free shipping plus NY sales tax only. Their price is $50 off MSRP. Amazon has the 13″ 1.6GHz/256GB... Read more
Apple refurbished iPad Air 2s available start...
Apple has Certified Refurbished iPad Air 2 available starting at $339. Apple’s one-year warranty is included with each model, and shipping is free: - 128GB Wi-Fi iPad Air 2: $499 - 64GB Wi-Fi iPad... Read more
Accenture and Vatican Opera Romana Pellegrina...
Accenture has announced that the official mobile application for the Extraordinary Jubilee Year of Mercy declared by Pope Francis has been built and launched by Accenture Mobility, part of Accenture... Read more

Jobs Board

*Apple* Nissan Service Technicians - Apple A...
Apple Automotive is one of the fastest growing dealer...and it shows. Consider making the switch to the Apple Automotive Group today! At Apple Automotive , Read more
ISCS *Apple* ID Site Support Engineer - APP...
…position, we are looking for an individual who has experience supporting customers with Apple ID issues and enjoys this area of support. This person should be Read more
Automotive Sales Consultant - Apple Ford Linc...
…you. The best candidates are smart, technologically savvy and are customer focused. Apple Ford Lincoln Apple Valley is different, because: $30,000 annual salary Read more
*Apple* Support Technician II - Worldventure...
…global, fast growing member based travel company, is currently sourcing for an Apple Support Technician II to be based in our Plano headquarters. WorldVentures is Read more
Restaurant Manager (Neighborhood Captain) - A...
…in every aspect of daily operation. WHY YOU'LL LIKE IT: You'll be the Big Apple . You'll solve problems. You'll get to show your ability to handle the stress and Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.