良いサービスはスクショ見たらわかる
こんにちは、PdMのひまらつです。
仕事やプライベートで触っていて、「あ、このサービスいいな」と思うことがあります。使い込んでというよりは、ちょっと触った時点でもうわかる。この感覚が不思議に思っていたので整理してみました。
良いサービスはスクショ見たらわかる
画面が現在地を教えてくれる
良いサービスは、画面が現在地を教えてくれます。
上の画像は Notion のページですが、サイドバーとヘッダーで階層がナビゲーションされていて、「いま自分がどの画面にいるのか」がパッと見でわかります。
これはコンテンツを入力する画面なので、メインは右下のエリアです。人の目は左上から右下へ視線が流れるので、自然と目が「これまで辿ってきた道 → 現在地」と動くのも心地よいですね。
人間は気が散りやすく、ふとしたことで今何をしていたか忘れてしまいます。画面が現在地を教えてくれていれば、一時的に意識が離れてしまっても、すぐに自分の仕事に戻ることができます。
大事な部分に目が留まる
良いサービスは、画面を見たときに重要な要素から順に目に留まります。
上の画像は Stripe の画面ですが、最初に目が留まるのはナビゲーション部分の「顧客」、右上の「アクション」ボタンではないでしょうか？
使う色やスタイルにより、ユーザーが認知する順番がコントロールされています。
デザイナーさんと仕事をしていると、最初は色をつけずにグレースケールでレイアウトを組んでいるのを見ることがあります。これはコントラストだけで重要な要素がどれか分かるように設計するためです。
注視せずとも何をすべきか理解できるので、ユーザーの負担は少ないでしょう。
「引き算」で複雑をシンプルに保つ
Notion はシンプルですが、機能が少ないわけではなく、むしろ高機能です。機能が多いと普通は複雑になってしまいそうに思いますが、どのようにシンプルさを保っているのでしょうか？
その技法の一つに、「必要なタイミングで必要な要素を出す」があると思います。例えば、アイコンやカバー画像などの設定ボタンは、ページ上部にマウスカーソルが移動した時のみ表示されます。
また、コンテンツを書き始めるとヘッダー部分が非表示になり書いているコンテンツに集中できるようになっています。
適切なタイミングでのみ要素を表示することで、機能が増えても画面をシンプルに保っています。
PCのホバー、Mobileのスワイプ
iPhoneやAndroidなどのデバイスではホバーを表現できません。その代わりに使われるのがスワイプメニューです。iPhoneの標準メールアプリなどで採用されていますが、スワイプしたときにそのコンテンツに対する操作メニューが登場します。
これらの操作メニューは、要件的にはあらかじめ画面に表示しても良いハズです。しかし、「コンテンツに集中したときだけ」出すことで常時表示される要素を減らし、リスト画面をシンプルに保てています。
テキストで伝えようとしすぎない
引き算の文脈でもう一つ、できるだけテキストを削るというのがあります。
サービス提供者としてはアレもコレも説明したいものですが、書かれた長文をちゃんと読むユーザーはほとんどいません。思い切って大幅に文字数を削り、大事な部分だけを残してそれを読んでもらうのが良いです。意味のある画像やアイコンを添えられれば、さらに読みやすくなるでしょう。
この辺りはUXライティングの分野だと思いますが、「秒で伝わる文章術」はおすすめの本です。帯にある「読み手の脳に負担をかけない」メッセージよろしく、この本自体が非常にスラスラと読めますので、興味があればぜひ読んでみてください。
一貫した振る舞いがもたらす効用
ここまでは画面から伝わるメッセージの話でしたが、アプリ全体の振る舞いについても考えてみます。
Notionの設定画面を2ページ分見てみましょう。
2つの画面で配置されている要素やレイアウトは異なりますが、画面の重要なボタン（「Add members」「Update」）は同じスタイルで共通しています。
画面単位でなく、UX/UIはサービス全体で一貫性を保っていることが重要です。上の2つの画面を見た後だと、「どの画面でも青く塗られたボタンが重要なアクションなんだな」と予測できます。
こういった学習が進むとユーザーの慣れが醸成されるため、認知負荷が下がり、ストレスなく画面を操作できるようになります。
（ボタンのスタイルだけでなくレイアウトも統一できるとより効果的だと思いますが、実際は画面により最適なレイアウトが異なり難しい場合も多いので、バランスかなと思っています。）
ユーザー学習と慣れ
自サービス内だけでなく、ユーザーがすでに知っていることを組み込むのも有効です。例えばチャット画面を作るとき、自分オリジナルのものを提供するよりLINEに似たインタフェースの方がユーザーがすぐに使えるでしょう。明確に違いを出したい意図がない場合は、ユーザーが普段使っているものに寄せておくと早く慣れてもらえます。
また、「慣れ」自体は使いやすい・使いづらいに関わらず、どんなものにも生まれます。非常にレガシーで複雑なシステムでも、その道10年のユーザーからすれば「使いやすい」。しかし、新規ユーザーが使いこなせるまでは時間がかかるでしょう。
一貫した振る舞いを提供したり、ユーザーがすでに学習済みの概念を用いたりすることで、初見にもベテランにも使いやすいサービスになると思っています。
良いサービスは「脳みそ」を使わせない
ここまで「良いサービス」という言葉が何度も出ました。私の思う良いサービスとは、できるだけ脳みそを使わずに使えるサービスです。
サービスの使い方に四苦八苦するのではなく、自分の体の一部のように動かせて、それにより本質的な作業に集中できるのがクールだと思っています。
画面を見たら現在地や操作方法がわかる。一貫した振る舞いにより、そのボタンを押したら何が起こるか事前に分かる。操作してみると自分の期待通りに動いてくれて、ますますそのサービスへの信頼が強まる。これの繰り返しが重要だと思っています。
おわりに
「良いサービスはスクショを見たらわかるのはなぜか？」をスタートとして、サービス設計について色々考えてみました。
仕事や生活でいろいろなアプリやWebサービスを使っていますが、細部まで考え込まれたサービスに出会うといつも感動して嬉しくなります。自分の手がけるサービスも、そういった瞬間を届けられればと思っています。
この記事が気に入ったらサポートをしてみませんか？