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.2k
Other Decks in Design
See All in Design
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
5k
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
4.1k
セブンデックス カルチャーブック
sevendex
0
3.3k
政策広報実践講座_講演資料ダイジェスト2
capitolthink
0
130
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
0
220
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
210
The Golden Whitney
ohtristanart
PRO
0
130
AIネイティブな時代におけるUXデザインの在り方とは
kuni29
0
1.3k
Дизайн услуги через её визуализацию с Картой процесса-опыта
ashapiro
0
250
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
240
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
5
470
デザイナーのお仕事(UI/UX GRAPHIC GROUP)
mirrativ
0
140
Featured
See All Featured
Become a Pro
speakerdeck
PRO
26
5.2k
Documentation Writing (for coders)
carmenintech
67
4.6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Embracing the Ebb and Flow
colly
84
4.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
510
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Six Lessons from altMBA
skipperchong
27
3.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
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/