使いやすいデザインのための4つの要素

Dylan Wilbanks

Dylanはデザイン・オペレーションやリーダーシップのコンサルティングを行うコンサルタント。

この記事はThe UX Boothからの翻訳転載です。配信元または著者の許可を得て配信しています。

Learn, Discover, Find, and Search: Elements of Usable Design

しばらく前に、UX Boothのエディターの1人であるAmy Grace Wells氏が、次のような記事のアイデアを持ち込んできました。

「学習しやすさ」、「探しやすさ」、「発見しやすさ」、そして「見つけやすさ」について説明、比較、対比して、それぞれがUXにどのような影響を与えるかについての記事を書いたらどうでしょう?

私は考え込んでしまいました。というのも、これらすべての要素が相まって良質なユーザー体験ができあがるということを、たった1本の記事でどう説明できるでしょうか。これはひとつひとつが、現代のUXデザインの生業と捉えてもよく、大抵の人は、この中の1つに自分のキャリアをすべて費やすようなものなのです。それなのに私は、信用あるメディアであるUX Boothで、これらすべてについてのHow to記事を書くように依頼されたのです。

私は数ヶ月の間考え続けて、いくつかメモを書きつけ、あとはインスピレーションが降りてくるのを待ちました。

すると、インスピレーションの代わりに、36cmの雪が庭に降りました。シアトルにとっては、過去100年間で最大の積雪量を記録した2週間でした。さらに4つの嵐が、すでに雪で閉鎖していた都市に追い打ちをかけました。

その中でも特に大きな2つ目の嵐の合間に、私はなんとか雪の中から車を道路に引っ張り出し、スーパーマーケットに向かいました。

私は日用品の買いものが嫌いです。すべての商品の位置を気まぐれに動かしているように見える、この騒がしくてまとまりのない空間で、私は捜索スキルをありったけ振り絞らなくてはならないからです。しかし、我が家に生鮮食品は確かに不足していて、私の家族は皆、それを見つけることに関しては私よりも下手だったのです。

探しやすさについての検証

妻からメールで送られたリストには、次のように書いてありました。

  • バナナ
  • ポテトチップス
  • 何かの冷凍食品

バナナは簡単です。入口から右に曲がって農産物売り場に行きます。まだ熟していない緑色、またはよく熟れた黄色の、様々な色合いのバナナが売り場の中心にあります。

バナナは、「探しやすい」ものです。どこに探しに行けばいいのか、だいたいわかります。また、「見つけやすい」ものでもあります。分かりやすく置いてあるので、簡単に特定できます。私はただ、丁度いい量を選んで(何本必要か)、成熟具合(今日食べる分なのか、3日後に食べるのか)を確認するだけで済みます。

お店は品物を探しやすいような構造になっていますから、どこに農産物があるかすぐわかります。野菜は野菜、フルーツはフルーツで、見つけやすいようにまとめて置いてあります。

北アメリカの食料品店には、どこでも似たような農産物売り場とバナナの山があります。ヨーロッパやアジアの店でも同じように農産物の売り場があります。農産物が小麦粉やスナック菓子の隣の棚に置かれることはありません。地域によって違いや特異性があるとしても、バナナを見つけられない店はほとんどないでしょう。農産物売り場を見つければいいだけですから。

学習しやすいということは、反復されるということ

食料品店における農産物売り場のパターンのおかげで、これは「学習しやすい」ものになっています。このようなパターンはあらゆるシステムのデザインにも通じます。反復しないことには、ユーザーはそのシステムがいつでも一定のクオリティを生み出すことを信じないでしょう。Google検索は反復できるものです。なぜなら、どんなにSEOやSEMに腐心したとしても、Googleは(ほとんど)常に、1万回検索した場合でも同じだと認識できるような信頼性の高い検索結果を返すからです。

農産物売り場の「探しやすさ」は、そこにある商品の「見つけやすさ」と一致します。「探しやすさ」がシステムと作り出されるパターンに依存する場合、「見つけやすさ」によってプロダクトが見つけやすくなるということになります。私はバナナがどんな見た目なのかよく知っていますし、バナナの陳列が目立っていることによって、私は自分が考えている「バナナ」と一致させやすくなり、決断を下しやすくなります。

