フォームをデザインするときのポイント
前提 自分が嫌だと思う項目を作らない。 曖昧を許容できるようにする。 なぜその項目が必要なのかを説明する、もしくは予想できるようにする。 倫理的に、そして法的に問題ないものか確認する。 HTMLの仕様とブラウザの挙動を活用する。 システムの都合が優先される場合があるが、なるべくそれに引っ張られないように工夫したい。 分割しない 姓名、郵便番号、電話番号、年月日、時分など、入力フィールドが分かれていることがあるが、なるべくこれを避ける。フォーカスの移動が、面倒だからだ。なるべくユーザーの手間を減らしたい。 フォーム送信後のデータベースの都合や、事務処理、または運用にて必要不可欠である場合を除いて、分割しないようにしよう。 年月日や時分などは <input type="date"> <input type="time"> <input type="datetime-local"> のように標準
第16回 入力フォームを1画面にする？ 分割する？ | gihyo.jp
サービス開始時のユーザー登録フロー、クチコミやレビューといったユーザー投稿などユーザーに何か情報入力してもらう際、入力してもらう項目が増え、画面が長くなってしまうことがあります。そんな場合、長くなっても分割せずに1画面にする（図1a）のか、それとも画面を分割して複数画面にする（図1b）のか、その構成がユーザー体験に大きく影響してしまう場合があります。どちらにするべきか悩んだ経験がある方が多いのではないでしょうか。 図1 同じ項目で、分割せず1画面にした場合（a）と、分割して複数画面にした場合（b）の違い 今回はどういったときに分割するか／しないかの考え方の事例をもとに、私の判断軸を紹介します。この記事を読んだあと、みなさんの迷いが少しでも解消しやすくなり、ユーザーにとってスムーズな設計ができるようになればと思っています。 分割するかしないかの基準 分割する／しないどちらが良いかは一概には言
フォーム改善、その前に。読んでおきたい参考記事リンク集 - Qiita
はじめに フォーム改善、いわゆるEFO（Entry Form Optimization）の仕事をやる前に読んでおきたい参考記事、サイトをいくつかピックアップしてみました。 ウェブサイトの改善に欠かせないEFO。 はじめてやる場合でも、これだけ読めば勘所がわかる、といえそうなものをジャンルごとに分けて紹介します。 1.総合 EFOって何なのか、どんなことすればCVRは上がるのか（または下がるのか）という所から始める時に読むべき記事。 【保存版】問合せを劇的に増やすエントリーフォーム最適化（EFO）15の方法 LPO研究所さんの記事。実際の改善事例をもとに、基本的な最適化法が紹介されています。 フォーム内の無駄なリンクは外せ！ 入力項目は極限まで削れ！ 入力ボックスは分割するな！ 半角・全角入力をユーザーに求めるな！ 離脱しそうなユーザーはポップアップ表示で引き留めろ！ 入力エラーはリアルタイ
使いやすいフォームデザインのための新しい４つのルール
大規模なECサイトにおけるUXチームのリードであり、レンセラー工科大学でヒューマン・コンピューター・インタラクションの修士号を取得しています。Webサイト、Twitter。 私たちは日々、オンライン上でフォームを使っています。購入を完了するため、メーリングリストやソーシャルネットワークなどに登録するため、ディスカッションに参加するため、美味しそうなランチの写真を投稿するためなど、フォームを使う場面はさまざまです。オンラインで情報を入力するために、フォームは必要不可欠と言っても過言ではありません。 しかし、長きに渡ってフォームの改善はあまり見られませんでした。「使える」ものではあったものの、「使いやすい」ものには至らなかったのです。 近年では新しいテクニックを正しく使うことで、デザイナーはより早く、簡単で、生産性のあるフォームの作成が可能になっています。 フォームは短ければ良いのか 「フォー
コンバージョン率を改善する入力フォームにおける10のルール
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 Webやアプリ内のフォームは、ユーザーとの最も大切なやり取りの場の一つです。サービスへの登録や予約、フィードバック、決済処理など、ユーザーと企業間の取引を開始したり、ユーザーいにあらゆる情報を入力してもらうべく、様々なところで使われています。 ユーザーがいかに素早く正確に情報を入力し、求める情報を最後まで入力してくれるかはこのフォームの出来にかかっています。 この記事ではフォームのデザインにおいて、様々なテストやユーザーの声などから導き出された、実用的な施策を紹介します。 1. フォームは論理的に並べる フォームは対話そのものです。従って、普通の会話の様に、ユーザーとアプリの２者間でのコミュニケーションとして表現されるべきでしょう。 質問は直感的な順番にする。ユ
成果爆増！CV200%増・離脱率50%が達成できるスマホサイトEFO 5つのポイント！ | SimilarWeb日本公式ブログ
成果爆増！CV200%増・離脱率50%が達成できるスマホサイトEFO 5つのポイント！ 2016/2/1 フレームワーク こんにちは、WEBコンサルティング会社のタガタメ代表取締役の酒井です。 スマホサイト経由でのWEBサイトの利用率は爆発的に伸びています。スマホからのアクセスを見ると「ZOZOTOWN」「ユニクロ」などのファッションサイトで64％、「Amazon」「楽天市場」「Yahoo! ショッピング」などの大手通販サイトでも56％と完全にパソコンからのアクセスを抜いています（2015年ニールセン調査）。 ところが、パソコンの入力フォーム最適化（EFO）に比べてスマホのEFOは大幅に遅れているのが現状です。 ここでは、スマホサイトのEFOを一気に改善する5つの方法をお伝えします。 ①フリガナ入力でカタカナを要求してはいけません これはパソコンも同様ですが、そもそもなぜフリガナ入力がカタ
EFOを行い入力フォームの申込み完了率が2倍になった成功事例
入力フォームのデザインは、ちょっとした変更で操作性に大きく差が生まれます。 本記事では、入力フォーム最適化（EFO）を行い、申込み完了率を2倍にアップさせた事例についてご紹介します。 【事例対象】 事例ホームページ：結婚式場の情報ポータル 目的：結婚式場を紹介し提案やマッチングをするサービス 改善結果 【ビフォー】申し込み完了率 7％ 【アフター】申し込み完了率 16％ CVRは2倍以上 デザイン 【改善ポイント1】ファーストビューに体験をイメージさせる画像を挿入 【改善ポイント2】送信ボタンのデザインを統一 テキスト 【改善ポイント3】フォームタイトルの変更、登録時間の記載 【改善ポイント4】「最短３０分で提案」という強みをアピール ユーザビリティ 【改善ポイント5】必須項目と任意項目を明確化 STEP1 課題～メルマガ内リンクのクリック率が低い！ 入力フォームは本当にシンプルがいいのか
ウェブ上の入力フォームを使いやすく便利にする10の小技｜All About（オールアバウト）
ウェブ上の入力フォームを使いやすく便利にする10の小技 ウェブページ上で利用者に何らかの入力を求める場合、ちょっとした工夫を加えることで、より使いやすく、分かりやすく、便利なデザイン・UIの入力フォームを提供することができます。テキストエリアなど各種入力欄を表示する際に便利な、おすすめ作成テクニックを10種まとめました！
入力フォームを改善して入力完了率を上げる！ エントリーフォーム最適化15カ条 | 勝手にEFO分析-エントリーフォーム改善
入力フォーム（エントリーフォーム）を入力していて、イライラする……と感じたことありませんか。ありますよね。自社サイトの入力フォームでユーザーにイライラを与えていませんか。 小さなイライラが積み重なった先にあるのは、エントリーフォームからの離脱です。ユーザーが一度エントリーフォームから離脱してしまったら、もう戻ってきてはくれないと覚悟しておくべきです。入力を完了してもらいエントリーフォームの「入力完了率※」を上げるためにはどうしたらよいのでしょうか。 そこで、この記事ではEFO（エントリーフォームを最適化）を行い離脱要因を減らして、入力完了率を上げる15カ条を紹介します。 少し手間をかければ劇的に入力完了率アップが期待できるはずの、「惜しい」エントリーフォームを各条1つずつ取り上げて、頼まれてもいないのに、勝手にそのフォームを分析して作った改善案とともに、ポイントとなるエントリーフォーム改善
入力完了率を上げる！ フォームに入れるべき3つの入力支援機能／15か条の5 | 勝手にEFO分析-エントリーフォーム改善
全ての入力項目を終えた後に、エラーメッセージが出て、もう一度入力をユーザーに強いるのは、不快感を与えるだけでなく、離脱の原因になりかねません。今回は、それらを解決する方法として、入力をリアルタイムに支援する工夫を行っている実際のフォームを例に挙げ、入力完了率を上げる3つのポイントを解説します。 この記事では、入力フォームを改善して入力完了率を上げる！エントリーフォーム最適化15か条の【第5条】「入力に達成感を感じてもらうべし」をご紹介します。リンクをクリックすると第5条のまとめに飛びます。 入力完了率がアップする、入力を助ける3つ機能エントリーフォームに来て、入力を開始したユーザーは、特にフォーム側で工夫がなければ、項目への入力を行った際、「フォームで求められている入力形式や内容を満たしているかどうか」＝「入力完了」かどうかを自分で判断します。 この各項目の入力が完了したかどうかの判断を自
ニュースリリース・プレスリリース配信サービスの株式会社ニューズ・ツー・ユー
「News2uリリース」サービス終了のお知らせ「News2uリリース」は、2020年6月30日をもちましてサービスを終了させていただきました。 長年にわたりご愛顧いただき、ありがとうございました。 「News2uリリース」は、国内初のリリースポータル「News2u.net」とともに、企業・団体のニュースリリース・プレスリリースをさまざまステークホルダーへダイレクトに届けるネットPRサービスとして、2001年のサービス開始以来、約20年にわたり多くの皆様のご支援をいただき運営を続けてまいりましたが、2020年6月30日（火）をもちまして両サービスを終了いたしました。 これに伴い、情報サイト「ネットPR.JP」も終了いたしました。 長年にわたりご愛顧いただき、誠にありがとうございました。 今後ともニューズ・ツー・ユーグループを宜しくお願い申し上げます。
スマホサイトのEFO（フォーム最適化）で爆発的成果を出すための５原則 | LPO研究所
LPO研究所所長の鎌田です。 スマホサイトを用意するのがもはや当たり前になりつつある昨今ですが、スマートフォン対応を急ぐあまり、問合せフォームのユーザビリティがないがしろになってしまっているサイトをよく見かけます。 スマホユーザーの環境は、PCユーザーに比べてあらゆる点でシビアです。いい加減なスマホ対応をしただけでは、そうそうコンバージョンのアップにはつながりません。 下記の事例をご覧ください。 これは、あるブライダル系サービスのPC向け問合せフォームをスマホ最適化したところ、スマートフォンからのコンバージョン率が３倍以上になった事例です。このように、スマホユーザー向けに問合せフォームを最適化するだけでも、コンバージョン率はしっかり上がるのです。 今回は、弊社でスマホ向けフォーム最適化を行う際にいつも心がけている「５つの原則」について、具体例を交えてご紹介します。あなたのスマホ向けフォーム
[Google調べ] 入力フォームの最適化のために必須な4つの設定
[対象: 全員] Google Research Blogがユーザーテストに基づいてまとめたレポートから、入力フォームの完了にもっとも大きな影響を与えた設定をこの記事では紹介します。 次の4つの設定になります。 入力条件を事前に指示する エラーメッセージをフィールドの横に配置する 必須の項目と任意の項目を区別しやすくする ラベルをフィールドの上に配置する 順に説明します。 入力条件を事前に指示する 入力条件（たとえば、パスワードの最低文字数）は、フォームを送信する前にフォームのなかで指示します。 このガイドラインの適用は、フォームの完了と被験者の評価に大きなプラスの影響を与えました。また、被験者のコメントにも（前もって指示してもらった方がいいと）頻繁に現れました。 エラーメッセージをフィールドの横に配置する ユーザーがすぐに訂正できるように、エラーメッセージは入力フィールドの隣に配置します
![[Google調べ] 入力フォームの最適化のために必須な4つの設定](https://cdn-ak-scissors.b.st-hatena.com/image/square/f00f4804fe59acd36d8e9d02e50d10db7dc9a119/height=288;version=1;width=512/https%3A%2F%2Fwww.suzukikenichi.com%2Fblog%2Fwp-content%2Fuploads%2Fsplash_1200_675.png)
入力フォーム改善でCV率1.6倍！成果を上げる18のテクニック | LISKUL
たかが入力フォーム、されど、入力フォーム。 ユーザーが入力フォームに入力しているとき、もう気持ちは「購入します！」「申し込みます！」と決まっているはずです。 しかし、入力フォームが使いにくいために、せっかくの顧客をのがしてしまう可能性があるのです。 サイトへの流入はあるのに成果が上がらない・・・。 フォームPV数とコンバージョン数に差がある・・・。 そんな時には入力フォームを見直すべきかもしれません！ 入力フォームについて書かれている16の記事、サイトを参考に、結局、なにが重要なのか、基本と応用合わせて18のテクニックを厳選し、事例を交えてお伝えします。 入力フォーム改善の威力、条件を知ることで、成果を上げる入力フォームを作ることができるはずです。 失敗しない入力フォームを選ぶ！【LISKUL特集（2019年版）】CVR改善ツール一覧>> ※本記事は2014年7月29日に公開された記事をL
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
住所・フリガナは自動入力すべし！ フォームで使えるライブラリまとめ／15か条の12 | 勝手にEFO分析-エントリーフォーム改善
EFO（入力フォーム最適化）とは？8つの施策と実施のポイント
ページを「閉じる」を防ぐ 離脱防止ポップアップを使ったEFO事例 | 勝手にEFO分析-エントリーフォーム改善
エラーメッセージをフォーム上部に出すのはNG! 登録フォームの離脱を減らすエラー表示とは?／15か条の8 | 勝手にEFO分析-エントリーフォーム改善
ユーザーの視線をあっちこっちに移動させる入力フォームはNG！ 離脱を減らすコツ ／15か条の4 | 勝手にEFO分析-エントリーフォーム改善
入力フォームは「1000×550px」で作る！ 1画面に収めて直帰率を減らす／15か条の3 | 勝手にEFO分析-エントリーフォーム改善