หลายๆ คนมักจะคิดว่า 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
เป็นอย่างไรบ้างคะ เห็นไหมว่า UXและUI มีบทบาทที่ต่างกัน สุดท้ายนี้หวังว่าทุกคน จะเข้าใจหลักการทำงานของ UXและUI มากขึ้นนะคะ และข้อมูลที่กล่าวมาในเบื้องต้นนี้จะเป็นประโยชน์ต่อเพื่อนๆ ไม่มากก็น้อยนะคะ สามารถติดตามบทความอื่นๆได้ที่นี่
ขอบคุณบทความจาก Thai Programer / Thyti Phadonsak