UI คืออะไร และต่างจาก UX อย่างไรในการออกแบบเว็บไซต์

UI คืออะไร

UI ย่อมาจาก User Interface คือทุกสิ่งบนหน้าจอที่ผู้ใช้มองเห็นและโต้ตอบได้ ปุ่ม ตัวอักษร สี ระยะห่าง ช่องกรอกฟอร์ม ไอคอน และเมนู ล้วนเป็น UI ส่วน UX ย่อมาจาก User Experience คือประสบการณ์ทั้งหมดของผู้ใช้ตั้งแต่เริ่มต้นจนทำสิ่งที่ต้องการสำเร็จ หรือล้มเลิกไปกลางทาง

พูดให้สั้นที่สุด UI ตอบคำถามว่าหน้าจอหน้าตาเป็นอย่างไร UX ตอบคำถามว่าผู้ใช้ไปถึงเป้าหมายได้ง่ายแค่ไหน ปุ่มสวยแต่อยู่ผิดที่คือ UI ดีแต่ UX แย่ ส่วนขั้นตอนสั้นแต่ตัวอักษรเล็กจนอ่านยากคือ UX ที่คิดมาดีแต่ UI ทำให้เสียของ

องค์ประกอบของ UI บนเว็บไซต์

• ตัวอักษร ฟอนต์ ขนาด ระยะบรรทัด และลำดับหัวข้อ
• สี สีหลัก สีปุ่ม และความต่างของสีตัวอักษรกับพื้นหลัง
• ระยะห่าง ช่องว่างที่ทำให้แต่ละส่วนแยกกันชัด
• ปุ่มและลิงก์ ขนาดที่กดด้วยนิ้วได้ และข้อความที่บอกชัดว่ากดแล้วเกิดอะไร
• ฟอร์ม ป้ายกำกับ ช่องกรอก และข้อความแจ้งข้อผิดพลาด
• ไอคอนและภาพ ช่วยสื่อความหมายเร็วขึ้นเมื่อใช้อย่างสม่ำเสมอ

UX คืออะไร

Nielsen Norman Group ซึ่งเป็นองค์กรวิจัยด้านการใช้งานที่คนในวงการอ้างอิงกันมาก ให้ความหมายของ UX ว่าครอบคลุมทุกแง่มุมของการที่ผู้ใช้ปลายทางมีปฏิสัมพันธ์กับบริษัท บริการ และผลิตภัณฑ์ของบริษัทนั้น หมายความว่า UX ไม่ได้จบที่หน้าจอ ถ้าลูกค้ากรอกฟอร์มแล้วไม่มีใครติดต่อกลับ ประสบการณ์นั้นก็แย่ แม้หน้าเว็บจะออกแบบมาดีแค่ไหนก็ตาม

สำหรับเว็บไซต์ธุรกิจ UX ที่ดีมักมีลักษณะร่วมกัน ผู้เข้าชมรู้ทันทีว่าเว็บนี้ขายอะไร หาข้อมูลที่ต้องการเจอภายในไม่กี่คลิก เข้าใจราคาหรือขั้นตอนถัดไป และติดต่อได้ด้วยช่องทางที่ตัวเองถนัด คนไทยจำนวนมากถนัดทักผ่าน LINE มากกว่ากรอกฟอร์ม ขณะที่ลูกค้าต่างชาติมักเลือกอีเมลหรือ WhatsApp การเปิดทางเลือกให้ตรงกับคนแต่ละกลุ่มจึงเป็นการตัดสินใจด้าน UX โดยตรง

UI กับ UX ต่างกันอย่างไร

ทั้งสองเรื่องทำงานคู่กัน แต่ถามคำถามต่างกันและวัดผลต่างกัน ตารางนี้สรุปความต่างที่ใช้ได้จริงเวลาคุยงานกับนักออกแบบ

ตัวอย่าง UI และ UX บนหน้าเว็บไซต์หนึ่งหน้า

ลองดูหน้าติดต่อของเว็บไซต์บริษัทสมมติแห่งหนึ่ง ซึ่งเป็นหน้าที่ธุรกิจส่วนใหญ่มีแต่ไม่ค่อยได้ตรวจ ตัวอย่างนี้เป็นกรณีสมมติเพื่ออธิบายแนวคิด

ปัญหาฝั่ง UI

• ป้ายกำกับอยู่ในช่องกรอก พอเริ่มพิมพ์ป้ายก็หายไป ผู้ใช้ลืมว่าช่องนี้ให้กรอกอะไร
• ปุ่มส่งเป็นสีเทาอ่อน ดูเหมือนกดไม่ได้
• ข้อความแจ้งข้อผิดพลาดเป็นภาษาอังกฤษ ทั้งที่หน้าเว็บเป็นภาษาไทย

ปัญหาฝั่ง UX

• ฟอร์มถามถึงเก้าช่อง รวมชื่อบริษัท ตำแหน่ง และงบประมาณ ทั้งที่ลูกค้าแค่อยากถามคำถามเดียว
• ส่งแล้วไม่มีหน้ายืนยัน ผู้ใช้ไม่แน่ใจว่าส่งสำเร็จหรือไม่ จึงกดซ้ำ
• ไม่มีช่องทางอื่น คนที่อยากทัก LINE หรือโทรต้องออกไปหาเบอร์เอง

