縁の下のUIデザイン―少しの工夫で大きな改善!

第5回 長くなりがちなコンテンツをどう見やすくするか

この記事を読むのに必要な時間:およそ 2 分

最初はシンプルだったWebサービスの画面も,気が付いたらとても長くなってしまうことがあります。本来の目的と関係の薄い情報が増えユーザーにとってわかりにくくなったり,情報が充実しコンテンツの量が厚くなった反面,欲しい情報にたどり着けず使いにくくなってしまうこともあります。特に前者の,本来の目的と関係の薄い情報である「広告」「関連情報」については増やしすぎないよう注意が必要です。

対処法として画面を分割することも考えられますが,ユーザーがアクセスしにくくなったり,気付かれず効果が発揮できなかったりします。分割せず主力の画面に情報を載せたほうが効果的なため,画面が長くなってしまいやすいのです。

とはいえ,画面が長くなっても回遊数注1を増やしたり,直帰率注2を下げる役割を担うことももちろんあります。追加する際は,ユーザーの気持ちを考えたうえで,挿入時にUIUser Interfaceを工夫する必要があります。

今回は,まずはできるだけ画面が長くならないようにするためどうすればよいか,次に長くなった場合どのように考えて対応するかを,これまで筆者が考えてきたことや実践してきたことをもとに紹介します。

注1)
サイト内のページをどれだけの量見て回ったかの数のことです。
注2)
サイトにたどり着いたあとほかのページを見ずにすぐにそのサイトから離れた率のことです。

要素を追加する際に意識すること

たとえばあるお店の画面が存在する場合,⁠関連する近くのお店」⁠同じカテゴリの新着のお店」⁠このお店を見ている人がほかに見ているお店」を表示するなど,回遊のためのいろいろな施策が考えられます。どれも役に立つ情報かもしれませんが,少し考えてみましょう。

すでにある要素を削る。または分け合う

要素を追加しようとしている場合,類似する機能がないか,もしあれば削ることができないかを考えましょう。既存のものを消してまで追加するほど価値があるかという視点を持つことで,精度の高いものを作ろうという意識も生まれます。

また,削らなくても「既存の要素と半分ずつにすることはできないか」も検討できます。要素を分けるには図1[a]のように表示面積を分ける方法もあれば,図1[b]のように面積は変えずユーザーのアクセスに応じて出し分ける方法もあります。

図1 要素を分け合った例

図1 要素を分け合った例

効果の最大化を意識する

ある要素を追加した場合,その要素に効果が奪われ,ほかの要素の効果が薄れる可能性があります。たとえばリンクを追加した場合,仮にクリックされていたとしても,図2[a]のようにほかの要素のクリックを奪っているかもしれません。その場合,既存の要素は新しい要素と同じ役割を持っていて,削ってもよい要素かもしれません。

図2 要素追加後のクリック数の変化例

図2 要素追加後のクリック数の変化例

一方で図2[b]のようにこれまでの要素のクリック数は変化せず新しい要素のぶんだけ増えていたとしたら,これまで興味を持たず離脱していたユーザーが新しい要素に興味を持った可能性があります。

このように要素を追加する場合は,その画面において効果(クリック数を評価とする場合1PVあたりのクリック数など)を最大化するためにはどうすればよいかを意識しましょう。

面積比率をルール化する

ルールなく要素を追加していくときりがありません。

筆者の経験では,⁠その画面に本来あるべき要素が7割,関連する情報など関係の薄い要素は3割」といったように具体的にルールを用いたこともあります。このルールで決めた割合を超えない範囲では要素追加が自由にでき,超える場合は,超えない範囲で効果の最大化を行うのです。

著者プロフィール

池田拓司(いけだたくじ)

デザイナー。多摩美術大学を卒業後,ニフティ株式会社,株式会社はてなを経て,2012年にクックパッド株式会社に入社。2013年デザイン部長,2014年ユーザーファースト推進部長・執行役。Sassを使ったUIフレームワークの構築,Webアプリケーションなどサービス全体の設計,ユーザーのほうを向いたデザインやサービス開発の組織づくりにも努める。2017年4月に独立し,Design & Life inc.を設立。インターネットサービスをはじめとするさまざまなデザイン業,およびサービス開発などに取り組んでいる。

Design & Life inc.:http://designandlife.co.jp/

コメント

コメントの記入