エラー処理のUIデザイン

Τϥʔॲཧͷ 6*σβΠϯ CZ5.0500," .PCJMF"DU50,:0 https://mobileact.connpass.com/event/104870/

"CPVUUIF4QFBLFS w 5.0500,"!U@NPUPPLB w $3.γεςϜͷίϯαϧɺडୗ։ൃɺӡ༻ɺFUDʜ w 8FC͹͔Γ w ඇˑੵۃ࠾༻தʢϦϞʔτɾ୹࣌ؒۈ຿ݶఆ࠾༻ʣ w
.BDJ04ΞϓϦझຯ։ൃऀ w ࠷ۙ"OESPJE୺຤Λങͬͨʢ(JOHFSCSFBEҎདྷʣ w 47(1%'खඳ͖

ओͨΔ࣮੷ͦͷ̍ "QQ4UPSFͰʮಥવͷࢮʯͰݕࡧŜŧŕ

ओͨΔ࣮੷ͦͷ̎ https://booth.pm/ja/items/1049475 ʮ47(खඳ͖ຊʯ ςΩετΤσΟλͱϒϥ΢βͰ ॻ͚Δɾඳ͚Δ 47(

ओͨΔ࣮੷ͦͷ̏ https://speakerdeck.com/motooka/mobairuapuritogdpr લճࢀՃ࣌ͷ ൃද಺༰ ˡ

ຊ୊ Τϥʔॲཧͷ6*σβΠϯ

ઌ݄͋ͬͨ൵͍͠ग़དྷࣄ w ๭ΫϨΧձࣾͷJ04ΞϓϦΛىಈ w ໊ࣾ΍ΞϓϦ໊͸࠙਌ձʹͯ w ىಈͯࣗ͠ಈͰϩάΠϯ͢Δ࢓૊Έ w
λΠϜΞ΢τ⏰ w *%ύεϫʔυೖྗը໘ʹҠಈ

ύεϫʔυΛ ؒҧ͑ͨ༁Ͱ΋ͳ͍ͷʹʁ *%ύεϫʔυೖྗը໘ʹҠಈ

͡Ό͋ɺͲ͏ͨ͠Β͍͍ͷ w ύεϫʔυ࠶ೖྗͤͣͱ΋ϦτϥΠͰ͖Δ6* w ΋͠΋ຊ౰ʹύεϫʔυؒҧ͑ͯͨΒ࠶ೖྗͤ͞Δ6* w 8FC͔Βύεϫʔυมߋͨ͠ͱ͖ͱ͔ w ͦͷͨΊʹ͸❓ w
Τϥʔ❗ͷݪҼ෼ੳ

ϩάΠϯΤϥʔͷ ܏޲ͱରࡦ

͋Γ͕ͪΤϥʔͦͷ̍ w ύεϫʔυؒҧ͍ w ͜Ε͸࠶ೖྗͯ͠΋Β͍·͠ΐ͏ w *%ؒҧ͍ w ͜Ε΋࠶ೖྗ w
ηΩϡϦςΟࣄ৘Ͱɺ18ؒҧ͍ʹॲཧΛ౷߹ w 8J'JP⒎ඈߦػϞʔυͦͷଞɺ௨৴ೳྗແ͠ w ʮग़௚͍ͯ͜͠řƄőşŐʯͱ͍͏BMFSUΛදࣔ

͋Γ͕ͪΤϥʔͦͷ̎ w ి೾͕ݍ֎ w Ұൠਓ͸ؾ෇͔ͣݍ֎ʹߦ͘ɻ w ࢲ΋ͦ͏͍͏৔ॴʹߦ͘ɻ w ͔ͩΒ༏͘͠ڭ͑ͯ͋͛Α͏ w
)551ϦΫΤετ͕λΠϜΞ΢τ w ͜Ε΍΍͍͔͜͠ΒޙͰ

