Facebookコメント欄のデザイン変更。新旧比較。

カワサキです。
最近Facebookのコメント欄のデザインが変わりましたね。
最初見たときは、「流行りの吹き出し風かぁ。前のほうがシンプルで良かったな。」と思ったのですが、以前のデザインと比べると、新しいデザインのほうがUXが優れていました。

UXは「ユーザー体験」と訳されることが多いです。
ようは商品やサービスを使った人がどう感じるかってことです。

まずパッと見てコメントに対して返信がついていることがわかりやすくなっていますね。

[peg-image src=”https://lh3.googleusercontent.com/-yCSZ8YBOPho/Wj0hsbyfvMI/AAAAAAAABbs/oIuJ7oM_x5ojgLT0_RGEDbSWuT2UO0cvQCCoYBhgL/s144-o/fb-ux-first.jpg” href=”https://picasaweb.google.com/105968273574935455661/6485282075685783377?locked=true#6502390484250377410″ caption=”” type=”image” alt=”fb-ux-first.jpg” image_size=”500×519″ ]

 

下の写真が新旧コメント欄を開いた状態。
と言っても、旧デザインはPCからのキャプチャーがなかったので、以前のものに近いiPadアプリからのキャプチャーです。

[peg-image src=”https://lh3.googleusercontent.com/-gpmzQlTCIc0/Wj0T_RyCcDI/AAAAAAAABZU/VceF-ab5HyoF8fy6E6_2GRiDly_TEiw4gCCoYBhgL/s144-o/fb-ux-2.jpg” href=”https://picasaweb.google.com/105968273574935455661/6485282075685783377?locked=true#6502375414818828338″ caption=”” type=”image” alt=”fb-ux-2.jpg” image_size=”1000×876″ peg_single_image_size=”w800″ ]

 …なんかモザイクでわかりにくいですね。

まず、コメント欄がグレーの背景に白抜きになったことで、コメントを視認しやすくなりました。
コメントに対する返信入力欄もわかりやすくなっています。
従来の仕様では「返信する」を押すと、一番下のコメント入力欄が返信欄に変わっていました。

[peg-image src=”https://lh3.googleusercontent.com/-Xtr_CxJNYG8/Wj0ZHUrVo0I/AAAAAAAABaM/YcJPZEDk9mUygVHvA6gcXnzhSt87MGbQQCCoYBhgL/s144-o/fb-ux-old-come.jpg” href=”https://picasaweb.google.com/105968273574935455661/6485282075685783377?locked=true#6502381050593125186″ caption=”” type=”image” alt=”fb-ux-old-come.jpg” image_size=”500×219″ ]

 

新しい仕様ではコメント欄と返信欄は明確に分けられています。

[peg-image src=”https://lh3.googleusercontent.com/-SJBY_AfQBNM/Wj0ZHaqV-KI/AAAAAAAABaM/HkFBuKjrUSUEtap-D-j_Ki6KAMbRb1_fwCCoYBhgL/s144-o/fb-ux-new-come.jpg” href=”https://picasaweb.google.com/105968273574935455661/6485282075685783377?locked=true#6502381052199565474″ caption=”” type=”image” alt=”fb-ux-new-come.jpg” image_size=”500×222″ ]

 

これで、コメントに返信したつもりが新規コメントを書いていた、なんて事故が少なくなりますね。

続いてコメント欄に写真とURLを貼った場合。

旧デザイン
[peg-image src=”https://lh3.googleusercontent.com/-SRcChe357ts/Wj0dn2oiRZI/AAAAAAAABbA/o9AsbJHVot0cJOGkRyX9sR20dZl8_8XxwCCoYBhgL/s144-o/fb-ux-old-test.jpg” href=”https://picasaweb.google.com/105968273574935455661/6485282075685783377?locked=true#6502386007510500754″ caption=”” type=”image” alt=”fb-ux-old-test.jpg” image_size=”500×452″ ]

新デザイン
[peg-image src=”https://lh3.googleusercontent.com/-M0rKqnAPOLA/Wj0dn7JzHSI/AAAAAAAABbA/6ipDGUXpWVMlzBSJuWdWTB_Yr5lqjmdWwCCoYBhgL/s144-o/fb-ux-new-test.jpg” href=”https://picasaweb.google.com/105968273574935455661/6485282075685783377?locked=true#6502386008723758370″ caption=”” type=”image” alt=”fb-ux-new-test.jpg” image_size=”500×414″ ]

角丸は好みが別れるとこですが、角が丸くなったことで物質感がでてきているのがわかるでしょうか?
画像が貼り付いているのではなく、画像がそこにあるという感じ。
旧デザインは全体をぼんやり眺めてしまいますが、新デザインは画像やブログカードに視線がフォーカスします。

見た目では旧デザインの方がシンプルですが、使い勝手としては新デザインが勝っています。
少し前の投票機能の実装、今回のコメント欄の改良などから、タイムライン上でのユーザー間のやりとりをもっと活性化させたいという狙いがFacebookにあるのではないかと考えています。

次にくるのはイベントとの関連付け強化とかかな~??

コメントを残す

メールアドレスが公開されることはありません。