モバイルアプリのリストUIにおける 理想的なState表示について / The ideal state display in a mobile app list UI

[Online] potatotips #76 iOS/Android開発Tips共有会
https://potatotips.connpass.com/event/224395/

Transcript

1. ϞόΠϧΞϓϦͷϦετUIʹ͓͚Δ

   ཧ૝తͳStateදࣔʹ͍ͭͯ
   גࣜձࣾϛΫγΟ ΈͯͶࣄۀ෦
   ϩΫωϜ @_rockname
   

   View Slide

2. mixi, Inc.
   ࣗݾ঺հ
   ϩΫωϜ / rockname
   • ϛΫγΟͰʮՈ଒ΞϧόϜΈͯͶʯͱ͍͏ΞϓϦΛ

   ։ൃͯ͠Δ
   • iOSϝΠϯɺAndroid, RailsͳͲ΋ॻ͍ͯΔ
   • εϚϒϥ͕޷͖
   

   View Slide

3. mixi, Inc.
   ϦετUIʹ͍ͭͯ
   • ྫ͑͹ɺʮ͜Μͳը໘Λ࣮૷͍ͯͩ͘͠͞ʯͱσβΠφʔ͔ΒFigma͕ڞ༗͞Εͨͱ͢Δ
   

   View Slide

4. mixi, Inc.
   ಡΈࠐΈத͸ͲΜͳUIʁ
   

   View Slide

5. mixi, Inc.
   ಡΈࠐΈʹࣦഊͨ͠Βʁ
   ಡΈࠐΈத͸ͲΜͳUIʁ
   

   View Slide

6. mixi, Inc.
   ಡΈࠐΈத͸ͲΜͳUIʁ
   ಡΈࠐΈʹࣦഊͨ͠Βʁ
   ಡΈࠐΜͩϦετ͕ۭͩͬͨΒʁ
   

   View Slide

7. mixi, Inc.
   ϦετUIʹ͓͚Δ͞·͟·ͳState
   • ϦετUIͰ͸ɺॳճʹίϯςϯπΛಡΈࠐΉॲཧ͕૸Δ
   • ͞ΒʹɺϦετͷ্୺, Լ୺͔Β௥ՃͰಡΈࠐΉॲཧ΋ଘࡏ͢Δ
   • ಡΈࠐΈॲཧ͔Β͸ʮ੒ޭʯʮࣦഊʯʮۭʯͷେ͖͘3ύλʔϯͷ݁Ռ͕ಘΒΕΔ
   • ॳճ͓Αͼ௥ՃͷಡΈࠐΈॲཧʹ͓͚ΔಡΈࠐΈதͷStateɺ͞Βʹ͔ͦ͜ΒಘΒΕΔ݁
   ՌͷStateΛ߹ΘͤΔͱɺϦετUIͰ͸දࣔ͢΂͖State͕਺ଟ͘ଘࡏ͍ͯ͠Δ͜ͱ͕Θ͔
   Δ
   

   View Slide

8. ॳճͷಡΈࠐΈॲཧ
   

   View Slide

9. mixi, Inc.
   ॳճͷಡΈࠐΈॲཧ -Loading State-
   • ॳճͷಡΈࠐΈॲཧʹ͓͚ΔಡΈࠐΈதͷදࣔʹ
   ͍ͭͯߟ͑Δ
   • ҰൠతͳσβΠϯͱͯ͠ਅΜதʹIndicatorΛදࣔ͢
   Δύλʔϯ͕ڍ͛ΒΕΔ
   

   View Slide

10. mixi, Inc.
    Human Interface Guidelines
    • AppleͷHuman Interface GuidelinesͷLoadingͷ߲໨ʹ͸ɺʮ͙͢ʹը໘Λදࣔ͠ɺίϯ
    ςϯπ͕·ͩར༻Ͱ͖ͳ͍৔ॴΛࣔͨ͢ΊʹɺϓϨʔεϗϧμʔͷςΩετɺάϥϑΟο
    ΫɺΞχϝʔγϣϯΛ࢖༻͢Δɻʯͱ͍͏Α͏ʹه͞Ε͍ͯΔ
    https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/loading/
    

    View Slide

