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
デザイニング・インターフェイス勉強会 第1回
Search
Yohei Yasukawa
PRO
February 12, 2013
Design
0
66
デザイニング・インターフェイス勉強会 第1回
デザイニング・インターフェイス勉強会
http://www.facebook.com/groups/di2e.study/
Yohei Yasukawa
PRO
February 12, 2013
Tweet
Share
More Decks by Yohei Yasukawa
See All by Yohei Yasukawa
💎 My RubyKaigi Effect in 2025: Top Ruby Companies 🌐
yasulab
PRO
1
140
自己紹介 / who-am-i
yasulab
PRO
3
5.2k
テストも、国際化も! 小中高生クリエータ支援プログラム『未踏ジュニア』を支える技術
yasulab
PRO
1
190
Matz に頼られたので張り切って2時間ほどドイツと日本の互いの Ruby 学習事情についてディスカッションした話
yasulab
PRO
1
680
困ったときのガイドライン / We Support You in Any Situation
yasulab
PRO
2
4.1k
英語学習から海外発表までの流れ
yasulab
PRO
18
4.3k
多様なメンター、多様な基準
yasulab
PRO
5
18k
未踏ジュニア公式情報まとめ / Mitou Junior Highlights for Creators
yasulab
PRO
1
280
多様な分野、多様な世代 / Various Persons on the Earth
yasulab
PRO
0
250
Other Decks in Design
See All in Design
Goodpatch Tour💙 / We are hiring!
goodpatch
31
860k
freee + Product Design FY25Q4
freee
4
14k
「デザイン」を信じるには
iflection
0
280
Карта процесса-опыта — как визуализировать сервис просто, понятно и подробно
ashapiro
0
100
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
4
1.2k
商業デザインのアクセシビリティにおける倫理フレームワークの考察
securecat
1
610
Flow, Not Stock 知識触媒としてのIA
5kaichi
1
290
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
710
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
450
CMS管理画面のアクセシビリティ
magi1125
7
2.1k
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4k
アクセシビリティに取り組むメリット
magi1125
1
160
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Music & Morning Musume
bryan
46
6.6k
How to train your dragon (web standard)
notwaldorf
95
6.1k
Docker and Python
trallard
44
3.5k
Site-Speed That Sticks
csswizardry
10
690
Designing for humans not robots
tammielis
253
25k
How GitHub (no longer) Works
holman
314
140k
Typedesign – Prime Four
hannesfritz
42
2.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
GitHub's CSS Performance
jonrohan
1031
460k
Transcript
@yasulab σβΠχϯάɾΠϯλʔϑΣΠε(2e)ษڧձ ୈ̍ճɹୈ1ষ
@yasulab σβΠχϯάɾΠϯλʔϑΣΠε(2e)ษڧձ ୈ̍ճɹୈ1ষ ྑ͚Εɺ ຊΛങͬͯͶʂ
ҙࣄ߲ • ൃදऀ ʹ σβΠϯΛษڧ͍ͨ͠ΤϯδχΞ • ࣭UstͰޱ಄Ͱ͍ͭͰܴʂ • ଈ࠲ʹճͰ͖ͳ͍߹॓తͳײ͡Ͱɻ •
ʮͦΕҧ͏Μ͡ΌͶʁʯͱײͨ͡ΒੋඇࢦఠΛɻ • ษڧձͷܦҢɾεέδϡʔϧͪ͜Β͔Β↓ http://www.facebook.com/groups/di2e.study/
ҙࣄ߲ • 50͙Β͍ܦͬͨΒڭ͑ͯԼ͍͞ɻ • ҆ઌੜ...ٳܜ͍ͨ͠Ͱ͢... orz
ࠓͷ֓ཁ • Ϣʔβͷߦಈʹ͍ͭͯ • ϢʔβԿΛΜͰ͍Δͷ͔ʁ
ུޠղઆू •ID: Interface Design •SW: Software
ྑ͍IDϢʔβͷཧղ͔Β • ग़ൃʹϢʔβͷཧղ • 1. ͲΜͳਓͳͷ͔ • 2. ͳͥಛఆͷSWΛ͏ͷ͔ʁ •
3. ͦΕΛͲ͏ૢ࡞͢Δͷ͔ʁ “ೊͷϢʔβΛΕ ― ൴Β͋ͳͨͱผਓͳͷͩ”
Ͳ͏ͯͦ͠ΕΛ͏ͷʁ • SWΛ͏ʹඪୡͷͨΊͷखஈ • ௐͷɼֶशɼ੍ޚɼ࡞ɼձɼޘָ ... • Ϣʔβͷୡ͍ͨ͠ඪΛਖ਼͘͠ݟۃΊΑ͏. • ඪୡͷۙಓʹͳΔͳΒɺͲΜͲΜΖ͏ʂ
• ྫɿSimple Timekeeper
ྫɿSimple Timekeeper http://simpletimekeeper.com/
1. (Start + Stop) button
2. Number == Form
ͪΐͬͱߟ͑ͯΈΔ... • ೖྗ͢ΔϑΥʔϜΛΔ͜ͱʹඪୡͷۙಓʁ • ࢥߟίετ͕Լ͢Δ...͔ʁ • ϚεΛɺΑΓಈ͔͞ͳͯ͘ྑ͘ͳΔ...ͱ͔ʁ • NumberΛClickableʹͨ͠Βؾͮ͘...ͷ͔ʁ
ͪΐͬͱߟ͑ͯΈΔ... ɹ↓ɹ Ϣʔβௐࠪ • ೖྗ͢ΔϑΥʔϜΛΔ͜ͱʹඪୡͷۙಓʁ • ࢥߟίετ͕Լ͢Δ...͔ʁ • ϚεΛɺΑΓಈ͔͞ͳͯ͘ྑ͘ͳΔ...ͱ͔ʁ •
NumberΛClickableʹͨ͠Βؾͮ͘...ͷ͔ʁ
“ح৺Λ࣋ͱ͏. Ϣʔβ࣮ࡍʹ ͲͷΑ͏ͳਓʑͰɼԿΛߟ͑ͨΓ ײͨ͡Γ͍ͯ͠Δͷ͔ɼͦΕΛݟ ग़͢ઐతεΩϧΛʹ͚ͭΑ͏.” P. 4
Ϣʔβௐࠪ • “࠷ྑ͍ํ๏ɺ֎ʹग़ͯ൴Βʹձ͏͜ͱͩ.” • cf. AirBnB͕ Los Angels·Ͱ͍ͬͨ. • cf.
YCͷΞυόΠβ͕Α͘Ұऽ͢Δྫ. • ʮϢʔβͳΜͯݴͬͯΔͷʁʯ
Ϣʔβௐࠪ • “࠷ྑ͍ํ๏ɺ֎ʹग़ͯ൴Βʹձ͏͜ͱͩ.” • cf. AirBnB͕ Los Angels·Ͱ͍ͬͨ. • cf.
YCͷΞυόΠβ͕Α͘Ұऽ͢Δྫ. • ʮϢʔβͳΜͯݴͬͯΔͷʁʯ ʮ͑ɺͰϢʔβͬͯਓͦΕͧΕ͡ΌͶʁʯ
Ϣʔβௐࠪ • ϙΠϯτɺ“֓Ͷ”֘͢Δࣄ࣮Կͳͷ͔ʁ • Ұൠతͳߦಈύλʔϯ vs. ྫ֎తͳέʔε • 1. ֓ͶɺͲΜͳΰʔϧΛࢦͯ͠Δͷ͔ʁ
2. ֓ͶɺͲΜͳλεΫΛ࣮ߦ͢Δͷ͔ʁ 3. ֓ͶɺͲΜͳ୯ޠΛ͏ͷ͔ʁ 4. ֓ͶɺͲΜͳεΩϧΛ࣋ͬͯΔͷ͔ʁ 5. ֓ͶɺͲΜͳߟ͑ํΛ࣋ͬͯΔͷ͔ʁ
͕͔͔࣌ؒ͘͢͝Δ͚Ͳ, ਖ਼͍͠ΛݟۃΊΑ͏. ࠷ॳͷҰาେࣄͳͷͰ, ਖ਼͘͠౿Έग़ͦ͏.
Ϣʔβௐࠪͷํ๏ (ྫ) • 1. ؍ • 2. Case Studyɹ •
3. Ξϯέʔτௐࠪ • 4. ϖϧιφ ※ଞʹ৭ʑ͋ΔΑ͏Ͱ͕͢ɺຊͰͳ͍ͷͰলུ. ৄ͘͠ʮThe Lean StartupʯͷMeasureΛࢀߟʹ.
ϢʔβௐࠪͷϙΠϯτ • ਅͷΛཧղ͢Δͷ͍͠. • ҰൠతʹɺภΓ͕ͪʹͳΔ • e.g. આ໌ग़དྷΔ͚ͩͷݴޠදݱೳྗ͕ඞཁ • ߦ͖ͨΓͬͨΓͩͱɺมͳσʔλΛಘΔ͔.
• Formal method > Informal method > Do nothing
←͜͜·Ͱલஔ͖ ɹɹ͔͜͜Β͕ຊ→
Ϣʔβͷߦಈύλʔϯ • ϢʔβௐࠪͰσʔλΛಘ͚ͨͲɺͦΕͰʁ • ϢʔβΛύλʔϯʹͯΊͯΈΔɻ • ͰɺͲΜͳύλʔϯ͕͋Δͷʁ → ࣍Ͱઆ໌
Ϣʔβͷߦಈύλʔϯ • ϢʔβௐࠪͰσʔλΛಘ͚ͨͲɺͦΕͰʁ • ϢʔβΛύλʔϯʹͯΊͯΈΔɻ • ͰɺͲΜͳύλʔϯ͕͋Δͷʁ → ࣍Ͱઆ໌ •
Ͳ͏ͯ͠ύλʔϯʹͯΊΔͷʁ • جૅͱͳΔߏɾػೳɾදݱΛܾΊΔͨΊ.
Ϣʔβͷߦಈύλʔϯ • ϢʔβௐࠪͰσʔλΛಘ͚ͨͲɺͦΕͰʁ • ϢʔβΛύλʔϯʹͯΊͯΈΔɻ • ͰɺͲΜͳύλʔϯ͕͋Δͷʁ → ࣍Ͱઆ໌ •
Ͳ͏ͯ͠ύλʔϯʹͯΊΔͷʁ • جૅͱͳΔߏɾػೳɾදݱΛܾΊΔͨΊ. Design Interface !
“ҰਓҰਓ͕ϢχʔΫͳଘࡏ ͩͱ͍͏ͷͷɺਓʑ֓ͯ͠ ༧௨Γʹ;Δ·͏ͷͩɻ” P. 9
ͲΜͳύλʔϯ͕͋Δʁ • 1.Safe Exploration • 2. Instant Gratification • 3.
Satisficing • 4. Changes in Midstream • 5. Deferred Choices • 6. Incremental Construction • 7. Habituation • 8. Microbreaks • 9. Spatial Memory • 10. Prospective Memory • 11. Streamlined Repetition • 12. Keyboard Only • 13. Other People’s Advice • 14. Personal Recommendations
ؤு֮ͬͯ͑Δʂ
1. Safe Exploration • ʮແཧͳ͘୳ݕͰ͖·͢Α͏ʹ...ʯ • ৭ʑࢼͨ͢ΊͷΞϨίϨ. • ঈΛࢧ͏͜ͱͳ͘୳ݕͤ͞Α͏ʂ •
Undo / Redo
2. Instant Gratification • ʮࠓ͙͢Γ͍ͨʂʯ • ૉΒ͍͠ϢʔβମݧΛਝʹఏڙ͠Α͏ • “ΤϯδχΞͷࣄ͕0Λ1ʹ͢ΔࣄͳΒɺ σβΠϯ1Λ100ʹ͢Δࣄ”
“ݟͯ2ඵͰΘ͔ΔUIΛৗʹඪͱͯ͠ܝ͍͛ͯΔ” http://www.startup-dating.com/2012/05/interview_ikumikatayama/
3. Satisficing • ʮ͏͜ΕͰ͓ෲ͍ͬͺ͍Ͱ͢ʯ • Stisficing = Satisfying + Sufficingɹ
• શͯΛΔʹֻ͕͔࣌ؒΔ→ඞཁेͳ݁Ռ. • ྫɿʹ͖͍ͭ͢ॴʹগͷબࢶ • ঢ়گ͕վળ͞ΕΔͱͯ͠ɼඞཁͱ͞Εͳ͍͔. • ྫɿϝʔϧ͔ΒFacebookʹߦ͘ਓʑ
4. Changes in Midstream • ʮؾ͕มΘͬͨͷͰɺଞͷ͜ͱΓ·͢ʯ • ํมߋͰ͖ΔػձΛఏڙˍͦͷ߹ͷରॲࡦɻ • ్த·Ͱೖྗ͞Εͨใͷอଘ.
• ྫɿ్தͰؾ͕มΘͬͨͷΫʔϙϯϝʔϧ.
5. Deferred Choices • ʮͱΓ͋͑ͣ◦◦͚͍ͩͨ͠ΜͰ͚͢Ͳ...ʯ • ෆཁͳεςοϓΛޙճ͠ʹɻ • ྫɿܝࣔ൘ʹίϝϯτ͍͚ͨͩ͠ͳͷʹSing up
• ྫɿඞཁ࠷ݶͷೖྗ߲, ઃఆը໘Ͱৄࡉઃఆ
6. Incremental Construction • ʮࢼߦࡨޡ͍ͨ͠ʂʯ • ฤू <--- > ݁ՌΛਝʹදࣔ
• ྫɿATNDͷΠϕϯτฤूը໘
7. Habituation • ʮ͓͍͓͍ɺ͍ͭͷΞϨ͕ग़དྷͳ͍ͧʂʯ • ʮ͍ͭͷʯͷҰ؏ੑ • ྫɿʮCtrl-a, Ctrl-x, Ctrl-sʯΛೖྗ͢Δͱ...?ʯ
• MS Wordͷ߹ vs. Emacsͷ߹
;͎...
8. Microbreaks • ʮ͓ɺόε͕དྷΔͷ̎ؒޙ͔...ʯ • ਝͳ࣮ߦ ˍ ૉૣ͍ݺͼग़͠ • ✘
ຖճϩάΠϯ • ✘ ϩʔυʹֻ͕͔࣌ؒΔ • ✘ ࠷ॳͷը໘ʹཉ͍͠ใ͕දࣔ͞Εͳ͍
9. Spatial Memory • ʮ͋Εɺ͍ͭͷॴʹ͍ͭͷΞϨ͕ͳ͍...ʯ • டং͋ΔΧΦε • “ͪΐͬͱɺউखʹͷصΛย͚ͳ͍ͰΑʂ” •
উखʹཧɺμϝɺθολΠ.
10. Prospective Memory • ʮΕ͍͢ΞϨɺ͜͜ʹஔ͍ͨ··ʹ͠Α͏ʯ • ෆશͳهԱͷͨΊͷɺ֎෦هԱஔతͳػೳ • ྫ1ɿΟϯυͷ։͚ͬ์͠ •
ྫ2ɿσεΫτοϓʹอଘ • ྫ3ɿॏཁͳϝʔϧʹStar
11. Streamlined Repetition • ʮ͍͍ͬͨԿճ܁Γฦ͍͍ͤͷɺ͜ͷૢ࡞ orzʯ • Α͘܁Γฦ͢ૢ࡞Λ؆୯ʹ. • ྫɿΤσΟλͷݕࡧˍஔ
• ྫɿPhotoshopͷʮΞΫγϣϯʯొ • ྫɿUnix TerminalͷʮCtrl-p/Ctrl-n + Enterʯ
12. Keyboard Only • ʮϚεΛ͏ͱ͔ऑͰ͢ ( Ŗ`дŖ´)ŝžŕʯ • ଞʹɺମ্ͷཧ༝ͰϚε͕͑ͳ͍ͱ͔ɻ •
ྫɿSign up ը໘ͰϚε͍ͨ͘ͳ͍Αʂ • ͰɺΏ͏ͪΐͷޱ࠲൪߸ೖྗͱ͔Ͳ͏Αʁ • cf. Ώ͏ͪΐμΠϨΫτ
13. Other People’s Advice • ʮ͜ΕͬͯɺଞͷਓͷͲ͏ͬͯΔΜͩΖ͏Ͷʁʯ • ଞਓΛࢀߟʹ͍ͨ͠ཉɻͦͷͨΊͷΞϨίϨɻ • ྫɿMATLABͷΧϯχϯάਪίϯςετ
• ྫɿଞਓ͕ྑ͘ݕࡧ͢Δ߲Λڍ͛Δ • cf. GoogleݕࡧʗGoogleೖྗʹ( Ŗ`дŖ´)ŝžŕ
14. Personal Recommendations • ʮSVͷਓ͕નΊͨຊ͔ͩΒɺDIຊ͖ͬͱੌ͍ຊʯ • ਓͷਪન ≧ ଞਓͷਪન •
ಉ͡URLʹΞΫηε͢Δͱɺಉ͡ϖʔδ͕ݟΕΔ • ؆୯ʹ༑ਓʹհͰ͖Δػೳ • खಈςΩετ ʼ ࣗಈςΩετ
Ҏ্ʂ
ͲΜͳύλʔϯ͕͋Δʁ • 1.Safe Exploration • 2. Instant Gratification • 3.
Satisficing • 4. Changes in Midstream • 5. Deferred Choices • 6. Incremental Construction • 7. Habituation • 8. Microbreaks • 9. Spatial Memory • 10. Prospective Memory • 11. Streamlined Repetition • 12. Keyboard Only • 13. Other People’s Advice • 14. Personal Recommendations
ࠓͷ֓ཁ • Ϣʔβͷߦಈʹ͍ͭͯ • ϢʔβԿΛΜͰ͍Δͷ͔ʁ
ͱΓ͋͑ͣࠓ͜͜·Ͱ. ৄࡉຊΛࢀরͯ͠Լ͍͞.
@yasulab σβΠχϯάɾΠϯλʔϑΣΠε(2e)ษڧձ ୈ̍ճɹୈ1ষ
࣍ճʁ •ୈ̎ষʢʴ ୈ x ষʁʣ
ৄࡉͪ͜Β͔Β http://www.facebook.com/groups/di2e.study/