高齢者向けサービスにおけるUIデザイン｜『高齢者のためのユーザインタフェースデザイン』の書評
現在、本業・副業ともにWEBデザイナーとしてデザイン・コーディングをしているゆるけーです。
本業で携わっているWEBサービスが割と高齢者向けのサービスで、ITリテラシーやUIが今の自分と考え方が異なるよなーと思っているなか、『高齢者のためのユーザインタフェースデザイン』という書籍に出会いました。
高齢者関係なく普通にアクセシビリティの観点でも重要な視点がたくさんあり、とてもいい書籍だったので、ざっくり大事だと思った箇所を抜粋しつつ自分で探した事例等をざっと記事にまとめていきますー。
視覚
高齢者になると視力が低下する傾向があります。ただ、視力の低下＝フォントを大きくするだけではありません。
視力の低下は老眼や光覚の減少などより複雑です。
主な視力の低下の具体例は以下のような点。
- 老眼：近く・遠くのものの焦点が合わない
- 周辺視野のぼやけ：画面の端に気づきにくい
- 中心視野の損失：画面の中央が暗くなる
- 光覚の減少：受け取る光量が減り暗く見える
- コントラスト感度の低下：白背景にグレーのテキスト等が見えにくくなる
- 色を区別する能力の低下：視野が黄色に着色。白と黄色・緑と青の区別がつきにくくなる
- グレア（まぶしさ）感度の向上：画面全体が明るくなり画面の視認性が悪くなる
- 明るさの変化に対する適応速度の低下：外出前後の目の明るさの調節が難しくなる
- 微妙な視覚的な標識を識別する能力の低下：MacのDockのアイコンとか認識しにくい
- 眼精疲労の増加：長時間の視聴ができなくなる
- 視覚処理が遅くなり視覚的な集中力が低下：長い入力作業やページをすべて読むのができなくなる
- 視覚的な走査速度の低下：動く要素（カーソル等）を見失う。同じようなアイコンが認識しにくくなる。
必須のテキストの読みやすさを最大化する
大文字と小文字を組み合わせて対比や、情報ごとのかたまりで読みやすくすることがより大事になってきます。
また、小文字については、
font-size:12px;
line-height:1.5;
以上を設定することが推奨されています。
単純化：不要な視覚要素を削除する
Googleの検索ページは検索バーだけで行動がわかりやすいバナーが大量にあるページのように導線や促す行動が多いページだと混乱しがちです。
サイトの目的であるCTA以外の要素は1つ・2つ程度に制限する等、乱雑さを最小限に抑えつつグループ化と余白を使用して情報を整理することが重要。
ビジュアル言語：効果的なグラフィカル言語を作成しそれを一貫して使用する
日本ではSmartHRのデザインシステムが代表的ですねサイト内で、フォントやアイコン、色の扱いなどを一貫して使用することで、視覚的な混乱を避けられます。
近年多くの企業が取り入れているデザインシステムは、フォント・アイコン・配色を統一してボタンやリンク、見出しサイズなどの統一につながります。
慎重に色を使う
テキストリンクのホバーも色が変わる等、より明確な方が良い彩度の高い濃い色を乱用すると視覚的に混乱する可能性があります。なので、配色は慎重に組み合わせます。
具体的には、リンクテキストはリンクと認識しやすい色とホバーしたときの表示も明確にするなどなど。
他にも、コントロール要素を明確にする。主要な要素（リンク・ボタンなど）が目立つようにするなど。
ユーザーが見つけやすい場所に重要なコンテンツを配置する
最近のLPやサービスサイトは大体ヘッダーやファーストビューにCTAがありますね
CTAや入力後のエラーメッセージ等、重要なコンテンツはわかりやすく配置することが重要です。
最も重要なコンテンツはスクロールせずに見えるようにファーストビューやヘッダーに配置することが推奨。
スクロールしなければならないときは注意する
高齢者層には横スクロールのテーブルはわかりにくい…
高齢者にとって、垂直方向のスクロールは視覚的に疲弊し、水平方向のスクロールは気づきにくいもの。
なので、垂直方向のスクロールは最小化し、なるべく長いページは避けることが重要です。
また、水平方向のスクロールは発生しないように。情報をアクセスするために水平方向のスクロールは避けることが推奨です。
運動コントロール
年をとるにつれて腕・手・指で物を走査する能力は低下します。具体的には以下のような点。
- 手先の器用さの低下
- 手と目の協調能力の低下
- 動作速度の低下
- 動きのばらつきが大きくなる
- 腕力とスタミナの低減
ユーザーがターゲットをクリック/タップできることを確認する
高齢になるにつれて、手先の動きがばらつきやすくなるため、クリック可能な領域をなるべく大きくし、クリック可能な領域同士のスペースを空けることが推奨されています。
また、重要なタップターゲットをユーザーの手の近くに配置することも、あまり手先の動きを大きくさせないという点で重要です。
入力ジェスチャーをシンプルに保つ
マネーフォワード クラウドはドロップダウンメニューがクリックで表示する挙動になっています。
ダブルクリックやドラッグ等は、高齢者にはわかりにくいのでなるべく避ける。
また、ホバーでドロップダウンされるメニューは選択しにくいので、ホバーが外れると消える挙動は避けます。
タッチスクリーンデバイスの場合、可能であればアプリ内でジェスチャーについてのトレーニングを提供する
アプリ内デモを提供する。動画のリンクや画像キャプチャ等では高齢者には短期記憶等の低下もあるため、実際の画面上で動きを再現することが推奨されています。
聴覚と発話
高齢になるにつれて聴覚に関しても低下していきます。
- 低音量の音を聞く能力の低下
- 高周波音に対する感度の低下
- 音源の定位能力の低下（スマホの場所がわからない）
- バックグラウンドノイズを除去する能力の低下
- 速い会話を理解する能力の低下
- 聴力の低下＋他の能力の低下＝二重のトラブル
音声・動画系のアプリの場合、高周波音を避け音量の調整もできることが大切です。
一般的なサイト・アプリにおいても、音声読み上げを前提に画像の代替テキストやキャプションを使って画面を見ずに理解できるような配慮が必要です。
認知
高齢になるにつれて、短期記憶力やマルチタスク能力が低下します。
ゆえに、何度もログインする仕様や複雑なサイト構造は混乱を招く傾向があります。
- 短期記憶の減少：とても多くの走査が必要なとき何をするか忘れる
- 能力が下がる長期記憶と想起（例えば学習など）
- 異なる状況での一般化能力の減少
- 気が散るものを無視して集中する能力の衰え：クリックする要素が多く疲れる
- マルチタスク能力の低下
- 空間記憶の減少と注意力のコントロールがナビゲーション能力に影響を与える；遷移がわかりにくいスライドショーを認知しにくい
- 認知的失明の増加：少し画面が変わっただけではわからない
デザインを単純化する
一画面に様々な情報を配置すると、何のためにサイトに訪問したか忘れてしまいます。
なので、重要でない情報を排除や選択肢を少なめに設定することが推奨されています。
また、入力フォーム等では、気が散る要素を取り除き、操作の途中で混乱させるアニメーションや画像・広告は可能な限り排除します。
ナビゲーション構造の単純化
グローバルナビゲーションやヘッダー・フッター等において、最も重要な情報を前に示すことが重要。
ナビゲーションを一貫させ、構造をわかりやすく、かつ階層を浅くしましょう。
深い階層で迷子になるのを防ぎます。
サイボウズ Officeは多様な機能をシンプルにまとめていました
サイトの開始地点・現在地がひと目でわかるように
ブログでよく見かけるパンくずリストはサービスサイトでも現在地の把握に便利です
最初に見ていた画面にすぐに戻れるよう、ホームやページトップに戻るリンクを提供することが推奨されています。
また、現在のページの場所がわかるようにするという点でパンくずリストも推奨。
他にも、ユーザー向けのサイトマップページも、サイト全体の把握・認知がしやすくなります。
ユーザーの記憶に負担をかけないようにする
Offersのログイン画面は以前ログインしたアカウントを教えてくれます
ログインのパスワード等、記憶に負担をかけることはなるべく避けることが推奨されています。
ログインもGoogleやTwitterログインなど充実してきましたが、充実してきたゆえに何でログインしたか忘れがちです。
Offersのように過去にログインした方法を提示する等の配慮も必要になってきています。
ユーザーへのエラーの影響を最小限に抑える
フォームの必須項目がわかりやすいです
フォームの必須項目の表記など、エラーを防止しましょう。
*のような表記は視認しにくいので、必須というテキスト・テキストボックスがあるとよりわかりやすいです。
用語を統一して使用し曖昧な用語を避ける
似たような意味の用語を複数使うと混乱します。なので、同じ意味であれば同じ用語、同じラベル・アイコンは同じアクションを意味するように設計します。
- 同じ言葉＝同じもの
- 違う言葉＝違うもの。
- 同じラベル・アイコン＝同じアクション/意味
強い意味を持つ言葉を使ってページ要素にラベルをつける
CTAボタンの文言も、遷移先が「どういうページか」ではなく「何をするか」を明確に動詞を使います。
❌ 公式サイト
⭕ 問い合わせる
問い合わせるなど動詞ベースのCTA
画面にヘルプを表示する
ページ内で解決しなかった項目については、問い合わせへのCTAやヘルプページへのリンクを配置して、次の行動を促します。
知識
高齢者層やITリテラシーの低い層には、Webでは一般的な用語やアイコンも理解しにくいことがあります。
- デジタルテクノロジーの用語や頭字語に慣れていない：アプリ・アップロード・HDMI・CAPTCHA
- デジタルテクノロジーのアイコンに慣れていない：設定・ハンバーガーメニュー・共有のアイコンは馴染みが無い。言葉のほうが意味ある
- コントロールジェスチャーを知らない：タッチスクリーンとスクロールバーの動きが異なる
利用者によく知られている語彙を使用する
サイト・アプリ内で技術的専門用語を避けます。ユーザーになじみのあるビジネス用語でない限り専門用語を避けましょう。
アイコンだけでなく文言も添える
これらは一般的なアイコンだが高齢者層にはアイコンだけでは伝わらない…
アイコンだけでは意味が理解されない場合があるので、アイコン＋文言で意味をもたせます。
特に、一般的なサイトでよく使われているハンバーガーメニューや共有ボタン、設定ボタンなども高齢者層には理解しにくいもの。
アイコンの下や横に「メニュー」や「共有」などの文言も添えることが推奨されています。
新しいバージョンにしたときのユーザーへの悪影響を最小限に抑える
AD EBiSは旧バージョンに切り戻すボタンもありますサイトの大幅な変更は混乱を招くので、不必要なサイトのリニューアル・更新を避けましょう。
更新する場合は更新頻度と程度・範囲に注意しつつ、徐々に変化させます。
変更を加える場合は段階的に変更して使い方の学習等、負担をかけないようにすることが重要です。
また、新バージョンへのユーザーガイドや古いUIに戻る機能の提供や新機能のチュートリアル等も推奨されています。
態度
高齢者はWebが苦手な層が多く、入力フォームのUIへの配慮やWebで解決できそうにない場合は電話で解決できるような仕組みが重要になってきます。
- リスク回避の傾向
- 頻繁に不満を感じると諦める
入力フォームにおける配慮
入力フォームでは、必要なものだけを尋ね、なぜ情報が必要か等も説明が推奨されています。
また、入力ミスがあっても、エラーメッセージの表記に配慮し、ユーザーを責めない・脅さないことが重要です。
ユーザーがすぐに問い合わせできるように準備する
ベイジでは資料請求・問い合わせ・電話相談と問い合わせ方法が充実
サイト・アプリ内でわからないことがあれば、簡単に連絡できる方法を提供。
特に、高齢者はメールやチャットだと入力の遅さ等がありハードルが高いため、電話でも連絡がとれるようにすることが推奨されています。
最後に
ということで、『高齢者のためのユーザインタフェースデザイン』の読書メモ・まとめでした。
高齢者はもちろんですが、ここ最近ずっと話題のアクセシビリティの観点でも参考になる部分も多く、ユーザー層が高齢者じゃない人でも勉強になる書籍かなと思います。
他にも高齢者を対象にしたアンケートや論文の紹介等いろいろ勉強になる内容があるので、ぜひ読んでみてくださいー。
それでは。👋
Discussion