[書評] 優れた UX を実現するための tips が詰まった「インタフェースデザインのお約束 - 優れた UX を実現するための 101 のルール」を読んでみた
2020-03-16以前にフロントエンドの画面設計をする機会があったのですが、優れた UI/UX ってなんや？ という疑問が出てきました。これまでにも管理画面の機能追加やエンドユーザーが使用する画面の改修をした経験はありますが、 UI/UX について深く考えたことはありませんでした。そんなときに 「インタフェースデザインのお約束 - 優れた UX を実現するための 101 のルール」 という書籍を見つけたので、今回ご紹介させていただきます。
目次
書籍の概要
インタフェースデザインのお約束 - 優れた UX を実現するための 101 のルール
Web アプリケーションだけでなく、デジタル製品のデザインに役立つ指針がまとめられています。その数は 101 項目ありますが、どれも基本的な内容で、優れた UX を実現するためにはぜひ抑えておきたいポイントとなっています。 101 のお約束は後述する 7 つの大項目 (+ エピローグ) でわけられており、興味のある部分だけを選んで読むこともできます。各お約束は 1 〜 2 ページで完結するように書かれており、それぞれの説明のあとに箇条書きでポイントをいくつか書かれているという構成です。なので、気になった項目に関してリファレンス的にも使うことが可能です。
著者の Will Grant 氏はまえがきにて 「『これには賛成できない』と思えるルールもあるかもしれないが、それはそれでかまわない。」 としており、必ずすべてを取り込む必要はないことをコメントしています。
著者・翻訳者
- Will Grant 著
- 武舎広幸、武舎るみ 訳
(敬称略)
書籍の目次
- 1 章 プロローグ
- 2 章 文字と言葉
- 3 章 アイコンやボタン
- 4 章 UI 部品
- 5 章 フォーム
- 6 章 ナビゲーションとユーザージャーニー
- 7 章 ユーザーへの情報提示
- 8 章 アクセシビリティ
- 9 章 エピローグ
各章の概要
それでは各章の概要と、どのような お約束 が書かれているのか、少しだけ紹介していきます。
1 章 プロローグ
この先の各章を読み進めていく前に、UX デザインにおいて大切なのは「共感性」と「客観性」であること、「学習と実践だけでは不十分であること」を強調しています。また、 UX デザインで重要なのは生まれ持った才能ではなく、適切なコツとルールを覚えることであることだと述べられています。
2 章 文字と言葉
文字のフォント、大きさ、色、文章の言葉遣いについてのお約束が書かれています。文字色に関しては背景色との適切なコントラスト比について書かれていたり、用語の統一に関するお約束も書かれています。
- 書体は最多でも 2 種類に
- 英語ページでは log in ではなく sign in を使え
など
3 章 アイコンやボタン
アイコン画像の統一、ボタンの適切な大きさについて書かれています。たまにボタンとして使用されているアイコンやマークと実際の挙動が全然違うという場面に遭遇することがありますが、そのようなことが起こらないようなお約束も書かれています。
- 古くさくなった機器のアイコンなど使うな
- 絵文字は世界公認のアイコンセット
など
4 章 UI 部品
ドロップダウンメニューやスライダー、リンクの形式といった UI 部品に関するお約束が書かれています。各お約束内では UI 部品のあるべき姿について、わかりやすく解説されています。
- デバイスにもともと備わっている入力方法を利用せよ
- 年月日の選択用のコントロールは？
など
5 章 フォーム
検索、ユーザー情報、パスワード、画像のアップロードなど、フォームに関するお約束が書かれています。ユーザー情報に関する内容では、電話番号やクレジットカード情報など入力する内容ごとにポイントが紹介されています。
- ユーザーの入力データの形式に関しては「太っ腹」で
- メールアドレスの細かな検証は不要
など
6 章 ナビゲーションとユーザージャーニー
スクロールの方法、ページ遷移、リフレッシュの方法などに関するお約束が書かれています。この章で紹介されているのは、ユーザーの実際の操作手順・体験 (ユーザージャーニー) をに重きをおいたお約束となっています。
- 初期ページはユーザーへの説明の好機
- どのジャーニーでも常に現在位置をユーザーに明示せよ
など
7 章 ユーザーへの情報提示
検索結果、設定内容、通知など、ユーザーに対するあらゆる情報の提示に関するお約束が書かれています。対象のユーザーが、利用するサービスの初心者なのかヘビーユーザーなのか、といったユーザー属性ごとの提示方法についても触れられています。
- 隠れた部分もチラッと見せよ
- 「弊社のビジョン」に関心のあるユーザーなんていない
など
8 章 アクセシビリティ
本文の読み上げ、画面の拡大・縮小、色覚障害者に対する配慮などに関するお約束が書かれています。特に Tab キーでの操作やコントロールラベルに関するお約束は、あーなるほどな、と思いました。
- クリック可能なリンクのテキストは「読み上げ」機能に配慮して
- Tab キーでの移動の順序は支援技術の利用者を念頭に置いて
など
9 章 エピローグ
エピローグでは、これまでの章には該当しない、でも実際に優れた UX を実現するためには考慮しなければならないような内容に関するお約束が書かれています。各章に該当しない内容とはいってもざっくりとした浅い内容になっているわけではなく、ここでも詳細な説明とポイントがわかりやすくまとめられています。
- デフォルト設定を過小評価するな
- ユーザーテストでは本物のユーザーを対象にせよ
など
まとめ
優れた UX を実現するための tips がまとめられた 「インタフェースデザインのお約束」を読んだので、その紹介でした。
内容としてはこれまでにどこかで聞いたことがあったり、感覚的にそう思っていたりすることもありましたが、どれもふんわりとしたレベルでの認識でした。本書では、そういったなんとなくわかっている内容に関してもわかりやすく数値や図を用いて解説されているので、既に自分の中にある UX に対する考え方の地盤固めにも役立つと思います。
ただしまえがきで筆者がコメントしているように、本書で紹介されているお約束をすべて鵜呑みにして UX デザイン、画面設計をするのではなく、しっかりと対象のユーザー像をイメージすることが大事だと思いました。特にエピローグの章で紹介されている「ユーザーテストでは本物のユーザーを対象にせよ」というお約束がまさにその通りで、実際に使用するユーザーにテストをしてもらって、フィードバックをもらい、改善をしていくという流れが、優れた UX を実現するためには一番大事かなと思いました。
これから UX デザインをする方、 UX デザインについてなんとなくやるべきことはわかっている方、 そんな方たちにおすすめの一冊です。
comments powered by Disqus