ความลับสู่การออกแบบ UX ของนักฆ่า: ทั้งหมดอยู่ใน Microinteractions

การออกแบบอยู่ในรายละเอียด

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

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

นี่คือสิ่งที่เกิดขึ้นกับหน้าจอของฉันหลังจากแตะที่หัวใจสีแดง

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

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

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

Microinteractions คืออะไร?

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

Dan Saffer ผู้เขียนหนังสือ “Microinteractions” และ VP of Product for Mayfield Robotics ให้คำจำกัดความ microinteractions ว่า “มีช่วงเวลาของผลิตภัณฑ์ที่หมุนรอบกรณีการใช้งานครั้งเดียว—พวกเขามีงานหลักเพียงงานเดียว ทุกครั้งที่คุณเปลี่ยนการตั้งค่า ซิงค์ข้อมูลหรืออุปกรณ์ของคุณ ตั้งนาฬิกาปลุก เลือกรหัสผ่าน เข้าสู่ระบบ ตั้งค่าข้อความสถานะ หรือรายการโปรด หรือ 'ชอบ' บางอย่าง คุณกำลังมีส่วนร่วมกับไมโครอินเทอร์แอคชัน สิ่งเหล่านี้มีอยู่ทุกหนทุกแห่ง: ในอุปกรณ์ที่เราพกพา เครื่องใช้ในบ้านของเรา แอพบนโทรศัพท์และเดสก์ท็อปของเรา แม้กระทั่งฝังตัวในสภาพแวดล้อมที่เราอาศัยและทำงาน เครื่องใช้ส่วนใหญ่และแอพบางตัวสร้างขึ้นโดยใช้ไมโครอินเทอร์แอกชันเดียวทั้งหมด”

ตามที่ Saffer กล่าว microinteractions นั้นดีสำหรับ:

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

ทำไมต้องรวม Microinteractions เข้ากับการออกแบบของคุณ?

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

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

สิ่งกระตุ้น

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

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

กฎ

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

แนะนำสำหรับคุณ:

ทรัพยากร

Metaverse จะพลิกโฉมอุตสาหกรรมยานยนต์อินเดียได้อย่างไร

วิภาวดี ส.

31 กรกฎาคม 2565

ทรัพยากร

บทบัญญัติต่อต้านการแสวงหากำไรสำหรับสตาร์ทอัพในอินเดียมีความหมายอย่างไร?

จรัญญา ล.

31 กรกฎาคม 2565

ทรัพยากร

Edtech Startups ช่วยให้แรงงานอินเดียเพิ่มพูนทักษะและเตรียมพร้อมสู่อนาคตได้อย่างไร...

อังคุช เอส

31 กรกฎาคม 2565

ข่าว

หุ้นเทคโนโลยียุคใหม่ในสัปดาห์นี้: ปัญหาของ Zomato ยังคงดำเนินต่อไป, EaseMyTrip Posts Stro...

ตปัญจนา ร.

31 กรกฎาคม 2565

คุณสมบัติ

สตาร์ทอัพอินเดียใช้ทางลัดในการไล่ล่าหาทุน

นิกิล เอส.

31 กรกฎาคม 2565

ข่าว

แพลตฟอร์มการตลาดดิจิทัล Logicserve ระดมทุน INR 80 Cr รีแบรนด์เป็น LS Dig...

เชตัน ต.

31 กรกฎาคม 2565

ข้อเสนอแนะ

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

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

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

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

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

ลูปและโหมด

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

ลองสร้างลูปที่ปรับเปลี่ยนตามช่วงเวลา ทำให้ประสบการณ์ดีขึ้นทุกครั้งที่โต้ตอบกับมัน ฟีเจอร์ On This Day Memories ของ Facebook เป็นตัวอย่างที่ดีในการสร้างประสบการณ์ที่ปรับเปลี่ยนทุกครั้งที่มีส่วนร่วม

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

สิ่งที่ต้องคำนึงถึงเมื่อออกแบบไมโครอินเทอร์แอกทีฟ

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

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

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

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

6 ตัวอย่างของไมโครอินเทอร์แอกชันที่ทำถูกต้อง

เซอร์ไพรส์บนแขนเสื้อของคุณ

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

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

อิโมจิหย่อน

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

Google แปลภาษา

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

โหมดกลางคืนบน Google Maps

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

Make Me Pulse

ลองดูไซต์ Make Me Pulse นี้เพื่อประสบการณ์การโต้ตอบที่น่ายินดีอย่างแท้จริง การใช้ไมโครอินเทอร์แอกชัน ( แถบความคืบหน้า เสียง สี ) ช่วยแนะนำผู้ใช้ผ่านโฟลว์ผ่านทริกเกอร์ กฎ คำติชม และลูป

แถบเลื่อน

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

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

[โพสต์นี้ปรากฏตัวครั้งแรกบน Proto.io และทำซ้ำโดยได้รับอนุญาต]