Webフォームデザイン:ショーケースとソリ

スマッシング社説

著者について

スマッシングチームは、高品質のコンテンツを愛し、小さな詳細を気にしています。 私たちのオンライン記事を通じて、本、電子ブックを壊してだけでなく、壊して…もっとaboutThe壊し社説を壊して↬

  • 11 分読み取り
  • オフライン読み取り用に保存
  • Twitter、LinkedInで共有

この概要は、webフォームのデザインに関連し、すべての年にわたってここに公開され、最も有用で人気のスマッシング誌の記事の手摘みと整理選択を

クイック概要

  • 優れたWebフォームデザインのための有用なアイデアとガイドライン
  • Webフォームデザイン:ショーケースとソリューション
  • Webフォームデザイ3106>webフォーム検証:ベストプラクティスとチュートリアル
  • フォームフィールド検証:エラーのみのアプローチ
  • Webフォームデザインパターン:サインアップフォーム
  • Webフォームデザ: サインアップフォーム,パート2
  • ログインフォームを設計するための新しいアプローチ
  • サインアップとログインを簡素化するための革新的な技術
  • CSSベースのフォーム:Modern Solutions
  • モバイルデバイス上のフォーム:Modern Solutions
  • モバイルフォームのつまずきを取り除く
  • 無料ダウンロード:設計のためのチートシートwebフォーム

優れたWebフォームデザインのための有用なアイデアとガイドライン

入力フォームは、これらの日、ほぼすべてのウェブサイトやアプリケーシ 入力は相互作用の中心的な方法であり、多くの場合、成功と失敗の間の難しい変換ポイントを表します。 ユーザーをサインアップとコンタクトフォームに連れて行くのに時間と労力を費やすことで、フォーム自体に比例した時間を費やさない傾向があることは驚くべきことです。

Webフォーム設計のベストプラクティス

webフォームでは、多くの技術と要素を使用して、悲惨な失敗から成功した変換ポイントに変換することができます。 この記事では、いくつかの興味深い例とWebフォームの設計のための有用なガイドラインを紹介します。

続きを読む…

Webフォームの使いやすさへの広範なガイド

あなたが読むことができるものに反して、素敵なボタン、色やタイポグラフィとjQueryプラグイン 実際、そうすることで、あなたは(構造化されていない方法で)フォームの使いやすさを構成するものの三分の一だけに対処することになります。

この記事では、簡単に従うことができる実用的なガイドラインを提供します。 これらのガイドラインは、ユーザビリティテスト、フィールドテスト、ウェブサイトの追跡、アイトラッキング、ウェブ分析、不満を抱いたユーザーによって顧客サ

続きを読む…

Webフォームのデザイン:現代のソリューションと創造的なアイデア

Webフォームは、多くの場合、訪問者とサイト所有者の間の主要な通信チャネ フィードバックは常に重要であるため、webフォームが理解しやすく、直感的に使用できるようにする必要があります。 それにもかかわらず、フォームデザインでさえ、創造性の健全な部分を買う余裕があります。

Webフォームは退屈である必要はなく、CSSやFlashを使用すると、魅力的で効果的であることを簡単に確認できます。 シンボル、アイコン、色、位置やwebフォームのサイズは、多くの場合、興味深いデザインソリューションを達成するために使用されている—注目を取得するには、 私たちはいくつかの例を検索し、それらを見つけました。 創造的なオリジナルと珍しいwebフォーム。

スクリーンショット

以下では、webフォームの40以上の(本当に)美しい例だけでなく、webフォームのデザインに関連する近代的なソリューションや創造的なア いくつかの例はFlashベースですが、ほとんどの場合、純粋なCSSと(X)HTMLを使用して同様のデザインを簡単に作成できます。

続きを読む…

完璧な

を求めて、またはコンピュータと人間を区別するための完全に自動化された公開チューリングテストは、ユーザー入力がコン これらの独特のパズルは、一般的にスパムから登録やコメントフォームを保護するために、ウェブ上で使用されています。 彼らは多くの場面で私を悩ませてきましたが、私はまた、ウェブサイト上の迅速な修正としてそれらを実装しました。

re

この記事では、人間が生成したスパムの量を増やすという問題に対する完璧な解決策の検索に従います。 私たちは、キーの質問に答えるために、sがどのように使用され、なぜ使用され、使いやすさへの影響を見ていきます:完璧なものは何ですか、彼らはさらに望

続きを読む…

Webフォームの検証:ベストプラクティスとチュートリアル

理想的には、ユーザーはwebフォームに必要な情報を入力し、ジョブを正常に終了します。 しかし、人々はしばしば間違いを犯す。 これが、webフォームの検証の出番です。 Webフォーム検証の目的は、ユーザーが操作を正常に完了するために必要な、適切にフォーマットされた情報を提供することを保証することです。 この記事では、検証自体を超えて、さまざまな検証とエラーフィードバックの手法、方法、およびアプローチを探ります。

Facebookサインアップフォーム

