หน้าแรก     บทความ     Website     UX & UI แตกต่างกันอย่างไร มาเริ่มต้นทำความเข้าใจง่าย ๆ ไปพร้อมกัน

UX & UI แตกต่างกันอย่างไร  มาเริ่มต้นทำความเข้าใจง่าย ๆ ไปพร้อมกัน
Website

UX & UI แตกต่างกันอย่างไร มาเริ่มต้นทำความเข้าใจง่าย ๆ ไปพร้อมกัน

1 ปี ที่แล้ว

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


สารบัญน่ารู้

UI (User Interface) คือ อะไร


UI นั้น ย่อมาจากคำว่า ‘User Interface’ เน้นไปที่เรื่องการออกแบบหน้าจอหรือแพลตฟอร์มต่างๆ เช่น เว็บไซต์ แอพลิเคชั่น เกมส์ รวมไปถึงอุปกรณ์ที่จับต้องได้เช่น จอทัชสกรีน เป็นต้น ให้มีความสวยงาม น่าใช้ เป็นมิตร เข้าใจง่าย (User-friendly) พูดง่ายๆ ก็คือ การออกแบบหน้าตาให้สวยงาม โดดเด่น สร้าง first impression ที่ดีให้กับผู้ใช้งานไม่ว่าจะเป็นเรื่องของสี ฟ้อนต์ การจัดวางองค์ประกอบต่างๆ คำนึงถึงภาพลักษณ์และความสวยงามเป็นสำคัญครับ

UX (User Experience) คืออะไร


UX ย่อมาจากคำว่า ‘User Experience’ การออกแบบด้านนี้ จะเกี่ยวข้องกับกระบวนการที่สินค้าหรือบริการมีปฏิสัมพันธ์กับผู้ใช้ครับ โดยเน้นการเก็บข้อมูล เพื่อเอากลับมาพัฒนาตัวสินค้าหรือบริการต่อไป เช่น การทำ Usability Testing หรือการให้ผู้ใช้ได้ทดลองใช้ผลิตภัณฑ์หรือบริการ แล้วนำข้อมูลที่ได้มาวิเคราะห์ (ยกตัวอย่างเช่น Google Analytics) UX ถือ เป็นหัวใจของการออกแบบทุกประเภท เพราะเป็นการออกแบบเพื่อให้ผู้ใช้หรือลูกค้าขององค์กรรู้สึกดีและพึงพอใจต่อผลิตภัณฑ์ สินค้า หรือบริการ นั่นเอง 

ความแตกต่างระหว่าง UX & UI  


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

ยกตัวอย่างเปรียบเทียบความแตกต่างระหว่าง UX & UI แบบง่าย ๆ ให้ลองนึกนึกภาพ การออกแบบเสื้อยืดหนึ่งตัว การที่คำนึงถึงการออกแบบ ลวดลาย การดีไซน์ออกมาให้ดูสวย รวมถึงการใช้วัสดุที่ดีมีคุณภาพ ตรงนี้ คือ UI 

 

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

 

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

 

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

 

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

ขั้นตอนการทำงานระหว่าง UX Designer & UI Designer แตกต่างกันอย่างไร

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

4 ขั้นตอนของการออกแบบที่ผ่านรูปแบบ UX & UI 


Concept is important

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


Functional

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


  • ฟีเจอร์ที่สำคัญสำหรับผู้ใช้ 
  • ฟีเจอร์ที่ทำให้ผู้ใช้พึงพอใจ 


วิธีนี้จะช่วยให้รู้ว่าควรจะทำอะไรก่อนหรือหลัง ซึ่งจะช่วยให้สามรถเรียงลำดับความสำคัญได้ง่ายขึ้นครับ


Usability

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

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

ข้อดีของการทำ Usability ก่อนนำไปพัฒนาจริง คือ เมื่อมีจุดไหนที่ยังไม่ถูกใจผู้ใช้ หรือผู้ใช้มีข้อเสนอแนะเพิ่มเติม ก็สามารถแก้ได้เลย และสามารถนำไปปรับแก้ใหม่ได้เรื่อย ๆ ครับ


Visual Design


ขั้นตอนนี้จะเป็นหน้าที่ของ UI Designer, Graphic Designer, Copywriter ต่างๆ หลังจากผ่าน 3 ขั้นตอนด้านต้น ก็ คือ ขั้นตอนของการนำเอา Wireframe และ Interaction Design จากทีม UX มาออกแบบหน้าตาให้สวยงาม เหมาะสม และใช้งานง่ายครับ

UX & UI  Designer ใช้อะไรทำงาน

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