การผสมผสานที่จับต้องได้และจับต้องไม่ได้: การออกแบบอินเทอร์เฟซหลายรูปแบบโดยใช้ Adobe XD
เผยแพร่แล้ว: 2022-03-10(บทความนี้สนับสนุนโดย Adobe) ส่วนต่อประสานผู้ใช้กำลังพัฒนา อินเทอร์เฟซที่เปิดใช้งานด้วยเสียงกำลังท้าทายส่วนต่อประสานกราฟิกกับผู้ใช้ที่ยาวนานและกำลังกลายเป็นส่วนสำคัญในชีวิตประจำวันของเราอย่างรวดเร็ว ความคืบหน้าอย่างมีนัยสำคัญในการรู้จำเสียงพูดอัตโนมัติ (APS) และการประมวลผลภาษาธรรมชาติ (NLP) ร่วมกับฐานผู้บริโภคที่น่าประทับใจ (อุปกรณ์เคลื่อนที่หลายล้านเครื่องที่มีระบบช่วยเสียงในตัว) มีอิทธิพลต่อการพัฒนาอย่างรวดเร็วและการนำอินเทอร์เฟซด้วยเสียงมาใช้
ผลิตภัณฑ์ที่ใช้เสียงเป็นอินเทอร์เฟซหลักกำลังเป็นที่นิยมมากขึ้นเรื่อยๆ ในสหรัฐอเมริกาประเทศเดียว ผู้ใหญ่ 47.3 ล้านคนมีสิทธิ์เข้าถึงลำโพงอัจฉริยะ (นั่นคือหนึ่งในห้าของประชากรผู้ใหญ่ในสหรัฐฯ) และจำนวนนี้ก็เพิ่มขึ้นเรื่อยๆ แต่อินเทอร์เฟซเสียงมีอนาคตที่สดใสไม่เฉพาะในการใช้งานส่วนตัวและที่บ้านเท่านั้น เมื่อผู้คนคุ้นเคยกับอินเทอร์เฟซด้วยเสียง พวกเขาจะคาดหวังพวกเขาในบริบททางธุรกิจเช่นกัน ลองนึกภาพว่าอีกไม่นานคุณจะสามารถเปิดเครื่องฉายภาพในห้องประชุมได้ด้วยการพูดว่า "แสดงงานนำเสนอของฉัน"
เห็นได้ชัดว่าการสื่อสารระหว่างคนกับเครื่องกำลังขยายตัวอย่างรวดเร็วเพื่อรวมปฏิสัมพันธ์ทั้งการเขียนและการพูด แต่มันหมายความว่าอินเทอร์เฟซในอนาคตจะเป็นแบบเสียงเท่านั้นหรือไม่? แม้จะมีการพรรณนานิยายวิทยาศาสตร์ แต่เสียงก็ไม่สามารถแทนที่ส่วนต่อประสานกราฟิกกับผู้ใช้ได้อย่างสมบูรณ์ แต่เราจะมีการทำงานร่วมกันของเสียง ภาพ และท่าทางในรูปแบบใหม่ของอินเทอร์เฟซ: อินเทอร์เฟซแบบ multimodal ที่เปิดใช้งานเสียง
ในบทความนี้ เราจะ:
- สำรวจแนวคิดของอินเทอร์เฟซที่เปิดใช้งานเสียงและทบทวนอินเทอร์เฟซที่เปิดใช้งานเสียงประเภทต่างๆ
- ค้นหาว่าเหตุใดอินเทอร์เฟซผู้ใช้แบบหลายโหมดที่เปิดใช้งานเสียงจึงเป็นประสบการณ์ผู้ใช้ที่ต้องการ
- ดูว่าคุณสามารถสร้าง UI หลายรูปแบบโดยใช้ Adobe XD ได้อย่างไร
สถานะของส่วนต่อประสานผู้ใช้เสียง (VUI)
ก่อนดำดิ่งสู่รายละเอียดของส่วนต่อประสานผู้ใช้เสียง เราต้องกำหนดว่าอินพุตเสียงคืออะไร การป้อนข้อมูลด้วยเสียงเป็นการโต้ตอบระหว่างมนุษย์กับคอมพิวเตอร์ โดยที่ผู้ใช้พูดคำสั่งแทนการเขียน ความสวยงามของการป้อนข้อมูลด้วยเสียงคือเป็นการโต้ตอบที่เป็นธรรมชาติมากขึ้นสำหรับผู้คน ผู้ใช้ไม่ได้ถูกจำกัดอยู่เพียงไวยากรณ์เฉพาะเมื่อโต้ตอบกับระบบ พวกเขาสามารถจัดโครงสร้างข้อมูลที่ป้อนได้หลายวิธี เช่นเดียวกับที่ทำในการสนทนาของมนุษย์
ส่วนต่อประสานกับผู้ใช้เสียงมีประโยชน์ดังต่อไปนี้แก่ผู้ใช้:
- ค่าใช้จ่ายในการโต้ตอบน้อยลง
แม้ว่าการใช้อินเทอร์เฟซที่เปิดใช้งานด้วยเสียงจะมีค่าใช้จ่ายในการโต้ตอบ แต่ค่าใช้จ่ายนี้น้อยกว่า (ในทางทฤษฎี) มากกว่าการเรียนรู้ GUI ใหม่ - การควบคุมแบบแฮนด์ฟรี
VUI นั้นยอดเยี่ยมเมื่อมือของผู้ใช้มีงานยุ่ง เช่น ขณะขับรถ ทำอาหาร หรือออกกำลังกาย - ความเร็ว
เสียงนั้นยอดเยี่ยมเมื่อถามคำถามเร็วกว่าการพิมพ์และอ่านผลลัพธ์ ตัวอย่างเช่น เมื่อใช้เสียงในรถยนต์ การบอกสถานที่กับระบบนำทางจะเร็วกว่าการพิมพ์สถานที่บนหน้าจอสัมผัส - อารมณ์และบุคลิกภาพ
แม้ว่าเราจะได้ยินเสียงแต่ไม่เห็นภาพผู้พูด เราก็นึกภาพผู้พูดในหัวได้ นี่เป็นโอกาสในการปรับปรุงการมีส่วนร่วมของผู้ใช้ - การช่วยสำหรับการเข้าถึง
ผู้ใช้ที่มีความบกพร่องทางสายตาและผู้ใช้ที่มีความบกพร่องในการเคลื่อนไหวสามารถใช้เสียงเพื่อโต้ตอบกับระบบได้
อินเทอร์เฟซที่เปิดใช้งานด้วยเสียงสามประเภท
ขึ้นอยู่กับวิธีการใช้เสียง อาจเป็นอินเทอร์เฟซประเภทใดประเภทหนึ่งต่อไปนี้
ตัวแทนเสียงในอุปกรณ์ที่หน้าจอเป็นอันดับแรก
Apple Siri และ Google Assistant เป็นตัวอย่างสำคัญของตัวแทนเสียง สำหรับระบบดังกล่าว เสียงจะทำหน้าที่เหมือนการเพิ่มประสิทธิภาพสำหรับ GUI ที่มีอยู่ ในหลายกรณี เอเจนต์ทำหน้าที่เป็นก้าวแรกในการเดินทางของผู้ใช้: ผู้ใช้ทริกเกอร์ตัวแทนเสียงและให้คำสั่งผ่านเสียง ในขณะที่การโต้ตอบอื่นๆ ทั้งหมดทำได้โดยใช้หน้าจอสัมผัส ตัวอย่างเช่น เมื่อคุณถามคำถาม Siri จะให้คำตอบในรูปแบบของรายการ และคุณจำเป็นต้องโต้ตอบกับรายการนั้น ด้วยเหตุนี้ ประสบการณ์ของผู้ใช้จึงกระจัดกระจาย — เราใช้เสียงเพื่อเริ่มต้นการโต้ตอบ แล้วเปลี่ยนไปแตะเพื่อดำเนินการต่อ

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

