Author: Rawiya Jumruanthong

จากที่เราได้รู้จักโลกของ UX UI ไปใน Section ที่แล้ว ใน Section นี้ เราจะมาเข้าใจให้ลึกขึ้นอีกนิด สำหรับ UX UI Design โดยมีคำกล่าวสั้นๆว่า

UX คือ นามธรรม
UI คือ รูปธรรม

และในพื้นฐานแรก ที่เราจะมาเริ่มเรียนรู้คือ UI Design


เคลียร์กันชัดๆ UI Design คืออะไร?

นิยามของ UI Design คือการออกแบบสิ่งที่เชื่อมประสานระหว่างผู้ใช้กับสิ่งใดสิ่งหนึ่ง

ตัวอย่าง :: หากมีไอศกรีมอยู่ 1 ถ้วย ตัวกลางระหว่างตัวคุณกับไอศกรีมคือช้อน ซึ่งในที่นี้ ช้อนเปรียบเสมือน UI ตรงที่ถ้าไอศกรีมถ้วยนี้เป็นทรงเตี้ยช้อนที่ถูกออกแบบมาจะต้องเป็นทรงสั้น หรือถ้าไอศกรีมถ้วยนี้เป็นแบบทรงสูงช้อนก็จะต้องถูกออกแบบมาให้เป็นทรงยาว ดังนี้ การออกแบบที่ดี คือจะต้องออกแบบช้อนให้สะดวกสบายต่อการตักไอศกรีมในถ้วยทรงต่างๆนั้น

ซึ่งในกรณีของ Mobile Application หรือ Website นี้ สิ่งที่เป็นตัวเชื่อมประสานระหว่างคุณกับ Content (เนื้อหาข้อความต่างๆ โดยจะรวมไปถึง ภาพ, วีดีโอ และอื่นๆ) ก็คือ หน้าWebsite / Application

ดังนั้น การออกแบบ UI Design ของ Website หรือ Mobile Application ก็คือการสร้างเส้นทางตัวเชื่อมประสานให้กับผู้ใช้งานเพื่อไปสู่เป้าหมายที่ตั้งไว้ได้สำเร็จ


เคลียร์กันชัดๆ UX Design คืออะไร?

UX Design เป็นสิ่งที่จับต้องไม่ได้ นิยามของ UX Design คือการออกแบบประสบการณ์ของผู้ใช้งาน ซึ่งประสบการณ์เป็นเรื่องของความรู้สึก การที่เราจะเกิดประสบการณ์ต้องเกิดจากการรับรู้ควบคู่ไปกับความรู้สึก

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

ดังนั้น ประสบการณ์ที่ได้กินไอศกรีมผ่านช้อน หรือความรู้สึกที่ได้ชมภาพยนต์ผ่าน Website ก็คือประสบการณ์ที่ถูกออกแบบขึ้นมา

การออกแบบ UX Design ของ Website และ Mobile Application จะสร้างประสบการณ์ การจดจำ ความรู้สึกที่ดี และนำพาให้ผู้ใช้งานกลับมาใช้งานอีกครั้ง ซึ่งสิ่งเหล่านี้คือ เป้าหมายที่แท้จริงของผู้ออกแบบ


องค์ประกอบที่ต้องเรียนรู้สำหรับการออกแบบ

ในด้านของ UX Design จะเรียนรู้กระบวนการหรือแนวคิดที่เป็นเครื่องมือต่างๆ

  • Design Thinking :: เป็นเครื่องมือหรือกระบวนการที่ให้ความสำคัญกับการทำความเข้าใจผู้ใช้

  • Service Design :: เป็นกระบวนการที่เน้นการออกแบบสำหรับบริการเป็นหลัก โดยมีคอนเซ็ปว่า Don't speak just doing

  • Design Sprint :: เป็นกระบวนการออกแบบที่ได้ถูกพัฒนาขึ้น จุดเด่นคือเน้นความเร็วเป็นสำคัญ โดยจะจบได้ใน 5 วัน แต่มีประเด็นที่สำคัญคือ Design Sprint นั้นจะใช้กับผลิตภัณฑ์หรือบริการที่ออกสู่ตลาดแล้วเท่านั้น

  • User Centered Design :: เป็นแนวคิดในการออกแบบที่มุ่งเน้นให้ความสำคัญกับผู้ใช้งานเป็นหลัก โดยการคิดแก้ปัญหาจะมุ่งเน้นไปที่ผู้ใช้งานเป็นสำคัญ

