เดินน้อยลง เข้าถึงไฟล์สื่อที่คุณต้องการได้เร็วขึ้นบน WhatsApp

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

ฉันเพิ่งมีส่วนร่วมในความท้าทายด้านการออกแบบที่นำไปสู่การสร้างกรณีศึกษานี้ ดังนั้นก่อนที่คุณจะลงลึกถึงกรณีศึกษาของฉัน เรามาดูบริบทกันสักหน่อย ⬇️

ฉันเริ่มต้นอย่างไรกับ UX Design Challenge

ดังนั้นการเดินทางของฉันจึงเริ่มต้นขึ้นด้วยการเข้าร่วมเวิร์คช็อป UX Kickstarter 2 สัปดาห์โดย Anudeep ซึ่งฉันได้เรียนรู้เกี่ยวกับหลักการออกแบบ UX, ฮิวริสติก, การสร้าง UI ใน Figma, การสร้างต้นแบบแอนิเมชัน และผลกระทบทางธุรกิจของการออกแบบ UX

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

ด้วยความคิดที่อยากรู้อยากเห็นนี้ เราจึงเข้าร่วมเซสชั่นกับ Anudeep ซึ่งเราได้รับฟังการบรรยายสรุปเกี่ยวกับความท้าทายในการออกแบบ UX การมีส่วนร่วมในความท้าทายด้านการออกแบบครั้งแรกของฉัน ฉันรู้สึกตื่นเต้นมากและประหม่าเล็กน้อยในเวลาเดียวกัน เรามีเวลา 2 วันในการทำสิ่งที่ท้าทายให้เสร็จ แต่ฉันเดาว่าความตื่นเต้นที่จะทำมันให้เสร็จภายในเวลาที่จำกัดเป็นประสบการณ์การเรียนรู้ที่ยอดเยี่ยมในการเรียนรู้เกี่ยวกับวิธีการออกแบบโดยคำนึงถึงข้อจำกัด

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

นี่คือการเปรียบเทียบระหว่างหน้าจอเดิมกับการออกแบบใหม่ ฉันจะแนะนำคุณว่าฉันมาถึงวิธีแก้ปัญหาในส่วนหลังของกรณีศึกษาได้อย่างไร

มาพูดคุยเกี่ยวกับวิธีแก้ปัญหาและวิธีที่ช่วยผู้ใช้

ในการแก้ปัญหาขั้นสุดท้าย

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

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

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

โซลูชั่นช่วยธุรกิจได้อย่างไร?

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

นี่คือต้นแบบ Figma สำหรับสิ่งเดียวกัน -

ตอนนี้เรามาพูดถึงกระบวนการที่จะมาถึงการตัดสินใจออกแบบขั้นสุดท้ายคืออะไร

เหตุผลที่ฉันเลือก WhatsApp และโฟลว์เฉพาะนี้

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

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

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

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

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

ฉันเข้าใจจุดที่ต้องปรับปรุงใน WhatsApp ได้อย่างไร

การเรียนรู้และทำความเข้าใจ 10 ฮิวริสติกของการออกแบบช่วยให้ฉันระบุปัญหาในขั้นตอนการค้นหาที่มีอยู่ได้อย่างมาก ด้วยความช่วยเหลือของสามัญสำนึกและการประเมินฮิวริสติก ฉันสามารถเลือกปัญหาสองสามข้อที่สามารถแก้ไขได้สำหรับโฟลว์การค้นหา

ในระหว่างการประเมินฮิวริสติก ฉันเกิดคำถามเช่น

1. เหตุใดจึงแยกไฟล์เป็นสื่อ ลิงก์ และเอกสาร
2. ความยืดหยุ่นและประสิทธิภาพของการใช้งาน —การแยกไฟล์ออกเป็นสื่อ ลิงก์ และเอกสารช่วยให้ผู้ใช้ค้นหาไฟล์ที่ต้องการบันทึกหรือแชร์กับผู้อื่นได้อย่างรวดเร็ว
• ความยืดหยุ่นและประสิทธิภาพของการใช้ งาน - การแสดงไฟล์มีเดียตามเดือนช่วยให้ผู้ใช้ค้นหาสื่อเฉพาะสำหรับเดือนที่มีการแชร์ได้อย่างรวดเร็ว
• การรับรู้มากกว่าการเรียกคืน - เนื่องจากการแยกไฟล์มีเดียที่ชาญฉลาดในแต่ละเดือน ผู้ใช้สามารถทราบได้อย่างรวดเร็วว่าไฟล์เก่าหรือใหม่เพียงใด แทนที่จะพยายามเรียกคืนว่าไฟล์มีเดียถูกแชร์ไปนานเท่าใด ซึ่งจะช่วยลดภาระการรับรู้ของ ผู้ใช้งาน.

ผู้ใช้จะค้นหาไฟล์มีเดียเฉพาะเพื่อจำกัดเวลาในการค้นหาสำหรับผู้ใช้ได้อย่างไร

