Shinjuku.html5.lunch #11

Shinjuku.html5.lunch
夜の特別編

2012.08.07
kchinda (at) aiming-inc.com
(a.k.a. @ckazu)

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://www.seiko-watch.co.jp/p_search/detail/do.php?no=SBPG003
http://store.apple.com/us/product/MB829LL/A

今日の目的

• ユーザにとって

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

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

UX ?
(User Experience)
IA
UI
(Information
(User Interface)
Architecture)

UX/UI/IA ...

• UI / IA / affordance
• これらを学べば，

より良いユーザ体験を与えられる
ものを作れるのか

メルモデル
ンタ
Mental Model

キャンセルできますか？

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

ボタンが４つ

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

クリック？

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

（補足）色と文化

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

メンタルモデル

• 「なんだ朝日新聞は読めないのか」

――高齢者がiPadを使ったら？

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


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

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



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



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

学習
•壁画
•パピルスの発明
•紙
•グーテンベルク以降それぞれのデバイスに
•活版印刷慣れるための
•書籍学習コストは？
•電子デバイスの発達
•PC
•タブレット端末

学習
•木の枝

•万年筆

•鉛筆それぞれのデバイスに
慣れるための
•ボールペン学習コストは？

•シャープペンシル

学習
•キーボード

•マウス

•ペンタブレットそれぞれのデバイスに
慣れるための
•トラックボール学習コストは？

•タッチパネル

学習
•静的HTML
•動的HTML
•Javascript で動きのあるページ
•Flash
•ajax
•HTML5 それぞれに
•CSS3 の装飾慣れるための
• WebGL 学習コストは？
•etc.

学習コストを下げる
•Web 世界の標準 •実世界のメタファ
•画面の構成 •ボタン
•リンク色 •アイコン
•ex) bing •ジオン
•下線 • ex) http://www.nintendo.co.jp/3ds/abej

•ボタン
•ユニバーサルデザイン
•input 要素
•etc.

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

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

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

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

•グリルの点火スイッチデファクト・スタンダードは
•形状踏襲すべきなのか？
•配置場所

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

•メンタルモデルを意識する
•開発者としての常識は一旦捨てる
•常識か革新か
•常識: レールを外れない
•革新: メタファをうまく取り入れる etc.

Shinjuku.html5.lunch #11

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Semelhante a Shinjuku.html5.lunch #11

Semelhante a Shinjuku.html5.lunch #11 (20)

Shinjuku.html5.lunch #11