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
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
310
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4.1k
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
lycorptech_jp
PRO
0
250
Saudade typeface
tiagoporto
0
330
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
110
線で考える画面構成
natsuume
1
890
portfolio_YumiYasuda
yum0418
0
300
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
510
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
760
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1.2k
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1k
Cyber Heart Online Book
hjnasby
0
140
Featured
See All Featured
Side Projects
sachag
455
42k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Designing for Performance
lara
610
69k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Statistics for Hackers
jakevdp
799
220k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
How to Ace a Technical Interview
jacobian
278
23k
Site-Speed That Sticks
csswizardry
10
700
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/