🍕

UIデザイナーがピザ屋のアプリをOOUIにしてみる

2020/10/22に公開

デザイン

ピザ

OOUI

idea

OOUIの書籍や記事で、ピザ屋アプリUIがタスク型として取り上げられているのをよく見るので、じゃあOOUIベースでリデザインするとどうなるかっていうのを試してみる。

ちなみに今回は「なぜピザ屋アプリはタスク型なのか？」には大きく触れない。
これに関してはピザ屋の中の人にいつか解説してもらいたい🙏🙏🙏

まず、OOUIのおさらい

オブジェクト指向UIデザイン──使いやすいソフトウェアの原理 WEB+DB PRESS plus
ソシオメディア株式会社 (著), 上野学 (著, 監修), 藤井幸多 (著)
OOUI（object-oriented user interface）といえばこの本。意識低い系デザイナー筆頭の自分も書籍版を買いました。これ読んだら基本わかる。

OOUIって新しい発明ではないので安心して欲しい

デザイナーがオブジェクトとか聞くと身構えてしまうかもしれないけど、ユーザーとしていつも見るお馴染みのUI=OOUIであって、決して新しい手法ではない。ざっくりだけど、みんな普通にやっている設計を改めて言語化や定義化したものだと思ってもらってOK。

上野学さんも2016年時点で以下のように記しています。

「オブジェクトベースのUIモデリング」というデザイン手法は、GUI アプリケーションをデザインする際の基本的なテクニックであり、今さらそこに名前をつけるのもおかしいほど、ソフトウェアのデザイナーであれば十分に習得していなければならないものだと考えています。しかしその手法について正面から解説した文献は少なく、デザイナーやプログラマーの間ではあまり理解されていないようです。特に、業務アプリケーションの企画者や設計者の間でほとんど知られていません。
引用先 https://www.sociomedia.co.jp/7279

自分なりの超解釈だと

自由なのがOOUI
統制されているのがタスク型UI

タスク型の方が悪いってわけじゃない、タスク型の方が有効な場合もある。例えば一生に一度レベルしか触れないようなUIだったら学習コスト不要のタスク型の方が自分はいいかも

ピザ屋のUI設計やっていく

今所属している開発チームでは、タスクに細かくタイムボックスを設定しているのでここでもタイムボックスを設定します。ちなみにここまでの文章書くのに15分かかってしまった（慣れてない）

[30分] 1. 現状のピザ屋アプリのユーザーフローの確認
[15分] 2. ピザ屋アプリのオブジェクト/タスクの洗い出し
[15分] 3. ピザ屋アプリをOOUIにした場合のフロー設計
[60分] 4. XDでホーム画面作成
[60分] 5. XDでその他画面作成

3時間で行けるかな..

1. 現状のピザ屋アプリのユーザーフローの確認

アプリ開いてスタートする2画面がこちら（権利侵害しないように抽象化してます）

自分が一瞬（確か2日）バイトしたことがあるド○ノピザさんのアプリで見てみる

早速のタスクメニューの洗礼
欲求としては30分以内に家でピザが食べたいんだけど、ログインしなくても配達はできるのかな？

配達をタップしてみる

👎ご注文/探す/検索する　アクションが3つ同時に降りかかる
👎ピンポイントデリバリー？花見会場とかのやつかな？家では使えない？

ピンポイントデリバリーをタップしてみる

👎ここには配達できるお店がないらしい
👎いつもチラシ入って、注文もしたことあるんだけどな..

郵便番号から検索

郵便番号に紐づいた店舗とお届け目安が出てきた
日時指定をしてみるわけね
13時に指定して「次へ」

日時指定後にようやくメニューがお目見え

👎ただしカテゴリ選択からスタート
ピザメニューをタップするとコレクションビューが現れる
詳細に遷移するとオプションやらクーポンやらアクションが現れる
ひとまずカートに入れてお支払いへ

お支払いページで情報入力

郵便番号までは入れてるので番地以降を入力
名前、電話番号、メアド入力（👎任意か必須かは不明）
領収書必要な場合のチェックボックス
商品の受け渡し方法を選択（👍コロナ対策）

さらに遷移したページで支払い方法を選択

現金からキャリア決済まで複数選べるよう

またまた遷移して、最終の注文確定ページ

今まで入力した情報が見える
👎注文内容や決済方法は出ていない
今ピザ食べたくないので、ここで離脱🙌

2. ピザ屋アプリのオブジェクト/タスクの洗い出し

オブジェクト

ピザやドリンクなどのメニュー
- メニューのカテゴリ
- クーポン（メニュー単体に紐づいたり、ややこしそうなので今回は考えない）
店舗
- ピザ屋の特性上、自宅配達の場合はユーザーが店舗を選ぶことはできない。ここの業務設計、店舗の運営形態（直営/FC）あたりがUIをタスク型にしていると睨んでる🤔

タスク

購入方法を選ぶ（自宅配達/店舗受け取り）
自宅の郵便番号を入力する
受け取り時刻を予約する
メニューのカテゴリーを選ぶ
ピザを選ぶ
選んだピザのオプションを選択する
購入に必要な情報を入力する
決済に必要な情報を入力する

3. ピザ屋アプリをOOUIにした場合のフロー設計

A. 購入するフロー

ピザを選ぶ（カテゴリを絞り込める）
購入方法を選ぶ（自宅配達/店舗受け取り）
- 自宅住所が未登録の場合はフローBに行って戻ってこれる
受け取り時刻を予約する
決済方法を選択/追加選択
- 決済方法が未設定の場合はフローBに行って戻ってこれる

B. ユーザー情報を入力するフロー

ユーザー情報入力ページを開く
情報を編集する
保存する

4. XDでホーム画面作成

せっかくなので簡単なロゴから、自分が好きなPIZZA SLICE風で、弊社名とピザを融合

今回のUI作成（ワイヤーフレーム）には [こちら]（https://contrauikit.com/）を利用させていただく🙏

メニューリスト

ホームにはメニューのコレクションビューを表示します。カテゴリは一旦画面フリックのタブメニューでいいかな
お気に入りボタンも欲しい、どこで閲覧するかは右上にお気に入りリストへの遷移アイコン固定か、タブメニューにお気に入りあってもいい

メニュー詳細

シングルビューはこういうイメージ
トッピングはこれじゃ情報足りないけど（何がどの量追加されるのか）
あと複数枚購入するケースもあるな..

5. XDでその他画面作成

ユーザー情報編集

ここでは

基本情報（名前・メアド）編集
配送先情報入力/編集/削除/追加
決済情報入力/編集/削除/追加

オーダーページ