Designing disk images

by Giles Turnbull

A friend called the other day. She works at a web development company where most things are done on Windows, but a lonely eMac is kept sitting in a corner to ensure that the sites they produce look good in Mac browsers.



My friend had downloaded a new version of Firefox for OS X and was trying to install it.



“I don’t understand,” she said.



“I’ve downloaded it and got a dmg file on the desktop. I opened that but now I’m really confused.”



What my friend was looking at was this:



firefox-dmg.jpg





28 Comments

dinis correia
2007-03-15 03:50:07
Actually, the problem with the Firefox disk image is that the app folder icon is not an alias, just a depiction of it. It looks pretty but it's definitely not usable.


Adium's disk image works better. It has an alias to the Applications folder and a hand graphic drags the app to the folder (side-by-side screenshots). The downside: it's ugly. Very ugly.


Skype has the most well designed of all. It's beautiful and usable. It has an alias to the folder, a little arrow pointing to it - and you can even read what you're supposed to do.


I think there is room for improvment in most disk images. The whole concept of mounting a disk image is one of the least elegant aspects of OS X - for novice users, at least. Dave Watanabe's apps (NewsFire, Acquisition) had something very nice: if Safari was set to open safe files after downloading, the disk image would mount, leave the app (and only the app itself) on the desktop and the disk image would then automatically unmount.

Mike
2007-03-15 03:58:38
I'd sooner application bundles were tarred and bzipped. Some developers do do that, but not many. The only real point of disk images is that they can be internet-enabled:


http://developer.apple.com/documentation/DeveloperTools/Conceptual/SoftwareDistribution/Containers/chapter_3_section_3.html


But the dangers negate the advantage--how often did disk images crop up in MoAB?--and I've unchecked "Open safe files after downloading" in Safari since way back when. I'd suggest others do the same.

Andrew
2007-03-15 04:00:38
The issue we had with the Adium disk image was to make it international. Adium is localised into a lot of languages, so we couldn't actually have text, I like the Adium one, I'm not sure how obvious it is to novice users, but it does a pretty good job, I think.
Gazzer
2007-03-15 04:42:09
Yes, the Firefox one is terrible. And in fact, most diskimages are confusing to Mac users. I teach coding to design students who are experts at Photoshop, and at least 20% of them double click icons in Diskimages. And who says they are being dense:


You download the diskimage. It mounts. You see an icon that looks like an app. You have to work out that this is the App itself rather than an installer. Then you have to do the correct action depending on that. Then you have to eject the disk, and finally you have to be savvy enough to the delete the dmg file.


The Hazel one is not bad, but could be improved. Read me could say "Read about Hazel". Then you could drag it to the desktop, and easily find it later.


"Eject this disk image and drag it to the trash". That's confusing. To eject a disk image, you do drag it to the trash. What is the 'it' referring to here?


Then what to actually do with the Sample Rules. Eject the disk and you have to find them again.

Prachi Gauriar
2007-03-15 05:04:29
I rather like the Midnight App's Cha-Ching disk image (screenshot). It's pretty, fun, and gives basic directions for installing.
gilest
2007-03-15 05:12:34
Prachi: thanks, that's a great example.
Gilsurf
2007-03-15 05:17:47
Anything is better than nothing and nothing is what you get on Windows. Now once you are past that, I say think of it like any user interface. In this case, a one time user interaction where a user has no previous experience with the interface. Thus, make it easy, obvious and effective. 'Drag this file to here...' The nice thing is we can brand it and make it effective.


The issue is that it is usually the programmers who set this up. The programmers need to bring in the designers on this one.


It reminds me when html first came out... programmers were developing sites and became web designers, except they were not designers. Once the programmers were thrown out of the design shack, things started to look nice again. Not that all programmers are not good designers... but let each do what they are good at.

Reedo
2007-03-15 05:36:49
I don't know if I'm missing something here, but isn't using written language to convey instructions (along with some helpful images, perhaps) pretty much standard practice? Gilsurf: "nothing is what you get on Windows"? In Windows the user opens the installer file, and it goes through the installation process. Inserting a disc causes Windows to start the disc's "autorun" program, which often consists of popping up a friendly graphical interface.
Zac
2007-03-15 05:43:36
I have long felt that the schizophrenia behind installing applications on OS X is problematic. I appreciate the straightforward simplicity of the disk image concept, and I know just what to do when I open one up and see the App inside, looking back at me. I also know what to do if there is a package. But for a new user it seems to be an awful mess. I will give Windows this much, I hate those damn Wizards, they are time consuming aggravations, but when some one wants to intall a program that's what pops up every time and there is no way to do the wrong thing with it. For novice users this may be a better approach.
Gordon Meyer
2007-03-15 06:14:18
An article from Usable Help (my site) covers how to make these and provides several examples from a few years back. See Using Background Images in Mac OS X


Universal (ie: non-localized) instructions are a challenge no matter how they're delivered. In this case, the user is completely missing from the picture so there's a big gap to overcome just understanding that you're supposed to do something, let alone what you have to do.

Pepi
2007-03-15 06:31:46
While the Hazel/Noodlesoft Background image is quite well thought out it leaves one big problem and that is localization. Not everbody in this world speaks/reads/understands the english language. So if someone know a way to have that instructions text be localizable (without having to provide a separate image file per language) that would really help!
Regards Pepi
Kenny
2007-03-15 07:16:58
why not just use a pkg... then you can use that to distribute files over ARD and give users the "wizard install" they expect

