UI/UX Design for Mobility

by bookslope

Slide 1

Slide 1 text

UI/UX DESIGN FOR MOBILITY Mede by Takashi Sakamoto @bookslope

Slide 2

Slide 2 text

PROFILE ͸͡Ί·ͯ͠ UI/UX DESIGN FOR MOBILITY εϚʔτϞϏϦςΟࣄۀਪਐࣨࣨ௕  ৘ใઃܭɾ69σβΠϯ͕ઐ໳ྖҬ ΦϯϥΠϯίϛϡχςΟӡӦ  دߘɾߨԋଟ਺  ஶ࡞ʰ*"γϯΩϯάʱͳͲ Mede by Takashi Sakamoto @bookslope

Slide 3

Slide 3 text

LAYER ࠓճͱΓ͋͛Δʮ6*69ʯͱ͸ɺϞϏ ϦςΟΛ୅ද͢Δࣗಈंͷӡస੮ʹ ΈΒΕΔϢʔβʔΠϯλʔϑΣʔε ʢ).*ʣΛऔΓ্͍͛ͯ·͢ɻ    ).*ͱ͸ɺ)VNBO.BDIJOF *OUFSGBDFͷུͰɺਓؒͱػցͱͷؒ Ͱ৘ใͷ΍ΓͱΓΛߦ͏ڥքͱ͍͏ ҙຯΛ࣋ͭɻ UI/UX DESIGN FOR MOBILITY Steering Smartphone Driver & Passenger City

Slide 4

Slide 4 text

INDEX ͜ͷࢿྉʹؚ·ΕΔ΋ͷ UI/UX DESIGN FOR MOBILITY ंͷ).*σβΠϯைྲྀ .BB4ʹ͓͚Δ69σβΠϯ 10$ͷॏཁੑ 01. 02. 03.

Slide 5

Slide 5 text

ंͷ).*σβΠϯைྲྀ “HMI” DESIGN TREND 01

Slide 6

Slide 6 text

CASE ʮ$"4&ʯͷਁಁʹΑΓɺӡసखͷૢ ࡞ྖҬʹੜ׆ͷҰ෦ͱͯ͠ීஈར༻͠ ͍ͯΔεϚϗ͕୆಄͖ͯ͠·ͨ͠ɻ ʮ$"4&ʯͱ͸ɺʮ$POOFDUFEʯ ʮ"VUPOPNPVTʯʮ4IBSFEˍ 4FSWJDFʯʮ&MFDUSJDʯͷ಄จࣈΛࣔ ͢ɻ UI/UX DESIGN FOR MOBILITY

Slide 7

Slide 7 text

CTRL ೥ɺถւ܉ͷۦஞ؋͸͜Ε·Ͱ ࠾༻͍ͯͨ͠λονεΫϦʔϯʢιϑ τʣ͔Βैདྷͷεϩοτϧૢ࡞ʢϋʔ υʣʹ໭ͨ͠ͱ͍͏ൃදΛͨ͠ɻ ৐૊һͷޡૢ࡞͕ଟ͍ͷ͕ཧ༝ͩ ͕ɺௐࠪϨϙʔτʹΑΔͱशख़౓΍ ܇࿅ෆ଍ͱ͍͏ਓؒଆͷ໰୊ͷ΄͏ ͕ු͖ூΓʹͳ͍ͬͯΔɻ UI/UX DESIGN FOR MOBILITY

Slide 8

Slide 8 text

By SpaceX Crew Dragon UI/UX DESIGN FOR MOBILITY

Slide 9

Slide 9 text

Semi Roadstar Model S Model 3 UI/UX DESIGN FOR MOBILITY

Slide 10

Slide 10 text

By BYTON Menu Menu Meter + Infortainment UI/UX DESIGN FOR MOBILITY

Slide 11

Slide 11 text

By NIO Nomi Infortainment Meter UI/UX DESIGN FOR MOBILITY

Slide 12

Slide 12 text

Infortainment By Polestar2 UI/UX DESIGN FOR MOBILITY Meter

Slide 13

Slide 13 text

By Polestar Precept UI/UX DESIGN FOR MOBILITY Infortainment Meter

Slide 14

Slide 14 text

By SONY VISION UI/UX DESIGN FOR MOBILITY Meter + Infortainment Side Monitor Side Monitor

Slide 15

Slide 15 text

By The Dyson Battery Electric Vehicle UI/UX DESIGN FOR MOBILITY Meter + Infortainment Side Monitor HVAC CTRL