อุปกรณ์สั่งงานด้วยเสียง
ด้วยระบบที่เน้นเสียงเป็นหลัก อุปกรณ์ยอมรับการป้อนข้อมูลของผู้ใช้เป็นหลักผ่านคำสั่งเสียง แต่ยังมีหน้าจอแสดงผลในตัวอีกด้วย หมายความว่าเสียงเป็นส่วนติดต่อผู้ใช้หลัก แต่ไม่ใช่ส่วนเดียว คำโบราณที่ว่า “ภาพหนึ่งภาพมีค่าหนึ่งพันคำ” ยังคงประยุกต์ใช้กับระบบที่ใช้เสียงสมัยใหม่ได้ สมองของมนุษย์มีความสามารถในการประมวลผลภาพที่น่าทึ่ง เราเข้าใจข้อมูลที่ซับซ้อนได้เร็วขึ้นเมื่อเรามองเห็นด้วยตาเปล่า เมื่อเปรียบเทียบกับอุปกรณ์ที่ใช้เสียงเท่านั้น อุปกรณ์ที่เน้นเสียงเป็นหลักจะช่วยให้ผู้ใช้เข้าถึงข้อมูลจำนวนมากขึ้นและทำให้งานหลายอย่างง่ายขึ้นมาก
Amazon Echo Show เป็นตัวอย่างสำคัญของอุปกรณ์ที่ใช้ระบบสั่งงานด้วยเสียง ข้อมูลภาพจะค่อย ๆ รวมเป็นส่วนหนึ่งของระบบแบบองค์รวม - หน้าจอไม่ได้โหลดด้วยไอคอนแอพ แต่ระบบสนับสนุนให้ผู้ใช้ลองใช้คำสั่งเสียงต่างๆ (แนะนำคำสั่งด้วยวาจาเช่น "ลอง 'Alexa แสดงสภาพอากาศเวลา 17.00 น.'") หน้าจอยังทำให้งานทั่วไป เช่น การตรวจสอบสูตรอาหารขณะทำอาหารง่ายขึ้นมาก ผู้ใช้ไม่จำเป็นต้องฟังอย่างระมัดระวังและเก็บข้อมูลทั้งหมดไว้ในหัว เมื่อพวกเขาต้องการข้อมูล พวกเขาเพียงแค่มองที่หน้าจอ

ขอแนะนำอินเทอร์เฟซหลายรูปแบบ
เมื่อพูดถึงการใช้เสียงในการออกแบบ UI อย่าคิดว่าเสียงเป็นสิ่งที่คุณสามารถใช้คนเดียวได้ อุปกรณ์ต่างๆ เช่น Amazon Echo Show มีหน้าจอแต่ใช้เสียงเป็นวิธีการป้อนข้อมูลหลัก ทำให้ประสบการณ์การใช้งานแบบองค์รวมมากขึ้น นี่เป็นก้าวแรกสู่อินเทอร์เฟซผู้ใช้รุ่นใหม่: อินเทอร์เฟซหลายรูปแบบ
อินเทอร์เฟซหลายรูปแบบคืออินเทอร์เฟซที่ผสมผสานเสียง สัมผัส เสียง และภาพประเภทต่างๆ เข้าด้วยกันใน UI เดียวที่ไร้รอยต่อ Amazon Echo Show เป็นตัวอย่างที่ยอดเยี่ยมของอุปกรณ์ที่ใช้ประโยชน์จากอินเทอร์เฟซหลายรูปแบบที่เปิดใช้งานเสียงได้อย่างเต็มที่ เมื่อผู้ใช้โต้ตอบกับ Show พวกเขาจะส่งคำขอเช่นเดียวกับที่ทำกับอุปกรณ์ที่ใช้เสียงเท่านั้น อย่างไรก็ตาม การตอบสนองที่พวกเขาได้รับมักจะเป็นหลายรูปแบบ ซึ่งประกอบด้วยการตอบสนองด้วยเสียงและภาพ
ผลิตภัณฑ์ต่อเนื่องหลายรูปแบบมีความซับซ้อนมากกว่าผลิตภัณฑ์ที่ต้องอาศัยเพียงภาพหรือเสียงเท่านั้น ทำไมทุกคนควรสร้างอินเทอร์เฟซหลายรูปแบบตั้งแต่แรก? เพื่อตอบคำถามนั้น เราต้องถอยออกมาและดูว่าผู้คนมองโลกในแง่ดีอย่างไร ผู้คนมีประสาทสัมผัสทั้งห้า และประสาทสัมผัสของเราทำงานร่วมกันเป็นวิธีที่เรารับรู้สิ่งต่างๆ ตัวอย่างเช่น ประสาทสัมผัสของเราทำงานร่วมกันเมื่อเราฟังเพลงในคอนเสิร์ตสด ลบความรู้สึกหนึ่ง (เช่น การได้ยิน) และประสบการณ์นั้นจะใช้บริบทที่แตกต่างไปจากเดิมอย่างสิ้นเชิง