見つけやすさ」のためにデザインされたシステムは、そうしたことを念頭に置く必要があります。そのようなシステムは、正しい合図(視覚的、感覚的、物理的な合図)によって正しい結果を示すことにフォーカスしています。人々が頻繁に探すようなものなら、より分かりやすく示されます。たとえば、リンゴや桃といったフルーツは売り場いっぱいに並べられているでしょうが、ルタバガやラディッシュは野菜売り場に詰め込まれているでしょう。システムが上手く行くかどうかは、ユーザーが探しているものを特定する能力にかかっています。どこかに設置したFAQに埋もれていたり、ややこしいクリック操作の末にあるものではありません。

バナナが手に入ったので、次はポテトチップスです。ここで私はちょっと悩みました。どんなポテトチップスを買えばいいのでしょう? ブランドもサイズもいろいろなものがあるし、もちろん味も数えきれないほどあります。(地元のスーパーに並ぶ大量のBBQ味のチップスには目を見張るものがあります。買いたいものはバックヤードBBQですか? それともハニーマスタードBBQ? あるいは韓国風BBQ? それらすべてが揃っていますし、これらのほかにも15種類あります)

私は、家族がどれを食べるかについて頭を使わなければなりません。たとえば、サワークリーム&オニオンは手堅いだろう、とか、自分しか好きではない味をわざと選んだりするときもあります。

ブランドの問題もあります。うちの子どもはTim's Cascade Originalが何より大好きですが、Lay'sのサワークリーム&オニオンは軽くて薄く、Kettleの分厚いチップスよりも好まれています。

ここで、「発見しやすさ」の出番となります。「発見しやすさ」は「見つけやすさ」とは違います。ここでいう「見つける」とは、特定のもの(たとえばバナナ)を探すことで、「発見する」とは、選択肢をすべて見た上で、その中から最適なものを選ぶことです。この場合、特定のニーズはありますが、ある「何か」を探す上でのニーズであり、その「何か」自体ではありません。

Wayfair.comのファセット検索

検索における発見しやすさについて考えるとき、ファセット検索に頼ることが多いです。ファセット検索を使えば、ユーザーはカテゴリーに基づいて検索結果を変更でき、表示する選択肢を減らすためにフィルターをかけることができます。ファセットはカードカタログの時代から取り入れられてきましたが、情報システムがすべてのカテゴリーとタグを素早く相互参照できるようになって初めて、現代のファセット検索が可能となりました。

Webにおける「発見しやすさ」

現代のECサイトであればファセット検索はもちろん可能です。たとえば、私が衣類乾燥機を買い替えるのにかかった時間を考えてみましょう。新しい乾燥機を選ぶときには次のようなポイントがありました。

  • 電気ではなくガス式
  • 置き場所にちょうどいいサイズ
  • 乾燥が終わったときのサイン
  • 洗濯機に合うような白い色

一方で、Wi-Fi機能は要りませんでしたし、ブランドも気にしませんでした。それに、最新式のスチームドライ機能があるかどうかも気にしませんでした。私が見たストアのWebサイトでは検索結果をコントロールすることができたので、検討すべき選択肢を絞り込むことができました。

しかし、ネットではなく物理的な場所だと事情が異なります。ポテトチップスの袋を、自分の好みの塩加減に合わせて物理的に並べ替えることはできません。そして店側にしても、これをやろうとすれば莫大なコストがかかります。店は自分たちの基準に基づいた情報の仕組みを持っていて、顧客の考え方をそれに合わせるように求めています。ポテトチップスはブランド別、主要原料別(ポテト、コーン、ピタなど)に並べられています。顧客は視覚的にそれらを分類し、お気に入りのサワークリーム&オニオンチップスを見つけ出さなくてはいけないのです。

しかし、ときには分類上の問題が生じます。たとえば、マサの一種から作られているフライドコーンチップスであるFritoです。同じくマサから作られたフライであるトルティーヤチップスと同じ場所に置こうと考える人もいるでしょう。しかし、ほとんどの場合そのようにはなっていません。これは正しいでしょうか?

または、メープルシロップはどうでしょう。パンケーキミックスの近くに置いている店もあります。パンケーキやワッフルにはメープルシロップが付きものですから、(北アメリカにおいては)自然なパターンでしょう。しかし、シロップは砂糖と一緒に並べて、パンケーキミックスは通路を隔てた場所にケーキミックスと一緒に置いている店もあります。どちらが正しいパターンでしょうか?

