ช่วยให้ AI มองเห็นได้ชัดเจน: กรณีศึกษาการออกแบบแดชบอร์ด

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

แต่ระบบอัตโนมัติที่ขับเคลื่อนด้วย AI ยังคงพัฒนาต่อไปและยังต้องมีการแทรกแซงของมนุษย์ ในกรณีศึกษาการออกแบบแดชบอร์ดนี้ ฉันให้รายละเอียดวิธีที่ฉันพัฒนา UI ที่ช่วยให้เจ้าหน้าที่ปฏิบัติงานที่เป็นมนุษย์ปรับปรุงกระบวนการรับรู้ AI

ลูกค้า

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

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

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

บทสรุป

ตลอดระยะเวลาสองเดือน ฉันได้ทำงานร่วมกับลูกค้าเพื่อส่งมอบการออกแบบสำหรับแดชบอร์ดผู้ปฏิบัติงานและแดชบอร์ดของลูกค้า ฉันยังเตรียมไลบรารีส่วนประกอบและคู่มือสไตล์ที่มาพร้อมกับผลงานเหล่านี้

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

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

การปรับปรุงแดชบอร์ดผู้ประกอบการ

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

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

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

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

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

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

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

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

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

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

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

การออกแบบแดชบอร์ดลูกค้าตั้งแต่เริ่มต้น

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

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

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

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

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

การสร้างไลบรารีส่วนประกอบในFigma

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

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

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

เรื่องการวิจัยผู้ใช้

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

อ่านเพิ่มเติมในบล็อก Toptal:

• การออกแบบแดชบอร์ด – ข้อควรพิจารณาและแนวทางปฏิบัติที่ดีที่สุด
• ความสม่ำเสมอคือกุญแจสำคัญ – วิธีสร้างระบบการออกแบบ Figma
• เทคนิคการวิจัย UX และการนำไปใช้งาน
• คุณค่าของการวิจัยผู้ใช้
• ROI ที่แท้จริงของ UX: โน้มน้าวใจ Executive Suite