Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UI/UXなUXのお話

4,602 views

Published on

人とモノ、その接点にあるインターフェイスの関係性を再確認しつつ、デジタルな機器を操作している時にユーザーの頭の中がどうなっているかを明らかにします。
そこから得られる情報を元に、より良いUIとは何か?UXがどのようにUIとつながっていくのか?のお話

▼内容の紹介と一部補足を追加したブログ記事
http://yorittty.tumblr.com/post/102952638262

Published in: Design

UI/UXなUXのお話

  1. 1. http://www © .flickr.com/photos/moritzaust/8739280990 UI/UXなUXのお話 2014.10.18 Frontrend in Kanazawa DMM.com Labo 源 賢司
  2. 2. t 自己紹介 源 賢司 1981年 / 石川県出身 ! DMM.com Labo UXデザイナー ! HCD-Net認定 人間中心設計専門家
  3. 3. UI / UX
  4. 4. UI / UX ↓ UI = UX 誤解されがち・・・
  5. 5. UI / UX ↓ UID ∈ UXD
  6. 6. 1 ユーザーの「気付き」の元 2 UIをデザインしない 3 UXDからUIDへ
  7. 7. http://www © .flickr.com/photos/moritzaust/8739280990 ユーザーの気付きの元
  8. 8. ユーザーの気付きの元 デジタルデバイスのUIでは ユーザーが受け取る刺激の ほとんどが視覚情報 © http://www.flickr.com/photos/ivyfield/4731067716
  9. 9. ユーザーの気付きの元 刺激  →知覚(感覚記憶) !  ───────ここから認知情報処理──────── !   →短期記憶(情報の処理)   →長期記憶(知識化、経験化)    →理解    →思考 !  ───────ここまで認知情報処理────────
  10. 10. ユーザーの気付きの元 刺激  →知覚(感覚記憶) !  ───────ここから認知情報処理──────── !   →短期記憶(情報の処理)   →長期記憶(知識化、経験化)    →理解    →思考 !  ───────ここまで認知情報処理────────
  11. 11. ユーザーの気付きの元 刺激  →知覚(感覚記憶) !  ───────ここから認知情報処理──────── !   →短期記憶(情報の処理)   →長期記憶(知識化、経験化)    →理解    →思考 !  ───────ここまで認知情報処理────────
  12. 12. ユーザーの気付きの元
  13. 13. ユーザーの気付きの元 左カラム?
  14. 14. ユーザーの気付きの元 おそらく皆さんが認知できていた箇所
  15. 15. ユーザーの気付きの元 視覚情報を受け取っていたが 認知していなかった箇所
  16. 16. ユーザーの気付きの元 シグニファイア
  17. 17. ユーザーの気付きの元
  18. 18. ユーザーの気付きの元 枠? チェックボックス? ボタン?
  19. 19. ユーザーの気付きの元 浮いている? 押せそう?
  20. 20. ユーザーの気付きの元 影がつくと「浮いている! 押せそう!」 アフォーダンス?
  21. 21. ユーザーの気付きの元 アフォーダンス?
  22. 22. ユーザーの気付きの元 押せる ただの枠 チェックできる スライドできる 裏に何かある? (シール) 立体的な箱 アフォーダンス アフォーダンス アフォーダンス アフォーダンス アフォーダンス アフォーダンス
  23. 23. ユーザーの気付きの元 押せる ただの枠 チェックできる スライドできる 裏に何かある? (シール) 立体的な箱 シグニファイア
  24. 24. ユーザーの気付きの元 押せる ただの枠 チェックできる スライドできる 裏に何かある? (シール) 立体的な箱 シグニファイア
  25. 25. ユーザーの気付きの元 押せる ただの枠 チェックできる スライドできる 裏に何かある? (シール) 立体的な箱 シグニファイア
  26. 26. ユーザーの気付きの元 制作者が意図しているように ユーザーに認知してもらえるようにするため http://www.fl © ickr.com/photos/pistigriloxp/15253013980
  27. 27. ユーザーの気付きの元 メンタルモデル
  28. 28. ユーザーの気付きの元        日本人:酸っぱそう! 日本文化を知らない人:甘い?辛い? https://www © .flickr.com/photos/nozatomo/6723761881/
  29. 29. ユーザーの気付きの元 ©http://ufsquimicos.com/ 日本人:なにこれ? トルコ人:酸っぱそう!
  30. 30. ユーザーの気付きの元 極端に記号化された情報でも ある要素にフォーカスしたユーザー層ならば・・・
  31. 31. http://www.fl © ickr.com/photos/dahlstroms/6750733205 UIをデザインしない
  32. 32. UIをデザインしない 必要・欲求 ユーザー まず必ず必要や欲求があって、人は道具を利用する。 「電話をかける」「電話をかけるボタンを押す」が目的で電話をかける人はいない。 普通は「誰かに伝える必要がある」「あの人と話したい」があって利用する。
  33. 33. UIをデザインしない 機能 道具 自身の体だけでは叶えることができない必要や欲求を、その機能を持った道具を利用して 叶える。 「遠くの人と話す」機能を持った道具を使うことによって、必要や欲求を満たす。
  34. 34. UIをデザインしない 必要・欲求 ユーザー 機能 道具 やりたいこと 可能にする やるべき操作 それぞれの関係性は、このようになっている。 ユーザーが「やりたいこと」と「やらなければならないこと」は別。
  35. 35. 懇親会の様子を 写真を添えて アップしよう。 UIをデザインしない 例:Facebookで投稿したい
  36. 36. 懇親会の様子を 写真を添えて アップしよう。 UIをデザインしない 例:Facebookで投稿したい facebookアプリを開く。ページ上部の「近況」をタップして懇親会の様子を文字で入力。 カメラアイコンをタップすると、カメラロールの写真一覧が表示されるので、その中から あらかじめ撮ってあった写真を選択。現在位置アイコンをタップしてリストされた位置情 報の中から、自分がいる店名を探して選択する。表示されている情報に問題がなければ、 「投稿する」を押して情報のアップを完了した。
  37. 37. 懇親会の様子を 写真を添えて アップしよう。 UIをデザインしない 例:Facebookで投稿したい facebookアプリを開く。ページ上部の「近況」をタップして懇親会の様子を文字で入力。 カメラアイコンをタップすると、カメラロールの写真一覧が表示されるので、その中から あらかじめ撮ってあった写真を選択。現在位置アイコンをタップしてリストされた位置情 報の中から、自分がいる店名を探して選択する。表示されている情報に問題がなければ、 「投稿する」を押して情報のアップを完了した。
  38. 38. UIをデザインしない ・ユーザーのやるべきこと = UIの操作 ・ユーザーの頭の中 ≠ UIの操作 ・ユーザーの頭の中 = やりたいこと
  39. 39. UIをデザインしない 開発者は道具の機能や中身を知ってしまっているため UIの操作(利用手順)を中心に デザインしがち https://www © .flickr.com/photos/way2go/3489966856/
  40. 40. UIをデザインしない 本来重要なのは 「ユーザーの頭の中」を中心に デザインすること
  41. 41. UIをデザインしない ユーザーの頭の中(やりたいこと)を考慮することで 利用時のそのユーザーの 価値判断に沿ったフローとなる https://www © .flickr.com/photos/kenstein/1492214304/
  42. 42. https://www © .flickr.com/photos/ericajoy/3514023697/ UXDからUIDへ
  43. 43. UXDからUIDへ UI / UX ↓ UID ∈ UXD
  44. 44. UXDからUIDへ UXデザインの際の情報を元に UIデザインをすること UXD UID
  45. 45. UXDからUIDへ どんな属性を持つ人がどのような状態で、どのような経緯 を経て、何の目的を満たすためにその道具を利用するのか
  46. 46. UXDからUIDへ 特にフラットデザインでは、どの情報を残し どのように簡略化すれば対象ユーザーに伝わるか、が鍵 https://www © .flickr.com/photos/117319679@N03/14989149729
  47. 47. UXDからUIDへ 想定したユーザーの調査から適切なUXを設計し その効果を十分に発揮するUIで、ユーザーを正しく導く ©https://www.flickr.com/photos/9242564@N07/4929302647/
  48. 48. UXDからUIDへ 人間と道具の関係性がそう簡単に変わらない以上 こういった手法は普遍的なアプローチと考えられる http://www © .flickr.com/photos/intelfreepress/8047838494
  49. 49. UXDからUIDへ UIとUXがどのように関係しているのか、一部だけのお話 UXの細かい話はできませんでしたので 興味がある方は是非、UXの知識も深めていって下さい
  50. 50. thank you 2014.10.18 Frontrend in Kanazawa DMM.com Labo 源 賢司

×