COOL IT IDEAS AND STUFF
7 UI UX Principles Every Dev Should Know
30-Jul-25
คัมภีร์เทพ IT
See the original english version Click here!
ถ้าคุณต้องทำทั้ง Frontend และ Backend ด้วยตัวคุณเอง คุณไม่มีข้ออ้างเลยที่จะละเลยในประเด็นเกี่ยวกับ UI/UX ต่อให้มี Features ล้ำ ระบบไหลลื่น แต่ถ้าประสบการณ์ของผู้ใช้งานออกมาในด้านลบ นั้นหมายความว่า งานของคุณยังมีปัญหา ดังนั้นคุณต้องให้ความสำคัญกับมัน และนี่ก็คือ 7 หลักการ UI/UX ที่ Developer ทุกคนควรจำไว้อยู่เสมอ
1. ความชัดเจนสำคัญมาก
คุณอาจสร้างไอคอน "Delete" ที่คุณออกแบบเอง มันเป็นรูปแบบสุดแนวที่คุณคิดว่ามันดูเจ๋งมาก
แต่ผู้ใช้งานล่ะ จะคิดเหมือนคุณไหม? พวกเขาอาจอยากได้แค่รูป “ถังขยะ” ธรรมดา ๆ ก็ได้
ลองตรวจสอบ: ถ้าคนทั่วไป หรือ Co-Founder ทำหน้างง ๆ ไม่สามารถเข้าใจได้ภายใน 2 วินาทีว่า "ปุ่มนี้เอาไว้ทำอะไร" นั่นหมายถึง คุณพลาดแล้ว
คุณไม่จำเป็นต้องสร้าง “สิ่งที่คนอื่นคิดหรือทำไว้ดีแล้ว” ขึ้นมาใหม่ด้วยตัวเอง แต่ให้สร้างประสบการณ์ใหม่
คุณสามารถใช้ไอคอนมาตรฐานได้ แล้วเขียนข้อความกำกับให้ชัดเจน เพียงเท่านี้ก็เพิ่มประสบการณ์ที่ดีให้แก่ผู้ใช้งานแล้ว
2. Don’t Make Me Think (ขอขอบคุณ Steve Krug)
นี่คือชื่อหนังสือ UX ที่ขายดีที่สุด และมันจริงทุกคำ
ทุกวินาทีที่ผู้ใช้งานต้องคิดว่า “นี่มันเอาไว้ทำอะไร?” หรือ “แล้วต้องไปไหนต่อ?” นั่นหมายถึง คุณกำลังจะเสียพวกเขาไป อันที่จริง App ของคุณไม่ควรต้องมีคู่มือ
Tip เล็ก ๆ น้อย ๆ คือ ครั้งหน้า ก่อนที่จะเพิ่มขั้นตอนพิเศษอะไรสักอย่างเข้าไป ให้ลองถามตัวเองก่อนว่า:
“ถ้าต้องใช้สิ่งนี้ตอนตี 2 ที่กำลังง่วงอยู่ หรือ ตอนกำลังสั่งพิซซ่า เราจะรู้สึกรำคาญไหม?”
ถ้าคำตอบคือ “ใช่” ก็ขอแนะนำให้ตัดสิ่งนั้นออกไปซะ
3. ลำดับการมองไม่ใช่แค่เรื่องดีไซน์สวย ๆ
คุณเคยเข้า Web ที่ทุกองค์ประกอบ ดูจะแย่งซีนกันสุดชีวิตไหม?
ไม่ว่าจะเป็น ปุ่มเขียวเรืองแสง, หัวข้อสำคัญที่ใช้อักษรพิมพ์ใหญ่ล้วน หรือแม้แต่ Pop-ups ที่กระโดดไปมาเหมือนอยู่ในยุค 2006 นั่นแหละคือ ความวุ่นวายทางสายตา
ลำดับการมอง (Visual Hierarchy) คือ GPS ที่จะช่วยนำทางผู้ใช้งาน
- หัวข้อสำคัญที่เป็นตัวหนา = สิ่งสำคัญที่สุด
- ปุ่มที่มีสีจาง = มีความสำคัญรอง ๆ ลงไป
- พื้นที่ว่าง (White Space) = พื้นที่ให้หายใจ ไม่ดูแน่นจนน่าอึดอัด
ตัวอย่าง UI:
ปล่อยให้ UI กระซิบบอกด้วยตัวมันเองว่า “อันนี้สำคัญ” แทนที่จะตะโกนดัง ๆ ใส่ผู้ใช้งาน
4. Mobile-First ไม่ใช่แค่ตัวเลือกอีกต่อไป
สมมติ ผู้ใช้งานของคุณ กำลังนั่งอยู่ในห้องน้ำ อ่าน App ของคุณอยู่ สามารถเลื่อนหน้าจอด้วยนิ้วโป้งเพียงข้างเดียว
ไม่ว่า ไม่ว่าคุณจะตัดสินพวกเขาว่าอย่างไร แต่คุณก็ต้องออกแบบเพื่อพวกเขา
สถิติไม่โกหก: กว่า 60% ของ Web Traffic มาจาก Mobile
ถ้า App ของคุณ มันพังบนหน้าจอเล็ก ๆ ก็เท่ากับว่า คุณกำลังทำให้ความเชื่อมั่นของผู้ใช้งานลดลงตามไปด้วย
ลองตรวจสอบ: ทดสอบ App ของคุณบน Mobile ตั้งแต่ตอนที่คุณเขียน <div> ตัวแรก
ไม่ใช่หลังปล่อย App ออกไปแล้ว ไม่ใช่ “Sprint ถัดไป” แต่ “ต้องทำตอนนี้เลย”
5. Loading State = การเยียวยาทางอารมณ์
คุณเคยกดปุ่มแล้วไม่มีอะไรเกิดขึ้นไหม? จากนั้นคุณก็เริ่มตั้งคำถามกับชีวิตว่า
- สรุปแล้ว มันทำงานอยู่ไหม?
- ต้องกดซ้ำอีกรอบไหม?
- อินเทอร์เน็ตของเราเสียรึเปล่า?
- หรือที่จริงแล้ว ระบบไม่พังหรอก แต่เรานี่แหละที่งงเอง?
Loading State ถือเป็น แบบบำบัด UX โดยมันจะช่วยปลอบใจผู้ใช้งานว่า “ฉันรับคำสั่งแล้วนะ ใจเย็นสักครู่หนึ่ง
UX ที่ดีต้อง “มีชีวิต”
เคล็ดลับฉบับมือโปร: ใช้ Skeleton Loader, Spinner, Progress Bar หรืออะไรก็ได้ที่แสดงว่า "ระบบกำลังทำงานอยู่"
6. Error State: หยุดหลอกผู้ใช้งานของคุณ
เมื่อพบเห็นข้อความ "เกิดข้อผิดพลาดบางอย่าง" นั่นไม่ใช่ความผิดของผู้ใช้งาน แต่เป็นคุณนั่นแหละ
ข้อความ Error ควรเป็นภาษามนุษย์ มีประโยชน์ และให้ความหวัง
แย่:
“เกิดข้อผิดพลาดที่ไม่ทราบสาเหตุ โปรดลองอีกครั้ง”
ดีขึ้น:
“เราไม่สามารถอัปโหลดไฟล์ของคุณได้ อาจเป็นเพราะไฟล์ใหญ่เกินไป หรืออินเทอร์เน็ตหลุด กรุณาลองใหม่อีกครั้ง”
ดีขึ้นกว่าเดิมอีก:
บอกผู้ใช้งานว่า จะแก้ไขอย่างไร แล้วให้พวกเขาทำอะไรต่อ ไม่ใช่ปล่อยให้พวกเขาถอนหายใจแล้วปิด App ของคุณ
7. ความสอดคล้องกัน = ความเชื่อใจ
ลองนึกภาพถึง App ที่หน้าแรกใช้ปุ่ม “Submit”, หน้าสองใช้ “Post”, อีกหน้าหนึ่งใช้ “Done” แต่ทั้งหมด กลับเป็นปุ่มที่ทำ “สิ่งเดียวกัน”
สมองของผู้ใช้งานจะกรีดร้องออกมาว่า:
“อะไรเนี่ย นี่มันปุ่มเดียวกันรึเปล่านะ?!”
ความสอดคล้องกัน จะช่วยทำให้ผู้ใช้งานเกิดความรู้สึกคุ้นเคย ความคุ้นเคยจะช่วยสร้างความเชื่อมั่น และความเชื่อมั่นจะทำให้ผู้ใช้งานกลับมาใช้งานอีกครั้ง
ใช้ Design System จากนั้นตั้งกฎขั้นมา แล้วยึดมั่นกับมัน ถ้าปุ่มของคุณเปลี่ยนรูปแบบทุกครั้งที่เปลี่ยนหน้า ระวัง!ผู้ใช้งานของคุณจะโทรเรียกตำรวจ (ที่จะคอยตรวจจับ UI)
สรุป
และนี่ก็คือ 7 หลักการ UI/UX ที่ Developer ทุกคนควรจำไว้อยู่เสมอ คุณไม่ใช่แค่ Developer แต่คุณคือคนออกแบบประสบการณ์ของผู้ใช้งานด้วย ผู้ใช้งานของคุณไม่ได้สนใจหรอกว่า Backend ของคุณจะมีประสิทธิภาพแค่ไหน พวกเขาแค่ต้องการ Reset Password โดยไม่ต้องจมอยู่กับความเครียด จงสร้างพวกมันด้วยใจ ให้เหมือนกับคุณเป็นผู้ใช้งานเอง เพราะสุดท้ายแล้ว พวกเขาคือคนที่ต้องใช้งาน App ของคุณ
ที่มา: https://medium.com/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด