UXUI: ครึ่งหลังของคำที่มักมาคู่กัน UI คืออะไร? เหมือนและแตกต่างจาก UX อย่างไร?

 UXUI นั้นเป็นคำที่เรามักจะได้ยินมาคู่กันอยู่เสมอ ไม่ใช่แค่เพียงในคำพูด แต่เมื่อเรามองดูประกาศรับสมัครงาน หลาย ๆ ครั้งจะเห็นการประกาศรับสมัครงานตำแหน่ง UX/UI Designer ที่มาคู่กันอยู่เสมอเช่นกัน แสดงว่า UX และ UI นั้นมีความเหมือนกันอย่างนั้นหรือ? ในบทความ [UXUI: ครึ่งแรกของคำที่มักมาคู่กัน UX คืออะไร?] พวกเรา Foxbith ได้มีการอธิบายถึง UX ว่าคืออะไรและควรมีลักษณะอย่างไรกันไปแล้ว

ในบทความนี้ พวกเราเลยจะอธิบายต่อถึงครึ่งหลังของคำที่มักจะมาคู่กันอย่าง UI หรือ User Interface ว่าคืออะไร และมีความเหมือนหรือแตกต่างกับ UX อย่างไร?

ทำความรู้จัก UI, UI Design และ UI Designer

User Interface หรือสิ่งที่เราเรียกว่า UI คือ จุดเชื่อมต่อผู้ใช้งานกับระบบคอมพิวเตอร์ ไม่ว่าจะเป็นหน้าจอ ปุ่ม สัญลักษณ์ต่าง ๆ หรือองค์ประกอบภาพอื่น ๆ ไม่ว่าจะเป็นระบบใด ๆ ก็ตามหากผู้ใช้ทำการมีปฏิสัมพันธ์ด้วยล้วนแต่นับเป็นส่วนหนึ่งของ UI ทั้งสิ้น

การออกแบบ UI (UI Design) นั้นมีเป้าหมายเพื่อให้ผู้ใช้สามารถเข้าใจถึง หน้าจอผู้ใช้ (Interface) ของแอปพลิเคชั่นหรือระบบได้อย่างง่ายดาย เมื่อผู้ใช้เห็นแล้วสามารถเข้าใจวิธีการใช้งานได้ทันทีโดยไม่ต้องคิดหรือพิจารณาถึงมาก ยกตัวอย่างเช่น เมื่อมองเห็นเครื่องหมายกากบาทแล้วผู้ใช้เข้าใจว่าเป็นการปิด

หน้าต่าง อีกทั้งยังออกแบบให้มีความสวยงาม ทั้งโทนสี ขนาดและรูปแบบตัวอักษร รวมถึงการตกแต่งอื่น ๆ เพื่อถ่ายทอดจุดแข็งและภาพลักษณ์ของผลิตภัณฑ์หรือบริการ โดยผู้ที่มีหน้าที่ในการออกแบบ UI ก็คือ UI Designer ที่ใช้ทักษะการออกแบบควบคู่กับการวิเคราะห์จิตวิทยา ทำงานร่วมกับ UX Designer, User Researcher และตำแหน่งอื่น ๆ เพื่อออกแบบระบบที่เป็นมิตรต่อผู้ใช้และน่าดึงดูด 

‍

องค์ประกอบสำคัญของ UI

ถึงแม้การออกแบบ UI แต่ละอันจะมีความแตกต่างกันตามลักษณะ จุดแข็ง หรือภาพลักษณ์ของผลิตภัณฑ์หรือบริการ แต่ UI ทุกอันจะมีองค์ประกอบโดยทั่วไปที่เหมือนกันอยู่ 4 องค์ประกอบ แม้ว่าอาจไม่สามารถมองเห็นได้บนหน้าจอเสมอไป ประกอบด้วย

1. การควบคุมการป้อนข้อมูล (Input Controls)
   คือการให้ผู้ใช้มีปฏิสัมพันธ์กับผลิตภัณฑ์หรือระบบโดยการใส่ข้อมูล การควบคุมการป้อนข้อมูล (Input Controls) สามารถทำได้ง่าย ๆ โดยการใช้ปุ่มและcheckbox หรือทำในรูปแบบที่มีความซับซ้อนมากยิ่งขึ้นอย่าง ช่องข้อความ รายการเลือก (Dropdown Menu) และปุ่ม toggle

2. องค์ประกอบที่เกี่ยวข้องกับข้อมูล (Informational Components)
   คือการให้ผลิตภัณฑ์หรือระบบมอบข้อมูลให้แก่ผู้ใช้ ไม่ว่าจะเป็นการแจ้งเตือน แถบแสดงความคืบหน้า กล่องข้อความ หรือคำแนะนำการใช้เครื่องมือ

3. องค์ประกอบที่เกี่ยวข้องกับการนำทาง (Navigational components)
   คือการช่วยนำทางให้ผู้ใช้สามารถใช้งานผลิตภัณฑ์หรือเว็บไซต์ได้อย่างสะดวกมากยิ่งขึ้น ยกตัวอย่างเช่น ช่องค้นหา แท็ก (tags) หรือ breadcrumbs เป็นต้น

4. คอนเทนเนอร์ (Containers)
   Containers คือองค์ประกอบที่จัดระเบียบ UI จัดกลุ่มองค์ประกอบต่าง ๆ กำหนดขอบเขตของการแสดงเนื้อหา ยกตัวอย่างเช่น Headers, แท็ป (Tabs) และ Accordion Menu ต่าง ๆ

