UX評価のい・ろ・は 5 UIの課題の見つけ方 | アドビUX道場 #UXDojo

ユーザーのニーズに応えるWebサイトを作っても、運用に課題があると徐々に劣化していきます。例えば、画面の追加や修正を行なう過程で、UIの一貫性が失われる可能性があります。サイト全体を見渡せるUIインベントリを作成すると、デザインの一貫性をチェックできます。一貫性のあるUIは、使いやすいWebサイトにするための第一歩です。

一貫性を簡単に失っていくWebサイト

ひとつひとつの画面では良いデザインに見えるサイトでも、サイト全体を横断して確認してみると、以下のような課題が見つかることがあります。

• ボタンの見た目や使われ方にバリエーションが存在する
• UIのラベル表記にぶれがある
• 微妙に異なる色バリエーションの存在
• 用途・目的が一定でないUI

一貫性のあるUIは、使いやすいWebサイトの第一歩です。Webサイトのナビゲーションがすべての画面で同じ場所にあるだけでも、ユーザーの認知負荷を和らげてくれます。ボタンがいつも同じ見た目であれば、ユーザーはわざわざ「この形状はボタンである」と学習する必要もありません。

UIデザインの原則のひとつである一貫性ですが、画面を個別にデザインしていると見落としてしまう場合があります。また、 Webサイトの成長サイクルで関わる制作会社が変わったり増えたりすることでも、次第に一貫性が失われていきます。

一貫性を失うことで、ユーザーだけでなく、制作側にも負荷がかかります。使うべき『正しいボタン』がどれか分からないことで、デザイナー、場合によっては開発者の個人的な判断でボタンのバリエーションが増えてしまうことがあります。デザインのバリエーションが増えるほどコードが肥大化し実装コストもかかってきます。

UIインベントリの作り方

UIインベントリはWebサイトで使われているUIをカタログしたものです。コンテンツインベントリと同様、UIインベントリも、UIと呼べそうなものはすべてカタログするのが理想的です。最初から厳密な分類をする必要はなく、まずは以下の要素を中心に集めていきます。

Webサイトの部品を切り出してどう分類するか議論するワークショップ

• 色 : Web サイトで使われている色をまとめます。このとき HEX値も一緒に記述しておくとバリエーションが把握しやすくなります
• タイポグラフィ : 情報の種類ごとに大きさやスタイルが異なる文字をカタログしていきます
• フォーム要素 : テキスト入力やチェックボックスなどフォームで使う要素を集めます
• ボタン : フォーム要素のなかでもボタンはユーザーを誘導する大事な要素。ボタンの形をしたテキストリンクもまとめて集めていきます
• ナビゲーション : グローバルナビゲーション、サイドナビゲーション、フッターナビゲーションなど
• アイコン : サイトで使われているアイコンを集めます。似たような形状や違う意味で使われているアイコンもまとめます
• その他 : タブ、アコーディオンなどページ内で操作するUIを集めます。これらをより詳細に分類することも可能ですが、カタログすることを目的とするのでひとまとめにします

UIインベントリの作成に使うツールは、集めた UIのスクリーンショットを貼り付けられて、文章が書けるソフトウェアであることが条件です。 Keynote, Google Slidesのようなプレゼンテーションツールがよく使用されますが、Adobe XDのようなデザインツールを活用するのも手段です。

Adobe XDには、UIインベントリ作成に便利な機能があります。プロトタイプ機能を使ってインタラクティブなカタログを作って共有できます。最初の画面は UIインベントリの目次にして、各画面で要素のカタログを見せるとよいでしょう。また、アセットを収集するための『カード』をシンボル化してリピードグリッドで複製すれば、UI要素をきれいにまとめやすくなります。

XDで作るUIインベントリ用のシンボル。画像を貼り付けるだけでなく、UIの概要が書き込めるスペースも用意しておくと便利です

XDでUIイベントリを作成した例。スクリーンショットを集めた要素をカタログしていきます。プロトタイプ機能でナビゲーションを用意するのもアリ

XDで作ったUIインベントリを共有した例。コメント機能をつかって、UIの説明や懸念点を追加していきます

UIインベントリは、デザインの一貫性をチェックするためだけでなく、UI要素の呼び名を考える機会を与えてくれます。大きな文字を「ヘッダー」と呼ぶのか、それとも「見出し」と呼ぶのか、ちょっとした言葉の違いがコミュニケーションを阻害することがあるので、インベントリを見ながら呼び名を見直すのも良いでしょう。

良いデザインかどうかを判断するとき、ページ全体の印象や、その中にある要素を見るのはひとつの見方ではありますが、サイト全体の一貫性も大事です。そのためには、サイト内の部品をひとつひとつ取り出す必要があります。全体を見渡すことでデザインに関わる新たな課題を見つけることができるので、ぜひ UIインベントリを作ってみてください。