นานเกินไปแล้วที่เราเคยคิดว่าประสบการณ์ของผู้ใช้นั้นเป็นเพียงการออกแบบด้วยภาพหรือท่าทางเท่านั้น ถึงเวลาที่จะเปลี่ยนความคิดนี้ การออกแบบต่อเนื่องหลายรูปแบบเป็นวิธีคิดและออกแบบประสบการณ์ที่เชื่อมโยงความสามารถทางประสาทสัมผัสของเราเข้าด้วยกัน
อินเทอร์เฟซหลายรูปแบบให้ความรู้สึกเหมือนมนุษย์มากขึ้นสำหรับผู้ใช้และเครื่องจักรในการสื่อสาร พวกเขาเปิดโอกาสใหม่สำหรับการโต้ตอบที่ลึกซึ้งยิ่งขึ้น และวันนี้ การออกแบบอินเทอร์เฟซแบบต่อเนื่องหลายรูปแบบทำได้ง่ายขึ้นมาก เนื่องจากข้อจำกัดทางเทคนิคที่เคยมีการโต้ตอบกับผลิตภัณฑ์ที่มีข้อจำกัดในอดีตกำลังถูกลบทิ้ง
ความแตกต่างระหว่าง GUI และอินเทอร์เฟซหลายรูปแบบ
ความแตกต่างที่สำคัญที่นี่คืออินเทอร์เฟซหลายรูปแบบเช่น Amazon Echo Show ซิงค์เสียงและอินเทอร์เฟซภาพ ด้วยเหตุนี้ เมื่อเราออกแบบประสบการณ์ เสียงและภาพจะไม่แยกจากกันอีกต่อไป สิ่งเหล่านี้เป็นส่วนสำคัญของประสบการณ์ที่ระบบมอบให้
ช่องภาพและเสียง: เมื่อใดควรใช้แต่ละช่อง
สิ่งสำคัญคือต้องคิดว่าเสียงและภาพเป็นช่องทางสำหรับอินพุตและเอาต์พุต แต่ละช่องมีจุดแข็งและจุดอ่อนของตัวเอง
เริ่มต้นด้วยภาพ เป็นที่ชัดเจนว่าข้อมูลบางอย่างเข้าใจได้ง่ายกว่าเมื่อเราเห็น มากกว่าเมื่อเราได้ยิน ภาพทำงานได้ดีขึ้นเมื่อคุณต้องจัดเตรียม:
- รายการตัวเลือกที่ยาว (การอ่านรายการยาวจะใช้เวลานานและติดตามได้ยาก)
- ข้อมูลที่มีข้อมูลจำนวนมาก (เช่น ไดอะแกรมและกราฟ)
- ข้อมูลสินค้า (เช่น สินค้าในร้านค้าออนไลน์ เป็นไปได้มากว่าคุณต้องการดูสินค้าก่อนซื้อ) และการเปรียบเทียบสินค้า (เช่นเดียวกับรายการตัวเลือกที่ยาวมาก จะให้ข้อมูลทั้งหมดโดยใช้เสียงอย่างเดียวได้ยาก) .
อย่างไรก็ตาม สำหรับข้อมูลบางอย่าง เราสามารถพึ่งพาการสื่อสารด้วยวาจาได้อย่างง่ายดาย เสียงอาจเหมาะสมกับกรณีต่อไปนี้:
- คำสั่งของผู้ใช้ (เสียงเป็นวิธีการป้อนข้อมูลที่มีประสิทธิภาพ ทำให้ผู้ใช้สามารถสั่งงานระบบได้อย่างรวดเร็วและเลี่ยงผ่านเมนูการนำทางที่ซับซ้อน)
- คำแนะนำผู้ใช้อย่างง่าย (เช่น การตรวจใบสั่งยาเป็นประจำ);
- คำเตือนและการแจ้งเตือน (เช่น เสียงเตือนที่จับคู่กับการแจ้งเตือนด้วยเสียงขณะขับรถ)
แม้ว่านี่จะเป็นกรณีทั่วไปสองสามกรณีของภาพและเสียงรวมกัน แต่สิ่งสำคัญคือต้องรู้ว่าเราไม่สามารถแยกทั้งสองออกจากกัน เราสามารถสร้างประสบการณ์การใช้งานที่ดีขึ้นได้ก็ต่อเมื่อทั้งเสียงและภาพทำงานร่วมกัน ตัวอย่างเช่น สมมติว่าเราต้องการซื้อรองเท้าคู่ใหม่ เราสามารถใช้เสียงเพื่อขอจากระบบ “แสดงรองเท้านิวบาลานซ์ให้ฉันดู” ระบบจะประมวลผลคำขอของคุณและให้ข้อมูลผลิตภัณฑ์เป็นภาพ (วิธีที่ง่ายกว่าสำหรับเราในการเปรียบเทียบรองเท้า)
สิ่งที่คุณต้องการรู้เพื่อออกแบบอินเทอร์เฟซต่อเนื่องหลายรูปแบบที่เปิดใช้งานด้วยเสียง
เสียงเป็นหนึ่งในความท้าทายที่น่าตื่นเต้นที่สุดสำหรับนักออกแบบ UX แม้จะมีความแปลกใหม่ แต่กฎพื้นฐานสำหรับการออกแบบอินเทอร์เฟซ multimodal ที่เปิดใช้งานด้วยเสียงก็เหมือนกับกฎที่เราใช้ในการสร้างการออกแบบภาพ นักออกแบบควรใส่ใจผู้ใช้ พวกเขาควรตั้งเป้าที่จะลดความขัดแย้งสำหรับผู้ใช้โดยการแก้ปัญหาของพวกเขาอย่างมีประสิทธิภาพและจัดลำดับความสำคัญของความชัดเจนเพื่อให้ตัวเลือกของผู้ใช้ชัดเจน
แต่มีหลักการออกแบบที่เป็นเอกลักษณ์บางประการสำหรับอินเทอร์เฟซหลายรูปแบบเช่นกัน
ตรวจสอบให้แน่ใจว่าคุณแก้ปัญหาได้ถูกต้อง
การออกแบบควรแก้ปัญหา แต่การแก้ปัญหาที่ถูกต้องเป็นสิ่งสำคัญ มิฉะนั้น คุณอาจใช้เวลามากในการสร้างประสบการณ์ที่ไม่สร้างคุณค่าให้กับผู้ใช้มากนัก ดังนั้น ตรวจสอบให้แน่ใจว่าคุณได้จดจ่ออยู่กับการแก้ปัญหาที่ถูกต้อง การโต้ตอบด้วยเสียงควรมีความสมเหตุสมผลต่อผู้ใช้ ผู้ใช้ควรมีเหตุผลที่น่าสนใจในการใช้เสียงแทนวิธีการโต้ตอบอื่นๆ (เช่น การคลิกหรือการแตะ) ด้วยเหตุนี้ เมื่อคุณสร้างผลิตภัณฑ์ใหม่ แม้กระทั่งก่อนเริ่มการออกแบบ จำเป็นต้องดำเนินการวิจัยผู้ใช้และพิจารณาว่าเสียงจะปรับปรุง UX ได้หรือไม่
เริ่มต้นด้วยการสร้างแผนที่การเดินทางของผู้ใช้ วิเคราะห์แผนที่การเดินทางและค้นหาสถานที่ที่รวมเสียงเป็นช่องทางจะเป็นประโยชน์ต่อ UX
- ค้นหาสถานที่ในการเดินทางที่ผู้ใช้อาจต้องเผชิญกับการเสียดสีและความคับข้องใจ การใช้เสียงจะช่วยลดแรงเสียดทานได้หรือไม่?
- คิดถึงบริบทของผู้ใช้ เสียงจะใช้ได้กับบริบทเฉพาะหรือไม่?
- ลองนึกถึงสิ่งที่เปิดใช้งานด้วยเสียงที่ไม่เหมือนใคร จดจำประโยชน์เฉพาะของการใช้เสียง เช่น การโต้ตอบแบบแฮนด์ฟรีและไม่ต้องใช้สายตา เสียงสามารถเพิ่มมูลค่าให้กับประสบการณ์ได้หรือไม่?
สร้างกระแสการสนทนา
ตามหลักการแล้ว อินเทอร์เฟซที่คุณออกแบบไม่ควรมีต้นทุนในการโต้ตอบ: ผู้ใช้ควรสามารถตอบสนองความต้องการได้โดยไม่ต้องใช้เวลาพิเศษในการเรียนรู้วิธีโต้ตอบกับระบบ สิ่งนี้จะเกิดขึ้นก็ต่อเมื่อการโต้ตอบด้วยเสียงคล้ายกับการสนทนาจริง ไม่ใช่กล่องโต้ตอบของระบบที่อยู่ในรูปแบบคำสั่งเสียง กฎพื้นฐานของ UI ที่ดีนั้นเรียบง่าย: คอมพิวเตอร์ควรปรับให้เข้ากับมนุษย์ ไม่ใช่ในทางกลับกัน
ผู้คนไม่ค่อยจะมีบทสนทนาที่ราบเรียบและเป็นเส้นตรง (การสนทนาที่ผ่านไปเพียงครั้งเดียว) ด้วยเหตุนี้ เพื่อให้การโต้ตอบกับระบบรู้สึกเหมือนเป็นการสนทนาสด นักออกแบบควรเน้นที่การสร้างกระแสการสนทนา โฟลว์การสนทนาแต่ละอันประกอบด้วยไดอะล็อก — เส้นทางที่เกิดขึ้นระหว่างระบบและผู้ใช้ กล่องโต้ตอบแต่ละรายการจะประกอบด้วยข้อความแจ้งของระบบและคำตอบที่เป็นไปได้ของผู้ใช้
ขั้นตอนการสนทนาสามารถนำเสนอในรูปแบบของแผนภาพขั้นตอน แต่ละโฟลว์ควรเน้นที่กรณีการใช้งานเฉพาะ (เช่น การตั้งนาฬิกาปลุกโดยใช้ระบบ) สำหรับไดอะล็อกส่วนใหญ่ในโฟลว์ การพิจารณาเส้นทางข้อผิดพลาดเป็นสิ่งสำคัญ เมื่อสิ่งต่าง ๆ หลุดออกจากราง
คำสั่งเสียงแต่ละคำสั่งของผู้ใช้ประกอบด้วยองค์ประกอบหลักสามประการ: เจตนา คำพูด และช่อง
- จุดประสงค์คือวัตถุประสงค์ของการโต้ตอบของผู้ใช้กับระบบที่เปิดใช้งานเสียง
เจตนาเป็นเพียงวิธีแฟนซีในการกำหนดจุดประสงค์เบื้องหลังชุดคำ การโต้ตอบกับระบบแต่ละครั้งจะทำให้ผู้ใช้ได้รับประโยชน์ ไม่ว่าจะเป็นข้อมูลหรือการกระทำ ยูทิลิตี้นี้มีเจตนา การทำความเข้าใจเจตนาของผู้ใช้เป็นส่วนสำคัญของอินเทอร์เฟซที่เปิดใช้งานด้วยเสียง เมื่อเราออกแบบ VUI เราไม่รู้เสมอไปว่าเจตนาของผู้ใช้คืออะไร แต่เราสามารถเดาได้อย่างแม่นยำ - คำพูดคือวิธีที่ผู้ใช้ใช้วลีคำขอของตน
โดยปกติ ผู้ใช้มีวิธีกำหนดคำสั่งเสียงมากกว่าหนึ่งวิธี ตัวอย่างเช่น เราสามารถตั้งนาฬิกาปลุกโดยพูดว่า "ตั้งนาฬิกาปลุกเป็น 8 โมงเช้า" หรือ "นาฬิกาปลุก 8 โมงเช้าพรุ่งนี้" หรือแม้แต่ "ฉันต้องตื่นตอน 8 โมงเช้า" นักออกแบบจำเป็นต้องพิจารณาทุกรูปแบบของคำพูดที่เป็นไปได้ - สล็อตเป็นตัวแปรที่ผู้ใช้ใช้ในคำสั่ง บางครั้งผู้ใช้จำเป็นต้องให้ข้อมูลเพิ่มเติมในคำขอ ในตัวอย่างนาฬิกาปลุกของเรา “8 โมงเช้า” เป็นช่องสัญญาณ
อย่าใส่คำในปากของผู้ใช้
คนรู้วิธีการพูดคุย อย่าพยายามสั่งสอนพวกเขา หลีกเลี่ยงวลีเช่น “หากต้องการส่งการนัดหมายในการประชุม คุณต้องพูดว่า 'ปฏิทิน การประชุม สร้างการประชุมใหม่'” หากคุณต้องอธิบายคำสั่ง คุณต้องพิจารณาวิธีการออกแบบระบบใหม่ ตั้งเป้าไว้สำหรับการสนทนาภาษาที่เป็นธรรมชาติเสมอ และพยายามปรับรูปแบบการพูดที่หลากหลาย)
มุ่งมั่นเพื่อความสม่ำเสมอ
คุณต้องมีความสอดคล้องกันในภาษาและเสียงในบริบทต่างๆ ความสม่ำเสมอจะช่วยสร้างความคุ้นเคยในการโต้ตอบ
ให้คำติชมเสมอ
การมองเห็นสถานะของระบบเป็นหนึ่งในหลักการพื้นฐานของการออกแบบ GUI ที่ดี ระบบควรแจ้งให้ผู้ใช้ทราบถึงสิ่งที่เกิดขึ้นผ่านข้อเสนอแนะที่เหมาะสมภายในเวลาที่เหมาะสม กฎเดียวกันนี้ใช้กับการออกแบบ VUI
- ทำให้ผู้ใช้ทราบว่าระบบกำลังฟังอยู่
แสดงตัวบ่งชี้ที่มองเห็นได้เมื่ออุปกรณ์กำลังฟังหรือประมวลผลคำขอของผู้ใช้ หากไม่มีคำติชม ผู้ใช้สามารถเดาได้ว่าระบบกำลังทำอะไรอยู่ นั่นเป็นเหตุผลที่แม้แต่อุปกรณ์ที่ใช้เสียงอย่างเดียว เช่น Amazon Echo และ Google Home ก็ให้การตอบรับด้วยภาพที่ดี (ไฟกะพริบ) เมื่อพวกเขากำลังฟังหรือค้นหาคำตอบ - จัดให้มีเครื่องหมายการสนทนา
เครื่องหมายการสนทนาจะบอกผู้ใช้ว่าพวกเขาอยู่ที่ใดในการสนทนา - ยืนยันเมื่องานเสร็จสิ้น
ตัวอย่างเช่น เมื่อผู้ใช้ถามระบบสมาร์ทโฮมที่สั่งงานด้วยเสียงว่า "ปิดไฟในโรงรถ" ระบบควรแจ้งให้ผู้ใช้ทราบว่าคำสั่งดำเนินการสำเร็จแล้ว หากไม่มีการยืนยัน ผู้ใช้จะต้องเดินเข้าไปในโรงรถและตรวจสอบไฟ มันผิดวัตถุประสงค์ของระบบบ้านอัจฉริยะซึ่งทำให้ชีวิตของผู้ใช้ง่ายขึ้น
หลีกเลี่ยงประโยคยาว
เมื่อออกแบบระบบที่เปิดใช้งานเสียง ให้พิจารณาวิธีที่คุณให้ข้อมูลแก่ผู้ใช้ มันค่อนข้างง่ายที่จะครอบงำผู้ใช้ด้วยข้อมูลมากเกินไปเมื่อคุณใช้ประโยคยาวๆ ประการแรก ผู้ใช้ไม่สามารถเก็บข้อมูลจำนวนมากไว้ในหน่วยความจำระยะสั้นได้ ดังนั้นพวกเขาจึงสามารถลืมข้อมูลสำคัญบางอย่างได้โดยง่าย นอกจากนี้ เสียงยังเป็นสื่อที่ช้า — คนส่วนใหญ่สามารถอ่านได้เร็วกว่าที่พวกเขาฟังได้มาก
เคารพเวลาของผู้ใช้ของคุณ อย่าอ่านคนเดียวที่มีเสียงยาว เมื่อคุณออกแบบคำตอบ ยิ่งใช้คำน้อยลงเท่าไหร่ก็ยิ่งดีเท่านั้น แต่จำไว้ว่าคุณยังคงต้องให้ข้อมูลเพียงพอสำหรับผู้ใช้เพื่อทำงานให้เสร็จ ดังนั้น หากคุณไม่สามารถสรุปคำตอบเป็นคำสองสามคำได้ ให้แสดงบนหน้าจอแทน
ให้ขั้นตอนต่อไปตามลำดับ
ผู้ใช้สามารถถูกครอบงำไม่เพียง แต่ประโยคยาว ๆ แต่ยังมีตัวเลือกมากมายในคราวเดียว จำเป็นต้องแบ่งกระบวนการโต้ตอบกับระบบที่เปิดใช้งานเสียงออกเป็นชิ้นๆ ขนาดพอดีคำเป็นสิ่งสำคัญ จำกัดจำนวนตัวเลือกที่ผู้ใช้มีในแต่ละครั้ง และทำให้แน่ใจว่าพวกเขารู้ว่าต้องทำอะไรทุกขณะ

