【UI・UX】登録フロー・フォーム周りのデザインについて

読了: 約 4 分

管理画面やWEBサービスの制作にあたり、登録フローを図式化したものって結構ありますよね。
ただ、そのデザインは何も考えないと陳腐というか味気ないものになってしまい、
本来の目的は達成しているが、行動を起こす気にならないものもあります。
⇒　そこで喚起させる必要はないかもしれませんが。
ということで、登録フロー周りのデザインについて少しまとめます。

概要

1 目的
2 ケース
- 2.1 登録フローを表示していないサイト
3 フォーム周りのデザインについて
- 3.1 select のデザイン作成
- 3.2 参照ボタンのデザイン
4 まとめ
5 参考書籍

目的

登録フローなので、今自分はどういう情報を入力していて、
あとこのあとがどういうフローになっているかを視覚的に表現できれば
良いとおもいますが、それだけだと、ユーザーにとってどうなのか。
という疑問があったため、

１．そもそも情報を表示する以外に喚起する必要があるのか、
２．他サイトはどうなのか
３．どういうデザインがあるのかをケーススタディで学んでいきたいと思う。

ケース

既に数個ですが、登録フローをまとめているサイトがあったので、メモ
フロー図のデザイン（まとめ）

基本的にシンプルな路線は保ちつつ、テキストも最小限に押さえて、
一言で分かりやすいインターフェースになっている。

業務フローですが、参考までに。
株式会社エフデータクリエイション

よくあるというかシンプルに表現したいからこそデザインの難しい所だと
考えている。

登録フローを表示していないサイト

Google+は、Googleのアカウント登録した後に使えるので、登録のフォームしか出てこず
左カラムにサービス利用で出来るメリットを表示している。

たしかに、あえて数字等と文言を表示するフローをデザインしなくても、これでユーザーを喚起しつつ登録を促せば
ひとまずのゴールを『登録』と置いた時にそれはクリア出来る。

ゴールと登録させたい内容によってはステップを設けて、視覚的に後どれくらいで登録出来るか
ユーザーに明示する必要があるかもしれないが、こういう見せ方もあるという例である。

デザインというより、この辺りは情報設計とユーザーエクスペリエンスである。
ステップを表示しないことにより、ユーザーはどれだけ登録しないといけないのか、
次のステップはあるのかという事が不安になり、離脱率が高まるのか、

逆にステップを表示することであとこんなにあるのかと考えて離脱してしまうのか
どちらが高くなるかは運用しながらテストしていく必要がある。

ステップを表示するか否か、デザインが必要かどうかは
自分の訴求したいサイトの情報量や、全体のデザインテイストによるものだという
結論になった。

フォーム周りのデザインについて

select のデザイン作成

すべて英語サイトだが、JavaScriptで実装している。
デザインはJavaScriptを見ながら修正して、調整する必要がある。

Something New, Part 1/

Styling dropdown select boxes

Select Replacement Test

参照ボタンのデザイン

[JS]フォームのファイルボタンを画像に変更するスクリプト -Styling File Inputs

Facebookなどの様に、【ファイルの参照】をデザインしたい時は下記のURL
こちらもJavaScriptを使用して、調整する必要があります。
クライアントによってはフォーム周りのデザインにもこだわりもあるので、
このあたりも注意したい箇所である。

<form action="#">
	<label class="cabinet">
		<input type="file" class="file" id="file" style="cursor:pointer;"/>
	</label>
</form>

確認してみましたが、元々がinput type=”file”のものを画像化しているため、
ブラウザがそう認識しているせいで

cursor:pointer;

が効かないようですね。

NAVERまとめのまとめ作成では
ファイル参照ボタンのみをFlashで実装しているようです。
ここまでUIにこだわれるのはすごいですね。

まとめ

登録フローやフォーム周りやコーディングのページ単価を下げたり、手を抜いてしまいがちなところではあるが、
そもそもユーザーの登録に繋がる所なので、ユーザー具体的イメージを湧かせる事や、入力の支援（JavaScriptでリアルタイムバリデーション等）を
して、離脱率を下げるなど、何故登録フローやフォームをデザインするか目的を明確にしてデザインや情報設計を行う必要がある。