การแก้ UI ทำได้ในไม่กี่ชั่วโมง แต่การแก้ UX ต้องตัดสินใจว่าข้อมูลขั้นต่ำที่ทีมขายต้องใช้คืออะไร และใครจะตอบกลับ ลองเทียบกับโครงหน้าตัวอย่างหลายแบบในบทความตัวอย่างเว็บไซต์บริษัทพร้อมคำอธิบาย จะเห็นว่าเว็บที่ดีมักถามน้อยและบอกขั้นตอนถัดไปชัดเจน

กระบวนการออกแบบ UX UI

1. ทำความเข้าใจผู้ใช้ คุยกับทีมขายหรือพนักงานหน้าร้านว่าลูกค้าถามอะไรบ่อย ดูข้อความที่เข้ามาทาง LINE และอีเมล นี่คือการวิจัยที่ธุรกิจเล็กทำได้โดยไม่มีค่าใช้จ่าย
2. วางโครงสร้างข้อมูล กำหนดว่าเว็บมีหน้าอะไร แต่ละหน้าตอบคำถามไหน และเมนูเรียงอย่างไร
3. ทำ wireframe โครงหน้าแบบขาวดำที่บอกตำแหน่งเนื้อหาและปุ่ม ยังไม่ใส่สีหรือภาพ ช่วยให้ตกลงกันเรื่องลำดับข้อมูลก่อนเสียเวลากับรายละเอียด
4. ออกแบบ UI และทำต้นแบบ ใส่ฟอนต์ สี ภาพ และทำต้นแบบที่กดไปมาได้
5. ทดสอบ ให้คนที่ไม่เคยเห็นเว็บลองทำงานหนึ่งอย่าง เช่น หาราคาแล้วส่งคำถาม แล้วสังเกตว่าติดตรงไหน

เนื่องจากขั้นตอนนี้ต้องใช้เวลา เว็บที่ใช้ธีมสำเร็จรูปมักข้ามไปขั้นที่สี่เลย ข้อดีข้อเสียของทั้งสองทางอธิบายไว้ในบทความสร้างเว็บไซต์สำเร็จรูปหรือออกแบบใหม่ทั้งหมด

หลักการใช้งานที่ใช้ตรวจงานได้

Nielsen Norman Group เผยแพร่หลักการประเมินการใช้งาน 10 ข้อ ที่หยิบมาใช้กับเว็บธุรกิจได้ทันที เช่น บอกสถานะให้ผู้ใช้รู้เสมอ ใช้คำที่ผู้ใช้คุ้นเคย ป้องกันข้อผิดพลาดก่อนเกิด และทำให้ย้อนกลับได้ง่าย ลองใช้หลักเหล่านี้ไล่ตรวจหน้าสำคัญทีละหน้า

หลักการออกแบบ UI สำหรับผู้ใช้คนไทย

ตัวอักษรไทยมีสระบน สระล่าง และวรรณยุกต์ซ้อนกันได้หลายชั้น กฎที่ใช้กับภาษาอังกฤษจึงยกมาใช้ตรง ๆ ไม่ได้

• ขนาดตัวอักษร ฟอนต์ไทยส่วนใหญ่ดูเล็กกว่าฟอนต์อังกฤษที่ขนาดเท่ากัน เนื้อหาหลักจึงมักต้องใหญ่กว่าเล็กน้อยจึงจะอ่านสบายบนมือถือ
• ระยะบรรทัด ต้องเผื่อพื้นที่ให้สระและวรรณยุกต์ ไม่อย่างนั้นบรรทัดจะชนกัน
• การตัดคำ ภาษาไทยไม่เว้นวรรคระหว่างคำ ข้อความยาวบนจอแคบอาจตัดกลางคำ ควรตรวจหัวข้อทุกหน้าบนมือถือจริง
• ปุ่มสลับภาษา วางไว้ที่มุมบนในตำแหน่งเดียวกันทุกหน้า และพาไปหน้าเดียวกันในอีกภาษา ไม่ใช่กลับหน้าแรก
• ปุ่ม LINE และ WhatsApp ผู้ใช้คนไทยคาดหวังปุ่ม LINE ส่วนลูกค้าต่างชาติมองหา WhatsApp บนมือถือควรมีปุ่มติดต่อที่เห็นได้โดยไม่ต้องเลื่อนหา
• ความต่างของสี WCAG 2.2 ของ W3C กำหนดเกณฑ์ความต่างระหว่างสีตัวอักษรกับพื้นหลัง สีเทาอ่อนบนพื้นขาวที่ดูสวยมักไม่ผ่านเกณฑ์

รายละเอียดเหล่านี้เป็นส่วนหนึ่งของงานรับออกแบบเว็บสองภาษาของเรา ซึ่งตรวจทั้งหน้าจอภาษาไทยและภาษาอังกฤษก่อนเปิดใช้งาน

