UI/UX Design for Mobility

Transcript

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

   View Slide

2. PROFILE
   ͸͡Ί·ͯ͠
   UI/UX DESIGN FOR MOBILITY
   εϚʔτϞϏϦςΟࣄۀਪਐࣨࣨ௕

   ৘ใઃܭɾ69σβΠϯ͕ઐ໳ྖҬ
   ΦϯϥΠϯίϛϡχςΟӡӦ

   دߘɾߨԋଟ਺

   ஶ࡞ʰ*"γϯΩϯάʱͳͲ
   Mede by Takashi Sakamoto @bookslope
   

   View Slide

3. LAYER
   ࠓճͱΓ͋͛Δʮ6*69ʯͱ͸ɺϞϏ
   ϦςΟΛ୅ද͢Δࣗಈंͷӡస੮ʹ
   ΈΒΕΔϢʔβʔΠϯλʔϑΣʔε
   ʢ).*ʣΛऔΓ্͍͛ͯ·͢ɻ

   

   ).*ͱ͸ɺ)VNBO.BDIJOF
   *OUFSGBDFͷུͰɺਓؒͱػցͱͷؒ
   Ͱ৘ใͷ΍ΓͱΓΛߦ͏ڥքͱ͍͏
   ҙຯΛ࣋ͭɻ
   UI/UX DESIGN FOR MOBILITY
   Steering
   Smartphone
   Driver & Passenger
   City
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. By SpaceX Crew Dragon
   UI/UX DESIGN FOR MOBILITY
   

   View Slide

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

   View Slide

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

    View Slide

11. By NIO
    Nomi
    Infortainment
    Meter
    UI/UX DESIGN FOR MOBILITY
    

    View Slide

12. Infortainment
    By Polestar2
    UI/UX DESIGN FOR MOBILITY
    Meter
    

    View Slide

13. By Polestar Precept
    UI/UX DESIGN FOR MOBILITY
    Infortainment
    Meter
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. By Apple CarPlay
    UI/UX DESIGN FOR MOBILITY
    Apple CarPlay
    

    View Slide

18. By Android Auto
    UI/UX DESIGN FOR MOBILITY
    Android Auto
    

    View Slide

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

    View Slide

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

    View Slide

21. 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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. UI/UX DESIGN FOR MOBILITY
    

    View Slide

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

    View Slide

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

    View Slide

28. By Google Maps
    UI/UX DESIGN FOR MOBILITY
    

    View Slide

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

    View Slide

30. By Android Auto
    UI/UX DESIGN FOR MOBILITY
    

    View Slide

31. By Holoride
    UI/UX DESIGN FOR MOBILITY
    

    View Slide

32. By Tesla
    UI/UX DESIGN FOR MOBILITY
    

    View Slide

33. By Waymo
    UI/UX DESIGN FOR MOBILITY
    

    View Slide

34. By Waymo
    UI/UX DESIGN FOR MOBILITY
    

    View Slide

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

    View Slide

36. UI/UX DESIGN FOR MOBILITY
    By JR౦೔ຊ
    

    View Slide

37. 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
    

    View Slide

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

    View Slide

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

    View Slide

40. By NISSAN #TMS2019
    UI/UX DESIGN FOR MOBILITY
    

    View Slide

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

    View Slide

42. By NISSAN Ariya Concept
    UI/UX DESIGN FOR MOBILITY
    

    View Slide

43. By NISSAN IMk Concept
    UI/UX DESIGN FOR MOBILITY
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

48. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    THANKS FOR YOUR ATTENTION!
    FIN
    Mede by Takashi Sakamoto @bookslope
    

    View Slide