11. mixi, Inc.
    Skeleton Screen
    • ίϯςϯπ͕׬શʹಡΈࠐ·ΕΔલʹϓϨʔεϗϧμʔΛදࣔ
    ͢ΔUIύλʔϯͱͯ͠ɺSkeleton Screenͱ͍͏ख๏͕ଘࡏ͢Δ
    • IndicatorΛදࣔ͢Δ͚ͩͷύλʔϯͱ͸ҧͬͯɺͲ͜ʹԿ͕ಡ
    Έࠐ·ΕΔ͔ͱ͍͏৘ใΛϓϨʔεϗϧμʔͰࣔ͢͜ͱʹΑ
    ΓɺಡΈࠐΈͷϓϩηεͰ͸ͳ͘දࣔ͞ΕΔίϯςϯπ΁Ϣʔ
    βʔͷҙ͕ࣝ޲͖ɺମײͷ଴͕ͪ࣌ؒݮগ͢ΔޮՌ͕ಘΒΕΔ
    • SwiftUIͰ͸؆୯ʹ࣮૷Ͱ͖ΔAPI͕ఏڙ͞Ε͍ͯΔɺJetpack
    ComposeͰ΋Googleఏڙͷ֦ுϥΠϒϥϦͰ؆୯ͳ࣮૷͕Մ
    ೳ
    

    View Slide

12. mixi, Inc.
    ॳճͷಡΈࠐΈॲཧ -Error State-
    • ॳճͷಡΈࠐΈॲཧʹ͓͚ΔΤϥʔදࣔʹ͍ͭͯߟ͑Δ
    • Alert΍DialogΛදࣔͯ͠ϢʔβʔΛϞʔμϧ΁ભҠͤ͞
    ͯ͠·͏͜ͱ͸ආ͚͍ͨ
    • ίϯςϯπ͕ಡΈࠐ·ΕΔ͸ͣͩͬͨ৔ॴʹɺԿ͕ى͖
    ͔ͨΛϢʔβʔ΁Θ͔Γ΍͘͢දࣔͰ͖Δͱྑ͍
    • ϦτϥΠͷಋઢ·ͰදࣔͰ͖͍ͯΔͱͳ͓ྑ͍
    https://material.io/archive/guidelines/patterns/errors.html#errors-app-errors
    

    View Slide

13. mixi, Inc.
    ॳճͷಡΈࠐΈॲཧ -Empty State-
    • ॳճͷಡΈࠐΈॲཧʹ͓͚Δۭදࣔʹ͍͍ͭͯͭͯߟ͑
    Δ
    • Կ΋දࣔ͠ͳ͔ͬͨ৔߹ɺϢʔβʔʹͱͬͯ͸ͦΕ͕Τ
    ϥʔͳͷ͔ۭͨͩͳ͚ͩͳͷ͔൑ผ͕͔ͭͣɺόάͷΑ
    ͏ʹࢥΘΕͯ͠·͏
    • Τϥʔදࣔͱಉ༷ʹɺίϯςϯπ͕ಡΈࠐ·ΕΔ͸ͣ
    ͩͬͨ৔ॴʹɺϢʔβʔͷΞϓϦ΁ͷཧղΛଅਐΑ͏ͳ
    ԿΒ͔ͷಋઢΛදࣔͰ͖Δͱྑ͍
    https://material.io/design/communication/empty-states.html#content
    

    View Slide

14. ௥ՃͷಡΈࠐΈॲཧ
    

    View Slide

15. mixi, Inc.
    ௥ՃͷಡΈࠐΈॲཧ -Loading State-
    • ϦετUIͷ্Լ͔Β௥ՃͰίϯςϯπΛಡΈࠐΉࡍͷಡ
    ΈࠐΈதදࣔʹ͍ͭͯߟ͑Δ
    • ্͔ΒͷಡΈࠐΈ͸ɺPull to Refresh͕ύλʔϯͱͯ͠ڍ
    ͛ΒΕΔ
    • Լ͔ΒͷಡΈࠐΈ͸ɺϦετ͕Լ·ͰεΫϩʔϧͨ͠ࡍ
    ʹInidicatorΛԼ෦ʹදࣔ͢Δύλʔϯ͕ߟ͑ΒΕΔ
    • ௥ՃಡΈࠐΈॲཧ͕ൃੜ͢Δ৔ॴʹద੾ʹIndicatorΛ഑
    ஔ͢Δͷ͕ྑ͍
    

    View Slide

