クレジットカードフォームの解剖学 | POSTD
オンラインでクレジットカードを使って支払うことは簡単ですよね？この答えはYesでもNoでもあります。Yesの理由は、インターネットが普及された初期からずっとそうしていたから（例：Amazon）。Noの理由は、まったく同じクレジットカードフォームは2つとないからです。 過去20年以上で、私たちはオンライン支払のメンタルモデルを作り上げてきました。「財布からクレジットカードを取り出して、ウェブのフォームに必要なカード情報を入力、そして申込みボタンを押す」というものです。しかし、ユーザーが答えないといけない質問でいっぱいなので、全てを入力するのはとてもややこしい行為になってしまいます。そして言うまでもなく、誰も取扱い説明書なんて読みたくありません。 さまざまな有名ウェブサイト・アプリのクレジットカードフォーム 何かの代金をオンラインで支払う時は、人へ支払う時より2,3倍遅れをとります。端末のボタ
フォームはラベルの配置場所で使いやすさが全然変わる！ユーザーが利用しやすいフォームを徹底考察 | コリス
あなたのフォームは、ユーザーが簡単に利用できますか？ もし簡単でないなら、フォーム入力を完了するのも予想以上に難しいとも言えます。 ユーザーが入力しやすく、そして入力内容の確認も簡単なフォームについての考察を紹介します。 Why Infield Top Aligned Form Labels are Quickest to Scan by anthony 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 フォームは入力前、入力後の分かりやすさが大切 最近のフォームで見かける問題 1つ目：ラベルとフィールドを上から順番に配置した場合 2つ目：ラベルをフィールドの内側に配置した場合 3つ目：ラベルをフィールドの内側のトップに配置した場合 ラベルの配置を内側トップに変えるとどうなるか ラベルを内側トップに配置するのが機能するフォームとは まと
テキスト欄にフォーカスが移動した際のアニメーションをありえないぐらい集めたサンプル集:phpspot開発日誌
Some More Inspiration for Text Input Effects | Codrops テキスト欄にフォーカスが移動した際のアニメーションをありえないぐらい集めたサンプル集。 テキスト入力欄にフォーカスがあたるとラベルがアニメーションしたりといったエフェクトは最近の流行りですが、新しいエフェクトが満載のサンプル集が公開されています。 とにかく一度見ておけばネタとして使うことができそうです。 サイトに実装されたフォームがこんな感じになっていたら、一般の人は驚くと共に、プロが見ても新しい技術を積極的に使っているということでよい印象が得られるのかも。 関連エントリ ドラッグ＆ドロップにまつまるUIデザインのアイデア集 汎用iOS8用アプリアイコン30個セット「Jellycons iOS 8 App Icon Set」
エントリーフォーム最適化（EFO）｜申込が殺到するフォーム17の特徴 - Build up｜コンテンツマーケティング担当者向けメディア
集客そのものを増大させて売上などの目的を達成することも、もちろん大切なことではありますが、今ある集客をより高い確率で売上に転換させる取り組みも同様に大切なことです。 お問い合わせや申込、購入といったアクションはエントリーフォームを通して行われる事が一般的ですが、エントリーフォームを最適化する取り組みのことをエントリーフォーム最適化（EFO）と呼びます。エントリーフォームを最適化して離脱を防ぐことによって今ある集客をより高い割合で売上に転換することが可能になります。 ここでは、エントリーフォーム最適化（EFO）の方法を17ご紹介します。その前にまずはエントリーフォームを最適化する理由を詳しく紹介します。 １．エントリーフォームを最適化する理由 先にも述べましたがエントリーフォームを最適化することで集客力を増やさずに問い合わせ等を増やすことが可能になります。 例えば、毎月100万円の広告費用を
Labelauty jQuery Plugin
A nice and lightweight jQuery plugin that gives beauty to checkboxes and radio buttons and allows custom labels for each status of (un)checked inputs. Labeled Check Boxes Non-labeled Check Boxes Labeled Radio Buttons Non-labeled Radio Buttons
laroux.js - Demos
This project is a jQuery substitute for modern browsers and mobile devices. But instead of offering some wrappers and own dynamics, it simply provides helper functions to achieve the same objectives as jQuery or Zepto. laroux.js is right for you if you: Complain about people who do not know the difference between jQuery and Javascript. Love working with more compact, organized libraries in smalle
ユーザーを苛立たせないフォーム設計の基本 | Accessible & Usable
公開日 : 2014年11月1日 (2014年12月7日 更新) カテゴリー : ユーザビリティ ウェブサイトにおいて、ユーザーにフォームを提示する (情報を入力してもらう) ケースは多々あると思います。その際、フォームの内容が不適切だと、ユーザーは苛立ち、最悪の場合、入力の途中で離脱してしまうことすらあります。 ユーザーを苛立たせないフォームを設計する基本として、どんなことに気をつければよいのか、以下、考えてみたいと思います。 入力項目が必要以上に多くないか？ ユーザーにフォームを提示する際、あれもこれも...とつい多くのことをユーザーに聞いていないでしょうか？必要最小限のことのみを、ユーザーに入力させるようにしましょう。 フォームを通じてユーザーから情報を得るということは、サイト運営側に、何らかの目的があるから、であるはずです。その目的と照らし合わせて各入力項目の必要性や妥当性を検証し
WEBユーザーがサイト利用時にマジでイラつく9つのタイミングと改善術|グロースハックジャパン|Growth Hack Japan
直帰率や離脱率の高さにイラついているのはあなただけではありません。 ユーザーも同じように、もしかしたらあなた以上に酷いUXに対していらだちを覚えているのです。 本日は、WEBユーザーが思わずイラッとしてしまうタイミングとその改善術を9つ紹介します。 6/20最新記事 グロースハッカーが駆使するコンバージョンファネルの使い方（グロースハックに関する最も確実な手引書「4/9」） 【追記】突然のダウン(6/19 17:00現在) フェイスブックのような大規模ウェブサービスになんの前触れもなくダウンされては、ユーザーもイライラが止まりません。 ブラウジング前のユーザー登録 ウェブサイトの会員登録は、障害物競走にとってのハードルと同じです。 ゴールが見えるからハードルを越えていくのと同じように、ビジターに何も見せることなくサイトを開いたと同時に会員登録を求めれば、ユーザーが直帰しても何も文句は言えま
【10選 】jQueryを使ってselectフォームをかっこ良く装飾するプラグイン | Stronghold Archive
どうもこんばんは。Toshikuraです。今回のTipsは【【10選 】jQueryを使ってselectフォームをかっこ良く装飾するプラグイン】です。フォーム関連の連続記事も終盤です。セレクトやチェックボックス関連の装飾用プラグインは数々ございますが、今回比較的使いやすそうなものをピックアップしてみました。もし機会があればご活用下さい。 フォームの使いやすさやデザイン性を向上させる33の方法 これまで何回かに分けてWEBフォーム関連の記事を書いてきましたがフォームの使いやすさやデザイン性を向上させる33の方法としてまとめました。お問い合わせや資料請求等、フォームの最適化ができれば少なからず成果に直結するのではないかと思います。興味がございましたらぜひ。
資料請求（無料）｜ひかりＴＶ
個人情報の取り扱いについて 以下をご一読・ご同意いただいた上で、お申し込みください。 当社は皆様よりお預かりした個人情報を「ぷららプライバシーポリシー」に従い適切に管理するとともに下記の通り取扱いさせていただきます。 当社の個人情報保護に関する責任者及び個人情報に関する問い合わせ先
[JS]実装も簡単、必須入力の有無やメールアドレスのチェックなどフォームのバリデーションをおこなう軽量スクリプト -Validetta
選択しているのが2つかどうか Validettaは、以下の項目がチェックできます。 データが空かどうか。 電子メールのチェック。 数字のチェック。 クレジットカード番号のチェック。 フィールド内の文字数のチェック。 チェックボックスやセレクトボックスの選択数のチェック。 2つのフィールドが同じかどうか。 正規表現を使ったフィールドのチェック。 Validettaの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="validetta/validetta.css" rel="stylesheet" type="text/css" media="screen" > <script type="text/javascript" src="http://code.jquery.com/jquery-late
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Guardian 1.0
Free & Beautifully Human Online Forms | Typeform
http://www.designwalker.com/2010/06/jquery-forms.html