マミオン有限会社-シニアマーケティング、ウェブユーザビリティ評価-アクティブシニア市場分析やアイカメラ(アイトラッキング)を利用したユーザーテスト

Home > > マミオン公式ブログ

こんなにあった!シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由

2014年12月16日   by stj064 シニア対応,ユーザビリティ

シニアがウェブサイトを利用する際の大きなハードルの一つが、各種「入力フォーム」です。

一般的にシニアの方ほど入力に時間がかかり、また不適切な入力によるエラー発生頻度も高くなることは、ユーザビリティ業界の権威であるニールセンノーマングループのレポートも統計データを用いて指摘しています。

シニアをターゲットとしたウェブサイトの多くはこうした状況を考慮して、入力フォームのシニア対応に力を入れているところが多いのですが、その中でも私個人から見て特に完成度が高いと感じているのが、健康食品の『皇潤』で有名なエバーライフです。

141215_ever0

今回、そのエバーライフの入力フォームで実装されている様々なシニア対応施策について、実装方法まで含めて詳しくご紹介していこうと思います。

1. 各フォームがそこそこ大きく見やすい
2. 必須項目表示がわかりやすい
3. ふりがなが自動的に入力される
4. 住所が自動的に入力される
5. 電話番号欄には数字以外入力できない
6. 生年月日の初期値が50歳に指定されている
7. メールアドレスの補完機能がある
8. エラー入力へのフィードバック内容が具体的
9. 「次へ」ボタンを押すと、間違った項目だけを表示してくれる

補足ポイント
・姓名、郵便番号のフォームを統合する
・全角/半角の自動修正を行う
・誤って「戻る」を押した際の確認メッセージを出す

 

1.各フォームがそこそこ大きく見やすい

141215_ever1
こちらは一般的に見かける入力フォームより、フォームの枠、フォント共に大きめにとられています。

どれほど大きくしているかと言うと、具体的には、フォントサイズが140%(17px)、フォームの縦幅が28pxに指定されていました。入力フォームでは、入力した文字の目視確認作業を行う必要があるため、通常よりも大きなフォントを用いるとよいでしょう。

 

2.必須項目表示がわかりやすい

141215_ever2
必須項目の表記は、しっかりと目立つ白抜きテキストで「必須」と書かれおり、わかりやすくなっています。

よくある※印等では必須入力項目ということがほとんど伝わらないため、それぞれの項目ごとにテキストで「必須」と表示することは入力フォームの基本ですね。

 

3.ふりがなが自動的に入力される

141215_ever3
名前欄に漢字で入力を行おうとすると、すぐ下のふりがな欄にも同時に文字が入力されていきます。

この後に続く住所自動入力機能とともに、キーボード入力の苦手なシニアにとっては、こうした配慮はとても嬉しいものです。

こちらのサイトでは、以下のJavaScriptで実装しているようです。

[JavaScript] フリガナを自動挿入する(Development Reference)

またふりがなの自動入力に関するJavaScriptは、jQueryも含めて様々公開されています。

JavaScript – jquery.autoKana.jsで自動カナ入力する(Qiita)

 

4.住所が自動的に入力される

141215_ever4-1
郵便番号に数値を入力していくと、3ケタを入力した時点でこちらの画像のように右側に候補地のリストが表示されます。

ここでマウスを使って選択することも可能ですし、さらに続けて7ケタ全てを打ち込めば、下の住所フォームに該当の住所が自動的に入力されます。

141215_ever4-2

住所自動入力の こちらのサイトでは、ajaxzip3を用いて実装しているようです。

ajaxzip3(Google Project Hosting)

また住所の自動入力に関するJavaScriptについても、様々公開されています。

郵便番号から住所を自動入力する操作性が世界一簡単なZipAddr(ピエールソフト)
郵便番号を入力すると住所を自動補完してくれるjQueryプラグイン・jquery.jpostal.js(かちびと.net)

 

5.電話番号欄には数字以外入力できない

141215_ever5
電話番号欄には、エラー防止のためにアルファベットやハイフンが入力できないようになっています。

