logo-idv ico_pp

UIデザインのインプットに役立つ一冊『デザイニング・インターフェース』の紹介

デザイン

img_design20170526
こんにちは、デザイナーのTです。
最近、自社サービスの大幅改修、社内ツールの新規作成などで、UIデザインをする機会が多いです。
ユーザー、クライアント、サービスのニーズを反映して、ベストな形でインターフェースに具体化する、という仕事は、やりがいがありますが、いつも悩みます。
それでもデザイナー駆け出しの頃に比べて仕事がしやすくなったのは、経験の中で、UI の引き出しの中身が増えたからだと思います。

そこで、本題ですが、最近、ずっと気になっていた『デザイニング・インターフェース 第2版』という本を読みました。
この本は、オライリー・ジャパンから2011年に出版された、UIデザインに関する本です。
新しい本ではないですが、UIを網羅的かつ深堀りして紹介しており、UI の引き出しの中身を増やす、また、引き出しを整理するのに役立つ内容でした。
ほんの一部ですが、事例を交えて紹介します。

タブかアコーディオンか?

ここで、突然ですが、「タブ」と「アコーディオン」を、どう使い分けますか?
タブとは
タブ形式のボタンで、コンテンツが切り替わります。
エクセルのタブのように、タブの形をしていなくても、例えばiPhoneのボタンのようなデザインもタブですし、縦にタブが配置されている場合もあります。
img_1
アコーディオンとは
直線上に積み上げたパネルにコンテンツを収め、それぞれ開閉できるものです。
img_2
どちらも、コンテンツを一定の単位でグループ化して一部を隠すという機能は一緒です。
しかし、それぞれ違う特徴もあると本書では紹介されています。

タブの特徴

・ユーザーは一度に1つのモジュールが見えるだけでよい
・モジュールの長さや高さがほぼ同じ
・モジュールの数はあまり多くない。増えたり削除されない(エクセルのタブのように追加削除する場合もあるが…)

アコーディオンの特徴

・ユーザは一度に複数のモジュールを見たいことがある
・モジュールの高さはまちまちだが、幅はほぼ同じ
・モジュールの直線的な並び順を保ちたい

レスポンシブデザインでは、画面幅が大きい場合はタブ、小さい場合はアコーディオンに切り替える実装をすることもあるので、上に書いた特徴以外にも、画面幅は、タブとアコーディオンを使い分ける有力な基準になります。
その上で、今回読んで面白いと思ったのは、「タブは1度に複数のモジュールは見られない」ということです。
コンテンツのブロックを区切って、むやみにタブ化すると、使い勝手が落ちることがあります。
例えば、これは私の体験ですが、最近、ある検索サイトで、以下のようなモーダルを見ました。
img_3
検索パネルで、条件をモーダルで開いてセットすることができるのですが、
そのモーダル内でカテゴリ毎にコンテンツをタブで分けていました。
この時に、タブ間をまたいでチェックボックスを複数選択できるのか、それとも、別のタブを開くと、片方のタブにチェックが付いていても無効になるのか、操作するまで分かりづらい部分がありました。(結局タブをまたいでチェックできました)
もちろん例外はあると思いますが、同時に操作したり、比較する必要があるものは、タブの採用を慎重に検討しなければなりません。
本書では、このように、UIパターンの特徴や用途、具体例が紹介されていきます。

2パネルか1ウィンドウか?

もう一つ、本書で紹介されている別のUIパターンをご紹介します。
表示する項目のリストと、それに関連する詳細コンテンツがある場合、2パネルで両方とも表示しますか?
それとも、1パネルで表示し、内容を入れ替えますか?

2パネルのセレクタとは
1番目のパネルにはユーザが自由に選択できる項目のリストを表示し、2番目のパネルには選択された内容を表示します。
img_4

1ウィンドウでのドリルダウンとは
単一ウィンドウで、項目のリストまたはメニューを表示します。ユーザーがリストから項目を選択したら、その項目の詳細または内容をリストと入れ替えてそのウィンドウに表示します。
img_5
それぞれ、以下のような特徴が紹介されています。

