Mac’s operating system has a peculiar way to install apps. An app typically arrives in a file with a .dmg extension (it stands for “device image”; my brain always reads it as “damage”), which upon double clicking becomes a kind of a drive. You go inside the drive, and there is the app icon.

But the journey isn’t over. While you can run the app from the virtual drive, the drive will eventually disappear after the reboot – or if you eject it – so it’s in the app’s interest to suggest a more permanent home for itself.

The way many apps choose to do it is by creatively combining a few of Finder’s options. Those options are available for everyone, in any folder, but perhaps not as known. The first stop is removing the toolbar and the sidebar, and any other bars. The second is switching to the icon view, and picking the right window dimensions. What’s needed next is a link to the Applications folder. The last ingredient? A custom background that’s placed underneath and creatively uses the fact the size and the position of all the icons are known:

After this makeover, the Finder window resembles almost a specialized app window, and you can use all of this power to… tell the user to drag the app to the permanent folder:

There are nuggets of something good in this flow – dragging an app icon to Applications is consistent with the other gestures you use to navigate the Mac, and teaches you that the app is just a file that you can place anywhere, or trash when done.

Overall, however, it feels quite a bit confusing, leading to spurious dangling drives, extra confusion, and attendant problems like these:

But I am not here to relitigate the flow itself, but to take a look at a few of those customized Finder windows. They became, in a way, a particular design playground with just enough constraints to make it interesting: an app icon, an Applications avatar, an arrow between the two, a typical size, and a bitmapped background tying it all together.

(Other historical playgrounds that got many designers excited: a calculator app, a weather app, a Twitter client… and outside of pixels, a watch face or a chair.)

Below, I went through many windows to find what I thought were the most well-made or interesting “drag to Applications” treatments.

The arrows

The first obvious place to start playing is the arrow, which can really be any shape and color… or maybe even not resemble an arrow at all:

An unusual direction

That last window shows that although in Western cultures it’s customary for time and flows to go from left to right, it doesn’t mean we can’t choose a different axis. Here are a few more examples:

More specific instructions

You might have also spotted above that some places aren’t content with the arrow itself, and adorn the window with more explicit text instructions.

Here are more examples of that. This one adds a simple two steps, but also perhaps starts feeling like Arrow City:

This one distributes the two steps differently and tries to cover the clean-up also, so you don’t end up with a dangling drive:

This one has a certain “cheapness” to it, but I find its minimalism endearing – the “link” arrow almost serves as the action arrow, and since you can rename the link itself, why not rename it into a set of instructions?

And this one feels like mad libs. Does this work, or is it more confusing to intersperse (passive) instructions and (active) objects this way? I’m not sure.

Scenes with icons

What I also noticed is a fun way that some of these used the dimensionality of the icons themselves, to place them in “the real world.”

Issues with gestalt

These next few feel like they have some issues – specifically with gestalt – and I thought it might be informative to look at them.

The first one has a very strong left-to-right directionality, and I wonder if people try to drag the left blue folder onto the right one?

This one is an interesting lesson in how versatile arrows can be, but also how tricky it feels if you go against the convention:

This I’ve seen a few times – despite the arrow, this still feels like a 2×2 grid of equally important things, or can also be misunderstood as “drag two items onto the other two items”:

And this is a better example of how to accomplish something the above window botched:

Different mechanics

Not all the apps choose the arrow-drag mechanic, and some are not allowed to. Here are other treatments I particularly liked:

Fun visuals

Some apps go deep on visuals. Here are a few I liked:

A modern app called Inkscape does something interesting:

[The Finder backgrounds] are designed by our users on the website in the about screen content. Held with every major release!

So I downloaded all the major releases of Inkscape to show you:

Today

And that brings us neatly to today. I think Firefox deserves extra credit for keeping their Finder install window beautiful and elegant throughout all these years:

And let’s close this off with a few gorgeous modern examples. Many apps these days come from the App Store and skip the Finder flow altogether, but here are a few that still ask you to drag:

That’s it! But send me more if you have them!

Thank you to Chris Messina for creating the Disk Images collection which I pulled from extensively for this post. Additional thanks go to Jean-Michel Durand, Mindaugas Rudokas, Louie Mantia, Colin, mimi, Jeremy Visser, Luke Dorny, Oskars, and Peter Tripp. The title comes from a reaction to one of my social posts where I asked people to send me good examples.