はっきりと分かるようにデザインされたUIは、最高のUI

Post on:2019年11月14日

はじめに

フランスの哲学者ヴォルテールの言葉に「常識は、それほど常識ではない」とあるように、常識であることを理解するためには、それを知るための十分な経験が必要です。その時点で、ある選択が常識となり、それを検討する必要はないでしょう。

デザインにおいて常識を語るとき、今では当たり前だと思われていたことでもデザイナーがそれを最初に手がけた時には当たり前ではなかったかもしれません。

デザイナーは長い間、プロダクトをできるだけ使いやすく、ナビゲートしやすいものにしようと努めてきました。しかし、プロダクトの機能を強調するために、ユーザーのニーズと課題を理解し反復するのに時間がかかりました。

下部のナビゲーションバー = 使用率の増加

GoogleのプロダクトディレクターであるLuke Wroblewskiは、デザインの原則「Obvious Always Wins（明白さは常に勝つ）」を支持し、明白ではっきり分かるインタラクションの方が巧妙なインタラクションより優れていることをデザイナーに認識させました。

ハンバーガーメニューの中に隠されているナビゲーションからより見やすい下部のナビゲーションバーに切り替えたアプリと、全部が見えていたナビゲーションから半分を隠した状態に切り替えたアプリのユーザーエンゲージメント統計を分析した結果、このトレンドを見つけました。

「ナビゲーションはアプリで可能なことを示すもので、ユーザーは何が可能か見える状態でないのであれば、そのアプリで何ができ何をすべきなのか知ることができない」と、Wroblewskiはインタビューで私に語りました。

可視性を高めると、使用率が向上します。
プロジェクト管理アプリのRedboothではハンバーガーメニューから下部のナビゲーションバーに切り替えたところ、セッション時間は70%増加し、デイリーアクティブユーザー数は一夜にして65%増加しました。以前はハンバーガーメニューに表示されていなかった機能を、ユーザーが見つけられるようになった結果です。

Before: 以前はハンバーガーメニューを使用していました。
After: 下部のナビゲーションバーに切り替わり、アクティブユーザーは65％、セッション時間は70％増加しました。

逆に、Wroblewskiは主要機能を見つけにくくすることで、ユーザーのエンゲージメントが減少することも発見しました。Polarアプリではナビゲーションのデザインをセグメント化されたコントロールメニューからトグルメニューに簡素化し、デザインを「よりクリーン」に見せましたが、主要機能がユーザーに継続的に見えなくなったため、エンゲージメントが低下しました。

Before: 以前はコントロールメニューの上部に3つのタブが表示されていました。
After: 「Top」をトグルメニューに変更したら、毎日のエンゲージメントが減少しました。

下部のナビゲーションバーとアクセシビリティ

デザインを分かりやすくすることには、デザインをより使いやすくするという副次的な利点をもたらす場合があります。人間工学的には、大きなスマホやタブレットを使用しているユーザーは片手でスマホを持ち、左上にあるハンバーガーメニューをタップするよりも、下部のナビゲーションバーをタップする方が簡単です。

また、アクセシビリティの観点からも下部のナビゲーションバーは重要です。GoogleのブランドマネージャーであるAubrie Leeは電子メールによるインタビューで、筋ジストロフィーやその他の運動障害を持つユーザーは画面の上部に常にアクセスできるとは限らないと述べました。「これはゲームチェンジャーです。障害者にとって、テクノロジーは単なる利便性ではなく、制限と自立の違いであることが多い。下部のナビゲーションバーがあると、多くの人にとって非常に楽になるだろう。」

「明白な」アイコンが「一般的な」アイコンとは限らない

明白で分かりやすいデザインとは、コンポーネントの位置だけでなく、ユーザーがUIのアクションやオプションを理解するのがいかに簡単かということです。例えば、すべてのユーザーがアイコンやシンボルを理解できるわけではありません。$記号は、アメリカ・カナダなどの国ではドルまたは通貨を意味しますが、世界共通で通貨を表現する記号ではありません。

フロッピーディスク搭載のコンピューターを使用して育った人であれば、フロッピーディスクが何であるか自動的に理解し、フロッピーディスクのアイコンが「保存」を意味することを認識する可能性が高くなります。しかし、21世紀にコンピューターを使い始め、フロッピーディスクを見たことがない人にとっては、フロッピーディスクの保存アイコンはスマホのSIMカードに見えるかもしれません。SIMカードに見えるユーザーにとっては、フロッピーディスクの保存アイコンの意味を理解していない可能性があります。

