Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
OOUIを知る
Search
shintaro
May 24, 2021
Design
2
67
OOUIを知る
オブジェクト指向UIデザインとは何か
shintaro
May 24, 2021
Tweet
Share
More Decks by shintaro
See All by shintaro
Role of frontend engineer at product growth team
shin_k_2281
0
550
デザインエンジニアへの道
shin_k_2281
0
50
UIデザインとフロントエンド実装のレビュープラクティス集
shin_k_2281
0
230
Wantedly の Dropdown UI カイゼンの道(調査・設計編)
shin_k_2281
2
270
エンジニアのためのFigma
shin_k_2281
0
51
知った気になれるUX心理学用語
shin_k_2281
0
110
Other Decks in Design
See All in Design
エンジニアでも捗る デザイナー的思考入門
tinykitten
1
1.2k
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
100
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
6
760
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
270
#Dubois Challenge 2025: Economics
ajstarks
0
160
Crisp Code inc. ブランドガイドライン
so_kotani
1
200
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
0
170
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
380
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
730
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
2.4k
minpaku-community-scrum-patterns
norinity1103
1
230
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
510
Featured
See All Featured
How to Ace a Technical Interview
jacobian
278
23k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
183
54k
GitHub's CSS Performance
jonrohan
1031
460k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Producing Creativity
orderedlist
PRO
347
40k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Designing Experiences People Love
moore
142
24k
A better future with KSS
kneath
239
17k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Visualization
eitanlees
146
16k
Transcript
OOUIを知る オブジェクト指向ユーザインタフェースとは
自己紹介 名前 shintaro (@shin_k_2281) 年齢 23歳 職業 SES企業でPOSレジ開発(C#) 学習 React/Next.js/GraphQL/firebase
... 都内のフロントエンジニア転職を目指して奮闘中 🔥
こんな本を読みました📕 【オブジェクト指向UIデザイン】 ・技術評論社出版 ・WEB+DB PRESS plusシリーズ ・2020/6/18 初版発行 ・(他)「WEBを支える技術」 ・PF作りに役立つと思い購入
・使いやすいデザインを学べた😌
目次 1. オブジェクト指向UIとは何か 2. タスク指向UIとの比較 3. OOUIの設計 4. OOUIの実践
オブジェクト指向UIとは何か🤔
オブジェクト指向UIとは OOUIはObject Oriented User Interfaceの略。 UIデザインに関してもオブジェクト指向の 設計を取り入れようという考え。 オブジェクトを手がかりに操作設計されたデザインは OOUIだと言える。 OOUIは、一般的にUIよりもUXの観点で
デザインのクオリティに寄与するもの。 (だと思っている)
オブジェクトとは OOUIにおいて語られるオブジェクトとは、 アプリケーションが扱う情報オブジェクトのことであり ユーザが操作をする際の対象物のうち、大きいまとまりの部分のこと。 ex) →Instagramなら投稿、ストーリー、コメントなど →Githubならリポジトリ、ユーザー、Organizationなど(たくさんありそう)
タスク指向UIとの比較🧐
タスク指向UIとは オブジェクト指向UIはオブジェクトをもとにUIを 構築するのに対し、タスク指向UIでは その名の通りタスク(やること)をもとにUIが表される。 ユーザの要求事項を最初に定義して、 そのタスクをUI設計時にをそのまま適用した場合などで 多くのパターンではUXの低下を招く。 アンチパターン
比較してみる
オブジェクト指向UI タスク指向UI UI UI タスク オブジェクト
OOUIの設計🏠
OOUI設計の3大要素 ・モデル モデルレイヤーではユーザの関心対象となるオブジェクトを定義する。 このモデリング時はターゲットとなるユーザのドメインについてしっかり把握する必要がある。 ・インタラクション モデルレイヤーで定義したオブジェクト同士の関係性を定義する、画面遷移図のようなイメージ。 一つのオブジェクトは複数の画面を持つ場合がある (シングルビュー “/user/[id]”, コレクションビュー
“/users” など) ・プレゼンテーション モデリングしたオブジェクトとインタラクション設計に沿って実際の画面を考える。
OOUIの実践
勤怠管理アプリ
申請機能 トップ 申請機能トップ 新規申請 過去申請検索 A B
A B
お分かりいただけ ただろうか... 👻
しっかりとレビューを行わず、 ユーザの要件定義をそのままUIに 落とし込んでしまった者達の 結末とでも言うのだろうか... →これがタスク指向UI