フォームの離脱率を下げるには (ユーザビリティ実践メモ)
フォームに入った段階で、多くのユーザは商品の購入や、会員の登録など、目的達成のために行動します。 しかし、他に気になる情報が呈示されていると、そこから離脱してしまい、スムーズに目的を達成できない場合があります。 グローバルナビゲーションのようにフォームから画面遷移するリンクは、可能な限りなくした方が良いと思われます。 しかし、フォーム入力中に、ユーザが疑問に思ったことに回答するヘルプなど、情報提示が必要不可欠な場合もあるでしょう。 そうした場合には、フォームから画面遷移することなく、フォームの中で情報提示することが望ましいと思われます。 例えば、フォーム内でのヘルプの見せ方として、javascriptを用いて動的に表示する方法があります。 ヘルプリンクをクリックすると、吹き出しが表示され、その中に情報を提示します。 以上のように、フォームから画面遷移するリンクを排除し、必要な情報はフォーム
PHPで画像アップロード時のプレビュー
CMSでは画像をアップロードする場面が少なくないと思いますが、通常のフォームでは投稿した後にならないと実際のアップロード後のイメージを見ることができません。 そこで、今回要望があって作ることになったんですがファイルを選択した時点で画像のプレビューを表示し、気に入ったものが選択できた時点で他のテキストなどのテータと共に投稿するというインターフェイスを作ってみました。 実際の作り方は以下のとおり。 プレビューの仕組み まず、この仕組みがどうなっているのかを説明しますと、ファイルを選択したイベントでいったんアップロードを行ってしまい画像ファイルを作業ディレクトリに保存します。 そして、その後でJavaScriptでプレビュー領域にimgタグを出力して表示を行います。 ポイントは、アップロードの際に隠しiframeをtargetに指定してすぐにその値を元に戻すという部分の処理です。 それには、以下
テキスト入力エリアにおける空白の価値 (ユーザビリティ実践メモ)
ECサイトの商品検索ボックスなどの入力フォームにおいて、以下のようにテキスト入力エリアに初期値として説明を入れているケースが見られます。 ユーザに入力を促す目的で使われていると考えられますが、この表現を利用しているECサイトで、ユーザに特定の商品の検索を促した際、以下のような行動が見られました。 商品名で検索しようとしたユーザは、まずプルダウンをクリックしました。 ユーザはプルダウンの候補の中で「製品」を選択し、キーワードを入れないまま矢印ボタンをクリックしました。 その結果、カテゴリだけを選んだ状態での検索となったため、キーワードの追加を求めるページが表示されました。 するとユーザは一瞬とまどった様子を見せた後、そのページで改めて製品名で検索し、目的の製品ページにたどり着きました。 その後ユーザへインタビューしたところ、以下のようなコメントが得られました。 キーワードを入れる場所があると
入力文字数の制限を可視化する JavaScript
■ 入力文字数の制限を可視化する JavaScript 好評の、読み込ませるだけシリーズ の8番目。 maxlength 属性とかアプリケーション側とかでフォームの入力文字数を制限していても、ユーザにとっては自分が何文字くらい入力したかがわからないと不便そうなので、汎用的なのを作りました。 フォームにフォーカスが当たると、入力した文字数と入力可能な文字数が表示され、リアルタイムに更新されていきます。 動作サンプル コードは次の通りでして、prototype.js(1.5.0くらい) に依存してます。 var VisualLength = Class.create(); VisualLength.prototype = { initialize: function(attribute) { this.fields = ['INPUT', 'TEXTAREA']; this.attribute
フォーム値のチェックをJavaScriptで簡単かつクールに行う「fValidator」:phpspot開発日誌
fValidator - Alone Simple form using fValidator フォーム値のチェックをJavaScriptで簡単かつクールに行う「fValidator」。 fValidator を使えば、次のように input エレメントの class 属性に 値を指定するだけで入力チェックの機構を実装できます。 <input id="exA_Id" class="fValidate['required']" name="id" type="text"> <input id="exA_cPassword" class="fValidate['required','=exA_Password']" name="cpassword" type="password" > JavaScript で入力チェックというと結構面倒なイメージがありますが、このライブラリを使ってしまえばHT
gmailで添付ファイルが自動でアップロードされるしくみ - bits and bytes
gmailでメールを書くとき、添付するファイルを選んでからしばらくすると、いつの間にか添付ファイルがアップロードされています。 添付するファイルを選ぶと、はじめファイル名が表示されていたのが 自動的にアップロードされて、名前とファイルサイズが表示されています！ 実は、あまり名前も聞かなくなった Google Page Creator がリリースされたときにいちばんびっくりしたのはページの右下にこのgmailの自動アップロードとよく似たしくみがあったことでした。で、さっそく解析してマネしてみたことがあります。今回はgmailでその仕組みを見てみます。 ちなみにその Google Page Creator には、ログインすると右下にこんな ファイルをアップロードするのに使う部分があります。 gmailの場合、メールが自動保存されるタイミングでアップロードされているかんじでしたが、こっちのはBr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
moveme.comのエラーメッセージ（というか表現） - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
