今すぐマネしたい!ウェブフォームデザイン事例21選

本日はフォーム改善に関する興味深い海外記事をご紹介したいと思います。
econsultancy.comより、「21 first class examples of effective web form design」というタイトルで公開されたエントリーでは、フォームの最適化に関する21のベストプラクティスを他のサイトでの例を紹介しながらまとめています。

21つの事例についてここではタイトルのみ紹介いたします。

  • 明確な説明を用意する
  • パスワード強度のインジケーター
  • インラインのフォームバリデーション
  • メールアドレスの修正機能
  • モバイルでの簡単な入力
  • フォームをユーザーに適応させる
  • 小文字への自動変換
  • モバイルのカード決済画面
  • カード会社を認識
  • ポストイット状のデザイン
  • モバイルでの簡単なリピート購入
  • ステキなデザイン
  • 垂直方向のラベル配置
  • 一般的な質問への対処
  • 明確なオプションの表示
  • 緊急度をスライダーで入力させるフォーム
  • キーボードの最適化
  • データエントリースタイル
  • ゲスト購入
  • ライブチャット
  • モバイルチェックアウト

今回の記事では、取り上げられていたサイトの一部について、実際にフォームを観察して紹介してみたいと思います。
※その他すべてのベストプラクティスについては元記事(英語)を参照いただければと思います。

モバイルでの簡単な入力

まず紹介するのは、ホテルや航空券の検索サービス「The Kayak」のモバイルサイトです。Kayakのフォームが取り上げられている理由は、モバイル(タッチデバイス)での入力のしやすさ。実際にサイトを確認しながら、そのUIを観察してみましょう。

※なお2015年7月時点でKayakのサイトデザインは対象記事で取り上げられていた状態から変化していたものの、基本的なUIは同様の構成のようでした。

数量の入力

Kayakでは、目的地・日程・人数・部屋数などを最初に指定してから、ホテルの検索結果を表示するようになっています。

下記は宿泊人数と部屋数を入力する画面です。
「+」と「ー」のボタンが用意されており、タップすると数量を増やしたり、減らしたりできます。数量の増減が指でもストレスなく操作できるように工夫されていますね。

部屋数と宿泊者数の入力画面

部屋数と宿泊者数の入力画面

数量の入力でよくあるのは、セレクトボックスから入力させる形。またはテキストフィールドに数値を入力させる形ではないでしょうか。
セレクトボックスの場合、一度選択肢を展開し、それをスクロールのうえ選択、というのは少々手間ではあります。フィールドへの入力も、キーボードが最適化されていればまだ良いですが、項目にフォーカスし、数値を入力するというのは多少の手間が発生します。

ホテルの部屋数や宿泊人数というと、せいぜい2から3程度と、4以上の大きな数値を入力することは稀でしょう。
そういった背景からも、プラスとマイナスのアイコンで「増やす」「減らす」を直感的に操作できるUIは、ユーザーの手間をもっとも軽減させてくれるUIのひとつだと思います。

期間の入力

また、日程を選択するカレンダーのUIも、下記のように画面いっぱいに大きく表示されており、指でもストレスのない操作が可能でした。

宿泊日(期間)の入力画面

宿泊日(期間)の入力画面

期間の入力は、起点と終点の2種類の日付入力が伴うパターンが多いですが、このUIであれば、同一のカレンダー上で期間を一気に入力できるようになっており、非常に入力がスムーズです。

入力パネルを出さずに完結するUI

紹介したどちらのUIに共通していたのは、モバイルデバイス特有の入力パネル(ソフトウェアキーボード)を使わないという点。
モバイルデバイスの小さな画面でさらに入力パネルを表示させると、スクリーンはかなり狭まってしまい使い勝手が悪くなりますが、パネルを表示させずに簡潔するUIを持っておくとこの点を解消することができますね。

明確なオプションの表示

次は、イギリスの百貨店チェーン「ジョン・ルイス」の購入フォームから。ここでは配送オプションの表示方法が取り上げられています。
※記事内で触れられているのはiPhoneアプリのUIのようですが、スマートフォンフォームを確認したところ、似たようなUIの構成になっていたしましたのでそちらを紹介します。(2015年8月時点)

ジョン・ルイスのサイトでは、すべての商品に対し、配送オプションや返品ポリシーなどのメニューが用意されています。

さまざまなオプションメニュー。クチコミ、商品詳細、配送、返品、各種サービス、特別オファーなどがある。

さまざまなオプションメニュー。クチコミ、商品詳細、配送、返品、各種サービス、特別オファーなどがある。

タップすると詳細を展開することができます。

配送の詳細を展開した様子。

配送の詳細を展開した様子。

必要に応じてコンテンツを展開でき、シンプルかつ使いやすいユーサーインターフェースですね。
購入フォームにおいて、配送や返品などの各種オプションが不明瞭な場合ユーザーの不安を生み、購入にブレーキがかかってしまいますが、このように明確に表示されていればユーザーも安心です。

緊急度をスライダーで入力させるフォーム

続いてユニークなUIを紹介します。フランスのソフトウェア企業「Wopata(http://en.wopata.com/)」のお問い合わせフォームでは、問合せに対する返答の緊急度をスライダー風に入力するという方法を採用しています。

一見ふつうのお問い合わせフォームだが、フォームの最後にスライダーが。

一見ふつうのお問い合わせフォームだが、フォームの最後にスライダーが。

ただしスライダーといっても本当にスライダーのUIなのではなく、緊急度を示す3つの選択肢(まだ時間に余裕がある/2~3日/緊急)があり、いずれかをクリックして選択すると、スライダーが左右へアニメーションするというものです。

少しクリックエリアがわかりにくいのが難点ですが、遊び心のあるユニークなアイデアですね。

最後に

今回は海外記事で取り上げられていたUIが優れたフォーム、ユニークなフォームを3つご紹介しました。元記事には21つもの例が紹介されていますので、ぜひ覗いてみてはいかがでしょうか。新しいフォーム改善のアイデアやインスピレーションが得られるかもしれません。

※参考記事
21 first class examples of effective web form design | Econsultancy

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です
  1. @rimi_labw

    モバイルのフォームの最適化は重要ですね。調査によっては、結局、スマホよりPCの方がコンバージョンが高くなるなんて結果を出すところもありますが、モバイルでEFO(エントリーフォームの最適化)ができていれば結果も変わるはずですよね。… http://t.co/fiVEhKwoLl