ユーザーの入力は、サーバーとクライアント(webブラウザ)で検証できます。 したがって、サーバー側とクライアント側の検証があります。 それぞれの長所と短所について説明します。 サーバー側の検証では、情報がサーバーに送信され、サーバー側の言語のいずれかを使用して検証されます。 検証が失敗すると、応答がクライアントに返され、webフォームを含むページが更新され、フィードバックが表示されます。

続きを読む…

フォームフィールドの検証: フォームフィールド検証のためのエラーのみのアプローチ

エラーページは恐ろしいものです。 あなたはちょうど20のフォームフィールドに記入しましたが、単一のフィールドが検証に失敗したため、同じ肥大化したページがあなたの顔に戻されます。

私は、被験者が検証エラーページに遭遇するたびに、前回のユーザビリティスタディ中にしばしば大きな絶望のため息をはっきりと覚えています。

また、検証エラーにさらされていた被験者は、フィールドがオプションであるかどうかについて疑問がある場合は、”会社名”フィールドに”N/A”などを書くこ

フォームフィールド検証エラーページBlueNile.com

Baymard Instituteでは、この問題を反映して、「エラーフィールドのみ」と呼ぶという考えを得ました—これはまさにこの記事が何であるかについてです。 このアイデアを検討する前に、3つの伝統的なタイプの検証手法を見てみましょう: 「同じページのリロード」、「最適化された同じページのリロード」、および「ライブインライン検証。”

続きを読む…

Webフォームデザインパターン:サインアップフォーム

サービスの収益を最大化したい場合は、webフォームの完了率を最大化する必要があります。 一見するとあなたの訪問者を感動させるいくつかの革命的なアイデアを持っていない限り、単にあなたのサイトにサインアップするユーザーを有効に サービスが最大限の露出に達することを可能にするために、私たち設計者は、ユーザーに良いユーザーエクスペリエンスを提供する必要があります。 私たちは彼らを招待し、サービスがどのように機能するかを説明し、なぜ彼らがフォームに記入すべきかを説明し、彼らが見返りに得る利益を提案する必 そして、もちろん、我々はまた、彼らが参加することを非常に簡単にする必要があります。

しかし、効果的なwebフォームを設計することは容易ではありません。 そして、それは一つの単純な理由があります:誰もフォームに記入するのが好きではない—オフラインでもオンライ したがって、設計者として、フォームの完了を簡単、直感的、無痛にするために、健全な設計上の決定を把握する必要があります。

ウェブフォームデザインパターン

しかし、どのように正確にこれらの決定を把握することができますか? フォームへのリンクをレイアウトのどこに配置する必要がありますか? どのように設計すればよいですか? ラベルをどのように強調表示し、どのように整列させる必要がありますか? Webフォームのデザインパターンは、現代のwebサイトでどのように見えますか? これらはまさに私たちが自分自身に尋ねた質問でした。 そして、答えを得るために、我々は調査を実施しました。

以下では、現在のwebフォームデザインパターンの調査結果—webフォーム(すべき)が重要な100の人気のあるwebサイトの分析の結果を提示します。 私たちは、最初のサインアップフォームから開始することを決定しました。 調査結果の第一部を以下に示し、調査結果の第二部は来週公開される予定です。

更新:調査結果の第二部も公開されました:Webフォームデザインパターン:サインアップフォームパート2。

続きを読む…

ウェブフォームデザインパターン: Sign-Up Forms,Part2

先週、ウェブフォーム調査の最初の調査結果を発表しました。 調査の主な目的は、webフォームがどのように効果的に設計されているかのいくつかの直感を設計者と開発者に提供することでした。

Screenshot

さらに重要なフォーム(チェックアウトフォームなど)を別々に検討したいので、サインアップフォームに焦点を当てました。 その後、選択したサイトのそれぞれのサインアップフォームを調べ、これらのフォームに実装されている設計アプローチを分析しました。 以下では、私たちの調査結果の第二部—ウェブフォーム(すべき)が重要な100の人気のあるウェブサイトのウェブフォーム間での調査の結果を提示します。

この投稿はチェックアウトフォームに関するものではないことに注意してください—それは別の議論のトピックです、我々は今後の投稿の一つでそれらを別々に検討するかもしれません。 私たちは、私たちの調査を実施するための枠組みを提供してくれたWufooに感謝したいと思います。

続きを読む…

ログインフォームの設計への新しいアプローチ

私たちの多くにとって、ウェブサイトにログインすることは私たちの日常の一部です。 実際、私たちはおそらくそれを頻繁に行うので、それがどのように行われたかを考える必要がなくなりました…つまり、何かがうまくいかないまで:私たちはパスワード、ユーザー名、サインアップした電子メールアドレス、サインアップした方法、またはサインアップした場合でも忘れてしまいます。

これらの経験は、私たちにとってイライラするだけでなく、企業にとっても悪いものです。 どのように悪い? ユーザーインターフェースエンジニアリングの分析大手オンライン小売業者の1は、すべての顧客の45%がシステムに複数の登録をしており、160,000人が毎日パスワードを要求しており、75%がパスワードを要求した後に開始した購入を完了していないことを発見しました。

