エンジニアと共創する、ユーザーだけに関心を向けないUI設計
株式会社アトラエでデザイナーをしている新垣(@dillustxx)です。
本note はアトラエのプロダクトチームで取り組むAtrae Advent Calendar 2019の12日目の記事になります。
今回はUI設計や、デザイナーとエンジニアのコラボレーションの仕方やチームにおいて何が重要か、実際アトラエではこんな感じだよという内容に触れています。何か参考になる内容があれば幸いです。
🖥 UIって何のためにあるの
そもそもUIとは何でしょうか。UIはユーザーがコンピューターと会話する唯一の手段です。
UIを考える上では3人の登場人物を考慮しないといけません。
メンタルモデル：ユーザーがシステムについて想定しているもの
表現モデル：システムの表現方法
実装モデル：システムの仕組み
ユーザーとシステムの会話と言いましたが、システムが関心を持っているものと、ユーザーが想定しているものの間にズレが生じると適切なコミュニケーションにはなりません。
つまりUIはユーザーとシステムの架け橋です。
デザイナーはユーザーが想定しているものとシステムが関心を持っているものの間にズレが生じているとき、理想的なインタラクションを導くための調整をする必要があります。
プロダクトの価値をユーザーにちゃんと感じてもらうためには、UXを良くする必要があります。サービスが飽和した今の世の中ではUXを考慮するのは大前提であり、UXがサービス価値を決める上での競争優位性になります。そのためには良いUI設計が必要になってきます。
🍎 良いUIとは何か
UIがユーザーとシステムを結ぶ架け橋だとしたら表現モデルとユーザーのメンタルモデルの齟齬が可能な限り無いものが、ユーザーから見た良いUIですし、システムから見た場合はシステムの関心が適切な情報になって与えられることが重要になってきます。
表現モデルとユーザーのメンタルモデルの齟齬が可能な限り無いものは直感的なUIと言うこともできます。
UI is Communication には直感的なUIについて7つの項目がバランスよく組み合わさっていることと定義されています。
1. UIの見た目から与えられる情報が適切なこと
2. UIが期待通りに動作すること
3. UIが効率的で最小の工数で目的を達成できること
4. UIが適切なタイミングでフィードバックを返すこと
5. ユーザーがミスを犯してもすぐに修正可能なこと
6. ユーザーが安心してアプリケーションを遷移できること
7. それ以外でストレスがないこと
またギャレットのUX設計における５段階モデルという側面で見ると抽象的なコンセプトから具体的なアウトプットまで一貫性の体験を生むのが良いUX設計であり、下層から一貫性を持って設計された構造・骨格・表層の設計が良いUI設計と言えます。
話は変わりますが、サービスが増えていくと似た見た目のサービスが増えたり、UI丸々一緒じゃん！みたいな事例も増えてきますが、結局良いUXを生むUI設計には表面的には見えていない階層があるので、表層だけ似せても良いUIにはならないと思っています。
🌀 ユーザー関心だけを考えがちな罠
1年半前にデザイナーになった僕はどうしてもデザインを考えるときに表層的なユーザー体験のみを考えてしまっていました。
デザインはよく、ユーザーファーストであれとか、ユーザーにとって良いものを届けると解釈されますが、前提として、どんなデータが存在しているのかというシステム側の視点とそれをどうインターフェース上に表現するのかという人の体験を創る視点でUIを考えないと、ユーザーファーストという言葉に踊らされたものが出来上がってしまったり、エンジニアと議論が合わなくなってしまい、無駄なコミュニケーションが増える原因にもなります。
🤖 システム側の関心から見たUI設計
ユーザー関心ではなく、システム側の関心から見たUI設計とは何か。
僕たちが開発している組織改善プラットフォームwevoxのケースを踏まえてご紹介していきます。
簡単なwevoxのご紹介ですが、僕たちは全ての働く人がイキイキできるような社会を作るためにエンゲージメントサーベイという切り口で勝負しています。サーベイと聞くとただのアンケートツールをイメージされるかと思いますが、サーベイというよりは組織版Google Analyticsのイメージの方が良いかもしれません。
自分たちの組織を良くする土台として組織を良くする視点をデータという切り口で提供していたり、よりチームのコミュニケーション・対話が活性化されるようなオフラインでのツールの提供も行っています。
エンゲージメントって何って方はこちらをどうぞ
delyさんの事例など見ていただけるとイメージが湧くかと思います。
上の資料公開後のwevoxスコアも伸びていて、サービスにも、ユーザーにも、組織にも向き合っている良いチームなので何卒🙏 pic.twitter.com/fSynOiVw0d
— 坪田 朋 / クラシル (@tsubotax) November 28, 2019
本題に戻りますが、開発中の機能の画面にこのような画面があります。
wevoxユーザー同士がメッセージを送りあい、お互いのGood Jobを送り合うことで定量的な組織の動きだけでなく、定性的な見えていなかったメンバーの貢献などを可視化する機能です。
いくつかのステートがあるので、コンポーネントに分けて見てみると、それぞれのコンポーネントは別々のデータに関心を持っています。
slack のスレッドで同じような観点で見てみるとこんな感じです。
この機能の詳細に関してはリリースの際にまたリリースノートとして詳細をアップしようと思います。
💬 共創のためのコミュニケーション
データ観点だけでは、ユーザーに意図した通り機能自体の目的が伝わらない場合があります。
先ほどの画像をユーザーに持って欲しい関心で捉え直すと異なる場合や優先順位が異なる場合があります。
そう言った齟齬をエンジニアとコミュニケーションしながら実装の際にはステートやコンポーネントに落としていきます。
ユーザーとシステムの架け橋を作るためにはエンジニアとのコミュニケーションがすごく重要です。
コンポーネントの関心をデータ視点でもユーザー視点でも明確にしたUIにすることでユーザーにとって理解しやすいUI設計ができます。UIはエンジニアとの共創によって成り立つものだと最近は感じています。
📱 UIを創るだけでも、チームの色が出る
こんな小さいUIを作るだけでもチームの色が出ます。なぜなら、共創の上でのコミュニケーションが違うから。チームが目指す先が擦り合わさっているのか、プロダクトを作る上での大事にしたい価値観が似ているか。
それらは企業やチームのビジョンであり、バリューであり、文化です。
だからこそ、良いプロダクトを創る上では土台になる組織、ひいては普段コミュニケーションをとるチームや、半径5m以内の関係性をどう強くし続けることが重要だと思います。
偉大なプロダクトは偉大なチームから生まれる。
⛳️ 最後に
アトラエのビジョンである世界中の人々を魅了る会社を創るためにはまだまだ人が足りていません。東証一部に上場しても、働きがいがある会社1位になっても、それは道半ばです。
僕たちwevoxチームも「We are the team!」と言えるOne teamを増やすというビジョンを掲げて日々取り組んでおります。
まだまだ道半ばな僕らです。僕ら以上に挑戦できる力強い仲間、一緒にビジョンを実現する仲間を絶賛探しています！特にエンジニア職・カスタマーサクセス職を募集していますのでご興味ある方はご連絡ください！
明日のアドベントカレンダーは弊社エンジニアの米田がお届けします。だいぶ癖が強そうですw
タイトル：iOS ダークモード対応したら心がダークモードになった。
サポートいただいたお金は組織やデザインの勉強に当てさせていただきます！