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

第11回 異なるユーザー層へのデザイン ―出品者/購入者,初心者/上級者……

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

どういった人へ向けたサービスなのか考えながら設計することで,的確にデザインへ落とし込みができるようになります。たとえば旅行予約サービスの場合であれば,⁠旅行情報を持っている人(旅行会社)⁠旅行情報を探している人」に分類,設計できます。前者に対しては限られた人しかアクセスできない管理画面を用意し,後者であれば広く一般的に使うことのできるサービス画面を用意して,それぞれのユーザー体験を分けて考えることができます図1(a))⁠

しかし,たとえばオークションサービスの場合は「商品を出品する人」⁠商品を買う人」のように,同一画面上で2つのユーザー層の体験を作っていかなければいけないケースもあり,かつ商品を買う人が出品する人になったり,商品を買う/出品するの両方を行うユーザーもいたりします図1(b))⁠今回はこのような異なるユーザー層に対しての工夫について考えます。

図1 重ならない(重なりにくい)サービスと重なるサービス

図1 重ならない(重なりにくい)サービスと重なるサービス

重なり合わないユーザー層

まずは,2種類のユーザー層が重なり合わない場合を解説します。

ユーザー層によって画面を分ける

ユーザー層が重なりにくいサービスは,お互いの利用シーンを想像することが難しくなりがちです。

クラウドソーシングサービスである「ランサーズ」は,⁠仕事を受けたいユーザー」「仕事を依頼する企業側」との2つのユーザー層が考えられます。

たとえば,検索エンジンで「Webデザイン」と検索してサービスにたどり着いた場合,⁠Webデザインを依頼したいのか」それとも「Webデザインの仕事を探しているのか」どちらなのかによって表示すべきコンテンツが異なります。そのためランサーズでは,図2のようにサービスを回遊していると「受けたいユーザー」かそれとも仕事を「依頼したい企業側」かという問いがモーダルで表示され,選択することで最適な表示に切り替わり,この課題を解決しています。

図2 ランサーズのユーザー層の選択画面

図2 ランサーズのユーザー層の選択画面

本来は1つの画面で両方の体験を考えながら設計したいところですが,このような対応をすることで的確な情報を届けることができるとも言えます。

もう片方のユーザー層のことをイメージしやすくする

ユーザー層が重ならない場合,お互いの画面を意識する機会が減ってしまいます。その場合,もう片方のユーザーがどのように見えているか簡単にイメージできるようにすることをお勧めします。

民泊サービスのAirbnbの管理画面では,図3のように「部屋を貸したいユーザー」の管理画面上からでも「民泊希望のユーザー」が部屋の情報ページを見た際にどのよう見えるかわかるプレビューが付いているため,ユーザーを意識しやすくなっています。

図3 Airbnbの管理画面

図3 Airbnbの管理画面

重なり合うユーザー層

たとえば,コミュニティサービスでは,情報をただ眺める「閲覧ユーザー」と,閲覧ユーザーに向けて情報を投稿する「投稿ユーザー」がいます。最初は閲覧ユーザーとしてサービスを使っていても,何かをきっかけに投稿ユーザーになることがあります。

図4はサービスを通して個人と個人が商品を売買するサービス,ヤフオク!,メルカリ,Letgoのホーム画面の違いです。画面には「商品を買うユーザー(探している)⁠向けの要素と「商品を売るユーザー」向けの要素があります。

図4 ヤフオク!,メルカリ,Letgoのホーム画面の比較

図4 ヤフオク!,メルカリ,Letgoのホーム画面の比較

(a)のヤフオク!の場合は画面下部のボトムナビゲーションの右から2つ目に出品ボタンがあるのに対し,(b)のメルカリは右下に大きく出品ボタンがあります。(c)のLetgoでは,ヤフオク!と同じように下部のバーにアイコンがあるだけでなく,その上に「Sell Your Stuff」という文字も大きくあり異なります。

出品する気のないユーザーにとっては,できるだけ「商品を売るユーザー」の要素は少ないほうが使い勝手が良いかもしれません。一方で,できるだけ売るための動線を増やしたほうがユーザーは気が付きやすくなります。そして,このバランスがサービスの特徴や作りたい世界観に大きく影響するのです。

しかし,⁠商品を買うユーザー」から「商品を売るユーザー」になるのは簡単なことではありません。一方的なナビゲーションを置くと邪魔に感じられて,離脱するリスクすらあります。図5のZOZOTOWNでは,注文確定の前の確認画面で,過去に買った商品を売ることにより新しく買う商品が安くできることに気が付くことができます。

図5 ZOZOTOWNの注文確認画面

図5 ZOZOTOWNの注文確認画面

ユーザーに「買う」から「売る」という逆のアクションを取らせる場合,ユーザーのコンテキストに沿った形で売ることのメリットなどを提示する方法があります。そうすることでユーザーの気持ちを動かし,別のユーザー層になる可能性が高くなります。

リテラシーの異なるユーザー層

ユーザー層の種類には,⁠はじめて使うユーザー」⁠ずっと使っているリピートユーザー」という観点も考えられます。⁠はじめて使うユーザー」を意識しすぎた結果,幼稚で説明的なUIになりすぎてしまわぬよう注意が必要です。

慣れやすい体験を作る

初回登録後は,ユーザーが日々使うUIの流れと同じにすることが大事です。図6は初回登録画面の流れの図で,通常の利用ではホーム画面から記事の投稿画面を開くことを想定しています。(a)は初回登録で記事の投稿も盛り込んだパターン,(b)は簡単な初回登録にして,ホーム画面からコーチマークにより記事投稿を体験するものです。(a)のほうが目的の画面にスムーズにたどり着けるかもしれませんが,2回目以降の利用方法と大きく異なってしまいます。

図6 初回登録時の流れについての2つのデザイン

図6 初回登録時の流れについての2つのデザイン

普段よく使う機能を初回に体験させる場合は,いつも使うであろう使い勝手で体験させることをお勧めします。

習熟度の高いユーザー向けのUI

設定項目などは,機能の種類や利用されるページなどで分けられることが多くあります。図7のInstagramの投稿画面には,⁠詳細設定」という小さく目立たないナビゲーションがあり,細かな設定ができるようになっています。新しく使うユーザーには必要なかったり,ヘビーなユーザーしか使わないような機能を開発することになった場合は,それらをまとめて奥の階層に配置することもお勧めです。

図7 Instagramの投稿画面

図7 Instagramの投稿画面

このように,サービスを使うユーザー層はさまざまです。そのため,あれこれ考えていると特徴のない誰のためでもないデザインになってしまうリスクも増えてしまうと思っています。

家族や友達など親しい人でもよいので,まずはユーザーになり得る人を身近に見つけイメージすることが大切だと考えます。

WEB+DB PRESS

本誌最新号をチェック!
WEB+DB PRESS Vol.112

2019年8月24日発売
B5判/168ページ
定価(本体1,480円+税)
ISBN978-4-297-10787-1

  • 特集1
    React/Vue.jsで実践!
    コンポーネント設計
    モダンフロントエンドの構造化と分割の新提案
  • 特集2
    RDBMS徹底比較
    PostgreSQL,MySQL,SQL Server,Oracle Database
  • 特集3
    実践Scala
    オブジェクト指向×関数型
  • 一般記事
    自作キーボードのススメ
    デザイン,配列,打鍵感……自由自在

著者プロフィール

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

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

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