การออกแบบปฏิสัมพันธ์อย่างมีจุดมุ่งหมาย

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

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

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

หลักการสำคัญสี่ประการของการออกแบบปฏิสัมพันธ์ที่มีความหมาย

1.หลีกเลี่ยงการสร้างอุปสรรค

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

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

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

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

2. จับคู่การเคลื่อนไหวกับข้อความ

หาก Apple ตัดสินใจว่าการโต้ตอบทั้งหมดของพวกเขาบน iOS จะรวดเร็ว คมชัด ต่อหน้าคุณ และทำสิ่งต่างๆ มากมาย คุณจะรู้สึกเหมือนกับว่าคุณกำลังใช้ผลิตภัณฑ์ของ Apple หรือไม่ หากคุณกำลังใช้แอพ Alton Towers และเห็นแอนิเมชั่นที่ค่อยๆ ซีดจางและการเปลี่ยนผ่านสไตล์ Ken Burns มากมาย คุณจะรู้สึกเหมือนเป็นสถานที่มหัศจรรย์แห่งความสนุกสนานและน่าตื่นเต้น หรือโฆษณาทางทีวีของ M&S

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

3. ให้มันมีวัตถุประสงค์

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

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

4. ทำให้มองไม่เห็น

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

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

ความท้าทายในการออกแบบ 6 ประการที่การออกแบบการโต้ตอบสามารถแก้ไขได้

1. การวางแนวและบริบท

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

ต่อไปนี้คือตัวอย่างสองสามตัวอย่างในการสร้างบริบทโดยใช้การโต้ตอบ:

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

2. การแสดงเหตุและผล

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

3. ให้ข้อเสนอแนะ

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

4. เน้นข้อมูลสำคัญ

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

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

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

5. สร้างการรับรู้ถึงประสิทธิภาพ

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

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

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

6. การเพิ่มบุคลิกของแบรนด์

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

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

แนะนำการโต้ตอบในกระบวนการออกแบบของคุณ

ภาพสเก็ตช์และความเที่ยงตรงต่ำ

เครื่องมือออกแบบปฏิสัมพันธ์

• ประเด็นสำคัญ: หากคุณกำลังมองหาแนวคิดที่หยาบและเรียบง่ายในการทำความเข้าใจ Keynote คือชัยชนะที่รวดเร็ว
• Adobe Animate: เก็บข้อมูลทั้งหมดไว้ใน Adobe และทำงานร่วมกับเครื่องมืออื่นๆ ได้อย่างราบรื่น เหมาะอย่างยิ่งสำหรับแอนิเมชั่นภาพประกอบ
• Tumult Hype: หากคุณคุ้นเคยกับอินเทอร์เฟซของ Sketch และรู้วิธีรอบไทม์ไลน์ของคุณ คุณจะรู้สึกเหมือนอยู่บ้านด้วย Tumult
• Framer: นี่คือเครื่องมือออกแบบการโต้ตอบที่สร้างขึ้นตามวัตถุประสงค์ ซึ่งมีความสามารถขั้นสูงจริงๆ ในการจับคู่แอนิเมชันของคุณกับ JavaScript
• หลักการ: ด้วยการเชื่อมโยง Sketch ที่ดี หลักการจะกลายเป็นส่วนสำคัญสำหรับการโต้ตอบ การเรียนรู้นั้นค่อนข้างง่าย และสิ่งที่คุณทำได้นั้นยอดเยี่ยมมาก
• Atomic: เพิ่มข้อมูล ตรรกะ และตัวแปรเพื่อทำให้การโต้ตอบของคุณใช้งานได้จริงเหมือนกับการสร้างขั้นสุดท้าย นี่สำหรับนักออกแบบขั้นสูงที่มีความรู้ด้านการเขียนโค้ดอยู่บ้าง
• Invision Studio: ยังเพิ่งเริ่มต้น แต่ Invision Studio มีความสามารถและความคล้ายคลึงกับหลักการที่ยอดเยี่ยม เวลาจะบอกได้ว่าสิ่งนี้จะก้าวหน้าพอที่จะครองตลาดการสร้างต้นแบบและการทำงานร่วมกันหรือไม่

บันทึกการส่งมอบโดยละเอียด

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

รวบรวมคลังการสาธิตและแรงบันดาลใจ

เพิ่มลงในระบบการออกแบบของคุณ

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

หากต้องการความช่วยเหลือเกี่ยวกับการออกแบบเว็บและประสบการณ์ผู้ใช้ (UX) โปรดติดต่อเราวันนี้

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