チャットアプリのデザイン: チャット一覧のビフォーアフター改善

チャット一覧の仕事はひとつです。誰が書いたか、何を言ったか、返事が必要かを見せること。下の初稿には、メッセージアプリが欲しがる機能がすべて入っていて、しかもすべてを同時に主張してきます。タイトルバーにアイコンが4つ、自分で説明を始める検索欄、画面の端から消えていくフィルター6つ、そして全行に完全な日付。修正版は同じ人、同じメッセージのまま、画面の各パーツに仕事をひとつずつ与えます。

画面全体のビフォーアフター

新人の初稿

修正版

左では、目がアイコン4つ、47文字の検索ヒント、同じ虹色リング5つ、終わらないフィルター列、そして日付とバッジ付きの1行メッセージ7行にぶつかります。右では、大きなタイトル、ボタン1つ、検索欄1つ、顔5つ、チップ4つ、文章のように読める行5つが目に入ります。

修正1: タイトルのアクションは1つ、検索は「検索」と言うだけ

ビフォー

アフター

アイコン4つと、検索対象を並べ立てる検索欄。対して、ボタン1つと「Search」の一言。

初稿のタイトルバーには、カメラ、鉛筆、虫眼鏡、メニューが入っています。虫眼鏡は、それ自体の虫眼鏡を持つ検索欄の上に居座っているので、画面は同じ検索を2回提供していることになります。

修正版は、人がここに来る目的である「新しいメッセージを書く」アクションだけを残し、ブランドブルーの柔らかい丸ボタンにしました。タイトルはiOSと同じ大見出し(ラージタイトル)に育ち、何よりも先に今いる場所を伝えます。検索欄は「Search」と言うだけ。初稿の47文字、「メッセージ、人、グループなど」は、誰もが使い方を知っている欄を説明していたのです。

再利用できるルール: タイトルバーのアクションは1つ。「Search」という名前の欄に文章はいりません。

修正2: 「新着」を意味するリング

ビフォー

アフター

同じ虹色リング5つと切れた名前。対して、新着は青、既読はグレー、名前は全体表示。

すべてのリングが同じ見た目なら、リングは何の情報も運びません。初稿は5つのストーリー全部に同じグラデーションを使っているので、見たストーリーと見ていないストーリーがまったく同じに見えます。しかも名前は「Jessica M...」「Daniel Ro...」と切れています。

修正版はリングに意味を与えます。2.5 pxの青いリングは新着。1.5 pxのグレーのリングは既読です。

自分のストーリーは先頭に置き、小さなプラスを付けます。名前はJessica、Daniel、Amara、Leoと、ファーストネームを丸ごと表示。短い名前なら収まりますし、人は互いをファーストネームで呼びます。

再利用できるルール: 色は2つの状態を分けるために使い、注意が必要な状態だけに色を付けます。

修正3: チップは4つ、スタイルは1つ、件数は専用チップに

ビフォー

アフター

画面より広い列に並ぶ枠線チップ6つ。対して、収まるチップ4つと、バッジになった件数。

初稿には、364 pxの幅に434 pxの列でチップが6つあります。6つ目は半分に切れていて、まだ先があることは分かっても、それが何かは分かりません。件数はラベルの括弧に入っていて、「Unread (12)」「Groups (3)」のようにラベルごとに長さがばらばらです。

修正版は、All、Unread、Favorites、Groupsの4つを残します。選択中のものは青く塗り、ほかは柔らかいグレー。未読数は、人が最も知りたい数字であり、下の行で見る同じバッジでもあるので、専用チップの小さな青いバッジに移しました。Groupsの件数はなくなりました。

ChannelsとArchivedは列から外れました。どちらも実在する機能ですが、このリデザインではその移動先は描いていません。完成したアプリには、これらの置き場所がやはり必要です。

再利用できるルール: フィルターの列は画面の内側で終わらせ、塗りつぶすのは選択中のものだけにします。

修正4: 人、2行、短い時刻で見せる行

ビフォー

アフター

切れた1行、完全なタイムスタンプ、アイコン付きの赤いバッジ。対して、2行、短い時刻、控えめなバッジ1つ。

