『シニアが使いやすいウェブサイトの基本ルール』を読みました

最近UXに興味があり、アクセシビリティやユーザビリティについて理解を深めたかったので、こちらの書籍を読みました。

人は加齢と共に運動能力が低下し、視野が狭くなったり手先が細く動きづらくなったりするので、そのことを考慮したデザインをするためのポイントが記載されている書籍でした。大事なポイントを書き残しておきますが、実際のサイトを参照した説明の割合が多く、良いデザインを言語化してくれているので、実際に見て読むことをオススメしたい1冊でした。

＊構成

レイアウトの基本
ナビゲーション、ボタンに関する基本
リンクに関する基本
検索機能に関する基本
入力フォームに関する基本
その他ルール
実例

＊レイアウトの基本

ファーストビュー
何のウェブサイトなのかといったファーストビューをわかりやすくすることが大切。主要なナビゲーションはすぐに使い方がわかるようにする。サービスロゴを目立つ場所に配置すると信頼性があがる。
目線の動きを考慮
大きな画像に目をとられる傾向が強い。
見出しを斜め読みするだけで情報を取得できる美しい文章構造やレイアウトを意識する。2カラムよりも1カラムの構成のほうがシニアにはわかりやすい。
信頼性アップ
会社情報を明確に表示しておく。また、わからなくなったらすぐに電話で聞けるよう、問い合わせ先が表示されていることも重要。
統一感
誤った操作をして別会社のサイトに飛んでしまったと勘違いしないように統一したデザインにする。操作に戸惑うと離脱しやすくなる。
コントラスト
コントラストが低いと閲覧しにくくなる。ツールを利用してコントラストを判定するのも良い。

フォントサイズと行間
行間を十分に取るなどガイドラインに沿ったデザインにする。（JIS X 8341-3:2016 解説）

＊ナビゲーション、ボタン

カタカナ、アルファベットを避ける
ログイン、ログアウトではなく「会員のかたはこちら」などカタカナ用語を極力避けるようにする。
明白なアイコンを使用
用語でわかりづらいものは、イメージを喚起する画像やアイコンなどを配置して探しやすくする。プルダウンメニューは気づかれない場合もあるため、下部にあるコンテンツが隠れてしまわないようにする。大項目はクリックできるようにしておくなどして操作が妨げられないようにする。
どこからでもトップページに
ロゴがトップページに戻れる知らない場合があるため、ロゴ以外にトップページに戻れるボタンやリンクを作成しておく。
ボタン
主要なボタンはページ上部と下部に配置する。次ページに遷移するボタンは「次へ」だけにしないで、何のページにいくのか詳細に表示しておく。強調したいボタンはボタンらしく見えるよう立体的なデザインにしたり、マウスオーバーでボタンの色が変わるようにすると効果的。
別ウィンドウの利用は避ける
複数ウィンドウが存在することを理解できない人が多いため、別ウィンドウになることは避ける。
リンク
リンクだとすぐにわかるよう標準色を使う。画像をみるとクリックできるものと思い込んでいる傾向が強いため、アイコンや画像にもリンクを張るようにする。
文中リンクは利用しない
集中力を削いでしまう上にリンク先に進んだまま戻れなくなることが多いため、文中リンクは使用しないようにする。
カテゴリの大項目にもリンク
見えやすい大項目をクリックしがちなので、大項目にもリンクを張っておく。
リンク先のコンテンツ内容を適切にする
誤ってページを遷移してきたと思わせないよう、遷移先のコンテンツを適切な内容にしておく。

＊検索機能に関する基本

検索窓
サジェスト機能によって入力文字数を減らし、検索にともなう負担を軽減できるようにする。
結果表示
文字を極力減らす。ファーストビューにサムネイルを付けて「見てみよう」と喚起するようなデザインにする。ユーザーを誘導できるようにわかりやすくすることも大切。
エラー表示
結果が0件だったときはユーザーを突き放すような言葉でなく、「他の言葉で再度お試しください」など次のアクションを示すようにする。
購入しやすさ
類似商品と比較できるようなデザインにする。何順で表示されているのかを明確にする。
絞り込み
選択肢が多いと難解になるため、利用者が少ない項目は設けずに本当に必要な項目だけにする。また、検索条件はシニアが理解できる言葉にする。

＊入力フォームに関する基本

入力ミスを防ぐ
必須項目は必須だとわかりやすくしておく。全角半角どちらで入力されてもシステム側で対応できるようにしておく。
郵便番号
覚えていないひともいるので必須項目にしないほうが良い。もしくは住所から郵便番号を調べられる機能を付けておく。
ボタン
ラジオボタンが1つしか選べないことを理解していない人もいるため、1つしか選べないことを明確に記載しておく。（複数選択できると勘違いしてチェックがはずれてしまうこともある）入力のクリアボタンは誤操作を招く要因になるため、設置しないほうが良い。
完了までのプロセスを明示
どれくらいの作業が残っているのかわかると安心するので、画面上部にプロセスを表示すると良い。いつまでたっても入力が終わらないと思わせたり、入力を途中で断念させないようにする必要がある。

＊その他

ブックマークのかわりに印刷して手にする傾向があるため、印刷ボタンを配置しておいたほうが良い。動画の自動再生は広告と間違われるため避ける。会員登録のハードルが高いため、会員登録しなくても利用可能にしておく。メールマガジンが急に大量に来るようになると困らせてしまうので、メールマガジンは選択させるようにする。

＊所感

シニアに限定せず、見やすいウェブサイトにするためのポイントが書き記されていて大変勉強になりました。デザインの良し悪しを言語化するのが苦手なのですが、実際のウェブサイトを用いて良いポイントが書かれていたので言い回しや考え方など参考になる部分が多かったです。

もぐもぐプログラミング