DropboxのUXデザイナーが行ったゲリラユーザビリティテスト


海外の2014年まとめ記事の中に、DropboxのUXデザイナーが自身のユーザビリティテストの模様をブログで発信しているものがありました。 他人のプロセスを知るのは勉強になり、せっかくなので日本語で残してみます。

※実際にDropboxのサービスをPCで開きながら読むと分かりやすいです。


■ テストの目的

Dropboxの「写真」ページの課題を明らかにすること

db-guerilla01

■ テストの内容

何をテストする?:DropboxのWebアプリケーション

誰に?:既存のユーザーで写真をアップしてる人

どこで行う?:コーヒーショップの外を通りすがる人に

→サンフランシスコのカフェの外で、行き交う人にゲリラ的にインタビューしていたみたいです。
確かに、日程調整してインタビューするよりフランクな状態を作れるので率直な意見を吸い上げることができそう。

■ テストの項目

1:写真をアップロードしてもらう

2:アップロードした写真を確認してもらう

3:写真をシェアしてもらう

■ テストの経過

テストの経過は、タスクの進行毎にノートに記入し、課題だと感じた部分はポストイットを使って分かりやすく強調していました。
テストが終った後は、ポストイットをグルーピングして課題を明確にしています。色はインタビューしたユーザー毎に分けています。

db-guerilla02 db-guerilla03

■ 2つの重要な課題を発見

①ユーザーはサムネイルをクリックすると写真が大きくなることを期待していた

タスク2の「写真を確認する」時に、半分の人がサムネイルをワンクリックしていたようです。

「写真」の画面で、サムネイルをダブルクリックすると写真を拡大して確認できるビューモードに移るのが現状のDropboxのUIですが、想定通りに操作するユーザーは多くはなかったという気づきがありました。

さらに、ワンクリックしたユーザが写真を確認するために次に行った行為は、ダブルクリックするのではなく、ファイルリストのページまで戻って、写真の拡大をしていたみたいです。

db-guerilla04

→実際にWebのDropboxの「写真」を使ってみると分かるのですが、ワンクリックで写真を拡大するように思えてしまいます。他のサービスを創造しても、ダブルクリックで拡大するサービスもないですからユーザーに想起しにくいアクションなのは僕も感じました。

②ユーザーは”写真”がDropboxのディレクトリだと思っていた(が、実際は違う)

ユーザビリティテストで以下の2つの反応(A,B)があったようです。

A : 写真のアップロードボタンがどこかわからない

→”写真”はアップロードしたデータを管理する「フォルダ」の役割はなく、ただのアップした写真を確認する場所として設計していた。が、それがユーザーには伝わっていなかった。

B : たった今作った「アルバム」がどこにあるか分からない!

→アップロードした際に「アルバム」を作ったユーザーは、メイン(”ファイル”)の管理画面でアルバムさがしてしまい、見つけることができなかった。

db-guerilla05

AとBから、”写真”の画面が、アップロードしたファイルが管理されているディレクトリして誤って認識されていることが浮き彫りになったようです。

以上の2点が”写真”の画面の取り組むべき課題としてユーザビリティテストから浮き彫りになりました。

確かに、実際に使ってみるとどちらも分かりづらかったポイントです。

特に”ファイル”と”写真”の違いは分かりにくい。サイドバーに同じタイプの導線として存在しているのがいけないのでは。。。と思ってしまいます。

■ デザインの提案

上記の課題を受けて以下のようなワイヤーを考えました。意識したポイントを書いていて分かりやすい。

db-guerilla06

1:ワンクリックで写真を拡大できるようにした

ワンクリックで写真を拡大できるようにし、ホバー時にチェックボックスを出すUIを提案。

db-guerilla07 db-guerilla08 db-guerilla09

1の改善はすごく分かりやすい。

数字は分かりませんが「写真を選択するアクション」と「写真を拡大するアクション」のどちらがユーザーにとって使用頻度が高いのかも考えてプライオリティは付けるべきかなとは思いました。

2:”写真”とアルバム機能の変更

変更点は以下

・パンくずをつけた。
→メインフォルダのサブとして存在することと、どこに行けば写真がアップロードされているかを示すため

・アルバムは「コレクション」に名称を変更。 →他のサービス(Flickrなどの写真サービス)でも見慣れている単語に変更

・”FOLDERS”と”COLLECTIONS”を区別することで、リアルファイルとファイクとを識別できるようにした。

db-guerilla10

2はまだ解決したという印象は持てませんでした。(Mediumの記事中でもコメントで「分かりにくい」という意見が見れました)

“ファイル”と”写真”の違いを出すのであれば、もっと根本的に解決策を考えないと行けないかなと思いました。


【今回の記事を読んで】

誰もが知ってる一流サービスのデザイナーの思考を除けるという意味でかなり刺激になりました。

非常に無駄無く、目的を絞って実行をしている印象でした。インタビューを開始してアイデアを出すまでどれぐらいの時間を使っているのか気になります。(多分1~2日ぐらいな気がしてます)

またオフィスに籠ってるのではなく外に出てリアルのユーザーに直接聞きに行く姿勢はただただすごいなあと。思いました。これが1番印象に残りました。

ブログの内容が完結で分かりやすかった点も真似したい。


英語の勉強がてら2015年から英語のデザイン記事を週1ぐらいで読んでいこうと思っていますが、かなり勉強と刺激の宝庫だなと感じています。

今回だとMediumの記事でしたが、ブログを書くことでFBをもらえたり、賞賛し合えたり、良い生態系があるんだなあということも知れました。もっと世界レベルの感覚を掴んでいきたいです。

おわり

Francine let me share her post in japanese, thank you!!

※本文と意味が違う部分があった際は教えていただけると助かります m( _ )m

このブログは A Guerilla Usability Test on Dropbox Photosの日本語訳です。