本来ハイフンの必要有無については入力例を見れば判別できるはずですが、特にシニアはキーを打つ際に手元に集中してしまい、完全に入力し終わるまで指示に気付かないことが多々あります。そんなとき、この機能が威力を発揮しそうです。

実装はやはりJavaScriptで以下の要領で行っているようです。

フォームの入力値を数値のみに制限するjavascript(GitHub)

 

6.生年月日の初期値が50歳に指定されている

141215_ever6
プルダウンの選択肢を開いた際の小さなスクロールは、シニアにとって操作が難しいものの一つです。生年月日なので選択肢が多いのは仕方がありませんが、他のサイトの極端な例では、初期値が「明治元年」になっているものもありました…。

こちらのサイトでは、商品のターゲットに近い50歳の生年月日を初期値として指定しているおかげで、スクロールを行わなくても自分の生年月日を選択しやすくなっています。

これは選択肢のoptionタグ内に「selected=”selected”」と指定することですぐ実装が可能です。ターゲット層に合わせてプルダウンの初期値を調整してあげる施策は費用対効果が高いため、過去にも様々なサイトで言及されていますね。

プルダウンメニューの初期値(ユーザビリティ実践メモ)

 

7.メールアドレスの補完機能がある

141215_ever7
メールアドレスを入力する際、@以降に「y」と打つだけで、yahoo.co.jpが候補として出現します。他にgmail.com、hotomail.com、docomo.ne.jpなども補完候補となっており、タイプミスの多いシニアにとっては効果がありそうです。

ここでは入力補完ライブラリsuggest.jsをカスタマイズして実装しているようです。
Javascriptによるオートコンプリート(入力補完)suggest.js(WEBデザイン Tips)

メールアドレスの補完機能については、他にもいくつか方法が紹介されていますので参考まで。

メールアドレス入力フォームにドメインのサジェスト機能をつける(2)(Hack)
メールアドレスのドメイン部分を入力補完 – Email Autocomplete(jQueryプラグインまとめ)

 

8.エラー入力へのフィードバック内容が具体的

141215_ever8
入力内容に不備があった際、フォーカスが外れたタイミングでエラーに対する指摘が表示されます。

このサイトで特徴的なのが、その条件分岐の多さ。例えばメールアドレスの場合は、@マークの有無はもちろん、ピリオドとカンマの違いまでチェックする構造になっていました。

ただ「正しくありません」「無効です」と知らせるだけでは、ほとんどのシニアは修正することはできないと思ってよいでしょう。何が違うのか、どうすれば修正できるのか、できるだけ詳しく伝えようとする姿勢がよく見えます。

エラーのチェックは、基本的にJavaScriptをonblurのタイミングで動かして行っており、特別なEFOのパッケージは使っていないように見えます。

 

9.「次へ」ボタンを押すと、間違った項目だけを表示してくれる

141215_ever9
シニアの場合、フォームのどこでエラーが発生しているのか、見つけるのは一苦労です。

こちらのサイトでは、入力を完了して「次へ」ボタンを押すと、エラーのあった項目のみ残して表示し、修正をうながしてくれます。これなら迷わずにすみますね。

ちなみに上記画像の例では、「グアム」とカタカナで入力してあったものを、すでにひらがなに修正してくれています。

 

さらに改善するための3つのポイント

ここまでご紹介してきたように、エバーライフの入力フォームは「執拗」とも言えるほど、細かいシニア対応施策を丁寧に揃えてきているのがわかります。正直、ここまで多くをしっかりと盛り込んでいるサイトは、私が知る限りでは他にありません。

いま現在の状態でもかなりレベルは高いのですが、さらにこのフォームをよくするために、残されている改善の余地を考えてみたいと思います。

 

姓名、郵便番号のフォームを統合する

特にシニアの方々は文字入力の際に下を向いてしまうため、例えばフォームが苗字と名前で分かれていると、前者の方にフルネームを入れてしまい後からそのことに気づくのです。これは郵便番号や電話番号でも同じ傾向が見られます。

この対策として、HOME’S介護のサイトでは、フォームを統合して1つにしています。

