หน้าจอ · ฟังก์ชันUser Experience · User Interface · ประสบการณ์ผู้ใช้ · การจัดวางหน้าจอ
UX · UI
UI คือองค์ประกอบหน้าจอที่ลูกค้ามองเห็นอย่างปุ่ม · ตัวอักษร · สี ส่วน UX คือประสบการณ์ทั้งหมดที่ลูกค้าได้รับระหว่างใช้เว็บไซต์
UI คือดีไซน์ของเมนู ส่วน UX คือเส้นทางของลูกค้าตั้งแต่เข้าร้าน สั่ง จ่ายเงิน จนออกไป
รายละเอียดเพิ่มเติม
แม้ UI สวย แต่ถ้าหาปุ่มจองยากหรือมีหลายขั้นตอน ก็แปลว่า UX ไม่ดี กลับกัน แม้ไม่หรูหรา แต่ถ้าหาสิ่งที่ต้องการได้ทันที ก็คือ UX ที่ดี
UX ของเว็บไซต์ร้านส่วนใหญ่สรุปได้ 3 อย่าง คือ รู้ทันทีไหมว่าที่นี่ทำอะไร หาข้อมูลที่ต้องการ (ราคา · ที่ตั้ง · เวลา) ได้ง่ายไหม และติดต่อ · จองได้ง่ายไหม
UX กับ UI ต่างกันอย่างไรกันแน่
UI ดูแลเรื่อง “หน้าตาเป็นอย่างไร” ส่วน UX ดูแลเรื่อง “ใช้งานอย่างไร” ปุ่มจองปุ่มเดียวกัน สี · รูปทรง · ตัวอักษรเป็นงานของ UI แต่ปุ่มนั้นอยู่ในตำแหน่งที่ลูกค้ามองหาหรือไม่เป็นงานของ UX
ทั้งสองอย่างไม่ได้เป็นงานที่แยกขาดจากกัน โดยทั่วไปจะใช้ UX กำหนดเส้นทางของลูกค้าและลำดับหน้าจอก่อน แล้วใช้ UI ใส่สีและตัวอักษรทับลงไป ถ้าสลับลำดับ มักได้เว็บไซต์ที่สวยแต่ใช้งานไม่สะดวก
เวลาดูแบบร่างดีไซน์ ถ้าแยกดูสองเรื่องนี้ การให้ฟีดแบ็กจะง่ายขึ้นมาก “ไม่ชอบสี” เป็นความเห็นด้าน UI ส่วน “หาราคายาก” เป็นความเห็นด้าน UX
UX ครอบคลุมประสบการณ์นอกหน้าจอด้วย ตั้งแต่ SMS ยืนยันหลังจอง ไปจนถึงความเร็วในการตอบคำถาม สำหรับลูกค้า ทั้งหมดคือ “ประสบการณ์การใช้บริการร้านนี้”
ปัดตารางไปด้านข้างเพื่อดูเพิ่ม
| รายการ | UX (ประสบการณ์ผู้ใช้) | UI (การจัดวางหน้าจอ) |
|---|---|---|
| คำถามที่ถาม | ลูกค้าทำสิ่งที่ต้องการให้เสร็จได้ง่ายไหม | หน้าจอดูดีและอ่านง่ายไหม |
| สิ่งที่ดูแล | ลำดับเมนู ลำดับหน้า จำนวนขั้นตอน ข้อความแนะนำ | สี ขนาดตัวอักษร รูปทรงปุ่ม การจัดวางรูป ระยะว่าง |
| ช่วงที่ทำเป็นหลัก | ขั้นตอนไวร์เฟรม (โครงหน้าจอ) | ขั้นตอนแบบร่างดีไซน์ |
| วิธีตรวจ | ให้คนรู้จักลองจอง แล้วหาจุดที่ติดขัด | ดูเองบนมือถือ · คอมพิวเตอร์ แล้วหาจุดที่อ่านยาก |
UX ที่ดีตัดสินจากเกณฑ์อะไร
UX ที่ดีคือสภาพที่ลูกค้าทำสิ่งที่ต้องการเสร็จได้ “โดยไม่ต้องคิด” Nielsen Norman Group สถาบันวิจัยด้านการใช้งาน สรุปเรื่องนี้ไว้เป็น 10 หลักการ (Usability Heuristics) และนักออกแบบจำนวนมากใช้หลักการนี้เหมือนเช็กลิสต์
ถ้าปรับให้เข้ากับเว็บไซต์ร้าน ข้อด้านล่างนี้สำคัญเป็นพิเศษ ไม่ใช่ทฤษฎียาก แต่แทบเหมือนสามัญสำนึกเวลาดูแลลูกค้าในร้าน
ไม่จำเป็นต้องจำหลักการทั้งหมด เวลาดูแบบร่าง แค่ถามตัวเองซ้ำ ๆ ข้อเดียวว่า “ลูกค้าที่มาครั้งแรกจะรู้ทันทีไหมว่าต้องทำอะไรในหน้านี้” ก็กรองปัญหาได้เกือบทั้งหมด
- บอกว่าตอนนี้อยู่ตรงไหน: ถ้ากำลังจอง ให้แสดงความคืบหน้า เช่น “ขั้นที่ 1 จาก 2 ขั้น”
- ใช้คำของลูกค้า: ใช้คำที่ลูกค้าค้นหา เช่น “เมนูบริการ · ราคา” แทน “แนะนำบริการ”
- ย้อนกลับง่าย: ถ้ากดวันที่ผิด ไม่ต้องเลือกใหม่ตั้งแต่ต้น
- อะไรที่เหมือนกันให้เหมือนกัน: รูปทรงและตำแหน่งปุ่มไม่เปลี่ยนไปในแต่ละหน้า
- ป้องกันความผิดพลาดล่วงหน้า: เช่น ปิดไม่ให้เลือกวันหยุดได้เลย
- แสดงเฉพาะสิ่งที่จำเป็น: แทนที่จะใส่ข้อมูลทั้งหมดในหน้าจอแรก ให้แสดงสิ่งที่สำคัญที่สุดก่อน
ตรวจ UX ของเว็บไซต์ร้านเราอย่างไร
วิธีที่ชัวร์ที่สุดคือดูคนอื่นลองใช้งานจริง แม้ไม่มีความรู้ด้านดีไซน์ ทำตามลำดับด้านล่างราว 30 นาที ก็จะเห็นจุดที่ต้องแก้ค่อนข้างมาก
เวลาตรวจ สิ่งสำคัญคืออย่าอธิบายหรือช่วย เพราะลูกค้าใช้เว็บไซต์คนเดียวโดยไม่มีใครคอยบอกข้าง ๆ
ตรวจเป็นตัวเลขก็ได้ ถ้าดูในสถิติผู้เข้าชมว่า ในคนที่มาถึงหน้าจอง มีสัดส่วนเท่าไรที่จองจนเสร็จจริง ก็พอเดาได้ว่าลูกค้าหลุดออกไปที่ขั้นตอนไหน
- 01เลือกคนรู้จักที่ไม่ค่อยรู้จักร้าน 2–3 คน ถ้าต่างช่วงวัยกันยิ่งดี
- 02ยื่นมือถือให้ แล้วมอบงานให้ทีละอย่าง เช่น “ลองจองช่วงบ่ายวันเสาร์นี้” “ลองหาว่ามีที่จอดรถไหม”
- 03ยืนดูเงียบ ๆ ข้าง ๆ แล้วจดจุดที่ชะงัก จุดที่กดผิด และจุดที่กดย้อนกลับ
- 04เมื่อเสร็จแล้ว ถามสั้น ๆ ว่า “ตรงไหนที่สับสน”
- 05ถ้าหลายคนติดขัดที่จุดเดียวกัน ให้แก้จุดนั้นก่อน
- 06หลังแก้แล้ว ให้คนใหม่ลองทำงานเดิมอีกครั้งเพื่อตรวจสอบ
แต่ละธุรกิจต้องดูแลเรื่อง UX ต่างกันไหม
ต่างกัน สิ่งที่ลูกค้า “อยากทำเป็นอย่างแรก” เมื่อเข้ามาในเว็บไซต์ต่างกันไปตามธุรกิจ หัวใจของการออกแบบ UX คือทำให้สิ่งนั้นจบได้ในเส้นทางที่สั้นที่สุด
ดังนั้นแม้ใช้โครงดีไซน์เดียวกัน ลำดับเมนูและปุ่มในหน้าจอแรกก็ต้องปรับให้เข้ากับธุรกิจ ถ้าลอกเว็บไซต์ของธุรกิจอื่นมาทั้งหมด อาจไม่เหมาะกับลูกค้าของเรา
แม้ธุรกิจเดียวกันก็ต่างกันตามกลุ่มลูกค้า ร้านที่ลูกค้าสูงวัยเยอะ ควรใช้ตัวอักษรใหญ่และวางปุ่มโทรไว้ด้านหน้า ส่วนร้านที่ลูกค้าวัย 20 กว่าเยอะ อาจควรวางการเชื่อม KakaoTalk · Instagram ไว้ด้านหน้า
- คาเฟ่: ลูกค้าหาที่ตั้ง · เวลาเปิด · รูปเมนูเป็นอย่างแรก ถ้ามีแผนที่และปุ่ม “นำทาง” อยู่ด้านบนจะดี
- ร้านทำผม: ลูกค้าเปรียบเทียบราคาแยกตามบริการและช่างผมก่อนจอง เส้นทางจากตารางราคาไปสู่การจองทันทีจึงสำคัญ
- ร้านงานฝีมือ: ลูกค้าตรวจตารางคลาสและที่ว่างแล้วสมัคร หน้าจอเลือกวันต้องง่าย
- ขายออนไลน์: ลูกค้าเปรียบเทียบสินค้าแล้วใส่ตะกร้า ขั้นตอนค้นหา · จัดหมวด · ชำระเงินต้องสั้น
UX มีผลต่อการแสดงผลในการค้นหาด้วยไหม
มีผลทางอ้อม Google Search Central แจ้งว่าพยายามให้รางวัลกับหน้าที่มีประสบการณ์การใช้งานหน้าเว็บ (Page Experience) ดี เช่น โหลดเร็ว หน้าจอดูสบายบนมือถือ การเชื่อมต่อที่ปลอดภัย
แต่ Google ก็อธิบายว่า แม้ประสบการณ์การใช้งานหน้าเว็บจะด้อยไปบ้าง ก็จะแสดงเนื้อหาที่เกี่ยวข้องกับคำค้นหามากที่สุดก่อน หมายความว่าประสบการณ์การใช้งานหน้าเว็บสร้างความต่างได้เมื่อมีเนื้อหาดีพอ ๆ กันหลายหน้า สิ่งที่ต้องทำก่อนจึงเป็นการใส่ข้อมูลที่ลูกค้าหาให้ครบถ้วน
ผลที่ตรงกว่าอันดับการค้นหาคือจำนวนการติดต่อ · การจอง แม้จำนวนผู้เข้าชมเท่ากัน ถ้า UX ดี ลูกค้าที่ติดต่อเข้ามาก็มากขึ้น
ความผิดพลาดที่พบบ่อยด้าน UX · UI เวลาทำงานกับบริษัทรับทำเว็บไซต์มีอะไรบ้าง
ความผิดพลาดที่พบบ่อยที่สุดคือตัดสินใจจากแบบร่างดีไซน์เลย ถ้าข้ามโครงหน้าจอ (ไวร์เฟรม) ไป สายตาจะไปอยู่ที่สีและรูปภาพ จนพลาดปัญหาสำคัญอย่างลำดับเมนูหรือตำแหน่งปุ่มได้ง่าย
อีกอย่างคือ หลายคนตรวจแบบร่างบนหน้าจอคอมพิวเตอร์อย่างเดียว ลูกค้าของร้านส่วนใหญ่เข้ามาด้วยมือถือ จึงต้องเปิดแบบร่างบนมือถือด้วยเสมอ
ฟีดแบ็กเรื่องรสนิยมด้าน UI ควรให้พร้อมตัวอย่าง แทนที่จะบอกว่า “ให้ดูหรู” ถ้าแสดงเว็บไซต์อ้างอิงด้วย เช่น “แบบเว็บไซต์นี้ ที่มีระยะว่างกว้างและตัวอักษรบาง” จำนวนครั้งการแก้ไขจะลดลง
หลังเปิดเว็บไซต์แล้ว UX ก็ยังต้องปรับต่อไปเรื่อย ๆ คำถามที่ลูกค้าโทรมาถามบ่อย เป็นสัญญาณว่าหาข้อมูลนั้นบนเว็บไซต์ได้ยาก ก็แค่ย้ายเนื้อหานั้นไปไว้ในจุดที่เห็นชัดขึ้น
- จะแสดงโครงหน้าจอ (ไวร์เฟรม) ให้ดูก่อนแบบร่างดีไซน์ไหม
- จะทำแบบร่างหน้าจอมือถือแยกให้ไหม
- อธิบายได้ไหมว่าลูกค้าต้องกดกี่ครั้งกว่าจะจอง · ติดต่อได้
- ก่อนเปิดเว็บไซต์ มีการทดลองใช้งานบนมือถือจริงหรือไม่
- หลังเปิดเว็บไซต์ มีวิธีแก้ไขตามการตอบรับของลูกค้าไหม (จำนวนครั้งการแก้ไข · การดูแลรักษา)
ตัวอย่างเช่น
- ปัญหา UI: ตัวอักษรสีเทาอ่อน มองไม่เห็นบนมือถือกลางแดด
- ปัญหา UX: จะจองต้องผ่าน 4 ขั้น คือ เมนู → ข้อมูลการจอง → ลิงก์ภายนอก → ล็อกอิน
ตรวจแค่นี้ก็พอ
- คนที่มาครั้งแรกรู้ภายใน 5 วินาทีไหมว่าเป็นร้านอะไร
- หาราคา · ที่ตั้ง · เวลาเปิดได้ภายใน 2 ครั้งไหม
- ต้องกดกี่ครั้งกว่าจะจอง · ติดต่อได้
ธุรกิจของเราต้องใช้ไหม
ในทุกเว็บไซต์ แค่ดูสองเรื่องนี้ไปพร้อมกันตอนดูแบบร่าง
ที่ ISSYMO
เรากำหนดเส้นทางด้วยไวร์เฟรมก่อน แล้วขัดเกลาองค์ประกอบหน้าจอในแบบร่าง ออกแบบให้เห็นการจอง · การติดต่อทันทีในหน้าจอแรก
คำถามที่พบบ่อย
แหล่งอ้างอิง
แก้ไขล่าสุด