Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Shinjuku.html5.lunch #11
Search
ckazu
August 07, 2012
Design
0
5
Shinjuku.html5.lunch #11
https://www.slideshare.net/ckazu/shinjukuhtml5lunch-11
ckazu
August 07, 2012
Tweet
Share
More Decks by ckazu
See All by ckazu
2024 コーディング研修
ckazu
2
950
磯野家で学ぶ Prolog
ckazu
0
9
Introduction fasttext
ckazu
0
5
Query selecterの話
ckazu
0
2
仮想電子工作のすすめ
ckazu
0
5
ウェブエンジニアのための色の話
ckazu
0
6
これさえ読めば知ったかできるかもしれない人工知能の歴史と機械学習の今
ckazu
0
4
typo の傾向と対策
ckazu
0
5
ずぶの素人がRails開発できるようになるために必要な5つのこと
ckazu
0
13
Other Decks in Design
See All in Design
私たちが取り組んできたアクセシビリティと これから取り組んでいくアクセシビリティについて
securecat
1
200
Webアプリケーションアクセシビリティ解説ウェビナー「8章 アクセシブルなUI設計の原理を導く」
magi1125
1
210
0→1でデザイナーは何とむきあうのか? / 0→1 Meetup 〜多様な0→1フェーズにおけるデザイナーの働き方〜 / Yasuhiro Yokota
yasuhiroyokota
1
290
ゲームクリエイター、事業会社のデザイナーになる
satomium1
0
240
Sociotechnical design for software and human systems
xinyao
2
540
雑誌『広告』をサイズ展開する
takuro_nakajima
PRO
0
1.7k
WHAT ARE ME?
takuro_nakajima
PRO
0
1.7k
Breaking News on the Web
souvikdg
0
220
PRDがデザインプロセスを高速化した話
tooomo
1
790
フロントエンドエンジニアが知っておくべきUIUX心理学
yukiringo
1
390
プロダクトを成長させる生成 AI のユースケース発見ワークショップ vol.3
icoxfog417
1
200
共創のための地域基盤としての非公式組織の形成 / Informal community as an infrastructure for co-creation
fumiyaakasaka
2
270
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
661
120k
YesSQL, Process and Tooling at Scale
rocio
165
14k
Making the Leap to Tech Lead
cromwellryan
126
8.6k
Writing Fast Ruby
sferik
623
60k
GraphQLの誤解/rethinking-graphql
sonatard
57
9.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
247
20k
The Brand Is Dead. Long Live the Brand.
mthomps
51
34k
Atom: Resistance is Futile
akmur
260
25k
How GitHub Uses GitHub to Build GitHub
holman
471
290k
Building Adaptive Systems
keathley
33
2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
9k
Transcript
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://store.apple.com/us/product/MB829LL/A http://www.seiko-watch.co.jp/p_search/detail/do.php?no=SBPG003
ࠓͷత •Ϣʔβʹͱͬͯ ͍͢͞ͱԿ͔Λɼ ࠜڌΛ࣋ͬͯߟ͑ΒΕΔΑ͏ʹͳΔ
UX User 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 (Information Architecture) 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=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 BAD UI
Ϙλϯ͕̐ͭ 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.
ϝϯλϧϞσϧ •ώτ͕ࣗ؍ͨ͜͠ͱΛઆ໌͢Δ ϝϯλϧϞσϧΛߏங͢Δ •ʮ։ൃऀͷৗࣝ ≠ Ϣʔβͷৗࣝʯ ͱߟ͑Δ͖
ֶश Lerning
ֶश •นը •ύϐϧεͷൃ໌ •ࢴ •άʔςϯϕϧΫҎ߱ •׆൛ҹ •ॻ੶ •ిࢠσόΠεͷൃୡ •PC •λϒϨοτ
ͦΕͧΕͷσόΠεʹ ׳ΕΔͨΊͷ ֶशίετʁ
ֶश •ͷࢬ •ສච •Ԗච •Ϙʔϧϖϯ •γϟʔϓϖϯγϧ ͦΕͧΕͷσόΠεʹ ׳ΕΔͨΊͷ ֶशίετʁ
ֶश •ΩʔϘʔυ •Ϛε •ϖϯλϒϨοτ •τϥοΫϘʔϧ •λονύωϧ ͦΕͧΕͷσόΠεʹ ׳ΕΔͨΊͷ ֶशίετʁ
ֶश •੩తHTML •ಈతHTML •Javascript Ͱಈ͖ͷ͋Δϖʔδ •Flashɹ •ajaxɹ •HTML5ɹ •CSS3 ͷ০
•WebGLɹ •etc.ɹ ͦΕͧΕʹ ׳ΕΔͨΊͷ ֶशίετʁ
ֶशίετΛԼ͛Δ •Web ੈքͷඪ४ •ը໘ͷߏ •ϦϯΫ৭ •ex) bingɹ •Լઢ •Ϙλϯ •input
ཁૉ •etc. •࣮ੈքͷϝλϑΝ •Ϙλϯ •ΞΠίϯ •δΦϯ • ex) http://www.nintendo.co.jp/3ds/abej •ϢχόʔαϧσβΠϯ
ରԠ͚ 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 •άϦϧͷՐεΠον •ܗঢ় •ஔॴ ؒҧ͍͑͢σβΠϯͳͷʹ ֤ࣾڞ௨ͷஔ ͳͥมߋ͞Εͳ͍ͷ͔
σϑΝΫτɾελϯμʔυ ౿ऻ͖͢ͳͷ͔ʁ
ࢀߟαΠτ
·ͱΊ •ΑΓྑ͍Ϣʔβମݧ͕ಘΒΕΔ ίϯςϯπΛ࡞Δʹ •ϝϯλϧϞσϧΛҙࣝ͢Δ •։ൃऀͱͯ͠ͷৗࣝҰ୴ࣺͯΔ •ৗࣝ ͔ ֵ৽͔ •ৗࣝ: ϨʔϧΛ֎Εͳ͍
•ֵ৽: ϝλϑΝΛ͏·͘औΓೖΕΔ etc.
ऴ