͋Γ͕ͪΤϥʔͦͷ̏ w αʔόଆॲཧதʹి࿩ண৴ͨ͠ΓΞϓϦ੾Γସ͑ͨΓ w ߟ͑ͨ͘΋ͳ͍ w αʔόଆॲཧதʹ୺຤ిݯஅ w ిݯͳΜ͍ͯͭͰ΋ࢮ͵ w
࣍ճىಈ࣌ɺద੾ͳεςʔτͰىಈͰ͖Δ͔ͳ0 w αʔόଆॲཧதʹݍ֎ͳͱ͜Ζ΁ w ޙड़͢ΔλΠϜΞ΢τͱݟ෼͚͕͔ͭͳ͍ w ϦτϥΠઓུ͸λΠϜΞ΢τͱಉ͡

ϨΞ΋ͷΤϥʔͦͷ̍ w ໊લղܾͰ w λΠϜΞ΢τ w %/4తͳΤϥʔ w 5$16%1తͳΤϥʔ w
શ෦ʮճઢࢮΜͰΜͰʯͱݴ͍͍ͨͱ͜Ζ w %/4ḉࢮ๢ͬͯ͜ͱ΋͋Δ

ϨΞ΋ͷΤϥʔͦͷ̎ w 5$1*1ϋϯυγΣΠΫ໌ࣔతࣦഊʢ5$1345ʣ w αʔόো֐ͱ͔Ͱ͔͢Ͷ w ʮαʔϏεऴྃޙʯͱ͍͏ʢ͈́ w 5$1*1ϋϯυγΣΠΫதͷλΠϜΞ΢τʢແ"$,ʣ w
ಉ্ w ϑΝΠΞ΢ΥʔϧͷઃఆϛεͷՄೳੑʜʂ

ϨΞ΋ͷΤϥʔͦͷ̏ w 44-5-4ূ໌ॻΤϥʔ w .*5.߈ܸ w ௨৴ճઢͷ໰୊ͷՄೳੑͩͬͯ͋Δ w ʮαʔϏεऴྃޙʯͱ͍͏ʢ͈́ w
ূ໌ॻݕূʹෆ۩߹͋Δͷ͸੬ऑੑ w 伴ަ׵ͷλΠϜΞ΢τ w ͜Ε͸αʔόো֐ͬΆ͍ΑͶ w αʔϏεऴྃޙɺͩͬͨΒԿͰ΋ىͤͦ͜͏͚ͩͲ

ϨΞ΋ͷΤϥʔͦͷ̐ w )5513FRVFTUૹग़׬ྃલͷ5$1*1੾அ 5$1345 w ʢී௨ͷαʔό࣮૷ͳΒʣ·ͣॲཧͰ͖ͯͳ͍ΑͶ w ҋӢʹϦτϥΠͯ͠0,ͬΆ͍ w
)5513FTQPOTFड৴։࢝ޙͷ5$1*1੾அ w গͳ͘ͱ΋TUBUVTMJOF·Ͱ͸ಡΊΔ͸ͣʜʂ w ಉ͡*%18Ͱ࠶ࢼߦ͢΂͖͔൱͔ɺΘ͔ΔΑͶʁ w TFTTJPOUPLFOΛ࠷ޙͷจࣈ·Ͱϩʔυ׬ྃʁ֬ೝʂ w ਖ਼ৗऴྃ࣌ͷ݁Ռ͸+40/౳Ͱฦ͢ΑΓ΋  SFTQPOTFIFBEFSͰฦͨ͠ํ͕ڧ͍ΑͶ

