ข้อเสนอออกแบบเว็บไซต์ มักใส่ “UX/UI design” ไว้เป็นรายการเดียว แต่ UX กับ UI design ไม่ใช่แค่เรื่องการใช้คำ มันคืองานสองอย่างที่ต่างกัน และข้อเสนอหนึ่ง อาจสัญญาว่าให้ทั้งสองอย่าง แต่ส่งมอบจริงแค่อย่างที่สอง
บทความนี้มีคำนิยามที่คุณนำไปพูดในที่ประชุมได้ ตารางเปรียบเทียบแบบวางคู่กัน แบบฟอร์มติดต่อสอบถามหนึ่งชุด ที่แยกเป็นการตัดสินใจด้าน UX และ UI และเช็กลิสต์ สำหรับโปรเจกต์ถัดไปของคุณ
คำตอบสั้น ๆ
การออกแบบ UX (ประสบการณ์ผู้ใช้) คือการกำหนดว่า ประสบการณ์ทั้งหมดทำงานอย่างไร และให้ความรู้สึกอย่างไร การออกแบบ UI (ส่วนติดต่อผู้ใช้) คือหน้าจอ ปุ่มควบคุม และชั้นภาพ ที่คนเห็นและแตะจริง ๆ
ความแตกต่างระหว่าง UX และ UI สรุปได้แบบนี้ UX ตัดสินว่าผู้เข้าชมต้องการอะไร เว็บไซต์ควรมีอะไร เรียงลำดับอย่างไร และคนเดินทางจากตอนที่มาถึง จนได้สิ่งที่มาหาอย่างไร UI ตัดสินว่าแต่ละช่วงเวลาเหล่านั้น หน้าตาและการตอบสนองเป็นอย่างไร ทั้งเลย์เอาต์ ตัวอักษร สี ปุ่ม ช่องกรอกข้อมูล และสถานะต่าง ๆ ของมัน เว็บไซต์ต้องมีทั้งสองอย่าง และเมื่อขาดอย่างใดอย่างหนึ่ง ผู้เข้าชมจะรู้สึกได้ แม้จะบอกไม่ได้ว่าคืออะไร
UX design ครอบคลุมอะไรบนเว็บไซต์
Don Norman ทำให้คำว่า “user experience” เป็นที่รู้จัก ตอนอยู่ที่ Apple ในช่วงต้นทศวรรษ 1990 และ คำนิยามของ Nielsen Norman Group ก็จงใจให้กว้าง คือทุกส่วนของการปฏิสัมพันธ์ ระหว่างคนหนึ่งคน กับบริษัท บริการ และผลิตภัณฑ์ของบริษัทนั้น
บนเว็บไซต์ การออกแบบ UX แคบลงเหลือคำถามเชิงปฏิบัติ คือคนที่คุณอยากเข้าถึง หาสิ่งที่ต้องการเจอไหม เข้าใจไหม เชื่อไหม และลงมือทำได้ไหม โดยใช้ความพยายามน้อยที่สุด ถ้าทำได้ดี มันแทบมองไม่เห็นเลย
การวิจัยและเป้าหมาย
ใครเข้ามา มาเพื่อทำอะไร ต้องรู้อะไรก่อนติดต่อ และธุรกิจต้องการอะไรจากเว็บไซต์ ในโปรเจกต์เล็ก ๆ อาจเป็นการพูดคุยแบบมีโครงสร้าง ข้อมูลวิเคราะห์ของคุณ คำค้นหาใน Search Console และคำถามที่ทีมขายได้ยินทุกสัปดาห์
โครงสร้างและการนำทาง
มีหน้าอะไรบ้าง แต่ละหน้าชื่ออะไร และจัดกลุ่มอย่างไร นี่คือสถาปัตยกรรมข้อมูล (information architecture) และเป็นจุดที่เว็บไซต์ธุรกิจจำนวนมากพลาด คือเมนูที่จัดตามแผนกภายใน แทนที่จะใช้คำที่ลูกค้าใช้ คู่มือ การออกแบบเมนูนำทางเว็บไซต์ ของเรา ลงรายละเอียดไว้มากกว่านี้
เส้นทาง ความติดขัด และการทดสอบ
เส้นทางจากการค้นหาบน Google ไปจนถึงการติดต่อสอบถาม ลำดับที่ข้อมูลปรากฏในแต่ละหน้า แบบฟอร์มทำงานอย่างไร ผู้เข้าชมต้องรอนานแค่ไหน และเว็บไซต์ใช้งานได้ด้วยคีย์บอร์ด หรือโปรแกรมอ่านหน้าจอหรือไม่ จากนั้นดูคนจริงลองทำงานจริง ซึ่งมักยุติข้อถกเถียง ที่การประชุมภายในยุติไม่ได้
สิ่งที่คุณควรได้เห็น งาน UX ให้ผลงานที่คุณตรวจได้ ได้แก่ แผนผังเว็บไซต์ เส้นทางผู้ใช้ wireframe (เลย์เอาต์แบบเรียบง่าย มักเป็นสีเทา ที่แสดงคอนเทนต์และลำดับความสำคัญ โดยไม่ตกแต่ง) โครงร่างคอนเทนต์ และบันทึกจากการทดสอบ
UI design ครอบคลุมอะไรบนเว็บไซต์
การออกแบบ UI เปลี่ยนแผนนั้น ให้เป็นสิ่งที่คนเห็นและใช้งานได้ มันไม่ใช่สิ่งเดียวกับการสร้างแบรนด์ แบรนด์ของคุณให้วัตถุดิบ เช่น โลโก้ สี และแบบตัวอักษร และ UI เปลี่ยนวัตถุดิบเหล่านั้น ให้เป็นหน้าเว็บและปุ่มควบคุมที่ใช้งานได้
เลย์เอาต์ ตัวอักษร และสี
กริด ระยะห่าง แบบตัวอักษร และชุดสี จัดวางให้สายตาไปตกที่สิ่งที่สำคัญก่อน (ดู ลำดับชั้นทางสายตาในการออกแบบเว็บ) ความอ่านง่ายเป็นส่วนหนึ่งของงาน ที่ระดับ AA WCAG 2.2 กำหนดอัตราส่วนคอนทราสต์อย่างน้อย 4.5:1 สำหรับตัวอักษรขนาดปกติ และ 3:1 สำหรับตัวอักษรขนาดใหญ่ และ 3:1 สำหรับส่วนที่มองเห็น ซึ่งคนใช้สังเกตว่าตรงไหนเป็นตัวควบคุม เช่น ขอบของช่องกรอกข้อมูล
คอมโพเนนต์และสถานะของมัน
ปุ่ม ลิงก์ ช่องกรอกข้อมูล การ์ด และเมนู แต่ละอย่างถูกออกแบบในทุกสถานะที่เป็นไปได้ ได้แก่ ปกติ ชี้เมาส์ โฟกัสด้วยคีย์บอร์ด กดอยู่ ปิดใช้งาน กำลังโหลด ผิดพลาด และสำเร็จ งานออกแบบที่แสดงแค่สถานะปกติ ปล่อยให้นักพัฒนาต้องเดาส่วนที่เหลือ
การปรับตามหน้าจอและขนาดพื้นที่แตะ
แต่ละคอมโพเนนต์จัดเรียงใหม่อย่างไร ตั้งแต่มือถือจอแคบจนถึงจอกว้าง และพื้นที่แตะใหญ่แค่ไหน WCAG 2.2 กำหนดขั้นต่ำ 24 x 24 CSS pixel ที่ระดับ AA โดยมีข้อยกเว้น เช่น ลิงก์ที่อยู่ในประโยค ส่วนระดับ AAA ที่เข้มงวดกว่า กำหนด 44 x 44 ซึ่งเป็นขนาดที่แตะสบายกว่า สำหรับปุ่มและเมนู คู่มือ Mobile-first กับ responsive design ของเรา อธิบายแนวทางไว้
สิ่งที่คุณควรได้เห็น ม็อกอัปของหน้าสำคัญ ที่ความกว้างมือถือและเดสก์ท็อป สไตล์ไกด์หรือคลังคอมโพเนนต์ และสเปกที่นักพัฒนานำไปสร้างได้
UX กับ UI design วางคู่กัน
ลองดูตัวอย่าง: แบบฟอร์มเดียว การตัดสินใจสองชุด
สมมติบริษัทวิศวกรรมแห่งหนึ่ง อยากได้คำขอใบเสนอราคาจากเว็บไซต์มากขึ้น นี่คือวิธีที่งานบนแบบฟอร์มติดต่อสอบถาม แยกออกเป็นสองส่วน
การตัดสินใจด้าน UX
- แบบฟอร์มอยู่ตรงไหน ในทุกหน้าบริการ ข้างข้อมูลที่ทำให้เกิดคำถาม ไม่ใช่แค่ในหน้าติดต่อเรา ที่อยู่ห่างออกไปสามคลิก
- ถามอะไรบ้าง เฉพาะสิ่งที่ทีมต้องใช้ เพื่อตอบกลับได้อย่างมีประโยชน์ คำถามเรื่องงบประมาณ อาจช่วยคัดกรองลีด หรืออาจไล่ลูกค้าที่ดีที่สุดไป ให้ตัดสินใจร่วมกับคนที่ตอบการติดต่อสอบถาม แทนการเดา
- คนต้องรู้อะไร ก่อนกดส่ง จะเกิดอะไรขึ้นต่อ จะได้รับคำตอบเมื่อไร และการขอใบเสนอราคา ไม่ได้ผูกมัดอะไรเขาเลย
- ทางเลือกอื่น ผู้ซื้อบางคนอยากโทรหรือส่งข้อความมากกว่า เสนอช่องทางที่ลูกค้าของคุณใช้ ในภาษาที่เขาใช้
- จะเกิดอะไรขึ้น เมื่อมีอะไรผิดพลาด ต้องจับข้อผิดพลาดไหน เมื่อไร และทำให้แน่ใจว่า ไม่มีอะไรที่ผู้เข้าชมพิมพ์ไว้หายไป
- จะเกิดอะไรขึ้นหลังจากนั้น ข้อความยืนยันที่บอกให้รู้ว่าจะเกิดอะไรต่อ อีเมลตอบรับ และการติดตามผล เพื่อให้ธุรกิจเห็นว่า หน้าไหนสร้างการติดต่อสอบถาม
การตัดสินใจด้าน UI
- label ที่มองเห็นได้ เหนือแต่ละช่อง ไม่ใช่ข้อความตัวอย่างในช่อง ที่หายไปทันทีที่เริ่มพิมพ์
- คอลัมน์เดียว เพื่อให้สายตาเคลื่อนไปทางเดียว และไม่มีช่องไหนถูกข้ามบนมือถือ
- ปุ่มที่บอกว่ามันทำอะไร “ขอใบเสนอราคา” แทน “ส่ง” แตะง่าย และมีสถานะกำลังโหลด เพื่อไม่ให้ใครกดซ้ำสองครั้ง
- ข้อความแจ้งข้อผิดพลาด อยู่ข้างช่องที่มันพูดถึง มีไอคอนหรือข้อความกำกับ นอกจากสี เพราะสีอย่างเดียว ใช้ไม่ได้กับคนที่แยกสีไม่ออก
- สไตล์โฟกัสที่มองเห็นได้ เพื่อให้ผู้ใช้คีย์บอร์ด รู้เสมอว่าอยู่ตรงไหน
จุดที่ทั้งสองมาบรรจบกัน
ดูที่ข้อความแจ้งข้อผิดพลาด การตัดสินใจว่าจะพูดอะไร และอธิบายวิธีแก้อย่างไร คือ UX และถ้อยคำสำคัญที่สุด ส่วนตำแหน่งที่ข้อความปรากฏ สี และไอคอน คือ UI ถ้าแบ่งงานนี้ให้สองคน ที่ไม่เคยคุยกัน คุณจะได้กล่องสีแดงเรียบร้อย ที่เขียนว่า “ข้อมูลไม่ถูกต้อง”
งานเว็บไซต์ที่ดี ถือว่า UX และ UI เป็นบทสนทนาเดียว ไม่ใช่การส่งต่องานสองทอด คู่มือ การออกแบบแบบฟอร์มบนเว็บ ของเรา มีเช็กลิสต์ฉบับเต็ม
ทำไมเว็บไซต์ต้องมีทั้งสองอย่าง
UI แข็ง UX อ่อน เว็บไซต์ที่ได้คำชมตอนเปิดตัว แต่เสียผู้เข้าชมหลังจากนั้น เช่น ศัพท์เฉพาะในเมนู หาราคาไม่เจอ และหน้าบริการที่ไม่มีขั้นต่อไป
UX แข็ง UI อ่อน โครงสร้างดี แต่หน้าเว็บดูล้าสมัย ตัวอักษรเล็กและจาง และปุ่มไม่ดูเหมือนปุ่ม ผู้เข้าชมตัดสินความน่าเชื่อถือเร็วมาก และส่วนติดต่อที่ดูเก่า ทำลายคอนเทนต์ที่ดี
มีทั้งสองอย่าง และทำงานร่วมกับทุกอย่าง UX และ UI เป็นส่วนผสมสองอย่าง ไม่ใช่สูตรทั้งหมด เว็บไซต์ที่ออกแบบมาดี ยังเสียคนได้ ถ้าโหลดช้า หาบน Google ไม่เจอ หรือไม่ได้พูดอะไรที่เจาะจง คู่มือ อะไรทำให้เว็บไซต์ดี ของเรา แสดงว่าการออกแบบ ต้องพึ่งกลยุทธ์ การพัฒนา ประสิทธิภาพ SEO คอนเทนต์ คอนเวอร์ชัน และการปรับปรุงต่อเนื่องอย่างไร และตอนนี้ AI เข้ามาอยู่ตรงไหน
UX และ UI ต้องเป็นคนละคนไหม?
ไม่จำเป็น องค์กรที่ทำผลิตภัณฑ์ขนาดใหญ่ มักจ้างนักวิจัย UX นักออกแบบ UX และนักออกแบบ UI แยกกัน แต่สำหรับเว็บไซต์ธุรกิจ นักออกแบบคนเดียวที่ดูแลทั้งสองด้าน และทำงานใกล้ชิดกับนักพัฒนา และคนเขียนคอนเทนต์ เป็นเรื่องปกติ และมักดีกว่าด้วย มีสองเรื่องที่สำคัญกว่าชื่อตำแหน่ง
การคิดแบบ UX ต้องเกิดก่อน โครงสร้างแก้ง่ายบน wireframe แต่แก้แพงในงานออกแบบที่เสร็จแล้ว คำว่า “UX/UI designer” ในโปรไฟล์ ไม่ได้พิสูจน์ว่า จะมีใครถามว่าลูกค้าของคุณคือใคร
นักพัฒนาเป็นส่วนหนึ่งของประสบการณ์ ความเร็วในการโหลด การทำงานของแบบฟอร์ม และการใช้งานด้วยคีย์บอร์ด ขึ้นอยู่กับการพัฒนาอย่างมาก งานออกแบบที่สร้างออกมาให้ดีไม่ได้ ไม่ใช่ UX ที่ดี ไม่ว่าม็อกอัปจะสวยแค่ไหน
วิธีดูว่าโปรเจกต์เว็บไซต์มีงาน UX จริง
ขอหลักฐาน ไม่ใช่ชื่อเรียก ก่อนเซ็นสัญญา ให้ตรวจ:
จากนั้นถามตรง ๆ ว่า “เราจะได้เห็นและอนุมัติอะไรบ้าง ก่อนงานออกแบบภาพชิ้นแรก?” และ “คุณจะตัดสินอย่างไรว่า อะไรอยู่บนหน้าแรก และเรียงลำดับอย่างไร?”
สัญญาณอันตราย ถ้าสิ่งแรกที่คุณได้เห็น คือม็อกอัปหน้าแรกที่ขัดเกลามาอย่างดี แปลว่าคำถามด้านโครงสร้าง ถูกตอบไปโดยไม่มีคุณ หรือไม่เคยถูกถามเลย รายการ คำถามที่ควรถามก่อนจ้างคนทำเว็บไซต์ ของเรา ครอบคลุมเรื่องความเป็นเจ้าของ ค่าใช้จ่าย และขั้นตอนด้วย
คำถามที่พบบ่อย
UX สำคัญกว่า UI ไหม?
ไม่มีอย่างไหนทำงานได้ โดยไม่มีอีกอย่าง ส่วนติดต่อที่ขัดเกลามาดี ช่วยหน้าที่ตอบคำถามผิดไม่ได้ และโครงสร้างที่ดี ก็ยังเสียผู้เข้าชม ถ้าตัวอักษรอ่านยาก หรือหาปุ่มยาก
เว็บไซต์ธุรกิจขนาดเล็กต้องมี UX design จริงไหม?
ต้อง แต่ปรับขนาดให้เหมาะกับโปรเจกต์ แม้เว็บไซต์ห้าหน้า ก็ต้องมีคนตัดสินว่า แต่ละหน้ามีไว้ทำอะไร ผู้เข้าชมต้องเห็นอะไรก่อนติดต่อ และการติดต่อสอบถามทำงานอย่างไรบนมือถือ อาจใช้เวลาไม่กี่ชั่วโมง แทนที่จะเป็นหลายสัปดาห์ แต่ถ้าข้ามไป จะได้โบรชัวร์ที่ไม่มีใครลงมือทำอะไร
งานเขียน copy อยู่ฝั่ง UX หรือ UI?
ส่วนใหญ่เป็น UX ถ้อยคำบนปุ่ม label หัวข้อ และข้อความแจ้งข้อผิดพลาด เป็นตัวตัดสินว่าคนเข้าใจไหม ว่าต้องทำอะไร นี่คือเหตุผลที่หลายทีมเรียกว่า UX writing ร่างคอนเทนต์จริงไปพร้อมกับ wireframe แทนการเทใส่งานออกแบบที่เสร็จแล้ว
UX กับ CX ต่างกันอย่างไร?
ประสบการณ์ลูกค้า (customer experience หรือ CX) ครอบคลุมทุกจุดที่คนสัมผัสกับธุรกิจของคุณ ตั้งแต่การคุยกับฝ่ายขาย ไปจนถึงการส่งมอบ ใบแจ้งหนี้ และการบริการหลังการขาย ในโปรเจกต์เว็บไซต์ส่วนใหญ่ UX หมายถึงตัวเว็บไซต์เอง UX ของเว็บไซต์ที่ดี สนับสนุนประสบการณ์ลูกค้าในภาพรวม เช่น การบอกให้ชัดตามจริงว่า คุณตอบกลับเร็วแค่ไหน
ขั้นต่อไป
เมื่อคุณเขียนบรีฟเว็บไซต์ ให้ขอ UX และ UI จากผลงานที่มันสร้าง ไม่ใช่จากชื่อเรียก คือโครงสร้างและแผนของแต่ละหน้า ให้อนุมัติก่อนจะตกแต่งอะไร จากนั้นเป็นงานออกแบบที่ใช้งานได้บนมือถือ ผ่านมาตรฐานการเข้าถึงสำหรับทุกคน และทำให้ขั้นต่อไปชัดเจน
โปรเจกต์ ออกแบบและพัฒนาเว็บไซต์ ของเรา เริ่มจากการพูดคุยเรื่องลูกค้าของคุณ และแผนผังเว็บไซต์ ที่ตกลงกันไว้ในข้อเสนอแบบราคาคงที่เป็นลายลักษณ์อักษร จากนั้นงานออกแบบทีละหน้าในแบรนด์ของคุณ จะถูกรีวิวร่วมกัน และอนุมัติก่อนเริ่มพัฒนา
มีเว็บไซต์อยู่แล้ว และบอกไม่ได้ว่าปัญหาอยู่ที่โครงสร้าง หรือหน้าตา? ลองทำตามคู่มือ การตรวจ UX ของเว็บไซต์ ของเรา หรือขอ ตรวจสอบเว็บไซต์ฟรี ซึ่งดูว่าเว็บไซต์ทำงานอย่างไรบนมือถือ และผู้เข้าชมติดต่อคุณได้ง่ายแค่ไหน ซึ่งมักเป็นจุดที่การขาดงาน UX แสดงออกมาก่อน