Upgrade to Pro — share decks privately, control downloads, hide ads and more …

エラー処理のUIデザイン

T. MOTOOKA
November 15, 2018

 エラー処理のUIデザイン

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

T. MOTOOKA

November 15, 2018
Tweet

More Decks by T. MOTOOKA

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    w λΠϜΞ΢τ⏰
    w *%ύεϫʔυೖྗը໘ʹҠಈ

    View full-size slide

  8. ύεϫʔυΛ
    ؒҧ͑ͨ༁Ͱ΋ͳ͍ͷʹʁ

    *%ύεϫʔυೖྗը໘ʹҠಈ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    w )551SFTQPOTFCPEZH[JQσίʔυࣦഊ
    w ʢ͜ͳ͍ͩ࢓ࣄͰ͜ΕʹϋϚͬͨʣ
    w αʔόϓϩηε్͕தͰࢮΜͩɺͱ͔

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size 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 full-size slide

  24. ࣭໰౳
    ͋Ε͹

    View full-size slide