Author: Rawiya Jumruanthong

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


หัวข้อการเรียนรู้ UX Design

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

โดยจะเรียนรู้ทั้งหมดดังนี้

  • กระบวนการ Design Thinking
  • Empathize การเข้าอกเข้าใจผู้ใช้งาน
  • Define การกำหนด การเลือกปัญหา ที่เราควรให้ความใส่ใจ
  • Ideate การสร้างสรรค์ไอเดียและการคิดไอเดียเพื่อแก้ปัญหา
  • วิธีการสร้างต้นแบบ และทดสอบต้นแบบ เพื่อนำไปสู่การสร้างผลิตภัณฑ์หรือบริการที่แท้จริง

UX Design มีอยู่ในทุกสิ่ง

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

โดยแบ่งเป็นกรณีศึกษาได้ 2 แบบ คือ

  • การออกแบบบริการ
  • การออกแบบผลิตภัณฑ์

สรุปคือ Experience หรือประสบการณ์ มีความหลากหลาย มีความแตกต่างกัน การออกแบบประสบการณ์จึงต้องใส่ใจการรับรู้และความรู้สึกเป็นสิ่งสำคัญ


แนวคิดและกระบวนการ Design Thinking

เป็นเครื่องมือที่ได้รับความนิยมมากที่สุดในการออกแบบ UX โดย Design Thinking ถูกสร้างขึ้นโดยบริษัท IDEO เป็นกระบวนการการออกแบบผลิตภัณฑ์ ซึ่งได้รับการยอมรับจากทั่วโลก ได้รับความนิยมถึงขั้นบริษัทยักษ์ใหญ่อย่าง Google, Facebook, Apple ก็ได้นำกระบวนการนี้ไปใช้งานอย่างจริงจัง จนทำให้แนวคิดนี้แพร่หลายไปทั่วโลก

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

ซึ่งประกอบไปด้วย 5 ขั้นตอนสำคัญ คือ

  • Empathize : ความเข้าใจผู้ใช้งาน
  • Define : การเลือกปัญหาที่เราสนใจ หรือปัญหาที่เราอยากเข้าไปแก้ไข
  • Ideate : การคิดสร้างสรรค์เพื่อแก้ปัญหา
  • Prototype : การสร้างต้นแบบ โดยไม่เน้นการสร้างผลิตภัณฑ์หรือบริการจริงๆ แต่จะเป็นการสร้างต้นแบบเพื่อใช้ทดลองก่อน
  • การทดสอบ : คือการนำต้นแบบที่เราได้ไปทดสอบ

และเมื่อจบขั้นตอนที่ 5 แล้ว ก็จะวนลูปกลับสู่ Empathize อีกครั้ง

ดังนั้นการทำ Design Thinking จะเป็นกระบวนการที่ทำซ้ำไปเรื่อยๆ และเมื่อจบการทำ Design Thinking เราจะยิ่งเข้าใจผู้ใช้งานมากยิ่งขึ้น เข้าใจถึงปัญหา และได้ไอเดียการแก้ปัญหานั้นๆมากขึ้น


Empathize การเข้าอกเข้าใจผู้ใช้งาน

เริ่มจากการตั้งสมมติฐาน ปัญหา ข้อสงสัย หรือพฤติกรรมที่คุณสนใจ ซึ่งจะเป็นการ
นำไปสู่กลุ่มเป้าหมาย

ซึ่งการทำความเข้าใจผู้ใช้งาน จะมี 4 ประเด็นหลักๆ

  • สิ่งที่ผู้ใช้คิด
  • สิ่งที่ผู้ใช้พูด
  • สิ่งที่ผู้ใช้รู้สึก
  • สิ่งที่ผู้ใช้ลงมือกระทำ

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


การสัมภาษณ์และวิธีการตั้งคำถาม

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

