Download to read offline
Uploaded byKazuyuki CHINDA
Shinjuku.html5.lunch #11
Shinjuku.html5.lunch 夜の特別編 http://connpass.com/event/857/
Shinjuku.html5.lunch #11
- 1. Shinjuku.html5.lunch 夜の特別編 2012.08.07 kchinda (at) aiming-inc.com (a.k.a. @ckazu)
- 2. about me • @ckazu • • 東京開発G • Rails によるサイト開発 • Rails + JS による ブラウザゲーム開発 •
- 3.
- 4.
- 5.
- 6. 今日のテーマ • web の UX について
- 7.
- 8. 今日の目的 • 開発者嗜好のモノ • デザイナ嗜好のモノ http://www.seiko-watch.co.jp/p_search/detail/do.php?no=SBPG003 http://store.apple.com/us/product/MB829LL/A
- 9.
- 10.
- 11. The User ExperienceHoneycomb http://semanticstudios.com/publications/semantics/000029.php
- 12. UX/UI/IA ... 何故か最近よく聞く単語 • UI (User Interface) • UX (User eXperience) • IA (Information Architecture) • affordance theory (Perceived Affordance) • etc.
- 13. UX 認知科学 情報科学 デザイン
- 14. UX affordance UX ? (User Experience) IA UI (Information (User Interface) Architecture)
- 15. UX/UI/IA ... • UI / IA / affordance • これらを学べば， より良いユーザ体験を与えられる ものを作れるのか
- 16. メ ルモデル ンタ Mental Model
- 17.
- 18. BAD UI http://www.google.com/search?q=bad +ui&hl=ja&prmd=imvnsa&tbm=isch&tbo=u&source=univ&sa=X&ei=X9AgUMWuIKqImQX Xz4D4Bg&ved=0CF0QsAQ&biw=1366&bih=768#hl=ja&tbm=isch&sa=1&q=%22bad+ui %22+browser&oq=%22bad+ui%22+browser&gs_l=img. 3...7024.9528.2.9693.4.4.0.0.0.0.57.207.4.4.0...0.0...1c.l41lTJlFcT8&pbx=1&fp=1&biw=1366&bih =768&bav=on.2,or.r_gc.r_pw.r_qf.&cad=b&sei=v9AgUK-HMM30mAXr5YHICA
- 19.
- 20.
- 21.
- 22.
- 23.
- 24. メンタルモデル • 「なんだ朝日新聞は読めないのか」 ――高齢者がiPadを使ったら？ • http://plusd.itmedia.co.jp/pcuser/articles/1004/23/ news028.html
- 25.
- 26.
- 27.
- 28. メンタルモデル •ヒトは自分が観察したことを説明する メンタルモデルを構築する •自分の観測範囲で構築するので •iPad でテレビ見れないけど故障？ •ガチャは確率操作されている！？ •etc.
- 29.
- 30. 学習 Lerning
- 31. 学習 •壁画 •パピルスの発明 •紙 •グーテンベルク以降 それぞれのデバイスに •活版印刷 慣れるための •書籍 学習コストは？ •電子デバイスの発達 •PC •タブレット端末
- 32. 学習 •木の枝 •万年筆 •鉛筆 それぞれのデバイスに 慣れるための •ボールペン 学習コストは？ •シャープペンシル
- 33. 学習 •キーボード •マウス •ペンタブレット それぞれのデバイスに 慣れるための •トラックボール 学習コストは？ •タッチパネル
- 34. 学習 •静的HTML •動的HTML •Javascript で動きのあるページ •Flash •ajax •HTML5 それぞれに •CSS3 の装飾 慣れるための • WebGL 学習コストは？ •etc.
- 35. 学習コストを下げる •Web 世界の標準 •実世界のメタファ •画面の構成 •ボタン •リンク色 •アイコン •ex) bing •ジオン •下線 • ex) http://www.nintendo.co.jp/3ds/abej •ボタン •ユニバーサルデザイン •input 要素 •etc.
- 36. 対応付け Mapping
- 37.
- 38.
- 39. http://www.google.co.jp/search?q=ガスコンロ 対応付け &hl=ja&prmd=imvns&source=lnms&tbm=isch&ei=cT3mTvnjL67BiQf0lKi2BQ&sa=X&oi=mode_link&ct=mode&cd=2&ved=0CEUQ_ AUoAQ&biw=1366&bih=768 間違えやすいデザインなのに 各社共通の配置 なぜ長年変更されないのか •グリルの点火スイッチ デファクト・スタンダードは •形状 踏襲すべきなのか？ •配置場所
- 40.
- 41. まとめ •より良いユーザ体験が得られる コンテンツを作るには •メンタルモデルを意識する •開発者としての常識は一旦捨てる •常識 か 革新か •常識: レールを外れない •革新: メタファをうまく取り入れる etc.
- 42.