UI/UXデザイン
この記事では、ブログや雑誌記事などで大きな反響を得た設計手法「オブジェクト指向UI」についてご紹介します。
オブジェクト指向UIの原則やメリットから設計手法まで詳細に解説するので、ぜひ参考にしてください。
オブジェクト指向UI（OOUI）とは？
オブジェクト指向UIとは、英語の「Object Oriented User Interface」を日本語に訳した言葉で、英語の頭文字をとって「OOUI」とも呼ばれます。
オブジェクト（もの、名詞）を起点としてUIを設計する考え方や取り組みを指します。
例えばショッピングアプリであれば、ユーザーが購入したい商品がオブジェクトになります。
オブジェクトに対して、ユーザーが商品を探したり、お気に入りに登録したりといったアクションはタスクになります。
オブジェクト指向UI（OOUI）の原則
オブジェクト指向UIについて理解を深めるために、まずは基本の原則について知りましょう。
UXデザインコンサルタントやインタラクションデザイナーとして活躍し、HCD-Net人間中心設計認定専門家でもある上野学さんの著書「オブジェクト指向UIデザイン 使いやすいソフトウェアの原理」で、オブジェクト指向UIの原則として挙げられているのは次の4つです。
・オブジェクトを知覚でき直接的に働きかけられる |
出典：「オブジェクト指向UIデザイン 使いやすいソフトウェアの原理」（技術評論社）より
これでは少し難しく感じるかもしれませんので、前述のショッピングアプリを例に挙げて説明しましょう。
オブジェクトを知覚でき直接的に働きかけられる
オブジェクトとなる商品は、ユーザーにわかりやすく表示され、直接働きかけられる状態である必要があります。
直接働きかけられる状態とは、お気に入りやカートに入れるといったアクションをボタンなどで分かりやすく表示し、ユーザーが直感的かつ効率的に行えるように設計した状態を指します。
オブジェクトは自身の性質と状態を体現する
ユーザーがスムーズに目的を達成するためには、個々の商品がユーザーのアクションに対してステータスを表示する必要があります。
例えば、ユーザーが気になった商品をクリックしたりタップした場合、商品画像が拡大されたり商品の詳細に遷移したりというように即時的にフィードバックを返し、ユーザーが操作結果と商品のステータスを認識できるようにします。
オブジェクト選択→アクション選択の操作順序
ユーザーは最初に商品を選択し、次にお気に入りに登録する・カートに入れる・シェアするなどのアクションを選択するという順序で操作します。
すべてのオブジェクトが互いに協調しながらUIを構成する
商品のレイアウトや操作方法は、プロダクト全体のルールに則った一貫性のあるものであることが必要です。
同じジャンルの情報は同じ形状で並べます。割引やキャンペーンなどの重要な情報はサイズを大きくしたり色を変えて目立たせたりする一方で、そうでないものはサイズも小さくしたり色味を抑えたりして、視認性を高めましょう。
オブジェクト指向UIとタスク指向UIの違い
オブジェクト指向UIとタスク指向UIの違いを、図を用いて説明しましょう。
オブジェクト指向UIは、最初に対象となるオブジェクトから選び、次にアクションを選んでタスクを実行します。
タスク指向UIは、最初にアクションを選んで、次に対象となるオブジェクトを選び、タスクを完了します。
タスク指向UIとオブジェクト指向UIの違いは上記の通りですが、オブジェクト指向UIが優れていると評価されているのはなぜでしょうか？
次章でオブジェクト指向UIのメリットについて説明します。
オブジェクト指向UI（OOUI）のメリット
オブジェクト指向UIのメリットは主に以下の2点です。
- 構造がシンプルになる
- 直感的に操作できる
それぞれについて説明します。
1. 構造がシンプルになる
タスク指向UIと比較すると、オブジェクト指向UIの方が操作プロセスが減って構造がシンプルになるケースが多いため、ユーザーの負荷を軽減できる点がメリットです。
例えば、前章の図でオブジェクト指向UIは、対象となる商品に対して、3つのアクションが用意されておりユーザーはリアルタイムで自由に選択できます。
しかし、タスク指向UIは、購入するというタスクを起点にしているため、対象となる商品を
お気に入りに追加したいと思った場合、行動選択のプロセスに戻る必要があります。
そのため、タスク指向UIはオブジェクト指向UIよりプロセスが多くなってしまうのです。
また、ユーザーの操作プロセスが減ることにより画面数も減るため作業効率が高まるなど、開発側にもメリットがあります。
2. 直感的に操作できる
文章の構造が主語が先で述語が後に続くように、日常生活では対象となるオブジェクトがあった上でアクションを実行することが多いとされています。
そのため、日常生活と同じ感覚で直感的に操作できる点が、オブジェクト指向UIの大きなメリットであり、ユーザーにとって自然で使いやすいと評価されているのです。
オブジェクト指向UI（OOUI）の設計方法3ステップ
オブジェクト指向UIの基本的な設計方法を、以下の3ステップで紹介します。
- オブジェクトの抽出
- ビューとナビゲーションの設計
- レイアウトの作成
それぞれについて詳しく説明します。
1. オブジェクトの抽出
オブジェクトやアクションを整理して、メインとなるオブジェクトを特定し、付随するサブプロジェクトやアクションを紐づけて関係性をまとめましょう。
オブジェクト指向UIでは、メインオブジェクトに付随するサブプロジェクトをプロパティと言います。
オブジェクトを抽出する際に、何がオブジェクトに該当するのか判断に迷った場合は、前章で述べた日常生活と同じ感覚で直感的に操作できる点が、オブジェクト指向UIの大きなメリットであることを思い出してください。
日常生活に置き換えたときに、複数のアクションが選択肢としてあるものをオブジェクトとして抽出すると良いでしょう。
2. ビューとナビゲーションの設計
ビューとは、ウィンドウ、ページ、リストやグリッドレイアウトなど、ユーザーが画面上で目にするひとまとまりの情報表示領域を指します。
また、ユーザーがビューを行き来して必要な情報にスムーズにアクセスするためのものをナビゲーションと言います。
オブジェクトを特定しアクションを整理したら、具体的なビューとビュー同士の関係性を検討し、必要に応じてナビゲーションを設置して、ビューの構造を設計します。
オブジェクト指向UIではビューを、1画面に1つのオブジェクトを表示するシングルビューと、1画面に同じジャンルのオブジェクトを並べて表示するコレクションビューに分けて表現します。
3.レイアウトの作成
ビューの構造を設計したら、 最適なデザインパターンを検討して選定し、各画面のレイアウトを作成しましょう。
関連記事：UIデザインを設計するポイントは？重要性や考え方を実例とともに解説
Webサービスやアプリのデザインでお悩みならクロスデザイナーがおすすめ！
本記事では、オブジェクト指向UIの原則やメリット、設計方法などについて、詳細に解説しました。
オブジェクト指向で設計すると、構造がシンプルになり、日常生活と同じ感覚で操作できることから、ユーザーにとって直感的で使いやすいUIになるといったメリットがあります。
また、操作プロセスが減ることにより画面数も減るため作業効率が高まるなど、開発側にもメリットがあります。
よりよいプロダクト開発のためにオブジェクト指向UIを検討しているなら、ハイレベルなスキルを持ったデザイナーを採用できるエージェントサービス「クロスデザイナー」がおすすめです。
オブジェクト指向UIの設計が可能な専門家のご紹介も可能です。
フリーランスデザイナーに特化したエージェントサービスのクロスデザイナーは、登録時に厳正な審査基準を設けており、通過率はわずか5％です。採用難易度の高い即戦力デザイナーの中から、自社にマッチしたデザイナーを最短即日で提案できます。
また双方の合意があれば、アサイン後に正社員への契約形態の変更も可能。
WebデザイナーやUI／UXデザイナー、アプリデザイナーなど多数在籍しているため、あらゆるクリエイティブにも対応できます。
下記からサービス資料を無料でダウンロードできます。ぜひ貴社のデザイナー採用にお役立てください。
デザイナー採用で直面する課題から採用活動での注意点、具体的な採用手法までをご紹介します。
日本最大級のフリーランスデザイナー専門エージェントサービス「クロスデザイナー」
UI/UXデザイン、アプリデザイン、グラフィックデザイン、そしてアートディレクションなど、多様化するデザイナー職。
7,000人以上ものフリーランスデザイナーが登録するクロスデザイナーなら、ヒアリングさせていただいた最短即日中に複数名の即戦力デザイナーをご提案。さらに条件が合えば最短3日でアサイン可能です。
さらに、採用コンサルタントがお客様の案件内容をヒアリングの上、稼働日数やスキル条件など、求められる採用要件をアドバイスさせていただくため、採用のミスマッチを最小限に抑えます。
事業成長を加速させるデザインを実現いたします。
サービス資料でわかること
- クロスデザイナーの特徴
- クロスデザイナーに登録しているデザイナー参考例
- 各サービスプラン概要
- 支援実績・お客様の声
Documents