• เป็นการยากสำหรับผู้ใช้ในการมองหาประเภทไฟล์มีเดียที่เฉพาะเจาะจงซึ่งอาจเป็นวิดีโอ, gif, เสียงหรือสติกเกอร์ บ่อยครั้งที่ผู้ใช้อาจต้องเลื่อนดูหลายๆ ครั้งเพื่อค้นหาประเภทไฟล์มีเดียที่ต้องการเมื่อพยายามแชร์ไฟล์กับผู้อื่นหรือบันทึกลงในอุปกรณ์ของตนเอง
• Heuristic- ความยืดหยุ่นและประสิทธิภาพของการใช้งาน
• เป็นการยากสำหรับผู้ใช้ในการระบุว่าไฟล์ใดไม่ได้รับการสำรองข้อมูลเนื่องจากไฟล์ที่สำรองข้อมูลและไม่ได้สำรองข้อมูลมีอยู่ในแกลเลอรีและผสมกัน
• ฮิวริสติก - การป้องกันข้อผิดพลาด

จากปัญหาที่ระบุระหว่างการประเมินฮิวริสติก ฉันได้แนวคิด 2 ข้อและเลือกแนวคิดที่มีขอบเขตมากกว่าในการแก้ปัญหา



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

แนวคิดที่ 2 — นอกจากแนวคิดที่ 1 แล้ว ยังมีตัวกรองแท็บเพื่อดูเฉพาะแท็บสื่อที่ต้องการในแต่ละครั้ง เช่น ผู้ใช้ที่ต้องการดูเฉพาะแท็บเสียงและวิดีโอสามารถเลือกแท็บเสียงและวิดีโอจากตัวกรองได้อย่างรวดเร็ว ค้นหาไฟล์เหล่านั้น

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

แนวคิดที่เลือกจะสร้างผลกระทบทางธุรกิจอย่างมากด้วยการลดระยะเวลาเซสชันและการเลิกใช้ขณะค้นหา

นำความคิดมาสู่ Paper

ฉันต้องการจินตนาการว่าแนวคิดของฉันจะมีลักษณะอย่างไรบนอินเทอร์เฟซ ดังนั้นฉันจึงร่างต้นแบบกระดาษเพื่อให้เข้าใจแนวคิดของฉันได้ดีขึ้น



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

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

ทำให้ต้นแบบของฉันเป็นจริงเท่าที่จะทำได้ (ต้นแบบที่มีความเที่ยงตรงสูง)

การเรียนรู้เกี่ยวกับ UI และการทำความเข้าใจว่าอินเทอร์เฟซทำงานอย่างไรช่วยให้สามารถสร้างต้นแบบที่มีความเที่ยงตรงสูงใน Figma ได้อย่างมาก ทักษะต่างๆ เช่น การสร้างต้นแบบแอนิเมชัน การเว้นวรรค และการปรับขนาดมีประโยชน์มากขณะออกแบบอินเทอร์เฟซ ปลั๊กอินยังช่วยประหยัดเวลาได้มากในระหว่างขั้นตอนการออกแบบ UI


• ระหว่างการออกแบบ UI ใหม่ ฉันได้เพิ่มตัวเลือกแท็บไฟล์มีเดีย เช่น รูปภาพ วิดีโอ เสียง Gif และสติกเกอร์
• เพิ่มไอคอนตัวกรองเพื่อซ่อน/เลิกซ่อนแท็บสื่อตามเดือน
• เพิ่มไอคอนสำรองข้อมูลเพื่อให้ผู้ใช้มีตัวเลือกในการเข้าถึงไฟล์ที่ยังไม่ได้สำรองข้อมูล
• การใช้ปลั๊กอิน เช่น Unsplash สำหรับภาพสต็อกและสัญลักษณ์ดีไซน์ Material สำหรับไอคอนช่วยประหยัดเวลาได้มาก

ตรวจสอบว่าโซลูชันของฉันจะใช้งานได้หรือไม่ด้วยความช่วยเหลือของการทดสอบการใช้งาน ✅

ตอนนี้ฉันได้ออกแบบตามปัญหาที่ระบุระหว่างการประเมินฮิวริสติกเสร็จแล้ว

ฉันทดสอบการออกแบบกับผู้ใช้เพื่อให้แน่ใจว่าใช้งานได้และปรับปรุงสิ่งที่ใช้ไม่ได้

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

งานที่มอบให้กับผู้ใช้ —

1) ไปที่สื่อ ลิงก์ และเอกสารจากหน้าจอข้อมูลติดต่อ
2) คุณสามารถค้นหาประเภทไฟล์สื่อเฉพาะได้หรือ
ไม่ 3) คุณสามารถกรองและดูประเภทของไฟล์สื่อประเภทที่คุณต้องการดูได้
หรือไม่ 4) คุณมองหาสถานที่นั้นได้ไหม ที่ไฟล์ที่ยังไม่ได้สำรองสามารถมองเห็นได้

จุดสังเกต —

1) ผู้ใช้สามารถเข้าใจการแยกประเภทไฟล์มีเดียได้หรือไม่
2) ผู้ใช้สามารถนำทางและค้นหาประเภทไฟล์มีเดียที่ต้องการได้หรือไม่?
3) ผู้ใช้สามารถกรองสื่อบางประเภทได้หรือไม่?
4) ผู้ใช้สามารถเข้าถึงไฟล์ไปยังตัวเลือกสำรองได้หรือไม่
5) ทำความเข้าใจว่าผู้ใช้สามารถเข้าใจได้หรือไม่หากผู้ใช้รู้จักไอคอนสำหรับการสำรองข้อมูลอย่างรวดเร็ว

ข้อมูลเชิงลึกและข้อเสนอแนะจากการทดสอบการใช้งาน-

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


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



การเรียนรู้ที่สำคัญ

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