シニア層のためのWebサイトユーザビリティ

thumb_senior

以前「笑っていいとも!」の山口智充さんのコーナーを見ていて、ちょっと驚いた事があります。20代~60代の女性の必需品をランキングしたもので、40, 50代女性では5位圏外だった「パソコン」が60代で3位にランクイン。シニア層のインターネット利用率は年々高まってきているのはニュース等で読んでいましたが、これを見てなんだか実感しました。という事で今回はシニア層のWebサイト設計について考えてみたいと思います!


上記「笑っていいとも!」の件で興味を持った私は、シニア層のインターネット利用方法なんぞを調べていたところ、丁度私の母親が「インターネットで買い物がしたい」と言ってきました。彼女は海外に住む私と連絡をとるためにメールやSkype等を使う事ができるので、ある程度インターネットについて理解しているのだと思っていましたが、実際に使っているところを見るとそうでもないようでした…。

母が買い物をしたがっていたオンラインショップは、結構年齢層が上の方を対象にしているはずなのに、非常にわかりにくかったのもあり、「これは不親切だなあ…」と思う事がたくさんありました。そういった点を、改善方法を含めてまとめてみようと思います。今回の記事のサブタイトルは「Manaママ初めてのオンラインショッピング」ですねw

まず、シニア層向けのオンラインショップでの大前提は「知っていて当たり前」は通用しない、という点です。インターネットに慣れている人にとって当たり前の事でも、初めての人にとっては分からない場合がたくさんあります。手間をかけてでも親切に、わかりやすい設計をすることで、結果的にユーザー数の増加や問い合わせの減少に繋がると思います。

新規ウィンドウをさける

新規ウィンドウをさける

リンクをクリックすると新規ウィンドウやタブで表示。特に外部リンクには使われる target="_blank" ですが、「前のページに戻る」ボタンが使えなくなり、どうやって戻るのかわからなくなるようなので、ウィンドウはなるべく1つで展開した方がよさそうです。新規ウィンドウでリンクを開く場合は「新しいウィンドウを開きます」等の注意書きがあると親切ですね。

ファーストビューが大切

ファーストビューが大切

私の母は「スクロールが苦手」と言っていました。理由は縦に長いページを見るとき、毎回スクロールバーをドラッグしてページダウンしていたので、「なんだかめんどくさい」となったようです。「マウスホイールを使えば簡単にスクロールできるよ」と教えるのですが、次見た時はまた一生懸命バーをドラッグしていました。このように、中にはマウスホイールの使い方がよく分からない人もいるようです。ファーストビューは通常のユーザーをターゲットにしているサイトよりも重要性が高まるので、長くなるページにCTAボタンを設置する場合は必ずページトップとボトムに2箇所配置するようにしましょう。

英語のメニューは避ける

英語のメニューは避ける

母の見ていたオンラインショップは、なぜかメインメニューが全て英語表記でした。ターゲット層を理解しているのか疑わしいです。やはりシニア層にとって英語よりも日本語で書かれた方が圧倒的に理解しやすいので、極力日本語で表記しましょう。英語を入れたい場合は飾り程度に使うくらいが丁度いいかと思います。

横文字(カタカナ単語)より漢字

横文字(カタカナ単語)より漢字

「英語がだめなら、それをカタカナで表記すればいいのでは?」と思うかもしれませんが、これにも注意が必要です。私たちが普段聞き慣れている横文字(カタカナ単語)でも、高齢者の方にとっては難しい・聞いたこともない単語と感じてしまうことがあります。例えば「ステーショナリー」より「文具品」、「ランチボックス」より「お弁当箱」、「ヘルプ」より「よくある質問」というように、シンプルな日本語での表記が好まれるようです。

字は大きく

字は大きく

シニア層をメインターゲットにしている場合、フォントサイズは重要なポイントです。16px位だとストレスなく読めると思います。12px以下はもはや読む気もないようでした。メインではないけどシニア層もターゲットにしているという場合はサイト全体のフォントサイズを変更できるボタンを設置するといいと思います。文字サイズ変更ボタンにも気づかない、という事もあるので、全ページのヘッダー部分など、見えやすい場所に設置するのがポイントです。

ひとつひとつの説明をわかりやすく

