最悪な UX に対処する

Transcript

1. ࠷ѱͳ UX ʹରॲ͢Δ
   ؠखݝେɾձ௡େ߹ಉ LT @6݄7೔
   

   View Slide

2. $ whoami
   • @ktr_0731
   • u-aizu / s123
   • STEINS;GATE
   

   View Slide

3. ;ͭ͏ͷformΛ͔͍͍ͭͨ by ͸·ͪ΍2
   http://hamachiya.com/form/
   

   View Slide

4. View Slide

5. ??
   

   View Slide

6. Ṗ select
   • ग़ੜ೥ෆৄͳਓͳΜ͍ͯΔͷ͔ʁ
   • 1902೥ੜ·ΕͷਓͳΜ͍ͯΔͷ͔ʁ
   

   View Slide

7. Ṗ select
   • ग़ੜ೥ෆৄͳਓͳΜ͍ͯΔͷ͔ʁ
   • 1902೥ੜ·ΕͷਓͳΜ͍ͯΔͷ͔ʁ
   • ؒҧ͍ͳ͘1996೥ੜ·ΕͷਓΑΓ͸গͳ
   ͍
   

   View Slide

8. ద੾ͳ೥୅ΛσϑΥϧτҐஔ
   ʹͯ͋͛͠Α͏
   

   View Slide

9. ଞʹ΋৭ʑ͋Δ
   

   View Slide

10. ॅॴ͸༣ศ൪߸͔Βࣗಈੜ੒
    ͯ͋͛͠Α͏
    

    View Slide

11. લͷϖʔδʹ
    ໭ͬͯ΄͘͠ͳ͍ͳΒ
    ΠϕϯτΛϋϯυϦϯά͢Δ
    

    View Slide

12. ൒֯ɾશ֯ͷҧ͍ͷٵऩ͸ɹ
    αʔόαΠυͷ࢓ࣄ
    

    View Slide

13. όϦσʔγϣϯ͍ͨ͠΋ͷ͸
    Ͱ͖Δ͚ͩϒϥ΢βଆͰ
    ඇಉظʹνΣοΫ͢Δ
    

    View Slide

14. HTMLͷඪ४ͷόϦσʔγϣ
    ϯ΋ར༻͠Α͏
    

    View Slide

15. input λάͷ type ଐੑ
    • password
    • date
    • email
    • number
    • …
    

    View Slide

16. input λάͷ type ଐੑ
    • password
    • date
    • email
    • number
    • …
    MDN Έͯ
    

    View Slide

17. ΦϨΦϨڍಈΛͭ͘Βͳ͍
    

    View Slide

18. νϟοτΞϓϦͷྫ
    • վߦ͸ Enter or CTRL + Enter ?
    • Slack (Mobile)ɺLINEɺetc.
    • Slack (Desktop)
    

    View Slide

19. νϟοτΞϓϦͷྫ
    • վߦ͸ Enter or CTRL + Enter ?
    • Slack (Mobile)ɺMessangerɺLINEɺetc.
    • Slack (Desktop)
    

    View Slide

20. iOS ͱ Android ͷ UI ͸ҧ͏
    

    View Slide

21. iOS ͱ Android ͷ UI ͸ҧ͏
    → Android Ͱ iOS ͷ UI Λ
    ࢖͏ͱҧ࿨ײΛײ͡Δ
    

    View Slide

22. ηΩϡϦςΟతʹ
    ΍ͬͯ͸͍͚ͳ͍͜ͱ΋͋Δ
    

    View Slide

23. idɺύεϫʔυͷ
    ͲͪΒ͕ؒҧ͍ͬͯΔ͔ͷදࣔ
    

    View Slide

24. idɺύεϫʔυͷ
    ͲͪΒ͕ؒҧ͍ͬͯΔ͔ͷදࣔ
    → ΫϥοΧʔʹώϯτΛ༩͑ͯ͠·
    ͏
    

    View Slide

25. ϑΥʔϜͷηογϣϯΛ؅ཧ
    ͠ͳ͍
    

    View Slide

26. ϑΥʔϜͷηογϣϯΛ؅ཧ
    ͠ͳ͍
    → CSRF ࢗ͞Γ·͘Δ
    

    View Slide

27. ΫϥΠΞϯταΠυ only ͷ
    όϦσʔγϣϯ
    → API ͷΤϯυϙΠϯτʹμΠϨΫ
    τͰ߈ܸ͞ΕΔ
    

    View Slide

28. ͪΐͬͱϢʔβ໨ઢͰ
    ߟ͑Ε͹޾ͤʹͳΕΔ
    

    View Slide