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
66
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
500
デザインエンジニアへの道
shin_k_2281
0
37
UIデザインとフロントエンド実装のレビュープラクティス集
shin_k_2281
0
200
Wantedly の Dropdown UI カイゼンの道(調査・設計編)
shin_k_2281
2
260
エンジニアのためのFigma
shin_k_2281
0
48
知った気になれるUX心理学用語
shin_k_2281
0
100
Other Decks in Design
See All in Design
Crisp Code inc. ブランドガイドライン
so_kotani
1
190
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
450
PF_濵村ひろみ_202503
maru_design78
0
180
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.1k
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
370
The Golden Whitney
ohtristanart
PRO
0
540
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
450
デザイナーとPMの両ロール_3つのポイント
toy1618
1
330
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
980
ポートフォリオ_藤田歩希(ほまれ)
akifujita_homarecreate
0
620
Flow, Not Stock 知識触媒としてのIA
5kaichi
1
290
DC Style Redesign
mcduckyart
0
130
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Rails Girls Zürich Keynote
gr2m
95
14k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Making Projects Easy
brettharned
116
6.3k
Visualization
eitanlees
146
16k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Practical Orchestrator
shlominoach
189
11k
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