[&] CSS Nite LP33 #5

CSS Nite LP33
----------------
実例に学ぶ、“失敗しない”UIデザインのコツ 新免 孝紀（ChatWork）

チャットワークは、チャット／タスク／ファイル／ビデオ通話
Tokyo 15名、Osaka 13名、USA 6名
エンジニア 15名、デザイナーが 4名
社内のやりとりはすべてチャットワーク、
取り引き先もチャットワーク

ChatWork はもともと社内向けツールとして開発
自分たちが使いたいツールをエンジニアが作成
欲しい機能をどんどん追加
デザインが破綻

ビジネスシーンを楽々に

開発フローについて
UIパーツのガイドライン化
ユーザーの声への対応

ワークフローの改善
企画＞UIデザイン＞機能実装＞検証＞リリース

リニューアルの目的
ターゲット
仕様書
デザインカンプを作成

実際のデータを入れると印象が異なる

本番のデータを入れると、いろんな名前があって、見にくいものになって、
情報が詰め込まれていて、色も見にくい
よく使う機能のクリック数が増えてしまった。

すべてムダに....

●実際のデータを入れてみると印象が変わる
●インタラクションの確認ができなかったので、実際に触ると使いにくいものになっていた
●静止画でUIデザインを繰り返し調整しても根本解決につながらない

UIデザイン、実装、検証をまわしながら開発
無事にリリース！

早い段階でのプロトタイプでの検証が必要
触れることで、静的なデザインでは気づかなかった問題点に気づくことができる
本番に近いデータやインタラクションを実装することで、精度の高い検証を行える

●UIパーツのガイドライン化
デザイナーだけでなく、エンジニアも画面設計をおこなっている。
それぞれ独自のルールでやっているので、統一感がない

似た形のアイコンでも意味が異なる
一貫性のないボタン
スタイルガイドを作りました
用途やコードも一緒にガイドライン化、コピペで使えるように

ユーザビリティーの向上
開発効率の向上

問題のあるところを明確にし、ガイドライン化する
ガイドラインは共有する
ガイドラインは一度作って終わりではない

ご意見／ご要望を集める
Twitter からも集めている。
リアルタイム検索からも集めています。
参考になる声が非常に届くのですが、
すべての要望を入れるとデザインが破綻

チャットワークのコアコンセプト
仕事上の様々なコミュニケーションを楽しくする

メッセージキドクの表示
入力中の表示
オンライン／オフラインの表示

なぜ追加しないか？
キドク、オンライン状態が常に伝わってしまうと、プレッシャーやストレスを生む原因
キドクがバレないように

「ビジネスシーンを楽々に」？
コンセプトに沿って改善したが失敗した例も。
入力エリアのサイズ変更、（手動）でドラッグして広げたりできるようにしていました。
楽に出来るようにできないか？

入力エリアのサイズを文字量にあわせて自動変更
非常に不満になった。
もともとあった機能を削ると、不満につながりやすい

●一度追加した機能は不満や批判につながりやすい
●すぐにユーザーの声に反応するのではなく、コンセプトを元にするしないと判断する
●製品のコンセプトを明確にし、共有するのが重要

●プロトタイプを用いた開発フローで早期に検証を行い、大きな手戻りを防ぐ
●UIパーツのガイドライン化で、一貫性のあるデザインを提供
●製品のコンセプトを明確にし、共有するのが重要