LoginSignup
1

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-09-04

エンジニア夏休み企画に便乗し、積読を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つとも解決できる

終わりに

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1