งานของ UX UI designer

ในทีมใหญ่ งานอาจแยกเป็นหลายตำแหน่ง UX researcher สัมภาษณ์และทดสอบกับผู้ใช้ UX designer วางโครงสร้างและ wireframe ส่วน UI designer ออกแบบหน้าจอและชุดองค์ประกอบ สำหรับเว็บธุรกิจขนาดเล็กถึงกลาง คนคนเดียวมักรับทั้งสองบทบาท แล้วส่งงานต่อให้นักพัฒนาเขียนโค้ด

เครื่องมือที่พบบ่อยคือ Figma ซึ่งใช้ทำ wireframe ดีไซน์ และต้นแบบที่กดได้ในที่เดียว นอกจากนี้ยังมีเครื่องมือทำแผนผังเว็บ และสเปรดชีตธรรมดาสำหรับจดผลทดสอบ เจ้าของธุรกิจที่ไม่มีนักออกแบบบางรายเริ่มร่างหน้าตาใน Canva หรือให้เครื่องมือ AI สร้างหน้าตัวอย่าง ซึ่งช่วยเรื่อง UI ได้บ้าง แต่ยังต้องมีคนตรวจ UX เอง อ่านข้อจำกัดได้ในสร้างเว็บไซต์ด้วย Canva ได้ไหม และสร้างเว็บไซต์ด้วย AI ได้จริงไหม เครื่องมือสำคัญน้อยกว่าการตั้งคำถามถูกต้อง

จุดที่ UX เจอกับ SEO

โครงสร้างหัวข้อที่ชัด หน้าเว็บที่โหลดเร็ว และเนื้อหาที่ตอบคำถามตรงประเด็น ช่วยทั้งผู้ใช้และการค้นหา สองเรื่องนี้ต้องคิดไปพร้อมกัน อ่านพื้นฐานเพิ่มได้ในบทความการทำ SEO เบื้องต้นสำหรับเว็บธุรกิจ

วัดผล UX บนเว็บธุรกิจเล็ก

• นับจำนวนฟอร์มที่ส่งสำเร็จเทียบกับจำนวนคนที่เปิดหน้าติดต่อ
• นับการกดปุ่มโทร LINE และ WhatsApp
• ให้คนสามถึงห้าคนลองทำงานหนึ่งอย่างบนมือถือ แล้วจดว่าติดตรงไหน
• ถามลูกค้าใหม่ว่าหาข้อมูลอะไรในเว็บไม่เจอ

บทความออกแบบเว็บไซต์ที่เกี่ยวข้อง

อ่านต่อเรื่องการวางแผนและออกแบบเว็บได้จากคลังบทความเรื่องเว็บไซต์ของเรา หากอยากให้ช่วยดูว่าหน้าไหนของเว็บคุณควรปรับก่อน ส่งรายละเอียดโปรเจกต์ให้เราพร้อมลิงก์เว็บปัจจุบันได้เลย

• SEO คืออะไร อธิบายให้เจ้าของธุรกิจเข้าใจตั้งแต่พื้นฐาน

  SEO ย่อมาจาก Search Engine Optimization บทความนี้อธิบายการทำงานของ Google ประเภทของ SEO ขั้นตอนการทำ ความต่างจาก SEM เรื่องคำค้นภาษาไทย และสัญญาณอันตรายที่ควรระวัง

  อ่านบทความ

• ตัวอย่างเว็บไซต์ธุรกิจแยกตามประเภท พร้อมเหตุผลว่าทำไมจึงได้ผล

  ตัวอย่างประกอบการจัดหน้าเว็บไซต์บริษัท ร้านค้าออนไลน์ คลินิก โรงแรม และเว็บไซต์สองภาษา พร้อมเหตุผลว่าทำไมจึงได้ผล และวิธีนำตัวอย่างไปเขียนบรีฟ

  อ่านบทความ

• เว็บไซต์สำเร็จรูปกับการจ้างทำ เลือกแบบไหนให้เหมาะกับธุรกิจ

  เทียบเว็บไซต์สำเร็จรูปกับการจ้างทำเว็บไซต์ ด้วยตาราง สูตรคิดต้นทุนสามปี และข้อควรรู้ก่อนย้ายแพลตฟอร์ม เพื่อเลือกทางที่เหมาะกับธุรกิจ

  อ่านบทความ

แหล่งอ้างอิง

• Nielsen Norman Group: ความหมายของ User Experience (UX)
• Nielsen Norman Group: หลักการประเมินการใช้งาน 10 ข้อ
• W3C: ภาพรวมมาตรฐาน WCAG 2

ตรวจทานโดย Litesh Dhirผู้ร่วมก่อตั้ง ดูแลงาน SEO และการพัฒนาเว็บไซต์

สร้างเว็บไซต์และดูแลอันดับการค้นหา รวมถึงวางระบบเบื้องหลังเว็บไซต์ลูกค้า 17 แห่งที่เราเผยแพร่ตัวเลขจาก Search Console เกี่ยวกับเรา (หน้าภาษาอังกฤษ)