141215_homes
データベースの構成上難しいところも多いかもしれませんが、HOME’S介護では間にスペースを空けるよう指示することで、苗字と名前の区別ができるよう工夫もしていますね。

 

全角/半角の自動修正を行う

エバーライフの入力フォームで一番残念なことは、半角指定の項目に全角入力した際に、それが自動的に修正されることなくエラーと判定されてしまうことです。

多くのシニアにとって、英数文字の全角と半角は区別がつきづらいもの。最近は、この全半角の処理を自動的に行ってくれるところが増えてきました。またジャパネットたかたのフォームでは、全角モードのままでも強制的に半角で出力させるワザを使って対応しています。

141215_takata

 

誤って「戻る」を押した際の確認メッセージを出す

141215_homes2
シニアのフォーム入力操作を観察していると、誤ってページから離脱してしまい、再びフォームのページに戻ったら最初から全部やりなおし…という悲しいシーンによく遭遇します。フォームからフォーカスが外れた状態なのに気付かず、文字を修正しようとしてbackspaceキーを押してしまうのです。

こうした悲劇を防ぐためには、上記のHOME’S介護のように確認メッセージを出す方法がよいでしょう。実装方法も簡単なので、費用対効果が高い対策ですね。

[jQuery] ページを離れる際に確認メッセージを出す方法(18th Tech Note)

 

入力フォームのシニア対応は、ユーザー全員に効果あり!

ここまで、エバーライフの入力フォームで実装されている様々なシニア対応施策(+α)を見てきました。

1. 各フォームがそこそこ大きく見やすい
2. 必須項目表示がわかりやすい
3. ふりがなが自動的に入力される
4. 住所が自動的に入力される
5. 電話番号欄には数字以外入力できない
6. 生年月日の初期値が50歳に指定されている
7. メールアドレスの補完機能がある
8. エラー入力へのフィードバック内容が具体的
9. 「次へ」ボタンを押すと、間違った項目だけを表示してくれる

追加ポイント
・姓名、郵便番号のフォームを統合する
・全角/半角の自動修正を行う
・誤って「戻る」を押した際の確認メッセージを出す

入力フォームの改善は結果がダイレクトに出やすいため、サイトのシニア対応の取っ掛かりとしておすすめです。

また既にお気づきの方もいらっしゃると思いますが、今回ご紹介したポイントは、シニアに限らず、どの年代のユーザーにも一定の効果が期待できます。

今回、ポイントのいくつかは実装方法まで含めて紹介していますので、「シニア対応、どこからやればよいのやら…」という方は、まずは費用対効果の高そうなものから優先的に取り組んでみてはいかがでしょうか。

 


 

【講演】ユーザビリティ評価入門セミナーの講師を担当しました

2014年12月10日   by stj064 お知らせ,講演・セミナー

2014年10月11日(土)、11月1日(土)の両日、株式会社アイ・エム・ジェイ様主催のUX関連セミナー『UXD/HCD ワイワイCAFE』にて、佐藤がユーザビリティ評価ならびにシニアのウェブ利用実態に関する講演・ワークショップ講師を担当しました。

waiwai

セミナーの開催趣旨はこちらです。

UX、デザイン思考、リーンスタートアップのためのユーザビリティ評価入門【10/11開催】 – UXD/HCD ワイワイCAFE(Doorkeeper)
UX、デザイン思考、リーンスタートアップのためのユーザビリティ評価入門【11/1開催】 – UXD/HCD ワイワイCAFE(Doorkeeper)

少子高齢化が進む時代背景のなかで、いわゆる“シニア”の消費行動が存在感を増しています。
幅広い業態における商品開発やサービス成長戦略のなかでシニアが意識され、シニア対応のウェブサイト設計が必要とされるケースも多くなってきました。

シニアを対象としたユーザーテストを実施すると、思いもよらぬ箇所で課題が発見されたり、シニアならでは僅かな使いにくさも明らかになるなど得られるインサイトはとても豊富です。
実はそれらの改善の積み重ねが結果としてサービス全体の洗練につながり、シニアに限らず多様なユーザーの利便性向上が実現できると考えています。

