シンプルなデザインを実現するための4つの方法

Euphemia Wong

EuphemiaはThe Interaction Design FoundationのUXリサーチャー、デザイナー、そしてストラテジストです。

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

Simplicity in Design: 4 Ways to Achieve Simplicity in Your Designs

シンプルにデザインする方法を学び、なぜデザインが過度に複雑になってしまうのかを知りましょう。もっとも成功した企業が作り出し、広く使われているプロダクトの多くは明らかにシンプルなものです。

また、シンプルさは一部の企業が競合よりも成功している主な理由でもあります。Googleの検索エンジンや、AppleのiPhone、WhatsAppメッセンジャー、よくできている天気ウィジェットなどは、シンプルさが表に出ている人気プロダクトのほんの一例です。

この記事ではシンプルさを見分けて獲得する方法と、シンプルさがすぐれたUIをもたらす理由を紹介します。

シンプルさとは何か?

今シンプルなものが大流行しています。シンプルさは、成功した企業とそのファンの多くに支持されているデザイン哲学です。大成功を納めているApple社はデザインのシンプルさを求めて常に戦ってきました。米国出身の起業家であり投資家でもあった同社の前CEO、故Steve Jobs氏はこのように言ったことがあります。

シンプルさを保つこととフォーカスを絞ることは私が大事にしている教えの一部です。シンプルにすることは複雑にするよりも難しいものです。何かをシンプルにするには、考えの中から必死に不要なものを取り除かなければなりません。しかしそれができれば、なんでもできます。

あらゆる年齢層のユーザーがMacBookに愛着を持ちます。これはシンプルにすることでいかに戸惑いを減らし、さまざまなユーザーがプロダクトを恐れずに使えるようになるかを示すひとつの例です。(Author/Copyright holder: Wesley Fryer . Copyright terms and license: CC BY 2.0)

iPhoneやMacBookのユーザーに、なぜ気に入っているのかを尋ねれば、たいてい「シンプルだから!」という答えが返ってくるでしょう。ですが、追求してみると愛好家やユーザーのほとんどが具体的にどのようにしてシンプルになっているのかは説明できないでしょう。

それは彼らにとって「ただうまく機能するもの」なのだ、とJobs氏なら言うかもしれません。シンプルさを定義したり計測したりするのは簡単ではありません。米国出身のグラフィックデザイナーでデザイン教育者のJoe Sparano氏がこのことをうまく表現しています。

良いデザインは目に見えて明らか。素晴らしいデザインは目には見えない。

多かれ少なかれユーザーの目的を考慮し、その目標に達する最もシンプルな方法を提供するUIデザインこそが、もっとも洗練されたデザインです。デザインのシンプルさというのは、最小限の色数を使うことや余白を含めることだけではありません。ユーザーの心の奥深くに入り込み、そこで理解したことを基にプロダクトをデザインすることなのです。些末な要素を取り除いて、ユーザーが目標を達成するために目標と方法とのギャップを埋めるプロダクトをデザインすることなのです。

シンプルなデザインを達成するための4つの方法

1. 明快さを保つ

ユーザーの目標を理解してデザインする

消費者向けのWebサイトであれ、エンタープライズ向けのプロダクトであれ、UIを明快に保つことがユーザーの成功と満足にとって重要です。

UIが明快であることで、それがどうユーザーの目標達成を手助けをするのかが理解してもらえます。無関係な情報が多過ぎると、ユーザーはWebサイトの閲覧に苦労するでしょう。閲覧開始後の数秒で、伝えたいメッセージとユーザーにとって欲しい行動が理解できるようにしてください。最も注目して欲しいページ内の中核部分にのみ、ユーザーの注意を向けさせましょう。

例として、ドメイン登録業者兼ホスティングサービス会社GoDaddyのWebサイトを、2005年と2016年のもので比べてみました。Webサイトのトレンドは確かにシンプルになりつつありますが、まだまだ発展途上です。

GoDaddyの2005年の雑然としたWebサイトを見ると、コールトゥアクション(CTA)や次のステップが明快でなければ、ユーザーにとって目標に達成する方法を見つけ出すのはいかに難しいかということがわかります。当時のGoDaddyは、大多数のユーザーの目標が何であるかを調べたり評価したりせずに、大量のサービスを提供していたようです。(Author/Copyright holder: GoDaddy, 2005. Copyright terms and license: Fair Use.)

