user experience for software developers
TRANSCRIPT
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 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
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
[tab]
p4$$w0rd
[enter]
Rate limit all the things
Destructive Actions
Light
ไม่ต้องยืนยันก่อนทำคำสั่ง
แต่ผู้ใช้ควรจะสามารถ
undo ได้
Medium
ถามผู้ใช้เพื่อความแน่ใจ
ก่อนทำคำสั่งนั้น
และควรอธิบายไปด้วยว่า
จะเกิดอะไรขึ้น
Massive Destruction
Weapon
ถามผู้ใช้เพื่อความแน่ใจ
ก่อนทำคำสั่ง และให้ผู้ใช้
ทำอะไรบางอย่างเพื่อ
แสดงออกถึงความตั้งใจ
จริงๆ เช่น กรอกข้อความ
บางอย่าง
ผู้ใช้สามารถ undo ได้หลังจากลบอีเมลทันที หรือสามารถไป undo จากใน
Trash ก็ได้
ผู้ใช้จะต้องกดยืนยันก่อน โดยใน popup บอกข้อมูลที่กำลังจะลบ เพื่อให้ผู้ใช้ได้มั่นใจว่าลบ
ข้อมูลถูกต้อง และบอกข้อมูลเพิ่มเติมว่าการกระทำนี้จะทำให้ข้อมูลที่เกี่ยวข้องถูกลบไปด้วย
และไม่สามารถ undo ได้
ผู้ใช้จะต้องยืนยันการลบข้อมูลโดยการเขียนชื่อของข้อมูลที่กำลังจะลบ เนื่องจากการลบนี้
เป็น Massive Destruction Weapon
Navigation
ด้านซ้าย?
ด้านบน?
ป้ายบอกทาง
Blank State
Action Feedback
บอกผู้ใช้หลังจากทำ action เสร็จทุกครั้ง
Tooltips
ใส่ข้อมูลเพิ่มเติมให้รูป หรือข้อความที่แสดงแบบสั้นๆ
Let’s make the world better
@panuta