[webデザイン]ユーザーを思い通りに動かす為のインターフェースの種類5つ
この記事は約11分ぐらいで読めます
webデザインと一口に言っても、ビジュアル的なデザイン、インターフェース的なデザインと色々な要素がありますよね。それらが合わさり、ユーザーにストレスなくサービスやサイトを使ってもらい、更に気に入られたり、コンバージョンにつなげられたりするわけです。
こうしたデザインには流行り廃りの様なものもありますが、大抵は何かの問題解決のために生み出されたものであり、本来そのデザイン手法の持つ性格や向いているシーンというものがあるはずです。
今回の記事ではそうした、webサイトのインターフェース等に用いられるユーザーを思い通りに動かすためのインターフェースを5つほど取り上げたいと思います。モノによっては、いくら流行っていてもあなたのサイトには適さないかもしれません。
サムネイル ― 好奇心をあおる
サイトのトップページ、記事の一覧、関連するコンテンツのレコメンド。
https://jypg.net/stack/popular
こうした場所では、次のページに進んでもらう事が目的になります。そのクリックを促すには「次のページに良さそうなコンテンツがある」というヒキが必要です。違うサイトを紹介し、そちらに導きたい場合にも、サムネイルがあるとクリック率は上がる筈です。
その際には、当然ですがそのサムネイルで全てを見せてしまわないこと、そして遷移先には存在しないようなサムネイルにしないこと、つまり嘘をつかずに好奇心を煽ることが必要です。嘘は、その瞬間だけのクリック率を上げるかもしれませんが長期的にはそのサイトの信用を失います。
例に挙げたJAYPEGの場合はビジュアルを楽しむサイトです。必要な人は大きなサイズで見たいわけですから、サムネイルで全体を見せてしまっても構わないとの判断でしょう。好奇心をあおるため適当にクロップしたものを見せるサイトもありますが、果たしてどちらの方が閲覧率が上がるのでしょうね。
グリッドレイアウト ― コンテンツの並列化
たくさんのコンテンツや商品があり、なるべくたくさんのものを一度に見せたい場合。
http://pinterest.com/BlairThomson/blair-s-wishlist/
代表的なのはやはりこれですね。
例えばECサイトには、実際に品物を買ってもらいコンバージョンを得ることの他に、買い物をしていて楽しいと思わせることも重要です。ウィンドウショッピングが好きな人もいますよね。その場合にはこうして出来るだけたくさんのものを一覧させるレイアウトが向いています。特に画像コンテンツは眺めているだけで楽しかったりもしますよね。
また、そのコンテンツをれんが状に配置するメイソンリーレイアウトというものもあります。上に挙げたPinterestがそうで、そのままPinterest風デザインと言われることもあります。コンテンツを整然と並べた場合、ユーザーの意識には自然とどこかで区切りがつけられ、配置には優劣の概念も入ってきます。横列の整列をなくすことで区切りがなくなり、時間を忘れてずっと見ているという状況が生まれるでしょう。また、全体の数の把握もしにくくなるのでサービス初期の少ないコンテンツ量をごまかすことも出来ますねｗ
無限スクロール ― 流れを途切れさせない
フロー型のインターフェースや商品一覧等のグリッドレイアウトに。
ユーザーはインターフェース・コンテンツの何かの区切りで、そこから先に進むか進まないかを選ぶことになると思います。その区切りを作らないように延々と繋げてしまっているのが無限スクロールです。前述のメイソンリーレイアウトと同時に採用するとそのままPinterestっぽくなりますね。
目的が購入等のコンバージョンであるにせよ滞在時間を長くすることであるにせよ、コンテンツを見るのを止めるタイミングを減らすのは有効かと思います。ただここまでやると、逆に膨大なコンテンツの全てが並列な存在になってしまい、どこまで見たらいいかわからなくなるような気がしますね…。
なぜEtsyでは無限スクロールは失敗したのか — U-Site
ページャーにしてしまうのとどっちの方がそのサイトにとって相性がいいのかは、実際に運用してみないとわからないかなと思います。
Find jobはどうして無限スクロールにしてしまったのでしょうか…。Pinterest等と違い、楽しみで探しているわけではなく切実にコンテンツを見るこのようなサイトでは取りこぼしのないしっかりした情報の網羅、何件見たかという情報の整理が重要になるかと思うので、ページネーションの方が向いている気がします。一応両方ありますけど。
統一感のあるビジュアル ― シームレスに見せる
没入感の強い読み物コンテンツや、購入等のコンバージョンが目的のサイトに。
こういうデザインだと一気に下まで見てしまいますね。
視覚的に、意識が分散するようなレイアウトにしてしまうとそこからユーザーが離脱する可能性が高くなりますが、連続性のあるデザインのサイトからは途中から抜けだしにくくなります。読み物等のコンテンツサイトであればサイトデザインから世界観を作り、ひとしきりコンテンツを見終わるまでその世界の中に居座らせるようにしたいはずです。
また、何かを販売しているサイトであればそれ以外に意識を分散させるような要素を置かないことが重要です。最近流行りのパララックスなサイトも、うまく使っているサイトはコンテンツに集中させてくれますし、世界観に入り込めます。一本道であるのも良いですね。
http://muuuuu.org/category/taglist/parallax
情報サイトのようにサイトの中に複数のコンテンツがある場合、そのレイアウトをコンバージョンが必要なページにも採用してしまうと、脱線する可能性が高くなるでしょう。一度ラインに乗ったら、購入者を逃がさないようにページ毎にレイアウトを変えることも必要なはずです。
デザインの中に広告を紛れ込ませてしまっているパターンもありますよね。…それはまあ微妙な例ですが、注目して欲しいコンテンツを自然な形で溶け込ませるというのは有効なテクニックであると思います。
ダイアログ、ページナビゲーション ― 擬似コミュニケーション
新規登録の進行や、コンテンツの投稿等。
http://お名前.com/
お名前.com等のドメイン取得等、手続きの煩わしい契約の成立が仕事であるサイトにはそうした工夫が凝らされています。
こちらのアクションに対してサイト側からのリアクションが発生し、次のアクションを促すというキャッチボール的な動きを続けさせ、やりとりの途中での離脱を防ぎます。手続き途中のページナビゲーションの様なものも似た効果があり、途中まで来てしまった工程を中断しないようにさせたり、あとどこまでやれば終わると達成目標を示すことにもなります。
ただ、このコミュニケーション的な動き自体を嫌う人もいますし、工程が長い手続きなどは、逆にうんざりさせてしまうかもしれません。無限スクロールと同じように、量を明示したほうが良い場合、悪い場合があると思います。
Facebookは事あるごとにツールチップ的に選択肢を提示してきますが、慣れるとうっとおしい半面、ユーザーは流れにしたがって入力させられ、結果的には助かっていることも多いと思います。
テレビ番組の構成って面白い
上記5つのwebサイトにおいてユーザーの離脱を防ぐ工夫は、似た手法がテレビ番組の構成でも行われていることに気付きます。
テレビには視聴者を逃がさない工夫が詰まっている
例えば、
- CMをまたぐとき、視聴者をCMの間もワクワクを持続させる為に「60秒後に○○が！！」というような表現を使ったりします
- バラバラのコンテンツを一つの番組の括りの中でオムニバス形式に見せることによって、全てのコンテンツを見せようとします
- CMを番組内に配置する事によって、視聴者にそれが広告であることを意識させずに見てもらったりします
- わざと番組を区切りのいい時間より早く終わらせ、ちょっとずらして次の番組を放送する事で視聴者の時間の区切りを作らせないようにします
- チャンネルはそのまま、とタレントが視聴者に直接呼びかけることで対話の途中であるような感覚を持たせます
こうして考えるとやはりwebにとっての媒体としての先輩であるテレビ番組の構成には、色んなヒントがあるように思います。
終わりに
上記のようなインターフェースパターンを、どのような手法がサイトに適しているかを考えて採用すれば良いと思います。無限スクロールよりも単純なページャー、メイソンリーレイアウトよりも単純なグリッドレイアウトが良い場合があります。
また、ブログ等のメディア系サイトにとってユーザーにやって欲しいことはたくさんあります。他の記事を読ませること、ソーシャルへのシェア、広告のクリック…。
WEBCRE8.jpの場合はこのなかだとソーシャルへのシェアでしょうかねー。実際、記事の最後にはソーシャルボタンがあります。次に広告、TwitterやRSSの登録、関連記事、コメント(DISQUS)と続いています。ここに注目すればそのブログの主が何を優先したいのかわかるんではないかと思います。あと、うちではスクロールに追随する広告やナビゲーションは現時点では考えていません。一旦は記事を読むことに一番集中して欲しいですしね。
これらの動線を作る為にもっとできることはあると思います。リニューアル時にはもっとその辺を強く意識して作り直そうと思います★