チャットのUIパターンまとめ

大変ご無沙汰してます！

久しぶりの投稿になりますが、今回はタイトルにもある通り、チャットのUIパターンについて考えていきたいと思います。

僕自身、いろんなアプリでチャットをする機会があります。

「どれも似たような吹き出しのデザインだよねー」

で終わらせてはいけません！

しっかり考察することで、実際に自分がチャット画面をデザインするときに、迷いなく自分の中で明確な理由を持ってデザインすることができると思います。

それでは見ていきましょう！

メッセージ型

LINEのようにチャット画面ですべてのメッセージが表示されるUIで、基本的にはこのUIを採用しているアプリが大半だと思います。

※アイコンとテキストは伏せています

メリット

3人以上のグループを作っても、画面遷移することなくスクロールするだけですべてのメッセージを確認できるのは、メッセージを見落とすことがないので大きなメリットがあります。

デメリット

グループの人数が増えるにつれて、自分に直接関係のないメッセージが複数あると、メッセージ画面の視認性が落ちる印象があります。

スレッド型

メッセージ型のデメリットを解消するのがスレッド型です。スレッド型というのはSlackで使用されているような、特定のメッセージに対してスレッドを別画面に作り、メッセージを深堀りするためのUIです。

メリット

大人数いるグループの場合、一つの画面でチャットを完結せずに、深堀りしたい話題やグループ全体に周知しなくてもよい話題のときに効果を発揮します。
チャット画面全体の見通しがよくなり、自分と関係あるメッセージを追いやすくなります。

デメリット

スレッドを別画面に作るので、スレッドを見たいときは画面遷移する必要がありひと手間増えてしまう。
更にスレッドにすることによって、自分と関係があるメッセージが埋もれてしまう可能性がある。関係があるメッセージだと思ってスレッドを開いたが、関係ないメッセージだったときのストレスは感じる方も一定数いそうです。

対話型

これはLINEやその他チャットできるアプリでは当たり前のように使われている吹き出しのUIです。

※アイコンとテキストは伏せています

メリット

吹き出しという、会話を連想させる直感的なUIであり、気軽に会話ができる空気感があります。短文のメッセージにもすごく相性が良く、テンポの良いやり取りができます。

デメリット

対話型UIのアプリをビジネスの場で使用する場合は、吹き出しのポップな印象が強いため、社風によっては注意が必要。

また、対話型だと一行に収まる文字数が少ないため、長文を表示させるには不向きかなと感じます。
相手に伝える情報の粒度が細かく、且つ正しい情報や多くのデータを伝える必要になる機会が多いビジネスシーン等にもあまり合ってないかもですね。

列挙型

SlackやChatWorkのような吹き出しがないアイコン左揃えのUIです。

※アイコンとテキストは伏せています

メリット

吹き出しがない分、画面がスッキリした印象になります。一行に収まる文字数も増えるため、長文の表示に向いてます。
対話型のデメリットで挙げたビジネスシーンでは、こちらのUIを採用した方がメリットが大きいです。

デメリット

すべての会話が左揃えになっているので、自分の会話の視認性があまりよくないかもしれません。
またUIがシンプルなので、デザインの幅もそこまで広くなく、吹き出しのようなポップな雰囲気を出すのが難しそうです。

まとめ

最後にケース別にチャットのUIをまとめるとこんな感じになります。

「一つの画面でチャットを完結したい！」
メッセージ型

「大人数のチャットグループで、複数の話題で画面をごちゃごちゃさせたくない！」
スレッド型

「短文のメッセージを想定し、気軽にメッセージさせたい！」
対話型

「長文のメッセージを想定し、シンプルな画面にしたい！」
列挙型

LINEで市民権を得ている対話型U以外にも、視点を広く持つと考えられる選択肢が多いことに気付かされますね。

もし少しでもこの記事が参考になりましたら、お気軽に「スキ」、「シェア」、「フォロー」いただけるとめっっっっちゃ嬉しいです！！！

最後まで読んでいただきありがとうございました＾＾