ひとつひとつの説明をわかりやすく

母とオンラインショッピングをしていて一番強く思った事は、文字の説明だけではわからないという点です。例えばユーザー登録の方法やショッピングの流れについても、スクリーンショット画像や簡単なイラストがあるだけでも伝わりやすくなると思います。私の母の場合はクレジットカードのカード番号、有効期限、セキュリティコードがどれなのか分からなかったようです。フォームの横にクレジットカードのイラストがあれば解決できますよね。説明文全てに対応させるのは難しいと思いますが、画像や動画での説明が可能な部分には極力対応していくといいと思います。

ラジオボタン

ラジオボタン

ラジオボタンもチェックボタンと同じく、「複数選択できるもの」と認識している人もいます。複数選択したいのにできない…なんで?とならないように、「ひとつだけ選択してください」と表記しておくといいでしょう。また、チェックボタンにもいえる事ですが、小さなラジオボタン・チェックボタンをクリックするのが難しいようです。必ずラベルを設定し、文字部分をクリックしても選択されるように工夫しましょう。<input type> の id と、<label> の for の値を同じにすることで設定できます。

<input type="checkbox" id="check1"><label for="check1">チェックボタン1</label>
<input type="checkbox" id="check2"><label for="check2">チェックボタン2</label>

<input type="radio" id="radio1"><label for="radio1">ラジオボタン1</label>
<input type="radio" id="radio2"><label for="radio2">ラジオボタン2</label>

文字入力

文字入力

ショッピングがひととおり終わり、入力フォーム画面にて、以前ユーザー登録をしたことがあるのに認識されない、という事がありました。どうやら全角でユーザーアカウントを入力していたのが原因のようです。このように、半角と全角がわからないユーザーもいるので、「半角英数字で入力してください」と一言あるだけで、何が間違っていたのか理解できるようになります。

パンくずリストを全ページに

パンくずリストを全ページに

今閲覧しているページの位置を階層構造の上位ページへのリンクのリストで簡潔に記述している「パンくずリスト」。ユーザーが今どの位置のページを見ているのかわかりやすいので、ECサイトなど大規模なWebサイトでは取り入れるべき要素のひとつです。階層が深くなるほどサイト内で迷子になりやすいので、全ページ同じ位置に設置しておくといいでしょう。「ホーム > 生活雑貨 > 花瓶」というように、「>」で仕切ることが多いです。

以上の点を踏まえて再度ユーザビリティについて検討してみてはいかがでしょう?シニア層の方にとって使いやすいということは、結果的に誰にとっても使いやすいサイトへと近づくと思います。実際にターゲット層の人にいじってもらうと、制作側では見えない使いにくさが見えてくるので、複数のターゲット層の人に試してもらい、感想を聞いてみるとよりよいWebサイトへと改善できると思います。他にも「こんな事に注意するといいよ!」というアイデアがあればぜひ教えてください!

シェアする