行はメッセージの縮小版ですが、初稿は5語ほどでメッセージを切っています。「Haha yes!! Send me the photos fro...」。その分のスペースは日付「10/24/26 9:41 AM」と、赤いバッジの横の小さなピンやスピーカーのアイコンに使われました。今朝届いたメッセージの行で、年と秒まである日付ほど役に立たないものはありません。

修正版はプレビューを2行にしたので、「Haha yes! Send me the photos from last night when you get a chance」がチャットを開かずに読めます。時刻は短く、今日なら「9:41」、次は「Yesterday」、その次は「Thu」です。

未読のチャットは時刻が青になり、17 pxの青いバッジが付きます。ミュートのグループ、Design Teamは、主張せずに数えられるようグレーのバッジです。アバターは52 pxに拡大し、ボイスメッセージには長さの前に小さなマイクが付きます。

再利用できるルール: 行のスペースはメッセージに使い、時刻は人が口にする言い方で書きます。

細かな修正

• 左端をそろえる。 初稿は左14 px、右12 pxでした。修正版は両側20 pxで、区切り線はアバターの後ろから始まります。
• 注意を引く色は1色。 初稿のバッジは赤、リングはオレンジから紫、未読チップは枠線のみでした。修正版は、新着、選択中、未読にブランドブルーの#2E7CF6を使い、静かなものはすべてグレーにします。
• きちんとした文字スケール。 文字は9〜20 pxから、iOSの文字サイズ11〜28 ptに変わり、最上部にラージタイトルが付きました。
• タブは5つではなく4つ。 初稿のChats、Calls、Camera、Status、SettingsはChats、Calls、Updates、Settingsになりました。カメラはタブバーから外れました。
• 顔を大きく。 一覧のアバターは52 pxに拡大し、行で最初に目に入るのは人になりました。

自分のチャット一覧を点検しよう

Figmaファイルを入手

無料ファイルには、2つの画面がコンポーネントとして入っていて、すべての修正がビフォーアフターのペアで見られ、カラー変数とiOSのテキストスタイルも含まれます。

無料のFigmaファイル

チャット一覧のビフォーアフター

2つの画面と、修正した全パーツをFigmaコンポーネントで。無料、閲覧のみ、複製して自分の下書きに入れて使えます。

Figmaで開く

FAQ

チャット一覧画面は、各行に何を表示すべき?

人、最新メッセージの2行、短い時刻、未読を示す小さなバッジ1つです。完全な日付、余計なアイコン、2つ目のバッジは省きましょう。

メッセージアプリは、フィルターをいくつ表示すべき?

メイン一覧ならチップ4つで十分です。All、Unread、Favorites、Groupsです。Archivedなどそれ以外はメニューの奥か別の画面に置き、列が端からはみ出さないようにしましょう。

チャットアプリのストーリーリングはどうデザインする?

新着には1色、既読には控えめな色を使い、リングが情報を運ぶようにします。この修正版では、新着は青いリング、既読は細いグレーのリングにし、顔の下には名前全体を表示しました。

チャットアプリはメッセージの時刻をどう表示すべき?

人が口にする言い方で、できるだけ短く。今日なら時刻、次に「Yesterday」、その次に曜日です。完全な日付はチャットの中に取っておきましょう。

チャットアプリのフォントサイズはどうすべき?

プラットフォームの文字スケールを使いましょう。修正版の画面では、iOSの11〜28 ptを使い、画面名にはラージタイトルを使っています。

ソース

• 2つの画面はどちらも自作で、Figmaでデザインし計測したものです。名前とメッセージはこの演習のための架空のものです。
• 写真はPexelsより、Татьяна Танатова、Iphanyi Ezemenari、pessoas uem、Son Hoa Nguyen、Ajan Yogi、Tamra Creatives Agency、Kenneth Surillo、kaleef lawal。
• Apple Human Interface Guidelines: Typography、修正版の画面で使ったiOSの文字サイズとラージタイトルについて。
• Apple Human Interface Guidelines: Accessibility、44 ptのタッチターゲットサイズについて。
• 最初は App Brainy でカルーセルとして公開しました。