UX ที่ดีขึ้นผ่าน Microinteractions

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

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

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

ประโยชน์ของไมโครอินเทอร์แอคชัน

Microinteractions และแอนิเมชั่น UI มีความสำคัญอย่างยิ่งที่พวกเขาสามารถสร้างหรือทำลายการออกแบบ—หรืออย่างที่ Charles Eames ของการออกแบบเฟอร์นิเจอร์และชื่อเสียงด้านสถาปัตยกรรมกล่าวว่า:

รายละเอียดไม่ใช่รายละเอียด พวกเขาทำการออกแบบ

ประโยชน์หลักบางประการของการผสมผสานไมโครอินเทอร์แอกชันในผลิตภัณฑ์ ได้แก่:

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

แนวทางปฏิบัติที่ดีที่สุดสำหรับการออกแบบไมโครอินเทอร์แอกชัน

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

ระบุและทำความเข้าใจปัญหาของผู้ใช้

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

ให้ Microinteractions เป็นธรรมชาติ

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

ทดสอบและทำซ้ำสิ่งที่ค้นพบจากการทดสอบของผู้ใช้

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

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

ทำตามโครงสร้างของไมโครอินเทอร์แอคชัน

ตามที่ Dan Saffer นักออกแบบผลิตภัณฑ์อาวุโสของ Twitter และผู้แต่ง “Microinteractions: Designing with Details” มีไมโครอินเทอร์แอกชันสี่ส่วน

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

การถอดรหัสการออกแบบไมโครอินเทอร์แอกทีฟ

เพื่อแสดงกระบวนการคิดที่อยู่เบื้องหลังการออกแบบไมโครอินเทอร์แอกชัน เรามาแยกแยะไมโครอินเทอร์แอกชันโดย Google: ชื่อไฟล์แนะนำไมโครอินเทอร์แอกชันใน Google เอกสาร

microinteraction นี้ใช้บรรทัดแรกของเอกสารและแนะนำข้อความนั้นเป็นชื่อของเอกสาร ทำให้กระบวนการสร้างชื่อง่ายขึ้น

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

ปัญหาผู้ใช้

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

โซลูชันของ Google

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

ลองตรวจสอบรายละเอียด:

ทริกเกอร์

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

ทริกเกอร์หลักของ Google เอกสารคือการคลิกช่องชื่อเอกสารแทน สถานะโฮเวอร์บนฟิลด์จะแสดงคำแนะนำเครื่องมือ "เปลี่ยนชื่อ" ทริกเกอร์รองคือ File > Rename ซึ่งไฮไลต์ช่องป้อนชื่อ

กฎ

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

ข้อเสนอแนะ

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

ลูปและโหมด

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

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

ผลลัพธ์

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

Microinteractions ในการดำเนินการ: ตัวอย่างในโลกแห่งความเป็นจริง

การจัดลำดับรายการงานใหม่

Apple iOS Reminders ช่วยให้ผู้ใช้จัดระเบียบและขจัดขั้นตอนต่างๆ โดยอนุญาตให้แตะ ค้างไว้ และลากรายการเพื่อเปลี่ยนตำแหน่งในลำดับรายการ

ตอบสนองต่อโพสต์โซเชียลมีเดีย

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

การเน้นข้อความที่มีตราสินค้า

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

การแบ่งปันตำแหน่งของคุณ

Google แฮงเอาท์ถือว่ามีครั้งหนึ่งที่ผู้ใช้อาจต้องการแชร์ตำแหน่งของตนเมื่อมีคนส่งข้อความว่า "คุณอยู่ที่ไหน"

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

ปัดเพื่อเลือก

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

การขยายการค้นหา

แอป Google Inbox ไม่เพียงแต่จัดกลุ่มอีเมลด้วยกลุ่มอย่างชาญฉลาดเท่านั้น แต่ยังได้รับการออกแบบมาเพื่อให้สามารถค้นหาด้วยเสียง หรือเลือกจากรายชื่อติดต่อล่าสุดได้ด้วยการแตะเพียงครั้งเดียว

ความเร็วในการเพิ่มข้อมูลติดต่อของเพื่อน

SeatGeek ทำให้ขั้นตอนการกรอกแบบฟอร์มง่ายขึ้นโดยกรอกข้อมูลจากผู้ติดต่อของผู้ใช้โดยอัตโนมัติด้วยการแตะปุ่ม "เพิ่มจากผู้ติดต่อ"

เรียนรู้เพิ่มเติมเกี่ยวกับไมโครอินเทอร์แอคชัน

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

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับไมโครอินเทอร์แอกชันโดยทั่วไป โปรดไปที่ Microinteractions ซึ่งเป็นเว็บไซต์ที่สร้างขึ้นเพื่อเป็นคู่หูสำหรับหนังสือ “Microinteractions: Designing with Details” ที่กล่าวถึงก่อนหน้านี้โดย Dan Saffer บนไซต์ มีคำอธิบายโดยละเอียดของไมโครอินเทอร์แอกชัน ตลอดจนข้อมูลเกี่ยวกับที่มาของไมโครอินเทอร์แอกชันที่มีชื่อเสียง เช่น การแก้ไขอัตโนมัติ การเติมข้อความอัตโนมัติ และการตัดและวาง บทแรกของหนังสือยังมีให้ดาวน์โหลดฟรีอีกด้วย

สำหรับแรงบันดาลใจไมโครอินเทอร์แอกชัน โปรดไปที่ Little Big Details คอลเล็กชันไมโครอินเทอร์แอกชันที่ดูแลจัดการอย่างดีในผลิตภัณฑ์ดิจิทัล โดยแสดงตัวอย่างวิธีที่บริษัทต่างๆ เช่น Apple, Trello และ Stack Overflow ใช้ microinteractions และแอนิเมชั่น UI

หากต้องการเรียนรู้วิธีสร้าง microinteractions ใน Framer โปรดอ่าน Toptal Designer บทความของ Wojciech Dobry บทช่วยสอน Framer: 7 Microinteractions อย่างง่ายเพื่อปรับปรุงต้นแบบของคุณ

แจ้งให้เราทราบสิ่งที่คุณคิด! โปรดแสดงความคิดเห็น ความคิดเห็น และข้อเสนอแนะของคุณด้านล่าง

• • •

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

• หลักการออกแบบและความสำคัญ
• ผลงานออกแบบ UX ที่ดีที่สุด – กรณีศึกษาและตัวอย่างที่สร้างแรงบันดาลใจ
• สำรวจหลักการออกแบบของเกสตัลต์
• Adobe XD กับ Sketch – เครื่องมือ UX ใดที่เหมาะกับคุณ
• 10 UX ที่นักออกแบบชั้นนำเลือกใช้