Mode Power to You

モーダル遷移、プッシュ遷移のどちらを利用すべきか明確に説明できますか？モードについての考え方は、OSアプリを構成する重要な要素です。デバイスの大画面化やApp上のタスクの複雑化に合わせて、標準アプリも新しいモーダルデザインが導入されています。このトークでは、モードについての基礎的な考え方から、昨今の進化したモーダル/モードレスデザインについて「Wantedly Visit」での実例を交えながらご紹介します。

Transcript

1. ©2018 Wantedly, Inc.
   Mode power to you
   Ore-Con 2018
   13.Sep.2018 - Ryo Usami
   

   View Slide

2. Wantedly, Inc.
   2
   Ryo Usami
   

   View Slide

3. Wantedly, Inc.
   3
   5 keywords about Ryo Usami
   1. Designer at Wantedly, Inc.
   2. @usa619_
   3. Age 22
   4.
   5. Trip
   

   View Slide

4. ©2018 Wantedly, Inc.
   Trip to Kochi
   

   View Slide

5. ©2018 Wantedly, Inc.
   

   View Slide

6. ©2018 Wantedly, Inc.
   Freedom makes creativity
   The Legend of Zelda: Breath of the Wild
   

   View Slide

7. ©2018 Wantedly, Inc.
   Freedom requires creativity
   

   View Slide

8. ©2018 Wantedly, Inc.
   Freedom and creativity
   

   View Slide

9. ©2018 Wantedly, Inc.
   
   

   View Slide

10. ©2018 Wantedly, Inc. Source: https://gamebanana.com/skins/158235
    

    View Slide

11. ©2018 Wantedly, Inc.
    A tool is not for controlling people,
    controlled by people
    

    View Slide

12. ©2018 Wantedly, Inc.
    Designing Fluid Interfaces (WWDC2018)
    

    View Slide

13. ©2018 Wantedly, Inc.
    Designing Fluid Interfaces (WWDC2018)
    iPhone is a tool
    

    View Slide

14. ©2018 Wantedly, Inc.
    Designing Fluid Interfaces (WWDC2018)
    “iPhone is a tool
    for information or communication”
    

    View Slide

15. ©2018 Wantedly, Inc.
    “A tool that feels like
    an extension of your mind”
    

    View Slide

16. ©2018 Wantedly, Inc.
    iOS App is a tool
    Page Title Page Subtitle
    

    View Slide

17. ©2018 Wantedly, Inc.
    iOS Developer
    Page Subtitle
    Tool Developer
    =
    

    View Slide

18. ©2018 Wantedly, Inc.
    How should we do?
    Page Subtitle
    To create a tool that feels like an extension of your mind
    To create a world filled with freedom and creativity
    

    View Slide

19. ©2018 Wantedly, Inc.
    Page Subtitle
    Modeless
    

    View Slide

20. ©2018 Wantedly, Inc.
    What’s the “mode”
    Modal and modeless
    

    View Slide

21. ©2018 Wantedly, Inc.
    Page Subtitle
    Modal
    

    View Slide

22. ©2018 Wantedly, Inc.
    Page Subtitle
    Modal View
    

    View Slide

23. ©2018 Wantedly, Inc.
    Page Subtitle
    

    View Slide

24. ©2018 Wantedly, Inc.
    Page Subtitle
    λΠϜϥΠϯ
    πΠʔτΛݟΔ πΠʔτΛݟΔ
    ౤ߘ͢Δ
    πΠʔτΛ࡞੒͢Δ
    

    View Slide

25. ©2018 Wantedly, Inc.
    Page Subtitle
    λΠϜϥΠϯ
    πΠʔτΛݟΔ πΠʔτΛݟΔ
    ౤ߘ͢Δ
    πΠʔτΛ࡞੒͢Δ
    

    View Slide

26. ©2018 Wantedly, Inc.
    Page Subtitle
    Modality creates focus by preventing people
    from doing other things until they complete
    a task or dismiss a message or view.
    Modality - Apple Human Interface Guidelines
    

    View Slide

27. ©2018 Wantedly, Inc.
    Page Subtitle
    It(*modal) locks the user into one operation
    and doesn’t allow the user to work on anything
    else until that operation is completed.
    Modelessness - Macintosh Human Interface Guidelines(1995)
    

    View Slide

