コンテンツ中心のUIデザイン -オブジェクト指向ってなに？-
今回はBONOのコンテンツにある「コンテンツ中心のUI」について学習しましたのでそのまとめとなります。
ロードマップもついに終盤に差し掛かり、満を持して「オブジェクト指向UIデザイン」にチャレンジしていきます。
「オブジェクト指向UI」って噂では聞いていましたが「難しそう」って先入観で拒否反応が出ていました。
今回、BONOの解説動画を見ることでOOUIの基礎について理解することができ、今後UIを作成する際は非常に重要となるパートなのでフローとその学びをまとめていきます！
また次回はここで学んだ事を実際に実践してみようという事で、「出張申請サービス」のサービスデザインに取り組みます。
オブジェクト指向UIとは
そもそもオブジェクト指向とは何か？
表示するメインコンテンツ（情報）をベースにしてUIを組み立てることを指します。
オブジェクト＝コンテンツの中心となり、エンジニアリングの観点でデータがオブジェクト事に保存されていて、それをどういう風に表現するのかも関わってきます。
逆にタスク指向とは？
「何をするか」項目ごとに状態が分かれているUIにあたります。一見、タスク指向でも良くない？と思ってしまうのですがビジュアルで見るとUIに大きな差があり、操作の快適さも違ってくるのです。
タスク指向の全てが悪いわけではありませんが、ここではオブジェクト中心が良い理由をまとめていきます。
オブジェクト指向UIのメリット
ユーザーが想起しやすい
UIの汎用性が高い
ユーザーが想起しやすいとは？
実は私たちの身の回りはオブジェクト指向で成り立っていることがほとんどなので、身近でいてわかりやすい構造となっています。
オブジェクト指向UIで組むことがユーザーにとってわかりやすいUIであると基本的には考えられています。
UIの汎用性が高いとは？
タスク指向だと新しいアクションが増えることで項目も増えていき操作性、視認性を担保することが難しくなります。
オブジェクト指向の場合、項目は増えても情報の関係が整理しやすいので操作性も保たれ、変化に対応しやすいUI設計が可能です。
オブジェクトを定義する
UIのメインコンテンツを決めるに当たり、そもそもオブジェクトをどう抽出するか？になります。
まず要件から動作フローに書き出し、それに対したユーザー行動からその中にある名詞を抽出しオブジェクトの候補を出します。
要件が出揃ったらユーザーが操作する順番に並び替え、ユーザーがやるべきアクションに並べ、その通りに行動すると目的が達成されるようにします。
オブジェクト要素の考え方
表示情報とアクションを書き出し、オブジェクトを決めます。
表示する情報とそれに付随するアクションを抽出しオブジェクトを定義します。ここで完璧を目指すのでなく大方を決めUIを作成し、必要であれば情報を付け足し完成度を高める考えで良い。
ユーザーが満たしたい課題に対し、必要なオブジェクトは何かを決める
フロー図を作る
オブジェクトをベースにフロー図を作成し必要なページと階層関係を出します。
更に各必要なページからどんな情報を載せるのか表示情報（プロパティ）、どんなアクションが必要かを書き出し、全体のページ構成を言語化します。
全体の構成を整理する目的で行われています。
慣れてくるとどんなコンポーネントが必要でどのUIを使い回すことができるかをこの時点である程度考えられそうだなぁと感じました。
1.ページを構成する
2.アクションを考える
3.表示要素を考える/整理する
が順番となります。
ページはコレクションとシングルが8割
コレクション（オブジェクトのアイテムを並べる）
シングル（アイテム詳細）
一覧と詳細はセットとなっていることが多く見られます。
ルートナビ
起点になるページ群でアプリならボトムナビに当たることが多く、ユーザーが最初に想起するページの集まりになります。
・最上位のナビゲーション項目
・ユーザーが最初に浮かぶ項目を配置する基本
・「グローバルナビ」「ボトムナビ」に相当する
UIフロー図からページの構成を考えるとき何を「起点」になりそうかを考え決めていきます。
トップページ＝1番重要な情報と位置考え、じゃあどのコンテンツを置くか、必要なオブジェクトは何かを考えていきます。
UIフロー図にまとめよう
1.オブジェクトを起点に考えてみる
コレクション/シングルの関係性を整理する
2.起点となるルートナビを決める
アクションとして遷移していないことを整理して明確にします。
3.アクションの関係性を考える
ボタンを押した遷移先はどこに当たるかをまとめておきます。
アクションごとにどのページに遷移するのか、新規ページが必要かを整理します。
オブジェクトの関係性、ページの表示の情報とアクションで何が重要かを書き出して解像度を上げることでUI作成時もさらにアップデートされるので考えを深めるために大事な項目となります。なのでこの段階で完璧さは求めず、頭のアイデアを発散・収束し要件を満たしたUIを作成するための一つです。
UIをデザインしよう
ページ構成からUIに起こしていきます。
データに対してどういうアクションをするかをユーザーの目的をもとに優先度をつけレイアウトしていきます。
基本的な構成である「アクション」「表示要素」「ルートナビ」でページのエリアを分け、整理したフロー図の「シングル/コレクション」「表示要素」「アクション項目」でレイアウトを決めていきます。
先ほどのUIフロー図を作成しまとめておくことで、実際にUIをデザインするときに組みやすくなります。
UIを情報とアクションで分解
アクションの配置パターンはヘッダー、コンテンツ付近、フッターと3パターンになり情報の優先度合いでパターンが整理しやすくなります。
情報を整理するからデザインしやすい
この画面は何の画面かが伝わり、グルーピングしコントラストをつけ情報をわかりやすくし優先度をつけます。情報や優先度は目的やユーザーに合わせてデザインするのが重要。
参考からパターンを出す
構造の似ているUIから参考を見つける力をつけることでさまざまなデザインから吸収しロジックでUIで表現することができる
UIは目的やユーザー中心で組み立てる
“伝えたい目的やユーザーさんに合わせて表示を整理する"
全てがつながっているので「目的」「ユーザー課題」が出発点であり、そのためにどのUIパターンが解決できるかの視点で考えるのが重要です。
感想・気づき
あくまでも「目的、ユーザーの課題を解決し目的を達成する」ことが大切であり、「目的・解決したい課題」を達成するためにはどんなオブジェクトが必要かを抽出し、UIフロー図を作成する。フロー図からUIへ落とし込み、グラフィックの完成度をあげる。
この流れの考え方はUIだけでなく、どのデザイン作成するにも共通することであると感じました。
そして全体がクリアになったようにも感じました！
オブジェクト設計学んでUI以外に世の中に出ているwebやグラフィックデザインの見る目も変わりました。以前は先に表層を見てこういう雰囲気だから、こんな印象与えて、こんな目的を達成したいんだなぁって見方をしていて、これは自分の表層デザインの引き出しを増やす目的で見ていました。
今は逆の視点でまず何を伝えたいか目的を考え、ユーザーの行動フローを想像して、じゃあ何を表示する必要があるか、どんなアクションを起こしてほしいか考察する。
その結果、このグラフィックや導線がデザインされたのかぁっていう、「目的達成」するためにどんなアプローチを考えこのデザインになったのかって考える見方もできました。
前者の考え方でデザインを作成すると、途中で振り返ると目的から逸れていたり、結局何を伝えたかったのだろうとブレることが多々ありました。
目的が大切とわかっていてもそれを貫き通すのは難しいです。
BONOに入りUIデザインが全くわからないまま「0からサービス」をデザイン
に挑戦したときは、思いつくままに「じゃあこの機能が必要かも」と付け足し、インタビューしてはそのまま「この意見を反映させよう」って感じで後でブレブレのサービスになってしまった経験を思い出しました。
この経験と今回の学びで「目的」「誰の何の課題を達成」したいかを明確にしそれを根本としてサービス・UIを設計するべきかの重要さを再認識できました。
それを踏まえ次回は「出張サービスをデザインしよう」に取り組んでいきます。
この記事が気に入ったらサポートをしてみませんか？