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
65
デザイニング・インターフェイス勉強会 第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
自己紹介 / who-am-i
yasulab
PRO
2
4.6k
テストも、国際化も! 小中高生クリエータ支援プログラム『未踏ジュニア』を支える技術
yasulab
PRO
1
110
Matz に頼られたので張り切って2時間ほどドイツと日本の互いの Ruby 学習事情についてディスカッションした話
yasulab
PRO
1
580
困ったときのガイドライン / We Support You in Any Situation
yasulab
PRO
2
3.9k
英語学習から海外発表までの流れ
yasulab
PRO
18
4.2k
多様なメンター、多様な基準
yasulab
PRO
4
18k
未踏ジュニア公式情報まとめ / Mitou Junior Highlights for Creators
yasulab
PRO
1
240
多様な分野、多様な世代 / Various Persons on the Earth
yasulab
PRO
0
230
欧州で働き、米国で学び、日本で繋ぐ / Work-Life Balance and Career
yasulab
PRO
2
1.3k
Other Decks in Design
See All in Design
富山デザイン勉強会_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
160
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
420
Goodpatch Tour💙 / We are hiring!
goodpatch
31
800k
OLTA株式会社/デザイン紹介資料
taxy
0
120
The Very Small Creatures - dressing up warm sequence
lizziestoryboards
0
220
ZKK_001.pdf
nicholaspegu
0
1.5k
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
540
私たちは、世界とデザインの〝次の一歩〟を、どこへ向けるか。
tkhr_kws
2
290
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
660
Les petites aventures de CSS, saison 2025
goetter
3
4k
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
gaussbeam
0
910
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
0
220
Featured
See All Featured
Building Adaptive Systems
keathley
40
2.4k
For a Future-Friendly Web
brad_frost
176
9.6k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Facilitating Awesome Meetings
lara
53
6.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
A Philosophy of Restraint
colly
203
16k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
Making Projects Easy
brettharned
116
6k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
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/