We got the power, let's do less damage to the world

1. User Experience
for Software Developers
We got the power, let’s do less damage to the world
by @panuta

2. Form Design
Foam Validation
บอกฉันทีว่าฉันผิดอะไร?
บอกเป็นข้อๆ เลยได้ไหม?
ฉันจะได้แก้ตัว

3. Left-aligned Input Label
ขอเดินตรงๆ ไม่อ้อมได้ไหม

4. Inline Form Label
ความจำฉันสั้น เมื่อกี๊ให้ชั้นกรอกอะไรนะ?

5. Password Input
ฉันต้องเดาใจเธอไหมว่าเธอจะให้ฉันเขียนว่าอย่างไร?

6. Submit Buttons
ให้กดปุ่มน้ำเงิน ... เดี๋ยวนะ ... น้ำเงินซ้ายหรือน้ำเงินขวา

7. Signup / Login
http://blog.codinghorror.com/the-god-login/
The God Login

8. • Let the user enter an email to log in
• Tell the user when their email doesn’t exist
• Let the user switch between Log In and Sign Up
any time
• Pick common words
• Work with browser password managers
• Handle common user mistakes
• Help users choose better passwords
• Don’t forget the keyboard
• Rate limit all the things

9. Let the user enter an email to log in
ไม่มีปัญหาชื่อซ้ำ
ไม่ต้องจำชื่อผู้ใช้เพิ่ม
ใช้เป็นช่องทางการติดต่อได้

10. Tell the user when their email doesn't exist
จำไม่ได้ว่าเคยสมัครไว้รึยัง
จำไม่ได้ว่าใช้อีเมลอะไรสมัคร
แน่ใจว่าไม่ได้กรอกรหัสผ่านผิด

11. Let the user switch between
Log In and Sign Up any
time

12. Let the user switch between Log In and
Sign Up any time
เอาอีเมลที่เมื่อกี๊ใส่ผิด ไปกรอกให้ด้วยนะ

13. Pick common words

14. Work with browser password managers

15. Handle common user mistakes

16. Help users choose better passwords

17. Don't forget the keyboard
“name@example.com”
[tab]
p4$$w0rd
[enter]

18. Rate limit all the things

19. Destructive Actions
Light
ไม่ต้องยืนยันก่อนทำคำสั่ง
แต่ผู้ใช้ควรจะสามารถ
undo ได้
Medium
ถามผู้ใช้เพื่อความแน่ใจ
ก่อนทำคำสั่งนั้น
และควรอธิบายไปด้วยว่า
จะเกิดอะไรขึ้น
Massive
Destruction
Weapon
ถามผู้ใช้เพื่อความแน่ใจ
ก่อนทำคำสั่ง และให้ผู้ใช้
ทำอะไรบางอย่างเพื่อ
แสดงออกถึงความตั้งใจ
จริงๆ เช่น กรอกข้อความ
บางอย่าง

20. ผู้ใช้สามารถ undo ได้หลังจากลบอีเมลทันที หรือสามารถไป undo จากใน
Trash ก็ได้

21. ผู้ใช้จะต้องกดยืนยันก่อน โดยใน popup บอกข้อมูลที่กำลังจะลบ เพื่อให้ผู้ใช้ได้มั่นใจว่าลบ
ข้อมูลถูกต้อง และบอกข้อมูลเพิ่มเติมว่าการกระทำนี้จะทำให้ข้อมูลที่เกี่ยวข้องถูกลบไปด้วย
และไม่สามารถ undo ได้

22. ผู้ใช้จะต้องยืนยันการลบข้อมูลโดยการเขียนชื่อของข้อมูลที่กำลังจะลบ เนื่องจากการลบนี้
เป็น Massive Destruction Weapon

23. Navigation
ด้านซ้าย?

24. ด้านบน?

25. ป้ายบอกทาง

27. Blank State

30. Action Feedback
บอกผู้ใช้หลังจากทำ action เสร็จทุกครั้ง

31. Tooltips
ใส่ข้อมูลเพิ่มเติมให้รูป หรือข้อความที่แสดงแบบสั้นๆ

34. Let’s make the world better
@panuta