ในด้านของ UI Design จะเน้นโครงสร้างและองค์ประกอบของการออกแบบ

  • Information Design :: เป็นการออกแบบข้อมูล ที่เน้นการนำเสนอข้อมูลที่สร้างความน่าสนใจ สร้างความเข้าใจ และเกิดการเรียงลำดับของข้อมูลที่ถูกต้อง

  • Interaction Design :: เป็นกระบวนการการออกแบบที่เน้นการตอบโต้หรือการตอบสนองที่ถูกต้อง และนำทางผู้ใช้ไปยังเป้าหมายที่ต้องการ

  • Information Architect :: เป็นเรื่องของการจัดกลุ่มข้อมูล การเรียงลำดับข้อมูล การจัดโครงสร้างของข้อมูล ให้มีความถูกต้องและเข้าใจได้ง่ายเพื่อให้ผู้ใช้งานรู้ลำดับก่อน-หลังการเข้าถึงข้อมูลได้

  • Visual Design :: เป็นการออกแบบที่เน้นการนำเสนอภาพที่มีองค์ประกอบต่างๆ เช่น การจัดเลเอ้าท์, การใช้สี, การใช้ตัวอักษร, การใช้โครงสร้าง, การใช้รูปทรง และรวมไปถึงการใช้พื้นที่ว่างในการนำเสนอภาพให้ผู้ใช้งานได้เข้าใจ

  • Human Computer Interaction :: เป็นศาสตร์การออกแบบที่เฉพาะเจาะจงโดยพูดถึงความสัมพันธ์ระหว่างมนุษย์กับ Computer เมื่อสองสิ่งนี้ต้องมาทำงานร่วมกัน จะมีเอกลักษณ์เฉพาะบางอย่าง ทั้งในเรื่องของความยืดหยุ่น ความหลากหลายการปรับเปลี่ยน โดยปัจจุบันยังมีการพัฒนาอย่างไม่หยุดยั้ง


กรณีตัวอย่างการออกแบบ UX UI สำหรับ Mobile Application

การเรียนรู้ที่ดีที่สุด คือการเรียนรู้จากงานที่สำเร็จเสร็จสิ้นแล้ว

ปัจจุบันมีผู้ใช้งาน Mobile Application เยอะกว่า Website ผ่าน PC Computer มากขึ้น 5 เท่า!!

โดยองค์ประกอบของการออกแบบ Mobile App คือ

  • การออกแบบข้อมูล
  • การออกแบบการตอบสนองหรือการตอบโต้
  • การออกแบบรูปทรง สี และตัวอักษร
    ขึ้นอยู่กับเป้าหมายของผู้ใช้งานเป็นสำคัญ และเนื้อหาที่เราต้องการนำเสนอ

ตัวอย่างการออกแบบ UI ของ Mobile App

ตัวอย่างที่ 1 "Facebook Application" :: การออกแบบหน้าแรกของ Facebook เน้นการเล่าเรื่องราวต่างๆ โดยจะแบ่งออกเป็น 3 ส่วน ดังนี้

ตัวอย่างที่ 2 "NTC Application" :: ซึ่งเป็น App แนะนำวิธีการออกกำลังกายที่มีการออกแบบการจัดหมวดหมู่ที่ดี เพราะเป็น Application ที่มีข้อมูลเยอะมาก ทำให้ต้องแยกข้อมูลให้ง่ายและสะดวกต่อการเข้าถึงของผู้ใช้งาน ดังนี้

ตัวอย่างที่ 3 "TED Application" :: เป็น Application ที่นำเสนอข้อมูลเป็นคลิปวีดีโอต่างๆของงาน TED ที่มีคนหลากหลายอาชีพ มาเล่าประสบการณ์ต่างๆให้ฟัง

ตัวอย่างที่ 4 "Unsplash Application" :: เป็น Application ที่นำเสนอในเรื่องของรูปภาพ ดังนั้นจึงใช้การนำเสนอที่เน้นรูปภาพเป็นหลัก มีการลดรายละเอียดที่เป็นส่วนของข้อความออกไป

ตัวอย่างที่ 5 "Line Man Application" :: นำเสนอด้วยข้อมูลจำนวนมาก เน้นข้อความและย่อรูปภาพให้เล็กลง เน้นการนำเสนอเนื้อหา และ Content เยอะๆ พร้อมๆกัน เพื่อให้ผู้ใช้เห็นบริการทั้งหมดที่มี โดยเราจะเห็นดีไซน์แบบนี้ได้ใน Application ที่เกี่ยวกับ E-Commerce