本講座では、シニアマーケティングやウェブユーザビリティの専門家である佐藤 純氏(マミオン有限会社)をお招きし、プロのユーザビリティ評価のノウハウを実践を通してわかりやすくレクチャーして頂きます。

出所:UXD/HCD ワイワイCAFE

 

講演内容

今回のアジェンダ、および配布資料はこちらです。
==========================
■講義(およそ1時間半)
1. ユーザビリティ評価概論
2. なぜシニアに注目するのか
3. シニアのウェブ利用実態
4. シニアユーザーの傾向と対策
5. サイトのシニア対応チェック

■ワークショップ(およそ2時間半)
・ユーザーテストの観察、分析
・問題点のまとめ、改善案の作成
・発表・講評
==========================

ワイワイCAFEシニアユーザビリティ評価 from Jun Sato

今回は『ユーザビリティ評価入門』というタイトルでの募集でしたが、内容としては主にシニアユーザーにフォーカスを当てています。

まず前半の座学では、なぜ私たちがシニアユーザーに着目すべきなのか、そしてシニアユーザーのウェブ利用実態とその対策についてお話しました。

後半のワークショップでは、今回のセミナー用に特別に用意した50~70代のシニア女性3名のユーザーテスト動画を、グループごとに配られたiPadや各自のスマートフォンで観察し、改善提案を行っていただきました。

こちらのワークショップの様子については、主催のアイ・エム・ジェイ様の方でアップされている写真付きの詳細なイベントレポートもぜひご覧ください。

第8回・第9回 UXD/HCD ワイワイCAFE 「UX、デザイン思考、リーンスタートアップのためのユーザビリティ評価入門」開催レポート(マルチデバイスLab.)

 

参加された方々のご感想

参加された方々からは、以下のようなご感想をいただきました。

・シニアに特化したUIの実例を多く紹介いただけたので、再確認と発見がありました
・社内でのUTは被験者が40代までなので、50代以上のUTを見られたのが有益でした
ビッグオーはサービス企画で実践してみます!
・今後シニアにフォーカスすることの意義が自分の中で腑に落ちた気がしました
・シニアのムービーがとても衝撃的でした
・シニアが使いやすい=全ての人に親切であるということを認識できました
・自分の周り(ウェブ業界)がマイノリティであることを実感しました
・サイト改善で忘れがちな流入導線について考えられたことがよかった
・シニアの方をマイノリティと考えていると、本当にこの先厳しいですね

 

マミオンでは、御社の状況に合わせたシニアマーケティングやユーザビリティに関するセミナー、講演、勉強会等の開催を承っております。

ご興味のある方は、お気軽にご相談ください!

 


 

【マミオン通信】2014年11月27日号

2014年12月3日   by stj064 メールマガジン

このメルマガをご購読のあなたならよくご存知の
『ユーザーが迷わないウェブサイト設計のためのガイドライン』。

マミオンがパソコン教室や調査から得られた知見をまとめたこの冊子、
おかげさまで自社サイトでの販売開始から5年が経った現在でも
コンスタントにご注文をいただく人気コンテンツとなっています。

そして今回縁あって、『グラフィック社』様のご協力により
こちらの内容をベースとした一般書籍が発売されることとなりました!

書籍名は、

『シニアが使いやすいウェブサイトの基本ルール』

です!

マミオンは第1章の「基本編」の監修を担当しました。

ちなみに第2章「実例編」については、
シニアを含む各種ユーザビリティランキングを定期的に発表されている
トライベックストラテジー様が監修されています。

今回の書籍化について、ポイントをご紹介しましょう。

・シニアのウェブ利用行動に強い2社が監修!
 →両者の知見が1冊の本で手に入り、多面的な考察ができます

・掲載事例をフルリニューアル!
 →最近のデザインや技術のトレンド、環境などが反映されています

・税込2700円!個人でも購入しやすい価格に
 →『ガイドライン』の8640円よりお求めやすくなりました

これまで『ガイドライン』に興味があったけど
手が出しづらかったという方にはもちろん、
過去に買っていただいた方にもおすすめできる一冊です。

