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

最終回 ユーザーに使い方を文字で説明するためのUI

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

ユーザーに提供するサービスが直感的なデザインで,訪れた際に何ができるのかが説明なしでパッと理解できる状態が望ましいことは言わずもがなです。しかし,それは簡単なことではありません。また,そういう状態を実現できていると運営者側が勘違いをしてユーザーに使い方が何も伝わっていないと不親切になってしまいます。特にB2BBusiness to Business企業間取引)サービスなどビジネス用途の場合,何をどこでどのように行うかの理解ができていないと業務が正しく回らないことになってしまいます。そうなると運営者への問い合わせの数も増えてしまい,ユーザーサポートやCS(カスタマーサクセス)チームの負荷も増えてしまいます。

サービス上で一言説明が添えてあったり,気の利いた位置にヒントが書かれていたりすることで,こういった負荷の軽減にもつながります。最終回となる今回は,ユーザーに対して画面や機能の意味,また注意しなければいけない動作に,文字を使ってどのようにアプローチするとよいか,いくつかのケースを紹介します。

ユーザーに文字を使って説明をする場合,その内容がユーザーとどう接触するべきかを考えないといけません。その手段が適切でないと,ユーザーが気付けなかったり不便に感じたりしてしまいます。⁠実は説明が書いてありました」では後の祭りです。

❶ 特定の条件でだけ(たとえば初回に一度)見ることができる

常に説明を見ることができる状態である必要はないが,最初だけまたは特定のタイミングだけ見ることができれば十分であるといったこともあります。そんなときは,何の機能がどこにあるかを示すコーチマーク図1(a)や,ユーザーが表示しようとしている画面の直前でモーダルを表示し説明を挟む(図1(b)ようにして対応できます。この方法を使えば直接画面に説明を書かなくて済むため,画面をシンプルに保つことができます。

図1 ナビゲーションの位置を示すコーチマーク,何の画面か説明するためのモーダルの事例

図1 ナビゲーションの位置を示すコーチマーク,何の画面か説明するためのモーダルの事例

しかし,コーチマークやモーダルで説明した情報は,ユーザーがあとから見たいと思ったときに見ることができない点に注意しないといけません。その必要がある場合は,後述する❷❸の方法を検討する必要があります。

図2は,グルメサービスの初回画面でユーザーの行動範囲を伺う画面です。複数の都道府県を選択できますが,3つまでしか選択できない仕様です。そのため,この説明をどこかに書いておいてあげたほうが親切だと言えます。その手段として,4つ目を選んだ際にアラートを出して説明をするパターン(図2(a)と,後述する❷のように直接画面に3つしか選択できないことを書くパターン(図2(b)の両方とも考えられます。

図2 特定の条件でだけ表示するパターン(a)と常に説明を見ることができるパターン(b)の違い

図2 特定の条件でだけ表示するパターン(a)と常に説明を見ることができるパターン(b)の違い

どちらも間違ってはいませんが,この画面の選択肢は「都道府県」になっています。グルメという観点においては,4つ以上の都道府県をまたいでよく行くエリアに登録する人はあまり多くない気がします。そういう場合,4つ以上選ぶことはイレギュラーと考え,(a)のパターンで良いように思います。一方で選択肢が市区町村といった小さいエリアの単位であったり,ラーメン・寿司・イタリアンといったグルメのジャンルのようなケースで選択数に制限を設けないといけない理由があったりする場合は4つ以上選ぶことも普通です。その場合は(b)のパターンのほうが親切だと考えられます。

❷ 常に説明を見ることができる

ユーザーが必ず目にしてほしい説明は,常に見ることができる状態にしておく必要があります。たとえば,画面の意味を理解してもらうため説明が必要な場合図3(a)や,あらかじめ注意を促しておかないといけないような場合(図3(b)です。それ以外にも,画面上のほかの要素と合わせて読むことによって意味をなす説明も,常に見ることができる状態にするほうが利便性が上がります。

図3 画面の説明,注意を記載する事例

図3 画面の説明,注意を記載する事例

しかし,❶で紹介した方法や❸で後述する方法とは異なり画面に直接記載するため,分量が多くなってしまうと文字の占有面積の割合が高くなります。そうなると複雑な印象を与えたり逆にわかりにくくなったりしてしまうため注意が必要です。そういった状況になった場合は,❶の特定の条件だけで見られるようにする方法や,❸の任意で見ることができる方法をお勧めします。

図4は,Airbnbのホスト向けの写真掲載画面です。どのような写真を載せればよいかの説明だけではなく,画面の右側にクオリティの高い写真を撮るためのヒントまで,常にユーザーが見える状態で説明しています。画面を広く使うことのできるPC画面だと,左側に必要な入力フォームを配置して右側に補足となる説明を配置すると,邪魔にもなりにくくスペースを有効活用できます。

図4 Airbnbでホスト向けの入力画面右側にヒントを表示している事例

図4 Airbnbでホスト向けの入力画面右側にヒントを表示している事例

❸ ユーザーが見たいときにだけ見ることができる

画面に常に表示されていなくても,ユーザーが説明を見たいときにだけ自分で見ることができる方法に,ツールチップ図5などがあります。❷の画面に常に表示させておく方法と比較すると,画面内の文章量を最小限にできるため,ごちゃごちゃせずに済みます。しかしユーザーにとってはひと手間かかるため,どこをクリックすれば説明を見ることができるかわかるように配置しなければいけません。必ず見てほしいような説明には向きませんが,ユーザーが困ったときに手助けになるような情報を表示する場合は便利です。

図5 ユーザーが見たいときにだけ見ることができるツールチップの事例

図5 ユーザーが見たいときにだけ見ることができるツールチップの事例

説明を長々と書くのには向かないため,分量が多くなる場合はヘルプページなどに遷移できるよう画面を分けてあげることも手段の一つです。

今回は,ユーザーが機能の使い方や画面の内容への理解を高められるよう,文字を使って説明をする方法をいくつか紹介しました。サービスを作っていると,機能的なことばかりに目が行きがちです。ユーザーにとって必要な説明があるかという目線でも,サービスを一通り見回すとよいと思います。開発者は,言葉を使わずに頑張って操作性を上げたり,レイアウトでどうにかしようとしたりしてしまいがちですが,場合によってはちゃんと文章を書くことも武器になると思います。

本コラムでは,私が普段仕事で実践している,ささやかでユーザーは気が付かないようなこだわりや,一見何も考えていないようで実は考え抜いている,そんなUIデザインの泥臭い工夫についてお届けしてきました。本コラムを読んでいただいたみなさんを通し,世の中のサービスを少しでもより良いものにできていたら幸いです。5年間ありがとうございました。

WEB+DB PRESS

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

2022年4月23日発売
B5判/160ページ
定価1,628円
(本体1,480円+税10%)
ISBN978-4-297-12789-3

  • 特集1
    演習で慣れる!
    データベース入門
    SQL操作,テーブル設計,分析用データ処理
  • 特集2
    クラウド構築ツールの大本命!
    ゼロから学ぶTerraform
  • 特集3
    チャットやIssueでちゃんと伝えたい!
    エンジニアのための英語

著者プロフィール

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

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

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