jdash 2000 site

DTP・Web制作・CSS・マーケティング・スマートフォン・印刷などの色んなものに四苦八苦しながら次なる営業展開を考える営業部所属の人のブログ



今回もフォームの最適化について書いていこうと思います。


先日の「【Web制作】フォームの最適化しようと、いくつか表現を変えてみたテスト【初心者向け】(画像あり)」という記事の引用の中で紹介した「こんなにあった!シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由」(マミオン有限会社)のページで以下のアドバイスが書かれていました。

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

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

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

こんなにあった!シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 | マミオン有限会社-シニアマーケティング、ウェブユーザビリティ評価

なるほど。Backspaceキーが「前のページに戻る」のショートカットキーになっていることに気がつかずに、または、意図せずショートカットキーの機能が有効になってページを移動してしまうというわけですね。


これは確かにストレスになります。


早速紹介されていたページを見て、jQueryのスクリプトを見てみました。

これはこのままでも使えるので、皆さん使ってみると良いと思います。

ページを移動しようとすると、以下の様な「このページから移動しますか? 入力したデータは保存されません。[このページから移動する][このページに留まる]」という確認用のダイアログが出てきます(画面はFirefox)。

20141218-jQueryでフォームページを移動する時に確認する-01


ですが、個人的な見地から、もう少し修正すると更に良くなると思ったので、修正版を公開します。

記事の続きを読む




小杉聖さんのFacebookの投稿を見て、自分が関わっているサイトのフォームを直してみようかなと思ってみた。


シニアだけでなく、いわゆる「初心者だから?」と自称するタイプの人を対象にしたホームページは、ここまでやっていいと思う。さすが・・・!

エラー項目の見せ方が素敵で目から鱗が落ちた。

こういうのってプラグインに頼ってるとなかなかできないよね。

入力欄は統合したほうがいいのも同意。

今は色々なjsライブラリあるし。

「名前と名字」って文言は、わざとなのかなあ?

こんなにあった!シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 | マミオン有限会社-シニアマーケティング、ウェブユーザビリティ評価

小杉 聖 - シニアだけでなく、いわゆる「初心者だから?」と自称するタイプの人を対象にしたホームページは、ここまでやっていいと思う。さ...
投稿 by 小杉 聖.


一気に変えるのではなく、少しずつ変えてみて、何が良いのか考えてみようと思います。


●とあるCMSの標準フォーム

まずはとあるCMSから出力される標準の形。

20141217-フォームの表示のさせ方-01

これって今でも見る形ですけど、「*」が何を表しているのか分かりづらい!! わかるかこんなの!

知っている人なら知っているでしょうけど、「*」は「必須」を意味しています。申し訳程度に「*は入力必須項目です」とフォームに書いてあるけど(それもフォームの末尾に!)、普通の人は分かりませんわ。

記事の続きを読む



●videoタグは複数ソースが設定できて便利

HTML5のvideoタグでは以下のように書くことで複数のファイルソースを指定することができます。

<video>
    <source src="example.mp4">
     <source src="example.webm">
    <img src="example.gif">
 </video>


上記の例だと、

  • 最初に「example.mp4」の再生をトライ
  • 「example.mp4」を再生できない場合、「example.webm」の再生のトライ
  • 「example.webm」を再生できない場合、「example.gif」を表示

となります。

簡単な書き方で複数のソースの指定(フォールバック)ができて便利ですね。


でも、複数のソースの指定そのものが面倒ではないですか?

ファイルも複数用意しなければなりませんし…。今回の例の場合、MP4形式の動画・WebM形式の動画・アニメーションGIFの3種類と、常に時間がないWeb制作者には大きな負担です。

記事の続きを読む



20141214-雪道の自動車運転-01

新潟もかなりの大雪が降ってきた。本格的な冬到来だ。

雪が降ってきた/積もっている時の自動車での運転で安全運転のために実行すべき3つのことを書いておきたい。


●昼間でもライトを点けろ

雪が降り始めると、とにかく道が見えない、車も見えないということになりがち。

特に田んぼの真ん中にある道は、降り積もった雪に風が加わると、地吹雪になって視界が無くなくこともしばしば。

そんな状況の時は昼間でもライトをぜひ点けて欲しい。


なぜか。

ライトを点けると、テールランプも点く。そのテールランプの赤が真っ白な景色の中では目立つからだ。

20141214-雪道の自動車運転-02

昼間ライトを点けることをしない人の言い分はこうだ。

「ライト点けなくても前が見えるでしょ?」

!? 何を言っているのかと。

事故というものは自分が起こすものと、他人が自分に起こすものがあって、いわゆる「もらい事故」を防ぐためにライトを点けるのである。

自分の車がここにいますよ!とアピールせずに、存在を認識してもらわなければ後ろや前から突っこまれても仕方がない。存在がないと思われているのだから。

自分が事故を起こさないようにするのは当然だが、事故を起こされないようにするのも重要だ。

記事の続きを読む



20141212-Adobe-Media-EncorderでWebM動画変換をする-05

WebM形式の動画って需要があるのでしょうか…といきなりネガティブな書き出しですが、直近のお仕事でWebM動画があった方がいいかもしれない案件があったので(主にFirefox方面)、WebM動画を作ってみることにしました。



●WebM形式動画に対応しているブラウザー

WebMってどのブラウザーで対応しているの?という疑問がありますが

  • Chrome
  • Firefox
  • Opera

が対応しています。SafariやInternet Explorerは対応していないです。

デスクトップOSの標準ブラウザーが未対応です(^-^;

なぜこうなっているのかは以下のページを読むと分かります。


記事の続きを読む




ブログ著者

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について

サイト内検索