5 รูปแบบคำถามหลักๆที่จำเป็นจะต้องมี

  • Variable : เป็นคำถามที่ถามเรื่องพื้นฐานทั่วไป เช่น อายุ การศึกษา เพศ ความสนใจ เป็นคำถามพื้นฐานเพื่อยืนยันว่า ผู้ที่ให้สัมภาษณ์เป็นกลุ่มเป้าหมายของเราจริงๆ

  • Mental Model : ถามความคิด ว่าผู้ที่ให้สัมภาษณ์มีความคิดเห็นอย่างไร มีมุมมองอย่างไร เช่น คุณมีความคิดอย่างไรกับเรื่องนี้

  • Activity : ถามถึงสิ่งที่ผู้ที่ให้สัมภาษณ์ลงมือกระทำ ว่าผู้ที่ให้สัมภาษณ์กระทำอย่างไร อะไรคือสิ่งที่ผู้ที่ให้สัมภาษณ์กระทำอยู่เป็นประจำ เช่น ปกติเรียนหนังสืออย่างไร

  • Motivation : ถามเกี่ยวกับความรู้สึก ถามเกี่ยวกับเป้าหมายของผู้ที่ให้สัมภาษณ์ เช่น ความสุขในชีวิตคุณคืออะไร

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

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


เทคนิคการสัมภาษณ์และการบันทึก

โดยพื้นฐานจะประกอบด้วยทีมงาน 3 คน ทำหน้าที่แตกต่างกัน

  • Interview : ทำการสัมภาษณ์ ทำหน้าที่ตั้งคำถามและสื่อสารกับผู้ให้สัมภาษณ์
  • Note : ทำหน้าที่จดบันทึก ไม่ต้องคิดหรือวิเคราะห์ แค่จดทุกอย่างที่เป็นข้อเท็จจริง ที่ผู้ถูกสัมภาษณ์พูดออกมา
  • Observe : ทำหน้าที่สังเกต มองพฤติกรรมของผู้ถูกสัมภาษณ์ สังเกตการกระทำ และแยกให้ออกว่าข้อมูลไหนที่พูดออกมาแล้วเป็นเรื่องจริงหรือเป็นเท็จ

หากมีผู้ให้สัมภาษณ์แค่ 2 คน คนที่ทำหน้าที่ Note ต้องคอยสังเกตพฤติกรรมด้วย และหากมีผู้สัมภาษณ์คนเดียว ให้มุ่งเน้นไปที่การสัมภาษณ์และการจดบันทึกเป็นหลัก

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

  2. ให้ผู้ถูกสัมภาษณ์แนะนำตนเอง และเริ่มถามคำถาม โดยจะเป็นคำถามพื้นฐาน(Variable) ขั้นตอนนี้จะใช้เวลาประมาณ 3 นาที

  3. เริ่มถามคำถามที่อยากถาม ประเด็นที่สนใจ เพื่อเก็บข้อมูล ขั้นตอนนี้จะใช้เวลาประมาณ 15 นาที

  4. ขั้นตอนสุดท้าย หากมีบางสิ่งที่อยากให้ผู้ถูกสัมภาษณ์ลงมือปฏิบัติให้ดู หรือมีแบบสอบถาม จะใช้เวลาประมาณ 5 นาที

ทั้ง 4 ขั้นตอนนี้ไม่ควรเกินระยะเวลา 1 ชั่วโมง

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


การสังเกต

เป็นวิธีการที่มีประสิทธิภาพมาก จากการเก็บข้อมูลของผู้ใช้ วิธีการสังเกตมี 3 แบบ

  1. มองถึงรูปลักษณ์ภายนอก : สีหน้า ท่าทาง บุคลิกภาพ เป็นต้น

  2. มองพฤติกรรม : สิ่งที่ทำเป็นประจำ สิ่งที่ทำอย่างเคยชิน สิ่งที่ทำอย่างปกติ

  3. มองการกระทำ : โฟกัส หรือให้ความสำคัญกับพฤติกรรมบางอย่างที่เราสนใจ หรือเป็นพฤติกรรมที่เราอยากแก้ไขปัญหา

