初めてでも使いやすいUIを設計するためには？ (誰のためのデザインを読んで)
「誰のためのデザイン？」を読みました。
そこで、初めてでも使いやすいUIを設計するにはどうしたらいいのか？2回目以降はもっと使いやすいUIを設計するにはどうしたらいいのか？という観点で、内容をまとめていきたいと思います。
ユーザの目的をちゃんと達成できるUIにするために
初めて使うにしても、2回目に使うにしても、ユーザの目的を達成することがUIには求められる。
Amazonアプリだったら、ユーザが欲しいものを購入できるようにしたり、Airbnbだったら、宿泊先を見つけて予約をできるようにするなど。
こういったアプリで、初めて使うユーザでも、目的をうまく達成できるようにするにはどういったことが必要なのかはUIを設計する上で重要になってくると思われる。
また、初めて使う時に使えるようにするだけでなく、2回目以降使う時にはより使いやすく操作できるようにするのも大事だと思う。そのためには、初めて使ってみた後に、ある程度使い方を理解できるようにすることが必要になってくると思う。
というわけで、この二つの観点と誰のためのデザイン？を照らし合わせながらまとめていきたいと思います。
・初めて使うユーザが、操作に迷わずに利用できるようにする
・初めて使ってみた後に、ある程度使い方を理解する
初めて使うユーザが、操作に迷わずに利用できるようにする
どんなに有名なアプリケーションやサービスであっても、初めて使う時には使い方を知らない。
なので、使い方を知らなくても迷わずに使えることを前提に、UIを設計しないといけない。
そこでまず、使い方を知らなくても使えるようにUIを設計するにはどうしたらいいのかを「行為の7段階理論」から考えてみる。
行為の7段階理論
人が何かの行為を行う時に、次の7つの段階があるらしい。
1. ゴールの形成
2. 行為のプラン
3. 行為系列の詳細化
4. 実行
5. 外界状態の知覚
6. 知覚したものの解釈
7. ゴールと結果の比較
要は、「何をするべきか」を考え、「実行」し、実行した結果を「知覚、解釈」してゴールにたどり着けたかどうかを判断する。
7段階だとちょっとややこしいので、以降は次の3段階として考えることにする。
1. 何ができるのか、何をするべきかを知る
2. 行為の実行
3. 実行結果の評価
アプリケーションを操作する際にも、この行為の段階が実行されていると考えることで、使い方を知らなくても使えるUIを設計するために必要になってくる部分が見えてくると思う。
ここで注意したいのが、ゴールに対して、この3ステップではないということ。最終的なゴールにたどり着くまでに、細かいタスクをいくつも行うケースが多いと思う。その細かいタスクごとにこの3ステップが繰り返し行われていると考える。
特に「3. 実行結果の評価」が次のタスクの「1. 何ができるのか、何をするべきかを知る」に繋がってくる。
ここで、Airbnbのモバイルアプリを例に、この行為の3ステップがアプリ操作時に繰り返し行われていることを確認してみたいと思う。
Airbnbで考える、行為の3段階のサイクル
ゴール：「沖縄県那覇に3人で泊まれる宿泊先を見つける」
下記に操作の流れを記述していくが、目的は行為の3段階が繰り返されていることを確認することなので、あまり細かいところは飛ばす。なお、[ ]内の数字がどの段階を示す。
[1]: topに検索ボックスがあるので、検索できることを知る
[2]: 那覇で検索の実行
[3]: 宿泊先一覧が表示され、検索が成功したことがわかる
[1]: 検索ボックスの下に「人数」と「日付」のボタンがあるので、そこから、人数と日付を指定できることを知る
[2]: 人数と日付の指定を実行
[3]: 絞られた宿泊先一覧が表示され、人数と日付で絞られたことがわかる
[1]: 宿泊先一覧が表示されているので、この中から宿泊先を選べばいいことがわかる
[2]: 宿泊先の選択
[3]: 宿泊先の詳細が表示され、選択に成功したことがわかる
[1]: 詳細ページにいくと、画面の下に常に「予約する」ボタンがある。そこから予約を行えばいいことがわかる。
[2]: 予約の実行(ここでだいぶはしょります)
[3]: 予約の完了メッセージが表示され、予約が完了されたことがわかる
このように、「何ができるのか、何をするべきか」を知り、「行為の実行」が行われ、「実行結果を評価」し、次にまた「何をすればいいのか」と繰り返されていることがわかる。
実際に操作してわかるのが、操作を進めていった時に、「次に何をすればいいのか」、「どういうことができるのか」をUIが伝えてくれるため、初めて使っても迷わず予約までたどりつくことができる。
つまり、初めて使う時に迷わず操作できるようにするためには、その画面で何ができるのか、何をすればいいのかを伝えることが重要なんじゃないかと思う。
何ができるのか、何をすればいいのかを伝えるために
これをうまく実践するには、誰のためのデザイン？で出てきた、下記のキーワードが大事になってくる。
・アフォーダンス
・シグニファイア
・自然な対応づけ
・制約
・フィードバック
これらをうまく活用していくことで、何ができるのか、何をすればいいのかをユーザに伝えることができるのではないかと思う。
誰のためのデザイン？に書かれていたことは、「情報を外界におく」。
どういうことかというと、製品やUIから、今システムがどういう状況なのか、何をするべきなのか、何ができるのかを知覚、解釈できる状態にするということ。
そうすれば、初めて使う場合でも、ユーザは迷わずに操作できるのではないかと思う。
初めて使ってみた後に、ある程度使い方を理解する
次に、初めて使ってみた後に、ある程度使い方を理解させるためにどうすればいいのかを考えてみる。
前述したような、行為の段階をそれぞれ考えいくというのを意識しすぎると、アプリの全体としての使い方が理解がしずらくなってしまう場合があると思う。木を見て森を見ずってやつ。
そうなると、ユーザは使うたびに毎回、UIから何をすればいいのかを知覚、解釈しないといけないので煩わしくなってしまう。
そこでキーワードになってくるのが、概念モデルだと思う。
優れた概念モデルを設計することで、ユーザがアプリの使い方を理解しやすくなる。使い方が理解できると、頭の中に自然と入ってくるので、次回以降使うときに頭の中の情報を利用しながら操作することができる。
優れた概念モデルを考える時のヒントとして、OOUIの考え方が参考になるのではないかと思います。
(↓参考になった雑誌、記事)
まとめ
これまでの話をまとめると、外界にある情報と頭の中の情報を組み合わせて使えるようにすることで、初めて使う人も繰り返し使う人も使いやすいUIになるのではないかと思う。
外界に情報をうまく配置するポイントとして、「何ができるのか、何をすればいいのか」がそのUIから知覚、解釈できるかどうかを基準に考えればいいのかなと思う。
頭の中に情報が入りやすいようにするポイントとしては、優れた概念モデルを設計し、初めて使ってみた後に使い方をある程度理解できるようにする。
また、考える順番としては、まず優れた概念モデルを考え、ユーザがアプリ全体の操作を理解しやすいようにする。
その次に、操作の各ステップで、ユーザがUIから情報を知覚、解釈できるように、アフォーダンスやシグニファイア、自然な対応づけ、制約、フィードバックをうまく使っていくのがいいんじゃないかと思う。
さいごに
誰のためのデザイン？のなかのスリップとミステークの部分もとても参考になった。ここを考えることで、「行為の実行」部分をよくしていけるんじゃないかと思う。
その辺を「教養としての認知科学」という本と一緒にまとめられたらいいなと思う。
この記事が気に入ったらサポートをしてみませんか？