เมื่อออกแบบระบบสั่งงานด้วยเสียงที่ซับซ้อนพร้อมคุณสมบัติมากมาย คุณสามารถใช้เทคนิคการเปิดเผยข้อมูลแบบก้าวหน้า: นำเสนอเฉพาะตัวเลือกหรือข้อมูลที่จำเป็นเพื่อให้งานเสร็จสมบูรณ์
มีกลยุทธ์การจัดการข้อผิดพลาดที่แข็งแกร่ง
แน่นอนว่าระบบควรป้องกันไม่ให้เกิดข้อผิดพลาดตั้งแต่แรก แต่ไม่ว่าระบบที่ใช้เสียงของคุณจะดีแค่ไหน คุณควรออกแบบสำหรับสถานการณ์ที่ระบบไม่เข้าใจผู้ใช้เสมอ ความรับผิดชอบของคุณคือการออกแบบสำหรับกรณีดังกล่าว
ต่อไปนี้คือเคล็ดลับที่เป็นประโยชน์บางประการสำหรับการสร้างกลยุทธ์:
- อย่าโทษผู้ใช้
ในการสนทนาไม่มีข้อผิดพลาด พยายามหลีกเลี่ยงการตอบกลับเช่น “คำตอบของคุณไม่ถูกต้อง” - จัดเตรียมโฟลว์การกู้คืนข้อผิดพลาด
ให้ตัวเลือกสำหรับการกลับไปกลับมาในการสนทนา หรือแม้แต่ออกจากระบบ โดยไม่สูญเสียข้อมูลสำคัญ บันทึกสถานะของผู้ใช้ในการเดินทาง เพื่อให้พวกเขาสามารถมีส่วนร่วมกับระบบอีกครั้งจากจุดที่ค้างไว้ - ให้ผู้ใช้เล่นข้อมูลซ้ำ
ให้ตัวเลือกเพื่อให้ระบบทวนคำถามหรือคำตอบ นี้อาจเป็นประโยชน์สำหรับคำถามที่ซับซ้อนหรือคำตอบที่ยากสำหรับผู้ใช้ที่จะส่งข้อมูลทั้งหมดไปยังหน่วยความจำในการทำงานของพวกเขา - ให้หยุดถ้อยคำ
ในบางกรณี ผู้ใช้จะไม่สนใจฟังตัวเลือก และจะต้องการให้ระบบหยุดพูดถึงมัน หยุดใช้ถ้อยคำควรช่วยให้พวกเขาทำอย่างนั้นได้ - จัดการกับคำพูดที่ไม่คาดคิดอย่างสง่างาม
ต่อให้ลงทุนกับการออกแบบระบบมากแค่ไหน ก็จะมีสถานการณ์ที่ระบบไม่เข้าใจผู้ใช้ การจัดการกรณีดังกล่าวอย่างสง่างามเป็นสิ่งสำคัญ อย่ากลัวที่จะปล่อยให้ระบบยอมรับว่าขาดความเข้าใจ ระบบควรสื่อสารสิ่งที่เข้าใจและให้การตอบโต้ที่เป็นประโยชน์ - ใช้การวิเคราะห์เพื่อปรับปรุงกลยุทธ์ข้อผิดพลาดของคุณ
Analytics สามารถช่วยคุณระบุการเลี้ยวที่ผิดและการตีความที่ผิด
ติดตามบริบท
ตรวจสอบให้แน่ใจว่าระบบเข้าใจบริบทของการป้อนข้อมูลของผู้ใช้ ตัวอย่างเช่น เมื่อมีคนบอกว่าพวกเขาต้องการจองเที่ยวบินไปซานฟรานซิสโกในสัปดาห์หน้า พวกเขาอาจหมายถึง "มัน" หรือ "เมือง" ในระหว่างขั้นตอนการสนทนา ระบบควรจำสิ่งที่พูดและสามารถจับคู่กับข้อมูลที่ได้รับใหม่ได้
เรียนรู้เกี่ยวกับผู้ใช้ของคุณเพื่อสร้างการโต้ตอบที่มีประสิทธิภาพมากขึ้น
ระบบที่เปิดใช้งานเสียงจะซับซ้อนมากขึ้นเมื่อใช้ข้อมูลเพิ่มเติม (เช่น บริบทของผู้ใช้หรือพฤติกรรมในอดีต) เพื่อทำความเข้าใจว่าผู้ใช้ต้องการอะไร เทคนิคนี้เรียกว่าการตีความอย่างชาญฉลาด และต้องการให้ระบบเรียนรู้เกี่ยวกับผู้ใช้อย่างจริงจังและสามารถปรับพฤติกรรมได้ ความรู้นี้จะช่วยให้ระบบตอบคำถามที่ซับซ้อนได้ เช่น "ฉันควรซื้อของขวัญอะไรให้วันเกิดภรรยาดี"
ให้บุคลิกภาพ VUI ของคุณ
ระบบที่เปิดใช้งานเสียงทุกระบบมีผลกระทบทางอารมณ์ต่อผู้ใช้ ไม่ว่าคุณจะวางแผนไว้หรือไม่ก็ตาม ผู้คนเชื่อมโยงเสียงกับมนุษย์มากกว่าเครื่องจักร จากการวิจัยของ Speak Easy Global Edition พบว่า 74% ของผู้ใช้เทคโนโลยีเสียงปกติคาดหวังว่าแบรนด์ต่างๆ จะมีเสียงพูดและบุคลิกเฉพาะตัวสำหรับผลิตภัณฑ์ที่ใช้เสียงพูดได้ เป็นไปได้ที่จะสร้างความเห็นอกเห็นใจผ่านบุคลิกภาพและบรรลุการมีส่วนร่วมของผู้ใช้ในระดับที่สูงขึ้น
พยายามสะท้อนถึงแบรนด์และเอกลักษณ์เฉพาะของคุณในเสียงและน้ำเสียงที่คุณนำเสนอ สร้างบุคลิกของตัวแทนที่เปิดใช้งานเสียงของคุณ และพึ่งพาบุคคลนี้เมื่อสร้างกล่องโต้ตอบ
สร้างความไว้วางใจ
เมื่อผู้ใช้ไม่เชื่อถือระบบ พวกเขาไม่มีแรงจูงใจที่จะใช้ระบบ นั่นคือเหตุผลที่การสร้างความไว้วางใจเป็นข้อกำหนดของการออกแบบผลิตภัณฑ์ ปัจจัยสองประการมีผลกระทบอย่างมีนัยสำคัญต่อระดับของความไว้วางใจที่สร้างขึ้น: ความสามารถของระบบและผลลัพธ์ที่ถูกต้อง
การสร้างความไว้วางใจเริ่มต้นด้วยการกำหนดความคาดหวังของผู้ใช้ GUI แบบดั้งเดิมมีรายละเอียดภาพจำนวนมากเพื่อช่วยให้ผู้ใช้เข้าใจว่าระบบมีความสามารถอะไร ด้วยระบบสั่งงานด้วยเสียง นักออกแบบมีเครื่องมือให้พึ่งพาน้อยลง ยังคงเป็นสิ่งสำคัญที่จะทำให้ระบบสามารถค้นพบได้ตามธรรมชาติ ผู้ใช้ควรเข้าใจว่าระบบคืออะไรและเป็นไปไม่ได้ นั่นเป็นสาเหตุที่ระบบที่เปิดใช้งานด้วยเสียงอาจต้องการให้ผู้ใช้เริ่มต้นใช้งาน โดยจะพูดถึงสิ่งที่ระบบสามารถทำได้หรือสิ่งที่รู้ เมื่อออกแบบการเริ่มต้นใช้งาน พยายามเสนอตัวอย่างที่มีความหมายเพื่อให้ผู้คนรู้ว่าสามารถทำอะไรได้บ้าง (ตัวอย่างทำงานได้ดีกว่าคำแนะนำ)
เมื่อพูดถึงผลลัพธ์ที่ถูกต้อง ผู้คนทราบดีว่าระบบที่ใช้เสียงพูดนั้นไม่สมบูรณ์แบบ เมื่อระบบให้คำตอบ ผู้ใช้บางคนอาจสงสัยว่าคำตอบนั้นถูกต้อง สิ่งนี้เกิดขึ้นเนื่องจากผู้ใช้ไม่มีข้อมูลใดๆ ว่าคำขอของตนเข้าใจถูกต้องหรือไม่ หรือใช้อัลกอริทึมใดในการค้นหาคำตอบ เพื่อป้องกันปัญหาความน่าเชื่อถือ ใช้หน้าจอสำหรับหลักฐานสนับสนุน แสดงคำถามเดิมบนหน้าจอ และให้ข้อมูลสำคัญเกี่ยวกับอัลกอริทึม ตัวอย่างเช่น เมื่อผู้ใช้ถามว่า “แสดงภาพยนตร์ 5 อันดับแรกของปี 2018” ระบบสามารถพูดว่า “นี่คือภาพยนตร์ 5 อันดับแรกของปี 2018 ตามบ็อกซ์ออฟฟิศในสหรัฐอเมริกา”
อย่าละเลยความปลอดภัยและความเป็นส่วนตัวของข้อมูล
อุปกรณ์เสียงต่างจากอุปกรณ์พกพาที่เป็นของแต่ละคน อุปกรณ์เสียงมักจะเป็นของสถานที่ เช่น ห้องครัว และโดยปกติแล้วจะมีคนมากกว่าหนึ่งคนอยู่ในสถานที่เดียวกัน ลองนึกภาพว่ามีคนอื่นสามารถโต้ตอบกับระบบที่สามารถเข้าถึงข้อมูลส่วนบุคคลของคุณทั้งหมดได้ ระบบ VUI บางระบบ เช่น Amazon Alexa, Google Assistant และ Apple Siri สามารถจดจำเสียงแต่ละเสียงได้ ซึ่งเพิ่มระดับการรักษาความปลอดภัยให้กับระบบ ถึงกระนั้นก็ไม่รับประกันว่าระบบจะสามารถจดจำผู้ใช้ตามลายเซ็นเสียงที่เป็นเอกลักษณ์ของพวกเขาได้ 100% ของกรณี
การจดจำเสียงมีการปรับปรุงอย่างต่อเนื่อง และในอนาคตอันใกล้จะยากหรือแทบจะเป็นไปไม่ได้เลยที่จะเลียนแบบเสียง อย่างไรก็ตาม ในความเป็นจริงในปัจจุบัน จำเป็นต้องมีชั้นการตรวจสอบสิทธิ์เพิ่มเติมเพื่อสร้างความมั่นใจให้กับผู้ใช้ว่าข้อมูลของพวกเขาปลอดภัย หากคุณออกแบบแอปที่ทำงานร่วมกับข้อมูลที่ละเอียดอ่อน เช่น ข้อมูลด้านสุขภาพหรือรายละเอียดธนาคาร คุณอาจต้องการเพิ่มขั้นตอนการตรวจสอบสิทธิ์เพิ่มเติม เช่น รหัสผ่านหรือลายนิ้วมือ หรือการจดจำใบหน้า
ดำเนินการทดสอบการใช้งาน
การทดสอบการใช้งานเป็นข้อกำหนดบังคับสำหรับระบบใดๆ ทดสอบแต่เนิ่นๆ การทดสอบบ่อยครั้งควรเป็นกฎพื้นฐานของกระบวนการออกแบบของคุณ รวบรวมข้อมูลการวิจัยผู้ใช้ตั้งแต่เนิ่นๆ และทำซ้ำการออกแบบของคุณ แต่การทดสอบอินเทอร์เฟซหลายรูปแบบมีลักษณะเฉพาะของตัวเอง ต่อไปนี้คือสองขั้นตอนที่ควรนำมาพิจารณา:
- ระยะความคิด
ทดลองขับไดอะล็อกตัวอย่างของคุณ ฝึกอ่านบทสนทนาตัวอย่างออกมาดังๆ เมื่อคุณมีขั้นตอนการสนทนาแล้ว ให้บันทึกการสนทนาทั้งสองด้าน (คำพูดของผู้ใช้และการตอบสนองของระบบ) และฟังการบันทึกเพื่อทำความเข้าใจว่าฟังดูเป็นธรรมชาติหรือไม่ - ระยะเริ่มต้นของการพัฒนาผลิตภัณฑ์ (การทดสอบกับต้นแบบ lo-fi)
การทดสอบ Wizard of Oz เหมาะสมกับการทดสอบอินเทอร์เฟซการสนทนา การทดสอบ Wizard of Oz เป็นการทดสอบประเภทหนึ่งที่ผู้เข้าร่วมโต้ตอบกับระบบที่พวกเขาเชื่อว่าดำเนินการโดยคอมพิวเตอร์ แต่ที่จริงแล้วดำเนินการโดยมนุษย์ ผู้เข้าร่วมการทดสอบจะกำหนดข้อความค้นหา และบุคคลจริงจะตอบกลับในอีกด้านหนึ่ง วิธีนี้ได้ชื่อมาจากหนังสือ The Wonderful Wizard of Oz ของ Frank Baum ในหนังสือ ชายธรรมดาคนหนึ่งซ่อนตัวอยู่หลังม่าน โดยแสร้งทำเป็นเป็นพ่อมดผู้ทรงพลัง การทดสอบนี้ทำให้คุณสามารถแมปทุกสถานการณ์ที่เป็นไปได้ของการโต้ตอบ และทำให้สร้างปฏิสัมพันธ์ที่เป็นธรรมชาติมากขึ้น Say Wizard เป็นเครื่องมือที่ยอดเยี่ยมที่จะช่วยคุณเรียกใช้การทดสอบอินเทอร์เฟซเสียงของ Wizard of Oz บน macOS - ระยะหลังของการพัฒนาผลิตภัณฑ์ (การทดสอบด้วยเครื่องต้นแบบไฮไฟ)
ในการทดสอบการใช้งานอินเทอร์เฟซผู้ใช้แบบกราฟิก เรามักจะขอให้ผู้ใช้พูดออกมาดัง ๆ เมื่อโต้ตอบกับระบบ สำหรับระบบที่เปิดใช้งานด้วยเสียง นั่นไม่สามารถทำได้เสมอไปเพราะระบบจะฟังคำบรรยายนั้นอยู่ ดังนั้น อาจเป็นการดีกว่าที่จะสังเกตการโต้ตอบของผู้ใช้กับระบบ แทนที่จะขอให้พวกเขาพูดออกมาดัง ๆ
วิธีสร้างอินเทอร์เฟซหลายรูปแบบโดยใช้ Adobe XD
ตอนนี้ คุณมีความเข้าใจอย่างถ่องแท้ว่าอินเทอร์เฟซหลายรูปแบบคืออะไรและต้องจำกฎเกณฑ์ใดเมื่อออกแบบอินเทอร์เฟซเหล่านี้ เราสามารถหารือถึงวิธีสร้างต้นแบบของอินเทอร์เฟซหลายรูปแบบ
การสร้างต้นแบบเป็นส่วนพื้นฐานของกระบวนการออกแบบ ความสามารถในการทำให้ความคิดเป็นจริงและแบ่งปันกับผู้อื่นเป็นสิ่งสำคัญอย่างยิ่ง จนถึงปัจจุบัน นักออกแบบที่ต้องการนำเสียงไปใช้ในการสร้างต้นแบบมีเครื่องมือไม่กี่อย่างที่ต้องพึ่งพา ซึ่งมีประสิทธิภาพมากที่สุดคือผังงาน การนึกภาพว่าผู้ใช้โต้ตอบกับระบบอย่างไรนั้นต้องใช้จินตนาการอย่างมากจากคนที่กำลังดูผังงาน ด้วย Adobe XD นักออกแบบสามารถเข้าถึงสื่อเสียงและใช้ในต้นแบบได้ XD เชื่อมต่อหน้าจอและการสร้างต้นแบบเสียงอย่างราบรื่นในแอปเดียว
ประสบการณ์ใหม่ กระบวนการเดียวกัน
แม้ว่าเสียงจะเป็นสื่อที่แตกต่างจากภาพโดยสิ้นเชิง แต่กระบวนการสร้างต้นแบบสำหรับเสียงใน Adobe XD ก็ค่อนข้างเหมือนกับการสร้างต้นแบบสำหรับ GUI ทีมงาน Adobe XD ผสานรวมเสียงในลักษณะที่เป็นธรรมชาติและเป็นธรรมชาติสำหรับนักออกแบบทุกคน นักออกแบบสามารถใช้ทริกเกอร์เสียงและการเล่นเสียงพูดเพื่อโต้ตอบกับต้นแบบได้:
- ทริกเกอร์เสียงเริ่มต้นการโต้ตอบเมื่อผู้ใช้พูดคำหรือวลีเฉพาะ (คำพูด)
- การเล่นเสียงพูดช่วยให้นักออกแบบสามารถเข้าถึงเครื่องมือแปลงข้อความเป็นคำพูดได้ XD จะพูดคำและประโยคที่กำหนดโดยนักออกแบบ การเล่นเสียงพูดสามารถนำไปใช้เพื่อวัตถุประสงค์ต่างๆ ได้มากมาย ตัวอย่างเช่น สามารถทำหน้าที่เป็นการรับทราบ (เพื่อสร้างความมั่นใจให้กับผู้ใช้) หรือเป็นแนวทาง (เพื่อให้ผู้ใช้รู้ว่าต้องทำอะไรต่อไป)
สิ่งที่ยอดเยี่ยมเกี่ยวกับ XD ก็คือ มันไม่ได้บังคับให้คุณเรียนรู้ความซับซ้อนของแพลตฟอร์มเสียงแต่ละอัน
คำพูดที่เพียงพอ — เรามาดูกันว่ามันทำงานอย่างไร สำหรับตัวอย่างทั้งหมดที่คุณจะเห็นด้านล่าง ฉันใช้อาร์ตบอร์ดที่สร้างโดยใช้ชุดเครื่องมือ Adobe XD UI สำหรับ Amazon Alexa (นี่คือลิงก์สำหรับดาวน์โหลดชุดอุปกรณ์) ชุดนี้มีสไตล์และส่วนประกอบทั้งหมดที่จำเป็นในการสร้างประสบการณ์สำหรับ Amazon Alexa
สมมติว่าเรามีอาร์ตบอร์ดดังต่อไปนี้:

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

