こんなにあった！シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 | マミオン有限会社-パソコン・数学研修、法人研修
シニアがウェブサイトを利用する際の大きなハードルの一つが、各種「入力フォーム」です。 一般的にシニアの方ほど入力に時間がかかり、また不適切な入力によるエラー発生頻度も高くなることは、ユーザビリティ業界の権威であるニールセンノーマングループのレポートも統計データを用いて指摘しています。 シニアをターゲットとしたウェブサイトの多くはこうした状況を考慮して、入力フォームのシニア対応に力を入れているところが多いのですが、その中でも私個人から見て特に完成度が高いと感じているのが、健康食品の『皇潤』で有名なエバーライフです。 今回、そのエバーライフの入力フォームで実装されている様々なシニア対応施策について、実装方法まで含めて詳しくご紹介していこうと思います。 1. 各フォームがそこそこ大きく見やすい 2. 必須項目表示がわかりやすい 3. ふりがなが自動的に入力される 4. 住所が自動的に入力される
入力フォームのプレースホルダーを使ってはいけない
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
タブの正しい使い方
13のデザインガイドラインを守ってタブを使っているサイトにYahoo Financeがある。しかし、AJAXの使い過ぎや改善の余地が残るカスタマイゼーションのページなどを見る限り、ユーザビリティはまだ上げられる。 Tabs, Used Right by Jakob Nielsen on September 17, 2007 Web上でダイアログコントロールを正しく使っているユーザ・インターフェイスを見かけることは滅多にない。ラジオボタンやチェックボックスのように単純なものでさえ、正しく使われていないことが大半だ。ドロップダウンメニューに至ってはもっとひどい状態だし、Flashサイトを台無しにする自作のスクロールバーも後を絶たない。 最近リニューアルされたYahoo Financeのホームページでは、タブを正しく使っている。2箇所ほど抜粋してご覧に入れよう。 Yahoo Financeのホー
全日本＜label＞要素マークアップ検定
19. Matteo Penzo氏のEyeTracking検証結果では http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php 1. Left-Aligned Labels(左寄せ) 2. Right-Aligned Labels(右寄せ) 3.Top-Aligned Labels(上寄せ) ✕ ⃝ ◎ → 項目が少ないならこっち → 項目が多い時に有効 → 一番ストレスが大きい → ストレスが最小、ログイン画面 → スクロールが必要な場合とか → 使っちゃダメ 20. 人間工学的観点では、視点の動きが重要 - Path To Completion - 視点の導線は一本に。 http://www.slideshare.net/lorielue/form-design-best-practices-t
わかりやすい「エレベーターの開閉ボタン」ってどんなんだろうね？ | fladdict
Twitterで「ボタンと間違いやすいサイン」について呟いたら・・・ いつのまにか「間違いやすいエレベーターボタンのデザインの話」に巻き込まれてたでござる。 面白そうだったので、自分でも考えてみたり。コアコンセプトは以下のような感じ。 安全側にマージンを設ける 表現の為に安全を犠牲にしない 迷ったらコンサバに。チューニング芸で頑張る。 視覚的／言語的にハンディキャップがある人にリスクを負わせない。「ってか、そこは周囲の人で吸収する社会にしようぜ！」という思想を、そこはかとなく埋め込む。 ボタンの文言とか 「開く＆閉じる」や「開＆閉」は、漢字が似てて視認性が悪いのでボツ。「あける＆とじる」や「あける＆しめる」は、「る」が被るのでボツ。「Open & Close」は視認性が悪いし子供がわかんないのでボツ。 で「ひらく」と「しまる」に決定。 「とじる」や「しめる」じゃなくて「しまる」にした最大の
ウェブサイトでやってしまいがちなユーザビリティのミス
ウェブサイトでやってしまいがちなユーザビリティの9つのミスをSmashing Magazineから紹介します。 9 Common Usability Mistakes In Web Design 下記は、その意訳です。 1. クリックできるエリアが小さい リンクのクリックできるエリアが小さいと、ユーザーはクリックするのが非常に困難です。 解決方法 リンク箇所にpaddingなどを設けて、クリックできるエリアを大きくします。 2. 間違った目的のためのページネーション ページネーションは、内容を複数のページに分ける時に使用します。 しかし、最近ページビューを増やす目的でページネーションを設置しているサイトがあります。これには問題点が2つあります。 一つ目は、1つのコンテンツを読むのにページをロードしなくてはならないこと。二つ目は、SEOと関係があります。ページのインデックス付けを行う際、ペー
WEBサイトのユーザビリティ テストツール「GhostRec」の日本語版を試してみた
サイトのユーザビリティ調査をおこなうために、業者さんに依頼するとなると、結構な金額がかかってしまうものですよね。少し前まで、ユーザビリティテストをおこなうのは資金的に余裕のある大企業だけ、というのが主流でしたが、いまでは中小企業でも必要性がでてきています。 そこで世の中に出てきたのが、安価にテストをおこなうことができるユーザビリティ テストツール。 そのツールのひとつである、WEBサイトのユーザビリティ 調査ツールGhostRecを、当サイトでも過去にご紹介しましたが、このツールの日本語版がリリースされていました。日本語版も１００PVまで無料で使うことができるので、早速試してみました。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! WEBサイトのユーザビリティテストをおこなえる「GhostRec
【スマートフォン】 図解！今すぐ直せる、WEBフォーム 6つの課題 (ユーザビリティ実践メモ)
スマートフォン端末の普及で、問い合わせ・申込みなどのWEBフォームがスマートフォンで使われる機会は今後も増えていくでしょう。その際、PC向けに用意していた既存のWEBフォームをそのままにすると、どんな問題が発生するでしょうか？ 今回は、弊社コンサルタントの自主調査から、スマートフォン端末（特にiPhone）でのWEBフォーム利用時の6つの頻出課題をご紹介します。 多くのWEBフォームでは、項目名が入力ボックスの横に配置してあります。 PCでは全く問題のないレイアウトですが、iPhone端末では入力ボックスをタップしてズームインするとラベルが見えなくなり、非常に入力しにくいものになってしまいます。 【改善案】＜推奨＞入力例を入力ボックスの上または下に配置する項目名（ラベル）を入力ボックスの上部に配置する ※項目名の位置が変わるとPCで見にくくなるケースも想定されるため、ご注意ください 課題2
コンテキストをデザインする意味 | 人間の真ん中
2012年6月20日水曜日 コンテキストをデザインする意味 人には学習する力があります。 ・このボタンを押すとこう動く ・この矢印の先にはこれがある ・このリンクをクリックするとこれが開く ・この画面をスクロールするとこれが見える ・この色の表示はこういう意味だ ・この大きさの文字はこういう意味だ もちろん初めて訪れるユーザーにそれが理解されるはずはありません。トーンもマナーも、ボタンの色も画面構成もインタラクションも、全てが初めての体験だからです。 しかし、2回目以降に訪問した場合はどうでしょうか。初回訪問時の経験を忘れていなければ、迷わずに操作できるはずです。 これはWebサービスにとって非常に大切なことだと思います。Webサービスは、2回、3回と繰り返し訪問され、繰り返し利用してもらうことで、価値が高まっていくものだからです。 では、それを実現する為にはどうすれば良いのでしょうか。
ウノウラボ Unoh Labs: ECサイトのユーザビリティ・ガイドライン
こんばんわ、Sashaです。 最近、ECサイトのリニューアルを計画するお手伝いをする、という仕事がありました。特にユーザビリティ的な観点から、どんなことを網羅したらこのリニューアルを成功させることができるだろうか、ということを考えながら、様々なブログを参考にしたり実際のECサイトを検証したりしていたら、以前私が紹介したユーザビリティ・ガイドラインのようなチェックリスト的なものが出来上がったので、もしかしてどこかのだれかのお役に立つこともあるかもしれない、と思い、ここに紹介させていただきます。 まず、ECサイトで実現したい基本的な目標をあげ、その目標に沿って細かく、網羅していきたい事を列挙していきました。 基本的な目標とは、次の5項目です。 見つけたい商品・情報を見つけやすくする ユーザーの労力を極力削減する 買いたい気にさせる 購入までのプロセスを簡単にする オンラインショッピング
効果的なナビゲーションを設計する5つの大切なポイント
How To Design Effective Navigation Menus [ad#ad-2] 下記は各ポイントを意訳したものです。 Positon -ポジション Simplicity -シンプル Wording -ワーディング Color -カラー Icons -アイコン [ad#ad-2] Positon -ポジション ナビゲーションをページのどこに配置するかは、非常に重要です。 ユーザーがページを見る際にある特定のパターンがあります。ユーザビリティの大家ニールセンによるFパターンが有名です（F-Shaped Pattern）。これは、ユーザーがページを走査する際、上部と左部に（Fの文字のように）フォーカスを合わせるというものです。 こういったパターンを理解し、それがどのように機能するかを学び、何を期待するべきかのアイデアを得るために使います。数多くのサイトを見て、ユーザーに配慮
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
転職・退職代行マガジン -