タグ

フォームに関するrechiba3のブックマーク (6)

  • 入力フォームナビキャスト フォームアシスト|EFO、入力フォーム改善

    入力フォームのエラーは離脱の原因です。離脱の対応策であるEFO(入力フォーム最適化)ついて、わかりやすく解説をいたします。 EFOとは?|入力フォーム最適化サービスガイド|フォームアシスト Points EFOとは? - EFOサービス導入のための機能比較と基礎知識。 EFOとはEntry Form Optimization(入力フォーム最適化)の略称。 必須事項を明確にし、入力漏れを減らすUI改善対策。 送信確認とエラー警告を繰り返すことを回避するUX改善対策。 入力の手間を少なくするUX改善対策。 EFOとは?(入力フォーム最適化:Entry Form Optimization) EFOとは、入力フォーム最適化(Entry Form Optimization)の略称です。 【入力の手間を減らし、より短時間で正確に入力完了できるようにユーザに合わせて入力フォームを最適化する事】を指します

  • フォームで離脱させないためのjQueryプラグイン50選|designaholic -Creative Column-

    最近では、エントリーフォーム最適化(EFO)という施策も広まってきましたが、特に購入やサンプル請求、お問合せ等がコンバージョンとなっているサイトではフォームで離脱されてしまってはせっかくの広告や施策が水の泡になってしまいます。 ここではユーザーを離脱させないために気をつけたいポイントとそれを実現するために便利なjQueryのプラグインを紹介します。   まず、入力フォームを作成する際のポイントは、ユーザーにストレスを感じせない事です。ストレスの原因となるものは大きく言うと   入力しづらい、エラーメッセージがわかりづらい、といった操作に関するもの。 どこまでやれば完了なのかわかない、個人情報の扱いが心配、といった心理的なもの。   です。なのでこの点を解消させてあげるフォームを作成すればユーザーが離脱する可能性は下がりますね。 具体的なポイントは以下のような項目になります。   必須入力か

  • フォームのselect要素内をインスタンス検索出来るようにし、美しいデザインにも変更できるjQueryプラグイン・Chosen

    結構便利そうだったのでご紹介。フォームの select要素内に羅列されたoptionから、入力 するだけで結果を表示するインスタンス検索 を可能にするスクリプト・Chosenです。表題 にはjQueryプラグインと書きましたが、この スクリプトにはjQueryプラグインとprototype の2つが用意されています。 optionの量が多くなってしまうことはよくあるので、この手のユーザビリティ向上系スクリプトは多く存在しますが、これはかなり便利ではないかなと思いました。似たようなのもうあるんですかね。 通常のselectボックスでプルダウンさせると検索窓も表示、キーワードを入れるだけでソートしてくれます。いわゆるインスタンス検索が可能になるので大量のoptionが存在してもユーザーの利便性を全く損ないません。 デモ見たほうが早いですね。※追記:日語だとFirefoxのみ動かないみたい。英

    フォームのselect要素内をインスタンス検索出来るようにし、美しいデザインにも変更できるjQueryプラグイン・Chosen
  • フォーム関連要素(1) HTML5で既存のinputタイプに加わった6つの変更点

    HTML5はフォーム関連要素もパワーアップ! HTML5へのバージョンアップに当たり、<form>要素や<input>要素に代表される「入力フォーム」についても、非常に多くの変更が行われました。 もともとアプリケーションプラットフォームを志向していなかったこともあり、HTMLにおける入力フォームは非常に貧弱で、ユーザーにとっても使いやすいものではありませんでした。それを補うため、JavaScriptを用いてリッチな入力フォームを実現するのが一般的でしたが、JavaScriptを用いる方法には「セマンティックが不明確になる」「JavaScriptが動作しない環境では利用できない」といった弱点もありました。 そこで、HTML5ではさまざまな点から入力フォームを見直し、さまざまな機能強化が図られました。具体的には、以下のような点が挙げられます。

    フォーム関連要素(1) HTML5で既存のinputタイプに加わった6つの変更点
  • 入力するのが楽しくなる、アニメーション機能を伴ったフォームを作成するチュートリアル | コリス

    jQueryとCSS3を使って、複数のステップをアニメーションで次々に表示するフォームを実装するチュートリアルを紹介します。 How to Create A Multi-Step Signup Form With CSS3 and jQuery デモページ フォームの下部にある「プログレスバー」の存在もユーザビリティ的に見逃せない存在です。 [ad#ad-2] フォームのデモ フォームは全部で4つのステップで構成されており、さまざまなスパイスが含まれています。 2枚目のフォーム フォームの進捗状況は、下部のプログレスバーに表示されます。 ※個人的には%でなく、2/4が分かりやすいと思います。 フォームの実装 HTML:基構造 フォームの基構造は、4つのステップをそれぞれdiv要素に格納します。 <div id="container"> <form action="#" method="

  • フォームとアクセシビリティ -- ごく簡単なHTMLの説明

    フォームはテーブルと同様、視覚的な表現を伴わないと理解しにくいところがあります。HTML4.0では、フォームの各要素とラベル(説明的な名前)を結びつける手段や、要素をグループ化する手段が提供されました。これらを使うとフォームの内容を論理的に構造化でき、スタイルシートとの組合せで自在なデザインも可能になってきます。まだ未対応のブラウザが多い要素ですが、アクセシビリティに配慮したページづくりのためにも、このような機能があることをぜひ理解しておいてください。 目次: コントロールにラベルを付ける コントロールをグループ化する メニュー項目のグループ化 キーボードによる項目移動 取り上げる要素: label fieldset legend optgroup コントロールにラベルを付ける フォームの入力コントロール(テキストフィールドやメニューなど)は、name属性を持ちますが、それは送信データに名

  • 1