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

by rockname

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

mixi, Inc. ࣗݾ঺հ ϩΫωϜ / rockname • ϛΫγΟͰʮՈ଒ΞϧόϜΈͯͶʯͱ͍͏ΞϓϦΛ  ։ൃͯ͠Δ • iOSϝΠϯɺAndroid, RailsͳͲ΋ॻ͍ͯΔ • εϚϒϥ͕޷͖

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

ॳճͷಡΈࠐΈॲཧ

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

௥ՃͷಡΈࠐΈॲཧ

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Thank you!!!