28. ©2018 Wantedly, Inc.
    Page Subtitle
    Modal
    

    View Slide

29. ©2018 Wantedly, Inc.
    

    View Slide

30. ©2018 Wantedly, Inc.
    Normal mode
    Page Subtitle
    on
    Select mode
    Visual mode
    Insert mode
    Commandline mode
    

    View Slide

31. ©2018 Wantedly, Inc.
    Page Subtitle
    Why is that difficult?
    

    View Slide

32. ©2018 Wantedly, Inc.
    Page Subtitle
    A tool in real doesn’t have mode
    

    View Slide

33. ©2018 Wantedly, Inc.
    
    

    View Slide

34. ©2018 Wantedly, Inc.
    Page Subtitle
    Modeless
    

    View Slide

35. ©2018 Wantedly, Inc.
    iOS Developer
    Page Subtitle
    Tool Developer
    =
    

    View Slide

36. ©2018 Wantedly, Inc.
    An iOS App ->
    Page Subtitle
    A tool -> Modeless
    

    View Slide

37. ©2018 Wantedly, Inc.
    An iOS App -> Modeless
    Page Subtitle
    A tool -> Modeless
    

    View Slide

38. ©2018 Wantedly, Inc.
    ͲͷΑ͏ʹModelessΛ࣮ݱ͢Δ͔
    Object-Oriented UI
    

    View Slide

39. ©2018 Wantedly, Inc.
    Page Subtitle
    Modal
    λεΫͷखॱΛॏࢹ͢Δ
    

    View Slide

40. ©2018 Wantedly, Inc.
    Page Subtitle
    Modeless
    Modal
    λεΫͷखॱΛॏࢹ͢Δ
    ର৅ͷΦϒδΣΫτΛॏࢹ͢Δ
    

    View Slide

41. ©2018 Wantedly, Inc.
    Page Subtitle
    Make Object-Oriented
    

    View Slide

42. ©2018 Wantedly, Inc.
    ໊ࢺಈࢺ
    ৗʹର৅ΦϒδΣΫτΛݟͤΔ
    ಉ͡ݟͨ໨ͷ΋ͷ͸ಉ͡ৼΔ෣͍Λ
    ՄٯੑΛ୲อ͢Δ
    To make Object-Oriented
    

    View Slide

43. ©2018 Wantedly, Inc.
    ໊ࢺಈࢺ
    ৗʹର৅ΦϒδΣΫτΛݟͤΔ
    ಉ͡ݟͨ໨ͷ΋ͷ͸ಉ͡ৼΔ෣͍Λ
    ՄٯੑΛ୲อ͢Δ
    To make Object-Oriented
    

    View Slide

44. ©2018 Wantedly, Inc.
    ໊ࢺಈࢺ
    

    View Slide

45. ©2018 Wantedly, Inc.
    ϋϯϚʔΛଧͭ·Ͱ
    ಈࢺ໊ࢺ
    ԿΛଧͱ͏ʁ
    ଧͱ͏ ఝΛଧͱ͏ ଧͭ
    ԿͰଧͱ͏ʁ ϋϯϚʔͰଧͱ͏
    

    View Slide

46. ©2018 Wantedly, Inc.
    ఝΛ࣋ͭ
    ϋϯϚʔΛ࣋ͭ ϋϯϚʔͰఝΛଧͱ͏ ଧͭ
    ϋϯϚʔΛଧͭ·Ͱ
    ໊ࢺಈࢺ
    

    View Slide

47. ©2018 Wantedly, Inc.
    

    View Slide

48. ©2018 Wantedly, Inc.
    Choose tweet to action
    

    View Slide

49. ©2018 Wantedly, Inc.
    

    View Slide

50. ©2018 Wantedly, Inc.
    ໊ࢺಈࢺ
    ৗʹର৅ΦϒδΣΫτΛݟͤΔ
    ಉ͡ݟͨ໨ͷ΋ͷ͸ಉ͡ৼΔ෣͍Λ
    ՄٯੑΛ୲อ͢Δ
    To make Object-Oriented
    

    View Slide

51. ©2018 Wantedly, Inc.
    

    View Slide

