サービス別コラム

UI・UX向上のためのJavaScript

ある穏かな日･･･突然上司から･･･

「UIとかUXって･･･熱くね?」

「はぁ。確かに最近よく聞きますね」

「そうだろ。今度、こういうECサイトの案件があってさ。その辺に力入れていこうと思うんだよ。JS使って動きある良い感じのUI満載のサイトを作れば、使ってて楽しいし、UX向上間違い無しだよね！具体的にはそうだな･･･」

「(嫌な予感が･･･)」

「商品数が多いけど、全部大きくスライダーで見せよう。お問い合わせは目立つようにして･･･。あんまりスクロールさせたくないから、コンテンツは良い感じにまとめて。キャンペーンも目立つ動きで目立たせたら、めっちゃ良い感じじゃん？」

こうして、めっちゃ良い感じ(？)のUI満載のサイト作りの日々が始まりました。

良いUI＝良いUX？

そんなこんなでプロトタイプが出来上がりました。

「できました！どうですか!?」

目が痛い

「･･･」

「･･････」

目が!?目がぁぁ!?

「見にくっ!?使いにくっ!?」

「商品多すぎてスライダー全部見てられないし、タブもコンテンツの関連性が無さ過ぎてわけわからないし、もう全体的に動きすぎて何がなんだかわからない!!」

「･･････あ、あんたが言ったのに!?」

相当イラッとしました

「作り直し!!」

確かにJavaScriptを使った動きのあるサイトは操作していて楽しいものですが、やりすぎるとこういった結果になります。

今回、一つ一つのUIは決して悪いものではないのですが、結果的に非常に見づらく、使いにくいサイトになってしまいました。

良いUIと良いUXというものは、必ずしもイコールではないということです。

ユーザーの目線に立つことが重要

では、どうやってUIを設計するのが良いのか？
使うユーザーの使いやすさを考えてUIを設計するのが非常に重要になります。

このサイトはECサイトなので、商品を探してもらい、購入してもらうのが目的のサイトになります。
それを踏まえて設計していくと「カテゴリごとに商品を分けて探しやすくしよう。」「商品検索のシステムをつけよう。」など、自然にどういったUIや動きが良いのかということが見えてきます。

「完成しました！メイン部分はキャンペーンの訴求に変更。
商品をカテゴライズして、探しやすくしました」

「･･･」

「･･････」

「使いやすくなった！良いね！」

「･･････なんかイラッとするけど、まぁ良いか･･･」

今回はだいぶ大げさに書きましたが、Webサイト制作の現場では、よりリッチなUIを実装しようとしたことによって、結果的にUXが悪くなるといったことが起こりがちです。

良いUXがもたらすもの

より良いユーザー体験をしてもらうことでどういったことが起こるか･･･

たとえば、Webサイトが見やすくて使いやすいと思ってくれた人は、再度Webサイトに来てくれる可能性が高くなります。
さらに、すごく気に入ってくれれば、知り合いにも教えたくなり、より多くの人にWebサイトを見てもらえる可能性が高くなります。

このように、良いユーザー体験を提供できれば、企業ブランドの向上やファンを作っていくことに繋がります。JavaScriptを使ったサイト制作の話ですが、もちろん、JavaScriptを使わなくてもこれらの向上は可能です。

当社では、常にユーザーの目線に立つことを心がけたサイト制作を行っていますので、UI・UXまでこだわったWebサイト作成をお考えの方は、是非ご相談ください。

次回は未定ですが、またJavaScriptを使ったサイト制作について書いていこうと思います。