言葉を添えなければならない悪いデザイン

日本のサイトを見ると、操作を言葉にして説明しているサイトを多くみます。基本は、UIを見て操作の方法が直感的に、かつメンタルモデル的に経験があるものを採用し、できるだけ言葉をなくす方法を取りましょう。

どうしても新しいUIが出てきた時のみ、オンボーディングを採用し、その際にも言葉を極力へらす努力をしましょう。

ログインボタンの横の「ログアウトしています」の悲しいUI

以下の図は、品川区の図書館サイトの「書籍検索した結果ページ」のスクリーンショットです。

ログインしていない状態での書籍の検索結果ページ

本能的に、ユーザーは検索結果に目をやり、すぐに予約ボタンを押す行動を起こします。しかし、ログインしていないので予約はできていません。

書籍の検索結果ページ:ログインしていないが予約ボタンが押せる

予約ボタンを押したら、ログインのポップアップが出れば良いだけですが、ログイン画面を実装していないので、ユーザーから「予約できないのだけど。」のクレームが入っているのでしょう。

blank
ログインボタンの横に現在の状態の「ログアウトしています」と明記 (T_T)

その解決として、「ログアウトしています」のテキストが、ログインボタンの左横に存在しています。

なんと惨めでしょう。(T_T) ユーザーがどのような心理でこのページに来たのか、コンテキストを理解していないデザインです。仮説ですが、来ているクレームの問題を正確に把握しておらず、言葉を添えることでに対応完了としています。

品川区の図書館のサイトデザインの「残念なUI」に関してYouTubeで解説していますので、ぜひ参考に見てみてください。

You X TUBO(ゆーえっくすつぼ) 月曜ディスカッション「動画で学ぶUX(第13回)デザイン評価 – 図書館サイトを改善してみよう!」

適切な対応の視点が大切

ユーザーが迷ったなどのクレームが入ると、「じゃぁ、とりましょう。」「わかりやすいように、言葉にしましょう。」と、適切な対応をしていないこのようなケースがしばしば発生しています。

これに慣れてしまったUIデザイナーは、わかりやすいだろうと思い、不要な言葉を追加してしまいます。結果的にユーザーが読まない。読んでも意味がわからないというUIができあがります。

予約カレンダーの操作を文字に

「予約」のページに来て、カレンダーが表示されていれば予約する行動をするのですが、なぜか日本のサイトになると、操作が丁寧に説明されていることがあります。

blank
ユーザー操作の文章が並ぶ

最低限の言葉でも意味が通じる

blank
操作に必要な最低限のテキストのみにした例

問題を理解して解決する

UIの改修は、なぜ問題が発生しているのかの視点、正しい解決を発想する(考える)力が必要です。

なぜ、ユーザーはミスをするのか?」を考え、問題解決方法を見つけましょう。クレームにあったこと、言われたことだけをしても駄目です。他社システム埋め込みなどUIの変更ができない場合でも、言葉を添えることが本当に解決方法になっているのか吟味して採用しましょう。

言葉を添えてしまったのは、白い背景が予約可能かどうかわかりにくいためと思われますが、白背景のセルをクリックすると、その後は直感的に操作できるので、改修案は、取っ掛かりの予約可能日についてだけ紹介しています。

Googleカレンダーには言葉はない

全てではありませんが、Googleのアプリには操作方法をテキストにしていることはまずありません。

まずは、見ただけで操作がわかるUIデザインを実施しましょう。繰り返しですが、仮に自作のUIが実装できない場合でも、ユーザーの目に止まるようなUXライティングを心がけましょう。

blank
blank

大本 あかね

UX DAYS TOKYO オーガナイザ/デジタルマーケティングコンサルタント 著書 ・ノンデザイナーでもわかる UX+理論で作るWebデザインGoogle Search Consoleの教科書 毎年春に行われているUX DAYS TOKYOは私自身の学びの場にもなっています。学んだ知識を実践し勉強会やブログなどでフィードバックしています。 UXは奥が深いので、みなさん一緒に勉強していきましょう! スローガンは「早く学ぶより深く学ぶ」「本質のUXを突き止める」です。