見出し画像

【OOUIレベル3】オブジェクト指向UIデザイン 基礎編レベル3ですでに悩ましい件

皆大好きOOUIですが、周りに読書会する仲間もいないので一人寂しく、実践してみた内容を公開します。

参考書籍はもちろんこちら↓

オブジェクト指向UIデザイン──使いやすいソフトウェアの原理 (WEB+DB PRESS plusシリーズ) ソシオメディア株式会社 https://www.amazon.co.jp/dp/4297113511/ref=cm_sw_r_tw_dp_-uT9FbGPE36RH

以下フェーズごとに記載していますが、書籍にもあるように決して直線的ではなく、各フェーズを行ったり来たりしながら思考の精度をあげていくことが繰り返し強調されています。

課題. イベント店舗管理アプリケーション

シンプルに表現すると、

・会場ごとに出店ブースがあるような管理・閲覧アプリケーション

です。
書籍には具体的に要件が記載されていますが割愛します。
その具体的要件からモデルを書き出したものが次になります。

フェーズ1-2.  モデル・インタラクション

画像1

基礎編にも関わらず、もうインタラクションで悩んでいます。。。
「ユーザーの目的別にカテゴリ(ショップ・フード等)があった方がいいかな?」と考えましたが、今回は、

・会場数及び出店数が限られること。

・期間限定のイベントが対象であるため、
シンプルな機能である方が望ましいこと。

からオブジェクトを増やすことにはしませんでした。
とはいえ、ユーザーニーズとして、「◯◯がしたい」が満たされるように、プロパティにカテゴリを追加し、一覧にソート機能をつけて担保することにしました。

フェーズ3. プレゼンテーション(手書き)

画像2

画像3

noteに公開してはいけない字の汚さですが、

ワイヤーフレームは見た目は気にしないのが原則

なので公開します。(次からはもっと丁寧に描きます)

書籍の例と異なるのですが、

イベント参加者という「時間を大切にしたい」「すぐに情報を知りたい」というニーズを鑑みたときに、A会場とB会場はすぐに切り替えられるべきであると考えました。
懸念点はモバイルのMAP画面&ショップ一覧のUIに工夫が必要になる点です。
(MAPのアイコンを押すと該当ショップがMAP上orリストトップに表示されるイメージです。食べログ様のUIをガン見しました)

フェーズ3-2. プレゼンテーション(XDワイヤーフレーム)

スクリーンショット 2021-01-07 18.11.14

スクリーンショット 2021-01-07 18.53.09

とはいえ、書籍の例と違うことで見落としがないかとても不安になり、
XDに落としてみました。(PCだけ)

若干インタラクションで工夫が必要ですが、
要望は満たせているのではと考えます。
これも行ったり来たりしながら、ブラッシュアップを本来はしていくものですが、今回は以上とします。

最後に

OOUIの課題の実践ですが、実際に答えをみないでやってみると分からないことが沢山出てきますし正解がわかりません。(そもそも正解がない場合ほとんど)
今回悩ましかったのは、

・オブジェクトをナビゲーション項目にしても良いのか。
(今回は会場)
・PC版の2カラムに導線上の問題点がないのか。


でした。
プロトタイプまで落としてみる・ユーザーテストで見落としを防ぐなども合わせながら、検証を循環させて、精度をあげていくことが必須です。
最低限、検証前にやっておくと良いのは、

本書で繰り返し言及されている、

・名詞→動詞(ユーザーの手にまずオブジェクトを渡す)になっているか

・モードレスであるか

上記が満たされているのか徹底的に考え抜くことだと感じています。

UIデザインはプレゼンテーションの事例は数多く見つかるのですが、モデル・インタラクションの事例が全然見つかりません。
OOUIという良書籍が日本で出版されたのでぜひ皆さんのアウトプットも共有いただけると、嬉しいです。

引き続きよろしくお願いします。

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