改善された2016年のGoDaddyのWebサイトを見ると、ユーザーの目標のためにデザインすることに集中すれば、いかにメッセージが明確になるかがわかります。デザインを始める前に、ユーザーの目標が何なのかをかならず理解しましょう。(Author/Copyright holder: GoDaddy, 2016. Copyright terms and license: Fair Use.)

2015年9月の時点でマーケットシェア約70%を持つ、世界でもっとも人気のある検索エンジンのGoogleが、2000年代の始めにYahooなど多くの競合を倒した理由はたくさんあります。

そのひとつは、真摯にシンプルさを貫いて明快さを保ったことです。Yahooと比べると、ユーザーが検索エンジンを使う目的に適した非常に明快なUIをGoogleが持っていることがわかります。その目的とはいわずもがな、「検索」です。

一方、Yahooのトップページはユーザーが処理すべき情報がたくさんあります。特に目的なく閲覧してほしいのか、探しているものとはまったく関係ない(邪魔な)人気記事を手当たり次第に読んで欲しいのかがはっきりしません。

Yahooのトップページは一度にあまりに多くのことが起こっているので、主目的からユーザーの注意がそらされてしまいます。(Author/Copyright holder: Yahoo Inc., 2016. Copyright terms and license: Fair Use.)

世界でもっとも人気のある検索エンジンであるGoogleはユーザーの注意をたったひとつのこと、すなわち「検索」に向けています。(Author/Copyright holder: Google, Inc. 2016 Copyright terms and license: Fair Use.)

ポイント:ユーザーの目標のためにデザインして、明快さを維持しましょう。目標と無関係な情報でユーザーを混乱させないようにしましょう。注目して欲しい中核に注意を向けてもらうことでユーザーが何ができるのかを理解してもらいましょう。

2. 「自動化」を活用する

最小限の意識と認知的負荷で済むデザインにする

認知科学者のWalter Schneider氏とRichard Shiffrin氏が、『統制的情報処理と自動的情報処理』という論文で、十分に準備された行動は「自動化」されると述べています。これは、人間は日常的に身についた作業や習慣に関して、ほとんど意識も認知もせずにおこなう傾向にあることを示唆しています。

たとえばトースターです。この発明品はここ数十年ほとんど変わっていません。トースターの使い方はシンプルで、目標を達成するために必要な操作はわずかです。ですからトースターとの意識的なインタラクションは最小限で済み、「自動性」に繋がっていきます。ユーザーは安心して、たいした努力なしに器具を操作できます。

Sunbeamの2005年製ポップアップトースターは、「自動化」のためにデザインされたインターフェイスがいかに廃れないかを示した1つの例です。(Author/Copyright holder: Donovan Govan . Copyright terms and license: CC BY-SA 3.0)

「自動化」を活用したもう1つの例はメッセンジャーアプリです。異なるモバイルインターフェイスのデザインを持つアプリであっても、外見上の違いはほとんどありません。慣れ親しんだインターフェイスと共通する機能があるので、別のメッセンジャーアプリにも簡単に順応できるのです。

同じようなUIの部品で構成された2つのメッセンジャーアプリ。既存の慣習とデザインを活用すると、ユーザーがアプリを使うときの認知過程を自動化できることを示しています。(Author/Copyright holder: Hike Messenger and WhatsApp Messenger. Copyright terms and license: Fair Use.)

ポイント:ユーザーの認知的負荷を最小にするデザインで自動化を活用しましょう。一般的におこなわれている作業とそのプロセスを理解して、可能な限りデザインに組み込んでください。

3. 選択肢を制限する

「情報のにおい」がするデザインにする

米国出身のコンピューターサイエンティストでリサーチサイエンティストであるGoogle社のEd Chi氏は、現在の目標に関連したことしか検知しない傾向が人間にあることを明らかにしました。それは「情報のにおいを追う」と言われています。

最良のUIは、ユーザーの目標を達成するための各ステップを明確に示し、望ましい経路でユーザーを導きます。これは、目標の「におい」を強くすることで実現します。つまり、見せ方を整理し、重要な情報に集中するか目立たせる必要があるのです。

