สำรวจการออกแบบหลายรูปแบบ – บทช่วยสอน Adobe XD

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

การใช้โหมดการโต้ตอบหลายแบบเป็นสิ่งที่ การออกแบบต่อเนื่องหลายรูปแบบ มีพื้นฐานมาจาก

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

คอมพิวเตอร์-มนุษย์ Modalities

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

กิริยาระหว่างมนุษย์กับคอมพิวเตอร์

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

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

ทำไมต้องออกแบบต่อเนื่องหลายรูปแบบ

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

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

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

ต่อไปนี้คือตัวอย่างเพิ่มเติมบางส่วนที่เรามักพบในการออกแบบหลายรูปแบบ:

• ส่วนต่อประสานกราฟิกกับผู้ใช้อาศัยวิสัยทัศน์ของเราในการโต้ตอบ เช่น กับเว็บไซต์หรือป้ายโฆษณาดิจิทัล
• อินเทอร์เฟซผู้ใช้แบบเสียงขึ้นอยู่กับความสามารถในการโต้ตอบของเราในการได้ยิน ซึ่งรวมถึงระบบสั่งงานด้วยเสียง เช่น Alexa, Google Assistant หรือ Siri
• การสัมผัส ท่าทาง และการเคลื่อนไหวขึ้นอยู่กับการรับรู้ของเราเกี่ยวกับการสัมผัส (ความสามารถในการสัมผัส) เพื่อกระตุ้นการโต้ตอบ การรับข้อความหรือการปัดไปทางซ้ายเพื่อข้ามเพลงเป็นสองตัวอย่าง

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

ตัวอย่างการออกแบบหลายรูปแบบอย่างง่าย: SmartHome

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

ต่อไป Robert สามารถใช้รีโมทคอนโทรลหรือขอให้ผู้ช่วยที่เปิดใช้งาน AI ลดความร้อนลงเมื่อเขาเดินเข้าไป

ประสบการณ์การออกแบบหลายรูปแบบที่ซับซ้อน: สุขภาพ

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

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

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

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

การสร้างต้นแบบประสบการณ์หลายรูปแบบใน Adobe XD

Adobe XD ซึ่งเป็นเครื่องมือออกแบบ UX ยอดนิยม เพิ่งเพิ่มคำสั่งเสียงและการเล่นให้กับฟีเจอร์ต่างๆ ด้วยการใช้ประโยชน์จากสิ่งเหล่านี้ เราสามารถเพิ่มรูปแบบต่างๆ เช่น การพูดและการเล่นเสียง เพื่อสร้างประสบการณ์ผู้ใช้หลายรูปแบบ

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

ขั้นแรกเราจะสร้างหน้าจอต้นแบบทั้งหมดที่จำเป็นเพื่อแสดงประสบการณ์:

คลิกเพื่อดูภาพขนาดเต็ม

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

คลิกเพื่อดูภาพขนาดเต็ม

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

คลิกเพื่อดูภาพขนาดเต็ม

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

คลิกเพื่อดูภาพขนาดเต็ม

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

คลิกเพื่อดูภาพขนาดเต็ม

เพื่อให้วิดีโอดำเนินต่อไป เราจะทำสิ่งเดียวกันโดยเพิ่มคำสั่งเสียง “ก้อง ดำเนินการต่อ”

คลิกเพื่อดูภาพขนาดเต็ม

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

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

การออกแบบต่อเนื่องหลายรูปแบบและแบบจำลองทางจิต

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

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

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

รูปแบบที่เกิดขึ้นใหม่: การออกแบบการสนทนา

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

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

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

ตัวอย่างที่ดีคือ Lily จาก Maybe บอทที่สอนภาษาจีน (และภาษาอื่นๆ) ให้คุณ และทำงานในช่องต่างๆ การสนทนาสามารถทำได้ในแอปหรือโดยการพูดคุยกับบอท

สรุป

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

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

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

• • •

อ่านเพิ่มเติมเกี่ยวกับบล็อก Toptal Design:

• การออกแบบที่มีความแม่นยำ – Adobe XD Review
• สำรวจเหตุผลในการวิจารณ์การคิดเชิงออกแบบ
• Chatbot UX – เคล็ดลับและข้อควรพิจารณาในการออกแบบ
• The Chat Crash – เมื่อ Chatbot ล้มเหลว
• ความสำคัญของการออกแบบที่เน้นมนุษย์เป็นศูนย์กลางในการออกแบบผลิตภัณฑ์