エラー処理のUIデザイン

モバイルアプリのデザインをする上で、ついつい目を覆いがちな「エラー処理」。ここで気にするべき大事なこととは…

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    SFTQPOTFIFBEFSͰฦͨ͠ํ͕ڧ͍ΑͶ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    ɹʢදࣔ͢Δ͚ͩͳΒ୭Ͱ΋Ͱ͖Δʣ
    

    View Slide

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

    View Slide

23. ࢀߟจݙ
    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/
    

    View Slide

24. ࣭໰౳
    ͋Ε͹
    

    View Slide

25. ׬
    

    View Slide