【技術書記録001】「UIデザインの教科書 マルチデバイス時代のインターフェース設計」の要点メモ
読みっぱなしはもったいないので、読んだ技術書の記録始めます。001のナンバリング通り、3桁を目標に。何年かかるかな。
今回の技術書
UIデザインの教科書 マルチデバイス時代のインターフェース設計
半額セールで買って積んだままだったので崩す。デザイン領域も学んでいきましょう。
１章 デザインの目的とUI/UX
・デザインはアートではない。デザインの目的は、その機能や働きによって何らかの課題を解決することであり、新しい価値を創造すること。
・UI：ユーザーとシステム・サービスとの接点。目に見える客観的なもの。
・UX：ユーザーがサービスを受けるすべての体験。ユーザー自身が受ける主観的なもの。
・UIが担う部分はUXの中核を成す。
デザインという言葉、頭で理解してても直感的にはアート領域で捉えてしまいがち。何か意図を持って作ること自体がデザインなので、私たちは普段からデザインして生きている。UXはさらに包括的な概念で、デザインするのが難しい領域。それを可視化して分析し、デザインしていこうというのが最近の潮流だと捉えている。
２章 物理的な制約
・デバイスは主に「スマホ」「タブレット」「PC」「TV」の4分類。
・PC：細かい操作ができる、縦スクロールに強い、ホバーが使える。
・スマホ＆タブレット：すべての操作に指を使うので、操作対象はある程度大きさが必要。ホバーが使えないので目視での判別が重要。PCより入力面で劣る。
・TV：フォーカス移動のため、フォーカス対象の差別化・操作方向の限定・操作の連続性が重要。音声入力がある。
・画面の大きさ・デバイスまでの距離・画面の向きを考慮してレイアウト・要素の大きさを決める。
章末でAndroidとiOSの違いに触れてるけど、ここらへんの違いは時間経過でコロコロ変わる。スマホが普及→より直感的に要素を識別できる必要性が高まる→マテリアルデザインの提唱って流れかな。ホバーしなくても要素を認識できなくてはならない。現実世界のモノ・理に近づければ認識しやすくなる。
３章 ソフトウェアの影響
・Webサイト：マルチデバイス展開しやすい、環境差異が小さい、インストール不要、操作性・操作スピードが低い、URLと不可分
・アプリ：動作が早く操作が軽快、ジェスチャー操作が豊富、通信量が少量、インストールが必要、OSごとに開発言語・インターフェースが異なる
・サービスの目的に応じて、両者の違いを理解したうえで、どちらで開発するか決定する。
・JPG、GIF、PNG等のラスターデータ画像は解像度の考慮が必要。
・SVG、PDF等のベクターデータ画像は解像度によらず最適に表示される。
・テキストデータも解像度によらず最適に表示される。技術進化や環境変化に影響を受けにくいアクセシブルなデータ形式。
・表示速度等のパフォーマンスは他とトレードオフになることもあるが、ユーザーの満足度や検索結果の表示順に影響するので、考慮が必要。
最初はWebアプリとして開発して、後にネイティブアプリもリリースってパターンが多いと思う。サッと開発できて間口が広いからかな。ただ操作性を追求するとネイティブに軍配が上がる。今後はモバイルアプリの開発にも触れてみたい。
４章 人間の認知特性
・「色」は瞬間的に判断して識別できるが、色数を増やすと困難になる。色数をむやみに増やさない。あとから減らすのは難しい。
・「形」についても瞬間的に周囲と違うものを識別できる。
・「動き」の役割：「注目」「理解」「装飾」。適切に動作のフィードバックをつけることで「理解」の助けになる。
・ユーザーの「精神的負荷（考えたり判断したり、頭が支払うエネルギー）」＋「身体的負荷（操作のための動作）」＝＝ インタラクティブコスト
・「ゴールまでに使う認知的・身体的な負荷が最小になるステップが良い」がインタラクティブコストに立脚した考え方。
・インタラクティブコストを下げる３つのアプローチ：「一貫性」「シンプルさ」「共通概念」
・一貫性：デザインの意味や操作を予測できる、機能追加・改善が簡単、信頼性が生まれる。
・一貫性と柔軟性はトレードオフ。どの程度の柔軟性を許容するか。例外を生みにくいルールづくりが重要。ルールを外れるときは、守るとき以上の効果があること。
・シンプルさ：「単純」ではなく「明快」であること。不要なものをそぎ落とし、伝えるのに必要なものを研ぎ澄ました状態。サービス本来の意図や理解の充分な理解が必要とされる。複雑さは習熟したユーザー、専門性の高いユーザーには有用なケースも。
・共通概念：誰もが知っている標準的なルール。認知・学習コストを下げられる。余計な認知コストを増やさないため、共通概念に逆らうデザインは避ける。
シンプルにするのって難しい。ついつい色々機能とか色とかつけちゃう。本当に何が必要かを分かっていないとできないことだよね。「なんとなく」を避けて、明確に意図をもって最初から設計しておく必要がある。ルールを外れるときもすべて説明できるように。
５章 階層と構造
・アプリやWebサイトは縦・横・前後の立体的構造をしている。
・段階的に変化していくインタラクションは、状態変化を理解するのに有効。
・階層は「広く浅く」がユーザーにとって探しやすく使いやすい。
・ラベリングは「排他的に」名付ける。内容・下階層を特定できる名付け。
・現在地を理解するための「パンくずリスト」と「現在地表記」。
・現在地表記の5つの手段：太さ、色、大きさ、背景、目印。
・「現在地」と「ホバー・フォーカス」の表記は区別しないと認知コストが上がる。
・普遍的なサービス：トップ・一覧・詳細の3層。
・一覧の操作：絞り込み、並べ替え、切り替え。
・関連する情報：付随する情報、同種の情報。
・「分からない」とは、場所か操作が分からないこと。構造と操作において一貫のあるインターフェースデザインが重要。
現在地表記は自分でも実装したけど、明確に5種類を意識して操作を区別・ルールづけしておくと、実装時に迷わないし認知コストも生じない。やっぱり最初からルールと枠組みを決めておかないと。一貫性は大事。
６章 ナビゲーションとインタラクション
・ナビゲーション：ユーザーの目的達成を手助けするインターフェースの集合体。ナビゲーションに対する意識が消えている状態が望ましい。
・コンテンツの量が増えると、ナビゲーションの量も増える。
・画面エリアの大きさ・可変の有無によって、最適なナビゲーションは変わる。常設なのか一時的なのか。入力（操作）手段によっても変わる。
・インタラクション：ユーザーの入力に対する動きや変化を伴ったフィードバック。理解と演出の2つの目的で用いられる。
・「理解」は認知負荷低減が目的。「演出」はサービスの魅力向上が目的。
・マイクロインタラクション（最小単位のインタラクション）の積み重ねが、サービス全体の質を底上げする。
・ヘッダ：ブランド認知を図る、サービス共通のインターフェース。グローバルナビゲーションとメガドロップダウンメニューの扱いが特に重要。
・フッタ：補助的コンテンツを載せる、サービス共通のインターフェース。サイトマップがよく設置される。ヘッダより何でも設置できる。
・パンくずリスト：現在地の明示と到達経路への移動が主な役割。
・ビジュアルの重視、スマホの普及により、１カラムレイアウトが主流に。
・構造を表現するサービスでは、ナビゲーションは左に置かれる。
・記事を主体とするサービス（ブログ、ニュース等）では、ナビゲーションは右に置かれる。
・スライド：画面エリアに制限があるとき、メインコンテンツの表現を強く優先するときに有効。
・オーバーレイ：画面の上にかぶさる垂直方向の割り込み。ポップアップとも。全画面タイプと部分タイプがある。
・インレイ：画面内に差し込まれる割り込み。見出しが蛇腹型に並んでいるものをアコーディオンという。情報を網羅的に見やすい。画面サイズが制限されるときに有効。
・スクロールとページングは直交する。
・スクロールは基本縦に
。縦横混じると使いにくくなる。
・無限スクロールは時事的なコンテンツに適している。ページ遷移に伴う状態の維持が難しいので、使い所は限定される。
・自然なスクロールの方向は、テキスト量・画面の形（比）・要素の形・要素の隙間にによって決まる。
・カルーセル：有限コンテンツのための横スクロール。ビジュアル的なコンテンツの表示に向く。
さりげなく、かつ有効なナビゲーションの実装を心がけたい。マテリアルデザインを採用するなら、要素＝＝物質の動きを再現すればいいってことかな。紙とかボタンとかの動きの再現。ナビゲーションもインタラクションも種類が豊富だけど、それぞれの向き不向きを考えれば自然と選択できると思う。利用意図を明確にして選択できるようにしたい。
７章 デザインを形にする
・スキューモーフィズム：実物イメージや装飾、ボタンの盛り上がりや影といった、現実世界を想起させるデザイン手法。iOSでは6まで採用。
・ミニマルデザイン：デザインから余計な要素を取り除き、シンプルで分かりやすく洗練されたデザインに仕上げる手法。iOSでは7から採用。平面的な装飾、シンプルな配色パターン、大きな余白等。フラットデザインやマテリアルデザインもその一種。
・ミニマルデザインの長所：余計なものを排除して認知負荷を低減、コンテンツそのものを相対的に引き立たせる、読み込み時間の高速化、画面サイズの互換性。
・ミニマルデザインの短所：「知覚的な手がかり」が減る（リンクやボタンが目立ちにくい）、デザインが似通うため没個性化しがち。
→対策：どこが押せるか判別できるようにする（色付け、線・面・影を使う）、色を絞って余白を活かす、ミニマルとシンプルの違いを理解する。
→ミニマルとシンプルの違い：「シンプル」は余計な解釈を生まない明快なデザイン。ミニマリズムの弊害で、要素を削除しすぎるとシンプルな解釈を阻害することがある。良い塩梅が大切。
・デザインガイドラインの目的：部品の再利用性の向上、時間経過に伴う一貫性の保持、各デバイスでの世界観の統一。
・プロトタイプやモックアップは作り込みすぎない。早めに簡素に作り、何度も失敗して質を高めていくことが大切。
・マルチデバイスデザインとは、どのデバイスでも同等の機能を持たせること。インターフェースはデバイスの特性に応じて異なるので、同一ではない。
フラットもマテリアルも、ミニマルデザインという括りで考えれば一緒か。でも個人的には、フラットで認知負荷がかかっていた領域について、マテリアルで直感性を高めて解消しようとしている、いわば進化の系統だと考えている。
余白のデザインってかっこいいけど難しい。何が必要で何が不要か、何度も試作・議論して質を高めていくしかないかな。コラムで心理的な「補償」の話があったけど、時間や費用をかけた分、それに固執してしまうというのはあるあるなので、こだわらずに手を多く動かす習慣を身につけていきたい。
以上、わりとあっさりした本だった。最近では当たり前になりつつある内容だと思うけど、当たり前を徹底するのは難しい。「マイクロインタラクションの積み重ねが、サービス全体の質を底上げする」を信じて、認知負荷を低減させるサービスの開発に努めたいと思う。
