デザインでこんなにもユーザビリティが変わる!新機能”CSS変更機能”のご紹介

  • 2016年11月29日
  • by 
デザインでこんなにもユーザビリティが変わる!新機能”CSS変更機能”のご紹介

こんにちは。紅葉で木々が色づき、自然好きにはたまらない季節になってきました。
自然派20代女子のミヤです。

見た目で変わる印象

見た目で人の印象ってとても変わりますよね!
髪の長い女の子が、いきなりショートカットに変わっていたら、思わず「ドキッ」とする人も多いはず。

この”見た目”ですが、皆さんご存知のとおり入力フォームにおいても重要です。
でも、実際にデザインを変更するとなると結構手間ですよね。。

そこで今回は、見た目を簡単に変えられる「CSS変更機能」の事例をご紹介します!

事例1

とあるスマホサイト会員登録フォームのボタンデザインを、CSS変更機能で変更しました。

image05

「会員登録情報を直接入力」とありますが、チェックボックスの下にボタンが無く、どこから入力ページに進むのか、ぱっと見わかりづらいです。

そこで、ボタンを目立たせて、文言を変更したところ、CV率が0.6ポイント改善、次ページへの遷移率は8.3ポイント改善しました!

事例2

二つ目の事例は、PCサイト会員登録フォームです。

このフォームは一番初めの項目が入力難易度の高い「メールアドレス」からはじまります。
項目の幅も狭く、何となくごちゃごちゃして見えます。

また、任意項目がずらーっと続き、かなりスクロールしてようやく送信ボタンが見える。。。
ぱっと見、面倒に感じてしまいますよね。

image07

このフォームを図のように変更したところ、直帰率0.2ポイント減少、途中離脱率0.6ポイント減少、そしてCV率は1.2ポイント改善しました!

こちらの事例に関しては、項目の順番を入れ替えたり、項目の幅を変えたり、送信ボタンを常にページ下部に見せるようにしたりと、改修並みの大幅デザイン変更でしたが、全てCSS変更機能で設定を行っております。

やっぱり見た目って大事

ちょっとしたデザイン変更で、ユーザビリティを改善することができます。
また、デザインを考える際には、「ユーザをいかに悩ませないで、スムーズにサイトを利用してもらえるか」が重要です。

ぜひ、いろんなデザインを試してみて、一番「いい印象」を与えられるようなサイトデザインを見つけましょう!

CSS変更機能の詳細はこちらから

コメント