UIUXの改善には、様々な要素があります。
そもそもUIUX全体の使い勝手は適切なのか。勘違いさせる要素はないか。分かりにくい部分はないか。そう言った全体的な面から、画面遷移は問題ないか、エントリーフォームは大丈夫か、など個々の要素の面でも確認すべき点は多種多様です。
今回は、その中でも画面遷移について、注意すべきポイントを共に明らかにすることを目的とした記事となります。
まず前提として、画面遷移とは、違う画面へと移動することを意味します。
大抵の場合はボタンをクリックすることで行われるものになります。サイトで言えばホーム画面から個別の商品情報ページに移動することなどが、画面遷移と言えるでしょう。
ですが、そんな画面遷移にも、気を付けるポイントはいくつか存在します。それは、以下の通りです。
・一画面当たりの機能量、情報量は限りがある
・デバイスごとのタスク量
・文脈が担保されている
・ヒートマップから問題を発見する
それぞれ、説明していきます
画面遷移は、前提として少なければ少ない方がよいとされています。
それは単純に、閲覧者のクリックする手間が少ない分だけ省けるからです。スクロールだけですべてのUIを活用できれば、それに越したことはありません。
では何故画面遷移は行われるのでしょうか。それは、一画面ごとの機能量、情報量には、限りがあるためです。
例を挙げます。とある旅行予約サイトAと、旅行予約サイトBがあったとします。
この内、Aは従来通り画面遷移が適度にあるサイトで、Bは画面遷移が完全にないサイトだったとします。
Aは従来通りの旅行サイトなので、訪問者は適度に画面遷移しつつも、情報を記入して予約を取りました。一方Bはどうでしょうか。
旅行予約サイトという事で、選択すべき情報は様々です。予約先の旅館はどの地域どの旅館にするか。選択する宿泊コースは？ 人数や日程も入力して、最後にカード情報を始めとして本人情報を、すべて一画面で入力しなければなりません。
そのすべてが連続しているというのが、画面遷移がないページに起こる現象です。上の方の情報をざっと確認して、画面最下部で情報入力を済ませ、次の画面へ、ということが出来ないのです。一続きになっているため毎回入力箇所はどこにあるか、というのを非常に長いスクロールから探す必要があります。
非常に不便であることが、これでお分かりいただけたかと思います。つまり、一画面にあたって一トピック以上のUIを詰め込むと、かえってUXの質が非常に下がってしまうのですね。そのため、少ないほどいいとされる画面遷移は、トピック数に合わせて設定されるのです。
UIの設計は、デバイスごとに変わってきます。それは、デバイスごとにスペックが異なるため、起動できるタスク数が異なってくる、と言うのが原因です。
詳しく説明します。PCの多機能ソフトウェアの場合、一つの機能内では画面遷移を起こしません。例えばSlackでは、画面全体がガラッと変わるような画面遷移は行われず、ワークスペースを変えればチャンネルが変わり、チャンネルを変えれば流れているメッセージが変わり、そのメッセージの一つを選べばチャンネルの会話欄を狭めてスレッドが右端に開きます。
このように、PCではマルチタスクが行えるため、画面遷移が極力行われない形でUIが実装されています。では、そのSlackのスマホ版を見てみましょう。
スマホ版のSlackは、ワンタップごとに画面遷移を起こします。ワークスペースを選べばそのワークスペースのチャンネル一覧画面に遷移し、チャンネルを選べばチャンネル内のメッセージのみを画面に表示します。スレッドも同様です。
このように、スマホはPCに比べてスペックが足りない分、UI側で画面遷移がどうしても行えない仕様になっていることがほとんどです。
こういった、デバイスごとのタスク量の基準は、以下の通りです。
・PC:マルチタスク
・タブレット:ダブルタスク
・スマートフォン:シングルタスク
そのため、PCだと無用な画面遷移を少なくしてUXを向上させるべく工夫をするべきなのに対して、スマホ版だとスペック不足を画面遷移で補うような仕様にするのが適切です。
画面遷移にもまったく別の画面へと遷移する場合、同じ機能の違うページに遷移する場合、はたまた実質的に同じページを違うUIに遷移する場合など様々ですが、連続するような画面遷移の場合、ちゃんと文脈を担保しなければならない場合が存在します。
例えばですが、旅行予約サイトのUIを使用している際に、いきなりホーム画面に遷移したとき、ユーザーはきっと混乱してしまいます。
これは極端な例ですが、非常に分かりやすく文脈の必要性が理解できるかと思います。旅行先を選んで、日程も決め、さぁあとは自分の情報登録だけだ、というタイミングですべてを白紙に戻された(ように見えた)らたまったものではありません。何か間違ってしまったのではないか、と疑うでしょう。
そして、これに近しい例はそう珍しくありません。例えばバナー広告で「メアド登録で○○プレゼント！」と書かれていて、いざメールアドレスを登録しても望みのものが提供されなければ、自分の操作を疑いますし、場合によっては苦情を入れるほど混乱します。
このように、文脈を担保できていない例、というのは意外に身近に潜んでいるもの。UIUXの改善を狙う場合は、こういった細かな部分についてもチェックしておくべきでしょう。
最後は、画面遷移を着眼点にUIUXの改善を狙う際に、役立つツールについてご説明します。
ヒートマップとはUIUX改善に役立つツールの一つで、ユーザーがマウスで良くクリックする場所はどこか、ユーザーのマウスはどのような軌跡を描くのか、といった細かな情報を可視化するツールです。
このヒートマップを活用することで、
・「この機能が思った以上に使用されておらず、それがユーザーの不満になっているため、この機能のボタンUIをもっと目立たせよう」
・「このUIばかり使用されているが、開発陣の想定ではあちらのUIの方がメイン使いの想定だったため、このUIはもう少し小さく目立たなくしてみよう」
など、可視化した情報をもとに施策を考えることが可能になります。
以上が、UIUX改善における、画面遷移の注意点となります。
では、最後にもう一度まとめていきましょう。
・一画面当たりの機能量、情報量は限りがある
前提として、画面遷移数は少なければ少ないほどクリックの手間が省けてUXの質が高まります。
ただし一画面あたりには、掲載できる最大機能、情報量があります。それは大体一トピック、一テーマで区分することができ、それを超える機能量、情報量はユーザーを混乱させてしまう結果となります。
・デバイスごとのタスク量
デバイスには、そのスペックに応じたタスク量が存在します。PCはマルチタスク、タブレットはダブルタスク、スマートフォンはシングルタスクです。そのため、PCは画面遷移数が少ないUIが適していて、スマートフォンではスペックを補うため事細かに遷移する必要が発生します。
・文脈が担保されている
連続する形式の画面遷移の場合、文脈が担保されていないとユーザーを混乱させてしまいます。情報登録の途中であれば次の情報登録画面、バナー広告で何かを約束したら遷移先でその約束を守るなど、文脈を担保しましょう。
・ヒートマップから問題を発見する
ヒートマップでは、視覚的にユーザーがどのようにサイトを閲覧したのかを確認することが出来ます。その情報によって、UIUXの改善のための施策を考えることが出来ます。
以上が、UIUX改善における画面遷移のポイントです。ご活用いただければ幸いです。