メタファーがUXを向上させる5つの理由

メタファー、日常生活であまり使うことのない言葉ですが、実はWebを通して私たちは日常的に触れています。
そもそものメタファーの意味はwikipediaに下記のように説明がありました。

 

Webにおけるメタファーで代表的、かつ議論があるものと言えば、保存を示す「フロッピーディスク」のアイコンでしょうか。
フロッピーディスクは昔、（今ではあり得ない量ですが）データを保存するものでした。そのなごりで私たちはフロッピーディスクのアイコンを見ると「保存するアイコン」と認識するようです。
この他にもWebにおけるメタファーの例はたくさんありますが、
今回は「メタファーがUXを向上させる5つの理由」という趣旨の海外の記事を見つけたので、そちらをご紹介したいと思います。

（この記事はSix Revisionsの「5 Reasons Why Metaphors Can Improve the User Experience」を意訳したものです）

Goodpatchでは、新規サービスの立ち上げやサービス・プロダクトの改善のご相談も受けております。
⇒【UXデザインを知りたい方向け】UXデザインを徹底解説した資料公開中！

1. メタファーはわかりにくいものをわかりやすくする

メタファーは、ユーザーが抽象的、あるいは見慣れないものを理解するための優れたツールです。具体的な概念と抽象的な情報をリンクさせることで、人々が情報を理解しやすくなります。
まずはWebで使われる最も一般的、かつ基本的なメタファーの使い方であるアイコンから見てみましょう。現実に存在するシンボルをWebサイトのアイコンに使用することで、現実のものとWebのものが関連付くので理解しやすくなります。

Startups, This Is How Design WorksのWebサイトで使われているアイコンを見てみましょう。電球のアイコンが「イノベーション」という言葉を、レンチのアイコンが「便利なものを作る」という言葉を、そしてペイントブラシが「美しさ」という言葉を表しています。

メタファーを使うことで、複雑なものや、珍しい概念をクリエイティブに説明することができます。例に、Huw Wilkinsのブログの404ページを見てみましょう。（404ページに飛びます）

Webを使う多くの人が404ページのことを知らず、突然404ページが出てきたらびっくりすると思います。この404ページではユーザーが開こうとしたページが閲覧不可なのを技術的に説明するのではなく、ユーザーが閲覧しようとしていたページを忍者が盗んでしまったというユーモアのある画像で説明しています。

また、メタファーはプロセスを説明するためにも使用することができます。 Datashiftは、様々なソーシャルメディアのアイコンが統計データに変わるマシンの画像を表示させています。

もちろんこんな機械は存在しませんし、実際のプロセスはもっと抽象的ですが、この画像のおかげでどんなサービスであるかが明確になります。

 

2. メタファーを使って親しみを起こさせる

私たちは物事を認識することが好きです。私たちが何かを認識することができないとき、私たちの脳はそれが何かを必死に理解しようとします。

Todd Follansbeeの書いた記事
「Brains Agree: The Case for Website Usability Guidelines」の中で、彼は私たちが望むアイデアを得るためにパターンを使用すると説明しています。

iPadのお絵描きアプリPaperのUIはスケッチブックのメタファーを使い、ユーザーに親しみやすさを与えています。

このアプリは、スケッチブックのような見た目と動きをします。簡単にアプリ上でスケッチを始められ、様々なペンと色を選択し、ページをめくり、ソーシャルメディア上でそれらを共有し、友達にあなたの作品を見せることができます。デジタルツールに馴染みのある機能を追加することで、とても直感的、かつ、簡単にそのアプリの使い方を習得することができます。

みなさんノックノックジョークを知っていますか？（海外の子どもがするなぞなぞ的なゲーム: 詳しくは→wikipedia ）
Knock Knock Factoryはノックノックジョークのポジティブな言葉の響きと会社のイメージをリンクさせています。

名前は私たちに堅実な会社という印象を与えるだけでなく、親しみを与えます。その会社の名前を聞いたことがない人でも、その会社の名前から楽しみと前向きな気持ちを感じます。

 

3. メタファーを使って感情を引き起こす

メタファーを使う事で感情を引き起こすことができます。感情は人々にあなたのデザインをアピールできるだけではなく、楽しい印象を与える事ができます。

Roambiというアプリはメタファーを使い、ユーザーの感情を引き起こしています。エクセルやGoogle Dirveなどのデータをこのアプリに入れる事で、データを洗練されたグラフや図表に変換して見ることができます。会社の業績などのデータを心臓の脈拍と捉え、このアプリを使うことでその脈拍をiPhoneやiPadで心電図の様に見れるというメタファーを使っています。

 

4. メタファーは、ユーザーの注意を引くことができる

メタファーを上手く使う事でWebページ自体や、Webサイトのある箇所に注意を引かせる事ができます。私たちが注意を引くものとは、知らない人がたくさんいる場所で知り合いを見つけるようなものです。例えば、私たちは会議やワークショップなどのイベントで名札を付けます。名札は、登録会員、参加費を支払った出席者を意味し、名札をつけていない人はイベントに出席する権利のない事を示します。下の参考画像では単調なログインフォームを名札のメタファーを使うことで魅力的に見せています。

Dribble: Login ID by Meng To

Flourishは彼らがやっていることを説明する為に「過酷な気候の中にFlourishという名のWebサイトを植えた」というキャッチフレーズとともに木のイラストを使っています。彼らのWebサービスのすごさを砂漠の真ん中に生える大きな木で表現しています。このイラストやメタファーは人目を引き、印象的です。

 

5. メタファーはユーザーのアクションに対するモチベーションを高める事ができる

メタファーのもう一つの興味深い点は、人々の行動に影響を与えることができるということです。あるものの使い方を現実で知っている場合、その使い方をWebでも応用させることができます。私たちが直感的に使い方をを知っているものをメタファーとしてWebに応用する事で、とても魅力的で実用的効果が得られます。Cascade BreweryのWebサイトはナビゲーションメニューとても魅力的なメタファーを使っています。

上のメニューでユーザーは、カテゴリ別の各コンテンツの割合の比率変えることで、独自のコンテンツを作ることができます。このメニューはユーザーの心をつかみ、ユーザーがメニューを操作することで起こる変化によってそのコンテンツをチェックしたい気持ちにさせます。

さらにメタファーを使う事でユーザーに会員登録を促すこともできます。その例の一つがMinute Raceです。このWebサイトではユーザーに会員登録を促すためにカウントダウンしていく時計をつかっています。
時間切れになったら何が起こるかはわかりませんが、私は早く登録しないと！という衝動に駆られました。まるで競争のように早く登録しないという気持ちに駆られます。

 

結論

メタファーはユーザー·エクスペリエンスを向上させることができるツールです。
・抽象的、または複雑な概念を説明
・親近感を生み出す
・感情を引き起こす
・あなたのWebサイト、または特定の項目に注意を引かせる
・ユーザーのアクションに対するモチベーションを与える

以上です。
各項目、とても勉強になりました。
個人的にはこのブログのサムネイルでも使っている404ページのメタファーがいいなと思いました。なにかWeb上で問題が起こった場合、その原因を技術的に複雑な用語を使って説明することはできるとしても、Webを使う人の全員がリテラシーが高いというわけではないので、多くの人がそれを理解できないと思います。
それを多くの人が知っている事（ここでは忍者）を使ってわかりやすく説明するので、多くのユーザーがこの404ページで混乱しないのではないでしょうか。

Goodpatchでは、新規サービスの立ち上げやサービス・プロダクトの改善のご相談も受けております。
⇒【UXデザインを知りたい方向け】UXデザインを徹底解説した資料公開中！