user experience for software developers

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

“name@example.com”

[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