กรณีตัวอย่างการออกแบบ UX UI สำหรับ Website

สิ่งสำคัญของการออกแบบ Website คือ การออกแบบจุดที่ผู้ใช้ควรสนใจ ดังนั้นการออกแบบ Website ยังคงให้ความสำคัญกับเป้าหมายผู้ใช้งาน และเนื้อหาในการนำเสนอ เป็นสิ่งสำคัญหลัก

ตัวอย่างการออกแบบ UI ของ Website

ตัวอย่างที่ 1 "Facebook" :: เน้นส่วนที่สำคัญตรงกลาง

ตัวอย่างที่ 2 "Netflix" :: นำเสนอด้วยภาพตัวอย่างภาพยนต์ขนาดเล็กจำนวนมากพร้อมๆกัน เพื่อให้ผู้ใช้เห็นข้อมูลได้เยอะ และเลือกดูได้ตามความสนใจ

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


กรณีตัวอย่างการเรียนรู้การออกแบบ UX UI จากความผิดพลาด

  • เกิดจากการที่เราให้ความสำคัญกับข้อมูลไม่ถูกต้อง
  • ไม่สามารถเรียงลำดับความสำคัญของข้อมูลได้

หากเปรียบเทียบการออกแบบ UX UI เป็นประตู ดังนั้น Designer คือผู้ที่ต้องแก้ไขปัญหา เพื่อให้ตอบโจทย์ผู้ใช้ ไม่ใช่คำนึงแค่ความสวยงามเท่านั้น โดยใน Sec.0 นี้ เราจะมองภาพง่ายๆแบบใกล้ตัว เช่น การออกแบบประตู ซึ่งการออกแบบ เราจะมีพื้นฐานด้วยกัน 4 อย่าง ดังนี้


พื้นฐานการออกแบบมี 4 อย่าง คือ

  • การออกแบบหน้าตา (User Interface Design) :: หน้าตาของประตู ส่วนใหญ่จะเป็นรูปสี่เหลี่ยม เพื่อง่ายต่อการใช้งาน ง่ายต่อการติดตั้ง แต่บางกรณีก็จะมีรูปทรงต่างๆ เช่น ทรงกลม แต่ก็ต้องยอมรับว่า รูปทรงง่ายๆอย่างสี่เหลี่ยม เป็นรูปทรงที่นิยมใช้กันมากที่สุด

ดังนั้นการออกแบบหน้าตาก็คือ องค์ประกอบ, ขนาด, รูปแบบ และ สิ่งที่ผู้ใช้สัมผัส

  • การออกแบบการสื่อสาร (Information Design) :: สีของประตู ถ้าอยู่ในบ้านจะให้ความรู้สึกสบาย โดยส่วนใหญ่มักใช้สีอ่อนๆ หรือสีธรรมชาติ และหากเป็นประตูที่มีความหมายเฉพาะเจาะจง ก็จะใช้สีสัน ข้อความ หรือรูปภาพติดที่ประตู เพื่อให้เห็นได้อย่างง่ายดาย เช่น ประตูหนีไฟที่มีสีแดง

ดังนั้นการออกแบบการสื่อสารก็คือ สี, ข้อความ และ สิ่งที่ต้องการสื่อกับผู้ใช้

  • การออกแบบการตอบสนอง (Interaction Design) :: การออกแบบว่าการหมุนลูกบิดเพื่อเปิดประตู หรือการผลักประตูเพื่อให้เปิดออก และดันกลับเข้ามาเพื่อให้ประตูปิด

ดังนั้นการออกแบบการตอบสนองก็คือ ผู้ใช้งานต้องสามารถใช้งานตามความเข้าใจได้อย่างถูกต้อง

  • การออกแบบประสบการณ์ (User Experience Design) :: เป็นสิ่งที่ไม่มีรูปร่าง เป็นเรื่องของความรู้สึก ความพอใจและการเข้าใจ

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