‍

UX และ UI เหมือนกันอย่างร?

ถึงแม้โดยทั่วไปแล้วบางคนอาจจะมองว่า UI นั้นเป็นเพียงส่วนย่อยหนึ่งของ UX เท่านั้น แต่ความจริงแล้วการออกแบบ UX และ UI นั้นมีส่วนที่ซ้อนทับกันหลัก ๆ อยู่ 3 ประการ ได้แก่

1. ความเชี่ยวชาญในการออกแบบโดยยึดผู้ใช้เป็นศูนย์กลาง (User-centered design expertise)

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

2. ทีมที่ประกอบด้วยสมาชิกมากกว่าหนึ่งฝ่าย (Cross-functional teams)

UX และ UI Designer นั้นต้องร่วมมือกับนักวิจัยและผู้พัฒนาในฝ่ายต่าง ๆ เพื่อพัฒนา UX หรือ UI ของแอปพลิเคชันหรือเว็บไซต์นั้น ๆ ซึ่งรวมถึงการร่วมมือซึ่งกันและกันด้วย

3. เครื่องมือที่ใช้ในการออกแบบ (Design tools)

UX และ UI Designer มีการใช้เครื่องมือร่วมกันหลายอย่าง ยกตัวอย่างเช่น ซอฟแวร์ที่ใช้ในการออกแบบ หรือเครื่องมือสร้างตัวต้นแบบ เป็นต้น

‍

ความแตกต่างของ UX และ UI

หากคุณได้อ่านบทความ [UXUI: ครึ่งแรกของคำที่มักมาคู่กัน UX คืออะไร?] แล้วมาอ่านบทความนี้ต่อ คุณก็คงจะรู้ว่าการออกแบบ UX และ UI นั้นเป็นคนละสิ่งที่มีความแตกต่างกันอย่างแน่นอน แต่หากจะให้อธิบายให้เห็นภาพถึงความแตกต่างอย่างชัดเจนละก็ ตัวอย่างยอดนิยมที่สามารถอธิบายถึง UX และ UI ได้อย่างชัดเจนและเห็นภาพก็คือ ขวดซอสมะเขือเทศ

‍

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

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

ตัวอย่างที่สาม ขวดซอสมะเขือเทศพลาสติกรุ่นที่สอง จากปัญหาการออกแบบ UI ที่เกิดขึ้นในขวดซอสมะเขือเทศรุ่นก่อน ผู้พัฒนาจึงได้ทำการปรับเปลี่ยนรูปแบบขวดเพื่อแก้ไขปัญหาเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดีที่สุด โดยในการแก้ไขครั้งนี้ตัวขวดนั้นยังคงเป็นขวดพลาสติกที่จะต้องบีบเพื่อใช้เช่นเดิม เพราะถือเป็นการออกแบบ UX ที่ดีอยู่แล้ว แต่มีการเปลี่ยนรูปแบบของขวดให้เข้ากับการใช้งานของผู้ใช้มากยิ่งขึ้น โดยการออกแบบขวดให้เป็นขวดรูปแบบกลับหัว (upside down) เพื่อให้เวลาผู้ใช้นำไปใช้งานจริงแล้วยังคงสามารถอ่านสิ่งต่าง ๆ บนขวดได้สะดวกมากยิ่งขึ้น ซึ่งถือเป็นการแก้ไขปัญหาจากการออกแบบ UI ที่ไม่ดีให้สุดท้ายกลายเป็นการออกแบบ UI ที่ดีได้

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

‍

สรุป

UI หรือ User Interface คือหน้าจอผู้ใช้งาน จุดเชื่อมต่อผู้ใช้งานกับระบบคอมพิวเตอร์หรือผลิตภัณฑ์ ไม่ว่าจะระบบใด ๆ หากเป็นสิ่งที่ผู้ใช้สามารถทำการมีปฏิสัมพันธ์ด้วยได้ ล้วนแต่เป็นส่วนหนึ่งของ UI ทั้งสิ้น การออกแบบ UI (UI Design) นั้นถูกออกแบบโดย UI Designer ที่ทำงานร่วมกับตำแหน่งต่าง ๆ ทั้ง UX Designer, Developer, Researcher และอื่น ๆ ใช้ทักษะการออกแบบ คิดวิเคราะห์ และจิตวิทยา เพื่อออกแบบ UI ให้ผู้ใช้สามารถเข้าใจถึงวิธีการใช้งานได้อย่างง่ายดาย ไม่จำเป็นต้องคิดพิจารณามาก รวมถึงสามารถถ่ายทอดจุดแข็งและภาพลักษณ์ของผลิตภัณฑ์หรือบริการต่าง ๆ ออกมาได้อย่างสวยงาม

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

‍

หากอ่านถึงจุดนี้แล้วคุณมีความสนใจในการสร้างแอปพลิเคชันหรือเว็บไซต์ ต้องการที่ปรึกษาหรือคำแนะนำอื่น ๆ ในเรื่องการออกแบบพัฒนา UX/UI จากผู้เชี่ยวชาญ สามารถติดต่อสอบถามพวกเรา Foxbith  : https://www.foxbith.com/contact-us

ถ้าคุณต้องการอ่านรายละเอียดเกี่ยวกับ UX เพิ่มเติม สามารถอ่านได้ที่  [UXUI: ครึ่งแรกของคำที่มักมาคู่กัน UX คืออะไร?]