UIを考えるときの参考の仕方

何かを作るとき、まず検索して事例を探してみるというのは一般的な手法ですよね。とりわけUIは「どんな解法が一般的か」というのを確かめる意味でも、実際に使われている手法を探すことがよくあると思います。

そんなとき、運良くドンピシャなものが見つかれば良いですが、なかなか理想のものが見つからないときはちょっと困ってしまう、という方もいるのではないかと思います。

とくに、要件が難しくなってくると、参考にする方法もちょっとずつアップデートしていかないといけないですよね。この記事では、参考の仕方について、経験的に有用な考え方をまとめてみます。

そのままの答えを探そうとしない

世の中で広く取り入れられているようなUIパターンならばすぐに答えは見つかりますが、イメージしている使われ方が特殊なものになればなるほど、そのまま使える答えが見つかる可能性が減っていきますよね。完璧な答えを探すことに固執してしまわないように気をつけたいところです。

下の２つの考え方は、この前提のもとで何をどう参考にすべきかにづいてまとめたものです。

特殊な状況をうまく一般化する

「洋服のECアプリの検索結果画面」ならば答えはたくさん見つかるかもしれませんが、「建設現場むけの資材調達サービスのナントカ…」みたいな制限がついたとき、領域を手がかりにしてUIの事例を調べるのはかなり難しいんじゃないかと思います。なるべく頭を柔軟に切り替えて「似たようなことをするのは、どんな時だろう？」というのを考えてみると良いと思います。

例えば、僕はある論文検索サービスの「研究手順をステップ1ステップ2...のようにまとめて検索結果に表示する」という機能について考えることがありました。はじめてお話を聞いた時はよくわからなかったのですが、そのサービスのユーザーについて理解を深めるうちに「これはレシピ検索サービスの亜種かも？」という理解を得られました。

もちろんそのサービスに料理のことなんて書いていないんですが「何かの手順を知りたいのはどんな時だろう？」という風に、領域の特殊さを頭の外に出して、ユーザーやりたいことの構造だけを考えるようにしてみたら、レシピというアイデアが浮かんできたのです。一度そういう理解ができると、UIのどのような部分を参考にすべきかは前よりもはっきりしてきます。

構造をとらえる

どんな時でも考えておきたいのは、そもそもそのUIで何がどう表現されているのか、ということです。例えば「タブ」はごく一般的なUIパターンですが、それによって何がどう実現されているかを分解すると、ざっくりこんな感じかと思います。

• 何かを代表するラベルが付記されている
• 情報が水平に並列している
• 活性・非活性を切り替えることができる

例えば「何かを代表するラベル」があることによって、内容を推測できるようになっていたり、他のラベルとあわせて「このタブ全体ではこんなことするんだな」というのを暗に伝えたりできます。また水平に配置されているということは、横幅に依存するということでもあります。あまりたくさんの要素は入れられなさそうなので、うまいこと要素を絞るなりの工夫が必要そうですね。活性・非活性を切り替えられるというのも、よくよく考えると「デフォルトで開いている画面がある」というのに気付くことができます。

一般的なUIパターンには、それが一般化するだけのたくさんの理由があります。当たり前に見えることでも、その意味をふかぼって考えてみると、見落としていた制約や前提が見つかります。

参考のまえに

こういうことを考えるためには、いろいろなUIパターンをまず知っていることが前提になります。UIパターンには一つ一つ、それぞれの奥深さがあります。例えばソシオメディア社の『UIデザインパターン』や、Codegridの『きちんと学ぶユーザーインターフェース 第1回 タブUI：効果と副作用』のような記事、あるいはオライリー社の発行する『マイクロインタラクション』、『デザイニング・インターフェイス』といった文献を参考にして、1つ1つのパターンについて考えを深めてみるのが良いと思います。

rootでは共にビジョン実現できる仲間を探しています！

rootでは、Visionである「Design Doing for More〜デザインの実践を個から組織・事業へ〜」の実現のため、様々な背景をもつメンバーが日々デザインと向き合っています。UIデザイン経験者はもちろん、これからUIデザイナーになりたい！という方も、挑戦できるしくみや体制になっています。ぜひ一度カジュアルにお話してみませんか？ご連絡お待ちしています！