ϨΞ΋ͷΤϥʔͦͷ̑ w σʔλվ͟ΜΛ5-4ͷػߏͰݕ஌ w େମ.*5.߈ܸ͔ͳ w CJUೖΕସΘΓωοτϫʔΫ w )551ϔομσίʔυࣦഊ w
αʔόϓϩηε్͕தͰࢮΜͩɺͱ͔ʁ w ྲྀੴʹ͜Ε͸ܹϨΞͰ͸ ϔομύέοτͰඈͿͬ͠ΐ w )551SFTQPOTFCPEZH[JQσίʔυࣦഊ w ʢ͜ͳ͍ͩ࢓ࣄͰ͜ΕʹϋϚͬͨʣ w αʔόϓϩηε్͕தͰࢮΜͩɺͱ͔

ϨΞ΋ͷΤϥʔͦͷ̒ w )551 w αʔϏεऴྃͯ͠Δʁʂ w αʔόଆσϓϩΠࣦഊͱ͔ʁ w )551 w
ૹ৴ͨ͠ύέοτ͕վ͟Μ͞Εͨͱ͔ʁ w )551YY w ͜Ε͸໌֬ʹαʔόো֐ͩͶɻ w ϨΞ͚ͩͲ࠶ݱ΋ରॲ΋؆୯ w ͑ͬɺϨΞ͡Όͳ͍ɺͩͬͯʁʂ

Ұ൪΍΍͍͜͠΍ͭ w )551ϦΫΤετૹग़׬ྃޙͷλΠϜΞ΢τ w αʔόଆͰ͸ॲཧ͕ਐΜͰΔ͔΋͠Εͳ͍ w ॲཧ͞Εͯͳ͍͔΋͠Εͳ͍ w ύεϫʔυؒҧ͑͗͢ϩοΫػߏ͕͋Δ৔߹ w
ϩάΠϯࢼߦ͸ႈ౳ͳॲཧ͡Όͳ͍ʂ w ෆ҆ఆͳి೾؀ڥͰҰൃϩοΫͨ͠Βٽ͚Δ

͜Μͳදࣔ௒ΧοίΠΠ w ౰αʔϏε͸ऴ͍ྃͯ͠·͢ɻ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ w αʔόͷॲཧʹ͕͔͔͍࣌ؒͬͯΔΑ͏Ͱ͢ɻ w αʔϏεͰো֐͕ൃੜ͍ͯ͠ΔΑ͏Ͱ͢ɻ w ͓࢖͍ͷճઢͰ͸ਖ਼͘͠௨৴Ͱ͖ͳ͍Α͏Ͱ͢ɻ ˞ΧοίΠΠͷ͸ద੾ʹग़͠෼͚Ͱ͖ͯΔਓʹݶΔ 
ɹʢදࣔ͢Δ͚ͩͳΒ୭Ͱ΋Ͱ͖Δʣ

·ͱΊ w Τϥʔʹ͸୔ࢁͷछྨ͕͋Δ❤ w ͦΕͧΕɺϢʔβ͕औΔ΂͖ߦಈ͸ҧ͏͔΋ w Ϣʔβͷߦಈ͕ҟͳΔ΂͖ͳΒɺσβΠϯ΋ҟͳΔ΂͖ w ΤϥʔରॲͷσβΠϯͦ͜6*ઃܭͷΩϞ w
ႈ౳ͳૢ࡞͔൱͔ʁ͸σβΠϯ޻ఔͰॏཁͳ֬ೝࣄ߲ w ΤϥʔݪҼΛ੾Γ෼͚Ͱ͖ͳ͍ʁ w ʮϥΠϒϥϦΤϥʔݪҼฦ͞ͳ͍ʯ͸؁͑ w ௿ϨϕϧͳੈքʹજΓࠐ΋͏ w ͜Ε͚ͩ୔ࢁߟ͑Δ͜ͱ͕͋Δ w ઃܭऀ>ɾ։ൃऀ?ڞʹߴ͍څ༩ΛٻΊΑ͏

ࢀߟจݙ w ϞόΠϧΞϓϦͷΤϥʔʹͲ͏ରॲ͢Δ͔ w ͍·஻ͬͨ͜ͱͱࣅͨ࿩ʢεϥΠυ࡞ͬͨޙʹؾ෇͍ͨʣ https://goodpatch.com/blog/how-to-deal-with-application-error/ w 4XJGUͷΤϥʔ෼ྨ͕ૉ੖Β͗͢͠ΔͷͰΈΜͳʹ஌ͬͯ΄͍͠ w 4XJGUͷݴޠϨϕϧͰݟͨΤϥʔ෼ྨ
https://qiita.com/koher/items/a7a12e7e18d2bb7d8c77 w "MFSUT7JFXTJ04)VNBO*OUFSGBDF(VJEFMJOFT w ੟ॻ https://developer.apple.com/design/human-interface-guidelines/ios/views/alerts/

