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

最悪な UX に対処する

ktr
June 07, 2017

最悪な UX に対処する

ktr

June 07, 2017
Tweet

More Decks by ktr

Other Decks in Programming

Transcript

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

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

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

  4. None
  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. ͪΐͬͱϢʔβ໨ઢͰ ߟ͑Ε͹޾ͤʹͳΕΔ