オブジェクトベースなUIデザインの記事で社内ではじめてプチ読書会をした話。

だいぶ時間が過ぎてしまったのですが、『WEB+DB PRESS Vol.107 速攻改善 UIデザイン 銀の弾丸! オブジェクトベース設計』はSmartHRのデザイナー間でも話題になりました。
もともと上野学さんのブログなどでOOUIを知っているメンバーもいましたが、今回の記事はSmartHRという業務システムのデザイナーとしては必読だと思い、はじめての読書会を行いました。

進め方

1.事前に各自で記事を読んできてもらう。2.当日に全員で記事を読みながらポイントごとに議論していった。3.各自の良かったポイントを共有して理解を深めた。

事前にやることは読んできてポイントをメモるだけなのでとてもカンタンでした。ただ読書会の目的としては、他のデザイナーと共通の認識を得るためだったので、3番が一番重要でした。

OOUIのポイント

1.タスクベースのUIを認識する
タスクベースとは「やること(動詞)」→「その対象(名詞)」を流れになっているUIのことで、この状態では、「やること」が増えるたびに画面が増えていくので煩雑になっていきます。記事の中ではピザ屋の注文画面を例に説明されていました。

2.オブジェクトベースのUIを認識する
オブジェクトベースで考えると「その対象(名詞)」→「やること(動詞)」になるので、「やること」が増えても対応しやすいUIになりますし、ユーザーも「やること」に縛られず自由な順序で目的を達成することができます。

3.オブジェクトベースのUIの手順
a.対象となるオブジェクトの定義する。
同じ属性キーを持ったものが複数ある(値はそれぞれで違っても良い)
増えたり減ったりする
それらに対して共通のアクションを行える。

b.ビューの定義
コレクション
 1つのビューに複数のオブジェクトを一覧にする
シングル
 1つのビューに1つのオブジェクトを詳細にする

主にこの点を守っていくとオブジェクトUIにすることができます。
この手順を知ることで普段なんとなく感覚で行っていたUI設計をOOUIという理論でUI設計が行えるようになると感じました。

開発中のアプリで実践

この内容を受けて自分たちで設計中のUIにOOUIを適用させてどうなるかをやってみたところそんなに間違っている画面ではなかったことがわかり自信を持って出せるデザインになりました。(本当に激的に変わってくるとブログ的にはよかったw)

この取組でよかったところ

・記事を読んだだけでは、理解はしても使えるようになるわけではないので、業務で製作中のUIをOOUIを用いて改めて見直してみたところ、OOUIの設計理論に合致していたので自信になった。・運用中のサービスに照らし合わせたところ、改善の切り口が見えた・メンバー間の認識統一が行えた。・たとえば「この画面はタスクベースになってしまってる」「コレクション/シングルの関係をわかりやすく見せたい」のように共通言語で会話ができるようになった!・サービスの改善の切り口が見えた

まとめ

OOUIを知ったことで既存のUIのカイゼンにも新規にもちゃんとした理論として適用できるので社内でも話を通しやすくなりそうですし、読書会をしたことで理解の差分を少なくすることができるようになりました。
今後も読書会を行いデザイナー一同レベルアップできるようやっていきます。