ประสบการณ์ผู้ใช้ในการพัฒนาผลิตภัณฑ์ดิจิทัล

เราดำเนินการ workshop การออกแบบให้มีประสิทธิผลได้อย่างไร:

ขั้นตอนที่ 1: Initiation

ขึ้นอยู่กับขอบเขตของโครงการ เช่น โครงการที่มีขอบเขตใหญ่และต้องมีการ discovery หรือออกแบบ workshop เรามักจะแบ่ง workshop ออกเป็น workshop สั้นๆ หลายๆ ครั้ง การ workshop ครั้งแรกประมาณ 3 ถึง 4 ชั่วโมงจากนั้น ครั้งต่อๆไป ควรจัดสูงสุด 1 ชั่วโมง 30 ถึง 2 ชั่วโมง

ขั้นตอนที่ 2: วางแผน workshop

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

ขั้นตอนที่ 3: กำหนดความท้าทายและวัตถุประสงค์

เราระบุเป้าหมายของการ workshop UX อย่างชัดเจนให้กับผู้เข้าร่วม ภายใน workshop เราพยายามค้นหาผลิตภัณฑ์และธุรกิจภายใน/นอก และความต้องการผ่านปฏิสัมพันธ์และกิจกรรมต่างๆ เช่น การสัมภาษณ์ลูกค้าและการเขียนความคิดของพวกเขา

ขั้นตอนที่ 4: การฝึกคิด (Empathy Map)

โดยทั่วไป เราใช้แบบฝึกหัดการคิดสำหรับการ discovery และ design workshops มากกว่า technical workshops. เป็นกระบวนการที่อิงตามเครื่องมือ Empathy Map Canvas ซึ่งประกอบด้วย Explain, Execute และ Examine เราพยายามทำความเข้าใจอย่างลึกซึ้งร่วมกันและการเอาใจใส่สำหรับผู้ใช้ เราใช้เพื่อช่วยปรับปรุงประสบการณ์ของลูกค้าและออกแบบสภาพแวดล้อมการทำงานที่ดีขึ้น นอกจากนี้ เรายังทำแบบฝึกหัดเกี่ยวกับการชนะคู่แข่งโดยเน้นที่การใช้งาน รูปลักษณ์ และความรู้สึกผ่านการทบทวนคู่แข่งเพื่อทำความเข้าใจฟังก์ชันการทำงานที่การออกแบบควรมี

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

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

จะ Personasได้อย่างไร?

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

1. ตระหนักถึงความรู้เดิมของผู้ใช้เกี่ยวกับพื้นที่ที่กำหนด เช่น ผลิตภัณฑ์สำหรับใคร? ผู้ใช้รู้อะไรเกี่ยวกับผลิตภัณฑ์ที่คล้ายคลึงกัน? พวกเขามีความคาดหวังอะไร? ทั้งหมดนี้จำเป็นต้องนำมาพิจารณาเมื่อออกแบบแอปพลิเคชัน
2. กำหนด persona โดยเริ่มจากข้อมูลพื้นฐานและระบุรายละเอียดเพิ่มเติมเพื่อทำให้ภาพของบุคคลนั้นสมบูรณ์ ข้อมูลพื้นฐานที่จะเริ่มต้นด้วยคือ:
   • ชื่อ
   • อายุ
   • อาชีพ
   • พฤติกรรม
3. ระบุความต้องการและคุณลักษณะของผู้ใช้ด้วย Experience Map The Experience map ถูกสร้างขึ้นจากการวิจัยที่รวบรวมผ่านการสัมภาษณ์ของ stakeholders และการวิเคราะห์เว็บ The Experience map แสดงงานวิจัยนี้ผ่านการเล่าเรื่องและการแสดงภาพ นำเสนอมุมมองเพื่อแสดงประสบการณ์ที่แท้จริงของผู้ใช้

ขั้นตอนที่ 6: การสร้างแผนผังเว็บไซต์และ Wireframes

เราเริ่มต้นโครงการออกแบบเว็บ / แอปพลิเคชันด้วยโครงสร้างและกระบวนการวางแผนตามแนวคิดที่ตกลงกันผ่านการ workshops เสมอ เราไม่เริ่มงานออกแบบภาพ (UI) จนกว่า sitemap, wireframes and Information Architecture จะได้รับการตรวจสอบ อภิปราย แก้ไข และอนุมัติโดยทีมและลูกค้า

Sitemap คืออะไร?

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

Wireframe คืออะไร?

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

และนี่คือ Information Architecture (IA)

Information Architecture คืออะไร?

จากชื่อก็บ่งบอกถึงความ ซึ่ง the Information Architecture คือโครงสร้างของเนื้อหา

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

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

วิธีการ Wireframe เว็บไซต์

มีเครื่องมือ wireframing มากมายสำหรับสร้าง wireframes ที่ง่ายและรวดเร็ว เช่น Adobe Xd, Figma, Sketch, Invision และอื่นๆ ปกติแล้วทีมออกแบบของเราจะใช้ Adobe Xd เมื่อเราทำงานบนโครงร่าง

เราสร้าง wireframes อย่างไร:

1. โฟกัสที่ UX A wireframe ไม่ใช่การออกแบบ UI
   เมื่อเราสร้าง Wireframing เราพยายามระลึกไว้ว่า Wireframe ไม่จำเป็นต้องออกแบบทุกหน้าหรือออกแบบหน้าจอด้วยองค์ประกอบทั้งหมด แต่เน้นที่ประสบการณ์ของผู้ใช้ มันเกี่ยวกับการรู้ว่า “ใครคือผู้ใช้หลัก และเราจะทำให้ประสบการณ์การใช้เว็บไซต์เป็นไปอย่างราบรื่นที่สุดสำหรับพวกเขาได้อย่างไร”
2. ทำให้มันเข้าใจง่าย
   Wireframe เป็นขั้นตอนแรกก่อนการออกแบบภาพ เราสร้างโครงร่างที่เรียบง่ายและแสดงให้เห็นว่าองค์ประกอบต่างๆ ถูกจัดวางบนหน้าอย่างไร และ site navigation ต้องทำงานอย่างไร โดยใช้รูปสี่เหลี่ยมผืนผ้าธรรมดาและสีโทนสีเทา
3. สรุปแนวทางที่เราคำนึงถึงเมื่อเราทำงาน wireframe:
   • กำหนดสีให้เป็นสีเทา: ขาว ดำ และเทา
   • ใช้แบบอักษรทั่วไปสูงสุดสองแบบ
   • หลีกเลี่ยงกราฟิก (รูปภาพ พื้นหลัง ฯลฯ) ลองใช้สี่เหลี่ยมผืนผ้าและสี่เหลี่ยมธรรมดาเป็นตัวยึดตำแหน่งที่มีตัว “x”
   • หลีกเลี่ยงการใช้การสร้างแบรนด์ (โลโก้ สโลแกน ธีมของบริษัท ฯลฯ)