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 full-size slide

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

    View full-size slide

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

    View full-size slide

  4. User Centerd Design

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

    View full-size slide

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

    View full-size slide

  6. わかりやすい

    つかいやすい
    デジタルプロダクトの正義として

    「ユーザビリティ」は当然の存在となっている

    View full-size slide

  7. でもユーザーを中心に据えて

    わかりやすさ、使いやすさを追いかけても

    よいプロダクト/サービスにならないことがあります

    View full-size slide

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

    View full-size slide

  9. UIデザインって何?
    何を、どう操作すると、どうなるか。

    それがソフトウェアの設計としても、人間が受け取る意味としても

    両者が一貫性を持って成立するよう「規律」をUIを設計することが

    UIデザインです。

    View full-size slide

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

    View full-size slide

  11. 情報 操作 挙動 結果
    ・文言

    ・ビジュアル

    ・音声
    ・文言

    ・ビジュアル

    ・音声

    など実行結果
    ・実行される機能

    ・扱われるコンテンツ
    ・コントロール


    ・コマンド


    ・アクション
    人の行動、押すとかフリックとか
    ボタンとかスライダーとか
    タップとかダブルクリックとか
    UIデザインには仕様の一貫性が必要

    View full-size slide

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

    View full-size slide

  13. わかるって何?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. このように「A=Bである」という知識を

    命題的知識という

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. 命題的知識だけではなく

    文脈が「わかる」をフォローする

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. わかるためには一貫性が必要

    わかるような文脈のフォローも必要

    View full-size slide

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

    View full-size slide

  25. わかりやすく、使いやすくするために

    ホスピタリティを高めよう!

    View full-size slide

  26. コーヒーメーカーは極端な例ですが…

    ユーザーのためを思うばかり

    個々のユーザーへの個別対応を増やし

    結果として複雑なデザインになった経験はありませんか?

    View full-size slide

  27. 意味の設計をして

    一貫性を保ちやすい情報構造にすると

    はじめてわかりやすくなる


    わからないと使いやすくはならないし

    絶対に愛されることはない

    (だってわからないと使えないもん)

    View full-size slide

  28. 情報 操作 挙動 結果
    ・文言

    ・ビジュアル

    ・音声
    ・文言

    ・ビジュアル

    ・音声

    など実行結果
    ・実行される機能

    ・扱われるコンテンツ
    ・コントロール


    ・コマンド


    ・アクション
    人の行動、押すとかフリックとか
    ボタンとかスライダーとか
    タップとかダブルクリックとか
    UIデザインには仕様の一貫性が必要

    View full-size slide

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

    View full-size slide

  30. UIデザインって何?
    何を、どう操作すると、どうなるか。

    それがソフトウェアの設計としても、人間が受け取る意味としても

    両者が一貫性を持って成立するよう「規律」をUIを設計することが

    UIデザインです。

    View full-size slide

  31. 今日話したことの半分以上は

    「デザインの前」にやるべきことであり

    企画したり運営したりする人のお仕事だったりする
    このあとみんなでいっぱい話しましょう、まってるね
    なのでデザイナーでもデザイナーじゃなくても

    ユーザー体験を作る責任者なのです

    View full-size slide

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

    View full-size slide

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

    View full-size slide