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

http://www.hanselman.com/blog/GoodUXInTheWildDropboxsAttentionToDetailOnTheirDownloadPage.aspx

by joeyespo • 15 years ago

200 38 15 years ago

hanselman.com

teye• 15 years ago

This has been done for a long time on many sites. The Firefox download is one that comes to mind.

I see this as more of a no-brainer for a software download than a standout example of brilliant UX.

dmix• 15 years ago

Also, this was the case in plenty of printed technical manuals for any dual platform software.

biggitybones• 15 years ago

It's not brilliant in the sense that it's innovative, but rather because it's attention to detail that 95% of sites don't bother to touch.

Sometimes it's something ever so slight that makes the difference between a conversion and a bounce.

switz• 15 years ago

UX isn't about who did what first. It's about doing what makes sense for the user, then reapplying it in every scenario that works. Pull to refresh on the iPhone was utter genius and everyone adopted it. No one is saying, "Well Tweetie did that first!"

Also, it seems like a "no brainer" now, but during the development it's easy for these no brainer things to either be ignored or written off as a waste of valuable engineering time.

dazbradbury• 15 years ago

Well, apart from Apple who often claim they did it first...

shanselman2• 15 years ago

Well said. I wasn't trying to say DropBox is the only or the first. They had the will and attention to detail that so so many sites don't.

city41• 15 years ago

The Firefox one gives you Safari screenshots on a Mac, regardless of what browser you are using. So Dropbox did take it one step further.

johnx123-up• 15 years ago

Well said, this is been done in many sites for many years. I don't know why dropbox is always hitting first page.

StavrosK• 15 years ago

Same here. When writing instructions about how to install the historious bookmarklet, I had to take screenshots of all the browsers, including the iPhone. I don't think of it as a nice touch, it's integral to people's understanding of how to install it.

I haven't had a single request for additional instructions, ever.

andrewjshults• 15 years ago

Another site that does a great job of paying attention to the details in the signup process is rdio. They parse out the domain of major webmail providers and give you a link to sign in page so that you can quickly jump in and complete the reg process. https://twitter.com/#!/andrewjshults/status/1404921933695631...

murki• 15 years ago

Facebook also does that.

rottencupcakes• 15 years ago

As great as this example is, I generally live in fear of browser-specific behavior.

In the best case, it solves the niggling inconvenience of having to click on the correct browser extension to install.

In the worst (and far more prevalent case), poorly coded browser-specific behavior stops me from accessing websites at all if my user-agent doesn't match something on the server's limited whitelist, or nags me continuously to download a "modern" browser while I am, in fact, running the latest build of Chrome or Firefox, simply due to a poorly configured regex.

nknight• 15 years ago

The biggest useragent problem I have these days is clicking a link to a specific article on some site with my phone, and getting redirected to the front page of their totally separate mobile site, left with no way to find the article I was trying to read.

The second biggest problem is actually with software like Dropbox that's cross-platform, and the download page automatically chooses the version I want. Dropbox itself actually gets this right, by presenting small links to each specific platform right under the main download button, but I'm always running into sites that make it hard or impossible to get at a specific platform's version different from the one identified in my useragent string.

OpenAmazing3• 15 years ago

I did almost exactly the same thing on one of my websites (screenshots showing the user what to click on to complete the download).

I started getting customer support requests complaining that the "Download window could not be clicked on and was stuck to the web page".

Turns out users thought that the explanatory screenshots were the ACTUAL download dialogs and they were trying to click the images in the web page. Oops.

Turns out I needed to resize the screenshots and discolor them slightly so it was obvious they were the REAL buttons to click.

Lesson learned.

ComputerGuru3• 15 years ago

Wow. That's really something.

I guess Dropbox users are probably on average a little bit more knowledgeable about how browsers work than that... I hope.

OpenAmazing3• 15 years ago

You would be surprised.

If you distribute software to non-programmers, check your stats for # of downloads started vs. # of applications started (or new users). My guess is that they are way off:

Most computer users do not know what a "Downloads" folder is.

shanselman2• 15 years ago

Ya, I think grayscale or false-colored images would help.

patio113• 15 years ago

There used to be a screenshot on my front page. I was totally mystified by the following comment until I installed CrazyEgg and saw the hot spot: "I clicked on the New button and nothing happened."

FWIW, some savvy folks I know suggest rotating them such that the screenshot appears to me at an angle to the monitor (hold your right hand up such that it is parallel to your screen, now rotate your writst back an inch -- like that), which apparently cuts down on this misconception quite a bit.

jcapote• 15 years ago

Yet you need to download an app to hide their menu bar icon: http://dropboxwiki.com/MacDropHide

ceejayoz• 15 years ago

Downloading Dropbox is a common use case. Wanting to hide the tiny icon in the menu bar is a rare use case.

patio113• 15 years ago

Techies forget how something as trivial as downloading and running a file can be a huge deal for the average user.

Yes, yes, a thousand times yes.

