人間は、体験や経験に価値を見いだす生き物です。優れた体験は、時には大金を払ってでも得たいと思うほど、大きな価値を生み出します。
逆に、劣悪な体験は、ストレスの温床になります。お金を貰っても要らないと考えるかもしれません。
今回の主題である、ユーザーエクスペリエンスという視点で見ると、ウェブ上に限らず、様々なプロダクトが溢れかえっています。驚くほど秀逸なものや、目を背けたくなるようなものまで様々です。今回は、こういった要素について考えてみます。
ユーザーエクスペリエンス（UX）とは
日本語では、「ユーザー体験」と訳します。広義の意味では、「一連の操作を行うことへの反応」と定義されます。
- 情報が欲しい。検索しよう！
- 検索方法がわかりやすい！
- 検索語句を入れると、予測が出てきた！
- 検索結果で目的の情報が見つかった！
- 素晴らしい！また利用しよう！
この一連の流れがユーザーエクスペリエンスです。
- 文書作成ソフトを使ってみよう！
- 望んでいないのに勝手に変換される…
- 勝手に箇条書きにされる…
- 変なイルカがでてくる…
- 印刷のレイアウトが合わない…
- 大変な思いをした。もう二度と使いたくない。
この流れもユーザーエクスペリエンスです。
ユーザーインターフェース（UI）との違い
ユーザーインターフェースは、ユーザーエクスペリエンスの一部で、主にユーザーが操作するインターフェース部分を指します。
ユーザーエクスペリエンスデザインがサービス全体の設計を担うのに対し、ユーザーインターフェースデザインは、画面単体での設計を担います。
Android搭載スマートフォン
例えば、スマートフォンの画面をスワイプしてみましょう。現在の端末では、指に吸いつくような、非常に俊敏かつ快い反応を見せてくれるはずです。
しかしながら、数年前は、そうではありませんでした。日本で初めてAndroid搭載のスマートフォンが発売されたころは、タップ、スワイプの動作をひとたび行うと、画面が途端にかくつき、1動作の完了まで数秒待たされることも少なくなかったのです。
これらを体験した人々は、時には嫌悪感さえ抱くような強いストレスと戦わねばなりませんでした。いくら高機能化していても、動作の重さは従来のフィーチャーフォンの比ではなかったのです。
そこから年月を経て、現在の水準に至りました。先程述べたような、黎明期におけるスマートフォンを体験した人が新しい端末を手にしたときの感動は、計り知れないものがあったことでしょう。
このように、優れたユーザーエクスペリエンスとは、単に操作のしやすさなどに限定されるものではなく、感触や音、光、などで、ある種の「気持ちよさ」を与えてくれるものです。
キーボードを押し込んだときのメカニカルキーボードのクリック感、マウスが机を抵抗なく滑っていく快感、ボタンをタップしたときのアニメーション、スイッチを切り替えるときの程よい抵抗と音。
他にも、最近のソーシャルゲームにおける、ゲームをクリアしたときの達成感、他に比べて優れたものを得たときの優越感などは、優れたユーザーエクスペリエンスデザインのひとつです。
Web開発におけるユーザーエクスペリエンス
Web開発において、優れたUXとは何でしょうか？
まず、ページの表示スピードが挙げられます。コンテンツ内容がどんなに素晴らしくても、ページを遷移するごとに10秒ずつ待たされていては、利用したいとは思わなくなるでしょう。
次に、サービスの分かりやすさ。これは難しいことですが、ユーザーが求める目的の情報に対する、分かりやすい導線が必要です。例えば、カテゴリ表示は最たる例でしょう。無数の情報の中から、ユーザーが求めるであろう情報をまとめてひとつの分類として定義しておくことで、情報を探しやすくします。
ユーザーインターフェース的な観点からは、マテリアルデザインが有名です。要素に層を定義し、重要性を明確にしたこともそうですが、ボタンなどをタップしたときに、フィードバックアニメーションがあるのは素晴らしいことです。
こういったことは、もちろんコンテンツのクオリティや価値には一切寄与しません。しかし、タップしたときのアニメーションは、時にはユーザーにとって格別の心地良さを与えてくれるものです。再度サービスを利用したいと思わせる方法は、案外こんなところに隠れているのかもしれません。
また、有名なjavascriptライブラリであるjQueryにも様々な要素があります。slideやfadeなど、要素が現れたり消えたりするときにスムーズなアニメーションを表示するメソッドは、至るところで使われています。
他に、ボタンの間隔や大きさを考えてみます。
ボタン1は標準的な大きさです。恐らくスマートフォンでもタップし辛いことはないでしょう。
続いて、ボタン2は、文字サイズは変化しておりませんが、paddingが0になっています。PCでは問題ないかもしれませんが、スマートフォンなどの小さい端末で操作した場合、「タップし辛い」という感想を与えてしまうことは容易に想像できます。
ボタン3では、サイズを大きくとっています。これは、ランディングページのスタートボタンなどに有効です。タップもしやすく、目立つデザインで素晴らしいのですが、並んだ複数のボタンに適用するのはやめた方が無難でしょう。
次に、ボタン同士の間隔を考えてみます。
これは、双方ともmarginを0にした例です。誤タップや誤クリックを招きやすく、ユーザーにとっては害となり得ます。もしも登録ボタンとキャンセルボタンがこのような配置だったら？とは、考えたくもありませんよね。
色にも課題はあります。例えば、以下の例では、登録のつもりでフォームクリアボタンを押してしまう人が続出するでしょう。
ユーザーにわかりやすく伝えるのも、ユーザーエクスペリエンスの一要素です。
まとめ
優れたユーザーエクスペリエンスを提供することの目的のひとつは、「リピートを促すこと」「また訪れたいと思わせること」ですから、上記で挙げたUIに関することは勿論、優れた記事やサービス、気持ちの良い動作など、様々な面からサービスを見直してみたいものです。