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