書籍はすでに全国の書店にも並んでいますので、
ぜひお手にとって確かめてみてください。

もちろんAmazon等のサイトからもご購入いただけます。

またブログでは、書籍完成までの道のりや
各方面からいただいている感想等もご紹介していますので
合わせてご覧ください!

=====================
【書籍】監修書籍『シニアが使いやすいウェブサイトの基本ルール』が発売されました
http://goo.gl/nKc6O8
=====================

┌─目次───────────────────────────┐

【1】ITリテラシとIT苦手意識

【2】最近のシニア、ユーザビリティ、ECサイトに関するニュース

└──────────────────────────────┘

※このメールは、弊社ウェブサイトからメールマガジンのお申し込みを
いただいた方と、弊社メンバーと名刺交換をさせていただいた方にお送
りしています。

ご不要の方は、お手数ですが本メールの最下部より配信停止のお手続き
をお願いいたします。

┌┐
└■ 【1】ITリテラシとIT苦手意識
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

「ITリテラシとは、いったいなんだろう?」

パソコン教室で働いていると、毎日考えてしまうこのトピック。

最低限のネットが使えても、
苦手意識があってそれ以上調べようとしない/できない人は、
果たして本当にITリテラシが高いと言えるのか…?

今回は「ITの知識・経験」という軸と、
さらに「新しいものへの好奇心・行動力」という軸で
この問題を考えてみました。

ぜひ参考にしてください!

========================
ITリテラシとIT苦手意識
http://goo.gl/Tx6sEs
========================

┌┐
└■ 【2】最近のシニア、ユーザビリティ、ECサイトに関するニュース
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

シニア向けスマホが今イチ伸びないのに、格安スマホやカケホーダイが人気なワケ 日経トレンディネット

http://trendy.nikkeibp.co.jp/article/column/20141107/1061214/?rt=nocnt

インタビュー&トーク – シニア向けIT活用講座を毎週開催、「音声入力なら若者に勝てる!」:ITpro

http://itpro.nikkeibp.co.jp/atcl/interview/14/262522/111400068/

会場は甲子園…増えるシニア同窓会 〈週刊朝日〉|dot.ドット 朝日新聞出版

http://dot.asahi.com/wa/2014111900069.html

【あさイチ】 高齢者がラノベを電子書籍でよむ理由→「表紙が恥ずかしいから」 – Togetterまとめ

http://togetter.com/li/741406

Webサイトでの適切な商品説明のための3つのヒント - U-Site

http://www.usability.gr.jp/alertbox/product-descriptions.html

視線の移動を極力なくせ!すぐに使える簡単フォーム改善テクニック6選 | EFO・フォーム改善ブログ

https://f-tra.jp/blog/column/4763

アイトラッキングから考えるWebフォームデザインの改善ポイント | The Content Marketing

http://thecontentmarketing.com/eyetracking-study-for-web-form/

┌┐
└■ あ と が き
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

先日、神宮球場に行って
数年ぶりに生の野球観戦を楽しんできました。

ただしプロ野球ではなく、高校野球です!

というのも、母校が秋の大会で好成績を残し、
各地区代表が集う「神宮野球大会」に出場したからです。

高校時代は野球部…ではなく、吹奏楽部だった私。
在籍当時は甲子園のアルプススタンドでも吹いていました。

スタンドから応援するのは
一体感があって楽しかったのをよく覚えています。

今回は大人なのでバックネット裏のいい席に陣取って
解説者気分で高みの見物をしてきましたが、
球場に入ったときの開放感、ワッと上がる歓声は
やっぱり何回味わってもいいですね!

試合は残念ながら東京代表に負けてしまいましたが、
おそらく来年春の甲子園にも出場するので
ぜひリベンジしてほしいところです!

                         マミオン 佐藤


 

Page 1 of 17112345...102030...Last »


ユーザーが迷わないウェブサイト設計のためのガイドライン発売中
アイトラッキング動画発売中
メールマガジンはこちらから
ブログを購読する
公式Twitter