UX Workshop คือการประชุมของนักวิเคราะห์ นักออกแบบ และ stakeholders ที่มีความเชี่ยวชาญและประสบการณ์ใน UX และตลาดเป้าหมาย เป็นขั้นตอนแรกในการแบ่งปันแนวคิดเกี่ยวกับความต้องการของผู้ใช้ ความรู้เกี่ยวกับตลาด และพยายามหาแนวทางแก้ไขที่มีประสิทธิภาพร่วมกันภายในระยะเวลาอันสั้น
เรามี workshops หลายประเภท ขึ้นอยู่กับความต้องการของโครงการ ซึ่งอาจแตกต่างกันมากไม่ว่าวัตถุประสงค์จะเป็นเช่นเพื่อสร้าง UI ของแอปบนอุปกรณ์เคลื่อนที่ เว็บไซต์ หรือซอฟต์แวร์ B2B โดยทั่วไปแล้ว workshops ดังกล่าวมีความจำเป็นอย่างยิ่งสำหรับโครงการทั้งหมดที่เกี่ยวข้องกับส่วนต่อประสานผู้ใช้ที่มุ่งขายหรืออำนวยความสะดวกให้กับ workflows
ให้ Outsourcify เป็นส่วนหนึ่งของการออกแบบ UX ของคุณ
เราคือทีมพัฒนาผลิตภัณฑ์ดิจิทัลที่ให้บริการเต็มรูปแบบ ถือว่าเป็นหนึ่งในหน่วยงาน UX ที่โดดเด่นที่สุดในกรุงเทพฯ ทีม UX ของเราช่วยลูกค้ามากมายผ่านการทำ workshop
สิ่งที่เราให้:
- UX research: เรานำเสนอการวิจัยผู้ใช้ การประเมินคู่แข่ง ข้อมูลเชิงลึกของลูกค้า บุคลิก และกลยุทธ์ UX
- CX (ประสบการณ์ของลูกค้า): เราค้นคว้าและดำเนินการประสบการณ์ของผู้ใช้ในทุกจุดเพื่อทำความเข้าใจรูปแบบการใช้งานระบบของผู้ใช้ของคุณ
- User Interface wireframing: เราทำงานโดยใช้ agile process และดำเนินการตาม iterative process เพื่อตอกย้ำประสบการณ์ผู้ใช้ของหน้าจอทั้งหมดของผลิตภัณฑ์ดิจิทัลของคุณ
- Prototyping: เราออกแบบต้นแบบที่สามารถคลิกได้แบบไดนามิกจากโครงร่างซึ่งสามารถทำให้ผู้ใช้และ stakeholders มีความเข้าใจโครงร่างของเว็บไซต์มากขึ้น

Workshop UX คืออะไร?
Workshop UX มีวัตถุประสงค์เพื่อนำนักออกแบบและ stakeholders มาร่วมกันเพื่อหารือเกี่ยวกับ user journey ในปัจจุบันของแอปพลิเคชัน เพื่อทำความเข้าใจว่ามีจุดบกพร่องไหนที่สำคัญของผู้ใช้ และค้นหานวทางแก้ไขปัญหาที่มีประสิทธิภาพเพื่อประสบการณ์ผู้ใช้ที่ดีขึ้น และกำหนด layouts ที่เหมาะสมเพื่อเตรียมสำหรับ visual design.
กิจกรรมต่างๆ เช่น การทำ empathy mapping, การทำ user journey mapping, และการสร้างตัวตนเพื่อกระตุ้นให้ผู้เข้าร่วมใน workshop คิดเกี่ยวกับความต้องการของผู้ใช้อย่างมีประสิทธิภาพ หลังจากรวบรวมแนวคิดและวิธีแก้ปัญหาที่มีประสิทธิภาพแล้ว เราก็ทำงานบนต้นแบบ (wireframe) ตามแนวคิดเหล่านั้นที่ได้รับจาก Workshop