นอกจากนี้การสังเกตจะมีอีก 2 วิธี คือ

  1. สังเกตห่างๆ หรือสังเกตจากระยะไกล : เป็นการมองพฤติกรรม หรือการกระทำจากระยะไกลๆ ดูสิ่งที่เขากระทำ หรือสิ่งที่เขาตัดสินใจ วิธีการคือเลือกบุคคลแค่บุคคลเดียว แล้วมองตลอด อย่ามองแค่รวมๆ ให้โฟกัสที่คน 1 คน ต่อการสังเกต หรือโฟกัสที่จุดที่เราสนใจไปเลย ตัวอย่างเช่น เราต้องการทำ Application เกี่ยวกับระบบจ่ายเงินในร้านสะดวกซื้อ ก็ให้โฟกัสแค่พฤติกรรมการจ่ายเงินของลูกค้าที่หน้าเคาท์เตอร์ไปเลย

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

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


การใช้งาน Empathy Map

คือวิธีการรวบรวม และวิเคราะห์ข้อมูล ประกอบด้วย 4 ส่วน คือ

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

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


Define

คือการกำหนดเป้าหมาย หรือปัญหาที่เราสนใจ โดยข้อมูลจากตอนแรกที่ได้มาจากการสัมภาษณ์ หรือสังเกต โดยวิธีการที่เราจะเลือกปัยหามาอยู่ 3 แบบ คือ

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

สรุปคือการ Define คือการที่เราเฟ้นหาประเด็นสำคัญที่ควรค่าแก่การแก้ไข เมื่อเราเลือกปัญหาได้แล้ว เราต้องเลือกผู้ใช้ว่า เป็นใคร และจะใช้ได้อย่างไร (Persona)


การสร้าง Persona

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

  • Name : ระบุชื่อ หรือตั้งชื่อขึ้นมา โดยเป็นชื่อสมมติ

  • Photo : ใส่รูปของผู้ใช้ หารูปโดยให้บุคลิก ลักษณะท่าทาง อยู่ในกลุ่มเป้าหมาย

  • Sentence : บอกประโยคสั้นๆที่เป็นปัญหาของผู้ใช้

  • Biography : ระบุข้อมูลพื้นฐาน เช่น อายุ เพศ ส่วนสูง การศึกษา เป็นต้น

  • Behavior : ระบุพฤติกรรมของผู้ใช้ เช่น เป็นคนนอนตื่นสาย ชอบทานอาหารไทย ชอบเที่ยวต่างประเทศเดือนละครั้ง เป็นต้น

  • Pain : ระบุความทุกข์ หรือปัญหาที่ผู้ใช้เจอ ที่เราต้องการไปแก้ไข

  • Goal&Motivation : ระบุเป้าหมายว่าคืออะไร ผู้ใช้อยากได้อะไร หรืออยากให้อะไรเกิดขึ้น และเมื่อแก้ไขปัญหาแล้วอยากให้ผลลัพธ์แบบไหนเกิดขึ้น ความคาดหวังคืออะไร

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


Ideate

ในส่วนนี้่จะเน้นไปที่เรื่องของปริมาณ ไม่ใช่คุณภาพ สิ่งที่สำคัญในการคิด Idea คือ จะต้องสนุก มีความบ้า, มีความกล้า และมีความแปลกใหม่


เทคนิคการสร้างสรรค์ไอเดีย

