アップサイクル事業 003

前トレイルでは、UXデザインのシナリオを考える手法である構造化シナリオを作成しました。 その後、具体的なUIプロトタイプを制作するために「オブジェクト指向UIデザイン」を実施したため、その内容を紹介します。

オブジェクト指向UIデザインとは

オブジェクト指向UIデザインとは、オブジェクト(対象、目的)を中心にソフトウェアを設計する思想とその方法論です。 UIデザインにはオブジェクト指向UIデザインとタスク指向UIデザインの考え方があります。 タスク指向UIデザインは、アプリケーションでユーザーが行うタスクを想定し、それに応じたUIを設計します。 それに対してオブジェクト指向UIデザインでは、対象となるオブジェクトを選んで、そのあとに操作などのアクションを考えてUIを設計していきます。

オブジェクト指向UIの具体的な手順

オブジェクト指向UIに基づいた設計は以下の4つの手順からなります。

  1. 課題仮説の記述
  2. オブジェクトの抽出
  3. ビューとナビゲーションの検討
  4. レイアウトパターンの適用

実際の事業で実施した内容を含めることはできないため、タクシーの配車サービスを例として説明します。

課題仮説の記述

最初に、プロトタイプで検証したい課題仮説を洗い出します。 課題仮説は、以下のフォーマットに当てはめて記述します。

  • 【顧客像】は【タスク】をするとき、【課題の内容】という課題がある
  • 【顧客像】は【制限/制約】のために、【課題】を体験している

「誰が」「何を」「どのくらい」「いつ」「なぜ」の5つの観点から重要な課題仮説を検討します。 課題仮説を立てたら、仮説の正しさを検証したり、誤りを修正したりします。

課題仮説に対して、その課題が解決された結果ユーザーにとって提供される価値を記載します。 このように課題と価値を紐づけて整理することで、 チーム内で「ユーザーの価値につながる解決すべき課題は何か」という議論ができるようになり、 ユーザーの価値につながらない課題にフォーカスしたまま、以降のプロセスを進めてしまうことを防ぎます。 そもそも新規事業の目的は課題を解決することではなく、ユーザーに価値を届けることにあります。 プロトタイピングにおいても、解決すべき課題の優先度を考えるときに、 「この課題が解決されると価値につながるか」ということを常に意識して進めていく必要があります。

課題仮説の記述例: hypotheses_challenges

オブジェクトの抽出

検証したい仮説に対してユーザーの目的とタスクの洗い出しを行います。 オブジェクト指向UIのプロセスにおいて、 ユーザーの目的の中におけるオブジェクトに着目するという側面があるため目的の整理を行います。

ユーザーの目的の洗い出し

検証したい課題仮説に関し、ユーザーがサービスを利用する目的(感情やニーズ)について 「どんなユーザーが」「どんなシーンで」感情・ニーズを抱えているのかを考えて記述していきます。

ユーザー目的の記述例:
user_purpose

ユーザーのタスクの洗い出し

ユーザーの目的からユーザーのタスクの洗い出しを行います。 タスクの洗い出しの際は、ユーザーのタスクがどのような経緯で発生するのかも記述します。 オブジェクト指向UIには名詞に着目するという特徴があるためwho(だれが)とwhat(何を)を重要視して丁寧に整理することで 後続のプロセスが進みやすくなります。

ユーザーのタスク記述例:
user_task_extraction

オブジェクトの抽出とモデル化

ユーザーのタスクを洗い出したら、それぞれのタスクの文言から名詞を抽出します。 ここで抽出する名詞がアプリ上で表現するオブジェクトの全体像となるため、ユーザーの興味関心の対象となるであろう名詞を中心に抜き出します。 抜き出した名詞の中で、アプリケーションが主として対象とするオブジェクトをメインオブジェクトとして特定します。 オブジェクト間の関係性を図式化して整理しながら、特に重要な名詞となるメインオブジェクトを特定します。

schematicize_relationships

メインオブジェクトに紐づく関係名詞と動詞(アクション)をセットにして情報構造をモデル化します。 モデル化する際に、必要であれば関係名詞や動詞を追加します。

  • メインオブジェクト
  • メインオブジェクトに紐づく関係名詞
  • オブジェクトに対する動詞(アクション)

modeling

ビューとナビゲーション検討

ビューとナビゲーションの検討では、メインオブジェクト同士の関係性を整理することで画面同士の繋がりとなる導線設計をします。 1つのオブジェクトに対してコレクションビュー(全体、一覧)とシングルビュー(詳細)が存在することを念頭に置き、 それぞれのオブジェクト同士をどう繋げるかを検討します。 オブジェクト間の関係性と参照関係をもとに大体の画面数を見積もることができます。

view_navigation

レイアウトパターンの選定

似たようなオブジェクトが存在するアプリを参考にして、オブジェクトに最適なビューの形式やスタイルを考慮しながらレイアウトパターンを制作します。 オブジェクト間の参照関係をもとにインタラクションをつけて、各オブジェクトに紐づくユーザーアクションは ボタンやインタラクションの一部として落とし込んでいきます。

レイアウトを作成していると、オブジェクト間の関係性の矛盾に気づいたり、一覧画面を作らず詳細画面だけでも伝わる時に画面数を減らしたり 情報構造を変える場合が多くあります。 その場合は新しいオブジェクト、プロパティー、ユーザーアクションを見つけ次第、前の工程に戻って反復しながら調整していきます。

layout_pattern

今回のイテレーションでの学び

新規事業開発において、プロトタイピングのフェーズでUIデザイナーがいるとは限りません。 実際に本事業ではUIデザイナーがいなかったため、プロセスが明瞭なオブジェクト指向UIデザインの手法を実践することで 事業オーナーと開発者でレイアウトを作成できました。 基本的なUI設計の知識や能力・方法を学ぶいい機会になりました。