เมื่อเราทำเช่นนั้น เราจะพบตัวเลือก "เสียง" ใหม่ภายใต้ "ทริกเกอร์" เมื่อเราเลือกตัวเลือกนี้ เราจะเห็นช่อง "คำสั่ง" ที่เราสามารถใช้เพื่อป้อนคำพูด นี่คือสิ่งที่ XD ตั้งใจฟังจริงๆ ผู้ใช้จะต้องพูดคำสั่งนี้เพื่อเปิดใช้งานทริกเกอร์

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

เราพร้อมที่จะทดสอบต้นแบบของเราแล้ว เลือกอาร์ตบอร์ดแรก และคลิกปุ่มเล่นที่ด้านบนขวาเพื่อเปิดหน้าต่างแสดงตัวอย่าง เมื่อโต้ตอบกับการสร้างต้นแบบเสียง ตรวจสอบให้แน่ใจว่าไมค์ของคุณเปิดอยู่ จากนั้น กดแป้นเว้นวรรคค้างไว้เพื่อพูดคำสั่งเสียง อินพุตนี้จะทริกเกอร์การดำเนินการถัดไปในต้นแบบ
ใช้แอนิเมชั่นอัตโนมัติเพื่อทำให้ประสบการณ์มีไดนามิกมากขึ้น
แอนิเมชั่นนำประโยชน์มากมายมาสู่การออกแบบ UI มีไว้เพื่อวัตถุประสงค์ในการทำงานที่ชัดเจน เช่น:
- การสื่อสารความสัมพันธ์เชิงพื้นที่ระหว่างวัตถุ (วัตถุมาจากไหน วัตถุเหล่านั้นเกี่ยวข้องกันหรือไม่);
- การสื่อสารเงิน (ฉันจะทำอะไรต่อไป?)
แต่จุดประสงค์ในการใช้งานไม่ใช่ข้อดีเพียงอย่างเดียวของแอนิเมชั่น แอนิเมชั่นยังทำให้ประสบการณ์มีชีวิตชีวาและมีชีวิตชีวามากขึ้น นั่นเป็นเหตุผลที่แอนิเมชั่น UI ควรเป็นส่วนหนึ่งของอินเทอร์เฟซหลายรูปแบบ
ด้วย "Auto-Animate" ใน Adobe XD การสร้างต้นแบบด้วยการเปลี่ยนภาพเคลื่อนไหวที่สมจริงจะง่ายขึ้นมาก Adobe XD ทำงานหนักทั้งหมดให้กับคุณ ดังนั้นคุณจึงไม่ต้องกังวลกับมัน สิ่งที่คุณต้องทำเพื่อสร้างทรานซิชันแบบเคลื่อนไหวระหว่างอาร์ตบอร์ดทั้งสองคือเพียงแค่ทำซ้ำอาร์ตบอร์ด แก้ไขคุณสมบัติของออบเจกต์ในโคลน (คุณสมบัติ เช่น ขนาด ตำแหน่ง และการหมุน) และใช้การกระทำอัตโนมัติ XD จะทำให้คุณสมบัติต่างๆ ของอาร์ตบอร์ดเคลื่อนไหวโดยอัตโนมัติ
เรามาดูกันว่ามันทำงานอย่างไรในการออกแบบของเรา สมมติว่าเรามีรายการซื้อของใน Amazon Echo Show และต้องการเพิ่มวัตถุใหม่ในรายการโดยใช้เสียง ทำซ้ำอาร์ตบอร์ดต่อไปนี้:

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

เมื่อคุณต่ออาร์ตบอร์ด 2 อันเข้าด้วยกันในโหมดต้นแบบโดยใช้ Auto-Animate ใน "Action" XD จะทำให้ความแตกต่างของคุณสมบัติระหว่างอาร์ตบอร์ดแต่ละอันเคลื่อนไหวโดยอัตโนมัติ

และนี่คือลักษณะของการโต้ตอบสำหรับผู้ใช้:

สิ่งสำคัญอย่างหนึ่งที่ต้องกล่าวถึง: ทำให้ชื่อของเลเยอร์ทั้งหมดเหมือนกัน มิฉะนั้น Adobe XD จะไม่สามารถใช้ภาพเคลื่อนไหวอัตโนมัติได้
บทสรุป
เรากำลังอยู่ในช่วงเริ่มต้นของการปฏิวัติอินเทอร์เฟซผู้ใช้ อินเทอร์เฟซรุ่นใหม่ — อินเทอร์เฟซหลายรูปแบบ — ไม่เพียงแต่จะช่วยให้ผู้ใช้มีอำนาจมากขึ้น แต่ยังจะเปลี่ยนวิธีที่ผู้ใช้โต้ตอบกับระบบ We will probably still have displays, but we won't need keyboards to interact with the systems.
At the same time, the fundamental requirements for designing multimodal interfaces won't be much different from those of designing modern interfaces. Designers will need to keep the interaction simple; focus on the user and their needs; design, prototype, test and iterate.
And the great thing is that you don't need to wait to start designing for this new generation of interfaces. You can start today.
บทความนี้เป็นส่วนหนึ่งของชุดการออกแบบ UX ที่สนับสนุนโดย Adobe เครื่องมือ Adobe XD สร้างขึ้นสำหรับกระบวนการออกแบบ UX ที่รวดเร็วและลื่นไหล เนื่องจากช่วยให้คุณเปลี่ยนจากแนวคิดไปสู่การสร้างต้นแบบได้เร็วยิ่งขึ้น ออกแบบ สร้างต้นแบบ และแชร์ ทั้งหมดในแอปเดียว คุณสามารถดูโปรเจ็กต์ที่สร้างแรงบันดาลใจอื่นๆ ที่สร้างด้วย Adobe XD บน Behance และสมัครรับจดหมายข่าวการออกแบบประสบการณ์ของ Adobe เพื่อรับทราบข้อมูลล่าสุดและรับทราบเกี่ยวกับแนวโน้มล่าสุดและข้อมูลเชิงลึกสำหรับการออกแบบ UX/UI