16. mixi, Inc.
    ௥ՃͷಡΈࠐΈॲཧ -Error State-
    • ௥ՃͷಡΈࠐΈॲཧʹ͓͚ΔΤϥʔදࣔʹ͍ͭͯߟ͑Δ
    • Alert΍DialogʹΑΔදࣔ͸΍͸Γආ͚͍ͨ
    • ॳճͷಡΈࠐΈॲཧʹ͓͚ΔΤϥʔදࣔͷΑ͏ʹը໘શମʹΤϥʔ
    දࣔΛͯ͠͠·͏ͷ΋ମݧͱͯ͠ѱ͍ͷͰආ͚Δ΂͖
    • AndroidͷSnackbarͷΑ͏ͳϢʔβʔͷૢ࡞Λதஅͤ͞ͳ͍ίϯϙʔ
    ωϯτΛ༻͍ͯΤϥʔΛ௨஌͢Δύλʔϯ͕ྑ͍
    • IndicatorΛද͍ࣔͯͨ͠ՕॴʹΤϥʔʹ͍ͭͯͷจݴΛදࣔͯ͋͛͠
    Δͷ΋Θ͔Γ΍ͯ͘͢ྑ͍ͩΖ͏ (Twitter͸ͦͷΑ͏ʹͳ͍ͬͯΔ)
    

    View Slide

17. mixi, Inc.
    ௥ՃͷಡΈࠐΈॲཧ -Empty State-
    • ௥ՃͷಡΈࠐΈॲཧʹ͓͚Δۭදࣔʹ͍ͭͯߟ͑Δ
    • ॳճͷಡΈࠐΈॲཧͱ͸ҧ͍ϢʔβʔΛҊ಺͢Δඞཁ΋
    ಛʹͳ͍ͨΊɺԿ͔Empty Stateͱͯ͠දࣔ͢Δඞཁ΋ͳ
    ͍ͩΖ͏
    • গ͠εϖʔεΛ࣋ͨͤͯ͋͛Δͱʮۭ͔ͩͬͨΒ͜ΕҎ
    ্͸ಡΈࠐΊͳ͍ʯͱ͍͏͜ͱ͕Ϣʔβʔʹ఻ΘΓ΍͢
    ͘ͳΔ͔΋͠Εͳ͍ (Twitter͸ͦͷΑ͏ʹͳ͍ͬͯΔ)
    

    View Slide

18. mixi, Inc.
    ·ͱΊ
    • ϦετUIͰѻ͏΂͖State͸ҙ֎ͱଟ͘ɺ࢓༷ͱͯ͠දݱ͞Εͳ͍··งғؾͰ࣮૷͕ਐ
    Ή͜ͱ΋ଟ͍
    • งғؾͰͷ࣮૷ʹͳͬͯ͠·͏ཧ༝͸ɺ֬ೝͳͲͷίϛϡχέʔγϣϯίετ͕ߴ͍͔Β
    • ࠓճ͓࿩ͨ͠͠Α͏ͳύλʔϯʹ͍ͭͯ͋Β͔͡ΊνʔϜͰڞ௨ೝࣝΛ߹ΘͤͯΨΠυϥ
    ΠϯԽͰ͖͍ͯΔͱɺίϛϡχέʔγϣϯίετΛ࡟ݮͭͭ͠ΤϯδχΞ͕ࣗ཯తʹ࣮૷
    Ͱ͖Δ
    • ΈͯͶͰ͸͜ͷΑ͏ͳΨΠυϥΠϯΛσβΠϯγεςϜͷҰ෦ͱͯ͠σβΠφʔͱڠྗ͠
    ͭͭΤϯδχΞओಋͰӶҙ੍࡞த💪
    

    View Slide

19. Thank you!!!
    

    View Slide