2007-03-15 07:30:35
Your friend is doing web design on a PC and TESTING on a Mac? My sympathies.
Michael Amorose
2007-03-15 09:15:53
Installers are obsolete technology. Anything that is not drag-installable should be deleted from one's computer and boycotted until the developer fixes it. Since apps on OS X are bundles the app should be smart enough to self-install any components it needs to install into the system the first time the app runs. There is nothing wrong with .dmgs as a distro model. The only correct .dmg layout is a single blank window with the app itself in that window. Anything more is just clutter. Read Mes, documentation, web pages, help and all other files should be stored in the Application bundle and accessed through the app. As a Mac developer of 17 years and former Apple employee, I need to constantly remind people that in the world of computers we need to more forward by making things more simple, not more complicated. If things get any worse we'll all be switching to UNIX command-line installers and maybe we can all require the user to read an introductory book on how to use UNIX before installing software.
Jamie McC
2007-03-15 10:37:31
Why do you want an installer? Having the whole program in a disk image is one of the best things about the mac platform. It confused me when I was new to it from windows for about a week, but I have observed many total noobs to computers cope much better with the disk-image-contains-whole-app metaphor than the run-installer metaphor. Compressed archives seem to be somewhere in the middle, I think.


I prefer disk images first, compressed archives second, and installers a very distant last.
Installer apps seem to say to me that the isn't going to check each time it's started up for the settings that I've specified or for the files that were copied to other locations during installation.


Ultimately, the app is (or should be!) runnable from the disk-image, although with a performance penalty- I would have thought that that's much closer to a new-to-computers user's expectation than an installer. A new-to-mac user's expectations may be jaded by their experiences of other platforms, but that's no reason to start adopting lesser-practice.

pauldwaite
2007-03-15 11:31:49
> "The only correct .dmg layout is a single blank window with the app itself in that window. Anything more is just clutter"


> "in the world of computers we need to more forward by making things more simple, not more complicated."


I agree with the second quote, but I think the situation described in the first quote is still too complex. Let's look at the installation steps involved:


1. User double-clicks .dmg file.
2. User sees new window has opened, and maybe sees the funny new white icon on their desktop.
3. User somehow figures out tha they should drag the icon in the new window into their Applications folder.
4. If it's not open or otherwise accessible already, user opens Applications folder.
5. User drags application into Application folder.
6. User double-clicks application to finally run it for the first time.


Not good. I reckon there should be a special kind of disk image that, when double-clicked, copies the single application inside to the user's applications folder, pops up a dialog box telling the user that the app has been installed in their Applications folder, and then launches it.


2007-03-15 11:39:22
or you can double click the installer in windows.
stevenf
2007-03-15 13:08:26
The best disk image is no disk image. "Internet enabled" disk images decompress the application, drop it on your desktop, and get rid of the disk image for you. No user interaction required other than clicking the download link. I can't think of a better solution.


If you're going to throw terms like "aliases" and "virtual disks" at your garden-variety users before they've even launched your app, you might as well talk to them in Martian.

Kevin S.
2007-03-15 17:58:25
"Some things I notice already... I'm not sure I've installed Firefox correctly... it mounts as a volume on my desktop and doesn't appear in the Applications folder (I'm guessing it should.)"


--From an experienced Windows user and new Macbook owner.
http://richardjackson.org/?p=120

yyq123
2007-03-15 18:21:40
I think Adium disk image is GREAT.
http://static.zooomr.com/images/745017_18f2e7dfd2.jpg
kenny
2007-03-16 17:21:02
why do i like .pkg because it registers itself in the system reciepts directory and also assists when you do a repair permissions


people see things and double click on them. even if you have an internet enabled DMG then everyone will be running all their apps on their desktop and not know the difference.

Christopher
2007-03-16 22:30:42
The disk image installation concept is flawed and I think a relic of the past when software actually came on disks..


I love my gentoo machines because all software in the repository can be found easily and kept up to date with minimal effort by the end user. I think this is where the future should be for Apple. I would like to see a unified software update app that includes third party programmers. A single source for software on the Mac.. Perhaps an itunes like storefront so software can be browsed (and purchased?) downloaded, installed and maintained within one interface.


Maybe disk images are still produced for the advanced users who want to manage things themselves but I think we can do better than the current situation.

Chris Messina
2007-03-17 17:25:20
I've been collecting Disk Images on Flickr for some time:


http://www.flickr.com/groups/dmg


You might have a look. There are some real gems in there and I would invite others to share their findings.

gilest
2007-03-18 14:26:32
Chris: aha! Just the place to store and compare a bunch of dmg designs. Thanks for letting us know.
Robert Stainsby
2007-03-19 01:18:42
There is one problem with background images that no-one has mentioned yet: some users won't see them (for example, if they have Finder preferences set to column rather than icon view).


I don't think you can beat the user experience provided by following Apple's guidelines and using internet-enabled disk images. Rather than abandoning this approach, I'd prefer to see the security issues addressed.

Yakov Hadash
2007-03-27 00:21:00
I agree that the whole installation process is broken. When I was switching everyone told me how easy installation is on the Mac but it's really a many-step process:
1. Download the file
2. (Sometimes) unzip the DMG
3. Mount the DMG
4. Move the file to Applications
5. Find the file in Applications
6. Drag it to the Dock


That's a lot of work for what in Windows is just a double-click on the self-installer and then clicking Next five times.

Rasmus Andersson
2007-04-20 03:49:57
You have to be careful not to say "we think you, the user, is stupid" -- a common mistake in both software design and other media like print (advertising) and hardware interfaces.
However, I think Apple should further detail this process in their Human Interface Guidelines document.
AY
2007-05-15 01:49:00
Maybe it's to late to make any comment to this article, but i try ))
I want to answer on Yakov Hadash comment.
Maybe you forgot what on a PC you should:
1. Download the file
2. (Sometimes) unzip the .exe
3. Double click on it
4. Click next five times
5. And than locate it in you start menu.
Is it simples ?