การออกแบบ UX UI สำหรับเครื่องคอมพิวเตอร์

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

  • เทคโนโลยี AI :: ตัวอย่างเช่น Siri หรือ Google Home เป็นต้น ซึ่งเทคโนโลยีนี้ จะใช้เสียงเป็นตัวประสาน สามารถสั่งงานได้ด้วยเสียง หรือเรียกว่า Voice User Interface

  • เทคโนโลยี VR/AR :: โดย VR จะเน้นภาพเสมือนจริง แต่ไม่ใช่ของจริง สื่อสารด้วยภาพเสมือนจริงแบบ 3มิติ โดยมีอุปกรณ์เสริม สำหรับสร้างประสบการณ์เพิ่ม และ AR คือการเอาสิ่งที่ถูกสร้างขึ้นในโลกของดิจิตอลมาซ้อนทับกับโลกแห่งความจริง เพื่อให้ภาพปรากฎขึ้น เสมือนว่าสิ่งๆนั้นเกิดขึ้นจริง


การออกแบบ UX UI สำหรับSmart Phone

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

  • การออกแบบหน้าตา (User Interface Design) :: รูปร่างและขนาดที่จับถนัดมือ รองรับการใช้งานแบบมือเดียว

  • การออกแบบการสื่อสาร (Information Design) :: มีปุ่มน้อย เน้นการใช้ระบบสัมผัส

  • การออกแบบการตอบสนอง (Interaction Design) :: ออกแบบอย่างหลากหลาย มีการตอบสนองหลากหลาย เช่น การสั่นหรือใช้เสียงเพื่อแจ้งเตือน และการปลดล็อกด้วยการสแกนลายนิ้วมือ หรือใบหน้า เป็นต้น

  • การออกแบบประสบการณ์ (User Experience Design) :: Smart Phoneถือเป็นประสบการณ์ใหม่ และแตกต่างจากคอมพิวเตอร์ได้เป็นอย่างดี สามารถพกพาไปไหนก็ได้ ง่าย และ สะดวกสบาย


การออกแบบ UX UI สำหรับโปรแกรมคอมพิวเตอร์

หลักการออกแบบของMobile App / Websiteนั้น มีหลักการดังนี้

  • การออกแบบหน้าตา (User Interface Design) :: ต้องคำนึงถึงขนาดของหน้าจอแสดงผล ซึ่งมีความหลากหลาย ต้องให้ความสำคัญของการจัดวาง รูปทรง โครงสร้าง สี ซึ่งจะส่งผลต่อการใช้งาน เช่น ส่วนใดไว้ดู ส่วนใดไว้พิมพ์ หรือส่วนใดที่กดได้

  • การออกแบบการสื่อสาร (Information Design) :: ต้องคำนึงถึงการใช้ภาพ การใช้ข้อความ และการใช้คำเพื่อการสื่อสาร ต้องให้ผู้ใช้เข้าใจว่าต้องทำอะไร

  • การออกแบบการตอบสนอง (Interaction Design) :: ต้องคำนึงการตอบสนองที่ถูกต้อง ให้ผู้ใช้เข้าใจว่าปุ่มนี้ใช้สำหรับทำอะไร และผลลัพธ์ที่เกิดขึ้นก็ต้องถูกต้อง

  • การออกแบบประสบการณ์ (User Experience Design) :: ต้องคำนึงถึงประสบการณ์ทั้งความรู้สึก ความคิด การตัดสินใจ การลงมือทำ เช่น พอเข้ามาแล้ว ผู้ใช้สามารถรู้หรือไม่ว่าแอพนี้ใช้ทำอะไร เพื่ออะไร ระหว่างการใช้งานยุ่งยากหรือไม่ ไม่ใช่แค่สวยงามหรือเข้าใจง่าย แต่ต้องได้คุณค่า และผลลัพธ์ที่ดี


ประโยชน์ของการออกแบบ UX UI ที่ดี

ประโยชน์ของการออกแบบ UX UI ที่ดี จะแบ่งออกเป็น 2 อย่างคือ

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

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

สรุปสั้นๆคือ ประโยชน์ของ UX UI ที่ดีคือ

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

โทษของการออกแบบ UX UI ที่ไม่ดี

  • เสียเวลา :: ใช้เวลามากในการเรียนรู้ หรือเข้าใจกับสิ่งที่ออกแบบ

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

  • เสียโอกาสและทรัพย์สิน :: การสื่อสารที่ผิดหรือไม่ชัดเจน จะทำให้เกิดความผิดพลาด รู้สึกไม่ปลอดภัย และผู้ใช้จะไม่กลับมาใช้ซ้ำอีก

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


ทำไมต้องเรียนรู้การออกแบบ UX UI Design

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


และตอนนี้เราก็ได้รู้เรื่องราวคร่าวๆของ UX UI ไปบ้างแล้ว และในSectionต่อไป เราจะมาเริ่มเรียนรู้ UX/UI Design แบบจริงจังกันค่ะ!