人とモノ、その接点にあるインターフェイスの関係性を再確認しつつ、デジタルな機器を操作している時にユーザーの頭の中がどうなっているかを明らかにします。 そこから得られる情報を元に、より良いUIとは何か？UXがどのようにUIとつながっていくのか？のお話 ▼内容の紹介と一部補足を追加したブログ記事 http://yorittty.tumblr.com/post/102952638262

1. http://www © .flickr.com/photos/moritzaust/8739280990
UI/UXなUXのお話
2014.10.18 Frontrend in Kanazawa
DMM.com Labo 源 賢司

2. t
自己紹介
源 賢司
1981年 / 石川県出身
!
DMM.com Labo
UXデザイナー
!
HCD-Net認定
人間中心設計専門家

3. UI / UX

4. UI / UX
↓
UI ＝ UX
誤解されがち・・・

5. UI / UX
↓
UID ∈ UXD

6. １ ユーザーの「気付き」の元
２ UIをデザインしない
３ UXDからUIDへ

7. http://www © .flickr.com/photos/moritzaust/8739280990
ユーザーの気付きの元

8. ユーザーの気付きの元
デジタルデバイスのUIでは
ユーザーが受け取る刺激の ほとんどが視覚情報
© http://www.flickr.com/photos/ivyfield/4731067716

9. ユーザーの気付きの元
刺激
→知覚（感覚記憶）
!
───────ここから認知情報処理────────
!
→短期記憶（情報の処理）
→長期記憶（知識化、経験化）
→理解
→思考
!
───────ここまで認知情報処理────────

10. ユーザーの気付きの元
刺激
→知覚（感覚記憶）
!
───────ここから認知情報処理────────
!
→短期記憶（情報の処理）
→長期記憶（知識化、経験化）
→理解
→思考
!
───────ここまで認知情報処理────────

11. ユーザーの気付きの元
刺激
→知覚（感覚記憶）
!
───────ここから認知情報処理────────
!
→短期記憶（情報の処理）
→長期記憶（知識化、経験化）
→理解
→思考
!
───────ここまで認知情報処理────────

12. ユーザーの気付きの元

13. ユーザーの気付きの元
左カラム？

14. ユーザーの気付きの元
おそらく皆さんが認知できていた箇所

15. ユーザーの気付きの元
視覚情報を受け取っていたが
認知していなかった箇所

16. ユーザーの気付きの元
シグニファイア

17. ユーザーの気付きの元

18. ユーザーの気付きの元
枠？ チェックボックス？ ボタン？

19. ユーザーの気付きの元
浮いている？ 押せそう？

20. ユーザーの気付きの元
影がつくと「浮いている！ 押せそう！」
アフォーダンス？

21. ユーザーの気付きの元
アフォーダンス？

22. ユーザーの気付きの元
押せる
ただの枠
チェックできる
スライドできる
裏に何かある？
（シール）
立体的な箱
アフォーダンス
アフォーダンス
アフォーダンス
アフォーダンス
アフォーダンス
アフォーダンス

23. ユーザーの気付きの元
押せる
ただの枠
チェックできる
スライドできる
裏に何かある？
（シール）
立体的な箱
シグニファイア

24. ユーザーの気付きの元
押せる
ただの枠
チェックできる
スライドできる
裏に何かある？
（シール）
立体的な箱
シグニファイア

25. ユーザーの気付きの元
押せる
ただの枠
チェックできる
スライドできる
裏に何かある？
（シール）
立体的な箱
シグニファイア

26. ユーザーの気付きの元
制作者が意図しているように
ユーザーに認知してもらえるようにするため
http://www.fl © ickr.com/photos/pistigriloxp/15253013980

27. ユーザーの気付きの元
メンタルモデル

28. ユーザーの気付きの元
日本人：酸っぱそう！
日本文化を知らない人：甘い？辛い？
https://www © .flickr.com/photos/nozatomo/6723761881/

29. ユーザーの気付きの元
©http://ufsquimicos.com/
日本人：なにこれ？
トルコ人：酸っぱそう！

30. ユーザーの気付きの元
極端に記号化された情報でも
ある要素にフォーカスしたユーザー層ならば・・・

