Submit Search
Upload
Badui
•
Download as PPTX, PDF
•
0 likes
•
669 views
Y
yah_yah
Follow
guideline for user interface
Read less
Read more
Education
Report
Share
Report
Share
1 of 20
Download now
Recommended
ユーザビリティのやり方基本
ユーザビリティのやり方基本
guest142d5
2015年のWebサイト制作界隈 その傾向と対策
2015年のWebサイト制作界隈 その傾向と対策
Yoshiki Kato
某外資系企業でデザインチームを作った話 〜デザイナーが組織の中での価値を最大化させるために〜
某外資系企業でデザインチームを作った話 〜デザイナーが組織の中での価値を最大化させるために〜
Yu Uno
UX白書サマリー資料20111015
UX白書サマリー資料20111015
hcdvalue
UXデザインの為のIA(情報アーキテクチャ)
UXデザインの為のIA(情報アーキテクチャ)
インターリンク株式会社
Gcm#3 uiデザインの品質を効率的に向上させるには?
Gcm#3 uiデザインの品質を効率的に向上させるには?
GREE/Art
UXとUXD~長期的ユーザビリティをどう作りどう測るか?
UXとUXD~長期的ユーザビリティをどう作りどう測るか?
Masaya Ando
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
Hiroki Takaba
Recommended
ユーザビリティのやり方基本
ユーザビリティのやり方基本
guest142d5
2015年のWebサイト制作界隈 その傾向と対策
2015年のWebサイト制作界隈 その傾向と対策
Yoshiki Kato
某外資系企業でデザインチームを作った話 〜デザイナーが組織の中での価値を最大化させるために〜
某外資系企業でデザインチームを作った話 〜デザイナーが組織の中での価値を最大化させるために〜
Yu Uno
UX白書サマリー資料20111015
UX白書サマリー資料20111015
hcdvalue
UXデザインの為のIA(情報アーキテクチャ)
UXデザインの為のIA(情報アーキテクチャ)
インターリンク株式会社
Gcm#3 uiデザインの品質を効率的に向上させるには?
Gcm#3 uiデザインの品質を効率的に向上させるには?
GREE/Art
UXとUXD~長期的ユーザビリティをどう作りどう測るか?
UXとUXD~長期的ユーザビリティをどう作りどう測るか?
Masaya Ando
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
Hiroki Takaba
[UX]は投げ捨てろ!
[UX]は投げ捨てろ!
c-mitsuba
ShibuyaUX - UX and Analytics
ShibuyaUX - UX and Analytics
Makoto Shimizu
ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-
Mizushima Kazuhiro
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
Konomi Kawaharada
はじめてのUXとUIの話
はじめてのUXとUIの話
Kazuki Yamashita
UIの話は会議室でするな
UIの話は会議室でするな
Shingo Katsushima
なぜUXをデザインしているのか
なぜUXをデザインしているのか
Mikihiro Fujii
おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1
Yu Morita
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
yosuke sato
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
WebSig24/7
UXの考え方とアプローチ
UXの考え方とアプローチ
Masaya Ando
UXとブランド
UXとブランド
Takehisa Gokaichi
UXはじめの一歩
UXはじめの一歩
井上 誠
UIデザインの基本
UIデザインの基本
Roy Kim
図解で学ぶ「Lean UX」
図解で学ぶ「Lean UX」
Katsuhito Okada
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザイン
Roy Kim
UXのためのUIデザイン
UXのためのUIデザイン
Hironobu Aoki
アプリUI勉強会 in ネットイヤーグループ
アプリUI勉強会 in ネットイヤーグループ
Kenichi Suzuki
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
Kazuki Yamashita
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
Yasuhisa Hasegawa
More Related Content
Viewers also liked
[UX]は投げ捨てろ!
[UX]は投げ捨てろ!
c-mitsuba
ShibuyaUX - UX and Analytics
ShibuyaUX - UX and Analytics
Makoto Shimizu
ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-
Mizushima Kazuhiro
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
Konomi Kawaharada
はじめてのUXとUIの話
はじめてのUXとUIの話
Kazuki Yamashita
UIの話は会議室でするな
UIの話は会議室でするな
Shingo Katsushima
なぜUXをデザインしているのか
なぜUXをデザインしているのか
Mikihiro Fujii
おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1
Yu Morita
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
yosuke sato
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
WebSig24/7
UXの考え方とアプローチ
UXの考え方とアプローチ
Masaya Ando
UXとブランド
UXとブランド
Takehisa Gokaichi
UXはじめの一歩
UXはじめの一歩
井上 誠
UIデザインの基本
UIデザインの基本
Roy Kim
図解で学ぶ「Lean UX」
図解で学ぶ「Lean UX」
Katsuhito Okada
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザイン
Roy Kim
UXのためのUIデザイン
UXのためのUIデザイン
Hironobu Aoki
アプリUI勉強会 in ネットイヤーグループ
アプリUI勉強会 in ネットイヤーグループ
Kenichi Suzuki
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
Kazuki Yamashita
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
Yasuhisa Hasegawa
Viewers also liked
(20)
[UX]は投げ捨てろ!
[UX]は投げ捨てろ!
ShibuyaUX - UX and Analytics
ShibuyaUX - UX and Analytics
ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
はじめてのUXとUIの話
はじめてのUXとUIの話
UIの話は会議室でするな
UIの話は会議室でするな
なぜUXをデザインしているのか
なぜUXをデザインしているのか
おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
UXの考え方とアプローチ
UXの考え方とアプローチ
UXとブランド
UXとブランド
UXはじめの一歩
UXはじめの一歩
UIデザインの基本
UIデザインの基本
図解で学ぶ「Lean UX」
図解で学ぶ「Lean UX」
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザイン
UXのためのUIデザイン
UXのためのUIデザイン
アプリUI勉強会 in ネットイヤーグループ
アプリUI勉強会 in ネットイヤーグループ
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
Badui
1.
第11章 楽しい BADUI の世界 岩崎聖夜
2.
BADUI とはなんだろう 2 GOODUI 直観的でわかりやすい BADUI 直観的にわかりにくい
3.
UI における重要な要素 3 一貫性 フィードバック 対応関係 グループ認識 慣習・習慣 手がかり 制約 メンテナンス BADUIはこれらの要素が不足している
4.
BADUIはなぜ生まれるのか 4 第1章~第10章 - UIにおける重要な要素を学んだ - BADUIはそれらの要素が不足している どのような点に気をつけてUIを設計すべきか知る 第11章 -
どのような点に気をつければ良いのか分かっている - では、なぜBADUIが生まれてしまうのか BADUIが生まれる理由を知る
5.
BADUIが生まれる理由 5 予算的な都合 納期的な都合 トップダウン の問題 ボトムアップ の問題 - BADUIが生まれる原因には 大きく分けて4つの理由がある
6.
1. 予算的な都合 6 BADUI GOODUI 現実
理想 - お金がなくて理想とするUIが実現できなかった
7.
2. 納期的な都合 7 調査 検討
開発 調査 検討 開発現実 理想 時間が足りないから 面倒で手間なことは 全部すっとばそう! - 時間がなくて理想とするUIが実現できなかった
8.
3. ボトムアップの問題 8 BADUI GOODUI フィードバック フィードバック フィードバック フィードバック フィードバック フィードバック フィードバック フィードバック -
ユーザからのリクエスト(フィードバック)を 何でもかんでも受け入れることでBADUIとなってしまう
9.
4. トップダウンの問題 9 ● 狭すぎる自転車道
● 電信柱に突っ込むの!? - 上司の現場やユーザを見ていない無茶なリクエストによって BADUIとなってしまう
10.
BADUIを生まないためには 10 ① 他の人に見てもらおう - UI
の分かりやすさ、分かりにくさを客観的に測るのは困難 - その人のフィードバックを生かす ② UI 設計のガイドラインを参考にする - UI 設計における重要な要素がまとめられている - Jakob Nielsen 『 10ヒューリスティックス 』
11.
UI 設計のガイドライン(1) 11 10ヒューリスティックス BADUIはUIの教科書 1.
システム状態の視認性 2. システムと実世界の調和 3. ユーザコントロールと自由度 4. 一貫性と標準化 5. エラーの防止 3章:フィードバック 6章:慣習とのギャップ 7章:一貫性と標準化 3章:状態・状況の可視化 10章:非常出口の重要性
12.
UI 設計のガイドライン(2) 12 10ヒューリスティックス BADUIはUIの教科書 6.
記憶していなくても 見れば分かるように 7. 柔軟性と効率性 8. 美的で最小限のデザイン 9. ユーザによるエラー認識、 診断、回復のサポート 10. ヘルプとマニュアル 10章:記憶力が試される BADUI 10章:おせっかいなBADUI 8章:制約 3章:エラーメッセージ 3章:エラーメッセージ
13.
BADUIが生まれてしまったら 13 BADUI U I 対応関係が 分かりづらくて 使いにくい 手がかりを 付け足して 解決しよう -
BADUI は DIY 的に改善することができる
14.
BADUIのDIY的改善例(1) 14 ● 何のボタンなのかよくわからない ● キャンセルシールが付け足されている
15.
BADUIのDIY的改善例(2) 15 ● センサの反応が悪いので、 水が出ないと勘違いされる ● 赤色のマークとそこまで 手を出して下さいという 案内が付け足されている -
改善の形跡はBADUIを探す手がかりにもなる!
16.
BADUIを上手く活用する 16 不便益 – 川上浩司
先生(京都大学) - 便利になったことで失われた益が あるのではないかという考えが出発点 - オートマよりもミッションの方が楽しい というのも身近な不便益なのでは あえて不便にすることで楽しみを与える
17.
BADUIを上手く活用した例(1) 17 ● 実際に取り出すことはできない ● 取り出せそうで取り出せない楽しさ
18.
BADUIを上手く活用した例(2) 18 ● 直線を含むピースが この間にはまりそう… ● 全く直線を含まない ピースがはまった! あえてパズルとしては不便にすることで 楽しみを向上させている
19.
UI に関する書籍 19 ● 誰のためのデザイン
- ドナルド・ノーマン - 20年以上前の本だが、デザインを学ぶ上で必読 ● ほんとに使えるユーザビリティ – エリック・ライス - 様々なBADUIを紹介しつつ、 WebのUIはどうあるべきか書かれた本 ● デザイニング・インタフェース - Jenifer Tidwell - ユーザインタフェースの様々なパーツについて 分解して事例をベースとして紹介してくれている本 ● 認知インタフェース - 人の認知について深く知ることができる本
20.
おわりに 20 ● UI の使いやすさは人に依存する -
人によってそれをBADUIと思うかどうかは異なる ● BADUI に出会ったら、そうなった理由を考えてみよう - 自分がUIを設計する際に生きてくる
Editor's Notes
夏休み前に学んだことなどを復習する旨を伝える →直観的にわかりにくいのはなぜか
インタフェースの使いやすさを決定する要素にはどのようなものがあったか伝える
BADUIの特徴を学ぶことで、UIを構築する際に どのようなことに気をつければ良いのかを学んだ そもそもBADUIがなぜ生まれてしまうのかということを知る
ユーザのリクエストに沿って何でもかんでも機能を追加すると、訳の分からないUIになってしまうので、上手く引き算することが大切
柔軟性と効率性 ユーザのレベルに合わせた対話方法を用意する
DIY=Do it yourself 生活環境をよくするために自らの手で作ったり、直したりすること 3スライド目参照 -> UIには決して全ての要素が必要なわけではない
改善のための説明書き自体がさらに混乱を招いている
身近なBADUIを探してみて、是非あなたならどう改善するか検討してみよう! 今後、あなたがUIを設計するとき際に何か参考になるものがあるかもしれない
BADUIを単なるBADなものとして捉えてきたが、BADUIをGOODなものとして捉えてみる
BADUIは上手く活用すれば面白い仕組みを作り出すことができる
Download now