4 ข้อที่แตกต่างกันระหว่าง UX และ UI

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

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

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

3.ขั้นตอนการทำงานที่แตกต่าง
UX ค้นหาปัญหา > เก็บข้อมูล > วิเคราะห์ข้อมูลที่ได้มา > เรียบเรียงออกมาเป็น Wireframe
UI รับ Wireframe จาก UX > นำข้อมูลมาวิเคราะห์ > ตีโจทย์ออกมาเป็นภาพ > คำนึงถึงความเป็น Mood & Tone ของ Product 

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

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








ที่มา : Medium (@thytiphadonsak)