Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
“わかりやすい”と“つかいやすい”その前から始まるUIデザイン
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Takehisa Gokaichi
December 16, 2022
Design
1.2k
2
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
“わかりやすい”と“つかいやすい”その前から始まるUIデザイン
Takehisa Gokaichi
December 16, 2022
More Decks by Takehisa Gokaichi
See All by Takehisa Gokaichi
Flow, Not Stock 知識触媒としてのIA
5kaichi
1
450
デザインプロジェクト初期の不安定な時期をどうやって突破するか / How to Breakthrough early phases of design project
5kaichi
1
5.1k
ハードウェアスタートアップのプロトタイプを用いた価値検証 /smartLure problem solution fit
5kaichi
0
380
Other Decks in Design
See All in Design
人工知能のための哲学塾 ニューロフィロソフィ篇 第参夜「河合隼雄と中空構造」
miyayou
0
100
Claudeもくもく会、はじめませんか?
yusukeiyoda
0
250
【2026】ポートフォリオ_大坪明日香
tsubo52
0
120
Agentic Design Workflowを育てる 「三層デザインハーネス」の現在地
sayadesign2
0
720
noteらしさを織り込むハーネスエンジニアリング
uto
0
2.1k
分散するデザイン組織をつなぐ デザインミートアップの取り組み/nikkei-tech-talk49
nikkei_engineer_recruiting
1
320
デザイン組織の"次の"強みづくり
isaikaori
2
310
組織で働く大人が「知らないままにやってみる」を取り戻す方法とその意味〜企業で働く実務家による実践知の言語化を事例とした考察〜
chiemitaki
1
480
Where Imagination Ends AI Begins
r5ni4
0
460
PLATEAUで白い街を作る
aikautau
0
210
デザなに#1「問いのデザイン」の紹介LT
garyuten
0
140
日経電子版を支えていく Kasane Design System
taitotnk
0
410
Featured
See All Featured
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
480
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.9k
Claude Code のすすめ
schroneko
67
230k
AI: The stuff that nobody shows you
jnunemaker
PRO
10
1.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.6k
Agile that works and the tools we love
rasmusluckow
331
22k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
300
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
1
450
Darren the Foodie - Storyboard
khoart
PRO
4
4k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
210
Understanding Cognitive Biases in Performance Measurement
bluesmoon
32
3k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
690
Transcript
2022/10/22 その前から始まるUIデザイン “わかりやすい”と“つかいやすい”
五ヶ市 壮央 Goodpatch Anywhere Design Manager Goodpatch Anywhere マネージャー。 ソニーデジタルネットワークアプ
リケーションズ株式会社にてUXのキャリアをスタート。UXリードとして リモートワークファシリテーションやクオリティマネジメントを担当。組 織アイデンティティの策定支援やプロダクト開発体制構築支援、UI/UX学 習支援など組織支援業務に従事。 ©︎2020 Goodpatch Inc.
©︎2020 Goodpatch Inc. サービスデザインにご興味のあるみなさまとご一緒できてうれしいです!
User Centerd Design Human Centerd Design 2022年現在この考え方が当然と言われる時代になっている 本日最初にお話があったとおり
User Experience 誰しもが大事にするようになった < 提唱者のワイもうれしい
わかりやすい つかいやすい デジタルプロダクトの正義として 「ユーザビリティ」は当然の存在となっている
でもユーザーを中心に据えて わかりやすさ、使いやすさを追いかけても よいプロダクト/サービスにならないことがあります
今日は「まずは成立させるところから」という話をします
UIデザインって何? 何を、どう操作すると、どうなるか。 それがソフトウェアの設計としても、人間が受け取る意味としても 両者が一貫性を持って成立するよう「規律」をUIを設計することが UIデザインです。
UIの設計対象 UIを設計するというのは仕様を 定義し、成り立たせることです。 UIのコントロールに対し、発行 されるコマンド、その結果実行 される機能とUIを通したユー ザーへのフィードバックを定義 していくことになります。
情報 操作 挙動 結果 ・文言 ・ビジュアル ・音声 ・文言 ・ビジュアル ・音声
など実行結果 ・実行される機能 ・扱われるコンテンツ ・コントロール ・コマンド ・アクション 人の行動、押すとかフリックとか ボタンとかスライダーとか タップとかダブルクリックとか UIデザインには仕様の一貫性が必要
None
それは「わかる」ようにするため なんで一貫性が必要なの?
わかるって何?
命題的知識 手がかり情報
ÃÂÀםולש この文字はどんな意味でしょう?
ÃÂÀםולש ヘブライ語で「Hello」
None
このように「A=Bである」という知識を 命題的知識という
右を上げて左を下げて
右を上げて左を下げて
命題的知識だけではなく 文脈が「わかる」をフォローする
ÃÂÀםולש Hello Fine Apple もし意味が複数あったら...
その手順はとても簡単である。はじめに,ものをいくつかの山に分ける。もちろんそ の全体量によっては,一山でもよい。次のステップに必要な設備がないためどこか他 の場所へ移動する場合を除いては,準備完了である。一度にたくさんしすぎないこと が肝心である。多すぎるより,少なすぎる方がましだ。すぐにはこのことの大切さが わからないかもしれないが,めんどうなことになりかねない。そうしなければ,高く つくことにもなる。最初はこうした手順は複雑に思えるだろう。でも,それはすぐに 生活の一部になってしまう。近い将来,この作業の必要性がなくなると予言できる人 はいないだろう。その手順が終わったら,再び材料をいくつかの山に分ける。そし て,それぞれ適切な場所に置く。それらはもう一度使用され,またこのすべてのサイ クルが繰り返される。ともあれ,それは生活の一部である。
わかるためには一貫性が必要 わかるような文脈のフォローも必要
None
言語との一貫性が無い 命題的知識 = 英語がわからない
わかりやすく、使いやすくするために ホスピタリティを高めよう!
コーヒーメーカーは極端な例ですが… ユーザーのためを思うばかり 個々のユーザーへの個別対応を増やし 結果として複雑なデザインになった経験はありませんか?
意味の設計をして 一貫性を保ちやすい情報構造にすると はじめてわかりやすくなる わからないと使いやすくはならないし 絶対に愛されることはない (だってわからないと使えないもん)
情報 操作 挙動 結果 ・文言 ・ビジュアル ・音声 ・文言 ・ビジュアル ・音声
など実行結果 ・実行される機能 ・扱われるコンテンツ ・コントロール ・コマンド ・アクション 人の行動、押すとかフリックとか ボタンとかスライダーとか タップとかダブルクリックとか UIデザインには仕様の一貫性が必要
すべてに一貫性をもたせる 一貫性が無いとシステムとして成り立たないしユーザーも学べない。 表現でシンプルにするのは夢。構造そのものがシンプルだからUIもシンプル。 ユースケースベースの個別対応からはじめるUI設計は確実に破綻する。 意味やルールを減らす わかりやすい・使いやすいはルールが成立したあと
None
UIデザインって何? 何を、どう操作すると、どうなるか。 それがソフトウェアの設計としても、人間が受け取る意味としても 両者が一貫性を持って成立するよう「規律」をUIを設計することが UIデザインです。
今日話したことの半分以上は 「デザインの前」にやるべきことであり 企画したり運営したりする人のお仕事だったりする このあとみんなでいっぱい話しましょう、まってるね なのでデザイナーでもデザイナーじゃなくても ユーザー体験を作る責任者なのです
Thanks and Floow-me ©︎2022 Goodpatch Inc.
余談: デザインって難しいね