【BONO学習記録】OOUI
こんにちは。
事業会社でUI/UXデザイナーをしているみそすーぷです。
働いている会社でUIの改善案の提案をする機会があり
そんな時にOOUIを使うとうまくデザインができると教えてもらったため、以BONOの動画でOOUIについて学びました。
動画については以下です。
いつものごとく、自分の備忘録も兼ねて綴ります！
なぜOOUIが必要か？
OOUI＝オブジェクト指向UIデザインは、デザインを考える際のプロセスで、情報設計を考える時に必要なものです。
要件を考えるとき、「あれができて、これができて…」とTO DOのままで考えがちですが
「見る」「送る」などの動詞を軸に画面設計を考えてしまうこと＝タスク指向は良くないとされています。
タスク指向
🙅♂️「アクション」が入り口になるので、新しいアクションが増えると、ボタンがどんどん増え、画面も増えていく
🙅♂️１つのタスクをやり始めると他のタスクを並行して行うことができない
オブジェクト指向
🙆♂️「メッセージ」「名前」などの主語＝オブジェクトを軸に考えるので
オブジェクトが並んだ画面を1つ作れば、そこにアクションボタンを足していけばいいので無駄にページが増えない。
🙆♂️1つの画面から、さまざまなアクションを実行できる
みたいな感じです。
OOUIを使った制作の流れ
動画内のお題を元に、OOUIを使った制作をしてみました。
お題
以下の要件を元に画面デザインをしていきました。
①ユーザーフローからオブジェクトを発見
ユーザーの行動の流れを整理し、その中の主語となるもの＝「オブジェクト」を抽出します。
②メインオブジェクトを決め、ページ構造を決める
抽出したオブジェクトの中から、メインのオブジェクトを決めて
各ページに必要な情報とアクションを整理します。
「情報」に対して「アクション」を配置するのが鉄則！
③UIパターンを作る
今回サラッと作ってしまったので、あまり他のアプリを参考にしてないのですが、、、
本来は色々なアプリを見てUIのパターン出しをし、最適なUIデザインの形に落とし込んで完成です。
「情報」「アクション/ナビ」の2つのエリアで構成されるのがUIのお作法です。アクションはボトムに置いても良いですが、ヘッダーに置いたほうが上から順に見ることから無意識に目につきやすいらしいです◎
プロトタイプはこちら
まとめ
OOUIの概念は知っていたものの、改めてワークをやってみることによってより腹落ちした感じがしました。特にページ構造を整理するフェーズはやっておくとすんなりデザインに落とし込めて便利だなと思いました！
「オブジェクト指向UIデザイン」の本を購入したのですが、難しそうでまだ積読になっているので、動画でわかりやすく説明いただきとてもありがたかったです！
この記事が気に入ったらサポートをしてみませんか？