Scott Hanselman

Good UX in the Wild: Dropbox's attention to detail on their download page

December 7, '11 Comments [29] Posted in Musings | Tools
Sponsored By

Sometimes good UX is about being clever. Sometimes it's to make the user happy or smile. However, when the success of your product depends on new, possibly inexperienced users successfully downloading and installing it, good UX is the difference between success and failure.

I love what Dropbox has done here. I've noticed it for years and mentioned it in talks and to friends but I wanted to call it out here because it's so thoughtful.

When you go to download Dropbox, here's what you see on Internet Explorer. Note they've used a three step tiny screenshot sequence. Each of them isn't a real screenshot, but rather "evocative" of the thing an IE user would see. For example, the second User Access Control dialog isn't real, but it's close enough that it makes the point while still fitting into width of the page cleanly. Their Welcome to Dropbox Setup screenshot is the same way, distilling the essence of  what's coming while keeping the design consistent.

See below how the first screenshot shows what's coming and looks enough like the actual Save As experience that pops up seconds later as to guide the user to the next step.

Dropbox - Windows Internet Explorer

Here's the attention to detail part. Here's what a Chrome user sees when downloading Dropbox. They see a Chrome specific download screenshot.

Dropbox - Google Chrome

Here's the Dropbox download page when using Safari on a Mac:

Dropbox - Safari on a Mac

In Firefox for Windows, they see a Firefox Save File dialog along with a different second step. In the second step Dropbox takes a chance and doesn't show the User Access Control screenshot, and is instead more concerned that the user will download the file but not run it. I've had this happen myself with Firefox a few times, where things get downloaded then forgotten.

Dropbox - Mozilla Firefox

Techies forget how something as trivial as downloading and running a file can be a huge deal for the average user. What Dropbox has done here is a nice touch over the standard big Download button. To accomplish something like this, not only did they need the initial idea but they needed to the will to do it. They thought it'd be useful and they made it happen. What can we do in our organizations, Dear Reader, to sell our innovated ideas up the management chain and make the happen? What kinds of things stand in our way? What do we tell ourselves? That's too hard, that's too involved, that's too difficult to test, and the list goes on.

We need to continue to push ourselves and our work groups to implement ideas that we know are right. We need to advocate for the Customer and always try to see things from their experience. I don't know anyone at Dropbox but I think it's a fair guess that not only did they have the will to implement this friendly download feature, but they also knew it was the right kind of attention to detail that their customers needed. What a nice, almost subliminal way to kick off your relationship with your users than a subtly customized download page.

Have you done something similar, Dear Reader? Share in the comments.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. I am a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web
Wednesday, December 07, 2011 9:45:22 PM UTC
I've done many things to enhance the UX of our custom build & deploy site at my work, but one of the smallest (and easiest) changes I did was this:

Before:
User submits a build. A message at the top says, "Success!". User then usually has to go to the right-nav menu, then find the "Activity" menu item. Then they have to go to that page to see how their build is doing.


After:
User submits a build. Now, in addition to the success message, I append another message with a simple link that says, "Go view status on Activity page." Even better, I added an extra button to the form that says, "Build and View Status" Can you guess what that does?!


I have gotten many good testimonials and how much I've improved our internal site(s) but many people love that small addition, it literally took me a few minutes to implement.

The other one I'm proud of is highlighting your builds/deploys on the activity page in green so it's immediately apparent what build you requested. Not to mention how I redid that page completely to use animation, AJAX, sentences ("You requested this x minutes ago and it is building on xxx build server.") and timeago from a table-based page that refreshed (postback) at an interval.
Wednesday, December 07, 2011 9:45:46 PM UTC
Its pretty cool. However it doesn't do that for Opera... It shows default picture for IE instead. Its a shame that the browser with 2.14% of market share is being ignored like that...
Wednesday, December 07, 2011 9:48:19 PM UTC
I thought I was the only person who noticed this. :)
Wednesday, December 07, 2011 9:52:52 PM UTC
I love it when sites do this. Another similar experience can be found at GitHub. When you are logged in to your dashboard you have a Set Up Git link that detects what OS you are on. From Windows you land at setting up git in Windows page. OSX drops you at setting up git in OSX and then Linux get you to setting up git in Linux.

With so many great services out there little polished gems, or nugets if you like, such as these make for a killer experience.
Wednesday, December 07, 2011 9:59:10 PM UTC
Talking about the UX I wonder why the top buttons on the new asp.net side are the biggest thing right on your face. Such a waste of space around that area with a huge banner and buttons.
Thanks,
Shez
shez
Wednesday, December 07, 2011 10:11:18 PM UTC
Yes, this is admirable UI design.

Would be nice if they gave as much attention to detail to their product, such as, via the desktop UI, when a synch is happening, showing what files are synching, what's in the queue, estimated time to completion, etc.

I'd also like to be able to see a list of recently synched files - or more specifically, more than the last 5. That they actually thought of showing a synch history, but decided showing only the last 5 files is all someone would need, is very depressing.

Imho, dropbox's success says more about their competitor's incompetence than it says about the quality of the dropbox software itself.
Steven
Wednesday, December 07, 2011 10:30:49 PM UTC
A great highlight of a thoughtful design feature. Great to see companies thinking like this. DropBox have continually impressed me with their simplicity. I'm with others that I'd like to see more power user features, but certainly not at the expense of the simplicity and intuitive experience; as it is that which allows me to evangelize the software to the less technically competent in my circles.
Wednesday, December 07, 2011 10:45:40 PM UTC
I love it when sites do that. Although I'm a "techie", I still find myself sometimes going "now what?" after a download. For example, apps/frameworks/libraries that are distributed as zip files.
Wednesday, December 07, 2011 11:37:38 PM UTC
Shez, very good point about ASP.NET website.