ก่อนเราจะเริ่มสร้างไอเดีย ควรจำไว้ว่า ต้องไม่กลัวความล้มเหลว และต้องไม่กลัวข้อจำกัด

  • เทคนิคที่ 1 คือ "การตั้งคำถาม" : ต้องตั้งคำถามให้ดี ให้แหวก แล้วเราจะได้คำตอบที่สร้างสรรค์

  • เทคนิคที่ 2 คือ "การเชื่อมประสาน" : คือการนำ 2 สิ่งที่ต่างกันมากๆ มาเชื่อมต่อกัน จะทำให้ได้สิ่งใหม่ที่สร้างสรรค์มากกว่าเดิมออกมา

  • เทคนิคที่ 3 คือ "ลองทำสิ่งแปลกใหม่" : เปลี่ยนสิ่งแวดล้อมใหม่ๆ จะช่วยสร้างไอเดียแปลกใหม่

สรุปคือ การคิดสร้างสรรค์ คือการอกจากกรอบเดิมๆ ข้อจำกัดเดิมๆ และลองฝึกฝนด้วยการตั้งคำถาม, เชื่อมประสาน และทำสิ่งที่แปลกใหม่


Step Sketch

มีทั้งหมด 4 ขั้นตอน ดังนี้

ขั้นตอนที่ 1 : รวบรวมข้อมูลที่ได้มาทั้งหมดที่มี ใช้เวลาประมาณ 20 นาที

ขั้นตอนที่ 2 : คิดไอเดียออกมาเป็นข้อๆ โดยไม่จำกัด เน้นปริมาณมากๆ และเลือกมา 1 ไอเดีย ที่ชอบที่สุด ใช้เวลาประมาณ 20 นาที

ขั้นตอนที่ 3 : นำ 1 ไอเดียที่ได้มา Sketch เพิ่มเป็น 8 ไอเดีย และเลือกมา 1 ไอเดียที่ชอบที่สุด ใช้เวลาประมาณ 8 นาที

ขั้นตอนที่ 4 : นำไอเดียที่ได้มา Sketch ตั้งชื่อว่าอะไร มีขั้นตอนการทำงานอย่างไร (เริ่มอย่างไร/ทำงานอย่างไร/จบอย่างไร)


Prototype

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


เทคนิคการสร้าง Phototype

1. Paper Prototype : เหมาะกับการทดสอบ Application หรือ Website เป็นต้นแบบที่ง่ายที่สุด โดยจะวาดลงไปบนกระดาษ

2. Desktop Prototype : เหมาะกับการออกแบบบริการ หรือพื้นที่ด้านใดด้านหนึ่ง สร้างโดยใช้ของเล่น, กระดาษ หรือดินน้ำมัน (คล้ายๆกับการสร้าง Model ของสถาปัตย์)

3. Role-Play : ใช้ตัวบุคคลมาสมมติเป็นตัวละคร ใช้เพื่อทดสอบการให้บริการ

4. Cardboard Prototype : เหมาะกับการออกแบบผลิตภัณฑ์ โดยใช้อุปกรณ์คือ กระดาษแข็งที่นำมาขึ้นรูปเป็นอุปกรณ์ต่างๆ เพื่อลองให้ผู้ใช้ ทดลองจับต้องกับผลิตภัณฑ์


การวาด Wireframe สำหรับ Paper Prototype

ซึ่ง Wireframe คือเทคนิคการร่างเส้นให้ออกมาเป็น Application หรือ Website โดยคงคอนเซ็ป "หยาบ/เร็ว/ง่าย"

เริ่มต้นการวาด Wireframe จากโจทย์หรือฟังก์ชั่นที่ต้องการทำ และต้องการทดสอบ โดยใช้ฟังก์ชั่นนั้นเป็นตัวตั้ง เริ่มต้นจากหน้าแรกก่อน ว่าโครงสร้างเป็นอย่างไร และตามด้วยปุ่มต่างๆกดแล้วไปไหน ย้ำว่าวาดคร่าวๆ


Test (การทดสอบ)

หรือคือการทดลองว่าสิ่งที่เราคิด สิ่งที่เราคาดหวัง หรือไอเดียที่เราสร้างขึ้นมานั้น ตรงและให้ผลลัพธ์ตามที่เราคิดไว้หรือไม่

"เป้าหมายของการทดสอบ : การได้ Feedback"

