[デザイン]WWDCカンファレンス「Discoverable design(発見可能なインターフェース)」要約してみた

先日行われた、2021WWDCカンファレンスのDiscoverable design(発見可能なインターフェース)について見た内容を備忘録として残しました。
原文英語なので読むのめんどくさい、大体でいいから内容を教えてくれっていう方にもぜひどうぞ。
※自分なりに解釈して意訳しまくっているので、解釈が間違っていたらごめんなさい(笑)

「発見可能なインターフェース」とは

「発見可能なインターフェース」とは、ユーザーが画面を見て何も触っていない状態で、何ができるのか、どのようなことができるのかがわかることを言います。
どんなに素晴らしい機能も、存在自体が認知されていなければ意味がありません。

オンボードよりも体感させて学習させろ

まずは、チュートリアルやオンボードなどでユーザーに機能の存在を知ってもらいましょう。
ですが、正直なところ、オンボードはスキップされてしまうことが多いでしょう。
仮に1つ1つ画面を読んでくれたとしても、全て覚えてられるユーザーはいないでしょう。
チュートリアルを読むよりも、実際に触りながら使い方を学習する方が、ずっと楽しく効果的であると言えるでしょう。

発見可能なインターフェースのための5つの基本

今回は、機能をより発見されやすくするための5つの基本をご紹介します。

1.機能に順位をつける
2.視覚的な手がかりを与える
3.ジェスチャーを使う
4.行動に合わせてコンテンツを整理する
5.ユーザーにコントロールできるようにする

1.機能に優先順位をつける

まず、機能に優先順位をつけて、最も重要なものを目に見えるようにします。
重要な機能は、すぐ目につくようにしましょう。
すべての機能をあれこれと1つの画面に詰め込むのではなく、重要な機能に優先順位をつける必要があります。

重要でない機能(「会社概要」「設定」など)は、たどり着くまでに多少のナビゲーションがあっても構いません。
重要でない機能すべて1つのメニュー内にまとめてしまいましょう。

ただし、ハンバーガーメニューは使うべきでありません。
なぜなら、ハンバーガーメニューを閉じた状態では、中に何が入っているのかわからないからです。
3本の線だけでは、中にどんな機能があるのか何も伝わりません。

ハンバーガーメニューのように、ミニマルすぎるUIは、ユーザーが何をすれば良いかわからず戸惑ってしまい、結果として使い勝手が悪くなってしまう可能性があります。
なぜなら、ミニマルにするために機能を隠すことによって、ユーザーが機能を見つけられないというリスクが高まるからです。

そこで、アプリの下部に表示され、素早くセクションを切り替えられるタブバーナビゲーションを採用すると良いでしょう。
その方が、アプリの最も重要な機能をすぐに確認できるからです。

また、すべての機能を1つのスペースに詰め込んでしまうとどうなるでしょうか？
今度は見た目が煩雑になってしまったり、タップ可能領域が狭くなってしまったりして、求めている機能を見つけづらくなってしまいます。

すべてを最初に見せることが重要だと考えるデザイナーもいれば、すべてを隠してすっきりさせたいと考えるデザイナーもいるでしょう。
両方を両立させることは非常に難しいのですが、何を優先させるべきかのバランスがとても重要なのです。

2.視覚的な手がかりを与える

2つ目の基本は、よく知っている言葉やシンボルを使って、視覚的な手がかりを与えることです。

ユーザに、その機能はどう言ったアクションが想定されて、どのように利用されるかなどを理解してもらうには、視覚的な手がかりが有効です。

ちなみに、検索バーでは「ブランクページ問題」というものがあります。
ユーザーは、検索アイコンや検索バーの使い方自体は十分理解はしていますが、検索方法を知らされていないため、何を書けばいいのかわかりません。
人は、突然真っ白な画面を見せられると、優柔不断になり、何をして良いのか戸惑ってしまいます。
これをブランクページ問題と呼びます。

