Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
User Experience
for Software Developers
We got the power, let’s do less damage to the world
by @panuta
Form Design
Foam Validation
บอกฉันทีว่าฉันผิดอะไร?
บอกเป็นข้อๆ เลยได้ไหม?
ฉันจะได้แก้ตัว
Left-aligned Input Label
ขอเดินตรงๆ ไม่อ้อมได้ไหม
Inline Form Label
ความจำฉันสั้น เมื่อกี๊ให้ชั้นกรอกอะไรนะ?
Password Input
ฉันต้องเดาใจเธอไหมว่าเธอจะให้ฉันเขียนว่าอย่างไร?
Submit Buttons
ให้กดปุ่มน้ำเงิน ... เดี๋ยวนะ ... น้ำเงินซ้ายหรือน้ำเงินขวา
Signup / Login
http://blog.codinghorror.com/the-god-login/
The God Login
• Let the user enter an email to log in
• Tell the user when their email doesn’t exist
• Let the user switch between Log I...
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
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
“name@example.com”
[tab]
p4$$w0rd
[enter]
Rate limit all the things
Destructive Actions
Light
ไม่ต้องยืนยันก่อนทำคำสั่ง
แต่ผู้ใช้ควรจะสามารถ
undo ได้
Medium
ถามผู้ใช้เพื่อความแน่ใจ
ก่อนทำคำส...
ผู้ใช้สามารถ undo ได้หลังจากลบอีเมลทันที หรือสามารถไป undo จากใน
Trash ก็ได้
ผู้ใช้จะต้องกดยืนยันก่อน โดยใน popup บอกข้อมูลที่กำลังจะลบ เพื่อให้ผู้ใช้ได้มั่นใจว่าลบ
ข้อมูลถูกต้อง และบอกข้อมูลเพิ่มเติ...
ผู้ใช้จะต้องยืนยันการลบข้อมูลโดยการเขียนชื่อของข้อมูลที่กำลังจะลบ เนื่องจากการลบนี้
เป็น Massive Destruction Weapon
Navigation
ด้านซ้าย?
ด้านบน?
ป้ายบอกทาง
Blank State
Action Feedback
บอกผู้ใช้หลังจากทำ action เสร็จทุกครั้ง
Tooltips
ใส่ข้อมูลเพิ่มเติมให้รูป หรือข้อความที่แสดงแบบสั้นๆ
Let’s make the world better
@panuta
User Experience for Software Developers
User Experience for Software Developers
User Experience for Software Developers
User Experience for Software Developers
User Experience for Software Developers
Nächste SlideShare
Wird geladen in …5
×

User Experience for Software Developers

1.985 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Design

User Experience for Software Developers

  1. 1. User Experience for Software Developers We got the power, let’s do less damage to the world by @panuta
  2. 2. Form Design Foam Validation บอกฉันทีว่าฉันผิดอะไร? บอกเป็นข้อๆ เลยได้ไหม? ฉันจะได้แก้ตัว
  3. 3. Left-aligned Input Label ขอเดินตรงๆ ไม่อ้อมได้ไหม
  4. 4. Inline Form Label ความจำฉันสั้น เมื่อกี๊ให้ชั้นกรอกอะไรนะ?
  5. 5. Password Input ฉันต้องเดาใจเธอไหมว่าเธอจะให้ฉันเขียนว่าอย่างไร?
  6. 6. Submit Buttons ให้กดปุ่มน้ำเงิน ... เดี๋ยวนะ ... น้ำเงินซ้ายหรือน้ำเงินขวา
  7. 7. Signup / Login http://blog.codinghorror.com/the-god-login/ The God Login
  8. 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. 9. Let the user enter an email to log in ไม่มีปัญหาชื่อซ้ำ ไม่ต้องจำชื่อผู้ใช้เพิ่ม ใช้เป็นช่องทางการติดต่อได้
  10. 10. Tell the user when their email doesn't exist จำไม่ได้ว่าเคยสมัครไว้รึยัง จำไม่ได้ว่าใช้อีเมลอะไรสมัคร แน่ใจว่าไม่ได้กรอกรหัสผ่านผิด
  11. 11. Let the user switch between Log In and Sign Up any time
  12. 12. Let the user switch between Log In and Sign Up any time เอาอีเมลที่เมื่อกี๊ใส่ผิด ไปกรอกให้ด้วยนะ
  13. 13. Pick common words
  14. 14. Work with browser password managers
  15. 15. Handle common user mistakes
  16. 16. Help users choose better passwords
  17. 17. Don't forget the keyboard “name@example.com” [tab] p4$$w0rd [enter]
  18. 18. Rate limit all the things
  19. 19. Destructive Actions Light ไม่ต้องยืนยันก่อนทำคำสั่ง แต่ผู้ใช้ควรจะสามารถ undo ได้ Medium ถามผู้ใช้เพื่อความแน่ใจ ก่อนทำคำสั่งนั้น และควรอธิบายไปด้วยว่า จะเกิดอะไรขึ้น Massive Destruction Weapon ถามผู้ใช้เพื่อความแน่ใจ ก่อนทำคำสั่ง และให้ผู้ใช้ ทำอะไรบางอย่างเพื่อ แสดงออกถึงความตั้งใจ จริงๆ เช่น กรอกข้อความ บางอย่าง
  20. 20. ผู้ใช้สามารถ undo ได้หลังจากลบอีเมลทันที หรือสามารถไป undo จากใน Trash ก็ได้
  21. 21. ผู้ใช้จะต้องกดยืนยันก่อน โดยใน popup บอกข้อมูลที่กำลังจะลบ เพื่อให้ผู้ใช้ได้มั่นใจว่าลบ ข้อมูลถูกต้อง และบอกข้อมูลเพิ่มเติมว่าการกระทำนี้จะทำให้ข้อมูลที่เกี่ยวข้องถูกลบไปด้วย และไม่สามารถ undo ได้
  22. 22. ผู้ใช้จะต้องยืนยันการลบข้อมูลโดยการเขียนชื่อของข้อมูลที่กำลังจะลบ เนื่องจากการลบนี้ เป็น Massive Destruction Weapon
  23. 23. Navigation ด้านซ้าย?
  24. 24. ด้านบน?
  25. 25. ป้ายบอกทาง
  26. 26. Blank State
  27. 27. Action Feedback บอกผู้ใช้หลังจากทำ action เสร็จทุกครั้ง
  28. 28. Tooltips ใส่ข้อมูลเพิ่มเติมให้รูป หรือข้อความที่แสดงแบบสั้นๆ
  29. 29. Let’s make the world better @panuta

×