左から順に、アップロード、削除、ボイスメール、スピーカー、保存、クレジットカードのアイコンは一般的ですが、テキストラベルとペアになっていないとユーザーを混乱させる可能性があります。

一見して分かりやすいデザインにするために、以下の2点を考慮してください。

アイコンにテキストを添える

Google I/OのDesigning Great Apps for New Internet Usersの中で、YouTube GoのGaren CheckleyとTracy Lindsay Chanはアイコンとテキストの組み合わせは、アフォーダンスが何をするかをユーザーが覚えておくために重要であると言っています。例えば、「受信」ボタンにはユーザーがボタンをタップしたときに何が起こるかを明確にするために、テキストとアイコンの両方が必要ということです。

テキストとアイコンを組み合わせることで、プロダクトのアクセシビリティも向上します。ボタンにテキストとアイコンがあると、ユーザーはページを流し読みした際にもボタンの意味を理解しやすくなります。

Google翻訳のボックスの下部にあるアイコンにテキストを組み合わせたところ、そこにある手書き機能の使用が25%増加しました。
参考: Designing the UI of Google Translate

手書き機能は何年も前からあったにもかかわらず、新しい機能だと思うユーザーもいました。テキストがなければ、ユーザーは機能の価値を理解できないため、その機能を使用しないでしょう。

Before: 以前はアイコンのみが表示されていました。
After: アイコンにテキストを追加すると、その機能の使用が25%増加しました。

アイコンのラベル、テキストボタン、ヒントテキストを追加する

「アップロード」アイコンは、クラウドサービスにコンテンツをアップロードすることに慣れている人にとっては意味が分かるかもしれません。しかし、一部のユーザーにとっては、自分のコンピューターからクラウドの写真ストレージに写真を追加する際に、「アップ」とか「ダウン」の概念がないかもしれません。

Googleフォトのデスクトップ版のユーザーが写真を検索して新しい写真をアップロードする方法を明確にするために、Googleフォトのチームはアップロードアイコンに「アップロード」というテキストボタンに変更し、検索ボックスに検索ヒントを加えました。YouTube GoとGoogle翻訳のテキストとアイコンの組み合わせと同様に、Googleフォトでもアイコンの下に「フォト」「アルバム」「アシスタント」「共有」というテキストを加えました。

テキストが追加されたアイコン、テキストボタンに変更されたアイコン、検索ヒントの追加により、Googleフォトの使いやすさが向上しました。

他のUIをコピーしても、明白なデザインは保証されません

何か明白なものを作ることが、あなたのプロダクトにとって最良の選択であることを意味するものではありません。他のアプリ、特に人気のあるアプリを真似して、良いデザインだと思い込むのは簡単に思えるかもしれません。特定のデザインパターンやコンポーネントを使用することを選択した背景に、どの程度の調査があればよいかは分かりません。

明白なものを見つけるには、問題点を見つけること

長期にわたる使用状況のデータや調査する専門家を雇わずに、デザイナーはどうやってユーザーにとって明らかで常識であるものをどのように理解すればよいでしょうか？ Wroblewskiの言葉に「痛みに近づけば近づくほど、痛みを解決することに関心が集まります」とあります。抱えている問題を解決するためにプロダクトを作っているのであれば、そのプロダクトの中核的な機能とそれらがどのような問題を解決するのか知っている可能性があります。

もしあなた自身がターゲットユーザーではない場合は、ユーザーを観察し、学習し、反復する必要があります。膨大な調査や予算、さらには大量の使用状況のデータは必要ではありません。潜在的なユーザーや既存ユーザーと話しをして、彼らが抱えている問題を見つけたり、あなた自身がユーザーであると想像することも含まれます。

Wroblewskiは、高速反復テストおよび評価（RITE）テストを推奨しています。「毎週、私たちは取り組んだものを何でも取り、それを人の前に置いて、彼らがそれを使おうとするのを見ています。常に、顧客または潜在顧客に没頭しています。デザイナーが『この人と一緒に座ってみたら、わたし達のデザインが彼をダメにしたので、彼が望んだことをすることができないのを見ました』と言う時、それはとても直感的で、とても現実的だ」と言っています。

ユーザーと頻繁かつ定期的に時間を過ごすことで、デザインがより適切で「明白」になります。問題を理解して初めて何が「明白」であり、「常識」であるかを明確に理解し、使いやすいデザインを作成できます。