เมื่อออกแบบผลิตภัณฑ์มีหลายวิธีในการปรับปรุงประสบการณ์ของผู้ใช้รวมถึงการกำหนดอักขระสถาปัตยกรรมข้อมูลที่มีโครงสร้างดีและเนื้อหาที่เขียนอย่างรอบคอบ แต่หลังจากสร้างโครงสร้างระดับสูงนี้แล้วการสร้างความพึงพอใจให้กับผู้ใช้เกิดขึ้นในการโต้ตอบที่น้อยที่สุด รายละเอียดการออกแบบ .
รายละเอียดเหล่านี้เรียกว่า microinteracciones เป็นช่วงเวลาส่วนบุคคลในผลิตภัณฑ์ที่ออกแบบมาเพื่อให้บรรลุภารกิจที่ไม่เหมือนใครในขณะเดียวกันก็เพิ่มการไหลเวียนตามธรรมชาติของผลิตภัณฑ์ การปัดขึ้นเพื่ออัปเดตข้อมูลเช่นเนื้อหาหรือเปลี่ยนการตั้งค่าเป็นการโต้ตอบระดับย่อยทั้งหมด นอกจากนี้ยังสามารถรวมภาพเคลื่อนไหว UI แบบง่ายๆได้เช่นวิธีที่เมนูเลื่อนเมื่อแตะหรือการ์ดม้วนออกจากหน้าจอเมื่อเลื่อน
การโต้ตอบด้วยกล้องจุลทรรศน์มักไม่สังเกตเห็นโดยรู้ตัวโดยผู้ใช้ แต่รายละเอียดที่ละเอียดอ่อนทำให้ผลิตภัณฑ์มีมากขึ้น ดี ย ใช้งานง่ายกว่า และปรับปรุงประสบการณ์ของผู้ใช้
ประโยชน์ของการโต้ตอบระดับไมโคร
การโต้ตอบขนาดเล็กและภาพเคลื่อนไหว UI มีความสำคัญอย่างยิ่งที่จะสามารถสร้างหรือทำลายการออกแบบ - หรือชอบ Charles Eames ของการออกแบบเครื่องเรือนและชื่อเสียงด้านสถาปัตยกรรมกล่าวว่า:
รายละเอียดไม่ใช่รายละเอียด พวกเขาออกแบบ
การกำจัดอนุภาคขนาดเล็กที่มีหน้าสัมผัส (โดย Nikita Duhovny )
ประโยชน์ที่สำคัญบางประการของการผสมผสานการโต้ตอบขนาดเล็กเข้ากับผลิตภัณฑ์ ได้แก่ :
- สร้างผลกระทบทางอารมณ์เชิงบวกให้กับผู้ใช้เนื่องจากการโต้ตอบกับ UI ที่ราบรื่นขึ้น
- ให้ข้อเสนอแนะแก่ผู้ใช้ทันทีโดยพิจารณาจากการกระทำที่พวกเขาทำ
- แนะนำผู้ใช้ผ่านแอพพลิเคชั่นด้วยวิธีที่ลื่นไหลและใช้งานง่ายมากขึ้น
- กระตุ้นให้ผู้ใช้โต้ตอบกับแอปพลิเคชันโดยตอบสนองต่อการแจ้งเตือนหรือแชร์เนื้อหา
- การป้องกันข้อผิดพลาดของผู้ใช้
แนวทางปฏิบัติที่ดีที่สุดในการออกแบบ Microinteraction
ตอนนี้เราได้กำหนดคำจำกัดความและบริบทเกี่ยวกับการโต้ตอบระดับเล็ก ๆ แล้วและเป็นตัวอย่างของการปรับปรุงประสบการณ์ของผู้ใช้เรามาดูแนวทางปฏิบัติที่ดีที่สุดสำหรับการสร้างปฏิสัมพันธ์ระดับเล็ก
ระบุและทำความเข้าใจกับปัญหาของผู้ใช้
กฎข้อแรกในการออกแบบใด ๆ ประสบการณ์ของผู้ใช้ เป็นการค้นพบและทำความเข้าใจปัญหาของผู้ใช้ - และไม่แตกต่างกันสำหรับการโต้ตอบแบบไมโคร วิธีที่ดีที่สุดในการทำความเข้าใจว่าผู้ใช้ต้องการอะไรคือทำการสำรวจหรือสัมภาษณ์หรือสังเกตพฤติกรรมผ่านการวิจัยผู้ใช้ นักออกแบบ ApeeScape อีวานแอนนิคอฟ เจาะลึกความเข้าใจความต้องการของผู้ใช้ในบทความของเขา ' Going Guerrilla: เคล็ดลับและทางเลือกในการวิจัย UX ราคาไม่แพง .”
รักษาปฏิสัมพันธ์ระดับไมโครตามธรรมชาติ
เป้าหมายคือการเชื่อมช่องว่างระหว่างผู้ใช้และผลิตภัณฑ์ด้วยวิธีที่ใช้งานง่ายและเป็นธรรมชาติดังนั้นคุณควรหลีกเลี่ยงภาพเคลื่อนไหวแปลก ๆ ที่ใช้เวลาโหลดนานเกินไปหรือทำให้ผู้ใช้เสียสมาธิ ให้สร้างการออกแบบที่สอดคล้องกับผลิตภัณฑ์แทน ความละเอียดอ่อนเป็นกุญแจสำคัญในการโต้ตอบขนาดเล็ก อย่าปล่อยให้ผู้ใช้งงงวยและคิดว่า: 'นั่นคืออะไร?'
microinteraction ของอีคอมเมิร์ซที่เพิ่มผลิตภัณฑ์ลงในตะกร้าสินค้า (สำหรับ Elior Helose )
ทดสอบและทำซ้ำผลการทดสอบของผู้ใช้
แม้แต่ นักออกแบบ คนที่มีประสบการณ์มักไม่ค่อยได้รับการออกแบบที่ถูกต้องทั้งหมดในการลองครั้งแรก นั่นคือเหตุผลที่ใช้กระบวนการ การทดสอบผู้ใช้ และการออกแบบซ้ำ ๆ เป็นวิธีง่ายๆในการลดข้อบกพร่องในการใช้งานก่อนเปิดตัวผลิตภัณฑ์
ในระหว่างขั้นตอนการทดสอบผู้ใช้จะมีการทดสอบและวิเคราะห์ microinteractions เพื่อใช้งานและทบทวนในขั้นตอนการออกแบบถัดไป กระบวนการนี้จะทำซ้ำจนกว่าปัญหาการใช้งานและจุดเจ็บปวดจะได้รับการแก้ไข
ทำตามโครงสร้างของการโต้ตอบระดับไมโคร
ตาม แดนซัฟเฟอร์ เจ้าหน้าที่บริหาร Product Designer ที่ ทวิตเตอร์ และผู้เขียน 'การโต้ตอบระดับเล็ก: การออกแบบในรายละเอียด' microinteraction มีสี่ส่วน
- ทริกเกอร์ - ทริกเกอร์เริ่มต้นการโต้ตอบแบบไมโคร ทริกเกอร์ประเภทหนึ่งคือสวิตช์สลับที่เปิดและปิดคุณสมบัติ
- กฎ - กฎจะกำหนดว่าไมโครอินเท็กซ์ตอบสนองต่อทริกเกอร์อย่างไรและกำหนดสิ่งที่เกิดขึ้นระหว่างการโต้ตอบ ตัวอย่างเช่นแอปไฟฉายใช้ปุ่มเป็นปุ่มกดชัตเตอร์เพื่อเปิดและปิดไฟ
- ข้อเสนอแนะ - ข้อเสนอแนะจะบอกผู้ใช้ว่าเกิดอะไรขึ้นระหว่างการทำไมโคร ตัวอย่างของคำติชมคือแบบฟอร์มการลงทะเบียนที่มีการตรวจสอบความถูกต้องทางออนไลน์ - สีของเส้นขอบจะเปลี่ยนเป็นสีเขียวหากกรอกข้อมูลในช่องอย่างถูกต้องและจะเปลี่ยนเป็นสีแดงหากมีสิ่งผิดปกติ ด้วยวิธีนี้ผู้ใช้จะรู้ได้ทันทีว่าสิ่งที่ถูกหรือผิด
- ลูปและโหมด - ลูปและโหมดกำหนด meta-rule ของ microinteraction และการเปลี่ยนแปลงของ microinteraction เมื่อใช้ซ้ำ ๆ ตัวอย่างเช่นในอีคอมเมิร์ซปุ่ม 'ซื้อเลย' อาจเปลี่ยนเป็น 'ซื้ออีก' เมื่อผู้ใช้เคยซื้อสินค้ามาก่อน
การแยกโครงสร้างการออกแบบ Microinteraction
เพื่อแสดงกระบวนการคิดที่อยู่เบื้องหลังการออกแบบอนุภาคขนาดเล็กเรามาแยกโครงสร้างจุลภาค Google : ชื่อไฟล์บอกใบ้ microinteraction ใน Google Docs .
microinteraction นี้ใช้บรรทัดแรกของเอกสารและแนะนำส่วนนั้นเป็นชื่อของเอกสารทำให้กระบวนการสร้างชื่อง่ายขึ้น
ขั้นตอนการออกแบบสำหรับ microinteraction จะเหมือนกับงานออกแบบใด ๆ : ระบุจุดเจ็บปวดของผู้ใช้และแก้ไข ในขณะที่เราพิจารณาแนวทางปฏิบัติที่ดีที่สุดข้างต้นเรามาเริ่มระบุปัญหากัน
ปัญหาของผู้ใช้
วิธีที่ง่ายและใช้งานง่ายในการจัดเอกสารให้เป็นระเบียบคือเพียงตั้งชื่อให้เป็นคำอธิบาย ในโปรแกรมแก้ไขข้อความส่วนใหญ่ช่อง 'ตั้งชื่อเอกสารของคุณ' จะว่างเปล่าแม้ว่าจะมีโอกาสดีที่ชื่อไฟล์จะสัมพันธ์กับเนื้อหาของเอกสารในที่สุด นี่เป็นกระบวนการที่ควรค่าแก่การจัดการกับ microinteraction
โซลูชันของ Google
Google เอกสารจัดการสิ่งนี้ได้สองวิธีขึ้นอยู่กับตัวเลือกของผู้ใช้: 1) ผู้ใช้สามารถคลิกที่ช่องชื่อและเปลี่ยนชื่อเอกสารได้ทันทีก่อนที่จะพิมพ์เนื้อหาใด ๆ และเปลี่ยน 'เอกสารที่ไม่มีชื่อ' เป็นชื่อที่คุณต้องการหรือ 2) เมื่อผู้ใช้พิมพ์ บรรทัดแรกของข้อความ Google จะเติมอัตโนมัติเป็นชื่อของเอกสาร ผู้ใช้สามารถเก็บไว้ตามที่เป็นอยู่หรือเปลี่ยนแปลงได้
การทดสอบหน่วยที่ดีนั้นละเอียดถี่ถ้วนและมักจะต้องใช้เพียงครั้งเดียว
ลองตรวจสอบรายละเอียด:
ทริกเกอร์
อาจมีทริกเกอร์บางอย่างที่เป็นไปได้สำหรับการตั้งชื่อเอกสารโดยใช้ฟังก์ชันเมนู ไฟล์> บันทึกเป็น หรือโดยการกด cmd + s บน Mac ( ctrl + s ใน Windows) บนแป้นพิมพ์และในแอปพลิเคชันเดสก์ท็อป แต่สิ่งเหล่านี้ไม่ได้ใช้ประโยชน์จากลักษณะการโต้ตอบของเว็บและไม่ได้ปรับปรุงขั้นตอนของผู้ใช้โดยเฉพาะ
แต่ทริกเกอร์หลักสำหรับ Google เอกสารเพียงแค่คลิกที่ฟิลด์ชื่อเอกสาร สถานะวางเมาส์เหนือฟิลด์จะแสดงคำแนะนำเครื่องมือ 'เปลี่ยนชื่อ' ทริกเกอร์รองคือ ไฟล์> เปลี่ยนชื่อ ซึ่งไฮไลต์ฟิลด์ป้อนชื่อ
กฎ
กฎจะกำหนดสิ่งที่เกิดขึ้นหลังจากคลิกทริกเกอร์ ในกรณีนี้ข้อความบรรทัดแรกจะปรากฏเป็นชื่อของเอกสาร แต่ถ้าผู้ใช้ไม่ต้องการให้มีข้อความบรรทัดแรกเป็นชื่อล่ะ? เมื่อผู้ใช้คลิกที่ช่องใส่ชื่อข้อความทั้งหมดจะถูกเลือกและจะถูกลบออกด้วยคีย์ผสมใด ๆ ทำให้ผู้ใช้สร้างชื่อใหม่ได้ง่าย
ข้อเสนอแนะ
การเปลี่ยนสีของเส้นขอบช่องป้อนข้อมูลเป็นรูปแบบการโต้ตอบทั่วไปและเป็นสิ่งที่ Google เอกสารใช้ที่นี่เพื่อให้ข้อเสนอแนะแก่ผู้ใช้ทันที
ลูปและโหมด
ผู้ใช้สร้างชื่อเอกสารสำเร็จและทริกเกอร์ยังคงอยู่พร้อมกับความแตกต่างที่สำคัญ: ขณะนี้เอกสารได้รับการตั้งชื่อแล้ว
ณ จุดนี้ผู้ใช้จะต้องการเปลี่ยนตัวอักษรเพียงไม่กี่ตัวหรือเพิ่มวันที่ให้กับชื่อแทนที่จะเปลี่ยนชื่อเต็มที่เคยกำหนดไว้ ในกรณีนี้ไม่เหมือนกับกฎก่อนหน้านี้คือปิดใช้กฎในการเน้นชื่อเอกสารทั้งหมด
ผล
หลังจากกำหนดปัญหาและมุ่งเน้นไปที่สี่ส่วนของ microinteraction ผลลัพธ์ที่ได้คือประสบการณ์ที่เป็นธรรมชาติและเป็นมิตรกับผู้ใช้มากขึ้น โซลูชันการตั้งชื่อไฟล์ของ Google เอกสารช่วยให้ผู้ใช้สามารถจัดระเบียบไฟล์ที่มีชื่อถูกต้องได้ตลอดจนลดความยุ่งยากในกระบวนการตั้งชื่อเอกสาร
การโต้ตอบขนาดเล็กในการดำเนินการ: ตัวอย่างโลกแห่งความจริง
การจัดลำดับรายการที่ต้องทำใหม่
การแจ้งเตือน Apple iOS ช่วยให้ผู้ใช้สามารถจัดระเบียบและขจัดขั้นตอนต่างๆได้โดยให้พวกเขาแตะค้างและลากรายการในรายการเพื่อเปลี่ยนตำแหน่งในลำดับรายการ
การตอบสนองต่อโพสต์โซเชียลมีเดีย
เนื้อหาที่“ ชอบ” โดยการคลิกปุ่มหรือไอคอนยกนิ้วให้กลายเป็นรูปแบบการออกแบบ UX ทั่วไปในแอปพลิเคชันและเว็บไซต์ต่างๆ เฟสบุ๊ค สร้างขึ้นจากการโต้ตอบนี้โดยการเพิ่มตัวเลือกมากมายนอกเหนือจาก 'ไลค์' ผ่าน microinteraction ที่ละเอียดอ่อน
เน้นข้อความแบรนด์
ในเครื่องมือค้นหาส่วนใหญ่ คุณสามารถแทนที่สีการเลือกข้อความเริ่มต้นได้ อิเกีย ใช้รูปแบบการโต้ตอบนี้เพื่อเพิ่มรายละเอียดการสร้างแบรนด์ที่ละเอียดอ่อนโดยการเน้นข้อความด้วยสีเหลืองและสีน้ำเงินอันเป็นสัญลักษณ์
แบ่งปันตำแหน่งของคุณ
Google Hangouts สมมติว่าหนึ่งในครั้งที่ผู้ใช้ต้องการแชร์ตำแหน่งคือเมื่อมีคนส่งข้อความว่า 'คุณอยู่ที่ไหน'
เมื่อผู้ใช้เห็นข้อความนี้ปุ่ม 'แชร์ตำแหน่งของคุณ' จะปรากฏเป็นตัวเลือกตามบริบท จากนั้นสามารถแตะปุ่มนั้นเพื่อส่งแผนที่ตำแหน่งของตนไปยังผู้ใช้รายอื่นโดยอัตโนมัติ
ปัดเพื่อเลือก
การโต้ตอบของไมค์สามารถใช้เพื่อตอบคำถามใช่หรือไม่ใช่ง่ายๆในแอป เชื้อจุดไฟ ทำได้โดยให้ผู้ใช้ปัดไปทางซ้ายหรือขวา (ไม่ใช่ / ใช่) ขึ้นอยู่กับว่าพวกเขาชอบหรือไม่ชอบการจับคู่ที่เป็นไปได้
การขยายการค้นหา
การประยุกต์ใช้ กล่องจดหมายของ Google ไม่เพียงแค่ แพ็กเกจอีเมลแบบบันเดิล อย่างชาญฉลาดนอกจากนี้ยังออกแบบมาเพื่อให้สามารถค้นหาด้วยเสียงหรือเลือกจากรายชื่อล่าสุดด้วยการสัมผัสเพียงครั้งเดียว
เทมเพลตเอกสารการออกแบบระดับต่ำแอปพลิเคชัน กล่องจดหมาย ช่วยให้ผู้ใช้สามารถค้นหาอีเมลจากรายชื่อติดต่อล่าสุดของพวกเขาด้วย microinteraction ที่รอบคอบ
การเพิ่มความเร็วให้กับข้อมูลติดต่อของเพื่อน
SeatGeek ลดความยุ่งยากในขั้นตอนการกรอกแบบฟอร์มโดยกรอกข้อมูลติดต่อของผู้ใช้โดยอัตโนมัติด้วยการแตะปุ่ม 'เพิ่มจากรายชื่อติดต่อ' เพียงครั้งเดียว
เรียนรู้เพิ่มเติมเกี่ยวกับ Microinteractions
Microinteractions เป็นส่วนสำคัญในการปรับปรุง ประสบการณ์ของผู้ใช้ และมีแหล่งข้อมูลมากมายที่สามารถเรียนรู้เพิ่มเติมเกี่ยวกับสิ่งเหล่านี้ซึ่งบางส่วนอยู่ในรายการด้านล่าง
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ microinteractions โดยทั่วไปโปรดไปที่ ไมโครอินเทอราซีโอนีส ซึ่งเป็นเว็บไซต์ที่สร้างขึ้นเพื่อเป็นเพื่อนกับหนังสือดังกล่าว 'การโต้ตอบระดับจิ๋ว: การออกแบบด้วยรายละเอียด' โดย Dan Saffer ในเว็บไซต์มีคำอธิบายโดยละเอียดเกี่ยวกับการโต้ตอบขนาดเล็กตลอดจนข้อมูลเกี่ยวกับที่มาของการโต้ตอบระดับเล็กที่รู้จักกันดีเช่นการแก้ไขอัตโนมัติการเติมข้อความอัตโนมัติและการตัดและวาง บทแรกของหนังสือเล่มนี้มีให้ดาวน์โหลดฟรี
สำหรับแรงบันดาลใจในการทำไมโครเท็กซ์โปรดไปที่ รายละเอียดเล็ก ๆ น้อย ๆ ซึ่งเป็นคอลเลกชันของการโต้ตอบขนาดเล็กในผลิตภัณฑ์ดิจิทัล แสดงตัวอย่างของ บริษัท ต่างๆที่ชอบ แอปเปิ้ล , Trello , ย StackOverflow ใช้การโต้ตอบขนาดเล็กและภาพเคลื่อนไหว UI
หากต้องการเรียนรู้วิธีสร้างไมโครอินเทอร์ดักชั่นใน Framer อ่านบทความของ นักออกแบบ ApeeScape Wojciech Dobry , สอน Framer: 7 ปฏิสัมพันธ์ไมโครง่ายๆเพื่อปรับปรุงต้นแบบของคุณ .
