SlackのUXについて

社内ではコミュニケーションツールとして、Slackを使用しています。

f:id:keiwt:20150315133922p:plain

Slack: Be less busy

そのSlackですが。実は歴史上最も早く成長している企業なのです。

Today Slack, which launched less than nine months ago, is announcing that it has raised $120 million, valuing it at $1.12 billion. It had previously raised $60 million.

Slack is now the fastest-growing workplace software ever | The Verge

そこで、歴史上のトップであるSlackがやっているUXについて考えてみます。

サービスの提供するもの

こちらはtitleタグにも記載されていますが、

Be less busy.

そして、詳細はdescriptionに記載されています。

Slack brings all your communication together in one place. It’s real-time messaging, archiving and search for modern teams.

コミニュケーションを1箇所にまとめて、効率的にして、より忙しくないようにすると。 ビジネスの本質的な部分により集中することを目的とするのはAWSと似ていますね。

画面上部

すでにアカウントを取得済みのヒトが再ログインしやすいように右上にSign Inボタンがあります。
画面上部にナビゲーションは配置していないようです。
日本のサイトの場合は右上には会員登録ボタンもありますが、Slackは紹介動画の下にあります。
どういうサービスか理解した後に登録するという流れを考えて作っているのが分かります。

動画

"So Yeah, We Tried Slack …" - YouTube

やはり、サービスの紹介は動画が一番伝わるのでまずは紹介動画があります。
いろんなWEBサービスを集約できますとの内容が伝わるようになっています。
また、動画はSandwhich社に外注しているようです。

Sign up for Free(会員登録)

メールアドレスと社名で登録できます。
ボタンを押すとメールが届くので、メール内のリンクをクリックしてもろもろ選択すると
slackが使えるようになります。
※URLはhttps://{{社名}}.slack.com/になります。

登録ボタンのすぐ下にいつまで無料で使えるのかが明記されています。

f:id:keiwt:20150314182155p:plain

Take the Tour

Slackが何ができるのかもっと知りたいヒトが知れるようになっています。
概要を知って登録しなかったヒトがここまで来ます。
また、登録したヒトもSlackができることをもっと知ることができます。

そして、「スクリーンショットと特徴の説明等」とTake the Tourの遷移先に何があるのかを明記しています。

f:id:keiwt:20150314182659p:plain

Slack is team communication for the 21st century

5ページくらいをページごとカルーセルにしています。
伝えたい画像を一番上に置いて、それ以外は画像と説明文です。
情報の区切りが分かりやすいように各情報のbackground-colorが明確に分かれています。

以下のページがあります。 * team communication for the 21st century

どういう会社が使っているか,全てのデバイスでデータの同期をとっています等が書いてあります。  
※当然ですが同一のAPIを通してデータを格納して、データを取得する設計なのが分かります。
  • everything in one place
他のサービスとの連携について書いてあります
  • wherever you are
通知を重視している点。
各デバイスでの既読等の連携の仕組みを紹介しています。
  • universal search
slackにアップしたものはすべてインデックスが付与されていて、検索可能であるとのことです。
もちろん、アップしたWord docs,Google Docs,PDFs,Photoshop files anything you add to Slack.

各ページの一番上の主題のみ手書きのようなフォントになっています。
少し暖かみというかシステムらしさを緩和しているような印象にしています。

また、4ページに絞っています。
f:id:keiwt:20150314184644p:plain

ユーザーが使用してみて、どう言っているか

slack社からの説明の次には客観的コメントを見せています。
説明は自身と社会からの説明の2種類が必要ということだと思います。

Integrations

次に連携しているサービス一覧へのリンクが置いてあります。

SIgn up for Free

最後に会員登録をする念押しとして再度、会員登録ボタンが置いてあります。 f:id:keiwt:20150314185556p:plain

他のページヘのリンクは画面最下部に置いてあります。

• We’re hiring! 
• Slack at Work
• API
• Status
• Pricing
• Brand Guidelines
• Integrations
• Our Blog
• Terms of Service
• Privacy Policy
• Security 
• Twitter:@slackhq
• Contact Us
• Press
• inquiries:pr@slack.com

最後に

サイトを見た感じだと、以下の点が見受けられました。

・情報を背景色を変えることで明確に分けている
・フォントにこだわっている
・システムらしさを緩和するように手書き感を挟んでいる
・情報は詰め込みすぎずに縦のブロックで分ける(レスポンシブデザインしやすい)
・マウスオーバーすると動くアニメーションでクリックを促す

参考になる部分がありすぎます。

自分で考えることも重要ですが、トップが何をしているのかを分析することは大切だと感じました。

Slackと他のWEBサービスのUXを比較するとかなり異なっていますね。。。

自己流でやっているはトップの集団からもっと学ぶ必要があると思いました。

URLについてもさすがという印象です。

https://slack.com/signin
https://slack.com/signin?email=aaaaaa
https://slack.com/is/team-communication
https://slack.com/is/everything-in-one-place
https://slack.com/integrations
https://slack.com/jobs
http://slackatwork.com
https://api.slack.com
https://status.slack.com
https://slack.com/pricing
https://slack.com/brand-guidelines
https://slack.com/privacy-policy
https://slack.com/security
https://slack.com/help/contact
https://{{ドメイン名}}.slack.com/messages/aws/
https://{{ドメイン名}}.slack.com/team/keiwt
https://{{ドメイン名}}.slack.com/archives/aws/p1426328513000024