Slide 16

Slide 16 text

TREND ϞϏϦςΟʢࣗಈंʣͷ).*σβΠϯ ͷτϨϯυͱͯͭ͠ͷைྲྀ͕͋Γ· ͢ɻ UI/UX DESIGN FOR MOBILITY /*0 1PMFTUBS %ZTPOʜ #:50/ 40/: )0/%"ʜ Meter + Infortainment Infortainment Meter 01. 02. ηύϨʔτܕ ίϯόΠϯܕ

Slide 17

Slide 17 text

By Apple CarPlay UI/UX DESIGN FOR MOBILITY Apple CarPlay

Slide 18

Slide 18 text

By Android Auto UI/UX DESIGN FOR MOBILITY Android Auto

Slide 19

Slide 19 text

Citroen Ami εϚϗΛΠϯϑΥςΠϯϝϯτγες Ϝͱͯͦ͠ͷ··ར༻͢Δίϯηϓτ ΋͋Γ·͢ɻ UI/UX DESIGN FOR MOBILITY Meter Smartphone

Slide 20

Slide 20 text

Android Automotive OS ͍ΘΏΔंͷ04ʢ$BS04ʣ͸ɺ "OESPJE"VUPNPUJWFͱݺ͹ΕɺϏϧ υΠϯͷϩʔυϚοϓ͕ܭը͞Ε͍ͯ Δɻ UI/UX DESIGN FOR MOBILITY 2020 7PMWP$BST 2021 3FOBVMU/JTTBO.JUTVCJTIJ (FOFSBM.PUPST

Slide 21

Slide 21 text

UI/UX DESIGN FOR MOBILITY Automotive High-Tech New System Legacy System Android Auto CarPlay Tesla Polestar2 Bentz Porsche NISSAN BYTON SONY Waymo Citroen Ami

Slide 22

Slide 22 text

TOYOTA e-Palette τϤλͷʮFύϨοτʯ౦ژ όʔδϣϯͰ͸ɺηϯαʔɺΧϝϥɺ -J%"3γεςϜ͕౥ࡌ͞Ε͓ͯΓɺ௿ ଎ࣗಈӡసΛαϙʔτ͍ͯ͠·͢ɻ UI/UX DESIGN FOR MOBILITY Ctrl Camera View

Slide 23

Slide 23 text

Point of View ࣗಈӡసٕज़͕ൃୡ͢Δͱɺ).*ͱ͠ ͯॏཁͳͷ͸ɺӡస͢Δӡసखͷࢹ ఺ΑΓ΋ɺӡస͍ͯ͠ͳ͍৐٬ͷࢹ ఺ʹॏ͖Λஔ͘ඞཁ͕͋Γ·͢ɻ UI/UX DESIGN FOR MOBILITY Passenger Driver

Slide 24

Slide 24 text

.BB4ʹ͓͚Δ69σβΠϯ UX DESIGN FOR “MaaS “ 02

Slide 25

Slide 25 text

UI/UX DESIGN FOR MOBILITY

Slide 26

Slide 26 text

໨త ໨త ໨త UI/UX DESIGN FOR MOBILITY

Slide 27

Slide 27 text

By Designing from the Car: Why Context Matter UI/UX DESIGN FOR MOBILITY

Slide 28

Slide 28 text

By Google Maps UI/UX DESIGN FOR MOBILITY

Slide 29

Slide 29 text

By Airbitat Oasis Smart Bus Stop UI/UX DESIGN FOR MOBILITY

Slide 30

Slide 30 text

By Android Auto UI/UX DESIGN FOR MOBILITY

Slide 31

Slide 31 text

By Holoride UI/UX DESIGN FOR MOBILITY

Slide 32

Slide 32 text

By Tesla UI/UX DESIGN FOR MOBILITY

Slide 33

Slide 33 text

By Waymo UI/UX DESIGN FOR MOBILITY

Slide 34

Slide 34 text

By Waymo UI/UX DESIGN FOR MOBILITY

Slide 35

Slide 35 text

By Uber ౸ண࣌ؒ αʔϏε φϏήʔγϣϯ ӡస ৐ंϧʔτ ं྆඼࣭ ͦͷଞ UI/UX DESIGN FOR MOBILITY

Slide 36

Slide 36 text

UI/UX DESIGN FOR MOBILITY By JR౦೔ຊ

Slide 37

Slide 37 text

UI/UX DESIGN FOR MOBILITY Horai EMot my route LUUP aimo WHILL docomo bike share Multimodal Single-mode JR East JR East WILLERS Whim ANA Uber Special Public

Slide 38

Slide 38 text

MaaS CTRL ʮ.BB4ίϯτϩʔϥʔʯͱ͸ɺϢʔ βʔ޲͚.BB4ΞϓϦͷ͜ͱ͚ͩͰ͸ ͳ͘ɺࣄۀऀ΍࣏ࣗମ޲͚ͷσʔλ ՄࢹԽ΍෼ੳɺ੍ޚΛ͢Δ͜ͱΛࢦ ͢ɻ ϢʔβʔͱϞϏϦςΟͷؔ܎Λվળ ͠ɺϢʔβʔͷརศੑΛ͞Βʹ޲্ ͢Δ͜ͱʹͳΔɻ UI/UX DESIGN FOR MOBILITY MaaS CTRL

Slide 39

Slide 39 text

10$ͷॏཁੑ THE IMPORTANCE OF “POC" 03

Slide 40

Slide 40 text

By NISSAN #TMS2019 UI/UX DESIGN FOR MOBILITY

Slide 41

Slide 41 text

UX Research σβΠϯϑΣʔζΑΓલͷاըϑΣʔ ζʹ͓͍ͯɺ69ϦαʔνΛ͢Δ͜ͱ Ͱɺاըͷਫ਼౓Λ޲্ͤ͞ΔऔΓ૊Έ ʹͭͳ͕Γ·͢ɻ UI/UX DESIGN FOR MOBILITY σβΠϯ اը ࣮ݧ ։ൃ

Slide 42

Slide 42 text

By NISSAN Ariya Concept UI/UX DESIGN FOR MOBILITY

Slide 43

Slide 43 text

By NISSAN IMk Concept UI/UX DESIGN FOR MOBILITY

Slide 44

Slide 44 text

Ideation νʔϜ͕ڞಉϫʔΫγϣοϓ΍Ϣʔ βʔௐࠪɺݕূʹࢀՃ͢Δ͜ͱͰɺҙ ࢥͷڞ༗͕͠΍͘͢ͳΓ·͢ɻ UI/UX DESIGN FOR MOBILITY ϫʔΫγϣοϓ ௐࠪ ݕূɾ࣮ݧ σβΠϯ اը ࣮ݧ ։ൃ

Slide 45

Slide 45 text

MaaS x Card σβΠφʔ΍ϊϯσβΠφʔ޲͚ʹ։ ൃͨ͠ϫʔΫγϣοϓσβΠϯπʔ ϧɻ Ҡಈʢओʹެڞަ௨αʔϏεʣʹ· ͭΘΔϢʔβʔମݧΛՄࢹԽͨ͠ ΧʔυͰɺަ௨ࣄۀऀ΍ࣗಈंձࣾ ͳͲͷاը΍σβΠϯʹܞΘΔํʹར ༻ͯ͠΋Β͏͜ͱͰɺϢʔβʔମݧͷ ޲্ʹߩݙ͢ΔऔΓ૊Έɻ UI/UX DESIGN FOR MOBILITY

Slide 46

Slide 46 text

UX ϓϩηε͸ઢܗͰ͸ͳ͘ɺαΠΫϧ͢ Λ೦಄ʹஔ͘ͱΘ͔Γ΍͍͢ɻߟ͑ Δ΂͖λΠϛϯάͱ͍͏ͷ͸Ұ୴ແ ࢹͯ͠औΓ૊Ή͜ͱͰɺઌʹΞ΢τ ϓοτ͕ੜ·ΕΔɻ Ξ΢τϓοτΛઌ಄ʹߟ͑ΔͨΊʹ ͸ɺ໾ׂ෼୲ΑΓઌʹࣗ਎ͷମݧ͔ Βߟ͑ΔบΛ͚͓ͭͯ͘͜ͱ͕େ੾ Ͱ͋Δɻ UI/UX DESIGN FOR MOBILITY اըϑΣʔζʹ͓͚ΔσβΠϯͰ͋Δ ࡞Δͱݕূ͸ৗʹαΠΫϧ͢Δ Ϣʔβʔମݧͱ͸ࣗ਎ͷମݧͰ͋Δ

Slide 47

Slide 47 text

Carrozzeria Facebook Page / Group #Mobility #MaaS UI/UX DESIGN FOR MOBILITY

Slide 48

Slide 48 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ THANKS FOR YOUR ATTENTION! FIN Mede by Takashi Sakamoto @bookslope