スマホサイトのEFO（フォーム最適化）で爆発的成果を出すための５原則 | LPO研究所
LPO研究所所長の鎌田です。 スマホサイトを用意するのがもはや当たり前になりつつある昨今ですが、スマートフォン対応を急ぐあまり、問合せフォームのユーザビリティがないがしろになってしまっているサイトをよく見かけます。 スマホユーザーの環境は、PCユーザーに比べてあらゆる点でシビアです。いい加減なスマホ対応をしただけでは、そうそうコンバージョンのアップにはつながりません。 下記の事例をご覧ください。 これは、あるブライダル系サービスのPC向け問合せフォームをスマホ最適化したところ、スマートフォンからのコンバージョン率が３倍以上になった事例です。このように、スマホユーザー向けに問合せフォームを最適化するだけでも、コンバージョン率はしっかり上がるのです。 今回は、弊社でスマホ向けフォーム最適化を行う際にいつも心がけている「５つの原則」について、具体例を交えてご紹介します。あなたのスマホ向けフォーム
入力フォームの工夫 - ワザノバ | wazanova
http://googleresearch.blogspot.com/2014/07/simple-is-better-making-your-web-forms.html 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約2時間前 今回、Googleのチームが、アイトラッキングシステムの利用やユーザインタビューを通じて、入力フォームのユーザビリティについて実験しています。参照しているのは、2010年にスイスのUniversity of Baselのチームがまとめた "20 guidelines to optimize web forms" です。2000年代のアカデミックな研究成果をもとにまとめられたものですが、現在もまだ当てはまるものと、ここ5-10年で変わってきているものがあり、興味深いです。最近は、スマホ
JavaScriptで「パスワードを表示」機能を実装してみる - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 通常なら文字が伏せてある状態のパスワード入力フォームですが、 入力したパスワードを確認する為の「パスワードを表示」機能を JavaScriptで実装する為のメモです。（jQuery使用） ざっくりとした仕掛け IE兄弟はinput要素のtype属性をいじれないらしい textとpasswordを並べて表示/非表示をトグルする コード抜粋 ざっくりとした仕掛け チェックボックスにチェックを入れると、 パスワードのtypeがtextに切り替わって内容が確認出来るようになる仕組み。 type直接いじれば楽じゃーん。 そう考えていた時代が僕にもありました。 IE兄弟はinput要素のtype属性をいじれないらしい ところがIEはinput要素のtype属性を弄ろうとするとエラーになります。 その為jQueryでも、attr()で同様の処
jquery.formsaver.js by hackprime
$(".save_button").click(function () { $("#form_id").saveForm(); }); $(".restore_button").click(function () { $("#form_id").restoreForm(); }); Requirements: jQuery 1.0+ LocalStorage support (IE 8.0+, Firefox 3.5+, Safari 4.0+, Chrome 4.0+, Opera 10.5+, iOS Safari 2.0+, Android 2.0+) JSON support (IE 8.0+, Firefox 3.1+, Safari 4.0+, Chrome 3.0+, Opera 10.5+, iOS Safari 4.0+, Android 2.1+) or JSON.js
【保存版】問合せを劇的に増やすエントリーフォーム最適化（EFO）15の方法｜MarTechLab（マーテックラボ）
皆さんこんにちは。ギャプライズ鎌田（@kamatec）です。 今日は過去私が数百社という企業のプランニング・運用をしてきた中で実証した、 最も「手早く」「確実に」コンバージョンを伸ばす方法をご紹介します。 それがEFO、つまり「エントリーフォームの最適化」です。 Webサイトをリニューアルしなくとも、LPを作らなくとも、 エントリーフォームを変えるだけでコンバージョンは劇的に変わるのです。 実際の事例をいくつかご紹介しましょう。 Case1：ブライダル系サービスのEFO事例 http://www.primavera-wedding.co.jp Case2:ギャプライズクリックテールサイトのEFO事例 https://contentsquare.gaprise.jp/ Case3:システム系BtoBサービスのEFO事例 これらの事例はいずれも変更したのはエントリーフォームだけです。 特にフォ
全日本＜label＞要素マークアップ検定
Web入力フォームの縁の下の力持ち、Label要素をマスターするための検定試験です。 仲間内の勉強会で、ちょっと遊びすぎましたｗRead less
高度なファイルアップロード機能を提供·Fine Uploader MOONGIFT
Fine UploaderはJavaScript製、GPL v3のオープンソース・ソフトウェアです。 HTML5になってファイルのアップロード処理は大幅に改善されました。特にドラッグ&ドロップによるファイルアップロードは便利です。そんな機能をさらに便利にしてくれるライブラリがFine Uploaderです。 デモです。ファイルの選択またはドラッグ&ドロップでリストに追加できます。追加後、即アップデートが開始されます。 デザインの拡張性は高いです。 エラーのキャッチもできます。 拡張子によるテストにも対応しています。 画像のサムネイルビューもあります。 アップロード上限の制限に対応しています。 Fine Uploaderを使えばファイルアップロードにおける大抵のニーズには対応できるのではないでしょうか。JavaScriptで細かくカスタマイズしたり、コールバックを使って独自の仕組みを組み込む
HTML5 Forms の type 指定がデスクトップ IMEに影響するという話 - NyaRuRuが地球にいたころ
最近やっていた仕事について，一通りリリースが終わって誰でも試せる段階になったので書いてみる．Web アプリ開発者の人や，IME 作成者の人には影響があるかも知れない．ただし Windows デスクトップを相手にしていなければ，ここで読むのをやめてもなんら問題はない． 最近 Chromium と Firefox にパッチを書いて，HTML5 Forms の type 指定が InputScope として TSF ベースの IME (いわゆる Text Input Processors; TIP) やソフトウェアキーボードに通知されるようにした．これは，基本的に Windows 8 上での Internet Explorer 10 の動作に合わせたものである．具体的には，以下の環境で，各種ブラウザが InputScope をサポートするようになった． Microsoft Internet Ex
input:file 要素を表示しないで、ファイルをアップロード | @jsakamoto
「Upload image...」と書かれたボタンをクリックすると、ファイル選択のダイアログが表示されるはずだ。 そこで .png や .jpg 等、適当な画像ファイルを選択してOKすると、即アップロードが始まる。 アップロードが完了すると、そのアップロードした画像をそのままページ上に表示する、そういうアプリになっている。 ※画像以外のファイルもアップロードできてしまうが、あくまでサンプルなので、画像以外がUpされた場合の対処とかは行っていない。ご勘弁を。 ※アップロードした画像はどこにも保存はしていない。そのアップロード結果のページを生成するときに img 要素の data uri を生成しているだけである。 この Web サイトのポイントは、Adobe Flash や Microsoft Silverlight、Java などのプラグインを使うことなく、ごくごく単純な input ty
maxlengthを使ってはいけない。特にパスワード入力欄で使っちゃ駄目！ - Qiita
今日自分が体験したトラブル事例に、ユーザビリティ向上のための気づきがあったのでメモしておきます。 ※本文よりまず、このコメント、こっちに言いたいことが集約されてるのでまずはこっちを読むと早いです。 ※本文よりまず、このコメント、こっちに言いたいことが集約されてるのでまずはこっちを読むと早いです。 ※本文よりまず、このコメント、こっちに言いたいことが集約されてるのでまずはこっちを読むと早いです。 事例：登録時のパスワードでログイン出来ない！？ 今日、とあるWEBサイトでユーザ登録を行った際に、登録時に入力したパスワードでログイン出来ないというトラブルがありました。 普通は自分の入力ミスを疑うところですが、登録もログインもコピペで入力しているので入力ミスはありえ無いと思っていました。 お問い合わせフォームからバグ報告 というわけでこれはバグだろうと、お問い合せフォームから以下のような内容の報告
Behave.js
What? Behave.js is a lightweight library for adding IDE style behaviors to plain text areas, making it much more enjoyable to write code in. Supports Partial IE6, IE7+, Firefox 8+, Safari 4+, Chrome X+, Opera 12 No Dependencies Custom Code/Behavior Fencing Hard and Soft Tabs Auto Open/Close Parenthesis, Brackets, Braces, Double and Single Quotes Auto delete a paired character Overwrite a paired ch
GitHubのようなtextareaの補完機能を実装する - カーソル位置の取得 - Qiita
続編 JavaScript - Qiitaのtextarea自動補完がOSSになりました GitHubのコメントでは@と入力するとカーソルの下に入力補完が出現する。さらっとやっているが、実はこれが結構難しい。なぜ難しいのかというと、JavaScriptではカーソルが何文字目にいるかは分かるが、 カーソルのXY座標を取得するAPIが存在しない からだ。カーソル位置が分からなければ、適切な位置に補完候補を表示することができない。では一体どうすればいいのか？ 今回Qiitaではコメント欄でのメンションの補完機能を実装した。本稿では前述の問題を解決するために用いたテクニックを解説する。 ちなみにこのメンション補完機能はチーム用プライベートQiitaである「Qiita:Team」でも勿論使える。現在絶賛無料トライアル実施中なので、興味を持たれた方はそちらも使ってみて欲しい。 要約 textarea内
意外に知らないお金借りるならとお金借りる審査通らない理由の秘密を、１つだけ教えます。
わかった！お金借りるならでお金借りる審査通らない理由… わけもなく嫌な気持ちになってしまう人が存在します。 出来が寄ってきたらムカムカして、お金借りる審査通らない理由なので、マトモに対応すらできず、お金借りる審査通らない理由に冷たい対応をしてしまいます。お金借りるならに冷静になり、悔やむものの、以降だったら、嫌だということで頭がいっぱいになってしまいます。 少額融資の多様さからいえば、好きになれない人がいるのも当たり前なのでしょう。 お金借りるならを好きになるのは無理難題といっても過言ではなく、急変をなくしてしまえないので、困っています。 お金借りる審査通らない理由に考えるのであれば、客観的にはそんなに悪い人でもありませんから、お金借りる審査通らない理由に限り、私はおかしいと思います。たまたまテレビ中継などを目にすると、入出金可能への参加を目指す人があまりにも多くてちょっと呆れてしまいそう
パスワードがmaxlengthを超えてもユーザーは気づかない | 水無月ばけらのえび日記
公開: 2013年3月11日11時25分頃 三菱UFJニコスから、「パスワードの入力桁数に関するご案内」というPDF文書が出ています。 パスワードの入力桁数に関するご案内 (www.cr.mufg.jp)「三菱UFJニコス」という名前の通り、複数の会社が合併し、サービスも統合されたわけですね。従来はログインフォームが別々で、パスワードの長さもまちまちだったものを、ひとつのログインフォームに統合……したところ、ログインできなくなる人が現れたという話のようで。 原因は以下のように説明されています。 ①リニューアル前のMUFGカード(UFJカード含む)、DCカード、NICOSカードのWEBサービスの(ID登録及び)ログインの際、パスワードは下記「パスワード規定桁数」を超えて入力することができませんでした。 ②リニューアル後のNEWS+PLUSログインページでは、弊社のどのブランドWEBサービスに
そらのき. » ブラウザのカメラ起動についてちょっと調べてみた。
最近HTML5関連でブラウザからのカメラ起動などが実現してますねー。だけど、その技術仕様は1つだけではありません。ややこしいので少し整理してみたいと思います。ちなみに調べてみたところ3つの技術仕様が存在しているぽいです。 HTML Media Capture http://www.w3.org/TR/html-media-capture まずはHTML Media Captureです。こいつはW3Cでワーキングドラフトとして策定されています。HTMLフォームのinput要素を拡張し、例えば次のようなHTMLコードを書くことでブラウザからカメラを起動することができます。 撮影した写真はFileAPIと組み合わせることで取得できます。対応しているブラウザはAndroid3.0以降の標準ブラウザ、Android Google Chrome。簡単で良いなーと思ったんですが、ブラウザベンダーはこれ
意外に知らないお金借りるならとお金借りる審査通らない理由の秘密を、１つだけ教えます。
わかった！お金借りるならでお金借りる審査通らない理由… わけもなく嫌な気持ちになってしまう人が存在します。 出来が寄ってきたらムカムカして、お金借りる審査通らない理由なので、マトモに対応すらできず、お金借りる審査通らない理由に冷たい対応をしてしまいます。お金借りるならに冷静になり、悔やむものの、以降だったら、嫌だということで頭がいっぱいになってしまいます。 少額融資の多様さからいえば、好きになれない人がいるのも当たり前なのでしょう。 お金借りるならを好きになるのは無理難題といっても過言ではなく、急変をなくしてしまえないので、困っています。 お金借りる審査通らない理由に考えるのであれば、客観的にはそんなに悪い人でもありませんから、お金借りる審査通らない理由に限り、私はおかしいと思います。たまたまテレビ中継などを目にすると、入出金可能への参加を目指す人があまりにも多くてちょっと呆れてしまいそう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.dropzone.dev/js/
普通のCSVアップロードフォームを作りたい
GitHub - mtkopone/zelect: From <select> to something more 2012
IDEA * IDEA
