【読書】アプリにおける「使いやすさ」とは何か - UIデザインの教科書を読んで

エンジニア夏休み企画に便乗し、積読を1冊消化した感想文です。

読んだ本

『UIデザインの教科書［新版］ マルチデバイス時代のインターフェース設計』

• 「UIUX 勉強 本」とかで検索するとまず間違いなくお勧めされる本。
• 日ごろから「この画面微妙...でも何がいけないのか言語化できない..」と悩むエンジニアには、以下説明文は魅力的に映るはず

使いやすい理由とは何か
本書はUIにおけるデザインの定義から、
ハードおよびソフトによる制約、人間の心理による影響、
そして具体的にデザインを形にする方法までを、
図や画像を使いながら、わかりやすく体系的に解説していきます。

感想

概念・具体的内容のどちらに対しても、「こういうのが知りたかったんだ！！」が詰まった本だった。
「そもそも使いやすい・使いづらいって何？」というモヤモヤを言語化してくれ、かつ実際のデザインで使える知識や例を豊富に提供してくれる。
全くの画面デザイン/フロント初心者にはわかりづらい部分もあるかもしれないが、
多少画面デザインに携わったことのある or フロントエンドの実装に携わったことのあるエンジニアであれば、日ごろ何となく感じている違和感の言語化に役立つ本だと思う。

特に印象深い学び

カッコ内には本書の章番号と見出しを記載している。

デザインの必要性 (1-2:デザインの目的)

• デザインの目的は、その機能や働きによって何らかの課題を解決すること であり、新しい価値を創造すること
• 必要とされる機能が世の中でそこにしか存在しないならば、インターフェースや使い勝手は二の次となる
  (代替手段がなければそれを使うしかなく、何よりもその機能に価値があるため)

UIとUXの関係 (1-3:UIとUX)

• UIは「ユーザー」と「システムやサービス」との接点
  UIをデザインするということは、システムやサービスのIFをより使いやすく設計するということ
• UXは対象を知った瞬間からのすべての体験
  UIを使った時にユーザーの内面に起こる反応がUXとなる。
• しかしUIの改善＝UXの改善とは限らない（そもそもそのUIで実現しようとしていることは、UXの向上につながるのかを検討することが必要）

どうして「使いづらい」のか (4-2:インタラクションコスト)

• インタラクションコスト = ユーザーが受ける負担(精神的負荷 + 身体的負荷)
  • 精神的負荷の例
    • 読む
    • 理解する
    • 覚える
      例）文字の詰まったテキスト、ボタンに見えないボタン
  • 身体的負荷の例
    • スクロールする
    • クリック / タップする
      →デバイスによって負荷のかかり具合が大きく異なることが特徴
• ユーザーにとって、負荷は低いほうが「使いやすい」
• インタラクションコストを下げる3つのアプローチ
  1. 一貫性
  デザインの意味や操作を予測できるようにすることで、認知負荷を下げる
  2. シンプルさ
  状況を明快にすることで、認知負荷を下げる
  3. 共通概念
  既知のルールやサインを利用し、認知負荷を下げる

WEBならではのわかりづらさ：前後関係 (5-1:縦、横、前後）

• WEBサイト・アプリと本の違いは「リンクがあること」であり、縦+横+前後の関係による3次元的な構造であること
  →それゆえに、「わからない」「使いづらい」といったWEB固有の問題が発生する
• 前後関係の表現としては以下2つがありうる
  • ビジュアル
    ex) ヘッダーにナビゲーションを表示させる
  • インタラクション:
    ex) ページ遷移時に新規画面をスライドして画面に表示させる

WEBならではのわかりづらさ：階層関係 (5-2:階層の深さと広さ)

• 階層には「深さ」(=階層深度)と「広さ」(=カテゴリ数)があり、「深さ」と「広さ」は反比例する
• 階層は「浅く広く」の方が、探しやすく使いやすい
  • 階層の上下移動は負荷が高い
  • ラベル(＝階層の名称)がより分かりやすい
• ラベリングは排他的に名付けることで、ユーザーが目的のものを見つける手助けとなる（認知負荷を下げる）
  • スマホ対応等でみられる「…」に種々の機能を詰め込むのは、排他的でないので使いづらい

「わからない」とは何か (5-6:わからないとは何か）

• 「わからない」は以下2つに集約される
  • 「場所がわからない」
  • 「操作がわからない」
  • 構造と操作における、一貫性のあるIFデザインがあれば2つとも解決できる

終わりに

ここで触れた内容は一部であり、実際の本には豊富な図解付きで多くの内容が記載されている。
本記事では「わからないとは何か」までしか記載していないが、本にはその続きがあり、「わからない」に対応するための方法のストックも提供してくれる。
「画面デザインに興味がある、でもいまいち何をしてよいかわからない...」、
「画面作ってるけど、なんかわからんが使いづらい...」
そんな悩みのあるエンジニアにはぜひ本書を読んでもらいたい。