2パネルのセレクタの特徴

・ユーザーにはリスト構造の概観を見てほしいし、そのリストは常に表示しておきたいが、コンテンツを手軽に素早く切り替えるようにもしたい場合
・1クリックで、コンテンツを入れ替えられるため、ユーザーの労力が少ない
・ページ遷移がないため、視覚的負担が少ない
・リストが表示されているため、現在地が分かりやすい(全体の項目の中のどの位置にあるコンテンツなのか分かりやすい)

1ウィンドウでのドリルダウンの特徴

・使えるスペースが限られている場合
・コンテンツが、ウィンドウ全体を使わなければならないほど大きい場合
・コンテンツ間の行き来に、リストとコンテンツページを行き来しなければならない。対応策として、コンテンツに「次へ」「前へ」のリンクを用意すると良い。
・2パネルよりも、リスト表示にウィンドウいっぱいを使えるので、リストの情報量が増え、どれから処理するべきかの判断をしやすくできる

例えば、今この文章を打っているPCWEB版のEvernoteは2パネルです。スマホアプリは1ウィンドウ。
Outlookは、左に「受信トレイ」「下書き」等のフォルダ、真ん中に送信者・タイトル・本文の一部、右にメール全文の3カラム構成になっています。タイトルをダブルクリックすると、別の1ウィンドウで、メール全文が開きます。
MacのFinderは基本的に2カラムですが、自分で3カラムに切り替えることもできます。
私は何となく、「メーラーは2パネル」「ニュースなどの情報サイトのリストは1ウィンドウ」とインプットしていました。
そもそもメーラーを、リストと詳細の組み合わせだと認識したことがなかったので、このように改めて整理された特徴を知ると、UIを考える視野が広がります。
メーラーっぽい検索結果の見せ方も、無くはないのかも・・・と思ってみたり。

ユーザーの行動もパターン化

上記で紹介したような、UIパターンの紹介以外にも、認知科学の研究から得た「ユーザーの行動」の14パターンが紹介されており、こちらも面白い内容でした。

例えば、以下のような内容です。

・ユーザーは、はやく成功体験を得られれば、使い続ける可能性が増える
・ユーザーは方針変更するものなので、対応できる作りにする
・ユーザはとりあえず先に進みたいので、最初から多くの先行的選択を迫らない

読んでみると、「それはそうだ」というレベルの、抽象的で根本的な内容ですが、明文化してあるので、思い出す時に便利です。
一度で全部覚えるというよりは、新しいサービスを作る時や、ABテスト案を考える時に、チェック項目のような感覚で見返してみたいと思います。

パターン化したUIで使いやすさを担保する

本書は、UIをパターン化するという軸を元に構成されています。
本書の冒頭で筆者は「使いやすいアプリケーションは、”慣用的”になるようにデザインされている」と言っています。
パターン化したUIは、ユーザーに馴染みやすく、それが使いやすさにつながります。パターン化したUIを適切に取り入れることで、使いやすさのために押さえるべきところを押さえたサイト(システム)を作ることができます。

おわりに

本書で紹介されているUIパターンは、目新しいものではないので、最新UIの紹介だと思うと、期待はずれになります。
また、分量も多く、抽象的な言葉も多いので、気軽に読めるものではありませんが(私も何度か寝落ちしました…)、
UIの見方に対して、新たな視点を得たり、経験則で得た知識を整理できるという点で、面白い本だと思います。
デザイナーの方はもちろん、ディレクター、エンジニアの皆さん、ご興味があれば、手に取ってみてください。

参考書籍:
『デザイニング・インターフェース 第2版 ―パターンによる実践的インタラクションデザイン』(Jenifer Tidwell著)

執筆者プロフィール

主にショットワークスのデザイン業務に従事。
最近は夏の兆しを感じる日々が続き、ビアガーデンへの思いを募らせている。