OOUIを知る

オブジェクト指向UIデザインとは何か

Transcript

1. OOUIを知る オブジェクト指向ユーザインタフェースとは
2. 自己紹介 名前 shintaro (@shin_k_2281) 年齢 23歳 職業 SES企業でPOSレジ開発(C#) 学習 React/Next.js/GraphQL/firebase ... 都内のフロントエンジニア転職を目指して奮闘中 🔥
3. こんな本を読みました📕 【オブジェクト指向UIデザイン】 ・技術評論社出版 ・WEB＋DB PRESS plusシリーズ ・2020/6/18 初版発行 ・(他)「WEBを支える技術」 ・PF作りに役立つと思い購入 ・使いやすいデザインを学べた😌
4. 目次 1. オブジェクト指向UIとは何か 2. タスク指向UIとの比較 3. OOUIの設計 4. OOUIの実践
5. オブジェクト指向UIとは何か🤔
6. オブジェクト指向UIとは OOUIはObject Oriented User Interfaceの略。 UIデザインに関してもオブジェクト指向の 設計を取り入れようという考え。 オブジェクトを手がかりに操作設計されたデザインは OOUIだと言える。 OOUIは、一般的にUIよりもUXの観点で デザインのクオリティに寄与するもの。 (だと思っている)
7. オブジェクトとは OOUIにおいて語られるオブジェクトとは、 アプリケーションが扱う情報オブジェクトのことであり ユーザが操作をする際の対象物のうち、大きいまとまりの部分のこと。 ex) →Instagramなら投稿、ストーリー、コメントなど →Githubならリポジトリ、ユーザー、Organizationなど(たくさんありそう)
8. タスク指向UIとの比較🧐
9. タスク指向UIとは オブジェクト指向UIはオブジェクトをもとにUIを 構築するのに対し、タスク指向UIでは その名の通りタスク（やること）をもとにUIが表される。 ユーザの要求事項を最初に定義して、 そのタスクをUI設計時にをそのまま適用した場合などで 多くのパターンではUXの低下を招く。 アンチパターン󰢃
10. 比較してみる
11. オブジェクト指向UI タスク指向UI UI UI タスク オブジェクト
12. OOUIの設計🏠
13. OOUI設計の３大要素 ・モデル モデルレイヤーではユーザの関心対象となるオブジェクトを定義する。 このモデリング時はターゲットとなるユーザのドメインについてしっかり把握する必要がある。 ・インタラクション モデルレイヤーで定義したオブジェクト同士の関係性を定義する、画面遷移図のようなイメージ。 一つのオブジェクトは複数の画面を持つ場合がある (シングルビュー “/user/[id]”, コレクションビュー “/users” など) ・プレゼンテーション モデリングしたオブジェクトとインタラクション設計に沿って実際の画面を考える。
14. OOUIの実践󰝊
15. 勤怠管理アプリ
16. 申請機能 󰢃 トップ 申請機能トップ 新規申請 過去申請検索 A B
17. A B
18. お分かりいただけ ただろうか... 👻
19. しっかりとレビューを行わず、 ユーザの要件定義をそのままUIに 落とし込んでしまった者達の 結末とでも言うのだろうか... →これがタスク指向UI