製品の成功にはさまざまな要素が関連していますが、製品全体のユーザー体験はほかの要素よりも重要です。新しいアプリやサイトを設計するときには、ベストプラクティスを実践することが堅実な方法です。しかし、全体像を描く際、あれば良いが必須ではないデザイン要素はいい加減にしてしまいがちです。ところが、良い経験と悪い経験の違いはこれらの細かいディテールをどれだけ考えてデザインすることに関係してくるのです。
この記事では、視覚的なフィードバックやマイクロコピー、ホワイトスペースに焦点を当てて、これらの小さい、あるいは大きいディテールがなぜデザインのよりわかりやすい要素と同じくらい重要で、製品の成功を左右するかを説明します。
視覚的なフィードバック
視覚的なフィードバックは、大きなデザインスキームの中では見落とされがちですが、実際にはすべての体験の要となっています。フィードバックがない場合、それは適切なインタラクションとは言えません。まったく反応しない人と話すことを想像してみてください。コミュニケーションを取ることができないでしょう。アプリにも同じことが言えるのです。
視覚的なフィードバックがないと、ユーザーを混乱させる可能性があります。
ユーザーが自分の意図する通りに操作ができていると感じられるように、ユーザーの操作に対してつねに何らかのフィードバックをしていることを確認しなくてはなりません。視覚的なフィードバックは、以下のような特徴があります。
- アプリがユーザーの操作を受け取ったと応答します。
- インタラクションの結果を伝えて、視覚的に理解できるようにします。インタラクションが成功したか失敗したかをユーザーに通知します。
ボタンなどのコントロールをわかりやすくする
実生活では、ボタンやコントロール、オブジェクトが私たちの操作に対して反応することで、正常に機能していると予期することができます。ユーザーは、アプリでもこれと同じような反応があることを期待しています。
画像クレジット：Ramotion
操作の結果
視覚的なフィードバックは、操作の結果をユーザーに通知する必要がある場合にも役立ちます。既にある要素を使ってフィードバックを伝えることができます。
画像クレジット：Colin Garven
システムはユーザーに状況を伝えなければならない
ユーザーはいつでもシステムにおける現在の状態を知りたいものです。そして、ユーザーに現在の状態を推測させるのは避けるべきです。適切な視覚的なフィードバックを通して、何が起きているのかをユーザーに伝えるべきです。いつもする軽い操作への反応は控えめで良いですが、あまりしない重要な操作に対しては、よりしっかりとした反応が必要です。
- アニメーション通知により、ユーザーは現状をすばやく理解することができます。
画像クレジット：Eddy Gann
- ローディングアニメーションは、アプリの読み込み状況をリアルタイムで通知するため、ユーザーは何が起こっているかを素早く理解することができます。
ローディングバーはユーザーを引きつけ、アプリがデータを読み込んでいる間の混乱を防ぎます。画像クレジット：Mark
マイクロコピー
マイクロコピーとは、操作の際にユーザーを案内する短いテキストです。マイクロコピーの例として、エラーメッセージ、ボタンのラベル、ヒントテキストなどがあります。一見これらのとても短い文は、全体的なアプリデザインと比べると、あまり意味がないように思えます。しかし驚くべきことに、マイクロコピーはコンバージョンに大きな影響を与えるのです。
あなたのアプリに良いマイクロコピーを書くことは、アプリを正しく動作させることや、UIを簡単で効率的にすることと同じくらい重要です。
あなたが人間であることを示す
あなたのUIを、より温かく機械的でなくする手早い方法は、コピーを人間味あるものにすることです。製品に人間味を感じると、ユーザーはよりあなたのことを信頼しやすくなります。
Yelpは実際の人間が担当していることを示しています。
Airbnbは、人間味があり会話のようです。
失敗したたときフレンドリーで役に立つコピーを使う
エラーがどのように伝えられるかは、ユーザーがあなたの製品を体験する際に大きな影響を与えるでしょう。見落とされがちですが、不十分なエラーメッセージだとユーザーが不満を抱いてしまう可能性があります。
「エラーが発生しました」などのアラートメッセージは、すべてのユーザーにとって理解不能であり、経験豊富なユーザーの場合いらいらする可能性があります。
一方、上手に作られたエラーメッセージは、ユーザーに不満を抱かせず、満足させられる瞬間に変えることができます。したがって、機械的ではなく、ユーザーに適した人間味のあるエラーメッセージにしましょう。
エラー状態では、次に何をするかについて簡潔でフレンドリーで便利なコピーを組み込む必要があります。
ユーザーの不安を和らげる
マイクロコピーは非常に文脈に左右されやすいです。だからこそとても価値があるのです。マイクロコピーは、ユーザーが抱く具体的な質問に答えられる上、不安なことについてその場で説明することができます。たとえば、マイクロコピーは購読やディテールを共有するとき、ユーザを安心させる上で基本的なものです。優秀なマーケティング担当者は、SNSアカウントへの接続やメールアドレスやアクセスを尋ねる際「迷惑メールの送信、自動ツイートなどは行わない」ということは当然であると考えているでしょう。しかし、ユーザーは当然だと思っていません。そのため、ユーザーが自分のメールアドレスを追加したり、Twitterアカウントに接続したりするときには、「私もあなたと同じくらい迷惑メールが嫌いです」と伝えましょう。
このマイクロコピーは、ユーザーの不安要素をたった１文でフォローしています。
ホワイトスペース
ホワイトスペース（またはネガティブスペース）は、デザイナーが要素を配置していないデザインエリアのことです。ホワイトスペースの要素は、画像の周りにあるスペース、マージン、パディング、行間隔やテキストに含まれる文字の間隔などです。多くの人は、ホワイトスペースが貴重なスクリーンを無駄にしてしまっていると考えているでしょう。しかし、ホワイトスペースはUIデザインにおいて欠かすことのできない要素なのです。
UIを理解しやすくする
乱雑としていることは良くないです。インターフェイスが乱雑になると、情報過多になりユーザーに負担が掛かります。ボタンや画像、文章が１行追加されるたびに画面が複雑になります。もし、デザインの一部を意図的に空白にする必要などないと思っている場合は、下の例を見てください。あなたの注意を引こうとたくさんの要素がひしめき合っています。これで、空白がないとどのようなことが起こるかわかるでしょう。
複雑なUIは魅力的ではなく、特に視覚的な階層がない場合には、ユーザーはページを見たいとも思いません。
ホワイトスペースの強味は、人間の注意力と記憶の限界にあります。私たちの短期的な記憶力は、通常約７項目かそれ以下ほどの少ない量の情報を、大体10～15秒、ときには１分ほどの短い時間でのみ覚えておくことができます。。
ユーザーの注意力は貴重なリソースであり、それに合わせて割り当てる必要があります。
もしインターフェイスが乱雑になって、ユーザーが情報過多になってしまった場合は、乱雑なものを減らすことでわかりやすくなるでしょう。十分なホワイトスペースは、乱雑なインターフェイスを魅力的でシンプルに見せることができます。ホワイトスペースはユーザーが一度に見る要素の量を減らし、はるかに閲覧しやすくするでしょう。ホワイトスペースを使用するスキルは、消化しやすい量のコンテンツやコンテンツのまとまりをユーザーに提供し、余分なディテールを取り除くことにあります。
ミディアムは、ホワイトスペースを使用してコンテンツとUIをわかりやすくした優れた例です。
要素へ注意を引く
ホワイトスペースは、デザイン内の要素の周りにスペースを作り出して、ほかの要素より目立つようにしたり、区別しやすくしたりします。ホワイトスペースは、もっとも重要で注意が必要なことを伝えやすくするでしょう。
要素間により多くのスペースを設けることで、より要素に集中させることができます。
Google検索のホームページは、ホワイトスペースを使った素晴らしい例です。このレイアウトでは、主要な要素である検索ボックスを中央に配置し、両側に十分なスペースを入れて強調することで、ユーザーが楽に目標にたどり着けるようにしています。
ほかの要素がないと、すでにある要素がさらに目立つようになります。
関係性を明確にする
近接の法則は、人間の目が視覚的な要素間のつながりをどのように認識するかを説明しています。それによると、近くにあるもの同士は似ているように見えるそうです。私たちは、ホワイトスペースを使ってさまざまな要素間の関係を構築できます。この写真を見てください。ほぼすべての人が、単純に16個のドットがあるのではなく、２つのドットのグループであると認識します。
情報を適切なグループに分けると、閲覧しやすかったり、見やすくなったりします。下の２つのフォームを見てください。右側のフォームでは、15個の項目を３つのグループに分類し、プロセスをより簡単にしています。コンテンツの量は同じですが、ユーザーへの印象は大きく異なります。
画像クレジット：NNGroup
まとめ
デザインは慎重に。アプリのUIにおいて各ディテールに細心の注意が必要です。なぜなら、UXはすべてのディテールが調和したものであるからです。
「ディテールはただディテールなのではありません。ディテールがデザインを形作っているのです。」- Charles Eames氏
