Webデザイナーは、ユーザインターフェースのデザイナーでもあります。そして、近い将来、Webデザイナーにとってその役割はますます重要になるでしょう。
今のWebデザインのユーザインターフェースはナビゲーションと連絡先フォーム程度のシンプルなものですが、新しい技術と標準の台頭によって、より動的でカスタマイズされた体験が求められるようになっていきます。

これは必然的に、ユーザインターフェースのデザインの仕事が増えるということを意味します。そのために覚えておくべき「掟」を紹介しましょう。

1. 明確性の掟

意味が曖昧なインターフェース要素はユーザに避けられる。

01-law-of-clarity

Gmailを使っていますか? 最新アップデートの前には、Gmailのページのトップにはテキストによる非常に分かりやすいナビゲーションがありました。カレンダー、ドライブ、シートなどのGoogleサービスを、ボタンのクリック1つで利用できました。

その後、Googleは「シンプル化」を目指し、なにもかもを抽象的なアイコンの裏に隠してしまいました。結果として、ほとんどの人はそのアイコンに気付かず、Gmailにはサポートリクエストが殺到するようになりました。
人は、自分に理解できないものを避けがちだし、ときには無視したりします。人間の本来の性質です。人を戸惑わせるようなインターフェース要素をデザインするのは避けましょう。それが何なのか知るために悩みたい人などいません。

2. 推奨操作の掟

何をすべきか分かれば、ユーザは安心する。

02-law-of-preffered-action

このTwitterの画面を見て何をすべきか、新規ユーザに分かると思いますか?

当然、ユーザはツイートを始めるでしょう。でも、画面右上の「ツイート」ボタンは意味が曖昧だし(明確性の掟)、左のサイドバーの入力ボックスは周囲にまぎれ込んでいます。これはデザインの立場から見れば、Twitterがユーザに何かを検索させようとしているか、一番目立つインターフェース要素である左のナビゲーションメニューからオプションを選ばせようとしているように見えます。

ユーザに次に何をすべきか考えさせてはならないのです。推奨される操作が明確に示されるべきです。

3. コンテクストの掟

ユーザは、自分が使いたいオブジェクトの近くにインターフェースコントロールがあるだろうと考える。

03-law-of-context

Facebookで名前を編集するにはどうするでしょうか? 右端の「設定」に進んで、「アカウント設定」をクリックし、「名前」を探してから、「編集」をクリックします。LinkedInで同じことをするにはどうするでしょう? 名前の右側の鉛筆マークをクリックします。

ユーザはいつでも、使いたいオブジェクトの近くにインターフェース要素があるだろうと期待します。実生活でも同じことです。ポップコーンを作りたいときは、電子レンジの前に行って、レンジに付いているスイッチを回します。

電子レンジが、「階段を降りて地下室のドアを開けて電気回路ボックスを探し、スイッチG35を引いてポップコーンのプログラムを起動しなさい」と命令するなんてあり得ません(でも、Facebookの名前変更の例はそんな感じです)。

ユーザにとっての使いやすさを考えましょう。編集、変更などが可能なもののコントロールは、その近くに配置しましょう。

4. デフォルトの掟

ユーザは滅多にデフォルト設定を変えない。

Video: danielgill6 (via YouTube)

この着信音に聞き覚えがありますか? もちろんですね。かつて世界で最も人気のあった着信音です。なぜなら、これがデフォルトの着信音であり、人々がデフォルト設定を変えなかったからです。

デフォルトはパワフルです。

  • ほとんどの人は携帯電話の背景画像と着信音をデフォルトにしています。
  • ほとんどの人(あなたも含めて)は、テレビの購入時の設定を変えません。
  • ほとんどの人は、冷蔵庫の温度をデフォルト設定のまま変えません。

人々はデフォルトに気付きませんが、デフォルトが世界を支配しているのです。ですから、デフォルト値は、できる限り有用で実用的になるようにしましょう。人は決してデフォルトを変更しない、と仮定するのが安全策です。

5. ガイド付き操作の掟

ユーザは、頼まれれば、おそらくそのとおりにする。

04-law-of-guided-action

ユーザが自力で何かをすることを期待するのと、具体的に指示してやってもらうのとでは、雲泥の差があります。

例えば、LinkedInは推薦機能を導入したとき、その使い方をユーザに考えさせるのではなく、プロフィールページの真上にとても目立つ行動誘引バナーを表示しました。このバナーが「人は推薦という行為を好む」という事実と結びついて、推薦機能は大成功しました。

教訓:ユーザに何かをしてもらいたかったら、迷わずお願いすること。

6. フィードバックの掟

明確で誠実なフィードバックがあれば、ユーザは自信をもつ。

05-law-of-feedback

簡単な論理です。インターフェースが操作を通知してくれていると感じれば、ユーザは自信をもちます。

良い例がGmailです。ユーザが何かの操作を行うたびに、Learn more(詳細)Undo(取り消し)のリンクなど、明確な通知がフィードバックされます。人は自分の行動を掌握しているという気持ちになり、次も自信を持って、この製品を使おうと思います。

7. 緩和の掟

複雑な操作も、細かいステップに分かれていれば、やる気になる。

06-law-of-easing

左のフォームと右のフォームを比べてみてください。どちらも入力フィールドの数は同じぐらいですが、右の方がずっと使いやすいのです。

長ったらしくて複雑なフォームに入力するのは退屈で面倒だし、見直すのも大変なので、誰でも嫌なものです。でも、フォームをいくつかのステップに分けて進捗状況バーを表示すれば、かなり操作しやすくなります。

これが緩和の掟です。大きな仕事を1つやり通せなくても、小さな仕事を10個ならできるのです。小さな仕事なら気後れせずにできるし、それができれば達成感が得られます。

掟かガイドラインか?

私がこの記事で「掟」という言葉を使ったのには理由があります。この掟を破って好ましい結果を得られたケースを見たことがないからです。

掟を破ると罰が待っています。その罰は、イライラしたユーザにユーザインターフェースの酷さについて罵詈雑言を浴びせられる、という形で現れます。

冗談はさておき、ユーザインターフェースのデザインは繊細で責任の大きな仕事です。でも、この記事の掟を守ればよい仕事ができるようになります。掟を破ると決意するなら、それに値する優れた理由がなければなりません。

あなたにとって、ユーザインターフェースをデザインするときの最大の問題は何ですか?