การออกแบบมีอยู่ในทุกอย่างไม่ว่าจะเป็นการออกแบบสินค้า บริการ หรือซอฟต์แวร์ต่างๆ เราไม่ได้ออกแบบแค่ให้ใช้งานได้เท่านั้น แต่ต้องมีมาตรฐานในการออกแบบ เพื่อสร้างประสบการณ์ความพึงพอใจให้กับลูกค้าให้กลับมาใช้งานใหม่อีกครั้ง ประโยชน์ของการออกแบบแบ่งได้ 2 กลุ่มคือ
- ความถูกต้อง : สร้างกระบวนการทำงานที่ถูกต้อง เพื่อให้เกิดผลลัพธ์ตามที่ผู้ใช้ต้องการ
- ความถูกใจ : สร้างความพึงพอใจของผู้ใช้งานให้อยากกลับมาใช้งานอีก
ทั้ง 2 กลุ่มเป็นสิ่งที่คู่กัน เพราะถ้าเราออกแบบ UX/UI แล้ว ผู้ใช้งานสามารถใช้งานได้อย่างถูกต้องและเกิดความพึงพอใจ จะถือว่าเราประสบความสำเร็จกับการออกแบบ
ผลกระทบที่ผู้ใช้ได้รับ กรณีออกแบบ UX/UI ได้ไม่ดีพอ
- ผู้ใช้ต้องเสียเวลาเพิ่มมากขึ้น ในการทำความเข้าใจและเรียนรู้การใช้งาน เพื่อให้เกิดผลลัพธ์ที่ต้องการ ส่งผลให้ผู้ใช้เสียความรู้สึกและไม่อยากกลับมาใช้งานอีก
- เสียโอกาสหรือทรัพย์สิน เช่น การออกแบบที่ทำให้ผู้ใช้รู้สึกสับสน ผู้ใช้อาจเข้าใจผิดทำให้เกิดความผิดพลาด นำมาซึ่งความเสียหายต่อผู้ใช้งานได้
ดังนั้นเราจึงควรใส่ใจกับการออกแบบ เพื่อสร้างกระบวนการที่ถูกต้อง เข้าใจง่าย นำมาซึ่งความพึงพอใจและความประทับใจของผู้ใช้งาน
สิ่งหนึ่งที่สำคัญมากในการออกแบบ UI ที่นักออกแบบทุกคนควรรู้ นั่นคือเรื่องของ ‘Component-based Design’ คือการมองแยกส่วนประกอบต่างๆ ที่ร่วมกันเป็นหน้าเว็บไซต์หรือแอปฯ ที่เราออกแบบว่ามีส่วนประกอบมาจากอะไรบ้างหากใครผ่านการเรียนการออกแบบมาก่อน อาจจะคุ้นเคยกับหลักองค์ประกอบการวาดรูปที่เริ่มตั้งแต่จุด จุดต่อกันกลายเป็นเส้น จากเส้นต่อกันเป็นระนาบ และระนาบประกบกันเป็นรูปทรง
เช่นเดียวกันกับการออกแบบ UI เราจะเริ่มออกแบบแอปฯ หรือเว็บไซต์ จากองค์ประกอบที่เล็กที่สุดก่อน กำหนด Identity เช่น สี, Text และไอคอนต่างๆ จากนั้นก็เอามาประกอบกัน เอา Text มาประกอบกับกล่อง เอาไอคอนมาทำเป็นปุ่มต่างๆ นั่นคือ Element
จากนั้นก็เอารูป เอากล่อง และ Text ต่างๆ มารวมกันเป็น Component ใส่คอนเทนต์ต่างๆ ลงไปได้ และเอามาเรียงกันเป็น Composition
จากนั้นก็นำมาจัดวางเป็น Layout และกลายเป็น Page หรือหน้าเว็บในที่สุด
เพื่อจะให้เห็นตัวอย่างมากขึ้น เราจะลองมาแยกองค์ประกอบจากหน้าเว็บของ Airbnb กันดูให้เห็นชัดๆ
เริ่มต้นที่ภาพหน้าเว็บของ Airbnb เรามองรวมๆ จะเห็นเป็นหน้าเว็บหนึ่งหน้า (Page)
ลองมองแยกส่วนประกอบดูเราจะเห็น Layout ของเว็บ
ลองโฟกัสแยกไปที่ section ต่างๆ จะเห็น Composition
พอแยกลงมาใน Component จะเห็นว่าจริงๆ แล้วมีแค่สอง Component เท่านั้น ที่เอาไปใช้ซ้ำๆ กันตลอดทั้งหน้าเว็บ
มองละเอียดลงมาอีกใน Element จะเห็นส่วนย่อยๆ เป็นรูป Text และกล่องสี่เหลี่ยม
จากนั้นก็มาดูในส่วนที่ละเอียดที่สุด เราจะรู้กระทั่งว่า Text ที่ใช้อยู่นั้นคือ Font อะไร ขนาดเท่าไหร่
การมองแยกองค์ประกอบแบบนี้มีประโยชน์มากเมื่อต้องออกแบบ Responsive Design และจะเอาดีไซน์ไปบนหน้าจอหรือระบบปฏิบัติการที่แตกต่างกันก็จะทำได้ง่าย ไม่ว่าจะเป็น iOS, Android หรือ เว็บ เป็นต้น
เริ่มต้นงานออกแบบ UI ของคุณอย่างมืออาชีพ ด้วย Design Tool สุดร้อนแรงอย่าง Figma โปรแกรมออกแบบ UI ที่สามารถใช้งานได้ฟรี ทำงานร่วมกันระหว่างทีมผ่านเว็บโดยไม่ต้องลงโปรแกรมเพิ่มเติมให้ยุ่งยาก ผ่านคอร์สออนไลน์สุดเข้มข้น พร้อมลงมือทำผ่านโปรเจคจริง!