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.7k
テストも、国際化も! 小中高生クリエータ支援プログラム『未踏ジュニア』を支える技術
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
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
200
AIネイティブな時代におけるUXデザインの在り方とは
kuni29
0
1.3k
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
8.6k
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
310
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
5k
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
580
「Figmaプラグイン開発してみた」@スタメンデザイナーオープン勉強会
kiyoshifuwa
0
130
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
9.7k
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
190
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
610
Dive Deep into Communication
yomtsu
0
220
LayerX DesignersDeck
layerx
PRO
0
3.1k
Featured
See All Featured
The Cult of Friendly URLs
andyhume
78
6.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
11
540
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Designing Experiences People Love
moore
140
23k
A better future with KSS
kneath
238
17k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Faster Mobile Websites
deanohume
306
31k
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/