Dropbox スマートフォンアプリのUX/UIデザインを改善するためにDropboxで行った6つのこと

  • 0
  • 0
  • 0
  • 0

スマートフォンで仕事をするときを思い浮かべると、集中力が途切れてしまったり太い指のせいで打ち間違えたり。時には、オンラインの仕事を途中で切り上げてパートナーと夕食を楽しんだり、仲間とランチでおしゃべりしたくなることもあるのではないでしょうか。

こんなイメージが最初に浮かんだあなたが、モバイル ワーク向けソリューションに求めるのは、交流の輪を広げたり、顧客をつなぎとめたりするアプリよりも、仕事がはかどるアプリかもしれません。小さな画面でも集中でき、ちょっと作業するだけで大きな成果が出せるアプリ、つまりスムーズに操作できるアプリです。

私たちはこの 1 年間、スムーズな操作を目指してモバイル アプリの設計を見直してきました。ユーザーの生産性を高め、社交好きなランチ仲間と一緒にいられる時間を増やせるよう私たちが行ってきたことを、ここでいくつかご紹介したいと思います。同じことを目指している人にとって、ヒントや励みになれば幸いです。

目次

  1. プラットフォームが違っても、使いやすいアプリ
  2. すっきりとしたアイコン
  3. エントリ ポイントが見えるようにする
  4. 最初に表示される画面を簡素化
  5. 重要なアクションを文字で表示
  6. 変更内容を一括表示

1. プラットフォームが違っても使いやすいアプリ

Dropbox は 10 年前、デスクトップの OS で共通のパターンを利用することを思い付きました。デスクトップには決まってファイル ブラウザが組み込まれているので、これを活かして、Mac と Windows で同じ「魔法のフォルダ」を体験できるようにしたのです。

最近のモバイル アプリの見直しでは、同じように iOS と Android で考えが一致している操作を利用しました。両方の OS で共通しているパターンを活かして、どちらのプラットフォームでも使えるようにしたのです。スマートフォンを変えても新しい UI を覚える必要がないので、すぐにアプリをフル活用できます。チームで作業するときも、インターフェースの違いに手間取ることなく、別の OS を使用できます。すぐに使えるので、集中しやすい環境になりました。

2. すっきりとしたアイコン

ブラウザの表示(見直し前と見直し後)

アクション シート(見直し前と見直し後)

昨年リリースした新しいファイル アイコンでは、ファイルの見つけやすさを重視して見やすいデザインに改善しました。私たちは、「アイコンをわかりやすくするには、どうしたらよいだろう。どのようにすると種類が違って見えるのか。目をこらさなくてもよいように、輪郭や形をすっきりさせるにはどうすべきか」と、自分自身に問いかけました。こうした問いかけを道しるべにして、最終的にはモバイル アプリのアイコンをすべてシンプルな形に変え、見やすくしました。
このような細かなデザインの工夫を重ねることで、作業を手早く処理したいとき、すぐアイコンに目が行くようになりました。

3. エントリ ポイントが見えるようにする

モバイルはデスクトップよりも画面の切り替えに手間がかかります。マルチウィンドウに対応していないモバイルだと、画面全体に 1 つのアプリしか表示されません。複数の画面を切り替えるとなると、必要なアプリにたどり着くまでの手間は、まるで遺跡発掘のように果てしない作業になります。急いでいるときは、イライラするに違いありません。

そこで私たちは、コメント入力欄をファイル プレビュー画面に直接表示することにしました(以前は吹き出しアイコンをタップする必要がありました)。エントリ ポイントをナビゲーション スタックの高い位置に移動したことで、便利な機能を表示することができ、チーム メンバーにすぐ返信できるようになりました。

4. 最初に表示される画面を簡素化

少し前のことですが、私たちはアプリのホーム画面を新しくしました。目的は、今必要なコンテンツのセクションを一番前に表示して、いつでもそこに移動できるようにすることでした。ところが、この表示方法には問題がありました。画面に表示されるセクションの数が増えたため、見たいセクションを決めるのに時間がかかるという結果を招いてしまったのです(「ヒックの法則」を参照)。
さらに、セクションを縦に並べたため、一番使われるセクション([最近])が、往々にして他のセクションの陰に隠れてしまう結果にもなってしまいました。

最新バージョンのホーム画面では、この問題を解決し、最近のファイルのページがデフォルトで画面全体に表示され、他のセクションにはタブからアクセスできるようにしました。こうすれば、アプリを開いた瞬間から、最も便利な方法でファイルにアクセスできます。

5. 重要なアクションを文字で表示


共同編集者にフォルダを共有するときに、アイコンのデザインを見て方法を推測しなければならないのでは困ります。そこで共有アイコンに代わって、「共有」という言葉がはっきりと表示されたボタンを各フォルダの上部に配置し、共有の操作方法がさらに目立つようにしました。これも、モバイル アプリを使いやすくするための、ちょっとした工夫です。

6. 変更内容を一括表示

Dropbox はユーザーの重要なファイルが保存されている場所です。そのため、ファイルで生じたアクティビティはすべて記録できるようになっています。
この度、新たにリリースされたこのファイル アクティビティ機能によって、「ファイルを更新したかどうか」をチーム メンバーに何度も尋ねなくてもよくなったのです。この機能を使えば、ファイルごとに、行われたアクティビティをすべて把握できます。メール スレッドや Slack のチャットを探し回ったり、作業中のメンバーの邪魔をしたりする必要はありません。

まとめ

小さな画面は、ツールというよりも作業の足かせにしか感じられません。
私たちは、そのストレスの大きさを知っています。モバイル アプリを設計するときに、スムーズな操作を常に頭に置いているのは、そのためです。移動中に目的の情報をさっと見つけて作業を終えることができれば、自分には並々ならぬ力があるような気がするものです。

今回ご紹介した例を参考に、同じ方法を試していただけると幸いです。生産性向上に役立つ方法や、集中力を高めて存在感を示す方法がありましたら、ぜひ私たちに教えてください。

Dropbox デザイン チームについての詳細は、弊社の公式サイトTwitterDribbble をご覧ください。私たちと一緒に世界に魔法をかけたいという方、人材を募集中です。

業界ごとの悩み別!!働き方を革新的に変える方法 21 個

本書ではフリーランス、中小企業・ベンチャー企業、建設業界、IT/メディア業界、教育機関などあらゆる業種でどのように Dropbox を活用して、さらに仕事効率を上げて、働き方を変えているのかを紹介します。

内容

  • フリーランスの活躍の場をひろげる、Dropbox Professional
  • 中小企業やベンチャーのビジネスを後押しする、Dropbox Business
  • 建設現場の働き方を変える、Dropbox Business
  • IT/メディア業界の働き方を変える、Dropbox Business
  • 高等教育機関の研究活動を変える、Dropbox Education
  • Dropbox Business をご活用いただければ、現場のコストを低減しながら、働き方を改善できます
  • Dropbox の特長

全 37 ページに貴重な情報が盛りだくさん!!
貴社またはあなたの仕事効率が飛躍的に向上し、さらに成果を生み出すお役に立てれば幸いです。
下の入力フォームに情報を入力して、今すぐダウンロードください。