I actually wanted to hire someone to do this for BCC but shot the downloadable version of the product in the head instead, which largely solved this problem.

Another example:

http://www.bingocardcreator.com/instructions.htm

This page was written back in ~2006. It has probably consumed five hours of my life since then, answering just one particular query. The customer complaint was "I can't find the Purchase Now! menu that you tell me to click on." Guess why.

ROT13:

Ba znpf gur zrah one vf ng gur gbc bs gur fperra, abg va gur nccyvpngvba jvaqbj, yvxr vg vf va fperrafubgf bs Jvaqbjf nccyvpngvbaf. Znal crbcyr pnaabg nofgenpgyl ernfba gung vs gurl ner ybbxvat sbe n zrah one naq zrah onef ner ba gur gbc bs gur fperra va znpf gura gur guvat gurl ner ybbxvat sbe fubhyq or ng gur gbc bs gur fperra. Gurl nyfb ebhgvaryl qb abg haqrefgnaq gung rvgure n) gurl ner ybbxvat ng n Jvaqbjf nccyvpngvba (lbh qb, ohg lbh'er sernxvfu va lbhe novyvgl gb haqrefgnaq gung gur pbafvfgrag HV thvqryvarf tvir lbh vzcbegnag uvagf yvxr gur jvaqbj pbageby ohggbaf) be o) Jvaqbjf naq Znpf ner abg gur fnzr be p) Jvaqbjf naq Znpf rkvfg.

bodegajed• 15 years ago

One thing I noticed about your page is that its SEO optimized -- with the "Bingo Card" keyword to be exact -- rather than being user friendly. I think this is also another dilemma we are facing. We can put nice graphics with less text to our landing pages which will be very user friendly but it would also suffer lower SERP because of low keyword recurrence.

patio113• 15 years ago

Kinda tangential, but since I want to help people do better at SEO: That page is not SEO optimized -- it isn't even designed to be accessible to crawlers. It is only linked to from post-purchase emails and me when answering customer support requests. No page on my site other than the front page would ever rank for [bingo cards], certainly not on the strength of on-page optimizations.

If a consulting client told me they were worried about poor rankings because of low keyword recurrence on their landing pages I'd tell them that on-page factors wouldn't make a difference for head-of-the-distribution terms either way and you don't need re-occurrence to rank for tail terms, so that is probably not a terribly big worry. Having insufficient text on a page to rank for anything is a bit of a worry. If you're trying to satisfy the competing imperatives "Conversion rate/user happiness goes up when we take text off" and "Rankings go up when we add text" the solution I'd recommend pretty quickly is "Put the text below the fold, where only Googlebot and the sliver of humans who actually enjoy reading will see it."

thwarted• 15 years ago

This is a great example of why there's no such thing as a completely intuitive interface, especially out of the gate. There is such a wide range of possible experiences, contexts and willingness to learn/find out that people, your possible customers, have. The best way to attack it is iteratively, build in some metrics, A/B test, try as best you can to gather feedback, be helpful to those with problems, and try to understand their perspective and context so the interface can be refined in a meaningful way over time.

User experience testing can go a long way, but a lot of things are not going to be evident until it's been field tested, especially since the people working on it have been staring at it for months (I'm thinking of the classic "Why do I select 'start' to shutdown the computer?" story, for which a link evades me at this moment). The best thing to do here is not be married to your design or flow and know that you're going to have to tweak or refactor it, and do so purposefully.

zyb09• 15 years ago

Something tells me people using Bingo Card Creator aren't the most technical people and these little download screenshots would make much more beneficial there than on the Dropbox page ;)

RyanMcGreal• 15 years ago

Spoiler:

"On macs the menu bar is at the top of the screen, not in the application window, like it is in screenshots of Windows applications. Many people cannot abstractly reason that if they are looking for a menu bar and menu bars are on the top of the screen in macs then the thing they are looking for should be at the top of the screen. They also routinely do not understand that either a) they are looking at a Windows application (you do, but you're freakish in your ability to understand that the consistent UI guidelines give you important hints like the window control buttons) or b) Windows and Macs are not the same or c) Windows and Macs exist."

younata• 15 years ago

Techies forget how something as trivial as downloading and running a file can be a huge deal for the average user.

I learned today that one of my friends (up until this past summer) thought that the internet was something on her computer.

I hold this person in high regard as one of the most intelligent people I know, she just doesn't know computers.

waitwhat• 15 years ago

Sadly, their "attention to detail on their download page" doesn't extend to the actual screenshots on that page: they reference Dropbox.exe (which is incorrect -- the downloaded filename actually includes a version number), and sometimes Dropbox 0.7.110.exe (which is worse, because although it does include a version number, that version is a couple of years out-of-date by this stage.)

udp• 15 years ago

I notice that in the Windows dialogs, the wrong button is often highlighted - for example, No is highlighted in "Do you want to allow changes", and Cancel is highlighted in the Firefox "Opening" dialog.

Maybe it'd be better to highlight the correct option for people who don't bother to read the text?

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

Related Stories