情報のにおい」を強くするには、UIの選択肢を制限するのがいいでしょう。選択肢を制限すれば、ユーザーの躊躇やためらいを取り除き、混乱を無くし、「戻る」ボタンの濫用を減らせます。アプリやウィジェットではそれがよく浸透されており、ユーザーの重要な目標に集中してデザインされていることが多いです。

たとえば、天気ウィジェットでは、通常の天気予報サイトに見られる、情報のにおいの「弱い」要素をすべて取り去るという見事な仕事をしています。ユーザーが本当に求めているのが摂氏(または華氏)で測定された気象情報と場所を変更する設定だけであることを、天気ウィジェットのデザイナーは知っているのです。

The Weather Channelの1999年のWebサイトは、天気を調べるというようなシンプルなユーザー体験でさえ、選択肢が多すぎると質が落ちてしまう、という例です。(Author/Copyright holder: The Weather Channel Enterprises, Inc. Copyright terms and license: Fair Use.)

携帯電話の多くで使われている評判のいいアプリの代表です。選択肢を制限すると、ユーザーがすばやく効率的に目標を達成できて、ユーザー体験も向上することを示す例です。(Author/Copyright holder: Weather Widget Theme Dev Team. Copyright terms and license: Fair Use.)

ポイント:選択肢を制限して「情報のにおい」の強いデザインをすると、躊躇とためらいといったユーザーの負担を取り除けます。

4. 「実行のへだたり」を小さくする

ユーザーの目標達成にプロダクトがどのように役立つかわかってもらう

現代のデザイン思想家でNielsen Norman Groupの共同設立者、Don Norman氏の著書『誰のためのデザイン?(The Design of Everyday Things)』では、ユーザーの目標と目標を達成する手段とのギャップが「実行のへだたり(gulf of execution)」という言葉で説明されています。それはシステムのインターフェイスと人間との心理的なギャップのことです。システムのインターフェイスにおいては、画面に表示されているユーザーの目標に向かうための手段が、ユーザーの心理的な目標にできるだけ合致していなければなりません。

ユーザーがUIを見るとき、そのシステムが「できること」や「できないこと」から目的を見いだせるようになっていなければなりません。システムを使って目標を達成する方法を見つけるのが難しいと、実行のへだたりも大きくなります。実行のへだたりが大きいほど、ユーザーがプロダクトを使うのをやめる可能性も高くなります。

天気予報Webサイトと天気ウィジェットの「実行のへだたり」を比べると、UIがシンプルになるほど「実行のへだたり」も小さくなることがわかるでしょう。「実行のへだたり」が大きくなるほど、ユーザーがプロダクトを使うのをやめる可能性が高くなります。デザイナーは常に「実行のへだたり」が小さくなるように努力すべきです。

前項でふれた天気ウィジェットは、たとえば、現地の気象情報を知るといった等の目的とそこに至るまでの手段の数が少ないので、「実行のへだたり」はとても小さくなっています。一方、Weather ChannelのWebサイトは、ユーザーの目的の数は同じですが、それを達成する手段がさまざまに用意されているであるため、「実行のへだたり」が大きいです。

システムの目標の数が限られているときに手段を増やすと必要以上に複雑になってしまいます。成果を挙げているシステムは、ユーザーのもっとも重要な目標を念頭に置き、人間の記憶の限界と各目標に向けることができる注意の量を考慮に入れています。

ポイント:「実行のへだたり」を小さくするほど、どのようにUIを使うかをユーザーが理解しやすいでしょう。プロダクトをシンプルにして、目標を達成するためのツールとしてどう使えるかがユーザーにわかるようにしましょう。

まとめ

シンプルなデザインは簡単ではありませんし、そうでなくて当然なのです。UXデザイナーの仕事は、ユーザーが楽に目標を達成できる美しく使いやすいデザインを作り出すために、ユーザーの目標からシステムの制約までの複雑なことを深く掘り下げることなのですから。シンプルなものづくりを目指しこれをデザインに組み込むには、必ず以下のことをおこないましょう。

1. 明快さを保つ

2. 「自動化」を活用する

3. 選択肢を制限する

4. 「実行のへだたり」を小さくする

人間の認知力の限界を考慮に入れれば、ユーザーの目標にうまく調和するシステムツールと道筋をデザインすることができるでしょう。


Welcome to UX MILK

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

このサイトについて