Gowalla
Gowallaのサインインフォーム。

それを上にするには、ログインしていない訪問者は、ウェブサイトのコンテンツや推奨事項のパーソナライズされたビューが表示されないため、コンバージョン率とエンゲージメントが低下します。 だから、ログインは大したことですか?—?あるウェブサイトが古い問題のための新しい設計解決を探検し始めたこと十分に大きい。

続きを読む…

サインアップとログインを簡素化する革新的な技術

サインアップとログインフォームを設計するには、多くの方法があります。 ほとんどの設計者は、従来の方法に精通しています。 しかし、いくつかの革新的な技術を理解し、適用することは、フォームを記入するのがより簡単で効率的になる可能性があります。 この記事では、私達はあなたの次の設計のために有用であるかもしれない幾つかの新しい考えを示すことを望む。 これらのテクニックを使用する前に、それらを使用するコンテキストで意味をなさないことを確認する必要があります。 私たちは、以下に提案された提案を肯定または却下するあなたのケーススタディとユーザビリティテストについて聞いてみたいと思います。

続きを読む…

CSSベースのフォーム:現代のソリューション

登録とフィードバックフォームはどこでも見つけることができます。 すべてのスタートアップは、訪問者の注目を集めるためにしようとするので、webフォームは、どの企業の成功のためにますます重要になってきています。 最終的には、正確にこれらのwebフォームは、潜在的な顧客との最初の接触を担当しています。 Web開発者が次のcssベースのフォームを設計して、どの近代的なソリューションを使用できるかを見てみましょう。 チェックされたリンク:月/08 2008.

続きを読む…

モバイルデバイス上のフォーム:現代のソリューション

モバイルフォームは、デスクトップのいとこよりも大幅に多くの制約を持っている傾向があります:画面が小さく、接続が遅く、テキスト入力がトリッキーであり、リストが続きます。 そのため、モバイルアプリケーションやwebサイトのフォームの数を制限することは、一般的には良い考えです。 モバイルデバイス上のユーザーからの入力が必要な場合、ラジオボタン、チェックボックス、選択メニュー、およびリストは、テキストフィールドを開くよりも

しかし、制約は革新を生み出し、モバイルフォームも違いはありません。 モバイルデバイスの制限により、開発者や設計者は、ユーザーがより速く、より簡単にデータを入力できるようにする新しい方法を見つけ この記事で取り上げた現代的な解決策のおかげで、モバイルスペースはフォームをはるかに長く避ける場所ではないかもしれません。 代わりに、それは彼らを奨励する場所になるかもしれません。

続きを読む…

モバイルフォームの障害物を取り除く

数週間前、散歩に出かけている間に舗装がすぐに近づいているのを見たとき、私はかなり驚きました。 そこに敷設唖然と、私はすぐに何が起こったのかを実現:私は落ちた。 痛い Bマイナス 私は通常、できるだけ気配りしようとしますが、今回は舗装の大きな亀裂が私の靴をキャッチし、バランスを完全にオフに私を投げました。

モバイルつまずき

携帯電話でフォームに記入することになると、私は多くのユーザーが同様の経験に遭遇しているのを観察してきました。 モバイルフォーム内の多くの要素は、ユーザーがどのような種類のフォームの後ろに隠れているサービスや製品にスムーズに到達するかに影響します。

フォームに記入するまでの道のりには、いくつかの障害と考えることができる要因があります。 具体的には、ポータブルデバイス上では、この旅は、我々はしっかりとしたデスクトップの経験と比較して、時間、場所、または限られた入力オプションなどのコンテクストパラメータを考慮しなければならないという事実によって複雑になります。 この記事では、モバイルデバイスの最も一般的な障害を見ていきます。 また、私はつまずきを回避し、モバイルユーザーのためのフォームを安全かつ迅速に散歩を容易にするための設計戦略について説明します。

続きを読む…

無料ダウンロード:Webフォームを設計するためのチートシート

フォーム、フォーム、フォーム:デザインでは見過ごされがちです。 この記事では、Joe Leechによって作成され、Smashing Magazineとその読者のためにリリースされたForm Design Cheat Sheetをリリースしました。 このベビーベッドシートには、Omnigraffleテンプレートだけでなく、Photoshop(PSD)とPDFの例をダウンロードして、あなたが望むように使用することが含まれています。 シートを印刷し、あなたの壁に付け、顧客に送り、そしてちょうど一般に皆の形態を少しよりよくさせるのを助けなさい。

フォームデザイン

ベビーベッドシートの設計者は、フォームの設計とテストに何年も費やしてきました。

続きを読む…

あなたは同様に次の”最高の”選択に興味があるかもしれません:

  • Webデザイン要素:例とベストプラクティス
  • Webデザインナビゲーションショーケース
  • ユーザビリティ&ユーザーエクスペリエンス

コメントを残す

メールアドレスが公開されることはありません。