Dropbox – Share Experience

A user-centered approach to simplifying the share feature

Information

Class

  • Human-Computer Interaction
  • Fall 2012

Tasks

  • Heuristic Analysis
  • User Research
  • Low-Fidelity Prototype

Goals

  • Reduce cognitive-load
  • Simplify task flow

During a course in Human-Computer Interaction, we were tasked to redesign one aspect of an interface, in our case: Dropbox. Upon conducting a heuristic evaluation, we noticed there was a redundancy of sharing options for sharing links (“Share link”) and inviting others to folders (“Invite to folder”).

Dropbox’s share buttons were highly dependent on icons to convey tasks. There were four similarly labeled share icons, making it difficult to guess subtle differences between their functions. Although icons are space efficient on the page, they do not always convey their meaning and operation to the user.

I focused on improving the usability of the share function by simplifying its task flow.

Dropbox Screenshot

The icons outlined in green indicate the multiple sharing options available to a user.

dropbox-heuristic-evaluation

To simplify the task flow, I encapsulated all the share functions into a single button labeled “Share”. The share button would contextually detect which function the user wanted to perform based on their selection: if a user wanted to share a file or a folder, the share button would predict the user’s intent based on the selected item type, and execute the appropriate task flow.

Low-Fidelity Mockup

All share functions are encapsulated into one bright blue button labeled “share”.

dropbox-low-fidelity-mockup

To reduce redundancy further, we merged “share link” with “share”, since “share link” is simply another way to share anyways. It simply displays as another option in a sharing window. The link is provided, pre-highlighted in a text box for the user to copy.

Low-Fidelity Mockup

“Share link” is merged into the same dialogue box as “Share”.

dropbox-low-fidelity-mockup-2

Takeaway

This class was my first introduction into interaction design and user experience design. Rather than building an experience from the ground-up, I learned how to understand and evaluate existing interfaces and iterate following a user-centered approach. The course taught me a number of theoretical principles and useful techniques that I steadily used throughout my studies including heuristic analysis, gestalt principles, design research methods, design ethics, and rapid prototyping.


Next Project