13 ms·

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

200 points by joeyespo 15y ago

teye 15y 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 15y ago
  Also, this was the case in plenty of printed technical manuals for any dual platform software.
  - biggitybones 15y 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 15y 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 15y ago
    Well, apart from Apple who often claim they did it first...
  - shanselman 15y 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 15y 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 15y 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 15y 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 15y 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/140492193369563136/photo/1 https://twitter.com/#!/andrewjshults/status/1404921933695631...
- murki 15y ago
  Facebook also does that.
rottencupcakes 15y 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 15y 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.
OpenAmazing 15y 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.
- ComputerGuru 15y 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.
  - OpenAmazing 15y 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.
    - rabidsnail 15y ago
      Has nobody written an installer for windows apps that runs from java web start?
      - OpenAmazing 15y ago
        Adobe Air.
        robmcm 15y ago
        Yes AIR has a fantastic install process, even installing AIR it's self. With the install badge you could also detect if it was already installed, and launch rather than download. It would shock you how many people would download and install an app every time they wanted to run it. There is no wonder why something like the app store on iOS is used by so many non techy people and so popular. Especially when you think you could install apps on phones before this...
jcapote 15y ago
Yet you need to download an app to hide their menu bar icon: http://dropboxwiki.com/MacDropHide http://dropboxwiki.com/MacDropHide
- ceejayoz 15y ago
  Downloading Dropbox is a common use case. Wanting to hide the tiny icon in the menu bar is a rare use case.
patio11 15y 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 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 15y 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.
  - patio11 15y 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."
younata 15y 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 15y 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 15y 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?

200 points by joeyespo 15y ago

teye 15y 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 15y ago
Also, this was the case in plenty of printed technical manuals for any dual platform software.
- biggitybones 15y 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 15y 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 15y ago
  Well, apart from Apple who often claim they did it first...
- shanselman 15y 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 15y 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 15y 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 15y 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 15y 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/140492193369563136/photo/1 https://twitter.com/#!/andrewjshults/status/1404921933695631...

murki 15y ago
Facebook also does that.

rottencupcakes 15y 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 15y 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.

OpenAmazing 15y 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.

ComputerGuru 15y 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.
- OpenAmazing 15y 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.
  - rabidsnail 15y ago
    Has nobody written an installer for windows apps that runs from java web start?
    - OpenAmazing 15y ago
      Adobe Air.
      - robmcm 15y ago
        Yes AIR has a fantastic install process, even installing AIR it's self. With the install badge you could also detect if it was already installed, and launch rather than download. It would shock you how many people would download and install an app every time they wanted to run it. There is no wonder why something like the app store on iOS is used by so many non techy people and so popular. Especially when you think you could install apps on phones before this...

jcapote 15y ago

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

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

patio11 15y 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 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 15y 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.
- patio11 15y 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."

younata 15y 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 15y 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 15y 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?