インフィニティソリューションズ株式会社ブログ

エクスペリエンス・デザインの原則

ウェブデザインに限らないが、よく「ユーザ・エクスペリエンス」が重要といわれる。エクスペリエンスはexperience、すなわち経験とか体験を意味するが、具体的に何をどうすればいいのか、分かり辛いのも事実。そこで、TheNextWeb.comの「The Principles of Experience Design and 10 sites doing it right(エクスペリエンス・デザインの原則と正しく行っている10のサイト)」の記事を参考にしてみよう。なお以下で出てくるWhitney Hess氏は、独立系ユーザ・エクスペリエンス・デザイナー、つまりこの道のプロだ。

1. Stay out of people’s way

”Pave the road for an easy ride,” she says. “Your designs should have intentional and obvious paths.” Hess features Tumblr’s home page as a great example of staying out of people’s way. It’s simple, to the point with an easy sign up and if you want, the option to scroll below the fold for reasons you’ll love the service.

1. 人の邪魔をしない

「乗りやすいように道を整理すること」だとWhitney Hess氏は言う。「デザインは国際的で明らかな道がそなわっていなければならない。」Hess氏はTumblrのホームページを人のじゃまをしないいい例としてあげている。シンプルで、簡単なサインアップに絞られており、このサービスのどこがいいのかを見たければ、下にスクロールするというオプションがあるといった具合だ。

Tumblr

— Tumblrは気にいって使っているものの1つ。確かにシンプルなところがいい。

2. Create a hierarchy that matches people’s needs.

Make the most important information the most prominent. Hess cites Mint.com‘s Ways to Save page. Mint uses a disparity of text sizes and colors to draw your eye to the most important information.

2. 人々のニーズにマッチしたヒエラルキーを作る

最も重要な情報を最も目立つようにする。Hess氏は、Mint.comのページを節約する方法を引用している。Mintは、均一でないテキストサイズとカラーを使い、最も重要な情報に目を引くようにしている。

Mint

— Mintは預金、小切手、投資、ローンなどを一括で管理するソフトウェア。ちょっとなじみがないが、メリハリの利いたデザインは参考になる。

3. Limit distractions

Just because items are similar doesn’t mean they should be put together. Hess shows usWanderfly as a great example of a site that limits distractions. The travel sites’s homepage is a self-contained experience where you can set all the parameters you need to with one main call to action- get going. Interestingly, since Hess last checked, Wanderfly has actually made its home page slightly more complicated…But you get the point. What was once on the left hand side used to be the entire home page:

3. 散漫を抑える

アイテムが似ているからといって、隣あわせに置いていいということを意味しない。HessはWanderflyが、散漫を抑えているサイトの良い例だとしている。このトラベルサイトのホームページは、1つのメインのアクション、つまりいざ行こう、を行うための全てのパラメータをセットできるというエクスペリエンスを得られる場所だ。Hess氏が最後にチェックした後、Wanderflyはホームページを少々複雑にしている。しかしポイントは分かるはず。左手にあるものはかつてページ全体を覆っていたのだ。

Wanderfly

— 確かにややごちゃごちゃしてしまっている。でも、トラベルサイトとしては、なんだか操作しているうちに楽しくなっちゃうところは良く出来ている証拠か。

4. Provide strong information

Remember Tropicana’s epic re-branding fail? No one could tell the difference between the types of orange juice due to poor design. Designers need to provide a clear experience for the user. Hess cites Quora’s suggested search questions as a great example of providing strong information.

4. 強力なメッセージを提供する

トロピカーナの偉大なるリブランディングの失敗を覚えているだろうか。デザインがひどかったため、オレンジジュースのタイプ間の差がわからなかった。デザイナーはユーザにはっきりとしたエクスペリエンスを提供しなければならない。Hess氏は強力なメッセージを提供するいい例としてQuoraの推奨型サーチクエスチョンを引用している。

Quora

— こちらは招待者のみのサイトで試してみることはかなわず。

5. Provide Signposts and cues

Never let people get lost. Use sub-navigation tools to make your site incredibly clear to the user. Hess says Neiman Marcus does a great job with very clearly marking where you are in the experience.

5. 道しるべと合図を提供する

迷子にさせない。ユーザにとってサイトが極めてクリアになるようサブナビゲーションツールを使うこと。Hess氏は、エクスペリエンス中にどこにいるかを非常にクリアに教えてくれる点でNeiman Marcusがいい仕事をしているとしている。

Neiman Marcus

— 上部と左部にナビがあって分かりやすい。

6. Provide context

Don’t make the user go searching for it either. Hess shows usAirbnb’s property listing pages as a great example of providing context. On the site, everything you need to know about the property is in one single contained page.

6. 文脈を提供する

ユーザに検索させないようにする。Hess氏はAirbnbのファシリティリストのページが文脈を提供するいい例であるとしている。サイトでは、ファシリティについて知る必要がある全てのものが単一のページで表示される。

airbnb

— 部屋を貸すコミュニティサイトのような感じ。だがみんな気合入っていて、いい写真を掲載している。

7. Use constraint appropriately

“By proactively indicating what’s not possible, you make it clear what is possible,” she says. But just don’t be overly cautious. Hess cites the following airline’s warning as a great example of using constraints appropriately:

7. 制約を適切に使う

「何が出来ないかということを積極的に示すことにより、何が可能かが明らかになる」とHess氏は言う。しかし、慎重になる過ぎないこと。Hess氏は適切に制約を使っているいい例として下記のエアラインのワーニングを引用している。

Airline Warning

— これ、機上エンターテイメントシステムの画面。ビデオを見ようとしたら、このビデオだと、着陸前の電源を切るタイミングまでに終わらない、つまり途中終了することになるけどいいですか、というワーニングだ。

8. Make actions reversible

“There is no such thing as a perfect design. We as designers all make mistakes and we have to have a contingency plan. Ensure that if the user makes a mistake that they’re able to easily fix them,” says Hess.

Hess cites Remember the Milk‘s website as an example of a site that uses “Undos” in its to-do list web app.

8. アクションを可逆的にする

「完璧なデザインなんてものはない。デザイナーとして皆失敗をする。だからコンティンジェンシープランを持っていなければならない。ユーザがミスしても、自分で治せるようにしておくこと」とHess氏。

Hess氏は、to-doリストのウェブアプリで「元に戻す」を使用しているいい例としてRemember the Milkのウェブサイトをあげている。

Remember The Milk

— こちらは軽いノリのタスク管理ツール。

9. Provide feedback

Hipmunk, a flight search engine that has largely been replacing Kayak delivers a great user experience. When you search for a flight, Hipmunk provides a dialogue box to show you it’s working. It also gives you tips on how to use the interface so you can become a better user of the system.

Kayakを大きくリプレースしてきているフライトサーチエンジン、Hipmunkが非常に良いユーザ・エクスペリエンスを提供している。フライトを検索した際、Hipmunkは処理中であることをダイアログボックスで示してくれる。インタフェースをどう使えばいいかのヒントもくれるため、システムをより活用することができる。

Hipmunk

— Kayakは結構使ってたのですが、Hipmunkの方がはるかにいいですね。

10. Make a good first impression

Just like in real life, you don’t get a second chance to make a first impression. For designers, it’s important to set expectations and ease them into the process. Hess shows us Vimeo’s homepage, which is simple and not over-engineered.

現実の世界と同様、第一印象を与えるのに2回目のチャンスはない。デザイナーにとって、期待値をセットし、それをプロセスに落とし込んでいくことが重要だ。Hess氏は、Vimeoのホームページをあげている。これはシンプルで策を労し過ぎていない例だ。

Vimeo