Card Sorting คืออะไร ? เคยสงสัยหรือไม่ว่าเราจะวิเคราะห์เว็บไซต์เราแบบง่าย ๆ ได้อย่างไร, คนทำ UX วางแผนเว็บไซต์ยังไง, คิดอะไรกว่าจะออกมาเป็นเว็บไซต์แบบนี้
บทความนี้จะเล่าเรื่องเครื่องมือในการทำ UX สำหรับผู้ที่เพิ่งเริ่มต้นอยากจะศึกษาแต่ไม่รู้จะจับต้นชนปลายอย่างไร แอดมินนัทจะมาเล่าเทคนิคและเครื่องมือต่างๆที่น่าสนใจในระดับพื้นฐานมาให้อ่านแบบเข้าใจง่ายกันค่ะ
เกริ่นนำ
Card sorting ไม่ใช่การเล่นเกมการ์ดหรือไพ่ยูกิที่เรารู้จักกันแต่อย่างใด แต่เป็นเครื่องมือที่ใช้ใน การทำ UX ยอดนิยมที่ใช้เพื่อวางแผนข้อมูลเพื่อการนำเสนอ หรือที่นิยมมากที่สุดคือนำไปใช้ในการออกแบบ Sitemap ให้กับเว็บไซต์ของเรา บทความนี้เราจะมาเล่าประเภทของ Card Sorting และมีภาพประกอบวิดีโอที่น่าใจให้ผู้อ่านนำเทคนิคไปใช้งานได้จริงกันค่ะ
เราลองมาเล่นเกมตอบคำถามกันดีกว่าว่า Sitemap คืออะไร ?
A. เครื่องมือที่ใช้ทดสอบ Eyes tracking กับผู้ใช้งาน
B. ชื่ออัลบั้มใหม่ของยังโอม
C. ภาพไดอะแกรม แสดงลำดับขั้นตอนของเว็บไซต์ที่ผู้ใช้งานสามารถเข้าใจได้ง่าย มีความเหมาะสมและใช้งานได้จริงตามหลัก Mental Model
ถ้าหากว่าคุณตอบข้อ B เราขอให้งูมันเลื้อยเข้ามาอยู่ที่เอว
หากคุณตอบข้อ C คือถูกต้องค่า เพราะ Sitemap คือสิ่งที่สำคัญที่สุดในการออกแบบสื่อดิจิตอลของเราแบบเริ่มต้น
เราก็จะมีคำถามตามมาอีกว่า แล้วเราจะออกแบบ Sitemap อย่างไรให้ผู้ใช้งานของเราเข้าใจง่าย?
เครื่องมือนี้จะมาช่วยทำให้เรารวบรวมข้อมูลที่จะสามารถพัฒนาโครงสร้างข้อมูลของเราได้ เพราะการทำ Card Sorting เป็นเครื่องมือที่จะใช้ทดสอบผู้ใช้งานของเรา โดยการให้ Participants หรือผู้ใช้งานเข้ามามีส่วนร่วมในการเรียงการ์ดที่เรากำหนดให้เข้าที่เข้าทางเป็นกลุ่ม โดยในแต่ละการ์ดก็จะมี Label หรือคำที่จะเราจะแสดงในระบบของเราเขียนไว้บนการ์ดนั่นเอง
Card sorting จะเป็นเครื่องมือที่ช่วยตอบเราได้ว่า คำที่เราเขียนนี้เข้าใจยากหรือไม่, การจัดเรียงมีความซับซ้อน มีประสิทธิภาพหรือไม่ และเราจะสามารถมองเห็นภาพทั้งหมดได้ว่า Users จัดกลุ่มการ์ดเข้ากลุ่มเชื่อมโยงกันได้อย่างไร
และในระหว่างการทำทดสอบเอง ผู้ใช้งานของเราก็ยังช่วยแนะนำข้อมูลให้กับผู้ทดสอบอย่างเรานำข้อมูล ผลลัพธ์ไปใช้งานได้มากมาย ไม่ว่าจะเป็นวางแผนการออกแบบ Menus, Navigations, หรือ Taxonomies (การจัดกลุ่มข้อมูล) หรือนำข้อมูลนี้ไปสร้าง ปรับปรุง Sitemap ของเราให้มีประสิทธิภาพมากยิ่งขึ้นได้
Card sorting คือ?
คือ เครื่องมือที่ช่วยให้เราได้ออกแบบ วางแผนการจัดการโครงสร้างของเว็บไซต์ (Information Architecture) โดยการจัดกิจกรรมเรียงการ์ดกับผู้ใช้งานของเรา ว่าผู้ใช้งานของเราสามารถเรียงข้อมูลเป็นอย่างไร เป็นเหมือนอย่างที่เราคิดไว้หรือไม่ เพื่อให้เรานำข้อมูลที่ได้จากการทำกิจกรรมนี้ไปใช้ในการวางแผนระบบที่เรากำลังจะพัฒนาให้ดียิ่งขึ้น
โดยการทำ Card sorting นั้นเราสามารถใช้ได้ทั้งการ์ดที่เป็นกระดาษ มีคำด้านใน หรือจะใช้ระบบออนไลน์ในการทำแบบทดสอบก็ได้
ข้อดี
Card sorting จะช่วยให้เราเข้าใจความคาดหวังของผู้ใช้งานระบบของเรา ว่าเข้าใจหัวข้อที่เรากำลังจะนำเสนอได้ระดับใด
- ช่วยในการวางแผนโครงสร้างของเว็บไซต์ (IA)
- ช่วยให้เราตัดสินใจได้ว่าสิ่งที่เราจะนำเสนอในระบบของเรานั้นเข้าใจง่ายหรือไม่
- ช่วยในการออกแบบ Menus, Navigations, Sitemap, Taxonomies
Card Sorting มีแบบไหนบ้าง?
มีทั้งหมดสองแบบด้วยกัน มีทั้งแบบ OPEN และ CLOSED ทั้งนี้ทั้งนั้นเทคนิคทั้งสองแบบนี้ขึ้นอยู่กับเราด้วย ว่าเราจะเลือกเทคนิคไปใช้ในการทำการทดลอง มาดูกันว่าแต่ละแบบแตกต่างกันอย่างไรด้วยวิดีโอด้านล่างนี้เลย
ตัวอย่างเรามีการ์ดที่มีข้อมูลเป็นนักร้องทั้งหมด และเราอยากดูว่าผู้ใช้จะจัดเรียงนักร้องตามกลุ่มใด
ปาล์มมี่
Body Slam
Cocktails
25 Hours
Big Ass
Youngohm
Polycat
Blackpink
Potato
Zeal
BNK48
Open Card Sorting - การเรียงการ์ดแบบเปิด
เราจะต้องจัดเตรียมข้อมูลกระดาษที่ใส่คำที่เราต้องการจะทดสอบวางไว้บนโต๊ะ หลังจากนั้นเราจะให้ผู้ใช้งานจัดเรียงข้อมูลเข้าตามกลุ่มใดที่ตนเองต้องการก็ได้ และผู้ใช้งานจะต้องเป็นคนกำหนดหัวข้อของกลุ่มที่จัดเรียงด้วยตนเอง
เช่น นายสมชาย จัดกลุ่ม Blackpink และ BNK48 ไว้รวมกัน และตั้งชื่อกลุ่มด้วยตนเองว่า Girl Group
Closed Card Sorting - การเรียงการ์ดแบบปิด
คือการที่เราจัดเตรียมกระดาษ และกำหนดหัวข้อของแต่ละกลุ่มทั้งหมดแล้ว เราจะให้ผู้ใช้งานทำการจัดเรียงข้อมูลข้างต้น เข้าไปในกลุ่มที่เรากำหนดไว้ให้เท่านั้น
เช่น แอดมินนัท ตั้งชื่อกลุ่มหัวข้อว่า Rock Music, Pop Music, Hiphop ไว้ให้กับผู้ใช้งาน เพื่อดูว่าผู้ใช้งานหรือ นายสมชาย นั้นจะสามารถเลือกนักร้องที่มีแนวเพลงนี้เข้ามาอยู่รวมกันได้ถูกต้องหรือไม่
โดยปกติเราจะเริ่มต้นการทำ Open card sorting การเรียงการ์ดแบบเปิดก่อนการทดสอบแบบอื่น เพื่อทดสอบว่ามีหัวข้อไหนที่มันจะดูฟังเป็นไปได้มากที่สุดสำหรับกลุ่มผู้ใช้งานของเรา
หลังจากที่เราทำการทดสอบสำเร็จ เมื่อได้ข้อมูลมาแล้วนั้น เราก็จะตัดสินใจได้แล้วว่าระบบของเราจะใช้การจัดกลุ่มแบบไหน เราค่อยไปทำ Closed card sorting อีกครั้งเพื่อทดสอบว่าผู้ใช้งานของเรามีแนวคิดตรงกับที่เราต้องการจะสื่อไปหรือไม่
ในอนาคตหากเราจะทดสอบว่าผู้ใช้งานของเราเข้าใจเมนูซับซ้อนภายในเว็บไซต์หรือแอพลิเคชั่นที่มีอยู่แล้วของเราหรือไม่ การทดสอบด้วยสิ่งที่วิธีการทำ Tree testing จะเป็นวิธีที่ทำให้เราได้ผลลัพธ์มากกว่า Closed card sorting เพราะการทำ Tree testing จะมีหน้าตาที่คล้ายกับการทำเมนูในระบบของเรานั่นเอง (เดี๋ยวเราจะอธิบาย Tree test ให้ฟังด้านล่างนี้นะคะ)
ข้อเสียของการทำ Closed card sorting
ทำไมการทำ Closed card sorting ถึงไม่ดี ?
สมมุติว่าผู้เรียงการ์ดในตัวอย่างข้างต้นคือนายสมชาย เวลาทำการทดสอบนายสมชายจะมองเห็นการ์ดของเราทั้งหมดพร้อมกันในครั้งเดียวกัน หากมองเห็นทั้งหมดพร้อมกันทั้งหมด ก็จะทำให้นายสมชายสามารถสลับการ์ดไปมา เอ๊ะอันนี้ไม่ใช่ ย้ายดีกว่า ก็ทำให้นายสมชายเรียงการ์ดง่ายกว่าเดิม เราก็จะมองไม่เห็นความสับสนของนายสมชาย
ซึ่งในความเป็นจริงในการใช้ระบบแอพลิเคชั่นหรือเว็บไซต์ ผู้ใช้งานจะมองเห็นแค่เมนู Level เดียวเท่านั้น บางครั้งผู้ใช้งานอาจจะหลงผิดไปมา ไปวนลูปอยู่ในระดับ level 2, Level 3 หลงทางเหมือนหลงในใจเธอ
เราก็เลยมีคำแนะนำว่า หากเรามีเมนู sitemap มีเว็บไซต์ที่ทำขึ้นมาอยู่แล้ว การใช้เครื่องมืออย่าง Tree testing จึงมีประสิทธิภาพที่มากกว่า Closed Card Sorting เพราะ Tree Test คือการทดสอบที่เสมือนจริงกับการใช้งานระบบของเรา เราทำการทดสอบโดยการโชว์แค่ Level 1 แล้วค่อยให้ User ไปตามหาอะไรสักอย่างตามเป้าหมายที่เราตั้งไว้เอาเอง
สรุปคือ Tree Test จำลองเมนูในการทำเทสได้สมจริงมากกว่านั่นเอง
ด้านล่างนี้เรานำวิดีโอ การทำ Card sorting VS. Tree testing ผ่านระบบออนไลน์อย่าง Optimal Workshop มาให้ดูกันด้วย เพื่ออธิบายให้ทุกท่านเข้าใจความหมายของ Tree testing ให้มากยิ่งขึ้นไปด้วยกัน
ระหว่าง Card sorting หรือ Tree testing เราควรจะทำอะไรก่อน?
ทั้งสอง Tools นี้ก็ให้ Insights ที่แตกต่างกัน วิธีใช้งานอันไหนก่อนหลังนั้นก็ขึ้นอยู่กับสิ่งที่เราต้องการค้นหา
กรณีที่ 1 ถ้าหากเรากำลังเริ่มทำเว็บไซต์ใหม่
เราควรเริ่มต้นที่ Card sorting เพื่อรวบรวมไอเดีย คิดถึงข้อมูลว่าเราอยากจัดเรียงข้อมูลออกมาเป็นแบบไหน หลังจากเรามาวิเคราะห์ข้อมูลที่ได้มาแล้วนั้น เราแนะนำว่าให้ลองคิดโครงสร้าง Sitemap, Menu ที่เป็นไปได้ออกมาสักสามแบบ
กรณีที่ 2 หากเรามีเว็บไซต์อยู่แล้ว หรือเรามีข้อมูลจากทำ Card sorting แล้ว
เราจะใช้เครื่องมืออย่าง Tree testing ในการ Validate (พิสูจน์) ทดสอบข้อมูลของเราว่าสิ่งที่เราทำมานั้น ใช้งานง่ายและมีประสิทธิภาพ
สิ่งที่ได้จากการทำ Tree testing จะช่วยทำให้เรามองเห็นชัดยิ่งขึ้นว่าการ Labeling หรือการเขียนคำใน Sitemap, Menu ของเรานั้นเข้าใจง่ายหรือไม่
ตัวอย่าง อธิบายไวๆแบบเข้าใจง่าย
โจทย์: แอดมินนัทจะออกแบบเว็บไซต์ Designil ใหม่ โดยมีเว็บไซต์เก่าอยู่แล้ว
วิธีทำการทดสอบ: ว่าผู้ใช้งานของ Designil จะหาอะไรเจอบ้าง
แอดมินนัทก็จะเอาเมนูของ Designil ปัจจุบันมาทดสอบด้วยเครื่องมือ Tree testing
เป้าหมาย: อยากให้บทความ Freelance มีคนอ่านเยอะขึ้น
กำหนดคำสั่งให้ User ตามเป้าหมายของเรา เช่น ให้ นายสมชาย ตามหาหมวดหมู่บทความ Freelance จากเมนูของเว็บไซต์ Designil และติดตามผลว่านายสมชายจะกดหลงไปหลงมา ผิดไปมาผิดมากี่รอบ
สรุป Card sorting & Tree test
Card Sorting - Generate Idea
คือการคิดและรวบรวมไอเดีย
Tree Testing - Test Idea
คือการเทสไอเดียของเรา ว่าเมนูหรือโครงสร้างของระบบของเราใช้งานง่ายแค่ไหนในการใช้งาน
ตัวอย่างการทำ Card sorting แบบออนไลน์
ภาพตัวอย่างประกอบให้ดูด้านล่าง เป็นโปรเจคที่แอดนัททำนอกเวลาทำงานเองค่ะ ^0^
เป็นการทดสอบระบบจับคู่เครื่องสำอางค์ เทสเพื่อนำข้อมูลไปสร้าง Taxonomies ของแอพลิเคชั่น ทดสอบด้วยโปรแกรม Optimal Workshop โปรแกรมออนไลน์เพื่อใช้ในการทำ Card sorting (สำหรับตัวที่ใช้งานฟรี เราจะใส่ได้แค่ 30 การ์ดและทดสอบได้กับผู้ใช้งานได้แค่จำนวนจำกัด)
Optimal Workshop เป็นเครื่องมือทำช่วยทำ Card sorting, Tree testing ด้วยตนเองแบบออนไลน์ มีสถิติให้ดูแบบอ่านง่าย พร้อมสรุปผลให้ดูว่าผู้ใช้งานของเราทำเสร็จภายในกี่นาที แบ่งกลุ่มออกมาเป็นแบบไหนบ้าง และเราก็นำข้อมูลที่ได้ไปใช้ในการออกแบบโครงสร้างของระบบเราต่อ
ตัวอย่างเวลาเราสร้าง Card ทั้งหมด 30 Card เสร็จแล้วจะออกมาหน้าตามแบบด้านล่างนี้
ภาพด้านล่างนี้เป็นสรุปผล ว่าผู้ใช้งานจาก 8 คนใช้เวลาทำ Open Card Sorting ไปเฉลี่ยคนละ 6.29 นาที
ภาพด้านล่างนี้คือการ Merge สรุปผลข้อมูลมาในแผนผัง Dendogram รวบรวมสรุปผลจากผู้ใช้งานทุกคนที่แบ่งกลุ่มมา จะเห็นได้ว่าอันสีเขียวคืออันที่ประสบความสำเร็จ เพราะผู้ใช้ 8 คนสามารถรวมกลุ่มการ์ดเหล่านี้ได้เหมือนกัน 100% ป๊าบ ผลลัพธ์นี้ก็คือ Labeling หรือการตั้งชื่อเรานั้นถูกต้อง เข้าใจง่ายนั่นเอง เราก็สามารถนำ 100% นี้ไปทำ Taxonomies ที่วางแผนไว้ได้อย่างตรงตามเป้าหมาย
ส่วนผลลัพธ์กลุ่มอื่นก็ถือว่าอยู่ในระดับที่รับได้ที่ 70% User มีความสับสนเล็กน้อย อาจจะต้องพิจารณาตามเคสไปว่าจะจัดกลุ่มออกมาเป็นแบบไหน หรือเราอาจจะไปลองเทส Closed card sorting หรือ Tree testing อีกรอบเพื่อความมั่นใจในอนาคต
ด้านล่างนี้เป็นผลลัพธ์แผนผังแบบ Similarity Matrix อันไหนที่คนชอบจัดกลุ่มมารวมกันมากที่สุดจะเป็นสีน้ำเงินเข้ม เอาไว้ดูแบบไว ๆ ให้เข้าใจได้ง่าย
ด้านล่างนี้ภาพสุดท้ายเป็นการสรุปผลว่า ผู้ใช้แบ่งมากี่กลุ่มมากที่สุด ของแอดมินนัทนั้นจะเห็นได้ชัดว่าผู้ใช้ส่วนใหญ่แบ่งออกมา 5 กลุ่มด้วยกัน
Optimal Workshop ยังสามารถทำ Tree testing ได้ด้วยนะคะ ตามวิดีโออธิบายด้านบ่นที่เกริ่นไว้ข้างต้นเลย การสรุปผลจาก Tree testing มี Diagram แบบคูล ๆ มาให้เราดูด้วย ข้อดีคือนำข้อมูลสรุปไปพรีเซนต์ Stakeholder ให้เห็นได้ง่ายและชัดเจน
สรุป
Card sorting คือเครื่องมือช่วยในการวางแผนโครงสร้าง จัดกลุ่มข้อมูลของเว็บไซต์ของเรา ช่วยให้เราตัดสินใจได้ว่าสิ่งที่เราจะนำเสนอในระบบของเรานั้นเข้าใจง่ายหรือไม่ เป็นเครื่องมือที่ช่วยในการออกแบบ Menus, Navigations, Taxonomies ให้มีประสิทธิภาพมากยิ่งขึ้น
สำหรับใครที่คิดว่าบทความนี้มีประโยชน์สำหรับการนำไปใช้ในการทำงาน อย่าลืมติดตามบทความด้านล่างที่แนะนำนี้นะคะ
