散乱した入力フォームを整理整頓し、CVRを改善するには?

Ben Gremillion

Ben Gremillion氏は、UXPinのコンテンツデザイナーです。以前はウェブデザイナー、およびその後にバックエンドディベロッパーを務めていました。彼は新聞デザインからキャリアをスタートさせ、デジタルの未来を見据えて即座にHTML/CSSを学びました。

この記事はUXPinからの翻訳転載です。配信元または著者の許可を得て配信しています。

Kill Your Darlings: Erase Clutter for Better Web Forms

実を言うと、ステークホルダーやその他の関係者があまり深く考えずに「整理・整頓する」ことを求めるのに、私は飽き飽きしています。整理されているということは、ただ単に物が少ないということではありません。整頓するということは、全てをなくすわけではありません。これらの言葉は、ページ上で重要でない要素を取り除くということを意味しているのです。

もし複雑な入力フォームがあったならば、ユーザーは一目見ただけですぐに去ってしまうでしょう。これを防ぐための手っ取り早い方法は、散らかっている要素を取り除くことと、グリッドを追加することです。今日は、ユーザーからの信頼を獲得して、コンバージョン率を向上させるための上記2つの方法について見ていきましょう。

散乱している要素はどれか?

ページの持つ本来の目的から人の注意を逸らしてしまう要素があるとすれば、その全てが散乱している要素であるといえます。これはグラフィックスや写真、背景、ヘッダー、そしてコンテンツさえも含む可能性があり、より目的にフォーカスしたデザインを作成するためには、全ての要素を疑う必要があるのです。そして、無料電子書籍である『人間の眼に対応したWebUIデザイン』の中で指摘されているように、デザインが目的重視になればなるほど、そのデザインに対する一貫性が高まります。

そしてそれ以上にコンバージョン率(CVR)に貢献するのです。散乱要素と選択肢を減らすことで、ランディングページツールであるUnbounceのコンバージョン率が16.9%上昇したのです。フォームに関しては、余計なものがない方が良いのです。1つのフォームを4つのフィールドに減らしたところ、コンバージョン率が最大120%まで上昇したことが示されています。

このページを例に挙げましょう: 

1-ugly-form

写真クレジット:UXPin

一見したところ、普通のフォームのように見えます。私はこのページを「機能はするが、魅力がない」と評したいと思います。何が問題なのかを詳しく見ていきましょう:

・多量の線が空間を整理しようとしていますが、それらのコントラストが行き過ぎており、フォームからユーザーの注意を逸らしてしまいます。

・各青色の見出しが、セクション間に空白を生み出しています-つまり、余計なセクションの区切りを生み出してしまっているのです。

・要素が無計画に配置されているため、私に上記のような台詞を言わせる口実を与えてしまっています。

・ブラウザによっては (もちろんこれは暗号化されています)、フィールドセットが適切に表示されません。 

2-Trouble-with-the-ugly-form-2

写真クレジット:UXPin

そしてこちらが、ユーザーの注意を逸らす要素が少ない、上記と同じフォームです。

3-better-form

写真クレジット:UXPin

以下がフォームデザインを目的重視にするポイントです:

・Webサイトのそれぞれのページをデザインする場合、自分自身に「何がそのページと他のページを区別しているか?」というシンプルな問いかけをします。この問に対する答えが、そのページの目的―そのページが存在している理由になります。

・理にかなっている順序で、ページに情報を配置します。

・共通の色や 図、タイポグラフィー、ナビゲーション、ヘッダー、およびフッターのように、サイトに一貫性を持たせるようなブランディングを心がけます。サイトのトーンに合わせましょう。

プロトタイピングの段階であれば、以下は非常に容易に行うことができます:

・フォーム要素のみから始めて、その後どのフィールドが同じ分野に属しているかを示すための視覚的要素を追加します。

・ユーザーが関心のあるものから始めます。そして、上記の要素をサポートする要素で完了します。

・要素を排除したときにページが利用不可になったのであれば、散乱要素をおおかた取り除けたことがわかります。

順序の合理性を追加する

さて、全てのデザインが厳格な規則を必要としているわけではありません。しかし、もし情報をより理解しやすいものにしたいのであれば、使いやすいフォームやマーケティングサイトを参考にしながら、きちんとした構造を追加する必要があります。そこで、グリッドの登場です。

改良されたフォームをもう一度見てみましょう。ただの空白以上のものがそこにはあります:並びを揃えるように縦線がフォーム全体に張り巡らされており、セクションにかかわらず、全てを一つに結び付けているのです。

4-Better-form-solutions

写真クレジット:UXPin

ほとんどの要素は同じ一続きの線、つまり空白によって生み出された線によって分類されています。デザイン全体に同じ配置を使用することで、暗黙の一貫性を生み出しているのです。全ての要素は結び付いているように感じられます。それらは全て計画的に配置されているように感じられます。私たちは自分たちが何をしているのか理解しているので、299米ドルかけてでも、私たちを信頼していただくことができると思います。

グリッドを使用すれば間違いないのです。列や行によって垂直および水平なリズムが生み出されるからです。

次のステップへ

散乱要素を排除するのは、一見シンプルですが難しいことです。かっこいいアイコンや美しい背景などのビジュアル要素やその他の良かれと思って追加する要素を自制するのは簡単なことではありません。しかし、多くのデザイナーがいうように、余計な要素を排除することで、より強力なプロダクトを生み出すことができるのです。余計なものは、無い方がよいのです。

デザインを合理化する素晴らしい方法は、もちろん、デザインのプロトタイプを最初に行うことです。UXPinの無料トライアルを開始して、ここで学んだことをお気軽に実践してみてください。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて