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

Transcript

1. ϞόΠϧΞϓϦͷϦετUIʹ͓͚Δ
 ཧ૝తͳStateදࣔʹ͍ͭͯ גࣜձࣾϛΫγΟ ΈͯͶࣄۀ෦ ϩΫωϜ @_rockname

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

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

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

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

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

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

7. mixi, Inc. ϦετUIʹ͓͚Δ͞·͟·ͳState • ϦετUIͰ͸ɺॳճʹίϯςϯπΛಡΈࠐΉॲཧ͕૸Δ • ͞ΒʹɺϦετͷ্୺, Լ୺͔Β௥ՃͰಡΈࠐΉॲཧ΋ଘࡏ͢Δ • ಡΈࠐΈॲཧ͔Β͸ʮ੒ޭʯʮࣦഊʯʮۭʯͷେ͖͘3ύλʔϯͷ݁Ռ͕ಘΒΕΔ

   • ॳճ͓Αͼ௥ՃͷಡΈࠐΈॲཧʹ͓͚ΔಡΈࠐΈதͷStateɺ͞Βʹ͔ͦ͜ΒಘΒΕΔ݁ ՌͷStateΛ߹ΘͤΔͱɺϦετUIͰ͸දࣔ͢΂͖State͕਺ଟ͘ଘࡏ͍ͯ͠Δ͜ͱ͕Θ͔ Δ

8. ॳճͷಡΈࠐΈॲཧ

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

   Δύλʔϯ͕ڍ͛ΒΕΔ

10. mixi, Inc. Human Interface Guidelines • AppleͷHuman Interface GuidelinesͷLoadingͷ߲໨ʹ͸ɺʮ͙͢ʹը໘Λදࣔ͠ɺίϯ ςϯπ͕·ͩར༻Ͱ͖ͳ͍৔ॴΛࣔͨ͢ΊʹɺϓϨʔεϗϧμʔͷςΩετɺάϥϑΟο

    ΫɺΞχϝʔγϣϯΛ࢖༻͢Δɻʯͱ͍͏Α͏ʹه͞Ε͍ͯΔ https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/loading/

11. mixi, Inc. Skeleton Screen • ίϯςϯπ͕׬શʹಡΈࠐ·ΕΔલʹϓϨʔεϗϧμʔΛදࣔ ͢ΔUIύλʔϯͱͯ͠ɺSkeleton Screenͱ͍͏ख๏͕ଘࡏ͢Δ • IndicatorΛදࣔ͢Δ͚ͩͷύλʔϯͱ͸ҧͬͯɺͲ͜ʹԿ͕ಡ

    Έࠐ·ΕΔ͔ͱ͍͏৘ใΛϓϨʔεϗϧμʔͰࣔ͢͜ͱʹΑ ΓɺಡΈࠐΈͷϓϩηεͰ͸ͳ͘දࣔ͞ΕΔίϯςϯπ΁Ϣʔ βʔͷҙ͕ࣝ޲͖ɺମײͷ଴͕ͪ࣌ؒݮগ͢ΔޮՌ͕ಘΒΕΔ • SwiftUIͰ͸؆୯ʹ࣮૷Ͱ͖ΔAPI͕ఏڙ͞Ε͍ͯΔɺJetpack ComposeͰ΋Googleఏڙͷ֦ுϥΠϒϥϦͰ؆୯ͳ࣮૷͕Մ ೳ

12. mixi, Inc. ॳճͷಡΈࠐΈॲཧ -Error State- • ॳճͷಡΈࠐΈॲཧʹ͓͚ΔΤϥʔදࣔʹ͍ͭͯߟ͑Δ • Alert΍DialogΛදࣔͯ͠ϢʔβʔΛϞʔμϧ΁ભҠͤ͞ ͯ͠·͏͜ͱ͸ආ͚͍ͨ

    • ίϯςϯπ͕ಡΈࠐ·ΕΔ͸ͣͩͬͨ৔ॴʹɺԿ͕ى͖ ͔ͨΛϢʔβʔ΁Θ͔Γ΍͘͢දࣔͰ͖Δͱྑ͍ • ϦτϥΠͷಋઢ·ͰදࣔͰ͖͍ͯΔͱͳ͓ྑ͍ https://material.io/archive/guidelines/patterns/errors.html#errors-app-errors

