UX方針づくりに取り組んでいる話
こんにちは。kubell プロダクトデザイン部 UXデザイナーのかとうです。
今回はUXチームが日々取り組んでいる、UX方針作成活動の背景とプロセスについてご紹介したいと思います🙌
UX方針と活動背景
UX方針とは、Chatworkプロダクトを通じて一貫してユーザーに届けたい体験や考え方を規定したドキュメントで、UXデザイナーが中心となって策定を進めています。
UX方針を作成し始めた背景には、サービス提供開始から10年以上の歴史の中でプロダクト内の仕様がばらついていること、そのために仕様検討に都度時間をかけているという課題がありました。
UX方針を定めることで、プロダクトの品質を維持しながら、デザインを効率よく作ることができるようにしたり、デザイナーとエンジニアの共通言語を増やしスムーズに施策を進められる環境を整えたりすることを実現したいと考えています✨
UX方針作成のプロセス
ここからは私が担当した「入力フォームに関するUX方針」を例に、方針作成プロセスをシェアしたいと思います。（あくまで一例です）
今回のUX方針を作成することになったきっかけは、フォーム入力中にEnterキーを押した際の挙動はどうあるべき？やフォームにクリアボタンを設置すべき？など、施策対応中に担当者が直面した悩みがありました。
これらの悩みを解決しつつ、フォームに関連する方針を取りまとめることが目標となります。
1. スコープを定める
モバイルでは基本的に Human Interface Guidelines や Material Design をベースとした実装を行うため、これらのデザインガイドラインが方針に紐づくものとなります。しかしウェブにおいてはこのような方針がなく実装の自由度が高い分、仕様がばらつきやすいという傾向がありました。
そこで、今回は特にウェブにおける入力フォームの振る舞いを定義することを目的としています。
また「入力フォーム」という言葉の広さも一考の余地があります。
フォームに関連する要素は種類が多いため、今回は要望が挙がっていたフォーム全体の処理に関わる体験とプロダクト内で登場頻度が高い、テキストエリア、一行テキストの要素に絞って方針を策定しています。
Lean Design Systemの原則を参考に、実際の問題を解決することに役立っているかに焦点を当て、リリースと検証を繰り返す
というUX方針策定プロジェクトのコンセプトに基づいて、スコープを絞ってクイックに課題を解決する方針をリリースすること、また、実際に利用する中で磨きをかけていくという心がけで作成を進めています。
2. ベーシックな方針を作る
スコープを定めた後は、関連書籍やデザインガイドラインを確認し、基本的な考え方を押さえた上で、UX方針の基本形を作成します。
入力フォームに関しては、これまで多くの方が悩んで解決策を導き出してきた定番のテーマでもあるため、一般的なベストプラクティスを活用しベースを整えました。
ちなみに今回は、主に『Form Design Patterns ―シンプルでインクルーシブなフォーム制作実践ガイド』という書籍を参考としました。
3. Chatworkならではのアレンジを検討する
次に、一般的なベストプラクティスがChatworkにそのまま当てはめられるかを検討します。おそらくこの作業がUX方針を作成する上での一番の山場⛰️
例えば、テキストエリアに最初から入っている入力のヒントを提供するための薄グレーの文字（＝プレースホルダー）を利用してもよいかどうかについて。
一般的にプレースホルダーは、ユーザーが入力を始めると消えてしまうため、入力のヒントが見えなくなってしまったり、そもそも薄グレーで視認性が低いこと、さらには読み上げサポートのないブラウザがあるなどアクセシビリティの観点から利用は非推奨と考えられることが多いのですが、Chatworkにおいては基本は非推奨ではあるものの、デザイン領域が限られておりラベルを配置できない場合には、音声入力時の誤操作を避けるために、プレースホルダーにその要素の機械向けの名前を表示してもよいという緩和制限を設けています。
このように、デザイン、アクセシビリティ、実装の観点を踏まえてひとつひとつの項目に対して方針を立てていくため、この工程ではレビューが欠かせません。レビューは、職種横断でデザイン基盤の再設計に取り組んでいる「デザイン基盤チーム」にご担当いただき、多角的な視点からのフィードバックを受けてUX方針をブラッシュアップしていきます。
デザイン基盤チームの活動についてご興味がある方は、以下の記事もおすすめです。
4. リリースする🎉
すべてのフィードバックに対応し、リリースのお知らせをするとUX方針作成の一連のフローが完了します。
おわりに
プロダクトの体験設計だけではない、UXデザイナーの活動について触れてきましたが、いかがでしたでしょうか。
作りたいUX方針はまだまだバックログに積まれていますので今後も地道な活動にはなりますが、一貫性のある体験をお届けできるように日々邁進できればなぁと思っております。
kubell のプロダクトデザイン部では、一緒に働いてくださる仲間を募集しております。ご興味を持っていただけたら、下記もチェックしていただけると嬉しいです。