Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Takehisa Gokaichi
December 16, 2022

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

Takehisa Gokaichi

December 16, 2022
Tweet

More Decks by Takehisa Gokaichi

Other Decks in Design

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