TOKYO2020は、メダルも過去最高数ということで良い成績で終了しましたね！
もう終了してしまったのでTOKYO2020のサイトを訪れることはなくなったかと思いますが、サイトのオープン当初に訪れ、閲覧して10秒で「あれ？」ってなりました。その指摘を記事にさせていただきます。
細かく見たヒュリスティック評価ではないので、まだ指摘すべき点は残っていますが、この記事では2つの問題をあげています。ひとつは「認知負荷を高めるデザインはしない」、もうひとつは「情報にたどり着くけるUIにする」です。ひとつずつ見ていきましょう。
認知負荷を高めるデザインはしない
TOKYO2020のサイトの”オリンピック情報が受け取れるよ。”ってページです。
<h3>のタイトル、”わたしらし （改行） く”オリンピックを楽しもう”とありますが、明らかに（改行）の位置が変なので読みにくいです。
もしかして、レスポンシブWebデザインでの実装で、ウィンドウサイズによって改行されているのか？と思って、ウィンドウ幅を変えたのですが、どのサイズでも文字の読みにくいところで改行が入る状態になります。意図としてやっているのか？とソースを見ると、逆に何も指定していませんでした。
自然に改行されるのだから仕方ないと思ったのかもしれませんが、Safari,Chromeで見て、タイトルをスムーズに読むことができません。アクセスデバイスの代表格であるiPhone,Androidのサイズ、主要なパソコンの画角だけでも可読しやすい改行されない指定をつけるデザインを担保すべきです。
文字の改行だけで認知負荷がかかる
タイトルの改行くらい大丈夫でしょ？。と制作側は思うかもしれませんが、「読みにくい」ことは「認識しにくい」と言えます。ユーザーは何のサイトかわからない、認知不可が高いサイトはすぐに離脱します。
「改行だけのことじゃん。」と思わず、ユーザーの立ち場でどの様に見えるか確認しましょう。ちょっとの差で、印象も大きく変わってきます。
タイトルは誰が見てもすぐにわかるものにする
改行だけでなく、ユーザーをわかりにくくさせているのは、テキストメッセージです。
「楽しもう！」とメッセージを伝えることは大切ですが、「何のページなのか？」直感的ではありません。
すぐに、何のページかわからなければ、そのページの価値はありません。この確認は、ユーザビリティテストの第一の基本中の基本です。
文章を「”わたしらしく”オリンピックを楽しもう」から「自分だけにカスタマイズしたオリンピック情報を受け取ろう」に変更してみました。
タイトルを変更しただけでも、誰が見ても、すぐに何のページがわかるようになりました。
情報にたどり着けるUIにする
次に指摘するページは、スケジュールページです。
競技の種別が縦に並び、日付が7月21日から8月8日までのオリンピック開催期間が表示されています。
7月21日を表示させると、上記の画像の通り、7月31日までしか表示されません。「空手」が空白になっていたので、横スクロールしていつ開催しているのか知りしたいのですが、テーブルの一番下に行かないとスクロールバーが表示されません。しかし、テーブルの下まで行くと、種別の「空手」が見えなくなります。
マウスが指マークになってスワイプできるのかな？とやってみましたが、 hoverの背景カラーがピンクになるだけで操作はできません。
つまり、「空手」の開催している日を確認したければ、テーブルの下まで行き、7月31日以降を表示させ、「空手」が見える上部に戻らなくてはなりません。スケジュールが予定されている場合は、アイコンをHoverすれば日付はでますが、空欄だと見れません。
みなさんもぜひ、ぜひ、アクセスしてみてください。他にもいろいろと気がつく点があるかもしれないです。
他人事ではないマインドを持とう
今回はオリンピックという大舞台のサイトなので、力が入っていますが、このようなミスやデザインや他も良く散見れます。もちろん、どのデザインでも完璧なものありません。ただ、基本的なUI設計の考え方、ユーザビリティテストを行う上での基本を抑えて実施しておきたいものでです。
ユーザビリティテスト検定講座の受講生の声を聞くと、「テストをする場合と、しない場合がある。」、「基本的な概念のことしか知らなく、ちゃんとしたユーザビリティテストを知らない」という方がまだまだたくさんあります。
検定講座を受講している方はご存知ですが、ユーザビリティテストの基本中の基本は難しくありません。
UXも同様で、難しくはないですが奥が深い世界です。上手にサイトが作れたとしても、改善の視点がなければ、同じものしか作ることはできません。人ごとだと思わず、自戒の念で現場を振り返っていきましょう。
