OOUI
オブジェクト指向ユーザーインターフェース
OOUIという単語自体は1980年初頭の言葉
Smalltalkの時期かな?mrsekut.icon
対義語はタスク指向UI
モードレスである
OOUIの原則
まずOOUIとタスク指向UIの対比を見るのがわかりやすいかもしれないmrsekut.icon
OOUIは、タスク指向UIと対比して説明されるが、そこの線引きが自分の中で明確になっていないと、「両者がどう違うのかそもそもわからん」になる
だから、対比しているものを最初に見て概観を掴むと良い気がする
OOUIの根底にある思想
OOUIの根本に対する疑問もこのページに書いてるmrsekut.icon
#WIP
https://www.sociomedia.co.jp/7279
https://atochotto.com/2119
https://atochotto.com/1856
OOUI設計の流れ
OOUIの3つのレイヤー
OOUIって割と前提に、「マウス操作」がある気がする
vimiumみたいな操作性があればOOUIでもキーボード操作できる
「ユーザーのできること」を一覧して作った後に、オブジェクトベースで整理し直す感じだろうか?
これって、DDDの設計とかなり親和性高くなるんじゃないか?
似て非なるものなら逆にダルいかもしれないmrsekut.icon
ValueObjectに着目して、その後にその操作を定義していく感じ
/mrsekut-book-4297113511/144 (3-6 タスクをどう扱うか)
タスクは頻繁に変わりがち
粒度が異なる
使うにつれてタスクの量が増える
だから、タスクを中心に考えると変更が多くなってしまう
オブジェクトとは「目当て」のこと
「目当て」のものをどう表すか
例えば「本」とか
その場合、ユーザーに「本」の存在を見せることが表現上の中心的な活動になる
関心の対象の「本」がそのまま画面の中にあるように表す
それは現実世界がオブジェクト指向だから #??
システムはユーザー側に属している
IAともすごく関連が強そう
道具の役割をユーザー自身が発見し、妥当性を感じなら組み立てることができる
ユーザーが自分なりの方法で目的に向かっていける
行動の可能性の解放
タスク指向UIをOOUIに変えると改善できる
操作効率、学習効率、業務効率、UI拡張性
画面数も5~20分の1に減る
同じ目的の達成のための操作手順も減る
設計はシンプルになり、工数はヘリ、保守性も向上する
ほんまかいなーmrsekut.icon
オブジェクト
アプリケーションが扱う情報オブジェクトのこと
ユーザーが操作するときの対象物のこと
微妙に関係ないけど、
「良いデザイン」としてよく持ち出されるapple製品のUIだけども、
デスクトップの左上のメニューとかは情報なき合意ではないのか?
「ファイル」「編集」「表示」「履歴」とか並べられても、目的のものがどこにあるのかわからないことが多々あるmrsekut.icon
これはタスク指向UIではないのか #??
どう考えるんだろうか #??
『オブジェクト指向UIデザイン』.icon 2章
アプリケーションの要望を列挙
だいたいタスクの列挙になる
そのタスクをオブジェクトごとに分類する
CLIのコマンドもOOUIっぽくできないのか #??
それでわかりやすくなるのかどうか知らんけど
タスク指向CLIを、UIに変換するならば、
無数にあるコマンドを画面に一覧表示して、「はい、この中から今必要なやつを選んで使ってください」と言っている感じかmrsekut.icon
https://gyazo.com/ecaca96a230fa657656855d430767408
#??
投稿時に「アイテム」を添付できるサービスを考える
アイテムの指定の方法には種類があって、
自分で写真を撮って登録する
ポーチに入っているものから選ぶ
API経由で楽天やamazonなどから検索する
この場合、入り口としてこの3つを提示して中で個々の操作をやるか、
なにか別の方法があるのか
なにが「オブジェクト」なのか?
恐らくアイテム
だとして、どうすればいいのかわからない
アイテムを一覧にして表示することはできない
同じオブジェクトの中に分類がある場合に、どういう入口を設定するのか?
というか、これは既にOOUIになっているのか?
どうしてもタスク指向UIになってしまう
『オブジェクト指向UIデザイン』.icon p.30
ページの上部に「検索バー」があるのはタスク指向UIではないのか?
「検索する」というタスクが表出している感じ
参考
『オブジェクト指向UIデザイン』
https://www.cresco.co.jp/blog/entry/10582/
https://goodpatch.com/blog/uidesigner-skill-ooui-structure/
https://goodpatch.com/blog/ooui-workshop/
https://qiita.com/hara_taku_/items/3b7c583592a11935a8a8
https://note.com/usagimaruma/n/nee69529402f6
https://zenn.dev/yu/articles/17d0219202e95a6f5291
https://ekrits.jp/2020/10/3914/
https://modelessdesign.com/backdrop/544
https://ekrits.jp/2015/04/1607/
https://modelessdesign.com/backdrop/335
https://zenn.dev/kazuhiro/articles/56af0c6d6621c7
https://speakerdeck.com/uenitty/terrifying-nonfiction-of-modal
https://note.com/nikonote/n/nc28fd9ac675b
モードレスデザイン
https://www.adobe.com/jp/max/2021/sessions/the-fundamentals-of-software-design-that-unleashes-mb151.html