แชร์เคล็ดลับ ฝึกออกแบบ UX/UI เรียนรู้ง่ายๆ ด้วยตนเอง

ปัจจุบันนี้ UX และ UI เริ่มเป็นที่รู้จักกันมากขึ้น มาทำความรู้จัก UX/UI ปูพื้นฐานสำหรับนักออกแบบมือใหม่ที่อยาก ฝึกออกแบบ UX/UI กัน

 

 

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

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

• Netflix – อยากให้ผู้ใช้งานใช้เวลาอยู่บนแอปพลิเคชันนาน ๆ จึงสร้างระบบแนะนำหนังหรือซีรีส์ที่ผู้ใช้งานสนใจ หลังจากที่ได้เรียนรู้จากพฤติกรรมของผู้ใช้ ดังนั้นเมื่อผู้ใช้เห็นว่า Netflix แนะนำซีรีส์ที่มีนักแสดงที่พวกเขาชอบ หรือสไตล์หนังที่โดนใจ ก็จะทำให้พวกเขากดดูซีรีส์เรื่องนั้น และใช้เวลาอยู่บนแอปพลิเคชันนั้นได้นานขึ้น
• เว็บไซต์ E-Commerce – อยากให้ผู้ใช้กดซื้อสินค้าได้ทันที มีการจ่ายเงินง่าย จึงออกแบบระบบจ่ายเงินที่กดคลิกเพียงปุ่มเดียว สามารถตัดเงินได้ทันที โดยที่ไม่ต้องกรอกข้อมูลอะไรเพราะถ้า      ผู้ใช้ได้รับประสบการณ์ที่ไม่ดี รู้สึกลำบากในการจ่ายเงิน โอกาสที่เขาจะไม่ซื้อสินค้าก็จะมีสูง

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

ส่วน UI (User Interface) คือ ส่วนที่เชื่อมต่อระหว่างผู้ใช้งานกับระบบ หรือ ว่าเป็นหน้าตาและความสวยงามทั้งหมดของเว็บไซต์หรือแอปพลิเคชันที่ผู้ใช้สามารถมองเห็นได้ เช่น สี, รูปแบบตัวอักษร, ขนาดตัวอักษร, การวาง Layout, การจัดวางปุ่ม CTA, Visual Design, การนำทางทั้งหมด เป็นต้น ซึ่ง UI จะเน้นทำให้เว็บไซต์และแอปพลิเคชันเป็นมิตร และผู้ใช้งานได้รับความสะดวกสบายที่สุดในการใช้งาน ตัวอย่างเช่น 

• Google – จะสังเกตได้ว่าไม่ว่าจะผ่านไปกี่ปี Google ก็ยังคงเป็น Search Engine ที่ไม่มีการตกแต่งอะไรเลยบนหน้าเว็บไซต์ เน้นความเรียบง่าย ไม่ซับซ้อน โดยตัดส่วนที่ไม่เกี่ยวข้องกับการค้นหาออกทั้งหมด มีเพียงแค่โลโก้ Google, แถบค้นหา (แบบโค้งมน ไม่เป็นแถบสี่เหลี่ยมแข็ง ๆ) และปุ่มเพียงไม่กี่ปุ่มเท่านั้น (ปุ่มค้นหา, ปุ่มคีย์บอร์ด, ปุ่มไมโครโฟน ค้นหาด้วยเสียง) นั่นเอื้อให้ผู้ใช้ใช้งานได้สะดวก ซึ่งบางครั้งก็มีการเพิ่มลูกเล่นที่โลโก้ เช่น แสดงถึงวันหรือโอกาสสำคัญ เพิ่มความเป็นมิตรและสร้าง Interaction ระหว่างเว็บไซต์กับผู้ใช้งานมากขึ้นไปอีก

 

4 ขั้นตอนของการ ฝึกออกแบบ UX/UI อะไรมาก่อนหรือหลัง

1. Concept is important

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

2. Functional

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

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

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

3. Usability

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

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

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

4. Visual Design

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

 

เทคนิคในการ ฝึกออกแบบ UX/UI ให้ดี

1. การใช้งาน Pops-ups

Pop-ups เป็นหนึ่งในตัวเลือกที่น่าสนใจในการเพิ่มปริมาณเข้าชมเว็บไซต์ แต่ในขณะเดียวกัน Pop-ups ก็อาจจะส่งผลลบต่อการจัดอันดับของ Google ได้โดยทาง Google ได้มีการตรวจสอบอย่างเข้มงวด สำหรับเว็บไซต์ที่มีการใช้ Pop-ups มากจนเกินไป เพื่อให้ผู้ใช้งานเว็บไซต์บนมือถือสามารถดูเนื้อหาได้ง่ายขึ้นโดยไม่ต้องคอยกดปิด Poo-ups เหล่านั้น

2. การเรียงลำดับการอ่าน

ไม่ควรจัดวางตัวหนังสือแบบยุ่งเหยิง เพราะจะทำให้ผู้ใช้งานเกิดความสับสน โดยเฉพาะอย่างยิ่งถ้าคุณต้องการให้ลูกค้ามีการ Take Action กับเว็บไซต์ โดยอาจจะใช้ Z Pattern หรือ F Pattern เพื่อนำสายตาไปยังจุดที่คุณต้องการ

3. การเล่นวิดีโออัตโนมัติ

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

4. การเลือกใช้สีแบบ Contrast

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

5. ไม่ใช่แค่สวย แต่ต้องใช้งานได้จริง

ในบางครั้งนักออกแบบตั้งใจออกแบบเว็บไซต์มาก แต่ไม่สมเหตุสมผลในด้านการใช้งาน และบางทีอาจจะไม่สอดคล้องกับธุรกิจด้วยซ้ำ ซึ่งความสวยงามเป็นสิ่งที่ดี แต่ผู้ใช้งานอาจจะเริ่มตั้งคำถามว่า สรุปแล้วเว็บไซต์นี้เกี่ยวกับอะไรกันแน่

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

6. การใช้ฟีเจอร์ต่างๆ

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

 

สรุป

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

 

ผู้ประกอบการท่านใด ต้องการเดินบนเส้นทางธุรกิจออนไลน์ ปรึกษา Exvention ได้เลยครับ นอกจากนี้เรายัง รับทำเว็บไซต์ อีกด้วยท่านใดสนใจติดต่อเราได้เลยครับ

 

Reference :
เริ่มต้นออกแบบ UX/UI ง่ายๆ เพียงเข้าใจ 4 ขั้นตอนนี้?
เทคนิคในการออกแบบ UX/UI ให้ดี
UX/UI คืออะไร? ทำไมธุรกิจถึงควรให้ความสำคัญ อัปเดตเทรนด์ UX/UI ที่น่าสนใจในปี 2022