ABEMA weber 勉強会 2020/12/17
---
1. @uenitty OOUI設計の実践 ABEMA weber 勉強会 2020/12/17
2. 参考書 2 • 内容はかなり省いています • 自分の解釈で再構成しています • 間違いがあったらごめんなさい • ぜひ本を読んでください！ https://www.sociomedia.co.jp/10046
3. これまでの資料 3 https://speakerdeck.com/uenitty/what-is-object-oriented-ui https://speakerdeck.com/uenitty/design-process-of-ooui
4. 今回の内容 4 • 基本の実践例 • 実践演習の応用編より1例紹介
5. 基本の実践例 5
6. タスクの断片を洗い出す 6 • アプリケーションが発想されたとき の小さな問題意識の集まり • 事前のリサーチや要求分析などに よって える オブジェクト指向UIデザイン p.64
7. 名詞を抽出する 7 • 機械的に抜き出すのではなく、 ユーザーの関心の対象となる概念は 何かを考えて抜き出す オブジェクト指向UIデザイン p.65
8. 名詞同士の関係を整理する 8 • タスクに複数の名詞が含まれる 場合は線でつないで関連を示す オブジェクト指向UIデザイン p.67
9. 名詞を汎化し、粒度を える 9 • タスクの中に出てこない名詞を 新たに立てても良い • まとめ方に決まりはない （関心領域によるため） オブジェクト指向UIデザイン p.68
10. 名詞の関係性をつなげる 10 • 同じ名詞を統合して、 ネットワーク状につなげる • アプリケーション全体を通じて 扱われるオブジェクトの構成が 見えてくる オブジェクト指向UIデザイン p.69
11. メインオブジェクトとその多重性を特定する 11 • オブジェクトの優先度を考えて、 主要なものとそうでないものに 分ける • 分け方に決まりはない （関心領域によるため） • メインオブジェクト間で多重になる 可能性があるものの側に「*」を 付けるオブジェクト指向UIデザイン p.70
12. 付随するオブジェクトをプロパティにする 12 • タスクに明示されていなくても、 必要になりそうなプロパティが あれば追加する • 関連するメインオブジェクト同士も それぞれのプロパティであると 考える オブジェクト指向UIデザイン p.71
13. タスクの動詞からアクションを見つける 13 • プロパティと同様に、必要になり そうなアクションがあれば補足する • 「確認する」などはアクションに 含めない（表示すれば済むため） • プロパティに紐づくアクションは、 メインオブジェクトに紐づけるか プロパティ名を入れたアクションを つくるとわかりやすい オブジェクト指向UIデザイン p.75
14. メインオブジェクトにビューを与える 14 • 上図は2種類のビューを機械的に用意しているが最終的に省略する場合もある （OOUI本 p.79参照）。省略の判断は後の段階でも良い • コレクションビューからシングルビューを呼び出す流れを矢印で示す オブジェクト指向UIデザイン p.79
15. ビュー間の呼び出し関係を検討する 15 • メインオブジェクト同士のつながりと多重性から参照可能性を導き出し、 ナビゲーションとしての呼び出し関係を定義する • 通常、シングルビューを参照元として、多重性がある場合はコレクション ビューが参照先に、多重性がない場合はシングルビューが参照先になる オブジェクト指向UIデザイン p.82
16. ルートナビゲーション項目を選定する 16 • メインオブジェクトの中から特に重要なものを並べる • ユーザーがアプリケーションを使う際に、最初に思い浮かべるオブジェクト を選定する • アプリケーションを「機能」ではなく「もの」が並んでいるイメージで捉える オブジェクト指向UIデザイン p.82
17. レイアウトを検討する 17 • メインオブジェクト同士の 参照関係を踏まえてレイアウト パターンを適用する • OOUIに適したレイアウトパターン の解説はOOUI本を参照のこと （スライドに書き切れないほど しっかり解説されています） オブジェクト指向UIデザイン p.92
18. ビジュアルデザインを行う 18 • 年々変化するビジュアル表現のトレンドやプラットフォームごとの標準などを 考慮しつつ、見やすくわかりやすい表現にする オブジェクト指向UIデザイン p.121
19. 実践演習の応用編より1例紹介 19
20. 実践演習の応用編とは 20 • OOUI本の後半は、手を動かしながら理解する「ワークアウト（実践演習）」 • 全18レベルのうち10~18レベルが応用編 • 著者が関わった実際の案件から、正解がひとつではない問題や 基本セオリーだけでは解決に至らない課題に対してOOUIの考え方を 応用しながら最もふさわしいデザインを検討する内容 • 今回はレベル12「保険契約の顧客管理アプリケーション」を紹介する
21. 改善前のアプリケーション 21 • 左側のナビゲーションメニューは 業務 =「やること」別の入り口の 一覧であり、タスク指向 • 逆に、メニュー項目を手がかりに 業務内容を把握すれば抜け漏れ なくタスクを洗い出せそう オブジェクト指向UIデザイン p.220
22. タスクを洗い出す 22 • 【契約照会】契約を検索する。検索結果一覧から契約詳細を見る • 【お客様情報照会】顧客を検索する。検索結果一覧から顧客詳細を見る • 【満期管理】満期が近い契約一覧。そこから契約詳細を見る • 【契約手続き】新規申込の作成画面 • 【保険料収納】保険料未納の契約一覧。そこから契約詳細を見る • 【事故対応】事故情報の一覧。そこから事故詳細を見る • 【お客様情報管理】顧客を検索する。検索結果一覧から顧客編集画面を開く • 【申込管理】未承認の申込の一覧。そこから申込詳細を見る
23. タスクを洗い出す 23 • 【契約照会】契約を検索する。検索結果一覧から契約詳細を見る • 【お客様情報照会】顧客を検索する。検索結果一覧から顧客詳細を見る • 【満期管理】満期が近い契約一覧。そこから契約詳細を見る • 【契約手続き】新規申込の作成画面 • 【保険料収納】保険料未納の契約一覧。そこから契約詳細を見る • 【事故対応】事故情報の一覧。そこから事故詳細を見る • 【お客様情報管理】顧客を検索する。検索結果一覧から顧客編集画面を開く • 【申込管理】未承認の申込の一覧。そこから申込詳細を見る
24. オブジェクトを抽出する 24 • 洗い出した業務内容から、「契約」というオブジェクトが最も多くの業務に 関わっていることがわかる • 契約オブジェクトのコレクションビュー（一覧表示）をアプリケーションの 中心的な画面にすると利便性が高くなりそう オブジェクト指向UIデザイン p.222
25. オブジェクトを抽出する 25 • 洗い出した業務内容から、「契約」というオブジェクトが最も多くの業務に 関わっていることがわかる • 契約オブジェクトのコレクションビュー（一覧表示）をアプリケーションの 中心的な画面にすると利便性が高くなりそう • 単純なオブジェクト一覧では汎用的すぎないか、各業務に十分適合できるか 注意する オブジェクト指向UIデザイン p.222
26. OOUIにおける「タスクへの適合」 26 • 今回の元のUIでは「契約」関連の3つの業務ごとにそれぞれ異なる画面が 用意されていた = 利用文脈に応じた適切な表示がなされていた • 同じオブジェクトに対して異なる複数の要求がある場合、OOUIではタスクに 応じてコレクションビューの表示（レイアウトパターン）を切り替えられる ようにする （タスク別の入り口を設けたりしない！）
27. OOUIにおける「タスクへの適合」 27 • 今回の元のUIでは「契約」関連の3つの業務ごとにそれぞれ異なる画面が 用意されていた = 利用文脈に応じた適切な表示がなされていた • 同じオブジェクトに対して異なる複数の要求がある場合、OOUIではタスクに 応じてコレクションビューの表示（レイアウトパターン）を切り替えられる ようにする （タスク別の入り口を設けたりしない！） • 今回はタスクの文中にフィルタリング属性として要求が表れていた → フィルタリング属性を「プリセット」化して利用文脈に適合する
28. フィルタリング属性で利用文脈を反映する 28 • 【契約照会】契約を検索する。検索結果一覧から契約詳細を見る • 【お客様情報照会】顧客を検索する。検索結果一覧から顧客詳細を見る • 【満期管理】満期が近い契約一覧。そこから契約詳細を見る • 【契約手続き】新規申込の作成画面 • 【保険料収納】保険料未納の契約一覧。そこから契約詳細を見る • 【事故対応】事故情報の一覧。そこから事故詳細を見る • 【お客様情報管理】顧客を検索する。検索結果一覧から顧客編集画面を開く • 【申込管理】未承認の申込の一覧。そこから申込詳細を見る
29. ビューとナビゲーションを検討する 29 • フィルタリング属性のほか、利用文脈に応じた抽出条件やソート順、 メタデータ表示なども考慮してプリセットを用意する オブジェクト指向UIデザイン p.224
30. レイアウトパターンを適用する 30 • 業務に最適化された詳細検索の 設定をプリセットとして オブジェクトに見立てて サイドバーに配置 • 満期日や対応状況、アクション などのメタデータの表示設定も プリセットに含む オブジェクト指向UIデザイン p.225
31. まとめ 31
32. OOUI設計の実践 32 • オブジェクト抽出は、機械的に抜き出すのではなく、ユーザーの関心の対象 となる概念は何かを考えて抜き出す • アプリケーションを「機能」ではなく「もの」が並んでいるイメージで捉える • OOUIはレイアウトパターンの切り替えで特定のタスクへ適合できる • レイアウトパターンの解説や実践演習の内容はほとんど省きましたが、 重要なことがたくさん書かれているのでぜひOOUI本を読んでください！
33. OOUI本を読んだ感想 33 • OOUI、パワフルすぎた • 自由度が高く複雑なバーチャル世界に「存在」という秩序を与えただけで 「作り手良し・使い手良し・事業良し」が実現するとは • AppleはOOUIを実践して財を成したといっても過言ではないと思った • OOUIはオブジェクト指向哲学への入り口だった • 取っ掛かりにくいはずの哲学の世界を視覚的に体感できた気がした • OOUIのものづくり観に職種という枠はなかった • OOUIは職種の枠を超えてすべての作り手が持つべき「教養」だと思った
uenitty
h1kita
rilmayer
smt7174
revcomm_inc
kenchan
naohachi89
oldbigbuddha
poteboy
onlinesalon
coconala_engineer
murachiakira
fedepaol
ammeep
panda_program
aleyda
smashingmag
jlugia
bermonpainter
robhawkes
bryan
shpigford
tmm1
csswizardry
jnunemaker