OOUI設計の実践 / Practice of OOUI Design

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は職種の枠を超えてすべての作り手が持つべき「教養」だと思った

Transcript

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͸৬छͷ࿮Λ௒͑ͯ͢΂ͯͷ࡞Γख͕࣋ͭ΂͖ʮڭཆʯͩͱࢥͬͨ