TwitterのUIについて

Twitter関連のWEBサービスを作成している関係でTwitterのUIに興味がある。 たとえば、ツイッターの公式アプリを見ると思うのが、いかに可読性を高めるかの工夫がなされていると感じる。 (注:2019年6月現在。今後変わることも考えられる。)

例えば、アイコンの視認性の良さが特徴的だ。私の使っているiPhoneで見ると、アイコンと本文のスペースは横幅を比較すると1:4くらいになっている。

非公式アプリの画面だと、もう少しアイコンは小さいケースが多い。しかし、公式アプリと比較するとややアイコンは小さい分視認性が悪い。そのため、アイコンが印象に残りにくい感がある。

ユーザー名と本文のフォントサイズの対比も印象的。 普通だったらユーザー名やIDは本文より大きく表示しがちだが、Twitter公式アプリの場合、ユーザー名と本文のフォントサイズは同じか、ややユーザー名の方が小さいくらいに表示されている。ただし、ユーザー名を太字で表示することで目立たせている。

情報の重要性としては両者はほぼほぼ等しいし、アイコンが大きく表示されているためユーザー名は発話者のアイデンティティを補完するものであると考えられるため、こうしたサイズのバランスで丁度良いと思われるのだ。

また、公式アプリのツイート表示の特徴として、余白がほとんどない点も挙げられる。余白を犠牲にすることであえて見た目のバランスより文字情報の読みやすさを高めるという工夫があるように思う。

さらに気づいたのは、リプライ、いいね、リツイートなどのアイコンがとても小さく表示されていること。以前どうだったかはハッキリ覚えていないのだが、もっとそれぞれのテーマーカラーにアイコンがカラーリングされていたような(？)気もする。 しかし、ツイッターが普及するに従い、それぞれのアイコンがどういう意味を持っているのかはユーザーにだいたい理解されてきている。そのため、テキストの読みやすさとのトレードオフを考慮してあまり目立たせる必要を感じなくなっているのかもしれない。

ついつい読んでしまう読みやすさがTwitterの魅力である。公式アプリを使っていると、以前はなかった通知(たいていフォローしているユーザーのバズツイートなど)が送られてくるようになるなど、ますます読むことを促す仕組みが発達しているように思う。

ツイッター公式のデザインを見習って、自分のサービスのUIも改善する必要があると感じた。

以上、WEBサービス開発者から見たツイッターのUIのお話でした。

ちなみに、作成しているサービスはこちらです(Bestwi Twitter分析)。お時間があったらご覧ください。