読書まとめ『UI デザイン必携』→予測と結果が一致する UI を作る TIPS
『UIデザイン必携 ユーザーインターフェースの設計と改善を成功させるために』原田 秀司
一言で言うと
予測と結果が一致する UI を作る TIPS
概要
自分が Power Apps で作るアプリのデザインが
ポンコツすぎるので、学習してみました。
出たとこ勝負・思いつきで作ってるので、
デザインのベースラインを学んでおこう、
という意図です。
本書では、直感的に使える UI は
「予測と結果が一致する状態」
だと表現されていました。
ユーザーの予測と異なる動きをしたり、
そもそも予測すらできない謎ボタンがあったりすると、
使いやすい UI とは言えません。
かつての職場で、他チームの業務のコアになっていた Excel、
ニコちゃんマークがマクロの実行ボタンになってて、
ユーザーのムダな習熟負荷を強いていましたね…
使いやすい UI にするには、
ユーザーが UI の動きを無意識に予測でき、
その予測を裏切らない動きをすることを
目指す必要があります。
そのためには、
一貫性・シンプルさ・共通概念の利用
の 3点がキーになります。
と、文字で書くのは簡単ですが、
実際に形にするのは簡単ではありません。
本書の終盤では、苦労して作ったモックアップには
執着心が生まれて否定しづらくなる、
といった心理的な阻害要因にも触れられていました。
一貫性・シンプルさ・共通概念の利用を担保するためには、
自分が作ったものを客観的に見る、
他者に見てもらうことが重要なのかなと感じました。
また、本書では、
実際に筆者が目にしたデザインを例に挙げて、
その良し悪しが論理的に説明されています。
一貫性・シンプルさはそのサービスの中で完結しますが、
共通概念を理解するには、
他のサービスに触れたりユーザーの意見を聞く必要があります。
世の中のサービスを使ってみて、
なにが共通概念になっているのかを
インプットしないといけないですね。
本書から学んだ、UI デザインで
意識したいことを 3つ紹介します。
① 状態と操作を分ける
「分かっている」とは、
場所・状態・操作をつかめていることを指します。
自動車に喩えると、カーナビで現在の場所を、
各種メーターで車の状態を、
ハンドルで進む方向を操作できることを
把握している状態です。
アプリの UIデザインにおいては、
状態と操作を分けることが重要だと感じました。
例えば、「有効」とだけ書かれたボタンは、
「現在有効である」という状態を示すのか、
「有効にする」という操作を示すのかわかりません。
ボタンには操作を示し、
状態は他の方法で示すことで、
分かりやすいデザインに近づけそうです。
② 重要なものを色付き・右下に
どんなデザインにすると目立ちやすいか、
本書では格付けが明示されています。
これが世間の共通概念ってことで、
素直に従いたいと思います。
色付きベタ塗り
色付き枠囲い
無彩色の枠囲い
色付きテキストのみ
無彩色のテキストのみ
note の記事編集画面では
上記の 1, 3, 5 が使われており、
コントラストがわかりやすいですね。
また、重要なボタンは右・下に置くのが定番。
文章は左から右・上から下に続いていくので、
文章を読んでから押すボタンは
右・下に置きましょう。
また、閉じる(×)は右上、
戻る(←/＜) は左上(PC・iOS)・左下(Android) が
定位置になっています。
差別化とは、表現のバリエーションの取り合い、
と本書では述べられていました。
どの表現が目立ちやすいかを把握し、
どの表現を何に使うかを事前に決めておくことで、
作る側・使う側双方のストレスを減らせそうです。
特に、今どこにいるか・次に進むボタンはどれか、
の 2点は、ユーザーへの分かりやすさを
十分に考慮するようにしたいと思いました。
③ 来た道への戻り方を示す
誰もが迷わない設計は難しいが、
誰もが来た道に戻れる設計ならできる、
と述べられていました。
前項で言及した、今どこにいるか・次に進むボタンを
分かりやすくすることに加えて、
来た道に必ず戻れることも重要です。
(目立たせる必要はなさそう)
具体的には、ひとつ戻る(バック) と
最初に戻る(ホーム) の実装です。
左上か左下に「戻る」ボタンがあり、
サービスロゴが「ホーム」ボタンも兼ねる、
というのが共通概念になっています。
このトピックを読んで思い出したのが、
地元の図書館の Webサイト、
来た道への戻り方がわかりづらい問題。
「マイページのトップに戻るボタン」がなく、
家アイコンを押すと
ログイン前の画面に戻ってしまいます。
昨年あたりのリニューアル後、
「なんか使いづらいな」と感じていましたが、
バック・ホームの使い勝手が一因と思われます。
既存のサービスが使いづらいと感じたときに、
「なぜ使いづらいと感じるのか」を言語化することで、
自分がサービスを作る側になるときの
反面教師にしたいですね。
Amazon.co.jpアソシエイトに参加しています。
#推薦図書 #読書 #書評 #最近の学び #UI #デザイン #UIデザイン #アプリ #インターフェース #ユーザーインターフェース #設計
いいなと思ったら応援しよう！