เมื่อได้รับ Feedback จะทำให้เราเห็นผลลัพธ์ เห็นภาพชัดเจนมากขึ้น

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


รูปแบบในการ Test

มี 2 รูปแบบ โดยขึ้นอยู่กับเป้าหมาย

  • การทดสอบแบบหยาบ : ไว้ใช้ทดสอบไอเดีย แนวคิด ความเป็นไปได้ของไอเดีย เช่นการใช้ Paper Prototype

  • การทดสอบแบบละเอียด : ไว้เรียนรู้ภาพย่อยๆที่มีอยู่ เช่น รายละเอียดในการออกแบบ Font, สี, ปุ่ม หรือเมื่อผู้ใช้ใช้แล้ว จะมีพฤติกรรมอย่างไร เป้าหมายเพื่ออะไร ดูว่าผู้ใช้เข้าใจการทำงานของ App, ปุ่ม, ข้อความหรือไม่


เครื่องมือที่ต้องใช้ในการ Test

สิ่งที่ต้องเตรียม

1. สถานที่ : ถ้า Test แบบหยาบ จะใช้สถานที่แบบไหน ตรงไหนก็ได้ แต่ถ้า Test แบบละเอียด จำเป็นต้องใช้สถานที่มิดชิด และส่วนตัว เพื่อให้มีสมาธิมากขึ้น

2. ทีมงาน : ประกอบไปด้วย

  • Interview : ทำหน้าที่ทดสอบ และสัมภาษณ์
  • Observer : ทำหน้าที่สังเกตการณ์ คอยมองรายละเอียด และอารมณ์
  • Simulator : ทำหน้าที่จำลองการทดสอบ เช่นทำเสียง Effect

แต่ถ้าไม่มีทีมงาน ให้สนใจแค่ข้อ 2 และ 3 ข้อ 1 ไม่จำเป็นเพราะเราอยากดูแค่พฤติกรรมของผู้ใช้

3. สิ่งที่ใช้ในการบันทึกการทดสอบ : ประกอบไปด้วย

  • กล้อง : โฟกัสที่หน้าจอ App และใบหน้าของผู้ใช้งาน
  • การจดบันทึก : เก็บรายละเอียดที่กล้องทำไม่ได้


ขั้นตอนวิธีการ Test

ขั้นตอนที่ 1 : แนะนำตัว และบอกเป้าหมายของการทดสอบ ว่าทำไปเพื่ออะไร

ขั้นตอนที่ 2 : สร้างบรรยากาศ เพื่อให้ผู้ใช้รู้สึกไม่กดดัน รู้สึกสบายๆ และบอกผู้ใช้ว่าไม่มีผลต่อเขา เป็นการทดลองผลิตภัณฑ์ หรือบริการ

ขั้นตอนที่ 3 : ให้ผู้ใช้ ได้ลองใช้งานผลิตภัณฑ์ หรือบริการ จากนั้นลอบสังเกตพฤติกรรม และสีหน้า

ขั้นตอนที่ 4 : ตั้งโจทย์ที่ผู้ผลิตอยากรู้ และให้ผู้ใช้ลองตอบ เช่น เข้าใจหรือไม่ หรืออาจจะลองกำหมดโจทย์ให้ผู้ใช้ทำ "ถ้าหากต้องการโพสรูป ต้องทำอย่างไร?" เป็นต้น

ขั้นตอนที่ 5 : สอบถามความรู้สึก, ข้อคิดเห็น หรือ Feedback ของผู้ใช้

คำถามสำคัญคือ คุณคิดว่า App นี้ เป็น App สำหรับอะไร?


จงทำซ้ำ

ทำซ้ำลูปไปเรื่อยๆ เพื่อให้ได้ผลลัพธ์ที่ดีที่สุด และเข้าใจผู้ใช้มากขึ้น!!

จากที่เราได้รู้จักโลกของ 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 แบบจริงจังกันค่ะ!