I'm browsing on a Samsung Windows 8 preview tablet with 768 vertical pixels, and the ASP.NET banner takes up more than half the visible browser area (in landscape mode).

Good website, poor banner design.

Kudos to DropBox, they've nailed good UX.
Thursday, December 08, 2011 12:44:20 AM UTC
The kind of people who are going to be downloading and making use of DropBox are not the kind of people who are going to need hand-holding to download and install it.
Anonymous Coward
Thursday, December 08, 2011 3:29:18 AM UTC
As I recall one of the first companies to do it was Mozilla Foundation with their Firefox download page, where it adapted to (back then) IE and Opera.
Thursday, December 08, 2011 4:07:50 AM UTC
Sweet, in linux it gives you a couple of links to debs and rpms and a command line to wget and install it in one go. Nice attention to detail.

Anonymous Coward
Thursday, December 08, 2011 6:59:48 AM UTC
Egor, you're correct in pointing out that Mozilla was one of the first to have a download page customized to the user's browser and OS. Additionally, the Firefox product/feature/support pages show screenshots of the Firefox UI for the user's OS. It's subtle but makes a big difference, especially for inexperienced users.
Thursday, December 08, 2011 1:32:08 PM UTC
Drop box is a great tool. Use it all the time for large media files!
Thursday, December 08, 2011 2:14:24 PM UTC
Drop Box is not a tool that your mom would use. It is really a tool for tech-competent people. So actually this attention to detail seems unnecessary. If you can't navigate a download workflow chances are you're not going to be using Drop Box.
bob w
Thursday, December 08, 2011 2:45:57 PM UTC
I didn't get the point of App Stores until I realised this a while back:
...something as trivial as downloading and running a file can be a huge deal for the average user.

Thursday, December 08, 2011 4:27:09 PM UTC
The kind of people who are going to be downloading and making use of DropBox are not the kind of people who are going to need hand-holding to download and install it.


Not true. Both of my sisters use Dropbox, and neither one is tech savvy. Regardless, the point is that you cut out a large number of potential customers if you assume that all of your users will be Internet gurus.
Thursday, December 08, 2011 4:51:32 PM UTC
I remember learning how valuable UX is. I wrote an app that did some long running stuff. First cut froze the UI. Second cut contained an animation and a progress bar. Users started reporting how much "faster" the app was. In reality, it slowed it down a couple seconds, but just letting the user know that the program was still there and not off in lala land gave the perception of increased speed.
Thursday, December 08, 2011 5:49:46 PM UTC
Scott,

Its good to see at least someone in Microsoft thinks and recognizes value of good UI. I make my living using and writing software based on Microsoft software. Typically when I install MS software, the initial dialog shows up with a text area occupying about 20% of the dialog, that has the entire license agreement in it, with a vertical scroll bar so small that you have to try hard to click on it. This while the other ~80% of real estate in the dialog is just Gray pixels! And why or why can I just not re-size the dialog by going to an edge and just dragging it towards any corner.

There are so many screens during installation of SQL server when a horizontal scroll bar shows up and you have to scroll to read because there is no tooltip and you cannot simply resize the dialog/window. This in the days of 21" dual monitors.

My biggest gripe is the tools/options dialog of Visual Studio. Again, not resizable and very ugly. Try to customize a keyboard shortcut. when you start searching for the command, only about 3 commands fit the ListBox that show matching commands and you have to scroll forever to find your command when you type something like 'Edit'.

These sound like minor inconveniences to someone but its so basic that I should even have to think about it let alone rant about it. I understand you might not 'control' these products/areas but if you can 'influence change' for these horrible UI choices, please please do.
Punit Vora
Thursday, December 08, 2011 9:00:44 PM UTC
openID test
Friday, December 09, 2011 10:04:13 PM UTC
will = $$?

that's usually the (perceived) obstacle
Saturday, December 10, 2011 2:58:51 AM UTC
I agree that the dropbox ui dialog essence is great. Unfortunately the scamware writers of the world are forcing us to be very exact in what we display. Otherwise the user sees a difference and must err on the side of safety and assume they are not on the legit web site.
DaveWill
Saturday, December 10, 2011 7:36:06 PM UTC
I'd wish that for all their attention to detail they'd also care to share information about the latest version of the dropbox client. The most obvious way to get this information appears to be by starting the download.

The thing is that the release history is available directly from the dropbox site, only the home page (for no apparent reasons) does not link to it.

To me, this aspect is far more important (and an indication of a questionable UX design) than fancy graphical sugar in terms of screenshots that match the used browser.
Sunday, December 11, 2011 7:18:44 AM UTC
Love these micro experiences! Thx for sharing.

The guys from Little Big Details collect further stuff like that. Fun and inspiring!

Dom
Dominik
Sunday, December 11, 2011 2:25:52 PM UTC
Why would they leave the focus on "No" buttons??
Monday, December 12, 2011 8:17:07 PM UTC
Opera specific dialog is not appearing, but a dialog box in Spanish is.

I guess they have made images for at least 20 languages 4x times (4 browsers IE, Chrome, Firefox, default).

That's impressive.
Wednesday, December 14, 2011 8:23:40 PM UTC
I think Adobe is the first site that shows download instructions for different browsers when you download, for instance, Adobe Reader. But dropbox download page is more accurate.
Friday, December 30, 2011 1:35:32 AM UTC
Compared to effortless, frictionless Dropbox UX, SkyDrive is a wasteland of difficulty. Somebody should seriously do something about SkyDrive. Both the Web UX and provide a good Windows client app story!
Friday, December 30, 2011 9:29:12 AM UTC
Dropbox has led the way with UX from the start. I think that sometimes people also forget that UX isnt just about the design, its about the 'experience' as a whole and those guys have it nailed!
Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.