見出し画像

OOUI オブジェクト指向UIとは？

Yuhitsuro

この記事では、デザインのコミュニティBONOで学んだオブジェクト指向UI（OOUI）の概念を基に、自身の考察や他の情報源を交えたOOUIについての理解と学びを記録しています。

1.どっちがよいUI?なぜコンテンツ中心設計がユーザーを満足させやすいのか

UIデザインには主に2つのアプローチがあります。１つがオブジェクト指向その反対とも言われているのがタスク指向です。

オブジェクト指向UIとは？


ユーザーが目当てとする"もの（オブジェクト）"に焦点を当てて設計されたUIです。

"オブジェクト"とは？

"オブジェクト"とは、ユーザーが直接操作を行う"対象"です。
ユーザーが「目当てとするもの」というと分かりやすいかもしれません。

例えるとメッセージアプリなら「メッセージ」、𝕏なら「ポスト」、マーケットプレイスなら「NFT」、Youtube なら「動画」などが、オブジェクトにあたります。

オブジェクト指向UI（OOUI）では、「オブジェクト」をUIデザインの中心として扱います。

左からYoutube、楽天、instagram


オブジェクト指向UIの特徴

特徴1:「名詞 → 動詞」の順序で操作するUI

例：投稿→いいねする
例：商品→購入する
例：動画→「あとで見る」に追加する
のようにオブジェクトから操作が始まるようなアプローチのことです

「名詞 → 動詞」の順序で操作するUI

特徴２:一つのオブジェクトに複数のタスクが行える

一つのオブジェクトに複数のタスクが行えるUI

なぜオブジェクト指向だと使いやすいの？

オブジェクト指向でアプローチすることはユーザーが最も慣れている物理世界でのフローと同じになるからです。
私たちは何か行動を起こす時にまず「もの」から行動が始まります。

物理世界（キッチン）では、単一の作業空間で複数の調理タスクを同時に進行できる

その結果、デジタル上での操作が物理世界での操作と同じく直感的でわかりやすいものになります。そのためサービスの多くはこのオブジェクト指向でデザインされていることが多いです。

OpenSeaをはじめとするNFTマーケットプレイスの多くがオブジェクト指向のUIとなっている
NFTに対して「購入」「詳細を見る」「お気に入り」などのアクションが可能

左から、Youtube、楽天ショッピング、instagram
直感的に操作できるためサービスの多くはこのオブジェクト指向でデザインされている


オブジェクト指向UIは開発側にとってもメリットがある

  • 再利用性の向上: UIコンポーネントの再利用により、開発時間とコストを削減。

  • メンテナンスの容易さ: 独立したオブジェクト設計により、更新や拡張が簡単に行える。

  • チームワークの効率化: 明確な構造がチーム間の協力とコミュニケーションを促進。

  • ユーザーエクスペリエンスの向上: 一貫性と直感性のあるUIがユーザー満足度を高める。

タスク指向UIとは？

ユーザーが目当てとするものにたどり着くための"タスク"に焦点を当てて設計されたUIです。

タスク指向UIの特徴

特徴１:「動詞 → 名詞」の順序で操作するUI

例:フライトの予約
出発地と目的地を選択する→日付とフライトオプションを選ぶ→座席を選択し、支払いを行う

フライト予約では、タスク指向のUIが明確な予約手順を提供します

ここではユーザーが既に目的地と日付を決めているという前提に基づいているため、このように段階的に情報を絞り込むことで、不要な混乱を防ぎ、ユーザーが効率的に適切なフライトを選択できるようにしています。

例:銀行のATM
銀行のATMでは、行いたい操作→その後必要な手順
とすることで行いたい操作に集中させることができます。

タスク指向の代表的なUI 銀行のATM　やりたいことを選ぶ→そのモードに入る

例:トークンスワップのUI


UniswapのトークンスワップUI

分散型取引所（Dex）の多くはスワップ、買う、売るを中心に構築されている
タスク指向のUIになっている

タスク指向UIだけどオブジェクト指向のアプローチになってる場合がある


先ほど紹介した2つの例は、画面上ではタスク指向のUIでしたが、実際にはユーザーのキャッシュカードや接続されたウォレットなどがアクションの起点となっています。
これらの対象オブジェクトは通常1つに限られているからこそ、タスク指向のUIが効果的に機能しています。画面自体はタスク指向である一方で、全体としてはオブジェクト指向のアプローチとも考えられます。

タスク指向UIはなぜ使いにくいのか

動画内ではこのようにメッセージアプリにおけるタスク指向とオブジェクト指向のUIデザインの違いを視覚的に分かりやすく解説しています。

←左がオブジェクト指向UI   右がタスク指向UI→

左の画面はオブジェクト指向、右の画面はタスク指向を示しており、ユーザーはまず何をしたいか選ぶ必要があります。これはとても使いやすいUIとは言えません。

しかしデザインプロセスでは、要件から考えることが多いため、UIが無意識のうちにタスク指向になりがちです。
タスク指向のデザインはユーザーの期待や自然なフローとは合わないことがあり、結果として使いにくいUIになるリスクがあります。

この記事のまとめ

UIデザインにおいては、オブジェクト指向アプローチを取ることで、直感的に操作できるUIとなる。しかし状況に応じたタスク指向のバランスが不可欠です💡
日常の散策中にも、各UIの背後にある設計アプローチに気づくことが増え、それがデザインへの新たな洞察をもたらしてくれています。

次回はオブジェクトの抽出からUI設計についてまとめようと思います。


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