概要
UI/UXについて無知だなと感じ「UIデザインの教科書」を読んでみることにしました。こちらの書籍の構成は、「デザインの目的」「物理的な制約」「ソフトウェアの影響」「人間の認知特性」「階層と構造」「ナビゲーションとインストラクション 」「デザインを形にする」となっており、前半の「人間の認知特性」までで学んだことをアウトプットします！
学習の意図・目的
大きく2点あります。
1点目は、営業をしていた時期に、いかにお客さまの気持ちを引き出す言葉を使えるかが大事であることを学び、当社でのアプリ開発でもUI/UXを意識することで、ユーザーの気持ちを引けるようになるのでは？と考えるようになったので学習した。
2点目は、実装で細かい手直しをさせていただいている際も、ユーザーの行動を考えて修正できればいいと感じ早めにUI/UXを学んでおいた方がいいと感じた。
【質問】
UIとUXって、それぞれ「主観」と「客観」どちらに分類されるでしょうか？
1章：デザインの目的
デザインの目的は、
「見た目の話ではなく、その機能や働きによって何らかの課題を解決することであり、新しい価値を創造すること」
と本書では解説している。
開発の中でのデザインとは、見た目だけでなく、その機能がどのような働きをするかを意味するんですね！
UIとUXの比較
| UI | UX | |
|---|---|---|
| 意味 | UIとは、ユーザーインターフェースのことを言い、UIをデザインするということは「システムやサービスに付随するインターフェースをより使いやすく設計する」こと | UXとは、ユーザーエクスペリエンスの略で、範囲は「ユーザーがそのサービスを知るようになった契機から、サービスによって受けるすべての体験」 |
| 見方 | 客観的 | 主観的 |
| 概念 | サービスとユーザーとの間に介在する「やりとり」に関する概念 | 目視する事ができない、ユーザーに関わる事全ての体験 |
「UIは、誰が見ても同じだと感じるもの、UXは個々人のバックグラウンドを反映して感じるもの」と考えられます！
2章：物理的な制約
物理的な制約を本書では、主に「デバイスの種類」「入力手段の違い」「画面の違い」「AndroidとiPhone」を挙げています！
「デバイスの種類」
デバイスは、「スマートフォン」「タブレット」「PC」「TV」が挙げられています！（デバイスの種類については、テレビとタブレットの話は割愛します。）
「入力手段の違い」
PCはマウスやトラックパッドを用いて操作でき、ホバーが使えることが最大の特徴で、スマホは、ホバーが使えず、操作前にあらかじめどのような事ができるのかを視覚で伝える必要がある。また、画面が小さいのでリンクやボタン操作の際はある程度の大きさが必要になる。
確かに、RubyやHTML、CSSでポートフォリを作成している際に、何気なくホバーを使っていましたが、ネイティブアプリでは目視で機能を伝えないといけない重要性がよくわかります！
極力誰が利用しても同じ解釈になる、客観的なデザインを心がける必要がありますね！
「画面の違い」
PCは、ブラウザや画面に写すものを可変できる
スマホは、16:9のアスペクト比で変更できない事がほとんど
「AndroidとiPhone」
| Android | iPhone | |
|---|---|---|
| ボタンの特徴 | 発売され出して年数が経つにつれてボタンの数が減少し、最後に残ったボタンは戻るボタンのみになりAndroidの特徴づける重要な機能 | iPhone8までずっと存在したボタンは「ホームボタン」のみで独自のポリシー（シンプルさ）を大事にしていた。 X以降ホームボタンがなくなっても設定で画面上にホームボタンのようなものを使えるようにしておくこともできる。 |
ちなみに、iPhoneの開発においてスティーブ・ジョブズは「iPhoneにもホームボタンではなく、戻るボタンをつけるべき」と主張していたそうです。もうAndroidとiPhoneどっちがどっちかわからなくなりそうですね（笑）
3章：ソフトウェアの影響
本章では、ネイティブアプリとWebサイトの違いを解説しています。
| Webサイト | ネイティブアプリ | |
|---|---|---|
| 特徴 | 「凡用ツールで、同時に複数のサイトを立ち上げることもできる。」 | 「専門ツールになっており、単機能・単サービスに特化したソフトウェア」 |
| メリット | ・マルチデバイスの展開がしやすい
・OSの違いによる環境の差異が小さい ・同子に複数のブラウザを起動できる ・サービスごとのインストールが不要である。 |
・動作が速く、操作が軽快 ・タッチパネルでは多様なジェスチャー操作に対応できる。 ・データ通信量が（同一条件のWebと比較して）少量ですむ ・中断や再会が用意である |
| デメリット | ・操作上のインタラクションが乏しい ・ジェスチャーへの対応が難しい ・操作スピードが遅い |
・サービスごとに都度インストールしないといけない。 ・OSごとに異なるプログラム言語で開発する必要がある。 ・最適なインターフェースがデバイスやOSによって違う |
4章：人間の認知特性
本章のまとめは、「人間の認知にとって何が必要なのかを理解して、UIをデザインすることが重要である」ということです。
「色・形・動き」「インタラクションコスト」「一貫性」「シンプルさ」「共通概念」を用いて人間の生来の認知特性について、言及されています。
私が、こちらの章で興味深いと思ったのは、「共通概念」です。
みなさんが日頃意識せずに使っている共通概念を適用したUIは、エレベーターの「↑」「↓」や開閉マークです。どのエレベータでも同じようなマークですよね。無意識に使用していると思いますが、これこそ共通概念の活用です！
この共通概念を無視してボタンをつけると、使用するユーザーは混乱して意図した行動をとってくれないってこどですね！このことを「共通概念に逆らうリスク」と言います。
また、開発側はユーザーの予測とその結果が完全に一致するようにデザインする必要がある事があり、そのようなことを「直感的」と呼ぶそうです。
ユーザーに「直感的」に操作してもらい、ユーザーの予測と開発側の意図が完全に一致するものを作れたらそれがいいアプリになるという事ですかね！
直感的に操作できないことの例で選択肢が多すぎることの問題点等が挙げられると感じました！
以下の書籍内で、「スーパーの店頭でジャムの種類が多い時の方が、ジャムの種類が少ない時よりも購入される個数が少ない。」という結果が出た実験を思い出しました。
また、有名なビジネスコンサルタントの大前研一氏は、「着る服を5着揃えて、朝服を着る際にどの服を着るかという選択をする回数を減らせ」という趣旨の言葉を著書でおっしゃっていたような気がします。
脱線しました。
まとめ
本書の前半を読み終えて、一番興味深かったのはUIとUXは、それぞれ「客観」と「主観」に分類されていることや人間の生来の認知能力を考慮して開発するべきと学べたことです！
現在自分が開発に関わらせていただいているアプリに本書から学んだUI/UX原則を落とし込んで、実装を積み上げていきたいと思います！