13. mixi, Inc. ॳճͷಡΈࠐΈॲཧ -Empty State- • ॳճͷಡΈࠐΈॲཧʹ͓͚Δۭදࣔʹ͍͍ͭͯͭͯߟ͑ Δ • Կ΋දࣔ͠ͳ͔ͬͨ৔߹ɺϢʔβʔʹͱͬͯ͸ͦΕ͕Τ

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

14. ௥ՃͷಡΈࠐΈॲཧ

15. mixi, Inc. ௥ՃͷಡΈࠐΈॲཧ -Loading State- • ϦετUIͷ্Լ͔Β௥ՃͰίϯςϯπΛಡΈࠐΉࡍͷಡ ΈࠐΈதදࣔʹ͍ͭͯߟ͑Δ • ্͔ΒͷಡΈࠐΈ͸ɺPull

    to Refresh͕ύλʔϯͱͯ͠ڍ ͛ΒΕΔ • Լ͔ΒͷಡΈࠐΈ͸ɺϦετ͕Լ·ͰεΫϩʔϧͨ͠ࡍ ʹInidicatorΛԼ෦ʹදࣔ͢Δύλʔϯ͕ߟ͑ΒΕΔ • ௥ՃಡΈࠐΈॲཧ͕ൃੜ͢Δ৔ॴʹద੾ʹIndicatorΛ഑ ஔ͢Δͷ͕ྑ͍

16. mixi, Inc. ௥ՃͷಡΈࠐΈॲཧ -Error State- • ௥ՃͷಡΈࠐΈॲཧʹ͓͚ΔΤϥʔදࣔʹ͍ͭͯߟ͑Δ • Alert΍DialogʹΑΔදࣔ͸΍͸Γආ͚͍ͨ •

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

17. mixi, Inc. ௥ՃͷಡΈࠐΈॲཧ -Empty State- • ௥ՃͷಡΈࠐΈॲཧʹ͓͚Δۭදࣔʹ͍ͭͯߟ͑Δ • ॳճͷಡΈࠐΈॲཧͱ͸ҧ͍ϢʔβʔΛҊ಺͢Δඞཁ΋ ಛʹͳ͍ͨΊɺԿ͔Empty

    Stateͱͯ͠දࣔ͢Δඞཁ΋ͳ ͍ͩΖ͏ • গ͠εϖʔεΛ࣋ͨͤͯ͋͛Δͱʮۭ͔ͩͬͨΒ͜ΕҎ ্͸ಡΈࠐΊͳ͍ʯͱ͍͏͜ͱ͕Ϣʔβʔʹ఻ΘΓ΍͢ ͘ͳΔ͔΋͠Εͳ͍ (Twitter͸ͦͷΑ͏ʹͳ͍ͬͯΔ)

18. mixi, Inc. ·ͱΊ • ϦετUIͰѻ͏΂͖State͸ҙ֎ͱଟ͘ɺ࢓༷ͱͯ͠දݱ͞Εͳ͍··งғؾͰ࣮૷͕ਐ Ή͜ͱ΋ଟ͍ • งғؾͰͷ࣮૷ʹͳͬͯ͠·͏ཧ༝͸ɺ֬ೝͳͲͷίϛϡχέʔγϣϯίετ͕ߴ͍͔Β • ࠓճ͓࿩ͨ͠͠Α͏ͳύλʔϯʹ͍ͭͯ͋Β͔͡ΊνʔϜͰڞ௨ೝࣝΛ߹ΘͤͯΨΠυϥ

    ΠϯԽͰ͖͍ͯΔͱɺίϛϡχέʔγϣϯίετΛ࡟ݮͭͭ͠ΤϯδχΞ͕ࣗ཯తʹ࣮૷ Ͱ͖Δ • ΈͯͶͰ͸͜ͷΑ͏ͳΨΠυϥΠϯΛσβΠϯγεςϜͷҰ෦ͱͯ͠σβΠφʔͱڠྗ͠ ͭͭΤϯδχΞओಋͰӶҙ੍࡞த💪

19. Thank you!!!