“わかりやすい”と“つかいやすい”その前から始まるUIデザイン

Transcript

1. 2022/10/22
   その前から始まるUIデザイン
   “わかりやすい”と“つかいやすい”
   

   View Slide

2. 五ヶ市 壮央
   Goodpatch Anywhere Design Manager
   Goodpatch Anywhere マネージャー。 ソニーデジタルネットワークアプ
   リケーションズ株式会社にてUXのキャリアをスタート。UXリードとして
   リモートワークファシリテーションやクオリティマネジメントを担当。組
   織アイデンティティの策定支援やプロダクト開発体制構築支援、UI/UX学
   習支援など組織支援業務に従事。
   ©︎2020 Goodpatch Inc.
   

   View Slide

3. ©︎2020 Goodpatch Inc.
   サービスデザインにご興味のあるみなさまとご一緒できてうれしいです！
   

   View Slide

4. User Centerd Design
   
   Human Centerd Design
   2022年現在この考え方が当然と言われる時代になっている
   本日最初にお話があったとおり
   

   View Slide

5. User Experience
   誰しもが大事にするようになった
   < 提唱者のワイもうれしい
   

   View Slide

6. わかりやすい
   
   つかいやすい
   デジタルプロダクトの正義として
   
   「ユーザビリティ」は当然の存在となっている
   

   View Slide

7. でもユーザーを中心に据えて
   
   わかりやすさ、使いやすさを追いかけても
   
   よいプロダクト/サービスにならないことがあります
   

   View Slide

8. 今日は「まずは成立させるところから」という話をします
   

   View Slide

9. UIデザインって何？
   何を、どう操作すると、どうなるか。
   
   それがソフトウェアの設計としても、人間が受け取る意味としても
   
   両者が一貫性を持って成立するよう「規律」をUIを設計することが
   
   UIデザインです。
   

   View Slide

10. UIの設計対象
    UIを設計するというのは仕様を
    定義し、成り立たせることです。
    UIのコントロールに対し、発行
    されるコマンド、その結果実行
    される機能とUIを通したユー
    ザーへのフィードバックを定義
    していくことになります。
    

    View Slide

11. 情報 操作 挙動 結果
    ・文言
    
    ・ビジュアル
    
    ・音声
    ・文言
    
    ・ビジュアル
    
    ・音声
    
    など実行結果
    ・実行される機能
    
    ・扱われるコンテンツ
    ・コントロール
    
    
    ・コマンド
    
    
    ・アクション
    人の行動、押すとかフリックとか
    ボタンとかスライダーとか
    タップとかダブルクリックとか
    UIデザインには仕様の一貫性が必要
    

    View Slide

12. View Slide

13. それは「わかる」ようにするため
    なんで一貫性が必要なの？
    

    View Slide

14. わかるって何？
    

    View Slide

15. 命題的知識
    手がかり情報
    

    View Slide

16. ÃÂÀםולש
    この文字はどんな意味でしょう？
    

    View Slide

17. ÃÂÀםולש
    ヘブライ語で「Hello」
    

    View Slide

18. View Slide

19. このように「A=Bである」という知識を
    
    命題的知識という
    

    View Slide

20. 右を上げて左を下げて
    

    View Slide

21. 右を上げて左を下げて
    

    View Slide

22. 命題的知識だけではなく
    
    文脈が「わかる」をフォローする
    

    View Slide

23. ÃÂÀםולש
    Hello
    Fine
    Apple
    もし意味が複数あったら...
    

    View Slide

24. その手順はとても簡単である。はじめに，ものをいくつかの山に分ける。もちろんそ
    の全体量によっては，一山でもよい。次のステップに必要な設備がないためどこか他
    の場所へ移動する場合を除いては，準備完了である。一度にたくさんしすぎないこと
    が肝心である。多すぎるより，少なすぎる方がましだ。すぐにはこのことの大切さが
    わからないかもしれないが，めんどうなことになりかねない。そうしなければ，高く
    つくことにもなる。最初はこうした手順は複雑に思えるだろう。でも，それはすぐに
    生活の一部になってしまう。近い将来，この作業の必要性がなくなると予言できる人
    はいないだろう。その手順が終わったら，再び材料をいくつかの山に分ける。そし
    て，それぞれ適切な場所に置く。それらはもう一度使用され，またこのすべてのサイ
    クルが繰り返される。ともあれ，それは生活の一部である。
    

    View Slide

25. わかるためには一貫性が必要
    
    わかるような文脈のフォローも必要
    

    View Slide

26. View Slide

27. 言語との一貫性が無い
    命題的知識 = 英語がわからない
    

    View Slide

28. わかりやすく、使いやすくするために
    
    ホスピタリティを高めよう！
    

    View Slide

29. コーヒーメーカーは極端な例ですが…
    
    ユーザーのためを思うばかり
    
    個々のユーザーへの個別対応を増やし
    
    結果として複雑なデザインになった経験はありませんか？
    

    View Slide

30. 意味の設計をして
    
    一貫性を保ちやすい情報構造にすると
    
    はじめてわかりやすくなる
    
    
    わからないと使いやすくはならないし
    
    絶対に愛されることはない
    
    (だってわからないと使えないもん)
    

    View Slide

31. 情報 操作 挙動 結果
    ・文言
    
    ・ビジュアル
    
    ・音声
    ・文言
    
    ・ビジュアル
    
    ・音声
    
    など実行結果
    ・実行される機能
    
    ・扱われるコンテンツ
    ・コントロール
    
    
    ・コマンド
    
    
    ・アクション
    人の行動、押すとかフリックとか
    ボタンとかスライダーとか
    タップとかダブルクリックとか
    UIデザインには仕様の一貫性が必要
    

    View Slide

32. すべてに一貫性をもたせる
    一貫性が無いとシステムとして成り立たないしユーザーも学べない。
    表現でシンプルにするのは夢。構造そのものがシンプルだからUIもシンプル。
    ユースケースベースの個別対応からはじめるUI設計は確実に破綻する。
    意味やルールを減らす
    わかりやすい・使いやすいはルールが成立したあと
    

    View Slide

33. View Slide

34. UIデザインって何？
    何を、どう操作すると、どうなるか。
    
    それがソフトウェアの設計としても、人間が受け取る意味としても
    
    両者が一貫性を持って成立するよう「規律」をUIを設計することが
    
    UIデザインです。
    

    View Slide

35. 今日話したことの半分以上は
    
    「デザインの前」にやるべきことであり
    
    企画したり運営したりする人のお仕事だったりする
    このあとみんなでいっぱい話しましょう、まってるね
    なのでデザイナーでもデザイナーじゃなくても
    
    ユーザー体験を作る責任者なのです
    

    View Slide

36. Thanks and Floow-me
    ©︎2022 Goodpatch Inc.
    

    View Slide

37. 余談: デザインって難しいね
    

    View Slide