บทความ IT เจ๋งๆ

ถ้าคุณต้องทำทั้ง 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 เป็นเพื่อนนะคะ

 

บทความล่าสุด

• 25 Websites ตัวช่วย ที่ Developer ทุกคนควร Bookmark เอาไว้
• 15 AI Tools ที่ช่วยให้ Developer ยุคใหม่ทำงานไวขึ้นอีกหลายเท่า
• 5 Open Source Projects ที่น่าสนใจสำหรับ Developer ที่ต้องการ Upskill