UX UI คืออะไร แตกต่างกันอย่างไร?

หลายๆ คนมักจะคิดว่า UX และ UI นั้นคือของคู่กัน คนที่ทำ UX ได้นั้นจะต้องทำ UI ได้ด้วย แต่จริงๆ แล้ว UX (User Experience) และ UI (User Interface) ฟังแค่ชื่อก็มีความต่างกันพอสมควรแล้ว แต่สิ่งที่เหมือนกันก็คือเราต้องทำงานร่วมกับ “ผู้ใช้งาน” ที่เข้ามาใช้งานเว็บไซต์หรือผลิตภัณฑ์ของเรานั่นเองค่ะ

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

— UI (User interface) และ UX (User experience) คืออะไร มีบทบาทอย่างไร? —

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

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

— UX และ UI แตกต่างกันอย่างไร? — 

ขอสรุปแบบเข้าใจง่ายๆเลยก็คือ UX= ให้ความสำคัญกับอารมณ์และความรู้สึกของผู้ใช้ และในส่วนของ UI= ให้ความสำคัญกับความสวยงาม การติดต่อกับผู้ใช้ และข้อมูลทางด้านเทคนิคอื่นๆ มองง่ายๆ ก็คือ ส่วนที่ผู้ใช้มองเห็นและกระทำการบางอย่างกับมัน (interface และ interact)

หากเราอยากจะออกแบบเว็บไซต์ (Design Web) เช่น การออกแบบลวดลาย, การเลือกสีของตัวอักษร, ขนาดของตัวอักษร, Background, Mood&Tone ของเว็บไซต์, ธีมที่ใช้ หรือแม้แต่การใช้เว็บไซต์ที่มีชื่อเสียงเป็นตัวอย่างในการออกแบบความสวยงามให้เหมาะสม ทั้งหมดนี้ล้วนแล้วแต่จัดว่าเป็น UI

ส่วนการที่ต้องมีฟังก์ชันพื้นฐานในการใช้เว็บไซต์ เช่น การแบ่งหมวดหมู่ของเนื้อหา, ช่องทางการติดต่อ, การเชื่อมต่อ User กับแพลตฟอร์มที่สะดวก, ฟังก์ชันการค้นหาที่มีคุณภาพ ฯลฯ แม้แต่การเพิ่มฟังก์ชันที่ตอบสนองความต้องการของผู้ใช้เฉพาะกลุ่ม ทุกสิ่งที่กล่าวมาล้วนเรียกว่า UX

— UX และ UI ใช้เครื่องมืออะไรในการทำงาน ? —

ในส่วนของ UX Designer นั้นจะสร้าง Wireframe เพื่อเป็นการวางโครงสร้างหรือเนื้อหาภายใน Product ของเรา ซึ่ง Tool ที่ใช้นั้นมีมากมายหลากหลายมากเช่น

• Prototype โปรแกรมทำ Wireframe ตัวนี้มีทั้งบน Windows / Mac OS โดยแบ่งเป็นเวอร์ชั่นฟรี กับเวอร์ชันเสียเงิน
• Pencil Project โปรแกรมทำ Wireframe ใช้ฟรี ๆ มีทั้งบน Windows / Mac OS
• Cacoo Web App สำหรับทำ Diagram, Wireframe ออนไลน์ โดย Account ฟรีจะสร้าง Wireframe ได้จำกัดหน้า
• JumpChart Web App สำหรับทำ Wireframe Online ที่หน้าตาเรียบง่าย โดย Account ฟรีจะสร้าง Wireframe ได้จำกัดหน้า
• FrameBox เป็น Web Application ที่เหมาะสำหรับทำ Wireframe มีฟีเจอร์น้อย แต่ใช้ฟรี เมื่อทำเสร็จส่งลิงค์ให้ลูกค้าได้ทันที
• iPlotz นั้นเป็น Web Application สำหรับสร้าง Wireframe ออนไลน์ที่ดูมีสีสันกว่าตัวอื่น สามารถใช้งานได้ฟรี แต่จะจำกัดหน้าในการใช้งาน
• WireframeCC เป็น Web Application สำหรับทำ Wireframe ง่ายๆ มีทั้งขนาด Desktop, Tablet, Mobile ให้เราเลือกใช้งานได้ตามความต้องการ

ในส่วนของ UI Designer นั้นจะนำ Wireframe ที่ได้มานั้นมาต่อยอดเป็น Interface ที่สวยงามมากยิ่งขึ้น ส่วน Tool ที่ใช้งานนั้นมีมากมายเช่นเดียวกันเช่น

• Sketch เป็นโปรแกรมที่มีไว้สำหรับออกแบบ Interface โดยเฉพาะ มีเครื่องมือการใช้งานที่ครบถ้วน พร้อมกับ Plug in มากมาย 
• Adobe XD โปรแกรมที่ทำขึ้นเพื่อออกแบบ UXและUI สามารถอัพโหลดไฟล์งานขึ้นบนเว็บไซต์พร้อมทั้งสามารถทดลองเล่นเป็น Prototype ได้อีกด้วย
• Zeplin เป็นอีกหนึ่งโปรแกรมที่เอาไว้ใช้งานคู่กับ Sketch สามารถส่งต่องานดีไซน์สวยๆ ของเราให้กับทีมพัฒนาได้อย่างมีความสุข เพราะ Zeplin นั้นจะระบุตำแหน่งการจัดวางองค์ประกอบทุกอย่างเป็น Pixel และยังสามารถระบุฟอนต์ หรือค่าสีที่เราใช้อย่างละเอียด
• Webflow เป็นอีกหนึ่งตัวช่วยที่แสนสบาย ที่สามารถให้นักออกแบบทั้งหลายออกแบบ Interface ของตัวเองได้อย่างสะดวก รองรับไปถึง Responsive
• Hype โปรแกรมสำหรับการสร้าง Interactive Website แสนสนุก คล้ายกับ Adobe After Effect แต่สามารถนำขึ้นไปสู่เว็บไซต์ได้ และยังรองรับ HTML5