これを防ぐために、ユーザーに行動のヒントを与える必要があります。
例えば、プレースホルダに入力例を提示したり、必要なタイミングでボタンやアイコンが表示するなどして、ユーザーに教えていくようにしましょう。
このように、ユーザーが元々持っている知識を考慮し、必要なタイミングで、必要なアクションを起こしてもらえるよう意識してデザインしていきましょう。

3.ジェスチャーを使う

3つ目の基本は、ジェスチャーを使ってスムーズに操作できるようにすることです。
アプリでジェスチャーを活用すると、個別のタップ操作のみよりも、より使いやすいアプリになります。
ただし、ジェスチャーによる機能は、目に見えないため、すぐには発見できないかもしれません。
そのため、原則として、世の中にすでに広まっているジェスチャーを採用しましょう。(タップ、スワイプ、長押し、パン、ピンチ、回転)
もし新しいジェスチャーを開発する場合は、現実のインタラクションを真似るようにしましょう。
例えば、Apple Pencilを使った「Scribble」では、削除したいテキストをスクラッチで消すことができます。
このように、現実世界でも同じように動作し、親しみやすいインタラクションを実現しています。
さらに、アニメーションを使ってジェスチャーを示唆すると、ユーザーがジェスチャーによる機能を発見しやすなり、機能を習得してくれます。

4.行動に合わせてコンテンツを整理する

4つ目の基本は、人々の行動に合わせてコンテンツを分類することです。
人々のモチベーションや自然な行動に合わせて、アプリのコンテンツをカテゴリー別に整理しましょう。
さらに、食などの個人的な好みなどが影響するコンテンツの場合は、機械学習でのレコメンドエンジンを使ってパーソナライズ化すると尚良いでしょう。

5.ユーザーにコントロールできるようにする

5つ目の基本は、パーソナライズ化されたコンテンツを自分でコントロールできる感覚を伝えることが大切です。
ユーザーにとって価値のないコンテンツを削除したり、パーソナライズ化されたコンテンツを修正したり、編集したりすることができるようにしましょう。

最後に、アプリをデザインする際には、ユーザーの視点で何が重要なのかを理解するようにしましょう。
このアイコンをユーザーが知っているのか、現実の世界でこのシンボルマークを理解しているのか？ユーザーが何を知っていて、何を知らないのかを考えて見てください。
そして、作ったデザインは人に触ってもらい、フィードバックをもらいましょう。
優れたデザインには試行錯誤がつきものです。

感想

以前読んだオライリーのUI心理学の本にも同じようなことが書いてありましたが、頭では理解しているけど、実際これら全て完璧にできてます！とは正直言えません。。（特にユーザーテストなんてほとんど出来てない…）

特に、ハンバーガーは、あれもこれも詰め込みたいマンになっているディレクターさんが好んで使おうとうするケースが多いので、どう説得しようかと悩みの種だったりします。（個人的にはハンバーガーはダサいと思ってる派）

社内政治だったり、工数や売上など状況次第では、教科書通りにならないことは重々承知だけど、少なくとも誰のために作ってるのかはちゃんと意識すべきだと思います。
作ってる当人達がよくわかってない仕様なんて、ユーザーにわかってもらえるはずないんですよね…。

あと、このコンテンツ売りたいからとりあえずトップページにどーん！っていうの本当にやめて欲しい…です(笑)他にも、本来はポップアップとかも出すタイミングってかなりセンシティブだと思うのですが、とりあえず訪問する度ポップアップどーん！って出そうぜっていう考え方とかも、ユーザーにストレス与えてると思うのでやめた方がいいんじゃないかと思います。

制作しているとだんだん麻痺ってUIの不自然さに気づかなくなってしまうことも多いのでほんとう気をつけたいです。

↓個人的に興味ない話は吹き飛ばしてるので、ご興味ある方はちゃんとした原文をどうぞ。

▼引用：WWDC2021基調講演「Discoverable design」https://developer.apple.com/videos/play/wwdc2021/10126/