最悪な UX に対処する

Transcript

1. ࠷ѱͳ UX ʹରॲ͢Δ ؠखݝେɾձ௡େ߹ಉ LT @6݄7೔
2. $ whoami • @ktr_0731 • u-aizu / s123 • STEINS;GATE
3. ;ͭ͏ͷformΛ͔͍͍ͭͨ by ͸·ͪ΍2 http://hamachiya.com/form/
5. ??
6. Ṗ select • ग़ੜ೥ෆৄͳਓͳΜ͍ͯΔͷ͔ʁ • 1902೥ੜ·ΕͷਓͳΜ͍ͯΔͷ͔ʁ
7. Ṗ select • ग़ੜ೥ෆৄͳਓͳΜ͍ͯΔͷ͔ʁ • 1902೥ੜ·ΕͷਓͳΜ͍ͯΔͷ͔ʁ • ؒҧ͍ͳ͘1996೥ੜ·ΕͷਓΑΓ͸গͳ ͍
8. ద੾ͳ೥୅ΛσϑΥϧτҐஔ ʹͯ͋͛͠Α͏
9. ଞʹ΋৭ʑ͋Δ
10. ॅॴ͸༣ศ൪߸͔Βࣗಈੜ੒ ͯ͋͛͠Α͏
11. લͷϖʔδʹ ໭ͬͯ΄͘͠ͳ͍ͳΒ ΠϕϯτΛϋϯυϦϯά͢Δ
12. ൒֯ɾશ֯ͷҧ͍ͷٵऩ͸ɹ αʔόαΠυͷ࢓ࣄ
13. όϦσʔγϣϯ͍ͨ͠΋ͷ͸ Ͱ͖Δ͚ͩϒϥ΢βଆͰ ඇಉظʹνΣοΫ͢Δ
14. HTMLͷඪ४ͷόϦσʔγϣ ϯ΋ར༻͠Α͏
15. input λάͷ type ଐੑ • password • date • email • number • …
16. input λάͷ type ଐੑ • password • date • email • number • … MDN Έͯ
17. ΦϨΦϨڍಈΛͭ͘Βͳ͍
18. νϟοτΞϓϦͷྫ • վߦ͸ Enter or CTRL + Enter ? • Slack (Mobile)ɺLINEɺetc. • Slack (Desktop)
19. νϟοτΞϓϦͷྫ • վߦ͸ Enter or CTRL + Enter ? • Slack (Mobile)ɺMessangerɺLINEɺetc. • Slack (Desktop)
20. iOS ͱ Android ͷ UI ͸ҧ͏
21. iOS ͱ Android ͷ UI ͸ҧ͏ → Android Ͱ iOS ͷ UI Λ ࢖͏ͱҧ࿨ײΛײ͡Δ
22. ηΩϡϦςΟతʹ ΍ͬͯ͸͍͚ͳ͍͜ͱ΋͋Δ
23. idɺύεϫʔυͷ ͲͪΒ͕ؒҧ͍ͬͯΔ͔ͷදࣔ
24. idɺύεϫʔυͷ ͲͪΒ͕ؒҧ͍ͬͯΔ͔ͷදࣔ → ΫϥοΧʔʹώϯτΛ༩͑ͯ͠· ͏
25. ϑΥʔϜͷηογϣϯΛ؅ཧ ͠ͳ͍
26. ϑΥʔϜͷηογϣϯΛ؅ཧ ͠ͳ͍ → CSRF ࢗ͞Γ·͘Δ
27. ΫϥΠΞϯταΠυ only ͷ όϦσʔγϣϯ → API ͷΤϯυϙΠϯτʹμΠϨΫ τͰ߈ܸ͞ΕΔ
28. ͪΐͬͱϢʔβ໨ઢͰ ߟ͑Ε͹޾ͤʹͳΕΔ