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
71
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
600
デザインエンジニアへの道
shin_k_2281
0
53
UIデザインとフロントエンド実装のレビュープラクティス集
shin_k_2281
0
250
Wantedly の Dropdown UI カイゼンの道(調査・設計編)
shin_k_2281
2
280
エンジニアのためのFigma
shin_k_2281
0
52
知った気になれるUX心理学用語
shin_k_2281
0
110
Other Decks in Design
See All in Design
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
2
420
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1.2k
数理的アプローチで挑むスマホ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
860
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
goodpatch
1
830
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
320
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
920
【Designship 2025|10.11】デザイン組織と事業貢献、その挑戦と結果。
payatsusan213
1
270
株式会社バクタム 会社説明資料
bactum
0
360
ユーザー像を「みてね」らしく可視化する 家族アルバムみてねUXリサーチチームの取り組み
mixi_design
PRO
1
220
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
techtekt
PRO
7
970
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
tame
0
270
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
6
2.8k
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Side Projects
sachag
455
43k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
RailsConf 2023
tenderlove
30
1.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Bash Introduction
62gerente
615
210k
Agile that works and the tools we love
rasmusluckow
331
21k
Why Our Code Smells
bkeepers
PRO
339
57k
Context Engineering - Making Every Token Count
addyosmani
6
240
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