แรงบันดาลใจในการสร้าง microinteractions ที่น่ารื่นรมย์บนเว็บไซต์ของคุณ

เผยแพร่แล้ว: 2022-04-27

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

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

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

“ความแตกต่างระหว่างไซต์ที่มั่นคงและไซต์ที่เหลือเชื่ออยู่ในรายละเอียด

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

ป้อน: microinteractions

ผู้หญิงในเสื้อเชิ้ตสีน้ำเงินและทำเล็บสีน้ำเงินที่เข้าชุดกันบนแล็ปท็อป

microinteraction คือความสมบูรณ์ของงานเดียว กดเลื่อนนาฬิกาปลุก กดไลค์บนเฟสบุ๊ค ข้ามไปที่เพลงถัดไปใน Spotify

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

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

ทำลายไมโครอินเทอร์แอกชัน

ไมโครอินเทอร์แอกชันประกอบด้วยสี่ส่วนแยกกัน: ทริกเกอร์ กฎ ฟีดแบ็ค ลูปและโหมด

1. ทริกเกอร์

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

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

2. กฏระเบียบ

ชายชุดดำพิมพ์โน้ตบุ๊ก เขานั่งที่โต๊ะไม้พร้อมกาแฟหนึ่งถ้วยอยู่ทางขวาของเขา

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

3. คำติชม

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

4. ลูป

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

พลังที่แท้จริงของไมโครอินเทอร์แอกชัน

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

ผู้หญิงผมสีน้ำตาลสองคนมองจอมอนิเตอร์อย่างเข้มข้นในที่ทำงาน

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

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

microinteractions ที่น่ายินดีบางอย่าง

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

สิ่งที่ดีที่สุดขึ้นอยู่กับแบรนด์ ผลิตภัณฑ์ ผู้ชม และความชอบด้านสไตล์ของคุณ

มาดูไซต์ WordPress สองสามไซต์ที่เขย่า microinteractions สำหรับผู้ชมของพวกเขา!

จะคลิกหรือไม่คลิก

สกรีนช็อตจากหน้าแรกของ Blue Cadet ที่เน้นที่ National Association of Broadcasters อย่างละเอียด

Blue Cadet เป็นเว็บไซต์ที่มีสื่อจำนวนมากที่ใช้ microinteractions เพื่อรวมประสบการณ์และเพิ่มข้อความโดยไม่ทำลายการไหลของหน้า

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

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

แถบเลื่อนที่เกือบจะอยู่ที่นั่น

แรงบันดาลใจ-microinteractions-แถบเลื่อน

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

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

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

เมื่อพูดถึงไมโครอินเทอร์แอกชัน น้อยแต่มาก

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

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

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

และต้องเข้ากับคำบรรยายของคุณ

คุณกำลังเล่าเรื่องอะไรผ่านไซต์ WordPress ของคุณ? ผู้ใช้มีประสบการณ์อะไรบ้าง?

microinteractions ที่น่ารื่นรมย์ช่วยเสริมการเล่าเรื่อง พวกเขาเพิ่มเรื่องราวโดยไม่ทำลายกระแส

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

ปลื้มใจผู้ใช้

“ไมโครอินเทอร์แอกชันที่น่าพึงพอใจที่สุดช่วยให้ผู้ใช้รู้สึกเหมือนอยู่บ้าน

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

มือใช้สไตลัสบนแท็บเล็ต

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

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

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