【読書メモ】UIデザインの教科書［新版］ マルチデバイス時代のインターフェース設計

マイクロインタラクション に続いて、UI/UX 関係の本ということで「UIデザインの教科書」という本を読みました。
このようなジャンルの本をあまり読んだことがない自分とっては、体系的に学べてかつ基礎的なことは網羅されていると感じました。後半は実例メインだったのでディレクター/デザイナーの人にはもちろんですが、エンジニアにとっても良い内容だったと思います。

概要

• 第1章 デザインの目的とUI/UX
• 第2章 物理的な制約
• 第3章 ソフトウェアの影響
• 第4章 人間の認知特性
• 第5章 階層と構造
• 第6章 ナビゲーションとインタラクション
• 第7章 デザインを形にする

最初にUIとUXの違いなど概念的な説明。次に昨今のデバイス事情と絡めて、どのような制約/特長があるか。
ソフト側がもたらす制約などが書かれている3章くらいまでが全体的な話で、4章以降から実例や具体例が多くなっていきます。

ポイント

2-3：画面の違い

インターフェースに影響を及ぼす最初の要因は、画面までの「距離」です。

デバイスを使うときには適切な距離を保持する必要があり、その距離による影響がデザイン上の制約となります。つまり、画面上の大きさ（実サイズ）と、実際に感じる文字の大きさ（体感サイズ）は、画面との距離によって変化します。

4-2：インタラクションコスト

ユーザーが受ける負担がインタラクションコストであり、ユーザビリティ（サービスの使いやすさ）の良し悪しを測る指標です。

支払う労力には頭脳的なものもあれば、肉体的なものもあります。

これらの両者の労力を合算したものはインタラクションコスト（Interaction Cost）と呼ばれ、サービスの使いやすさ（ユーザビリティ）の指標とされています。

精神的な負荷

アタマが支払うエネルギーのこと
テキストが読みづらい、リンクやボタンがそれと認識しづらい

身体的な負荷

カラダが支払うエネルギーのこと
画面をスクロールする、クリックする、タップする、など

インタラクションコストを下げる方法

人間の認知特性に基づく普遍的なアプローチとして、

• 一貫性
• シンプルさ
• 共通概念

の3つがあげられる。

一貫性

ある規則性にのっとって、サービス内のデザイン要素すべてがその基準にしたがっているということです。

一貫性を保つことのメリットとして、

• デザインの意味や操作をユーザーが予測できるようになる
• 機能の追加や改善が簡単になる
• 信頼性が生まれる

シンプルさ

「明快」あるいは「簡潔」な状態のことを指します。

シンプルにするとは、「単純にする」ではなく「明快にする」 ということであり、何が起こっているかを即座に理解でき、次にどうするか自信を持って決定できる女王体にすることです。

共通概念

私たちの日常生活では、誰もが知っているサインやルールを利用することで、何ができてどう動くかを我々は知ることができます。

インターフェースでも同様で、

• 青文字はリンク
• 星はお気に入りか評価

などもこれまで既知となった共通概念が利用されている例。
これらをうまく持ち込むことで、ユーザーはルールを新しく学習しなおす余計な認知コスト（負荷）を少なくすることもできる。

良かった点

• 書いてある内容が難しくない。（難しい言い回しなどもなく読み易い）
• UIとUXの違い、さまざまなデバイスやOSの説明からはじまり、人間の認知的な習性など、それぞれの章で深くはないが体系的に学べた。
• 図も多く、また新版なのもあり最近のWebサイトやアプリのインターフェイスが参考にあげられていてわかりやすい。
• 例えばUIデザインやインタラクションにおいて「シンプルなほうがよい」とか「アニメーションがあったほうがとりあえず良い」などは根拠があまり語られないまま認識されがちだが、それの「なぜ？」に関して今までぼんやり思っていたことが言語化されているので説得力がある内容だった。
• 5章の「階層と構造」、階層構造をなるだけ区別しないこと、現在地を分かりやすく認知させること
  6章の「ナビゲーションとインタラクション」スクロール自動読み込みの弊害（戻るボタン押下時の挙動）など、日頃考えていたことにも共感ができた。

惜しかった点

特にありませんが、各章の内容に焦点を当てた他の本が出ているはずなので、それぞれ興味を持った分野を掘り上げる前に読む本という感じがします。

例）人間の認知特性に興味を持ったら → インタフェースデザインの心理学 など

まとめ

前回のマイクロインタラクション本よりは実践と絡めて使える知識が多かったように思います。
次はどの本読もうか悩みます。