31. http://www.fl © ickr.com/photos/dahlstroms/6750733205
UIをデザインしない

32. UIをデザインしない
必要・欲求
ユーザー
まず必ず必要や欲求があって、人は道具を利用する。
「電話をかける」「電話をかけるボタンを押す」が目的で電話をかける人はいない。
普通は「誰かに伝える必要がある」「あの人と話したい」があって利用する。

33. UIをデザインしない
機能
道具
自身の体だけでは叶えることができない必要や欲求を、その機能を持った道具を利用して
叶える。
「遠くの人と話す」機能を持った道具を使うことによって、必要や欲求を満たす。

34. UIをデザインしない
必要・欲求
ユーザー
機能
道具
やりたいこと
可能にする
やるべき操作
それぞれの関係性は、このようになっている。
ユーザーが「やりたいこと」と「やらなければならないこと」は別。

35. 懇親会の様子を
写真を添えて
アップしよう。
UIをデザインしない
例：Facebookで投稿したい

36. 懇親会の様子を
写真を添えて
アップしよう。
UIをデザインしない
例：Facebookで投稿したい
facebookアプリを開く。ページ上部の「近況」をタップして懇親会の様子を文字で入力。
カメラアイコンをタップすると、カメラロールの写真一覧が表示されるので、その中から
あらかじめ撮ってあった写真を選択。現在位置アイコンをタップしてリストされた位置情
報の中から、自分がいる店名を探して選択する。表示されている情報に問題がなければ、
「投稿する」を押して情報のアップを完了した。

37. 懇親会の様子を
写真を添えて
アップしよう。
UIをデザインしない
例：Facebookで投稿したい
facebookアプリを開く。ページ上部の「近況」をタップして懇親会の様子を文字で入力。
カメラアイコンをタップすると、カメラロールの写真一覧が表示されるので、その中から
あらかじめ撮ってあった写真を選択。現在位置アイコンをタップしてリストされた位置情
報の中から、自分がいる店名を探して選択する。表示されている情報に問題がなければ、
「投稿する」を押して情報のアップを完了した。

38. UIをデザインしない
・ユーザーのやるべきこと ＝ UIの操作
・ユーザーの頭の中 ≠ UIの操作
・ユーザーの頭の中 ＝ やりたいこと

39. UIをデザインしない
開発者は道具の機能や中身を知ってしまっているため
UIの操作（利用手順）を中心に デザインしがち
https://www © .flickr.com/photos/way2go/3489966856/

40. UIをデザインしない
本来重要なのは
「ユーザーの頭の中」を中心に デザインすること

41. UIをデザインしない
ユーザーの頭の中（やりたいこと）を考慮することで
利用時のそのユーザーの 価値判断に沿ったフローとなる
https://www © .flickr.com/photos/kenstein/1492214304/

42. https://www © .flickr.com/photos/ericajoy/3514023697/
UXDからUIDへ

43. UXDからUIDへ
UI / UX
↓
UID ∈ UXD

44. UXDからUIDへ
UXデザインの際の情報を元に UIデザインをすること
UXD
UID

45. UXDからUIDへ
どんな属性を持つ人がどのような状態で、どのような経緯
を経て、何の目的を満たすためにその道具を利用するのか

46. UXDからUIDへ
特にフラットデザインでは、どの情報を残し
どのように簡略化すれば対象ユーザーに伝わるか、が鍵
https://www © .flickr.com/photos/117319679@N03/14989149729

47. UXDからUIDへ
想定したユーザーの調査から適切なUXを設計し
その効果を十分に発揮するUIで、ユーザーを正しく導く
©https://www.flickr.com/photos/9242564@N07/4929302647/

48. UXDからUIDへ
人間と道具の関係性がそう簡単に変わらない以上
こういった手法は普遍的なアプローチと考えられる
http://www © .flickr.com/photos/intelfreepress/8047838494

49. UXDからUIDへ
UIとUXがどのように関係しているのか、一部だけのお話
UXの細かい話はできませんでしたので
興味がある方は是非、UXの知識も深めていって下さい

50. thank you
2014.10.18 Frontrend in Kanazawa
DMM.com Labo 源 賢司