名称未設定

オブジェクトベースなUI設計を学んだら視点がガラリと変わった話

同僚である@akira_motomuraにオススメされて、上野学(@manabuueno)さんのオブジェクト指向やOOUIに関する記事を読んでみたのですが、
個人的にサービスをつくる際の視点がガラリと変わったのでまとめてみたいと思います。


オブジェクトベースなUIとは?

オブジェクトベースなUIとは、オブジェクト(ユーザの関心の対象物)を手がかりに操作設計されたユーザーインターフェースのことを言います。
(OOUIとも呼ばれている)

画像1

代表的な例としてApple製品が取り上げられることが多いのですが、例えばiPhoneの写真アプリだと、ある写真に対して何らかの処理を行いたい場合、ユーザーはまず対象のオブジェクト(写真)を選び、その後にアクション(編集、送信、お気に入り、削除)を選ぶ、という流れになります。

ソフトウェア(アプリ)は実態がないのでわかりにくいのですが、基本的には自分を拡張する道具なので、ユーザーは物理的な道具を使う時と同じような行動イメージを想起します。

釘を打つ時、我々はまずハンマーを持ち、それから振り下ろします。振り下ろしてからハンマーを持つ人はいないのです。
OOUX – オブジェクトベースのUIモデリングより

ポイントは操作の手順が「名詞 → 動詞」であることです。
この操作手順にすることでモードレスなデザインを実現することができ、いわゆる直感的で使いやすいサービスを設計することができます。


詳しくは下記の記事にわかりやすくまとめられているのでぜひ読んでいただきたいです。



オブジェクトベースのUIモデリング

そんなオブジェクトベースなUIを設計する方法の1つとして、オブジェクトベースUIのモデリングという手法があります。
(このnote内に色んな記事リンク貼っていますが、個人的にはこの記事を一番読んでほしいです...!)

基本的なプロセスをまとめますと、

①オブジェクトの抽出とスコープ定義
・ドメイン(ユーザーの活動領域)と、ユーザーのメンタルモデル(ユーザーが業務の中で意識している概念=オブジェクト)を調べる
・業務内容の中で、ソフトウェアがサポートする対象範囲を決める(スコープ定義)
②ビューの定義と設計
・①で抽出した情報を、どのような領域/見せ方で表示するかを考える
③レイアウトとインタラクションの設計
・スクリーンサイズにあわせた構成や表現方法に整理する

個人的には、今まで僕がやってきたいわゆる「UI/UXデザイン」というのはまさにこの3つのことだ!!!!!!!とかなり衝撃をうけました。

これまで「UI/UXデザイン」という言葉を「ユーザーを中心に考えた(負荷のない、直感的に理解できる)設計にすること」くらいのアバウトな認識でしかなかったのですが、このプロセスを知ったことで自分がやっていたことが言語化され、かなり明確になりました。




オブジェクトベースなUI設計を学ぶメリット

概念とそのプロセスが明確になっているので
・業務平準化につながりそう
・コミュニケーションが取りやすい(引継ぎや今どの業務を行なっているのか把握しやすい)
・分析がしやすい(オブジェクトに問題があるのか、ビューに問題があるのか等)
・採用もしやすくなりそう(?)

が今の所メリットとしてあるかなと考えています🤔

特に現在クライアントワークをしている立場からすると、お客様からの「デザインを改善してほしい」というざっくりとした要望に対して、
オブジェクトに改善点があるのか、ビューに改善点があるのか等、これまでより分解して考えられるようになったことが個人的にはかなり大きいかなと思います。

またデザイナーとして働き始めてから、「デザインという言葉は人によって意味や捉え方が違うことが多いっぽいぞ...?」となんとなく感じていたのですが、この概念を学んだことで「ああ、今はビューの話をしているのか」など自分の中で整理できるようになってきました。



おまけ

実際にいろんな場面で試してみた訳ではないので、今後も意識しながら取組み気が付いたことがあれば改めてまとめていきたいと思っています。
あとは血肉となるように淡々と数をこなしていきたいです。

また、上野学さんの記事の他にも参考にした記事(資料)を共有しておきます。



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