モバイルアプリのリスト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
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!!!