ウェブデザインに限らないが、よく「ユーザ・エクスペリエンス」が重要といわれる。エクスペリエンスは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は気にいって使っているものの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. 人々のニーズにマッチしたヒエラルキーを作る



— 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. 散漫を抑える



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

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. 強力なメッセージを提供する



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

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. 文脈を提供する



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

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. 制約を適切に使う


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氏は、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の方がはるかにいいですね。

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.