Webサイトを運営するにあたって、定期的に必要となるのはリニューアルです。

リニューアルにはいろいろな面があって、例えばWebでしか見れないからスマートフォンでも見れるようにするだとか、デザインが古臭いから新しくするだとか、セキュリティが弱いから最新のものに変えるだとか、多方面に行うべきことがあります。

今回は、その内UIUXについて、どんなプロセスを踏むのかを一緒に学んでいくことを目的といたします。

まず前提として、UIUXとかは何か、という点について明確にしておきましょう。

UIUXは、UIとUXを合わせた言葉です。

その内UIは、ユーザーインターフェースのことです。システムに対する、ユーザーとの境界面、という意味があります。平たく言うと、画面全体がUIになります。

UXは、ユーザーエクスペリエンスのことです。その通り、UIを通して得られる体験のことを指します。主に、「やりたいこと、やれそうなことが思うようにやれる」ということが出来ると、良いUXということになります。

そんなUIUXですが、WebサイトUIUX改善のプロセスは以下の通りです。

・課題の発見

・原因の分析

・改善案の検討・実行

・結果の検証

それぞれ説明していきます。

課題の発見  

改善を行うためには、まず課題を発見しなければなりません。

Webサイト全体で、どういった問題を抱えているのか、ということの調査が必要です。自分で一旦使ってみてどうか、と確かめるのが、一番手っ取り早いでしょう。

UIUXの改善は、主に機能面、という意味を含みます。ターゲットの気持ちになって、ここが使いやすい。ここに来たいのに、たどり着くのが難しい。そもそもどこを見れば欲しい情報が得られるのか、やりたいことが出来るのか分からない。などを調査してみましょう。

ただ、自分一人で行うだけで満足するのは悪手です。何故ならあなたは内部の人間で、少なからずUIUXに触れている可能性が高く、かつターゲットそのものである可能性が低いためです。

UIUXのゴールは、説明なしでも何となく使える、というところにあります。そう言ったゴールにどこまで近づけているのかを確かめるのは、あなたよりももっと適任な存在が居るはずです。

真っ先に挙がる方法としては、ユーザーテストがあるでしょう。

ユーザーテストとは、なるべくターゲットに近い人物に、説明もせずある目的に沿ってUIUXを操作してもらい、それを観察する、というテストです。

ユーザーテストは開発者に、非常に大きな発見を提供してくれます。「ここまでやっても伝わらないのか」「このアイコンに気付かないのか」「これが分からないのか」と、ユーザーが全然想定通りの動きをしてくれないことが理解できるでしょう。

また、もっとサンプル数が欲しい、という場合は、分析ツールの使用によるデータ収集がおススメです。例えばGoogle Analyticsや、ヒートマップなどでユーザーがどこを見てどこをクリックしているかなどの情報が集められます。

もし使って欲しいボタンが全然クリックされておらず、そこまでクリックされる想定でなかったボタンがクリックされている、という場合は、見つけたかった課題を見事発見した、ということになります。

原因の分析  

課題の発見の次は、原因の分析です。

ここで注意しておきたいのが、UIの改善とUXの改善が微妙に異なってくる、という事です。何故なら、UIはただ使いやすければいいということを目指しますが、UXは誰にとって使いやすいか、というところがゴールとなるためです。

そのため、前提としてUXを考えるとき、まずターゲットが明確でなければなりません。難しくても多機能に対応できることを求めるターゲットなのか、それとも最低限必要なことだけをスムーズに済ませたいターゲットなのか。そのどちらにどの程度近いかで、構築するUIも異なってきます。

ターゲットが定まって目指すべきUXが見えてくれば、あとはUIそのものの簡便性を最大限まで上げられるように、と考えれば原因はおのずと分かってくるはずです。

例えば、とある画面があまり疲れわれていないのであれば、その画面の情報量が多すぎて分かりにくいのではないか。そのせいで意図されている導線が機能していないのではないか。そもそもターゲットは高年齢層なのだから、この機能は不要なのではないか。もっと流れるように使えさえすればそれでいいのではないか。

そんな風に、原因を分析していくことが可能なはずです。重要なのは、UIとUXで分析を分けること。そしてUXを考えるときは、まずターゲットが明確であることです。

改善案の検討・実行  

改善案の検討は原因の分析と並行して進めることが多いです。

情報量が多くて見にくいのでは、という分析があるのであれば、同時に「減らせばいい」「減ったように見えればいい」「一部を隠せばいい」など複数の案が浮かんでくるかと思います。

他にも、検索ワードで良く調べられる言葉が曖昧であるなら、その補助としてこちらからヒットしやすいワードを表示する機能があればユーザーはスムーズでしょう。あるいは、曖昧なまま検索してもスムーズに該当ページにたどり着けるような検索システムでもいいですし、そもそもあらかじめリスト化して隅に表示しておき、クリックするだけでいい、という形式でも成り立ちそうです。

このように、課題の解決のための案は、原因から様々な形で提案が可能です。そこからコストや費用対効果などを考えて案を絞り、実行していく、という流れになります。

結果の検証  

最後は、結果の検証です。

そう。改善案を実行しただけでは、UIUXの改善は完了ではありません。実際にリリースして、どのように効果があったのか、もっといい方法はないか、というところまでデータを集めて考え、検証する必要があります。

注目点は、

・改善案が意図した通り、正しく反映されているか

・UIの質が高まっているか

・ターゲットにとって、想定したUXが適切であったか

となります。

このチェックの方法は、課題の発見のやり方と同じです。まず自分で使いやすいかを確かめてみて、次にユーザーテスト、分析ツールでのデータ収集という方向性になります。

ここで有効な分析方法として一つご紹介したいのが、A/Bテストというものです。もし改善案が複数あり、それらを同時に実装するのがコスト的に問題ない範囲であるならば、同時に実装してしまう、というやり方です。

どういう事かというと、ユーザーごとにランダムに、Aパターン、もしくはBパターンの内容が表示され、どちらがより効果があるか、ということを確かめる、という分析方法です。

基本的に画像差し替えや、文言のみの違いの場合で有効な分析方法となります。機械分析なので複数のA/Bテストでもっとも効果のある組み合わせはどれか、といった、人間では難しい分析も行えるのが注目ポイントと言えるでしょう。

まとめ  

以上が、WebサイトのUIUX改善のプロセスとなります。では、一度ここでまとめておきましょう。

WebサイトのUIUXの改善プロセスは、課題の発見、原因の分析、改善案の検討・実行、結果の検証、の四段階になります。

課題の発見では、自分で確認する以外にも、ユーザーテスト、Google Analyticsやヒートマップなどの分析ツールが有効です。

原因の分析では、UIUXがどのようにすれば質が向上するのかを考えます。まずUXにおけるターゲットから考えるべきでしょう。そしてUIについて、どのようにすればより簡単に使えるかを考えることで原因が見えてきます。

改善案の検討・実行では、原因の分析に平行して、原因を元に複数の改善案が練られるはずです。その案をコストなどの観点から吟味していき、より適切なものを実行していきます。A/Bテストが可能であるならば、どちらも実装してしまう、と言うやり方もあるかもしれません。

最後に結果の検証で、本当にUIUXの改善が有効であったのかをチェックします。方法は課題の発見同様、自分で確認する、ユーザーテストする。分析ツールを使用する。そしてこの段階だとA/Bテストで複数案の検証をする、などの方法があります。

以上が、WebサイトのUIUX改善のプロセスとなります。ご活用いただければ幸いです。