優れた「発見しやすさ」とは、「見つけやすさ」に裏打ちされた「探しやすさ」を提供する強固なシステムだけが実現できるものです。

ダークパターン

ポテトチップスに関してはまた別の問題に直面しました。店が棚を移動していたのです。「学習しやすさ」はバナナに関して非常に優れていましたが、ポテトチップスに関してはそうではなかったのです。

これが、「発見しやすさ」に関するダークパターンです。Webにおける「発見しやすさ」について話をするとき、私たちはSEOや、会社がユーザーに見てほしいものを最適化することばかりに終始しがちです。自分たちのサイトを検索結果の上位に表示することだけを考え、それを達成するためならユーザーに迷惑をかけることすら厭いません。

食料品店におけるこの体験は、エンドキャップ、すなわちおすすめ品やセール品を並べた通路の端の棚によく表れています。通り過ぎる買いもの客は、自分が必要だと思っていなかった商品に気を取られます。これは衝動買いを誘うには完璧なので、店のビジネスとしては有効ですが、客の気を逸らす行為でもあります。

ポテトチップスの棚を動かすことも、もう1つのダークパターンです。これによって簡単に見つけることができなくなり、本能的に探し回るしかなくなります。ポテトチップスを求めて店内を歩き回らなければならなくなり、その途中ですべての通路を覗き込んで、ポテトチップスの置き場所を示す表示が無いか探すことになるでしょう。店内の基本的な「探しやすさ」は変わっていませんが、「見つけやすさ」は「発見しやすさ」の二の次になっています。これにはイライラしてしまうでしょうが、結局はエンドキャップのように、このダークパターンも店の売り上げに貢献するのです。

究極の探しやすさ

冷凍食品売り場には、これらすべての要素があります。冷凍庫は動かすことが難しいので、ポテトチップスを店内で移動させるほど簡単には、ユーザーのメンタルマップを好きに作りあげることはできません。つまり、「学習しやすさ」は店の構造に組み込まれています。ですが、冷凍食品売り場の中で商品を並び替えることによって「学習しやすさ」を崩すこともあります。実際にこれは頻繁に行われているのです。

そうなると、「探しやすさ」は案内表示 (冷凍ピザはこちら、アイスクリームはこちら、など)に依存する部分が大きくなります。商品の探し方は、冷凍食品の整理された分類よりも目印を頼りにすることになります。

店に入ったときに「何かの冷凍食品」というような曖昧な要望しか持っていなかったら、 あなたはシステムに優柔不断さを持ち込んでしまい、結果として動きは遅くなり、余計なお金を使うことになってしまいます。

しかし有り難いことに、これに対してはMarcia Bates氏の「ベリーピッキング」という方法が役に立ちます。

ベリーピッキング - Web検索パターンの考察

Bates氏は 1989年に、伝統的でトランザクションベースの「クエリを使ってドキュメントを要求にマッチさせる」情報検索モデルに依存しない情報検索システムを提案しました。彼女は新たなモデルを「ベリーピッキング」と呼び、次のように説明しています。

現実世界において手作業で資料を探すときには、ユーザーは幅広いトピックの中からたった1つの特徴、またはたった1つの参考資料から始めて、それからさまざまな資料を見ていきます。あらたな情報に出会うたびに、ユーザーの頭には新たな考えや方向性が生まれ、結果として新たなクエリ(疑問)を思いつきます。それぞれの段階において、ユーザーは1つのクエリによりマッチするための検索単語を修正しているわけではありません。むしろ、検索単語と同様にクエリそのものの一部、または全体を継続的に変化させているのです。この検索方法を『進化型検索』と言います。

さらに各段階において、ユーザーはそれぞれのクエリの概念によって、有用な情報と参考資料を見つけ出すことができます。つまり、クエリは1つの最終的な検索セットによって完結するのではありません。繰り返し変更される検索の各段階から得られる一連の選択と情報によって完結するのです。このような少しずつ進む検索を、「ベリーピッキング」と言います。これは、検索の仕方を、森でハックルベリーやブルーベリーを採集することに例えたものです。ベリーの実は茂みの中に散在しており、まとまってはいません。これを集めるには1つずつ集めるしかありません。情報のベリーピッキングをするには、検索のニーズ自体を変える(進化させる)必要があります。しかし本稿においては、これらの特徴を併せ持つような検索に注目しています。

