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
54
OOUIを知る
オブジェクト指向UIデザインとは何か
shintaro
May 24, 2021
Tweet
Share
More Decks by shintaro
See All by shintaro
Wantedly の Dropdown UI カイゼンの道(調査・設計編)
shin_k_2281
2
190
エンジニアのためのFigma
shin_k_2281
0
34
知った気になれるUX心理学用語
shin_k_2281
0
50
Other Decks in Design
See All in Design
0→1でデザイナーは何とむきあうのか? / 0→1 Meetup 〜多様な0→1フェーズにおけるデザイナーの働き方〜 / Yasuhiro Yokota
yasuhiroyokota
1
360
プロジェクトを成功に導く、デザイナーの仕事
akaneyoshikawa
1
290
MiKS inc. Company PR en_202404
zakkerooni
1
770
accfes2024_torque_yamasaki
yuuyamasakiyuu
2
710
Speed Design
sergeychernyshev
9
270
Baby Bear Genius
yvonnehsuanho
PRO
0
600
顧客体験を作るデザイナーが 意思決定速度を上げるために使うAI
cremacrema
3
760
みてね デザイン組織の変遷とデザインマネージャーの振り返り
naoyawatanabe
3
870
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
4.3k
みんなでブラッシュアップするDesign Sprint_BASE BANKチームの場合
base
PRO
3
330
情報サービスユニット UXUIチーム紹介/btobuxui
nikkei_engineer_recruiting
1
130
Designing UIs without a UI designer
strongeron
0
240
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
332
56k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
Become a Pro
speakerdeck
PRO
15
4.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
Adopting Sorbet at Scale
ufuk
71
8.8k
Optimising Largest Contentful Paint
csswizardry
18
2.6k
The Pragmatic Product Professional
lauravandoore
29
6.1k
Building Applications with DynamoDB
mza
89
5.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
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