࣭໰౳ ͋Ε͹

エラー処理のUIデザイン

エラー処理のUIデザイン

T. MOTOOKA

More Decks by T. MOTOOKA

Other Decks in Technology

Featured

Transcript

Τϥʔॲཧͷ 6*σβΠϯ CZ5.0500," .PCJMF"DU50,:0 https://mobileact.connpass.com/event/104870/

"CPVUUIF4QFBLFS w 5.0500,"!U@NPUPPLB w $3.γεςϜͷίϯαϧɺडୗ։ൃɺӡ༻ɺFUDʜ w 8FC͹͔Γ w ඇˑੵۃ࠾༻தʢϦϞʔτɾ୹࣌ؒۈ຿ݶఆ࠾༻ʣ w

ओͨΔ࣮੷ͦͷ̍ "QQ4UPSFͰʮಥવͷࢮʯͰݕࡧŜŧŕ

ओͨΔ࣮੷ͦͷ̎ https://booth.pm/ja/items/1049475 ʮ47(खඳ͖ຊʯ ςΩετΤσΟλͱϒϥ΢βͰ ॻ͚Δɾඳ͚Δ 47(

ओͨΔ࣮੷ͦͷ̏ https://speakerdeck.com/motooka/mobairuapuritogdpr લճࢀՃ࣌ͷ ൃද಺༰ ˡ

ຊ୊ Τϥʔॲཧͷ6*σβΠϯ

ઌ݄͋ͬͨ൵͍͠ग़དྷࣄ w ๭ΫϨΧձࣾͷJ04ΞϓϦΛىಈ w ໊ࣾ΍ΞϓϦ໊͸࠙਌ձʹͯ w ىಈͯࣗ͠ಈͰϩάΠϯ͢Δ࢓૊Έ w

ύεϫʔυΛ ؒҧ͑ͨ༁Ͱ΋ͳ͍ͷʹʁ *%ύεϫʔυೖྗը໘ʹҠಈ

͡Ό͋ɺͲ͏ͨ͠Β͍͍ͷ w ύεϫʔυ࠶ೖྗͤͣͱ΋ϦτϥΠͰ͖Δ6* w ΋͠΋ຊ౰ʹύεϫʔυؒҧ͑ͯͨΒ࠶ೖྗͤ͞Δ6* w 8FC͔Βύεϫʔυมߋͨ͠ͱ͖ͱ͔ w ͦͷͨΊʹ͸❓ w

ϩάΠϯΤϥʔͷ ܏޲ͱରࡦ

͋Γ͕ͪΤϥʔͦͷ̍ w ύεϫʔυؒҧ͍ w ͜Ε͸࠶ೖྗͯ͠΋Β͍·͠ΐ͏ w *%ؒҧ͍ w ͜Ε΋࠶ೖྗ w

͋Γ͕ͪΤϥʔͦͷ̎ w ి೾͕ݍ֎ w Ұൠਓ͸ؾ෇͔ͣݍ֎ʹߦ͘ɻ w ࢲ΋ͦ͏͍͏৔ॴʹߦ͘ɻ w ͔ͩΒ༏͘͠ڭ͑ͯ͋͛Α͏ w

͋Γ͕ͪΤϥʔͦͷ̏ w αʔόଆॲཧதʹి࿩ண৴ͨ͠ΓΞϓϦ੾Γସ͑ͨΓ w ߟ͑ͨ͘΋ͳ͍ w αʔόଆॲཧதʹ୺຤ిݯஅ w ిݯͳΜ͍ͯͭͰ΋ࢮ͵ w

ϨΞ΋ͷΤϥʔͦͷ̍ w ໊લղܾͰ w λΠϜΞ΢τ w %/4తͳΤϥʔ w 5$16%1తͳΤϥʔ w

