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

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

hanselman.com

200 pointsjoeyespo38 comments

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.

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.

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."

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.

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 ;)

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."

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.

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.

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.

Has nobody written an installer for windows apps that runs from java web start?

Adobe Air.

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...

On Windows the solution for this is ClickOnce[1]. It's actually really well done, but I've only ever seen one program use it - Chrome[2].

[1] http://msdn.microsoft.com/en-us/library/t71a733d(v=VS.100).a... [2] https://www.google.com/chrome

The only problem is that ClickOnce has a .NET dependency, but if you can get around that, you're home free.

I don't think Google Chromium (Chrome) uses the .NET ClickOnce installer but Google's own Omaha software installer

He's referring to a special launcher for the installer that's used on Windows.

Incidentally, I think downloading or saving any kind of file, and then having to "find" it from the entire set of accessible files is one of the worst UI offenses still remaining in modern machines.

I just downloaded/saved something, why do I have to spend time "re-finding it" if I want to access it in another context?

OSX makes this process less painful, as it has the downloads folder in the dock by default, and the icon changes to match the most recent addition.

It is still not optimal, but at least my mom is able to do it now...

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

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.

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.

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

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.

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.

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

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.

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.

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

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.

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.)

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...

Facebook also does that.

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

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

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.

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.

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.

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?

Reply on news.ycombinator.com