52. ©2018 Wantedly, Inc.
    ໊ࢺಈࢺ
    ৗʹର৅ΦϒδΣΫτΛݟͤΔ
    ಉ͡ݟͨ໨ͷ΋ͷ͸ಉ͡ৼΔ෣͍Λ
    ՄٯੑΛ୲อ͢Δ
    To make Object-Oriented
    

    View Slide

53. ©2018 Wantedly, Inc.
    
    

    View Slide

54. ©2018 Wantedly, Inc.
    ۭؒΛ۠੾Δ
    ։ดͰ͖Δ
    ग़ೖΓ͢ΔਓΛ੍ݶͰ͖Δ ࢪৣ
    
    υΞͷػೳ
    

    View Slide

55. ©2018 Wantedly, Inc.
    ࠓ೔͜͜ʹདྷΔ·ͰυΞΛ
    ͍ͭ͘ར༻͠·͔ͨ͠ʁ
    

    View Slide

56. ©2018 Wantedly, Inc.
    ©Richard Thomas
    

    View Slide

57. ©2018 Wantedly, Inc.
    ͳͥɺҙࣝ͠ͳ͍ͷ͔ʁ
    

    View Slide

58. ©2018 Wantedly, Inc.
    ˠ
    ͢Ͱʹ Կ౓΋
    ར༻ͨ͜͠ͱ͕͔͋ͬͨΒ
    υΞʹݟ͑Δ΋ͷ͸ಉ͡ৼΔ෣͍Λͯ͘͠ΕΔ͔Β
    υΞͷར༻ͷ͞Εํ͕ಉ͔ͩ͡Β
    

    View Slide

59. ©2018 Wantedly, Inc.
    
    

    View Slide

60. ©2018 Wantedly, Inc.
    

    View Slide

61. ©2018 Wantedly, Inc.
    

    View Slide

62. ©2018 Wantedly, Inc.
    

    View Slide

63. ©2018 Wantedly, Inc.
    ಉ͡ݟͨ໨ͷ΋ͷ͸ಉ͡ৼΔ෣͍Λ
    

    View Slide

64. ©2018 Wantedly, Inc.
    ໊ࢺಈࢺ
    ৗʹର৅ΦϒδΣΫτΛݟͤΔ
    ಉ͡ݟͨ໨ͷ΋ͷ͸ಉ͡ৼΔ෣͍Λ
    ՄٯੑΛ୲อ͢Δ
    To make Object-Oriented
    

    View Slide

65. ©2018 Wantedly, Inc.
    Page Subtitle
    Make destructive choices prominent. Use red for
    buttons that perform destructive or dangerous actions,
    and display these buttons at the top of an action sheet.
    Action Sheet - Apple Human Interface Guidelines
    

    View Slide

66. ©2018 Wantedly, Inc.
    

    View Slide

67. ©2018 Wantedly, Inc.
    Page Subtitle
    Modeless
    

    View Slide

68. ©2018 Wantedly, Inc.
    &OFNZPG.PEFMFTT
    

    View Slide

69. ©2018 Wantedly, Inc.
    Page Subtitle
    1. Freedom and creativity
    

    View Slide

70. ©2018 Wantedly, Inc.
    Page Subtitle
    Modeless requires creativity
    

    View Slide

71. ©2018 Wantedly, Inc.
    

    View Slide

72. ©2018 Wantedly, Inc.
    Page Subtitle
    0CKFDU0SJFOUFEΛΊͪΌͪ͘Όେ੾ʹ͢Δ
    

    View Slide

73. ©2018 Wantedly, Inc.
    Page Subtitle
    Hint!
    

    View Slide

74. ©2018 Wantedly, Inc.
    Page Subtitle
    ͢΂͕ͯϞʔυϨεͳΒɺ࢖͍΍͍͢ʁ
    

    View Slide

75. ©2018 Wantedly, Inc.
    Page Subtitle
    &
    Especially on a mobile devie
    

    View Slide

76. ©2018 Wantedly, Inc.
    Page Subtitle
    1$ΑΓѹ౗తʹখ͍͞σΟεϓϨΠ
    ˠ
    ͦ΋ͦ΋ʜ
    γϯϓϧʹ͢ΔͨΊʹϞʔυΛಋೖͨ͠
    

    View Slide

