『現場の「あるある」から学んだ 今すぐ使える「UIデザイン」41の法則』を読んで
今回は、『現場の「あるある」から学んだ 今すぐ使える「UIデザイン」41の法則』という書籍を、株式会社アイスリーデザイン様よりご恵贈いただきましたので、僭越ながらご紹介させていただきつつ、私なりに読んでみた感想や気づきを残そうと思います。
『現場の「あるある」から学んだ 今すぐ使える「UIデザイン」41の法則』の概要
本書は、株式会社アイスリーデザイン社が100以上関わってきたプロダクト開発の中で抽出された「現場あるある」を体系化し、すぐに使える41の法則として整理されています。理論から入るのではなく、誰もが経験する具体的な問題から解決策を提示されているのが特徴です。
例えば、「間違って追加したやつはどうやって削除するの？」「自分が操作した結果はどうなったの？」「エラーメッセージが出たけど、どこを直せば いいの？」といったような、Webアプリケーションでよくあるユーザビリティの問題を、目的別の画面ごとのあるべき姿が具体的なプラクティスとしてまとめられています。
こんな方におすすめ
主にBtoBなどの業務アプリケーションのUIデザインに携わりたいデザイナーの初学者
オーソドックスな業務アプリケーションのUIのプラクティスを知りたい方
業務アプリケーションのUIを評価する基準や指針について手がかりが欲しい方
本書の構成とポイント
本書は大きく2パートで構成されており、架空の業務支援システムを題材に代表的な操作画面ごとに計41個のプラクティスを展開しています。プラクティスの内容は本書を手に取ってご確認ください。
序章 UIデザインとはなにか？
本書の「読み方」
Part1 飲食店の注文管理システムを通じて、業務支援システムUIの基礎知識を学ぶ
アカウント登録① 全体
アカウント登録② 入力
オンボーディング
データ一覧① カードビュー
データ一覧② 操作
インサイト：道具としてのユーザーインターフェース
Part2 従業員の評価管理システムを通じて、複雑な機能を使いやすくデザインするポイントを学ぶ
データ一覧③ テーブルビュー
データ詳細① 閲覧
データ詳細② 削除
データ詳細③ フィードバック
データ新規追加① 入力
データ新規追加② エラー
所感
序章では本書で扱う「UIデザイン」の定義や目的など、前提となる知識や専門用語の扱い方を説明されています。例えば、一括りにUIデザインといっても、業務の効率化を目指すのか、エンターテインメントやゲームとして見た目の華やかさを目指すのか、シーンによってさまざまな表現が求められるため、目的によってあるべきUIは異なります。
そうした観点から、UIデザインとWebデザインの違いや、本書では主に「迷わずに操作できる」などの「使いやすさ」にフォーカスしたUIデザインを取り扱うことを、読者に対する期待値調整として示されており親切だなと思いました。
Part1
Part1では、主にスマートフォンの注文管理アプリの操作を前提にしたUIのプラクティスについて、Do/Don't形式で紹介されています。そのUIがなぜふさわしくないかを解説されており、根拠と合わせて学びやすく紹介されています。個人的には、その背景理論や、Doとして紹介されているものについて、「正解」ではなく手段の一つとして提示し、常に「考えること」を促すようになっていると、最後に触れられているインサイトを通じて、デザイナーとして求められるマインドの習得をより後押ししてくれるような気がしました。
例えば、ボタンの固定表示などでは、実際に重要な情報として固定表示することは多いですが、例えば画面を拡大表示して利用しているユーザーや、画面サイズの小さいスマートフォンを使っているユーザーにとっては、固定表示領域が本来表示させたいコンテンツ領域を圧迫してしまい、かえって使いづらい状況を生み出すこともあります。どの選択肢にもメリット・デメリットがあるよねという ことが伝わると良いなと思っています。
そのほかには、フォームのInputに関するプラクティスが充実しており、ユーザーを不安にさせないための工夫が説明されており、なぜそのUIなのかを理解しやすかったです。時々、構造やコンテキスト次第では課題になりやすいコンポーネント（パンくずリストなど）もカジュアルに紹介されているところは少し気になりましたが、ユーザーにとってなぜそのUIを選定することが良いのか？を知るきっかけとしてわかりやすく、こういう紹介の仕方もあるのだと勉強になりました。
Part2
Part2では、主にPCの従業員評価管理システムの操作を前提としたUIのプラクティスについて、同じように紹介されています。特に、業務システムによくあるコレクションとしてのテーブルビューとシングルビューのプラクティスが充実しており、私がUIレビューのフィードバックで指摘されたことのある項目ばかりで、非常に耳が痛かったです。中でも、削除についてのプラクティスが充実していたのが印象的でした。
削除アクションの取り消しは、この手のシステムだとそんなに簡単に実現できない場合もあると思っています。取り消しができるということは、論理削除含めて何らかの形でデータを残っている前提になりますし、データを履歴のようなバイテンポラルモデルなどで管理していたりする場合は、どのようにデータに反映させるか、または操作やアクセスしたかをどのようにログとして残すかを精緻に制御する必要がある場合もあります。
こうした技術面での制約から単純な論理削除の仕組みでは再現できない場合もあるため、本書でも触れられているようにエンジニアと認識を揃えて協働しながら意思決定することが重要です。
まとめ
いろいろ書きましたが、単にルールを羅列するのではなく、具体的な画面のDo/Don'tを網羅的にプラクティスとして示さえていることで、どうすれば良いかがわかりやすく、UIをデザインすることの最初のとっかかりとして読みやすかったです。
これを読んだ方には実際にUIデザインを実践し、自分自身の経験としてプラクティスを語れるようになってデザイナーとしての熟達に繋がっていって欲しいと思いました。