30年前、Bates氏は単に現代のWeb(本当に探しているものを見つけるために際限なくリンクを追いかけたり、Wikipedia をさまよったりするような在り方)について書いただけでなく、私がまさに直面した、冷凍食品を買おうとするときに何をすべきかというジレンマについても説明をしていました。単に食べものを探すことをやめて、特定の何かを探しているわけではないということを認識ながら、もっとも必要性に合うものを選べばよいのです。冷凍ピザなら、家族は食べるでしょう。あとは、ラザニアに、キャセロール。そうしたら私は冷凍庫の中を探して、買いものカゴに入れて、めでたく次の嵐を乗り切るだけの準備ができます。

今日(こんにち)の「発見しやすさ」は、ベリーピッキングに根差しているように思えます。検索とはもはやコンテンツを人にマッチさせる単一のトランザクションではありません。それは、検索クエリの複雑なWebであり、それぞれのクエリに対してユーザーが下す決断であり、満足のいく情報(熟れたベリー)を見つけるために継続的に検索方法を修正することなのです。 Bates氏はこれを「ブラウジング」と呼びました。そして確かに、強力なブラウジングのためには強力な「発見しやすさ」が必要であり、その「発見しやすさ」に影響を与えることが現代のWebにとってもっとも重要なのです。

検索エンジンマーケティング(SEM)は、ブラウジングとチェリーピッキングに影響を与えるために企業が採用しているもっとも一般的な方法です。過去に検索した内容や購入したものを表示し、それらに基づいたおすすめ商品を提案します。(もちろんこれは、文脈に沿っている必要があります。Amazonは長い間、掃除機を買った人にもっと掃除機を買うように提案していました。あるとき誰かが、掃除機を買った人に必要なのは別の掃除機ではなく、掃除機用のパックや交換パーツであることに気づいたのです)

そんなわけで、私は予定した買いものを終え、次の嵐が来る前に準備を済ませることができました。目標は達成されたのです。私の家族は皆、バナナも、ポテトチップスも、冷凍ピザも必要としていました。しかし、食料品店はWebとは違います。すぐに環境を変えることもできませんし、ユーザーの選択を絞り込むためのファセットやフィルタリングも、前回ユーザーが来たときに何を探していたかを記憶しておくこともできないので、Webとは違うデメリットを持った物理的な環境なのです。

一方でオンラインの食料品店なら、これらすべてが可能です。Amazon FreshやSafeway.comにおいては、スーパーマーケットの実店舗に存在する原則がWeb上で実現されています。「探しやすさ」は次世代のECサイトに期待される同一の検索パターンとツールによって、「学習しやすさ」はそれらのパターンを追うことによって、「見つけやすさ」はブランドや部門、そのほかの領域に関するフィルタリングやファセットによって、そして「発見しやすさ」は店からのおすすめやカタログ、履歴によって実現されているのです。

Amazon Freshの例

もちろんこれはECに限った話ではありません。ライブラリからメディアカタログまで、あらゆる種類の情報カタログの根幹となるのは高度な検索システムです。こうしたシステムが学習可能な場合に、たとえばGoogle の検索オペレーターのような短縮検索言語が出現します。前述のメディアカタログのように、どんなシステムにおける「見つけやすさ」もフィルタリングとファセットによって実現されます。「発見しやすさ」は、Netflixの巨大なアルゴリズムのような、レコメンドシステムを育てていきます。

これらすべてが上手く機能すれば、ブラウジングと選別によって、探しているものを見つけることができます。同じパターンを使って再び見つけることもできます。そして、何百何千とある可能性の中から探しているものを見つけるために、ベリーピッキングを使うことができます。逆に上手く機能していなかったら、ユーザーの体験はバラバラになってしまうので、おすすめやフィルタリング、よくある検索クエリから想定される検索結果を求めるようになるでしょう。

UXデザイナーは、ユーザーのいる環境が現実世界であれバーチャルであれ、あるいはその両方を兼ねるAR(拡張現実)であっても、これら4つをすべて念頭に置いておく必要があります。私たちは情報検索の初期から存在するパターンを扱っていて、それらの中には食べられるものとそうでないものを判断するために生まれたパターンもあります。「学習しやすさ」「探しやすさ」「発見しやすさ」「見つけやすさ」の原則を守れば、ユーザーに対して有意義で役立つユーザー体験を提供できるでしょう。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて