「UIデザインが悪い」と何が起こる？実体験から考えるUIデザインのあるべき姿とは

はじめまして。ＰＩＶＯＴ Ｃｏｌｕｍｎ 編集部です。
今回のテーマはPIVOTコラムでも頻出しているワード”UIデザイン”についてです。「よく”UIデザインが悪い”って表現を聞くけれど、良し悪しの判断軸がいまいちわからない..」という方に向けて、実際にあった事例を取り上げながら説明していきます。

UIデザインとはユーザーインターフェース（User Interface）の略称で、「ユーザーがプロダクト（またはシステムやサービス）とやり取りをするための接点」を意味しています。

ユーザーはこの接点（UIデザイン）を介してプロダクトを利用するので、UIデザインが何を意図しているかひと目で理解できることが理想です。

ツールなどを触っているときに、何をどう操作すればいいか分からないとユーザーは困りますよね。

ウェブやアプリなどのサービスにおいて、まさにこの「何をどう操作すればいいか分からない状態」は、”UIデザインが悪い”ことに起因するケースが珍しくありません。

結論、”UIデザインが悪い”と、商談や顧客獲得の機会を失います。

というのも、UIデザインの良し悪しによる影響がかなり顕著に出るのが”フォーム”だからです。
お問い合わせや会員登録、購入完了をコンバージョンポイントとしているサイトがほとんどかと思いますが、どれも最終的にたどり着くのはフォームであるため、この部分のUIデザインはコンバージョン率に直結します。

ネットショッピングの際、エラーが出てしまいなかなか入力が完了できなかったという経験はないでしょうか？

筆者は先日、とあるサイトでクーポン配布を行っていた事をきっかけにネットショッピングをしようとしたのですが、肝心のクーポンがなぜか受理されず、結局買い物自体をやめてしまいました。エラー文は表示されたのですが定型文だったためクーポンが受理されなかった理由は最後まで分からず…

・利用条件（◯◯円以上の購入時のみ利用可能）を満たしていません
・会員のみ利用可能なクーポンです
・存在しないクーポンです

上記のようになぜ受理できないのかをハッキリひと目で理解できるようエラー内容として表示できていれば、上記のような離脱（＝商談機会の損失）は起きなかったでしょう。

もう一つ筆者の実体験をあげると、”アンケート”でも同様に困った経験があります。数十項目にもおよぶ質問フォームを長い時間と労力をかけて入力したのに、送信ボタンを押したあとに「エラーがあります」と戻されたときは本当に気持ちが凹みました。

というのも、質問フォームのページが長すぎてどの項目にエラーが発生しているのかがわからなかったのです。

このようなケースを引き起こさない為には、以下のような対策が考えられます。

1. 入力中または入力後即時エラーを表示する
2. ページ上部にエラー発生箇所をまとめて表示する
3. エラー発生箇所まで自動でスクロールアップする
4. エラーが発生しないよう入力制限自体を無くす
5. エラーを未然に防ぐために入力制限を分かり易く記載する

ことアンケートにおいては、多少イレギュラーな回答が混ざっていたとしても、その回答内容には高い価値があります。
集計後の分析作業を考慮し、入力内容に制限を設けるケースもありますが、1件でも多くの回答情報を収集できる価値と分析時の労力を天秤にかけ、アンケートの規模や内容によってどちらを優先すべきかをよく考えておきたいところです。

では、とにかく”どの項目がどのように間違っているか”的確にフィードバックしてくれるフォームにすれば良いかと言えば、そういうわけでもありません。

IDとパスワードが求められるサイトでログインに失敗するとなんと表示されるか知っているでしょうか。

「ユーザーIDまたはパスワードが間違っています」
と表示されるのですが、どちらが間違っているかを明記しないのは、ブルートフォースアタック（総当たり攻撃）と呼ばれるサイバー攻撃をされかねないためです。

さきほど実体験としてあげていたクーポンも「クーポンは5文字で入力してください」と文字数まで明記してしまったら、同じような被害に合うでしょう。

では結局何を指標として善し悪しを判断すればよいのでしょうか。

有名な原則として、デンマークのユーザビリティ研究者のヤコブ・ニールセン氏が提唱した「ニールセンのユーザビリティ10原則」があります。

“UIデザイン”の“ユーザビリティ（＝使いやすさ）”の指標なため、簡単に判断を行うための指標の1つとするのも良いと思います。

いかがだったでしょうか。

今回はフォームにおけるUIデザインついて掘り下げていきましたが、もちろん閲覧するだけのウェブサイトや、スマホなどのアプリケーションなどなど、UIデザインの影響する範囲は多岐にわたります。

長くなってしまったので今回ニールセンの10原則については紹介するだけとなってしまいましたが、とても有名ですので解説もたくさんされています。

ぜひ、調べてみてください。

最後までお読みいただき、ありがとうございました！