ϨΞ΋ͷΤϥʔͦͷ̎ w 5$11ϋϯυγΣΠΫ໌ࣔతࣦഊʢ5$1345ʣ w αʔόো֐ͱ͔Ͱ͔͢Ͷ w ʮαʔϏεऴྃޙʯͱ͍͏ʢ͈́ w 5$11ϋϯυγΣΠΫதͷλΠϜΞ΢τʢແ"$,ʣ w

ϨΞ΋ͷΤϥʔͦͷ̏ w 44-5-4ূ໌ॻΤϥʔ w .*5.߈ܸ w ௨৴ճઢͷ໰୊ͷՄೳੑͩͬͯ͋Δ w ʮαʔϏεऴྃޙʯͱ͍͏ʢ͈́ w

ϨΞ΋ͷΤϥʔͦͷ̐ w )5513FRVFTUૹग़׬ྃલͷ5$1*1੾அ 5$1345 w ʢී௨ͷαʔό࣮૷ͳΒʣ·ͣॲཧͰ͖ͯͳ͍ΑͶ w ҋӢʹϦτϥΠͯ͠0,ͬΆ͍ w

ϨΞ΋ͷΤϥʔͦͷ̑ w σʔλվ͟ΜΛ5-4ͷػߏͰݕ஌ w େମ.*5.߈ܸ͔ͳ w CJUೖΕସΘΓωοτϫʔΫ w )551ϔομσίʔυࣦഊ w

ϨΞ΋ͷΤϥʔͦͷ̒ w )551 w αʔϏεऴྃͯ͠Δʁʂ w αʔόଆσϓϩΠࣦഊͱ͔ʁ w )551 w

Ұ൪΍΍͍͜͠΍ͭ w )551ϦΫΤετૹग़׬ྃޙͷλΠϜΞ΢τ w αʔόଆͰ͸ॲཧ͕ਐΜͰΔ͔΋͠Εͳ͍ w ॲཧ͞Εͯͳ͍͔΋͠Εͳ͍ w ύεϫʔυؒҧ͑͗͢ϩοΫػߏ͕͋Δ৔߹ w

͜Μͳදࣔ௒ΧοίΠΠ w ౰αʔϏε͸ऴ͍ྃͯ͠·͢ɻ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ w αʔόͷॲཧʹ͕͔͔͍࣌ؒͬͯΔΑ͏Ͱ͢ɻ w αʔϏεͰো֐͕ൃੜ͍ͯ͠ΔΑ͏Ͱ͢ɻ w ͓࢖͍ͷճઢͰ͸ਖ਼͘͠௨৴Ͱ͖ͳ͍Α͏Ͱ͢ɻ ˞ΧοίΠΠͷ͸ద੾ʹग़͠෼͚Ͱ͖ͯΔਓʹݶΔ

·ͱΊ w Τϥʔʹ͸୔ࢁͷछྨ͕͋Δ❤ w ͦΕͧΕɺϢʔβ͕औΔ΂͖ߦಈ͸ҧ͏͔΋ w Ϣʔβͷߦಈ͕ҟͳΔ΂͖ͳΒɺσβΠϯ΋ҟͳΔ΂͖ w ΤϥʔରॲͷσβΠϯͦ͜6*ઃܭͷΩϞ w

ࢀߟจݙ w ϞόΠϧΞϓϦͷΤϥʔʹͲ͏ରॲ͢Δ͔ w ͍·஻ͬͨ͜ͱͱࣅͨ࿩ʢεϥΠυ࡞ͬͨޙʹؾ෇͍ͨʣ https://goodpatch.com/blog/how-to-deal-with-application-error/ w 4XJGUͷΤϥʔ෼ྨ͕ૉ੖Β͗͢͠ΔͷͰΈΜͳʹ஌ͬͯ΄͍͠ w 4XJGUͷݴޠϨϕϧͰݟͨΤϥʔ෼ྨ

࣭໰౳ ͋Ε͹

׬