コメント

  • カオリ

    素晴しい着目点の記事です。
    基、こういう記事を待っていました。
    ネットユーザーに高齢の方がどれだけ居るのかと言うのも含めてですが、以外に注目されていない注意点ですよね。
    年齢層の高い人向けのサイトの依頼が来たときに、以外に若いデザイナーは、使い勝手よりも、技術ばかり先行して考えてくれないので、マナさんの様な人が記事にしてくれると、本当に助かりますw
    ちなみに、「半角英数じたいの意味を理解してくれない」という感覚が高齢層ターゲットのサイトの文字入力画面だと強く感じますので、【半角英数「あァAA1等」】と表記していたら、判別も付きやすく判ってもらいやすいと、実感があります。
    あとは、なるべく再入力をさせない、という点ですね。メール登録しないと利用できないサイトは、グンと利用頻度が下がります。
    本当に、全文同意と思いましたw

  • Pingback: 「手回しラジオや太陽電池でスマートフォンを充電する技」から「必要物資・支援要求マップ 311help.com」まで7本。 « fundosi(another person)()

  • http://p-ground.at.webry.info/ あすてぃ

    Manaさん、はじめまして。
    いつも楽しく拝見させていただいています。

    今回の記事、「うんうん」と納得するものばかり。

    うちの母も好奇心旺盛でネットを活用するのですが、私たちには当たり前のユーザビリティーでも、母には難しく、好奇心だけでは先に進めないことが度々あるようです(^^;

    一目で目的の物が見つからないとすぐにページを閉じる。
    ・・・・痛い・・・。。。

    そんな彼女たちに、使いやすいページを提供し、簡単に買い物してもらえれば、経済はまた復活するのでは?!

    そんなことを願いつつ、いちデザイナーとしてシニア層にやさしいサイト作りに励みたいと思いますっ。

  • Pingback: links for 2011-04-19 « 個人的な雑記()

  • http://about.me/godwest/ 上西

    凄くためになりました。

    こういった
    細かいところ大事ですよね。
    っというか細かくはないかw

    僕は、画像リンク等をどうしても使う場合は、マウスオーバーで色が変わるなどして、そこがリンクでわかるようなこともしています。

    Manaさんのサイトでもやられている事と同じですね^^

  • Pingback: 4月20日のおすすめ記事()

  • http://twitter.com/fukano_ke ふかの

    わたしはエンタープライズ向けWebアプリケーションを制作する仕事をしておりますが、
    この記事に共感するところがありまくりですw
    高めの年齢層の人だけに限らず、若くてもコンピュータやインターネットに対して慣れのない人ってのはかなりいるもので、画面設計に毎回苦労しています。
    いつも為になる記事をありがとうございます!

  • Pingback: N. » Blog Archive » Weekly Twitter Log (2011/4/16 窶骭€ 4/22)()

  • 全体として参考になる記事だと思いますが、2点おかしいところがあるように思います。

    > フォントサイズを変更できるボタンを設置
    これは違うでしょう。
    文字サイズ変更ボタンは置き場所をどこにしようとシニアには使われません。
    使われないことを前提としたデザインにすべきです。
    寧ろそれを置いただけでシニア対応した(のでデフォルトの文字サイズを小さくしても良い)とデザイナーが誤認する恐れがあるので「文字サイズ変更ボタンは置いてはいけない」ぐらいの気構えで考えるべきだと思います。
    「文字 大きさ 変更ボタン 必要か」でググってください。

    >「半角英数字で入力してください」
    これもおかしい。
    シニアが半角と全角を使い分けられるのでしょうか?
    CSSでその領域を半角強制したり、サーバ側で半角に自動変換する等の処理を行い、ユーザ側にはどちらで入力しても問題なく使えるようにすべきです。
    半角とか全角といった文言を画面上に表示した時点で負けだと思います。

    パンくずリストも大変有益なものですが、どちらかというと寧ろシニア以外の Web に慣れたユーザのためのものですね。

    こんなつぶやきもありましたので参考として。
    http://twitter.com/teruichi81/statuses/60344425989152769

  • せきさん

    シニア真只中 65歳です。
    着眼点には同感の至りです。
    A)文字サイズ変更のボタンは・・・。
    55歳過ぎれば80%が老眼になるので、必要でしょう。
    でも、3つとも「あ」では何のことかわかりません。具体的な表現があれば有難いのです。
    B)「CSSでその領域を半角強制したり、サーバ側で半角に自動変換する等の処理を行い、ユーザ側にはどちらで入力しても問題なく使えるようにすべきです。」との指摘は同感です。何故全角と半角を区別しなければいけないのでしょうか?区別の必要あるのはHPの運営者側の論理で、閲覧者にとり甚だ迷惑千万だけです。

  • Pingback: 今日のブックマーク | OMIMO.net()

  • チーフデザイナー

    同感いたしました。私の父親(65)も同様にネットショップで買い物しようと、某プロバイダのIDとパスでむりやりログインしようとしておりました。(爆)「ショップのIDを取得して会員にならないとダメよ」と教えましたが、高齢者の意識はこんなものなのかとプチ唖然。。。『全角半角』以前です。PC自体に苦手意識があるようです。
    でも、シニア層はきっとネット生活を楽しみたいはずです。

  • Pingback: WEBデザイナーで知らない人はいないサイト『WEBクリエイターボックス』 | 果汁45%()

  • Pingback: シニア層のためのUI設計についての記事5選 | ThinkFeel Tech()