こんにちは、トミーです。

最近の入力フォームは多種多様で本当に様々なものを見かけます。中にはこのフォームって運営側の意図が強すぎてユーザビリティを意識してないデザインになってるなと感じることがあります。

モバイル フレンドリーが話題の今、自社のフォームのデザインもユーザビリティという観点から考えてみませんか。

以下に注意すべきデザインポイントを挙げます。

文字はCSSで制御する

美しい文字は理想です。Microsoft Internet Explorer 時代は美しい文字の為に画像化する事が多かったようですが、今のモバイルデバイスはフォントも綺麗なので画像にするよりテキストにしたほうが美しく見えます。

基本中の基本ですが、文字をCSSでデザインするのが理想です。

jp-weight
Noto Sans CJK(Google)
引用:http://googledevjp.blogspot.jp/2014/07/noto.html

適切な文字サイズ

極端に大きなサイズ、小さなサイズのテキストはユーザが見慣れていない為、戸惑いますし、読みにくかったりしてストレスを与えます。

各ブラウザのデフォルトといわれているテキストサイズは16pxです。ユーザは16pxに慣れているので同じくらいのサイズがおすすめです。
またお客様層に合わせて、シニア層であればもう少し大きくなどの工夫をしましょう。

適切な行間

余裕の無い行間も嫌われます。PCでは気にならない高さでも、スマートフォンでは詰まっていて使いにくく感じます。

行間はフォントサイズの1.25~1.5倍程度が望ましいと言えます。

20150327

項目と項目の間がぎゅうぎゅうであったり昔のブラウザ幅のままのサイズで横幅に余裕がないフォームなどを見かけますが、少ないスペースに内容を詰め込んでいる為、パッと見たときにどんな項目があって、どの項目を入力すればいいのか分からないといったことに陥ります。

また、タッチ、タップしにくいためモバイル・ユーザビリティとしても好ましく有りません。

ユーザがページを表示した際にすぐに内容がわかるように項目の間に適度なスペースを設けて見やすくしましょう。

アイコンを使ってシンプルだけどわかりやすく!

項目の下や脇に注意書きをしているフォームは多々ありますが、必要以上に注意書きをするとページがごちゃごちゃして見づらいだけでなく、情報量が多くなるため、ユーザに「面倒くさい」という印象を与え、直帰される原因になります。

特に小さなフォントに赤色の注意警告は非常に読みにくく、モバイル・ユーザに嫌われます。

注意書きをする際にはできるだけ文字数を減らし、アイコンや背景を上手く活用しシンプルにしましょう。

「必須」や「全角」、「カタカナ」といった文言をアイコン化して設置することで驚くほど見やすく、そして分かりやすくなります。

送信ボタンなどの大きさは押しやすいサイズに!

入力を終えたユーザは最後に送信ボタンを押します。さあ次のページへ行こうとなっているのに送信ボタンが小さかったり、色が目立たなかったりして見つけづらいデザインは最悪です。

入力を終えてからの離脱はユーザにとって非常に大きなストレスになり、再訪もしなくなるかもしれません。

まず、サイズは48px程度の上下左右の余裕あるボタンを設置しましょう。
送信ボタンは「大きく」「目立つ前進色」で一目で分かるようにしましょう。

いかがでしたでしょうか。もし当てはまるものがあったらぜひトライしてみてください。

イメージ写真はクリエイティブコモンズ・ライセンスに基づき掲載しています。 写真掲載元:Szabolcs Toth