77. ©2018 Wantedly, Inc.
    Ͳ͏΍ͬͯղܾ͢Δ͔
    

    View Slide

78. ©2018 Wantedly, Inc.
    * Ϟʔυ͕ඞཁͳ΄ͲෳࡶͳλεΫͳͷ͔
    

    View Slide

79. ©2018 Wantedly, Inc.
    ** Ϟʔυͷதʹ͍Δ͜ͱΛ໌ࣔ͢Δ
    

    View Slide

80. ©2018 Wantedly, Inc.
    

    View Slide

81. ©2018 Wantedly, Inc.
    ***Ωϟϯηϧ Ϟʔυ͔Βͷ཭୤
    Λ໌ࣔ͢Δ
    

    View Slide

82. ©2018 Wantedly, Inc.
    

    View Slide

83. ©2018 Wantedly, Inc.
    *7׬શͳϞʔυʹ͢Δඞཁ͕͋Δ͔
    

    View Slide

84. ©2018 Wantedly, Inc.
    2007 → 2017
    

    View Slide

85. ©2018 Wantedly, Inc.
    Today
    iPhone XS Max
    

    View Slide

86. ©2018 Wantedly, Inc.
    Semi-Modal View
    

    View Slide

87. ©2018 Wantedly, Inc.
    

    View Slide

88. ©2018 Wantedly, Inc.
    Semi-Modal View
    Is not Half-Modal View
    

    View Slide

89. ©2018 Wantedly, Inc.
    l൒ʢ4FNJʣͱ͍͏ͷ͸ը໘ͷେ͖͕͞൒෼ʢ)BMGʣͱ͍͏ҙ
    ຯͰ͸͋Γ·ͤΜ͕ɺҰ෦ͷΞϓϦέʔγϣϯͰ͸ݩ͍ͨը໘͕
    νϥݟ͑͢ΔදݱʹΑͬͯϢʔβʔ͕୹ظهԱ͔ΒҎલͷग़དྷࣄ
    Λ׬શʹ๨٫ͤͣʹ৽ͨͳը໘ͱ޲͖߹͑ΔΑ͏ʹ͍ͯ͠·͢ɻz
    J04ʹ͓͚Δ൒ϞʔμϧϏϡʔͷղऍ!VTBHJNBSV
    

    View Slide

90. ©2018 Wantedly, Inc.
    

    View Slide

91. ©2018 Wantedly, Inc.
    * Ϟʔυ͕ඞཁͳ΄ͲෳࡶͳλεΫͳͷ͔
    ** Ϟʔυͷதʹ͍Δ͜ͱΛ໌ࣔ͢Δ
    ***Ωϟϯηϧ Ϟʔυ͔Βͷ཭୤
    Λ໌ࣔ͢Δ
    *7׬શͳϞʔυʹ͢Δඞཁ͕͋Δ͔
    .PEFΛݮΒͨ͢Ίʹ
    

    View Slide

92. ©2018 Wantedly, Inc.
    Page Subtitle
    ̏(SPXUI)BDL
    

    View Slide

93. ©2018 Wantedly, Inc.
    Page Subtitle
    8F`SFCVJMEJOHBUPPM
    

    View Slide

94. ©2018 Wantedly, Inc.
    Page Subtitle
    8F`SFCVJMEJOHBUPPMUIBUGFFMTMJLF
    BOFYUFOTJPOPGZPVSNJOE
    

    View Slide

95. ©2018 Wantedly, Inc.
    A tool is not for controlling people,
    controlled by people
    

    View Slide

96. ©2018 Wantedly, Inc.
    An app is not for controlling people,
    controlled by people
    

    View Slide

97. ©2018 Wantedly, Inc.
    An Interface is not for controlling people,
    controlled by people
    

    View Slide

98. ©2018 Wantedly, Inc.
    Creativity
    

    View Slide

99. ©2018 Wantedly, Inc.
    Mode power to you
    

    View Slide

100. ©2018 Wantedly, Inc.
     End
     

     View Slide

101. ©2018 Wantedly, Inc.
     @usa619_
     'PMMPXNFPO5XJUUFS
     

     View Slide

102. ©2018 Wantedly, Inc.
     Thank you
     

     View Slide