ตัวอย่างกิจกรรม
กิจกรรมต่างๆ เช่น การทำ empathy mapping, การทำ user journey mapping, และการสร้างตัวตนเพื่อกระตุ้นให้ผู้เข้าร่วมใน workshop คิดเกี่ยวกับความต้องการของผู้ใช้อย่างมีประสิทธิภาพ หลังจากรวบรวมแนวคิดและวิธีแก้ปัญหาที่มีประสิทธิภาพแล้ว เราก็ทำงานบนต้นแบบ (wireframe) ตามแนวคิดเหล่านั้นที่ได้รับจาก Workshop
Empathy mapping: เรารวบรวม stakeholders และนักออกแบบที่จำเป็นทั้งหมดเพื่อช่วยค้นหาความคิดและความรู้สึกของผู้ใช้ในขณะที่ใช้ผลิตภัณฑ์และแอปพลิเคชันของตน
User journey mapping: เราใช้ user journey maps เพื่อทำความเข้าใจและปรับปรุง user flow ของผู้ใช้หรือสร้างประสบการณ์ใหม่สำหรับผู้ใช้เป้าหมาย เราเลือกสร้าง persona เพื่อรองรับ map นี้ ในระหว่างการทำ user journey mapping stakeholders จะวาดคุณลักษณะ แนวคิด หรือเน้นคุณลักษณะเฉพาะและแสดงความคิดเห็น

เราดำเนินการ 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 ของผู้ใช้ในช่วงเริ่มต้นของงานเพื่อให้มีตัวละครสมมติเพื่อใช้ในกระบวนการออกแบบ เพื่อให้สามารถเข้าใจของพวกเขาได้ลึกซึ่งมากขึ้น
- ตระหนักถึงความรู้เดิมของผู้ใช้เกี่ยวกับพื้นที่ที่กำหนด เช่น ผลิตภัณฑ์สำหรับใคร? ผู้ใช้รู้อะไรเกี่ยวกับผลิตภัณฑ์ที่คล้ายคลึงกัน? พวกเขามีความคาดหวังอะไร? ทั้งหมดนี้จำเป็นต้องนำมาพิจารณาเมื่อออกแบบแอปพลิเคชัน
- กำหนด persona โดยเริ่มจากข้อมูลพื้นฐานและระบุรายละเอียดเพิ่มเติมเพื่อทำให้ภาพของบุคคลนั้นสมบูรณ์ ข้อมูลพื้นฐานที่จะเริ่มต้นด้วยคือ:
• ชื่อ
• อายุ
• อาชีพ
• พฤติกรรม - ระบุความต้องการและคุณลักษณะของผู้ใช้ด้วย 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 อย่างไร:
- โฟกัสที่ UX A wireframe ไม่ใช่การออกแบบ UI
เมื่อเราสร้าง Wireframing เราพยายามระลึกไว้ว่า Wireframe ไม่จำเป็นต้องออกแบบทุกหน้าหรือออกแบบหน้าจอด้วยองค์ประกอบทั้งหมด แต่เน้นที่ประสบการณ์ของผู้ใช้ มันเกี่ยวกับการรู้ว่า “ใครคือผู้ใช้หลัก และเราจะทำให้ประสบการณ์การใช้เว็บไซต์เป็นไปอย่างราบรื่นที่สุดสำหรับพวกเขาได้อย่างไร” - ทำให้มันเข้าใจง่าย
Wireframe เป็นขั้นตอนแรกก่อนการออกแบบภาพ เราสร้างโครงร่างที่เรียบง่ายและแสดงให้เห็นว่าองค์ประกอบต่างๆ ถูกจัดวางบนหน้าอย่างไร และ site navigation ต้องทำงานอย่างไร โดยใช้รูปสี่เหลี่ยมผืนผ้าธรรมดาและสีโทนสีเทา - สรุปแนวทางที่เราคำนึงถึงเมื่อเราทำงาน wireframe:
• กำหนดสีให้เป็นสีเทา: ขาว ดำ และเทา
• ใช้แบบอักษรทั่วไปสูงสุดสองแบบ
• หลีกเลี่ยงกราฟิก (รูปภาพ พื้นหลัง ฯลฯ) ลองใช้สี่เหลี่ยมผืนผ้าและสี่เหลี่ยมธรรมดาเป็นตัวยึดตำแหน่งที่มีตัว “x”
• หลีกเลี่ยงการใช้การสร้างแบรนด์ (โลโก้ สโลแกน ธีมของบริษัท ฯลฯ)
สนใจเวิร์กชอปของเราไหม
พูดคุยกับทีมงานของเรา!
ติดต่อเรา
