こんにちは、最近Adobe XDがAfter Effectsとの連携ができるようになって、インタラクション作成にハマっているデザイナーAchanです。
前回はベン・シュナイダーマン氏が提唱した「UIデザインにおける8つの黄金律~前編」の話をしましたので、今日はそれの続きです。
1. エラーに簡潔に対処できるようにしよう
ウェブサイトやアプリを利用する際に、ユーザーがつまづく場合(ヒューマンエラー)があります。まず初めにデザインの段階でエラーが起きないようにすべきではないかと思います。そのためにはエラーの種類を理解することが大切です。
人間中心のデザイン原則『誰のためのデザイン？』(著者ドナルド・ノーマン氏)によると、エラーには大きく「スリップ」と「ミステーク」という二種類があると挙げられています。
① スリップ
スリップとは実行段階の失敗です。やりたいことをユーザーが正しく認識していても、意図通りにうまく行かなかったり、誤操作をしてしまったりすることを指しています。例えば:
- テキストリンクやボタン周りの余白が足りず、隣接したテキストリンクやボタンをタップしてしまう。
- 入力フォームに入力しようとしても見ただけでは操作方法がわからず色々試行し、入力完了まで時間がかかってしまう。
- スマホサイトで横スクロールしようとしたら、スワイプ操作が画面の左端すぎて前に開いていたページに戻ってしまう。
② ミステーク
ミステークとは計画段階の失敗です。ユーザーの記憶や認識の違いによりうまくいかないことを指しています。例えば:
- リンクではない箇所をリンクだと思い、クリックしてしまう。
- 検索機能の代表アイコン「虫眼鏡」を「目」などの見慣れていないアイコンに変えると、ユーザーがそれを検索機能だと認識できずユーザビリティが低下してしまう。
- 汎用のショートカットキーを独自のものに設定してしまうと、ユーザーの意図通りのことができず操作性が悪くなってしまう。
以上、エラーの種類を理解すれば、まずある程度エラーを防げると言えるでしょう。
もちろん、すべてのエラーを防げるとは言えませんが、万が一エラーが発生した場合は優しく、わかりやすいメッセージでユーザーに知らせましょう。肝心なのは何が問題なのか、具体的にどうしたら解決できるのかを瞬時に理解してもらえるにデザインしましょう。
2. アクションを簡単にやり直せるようにしよう
ヒューリスティックスとしては「ヤコブ・ニールセンのユーザビリティ10原則」にも同じことが挙げられています。
ユーザーコントロールと自由度(User control and freedom)
ユーザーはシステムの機能を間違って選択することがよくあるので、その不測の状態から別の対話を通らずに抜け出すための、明確に表示された"非常出口"を必要とする。"取り消し(undo)"と"やり直し(redo)"を提供せよ。
例えば先月リリースされたPhotoshop CC（v 20.0）。リリース前では「取り消し」は汎用ショートカットCommand+Zで1回前の操作にしか戻れず、それ以上遡るにはCommand+Option+Zを押すか、｢ヒストリー｣ツールで戻る必要がありすごく不便に感じていました。今はIllustrator と同様にCommand+Zだけで連続して取り消し操作を行う事ができるようになり、作業効率が劇的に上がりました。(「やり直し」は従来通りShift+Command+Z)
アプリやウェブデザインでは、わかりやすい場所に「取り消し」や「やり直し」があるとユーザーにやさしいです。例えば下記のメールアプリ、メールをうっかり削除した場合、ユーザーの邪魔にならないように「取り消し」を設置することで、ゴミ箱から誤って削除したメールを探す手間が省けます。
3. ユーザーに主導権を持たせるようにしよう
ユーザーに主導権を持たせる上で必要なことは、今何を見ているのか、そして目的を達成するためには何をしなければならないのかを理解させることです。
典型的な例は検索エンジンです。ユーザーが検索エンジンを使ってウェブ上の見たい情報を自分でコントロールすることができます。
また、システムの都合で強要する操作を減らし、ユーザーが常に自分の意思にもとづいて選択、作業を進められるようにするのも大事です。例えば、8月にGmailのデザインがリニューアルされた際に、右下に小さなポップアップの更新予告に気づきましたか？
基本人間が一旦使い慣れたものがいきなりガラッと変わると作業上に混乱をもたらします。さすがGoogle大先生、その問題を意識して、ユーザーに主導権に与えるために色々工夫されたのではないかと思います。
- 自動更新(強制)ではなく更新予告
- 更新後の不安を解消するため詳細まで確認できる
- 更新期間を設けている
- 気になる方が今すぐ更新できるようにしている
さらに、新デザインに更新して、期間内で気にならない場合は以前のGmailに戻すこともできます。
ちなみに、ユーザーに主導権を持たせる設計方法として「オブジェクトベースUI設計」(OOUX と表記される場合もあります)が最近注目されてきています。興味がある方は調べてみてください。
4. 短期記憶の負担を減らそう
短期記憶とは、人間が瞬間的に覚えておける記憶のことで、数十秒から数分で忘れてしまう記憶です。認知心理学の教授であるネルソン・コーワン氏により人間の短期記憶の容量限界は4±1チャンクと発表され、現在は定説となっています。
携帯番号を例にすると、「09067894321」は1つのチャンクとして11個の数字で構成されているため、それ自体を覚えるのは難しいでしょう。しかしこれを「090」-「6789」-「4321」と3つのチャンクに分けると、各チャンクは3か4個の数字になり、記憶に留まりやすくなります。
したがって、情報を整理した上で、人に覚えてもらいたい情報を伝える時には、なるべくシンプルに、3~5個以内にすることが大切でしょう。
まとめ
以上、ベン・シュナイダーマン氏が提唱した「UIデザインにおける8つの黄金律」についての考えでした。画面に表示される内容やレイアウトなどを設計する際に、皆さんの業務の一助になれば幸いです。
前編が気になる方はぜひ下記のリンクをクリック〜 aimstogeek.hatenablog.com
＼\一緒に『明日のはたらくを創る』仲間を募集中です!! /／
919.jp
