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

UX/UI แตกต่างกันอย่างไร?

1. UX ไม่ใช่ UI

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

ขอบคุณข้อมูลจาก wynnsoftstudio.com

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *