見出し画像

【UIデザイン】OOUI(オブジェクト指向UI)を学ぶ

Yu

みなさん、こんにちは！
本日はオブジェクト指向UIについて、学んだ内容をこちらでまとめていこうと思います！！

最近、BONOというUIデザインをメインに情報を共有してくださっているサービスに入会し、その中で「コンテンツ中心のUI設計」のセクションがありましたので、そこでオブジェクト指向について改めて学ぶことができました。
BONOはUI/UXについて、とても効率的に学べるのでとてもおすすめです！
よろしかったら、覗いてください！！
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

OOUIに関しては、この書籍も人気ですね！！
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓


OOUI(オブジェクト指向UI)とは

まずはオブジェクト指向UIとは何なのか？
よく比較されるものとして、タスク指向UIというものもあるので、それとの比較で簡単にまとめていきたいと思います。

【オブジェクト指向】
ユーザーが必要とするオブジェクト（もの・名詞）をメインにすると思えば良いかなと思います。

【タスク指向】
ユーザーが必要とするアクション（行動・動詞）をメインにすると思えば良いと思います。

オブジェクト指向とタスク指向の違い

上の画像のようにオブジェクト指向では、ユーザーというオブジェクトのまとまりをアプリのメイン情報として表示しています。
しかし、タスク指向ではTOP画面で最初にアクションを選ぶという構造になっています。
タスク指向になってしまうと「編集する」の後にまたトップに戻り、「削除する」などをしないといけません。しかし、オブジェクト指向だと対象のオブジェクトをまずは探して、それで編集したり、削除したりできるので、無駄なアプリ内の行き来が減るといえるでしょう。
ただ、タスク指向が悪いとは限らないので場合によってはタスク指向で考えるのもありだと思います。

BONOの課題に取り組んでみた

先ほど紹介したBONOでは、課題を進めながらオブジェクト指向に関して学ぶことができました。
課題のメンバーリストアプリケーションの構造を考えて、UIに反映していきました。要件が最初に与えられているのですが、そこからまずはオブジェクトとなる要素をまとめていきます。

こちらの画像が出来上がったオブジェクトとなります。
考えたフローとしては、

要件の把握
↓
必要機能の洗い出し
↓
必要ページの検討
↓
オブジェクトの洗い出し
↓
UI作成（今回は説明を省きます。）

私はこの流れで今回必要なオブジェクトを洗い出しました。

要件の把握

今回、課題の要件として、「メンバーリストが見れる」や「部活リストが見れる」、「部活の新規登録/削除/編集ができる」などがありました。（他にももっとありましたが、ネタバレになってしまうので、、）
この要件を把握することが一歩目に行ったことでした。

必要機能の洗い出し

要件の把握が済むと次は必要な機能をまとめることを行います。
メンバーリスト機能とそれを実現するアクションを洗い出すのが、私的には一番しっくりきましたので、そのようにしました。

メンバーリスト機能

  • メンバーリストを見る

  • メンバー詳細を見る

  • 新規登録

  • 削除

  • 編集

  • 並び替え

部活リスト機能

  • 部活リストを見る

  • 部活詳細を見る

  • 新規登録

  • 削除

  • 編集

このように大機能を出して、それを実現するのに必要なアクションについてまとめて見ました。

必要ページの検討

要件から機能を洗い出し、その機能で必要なアクションをまとめることができたので、次は今回必要な画面を検討していくフェーズに入っていきます。
機能とアクションを見て、「メンバー一覧」「メンバー詳細」「部活一覧」「部活詳細」の4画面が今回は必要かなという結論になりました。（新規登録画面や編集画面も必要ですが、今回はオブジェクトをまとめるだけなので、対象にしていません。）

オブジェクトの洗い出し

ここまできて、ようやく今回のメインであるオブジェクトについて洗い出していくことになります。
オブジェクトの洗い出しとしては要件と自分で設定した必要機能を見比べて、洗い出しました。各ページに必要な表示内容とアクションはこんな感じになりました。

まとめ

今回作成したFigmaのデータはこのような感じになりました。
よければ、ぜひ見てください。

BONOでの回答を見てみると、私の考えたフローとは少し違い、要件から先にオブジェクトを定義してその後にページを考えていたので、なるほどと勉強になりました。
確かに要件を把握して、オブジェクトを定義する方が機能やページの構成が決めやすいかと思ったので、今回の反省点として次取り組む際はそのフローを取りたいと思いました。

まだまだUIデザインにおける反省点は多いですが、しっかりと改善していき、素晴らしいUIデザイナーになりたいと思います！！
読んでいただき、ありがとうございました！！！

この記事が気に入ったらサポートをしてみませんか？