shinjuku.html5.lunch #11

Shinjuku.html5.lunch夜の特別編

2012.08.07kchinda (at) aiming-inc.com

(a.k.a. @ckazu)

mailto:[email protected]






about me

•@ckazu•

•東京開発G•Rails によるサイト開発•Rails + JS によるブラウザゲーム開発

•

http://connpass.com/series/72/



http://www.slideshare.net/ckazu/ux-10671865



http://developer.aiming-inc.com/study/guide-to-ux-for-software-engineer/



今日のテーマ

•web の UX について

今日のテーマ

•メンタルモデルとデバイスとの関わり

今日の目的•開発者嗜好のモノ •デザイナ嗜好のモノ

http://store.apple.com/us/product/MB829LL/A

http://www.seiko-watch.co.jp/p_search/detail/do.php?no=SBPG003





今日の目的

•ユーザにとって使いやすさとは何かを，根拠を持って考えられるようになる

UXUser Experience

The User Experience Honeycomb

http://semanticstudios.com/publications/semantics/000029.php



UX/UI/IA ...何故か最近よく聞く単語

•UI (User Interface)

•UX (User eXperience)

•IA (Information Architecture)

•affordance theory (Perceived Affordance)

•etc.

UX

認知科学

デザイン情報科学

UX

affordance

UI(User Interface)

IA(InformationArchitecture)

UX ?(User Experience)

UX/UI/IA ...

•UI / IA / affordance

•これらを学べば，より良いユーザ体験を与えられるものを作れるのか

メンタルモデルMental Model

キャンセルできますか？

http://www.google.com/search?q=bad+ui&hl=ja&prmd=imvnsa&tbm=isch&tbo=u&source=univ&sa=X&ei=X9AgUMWuIKqImQXXz4D4Bg&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

BAD UI

http://www.google.com/search?q=bad+ui&hl=ja&prmd=imvnsa&tbm=isch&tbo=u&source=univ&sa=X&ei=X9AgUMWuIKqImQXXz4D4Bg&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












ボタンが４つ




クリック？




凹んだボタン

（補足）色と文化

http://www.informationisbeautiful.net/visualizations/colours-in-cultures/



メンタルモデル

•「なんだ朝日新聞は読めないのか」――高齢者がiPadを使ったら？

• http://plusd.itmedia.co.jp/pcuser/articles/1004/23/news028.html

http://plusd.itmedia.co.jp/pcuser/articles/1004/23/news028.html





•ヒトは自分が観察したことを説明するメンタルモデルを構築する

•開発者のメンタルモデルと，ユーザのメンタルモデルとの乖離



•自分の観測範囲で構築するので•iPad でテレビ見れないけど故障？•ガチャは確率操作されている！？•etc.



•「開発者の常識 ≠ ユーザの常識」と考えるべき

学習Lerning

学習•壁画•パピルスの発明

•紙•グーテンベルク以降

•活版印刷•書籍

•電子デバイスの発達•PC•タブレット端末

それぞれのデバイスに慣れるための学習コストは？

学習•木の枝

•万年筆

•鉛筆

•ボールペン

•シャープペンシル


学習•キーボード

•マウス

•ペンタブレット

•トラックボール

•タッチパネル


学習•静的HTML

•動的HTML

•Javascript で動きのあるページ•Flash　•ajax　•HTML5　•CSS3 の装飾•WebGL　•etc.　

それぞれに慣れるための学習コストは？

学習コストを下げる•Web 世界の標準•画面の構成•リンク色

•ex) bing　•下線•ボタン•input 要素•etc.

•実世界のメタファ•ボタン•アイコン

•ジオン• ex) http://www.nintendo.co.jp/3ds/abej

•ユニバーサルデザイン

http://www.nintendo.co.jp/3ds/abej/index.html

http://www.nintendo.co.jp/3ds/abej/index.html

対応付けMapping

対応付けが上手くいっていない例

対応付け

対応付け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

•グリルの点火スイッチ•形状•配置場所

間違えやすいデザインなのに各社共通の配置

なぜ長年変更されないのか

デファクト・スタンダードは踏襲すべきなのか？

http://www.google.co.jp/search?q=%E3%82%AC%E3%82%B9%E3%82%B3%E3%83%B3%E3%83%AD&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






参考サイト

まとめ•より良いユーザ体験が得られるコンテンツを作るには

•メンタルモデルを意識する•開発者としての常識は一旦捨てる•常識か革新か

•常識: レールを外れない•革新: メタファをうまく取り入れる etc.

shinjuku.html5.lunch #11

Technology