学習の内容と経緯

経緯

仕事で UI 設計を担当しており、下記について悩む事があったのでこれを解決したいと思ったことがきっかけ。

• UI 設計から実装を終えた UI について関係者から指摘をいただくことについて、手戻りがきつい修正とそうでない修正がある。この手戻りのダメージを少なくするために段階を踏んで、修正のダメージを軽減する合意方法がないものかという悩み。

面白かったポイントと考察

アプリケーションの構造は共通点があること

アプリケーションには縦、横、奥行き方向が存在するという話について、納得感を得た。 基本的にスマホや PC に表示されるアプリケーションを扱う場合、縦横の次元とページ遷移を表す奥行方向の次元が存在する。 自分はすべてのアプリケーションに対して適応出来るかどうかは実感できていないが、自分が関わっている Web アプリケーションの特性を分析したらこの考えは当てはまりそうだと感じた。

モデルに対して何ができればよいかという共通点

この本に記載してあった、トップ、一覧、詳細という構造はお決まりの構造であるという記述や、一覧画面の絞り込み、並び替え、情報の切り替えはサービスの使い勝手に重要な役割を果たしているという記述から自分なりの気づきを得ることができた。 自分は実装の設計を行っている際に、Model（オブジェクト指向のコンテキストで使われる「Model」に近い文脈）に対して CRUD ベースで考えることが多い。今回この気付きによって、前述に加えて一覧と詳細（index と show。Ruby on Rails のリソースベースルーティングの慣習に習っている。）という次元を設計に加えたいと感じた。 あとは、絞り込み、並び替え、情報の切り替えといった一覧画面のテンプレみたいな機能は抑えておきたいと思った。

インタラクションコストを下げるための工夫について

「シンプル」で「一貫性」のある「共通概念」を利用したインタフェースがインタラクションコストを下げるための方法である旨が記載されていた。この 3 要素の最大公約数をとればインタラクションコストの低い使いやすいインタフェースになると理解した。 このあたりの記述は自分にとって同感出来るものであり、普段から行っていた UI 設計の活動における自分の方針の言語化を助けてくれたと感じた。
自分は UI 設計を行うとき、UI の統一感と既存のメンタルモデルに従うことを重要視している。これはこの本で言う「一貫性」と「共通概念」に当てはまるだろう。「シンプル」についても（性格もあって）自分の中ではすでに根付いていると感じた。
ただ、この本に記載されていた中で、「直感的な UI は人間の認知特性を活かしている」という発想は自分にはあまりなかった。人間の認知特性とはおそらく色彩心理（黄色と黒の縞模様は危険であるみたいな）のようなことだと思っている。これを活用することで注意してほしいボタンや押すことにあまり不安を感じなくて良いボタンなど認知負荷を下げることが出来ると感じた（アクセシビリティには気をつけないといけないが）。

利用頻度とインタラクションコストについて

「利用頻度が低いものはわかりやすさ優先。利用頻度が高いものは操作の手数の少なさ優先。」の考え方について、この視点は今までになかったと感じた。自分はこの本を読んで、アプリケーションを継続的に使用していく上で認知負荷と身体的負荷の合算の最大値が低い UI 設計を行うのが良いと理解した。

アプリケーションの実例から操作の共通点を見つけて UI パーツのカテゴライズをしてみたい

本に書いてあったことではないが、実例をしらべて自分のなかでカテコライズすることによって典型的なパターンが見えてきそうだと感じた。 やはり既存のメンタルモデルを利用した認知負荷の低い UI を設計するためには、実例を調査して既存のメンタルモデルを分析する必要があると感じた。これによって悩みである手戻りコストも改善出来ると感じた。ただ、これは自分が一発で完璧な UI 設計ができれば OK という発想なので、自分以外にも関係者がいるチームでは根本的な解決とは少し違う気がする（前述したが改善出来るとは思っている。）。

Next Action

• 実例から既存のメンタルモデルをカテゴライズし、典型的なパターンを説明できるようにする。
• デザインガイドラインを作成する。
  • その時に下記の項目を入れる
    • 人間の認知特性を活かした UI 設計を行う
    • 利用頻度を参考に認知負荷と身体的負荷の合算値が低い UI 設計を行う

参考文献

(1) 原田 秀司(著):UI デザイン必携 ユーザーインターフェースの設計と改善を成功させるために, 翔泳社, 2022