เหตุใดการโต้ตอบแบบไมโครจึงมีความสำคัญในการออกแบบธีม WordPress

เผยแพร่แล้ว: 2016-04-06

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

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

ตัวอย่างที่ยอดเยี่ยมของแนวคิดแบบฟอร์มการเข้าสู่ระบบ / การลงทะเบียน

ที่มา: http://www.materialup.com/posts/compact-login

ดังนั้น การโต้ตอบแบบไมโครทำหน้าที่อะไร?

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

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

การโต้ตอบแบบไมโครทำงานอย่างไร

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

ที่มา: http://microinteractions.com/what-is-a-microinteraction/
ที่มา: http://microinteractions.com/what-is-a-microinteraction/
  • ทริกเกอร์ คือแรงกระตุ้นที่มองเห็นได้ซึ่งเริ่มดำเนินการ ตัวอย่างเช่น เมื่อภาพบางภาพสว่างขึ้นเมื่อวางเมาส์ไว้ในขณะที่อาจมีการเรียกดูแกลเลอรีในธีม WordPress สำหรับการถ่ายภาพใดๆ ก็ตาม นี่ถือเป็นการเชื้อเชิญที่ละเอียดอ่อนให้ดำเนินการโต้ตอบแบบไมโครต่อไป การตอบสนองของผู้ใช้เป็นตัวกระตุ้น
  • กฎ กำหนดเงื่อนไขสำหรับการโต้ตอบขนาดเล็กที่จะเกิดขึ้น หากเราใช้ธีมบูต WordPress ใด ๆ เป็นตัวอย่าง เมื่อใดก็ตามที่ผู้ใช้ต้องการแก้ไขส่วนเว็บไซต์ใด ๆ พวกเขาจะต้องใช้ตัวแก้ไขแบบลากและวางในตัว (MotoPress Editor หรืออื่น ๆ ) เพื่อให้ได้ผลลัพธ์
  • คำติชม แสดงให้เห็นถึงผลลัพธ์ของการโต้ตอบแบบไมโคร กล่าวคือ ทุกครั้งที่ทำการเปลี่ยนแปลง การแก้ไขจะมีผลทันทีด้วยเทมเพลตบล็อกของ WordPress และผู้ใช้สามารถสังเกตผลลัพธ์ของการกระทำของเขาได้
  • ลูปและโหมด ควบคุมลำดับการกระทำซ้ำๆ สำหรับการโต้ตอบแบบไมโคร ธีม WordPress ระดับพรีเมียมมักจะมีกลไกการให้เหตุผลว่าผู้ใช้จะใช้งานลำดับของการกระทำที่รวมอยู่ในนั้นอย่างไรและทำไม

ต่อไปนี้คือตัวอย่างอันยอดเยี่ยมในชีวิตจริงของการโต้ตอบแบบไมโครที่คุณประทับใจได้อย่างแท้จริง:

SpaceNeedle - เมื่อเลื่อนหน้าขึ้น แอนิเมชันจะนำคุณไปยังจุดสังเกตที่โดดเด่นที่สุดของซีแอตเทิล ข้อมูลเล็กๆ ในป๊อปอัปจะค่อยๆ ปรากฏขึ้นขณะเลื่อน
SpaceNeedle – เมื่อเลื่อนหน้าขึ้น แอนิเมชั่นจะนำคุณไปยังจุดสังเกตที่โดดเด่นที่สุดของซีแอตเทิล ข้อมูลเล็กๆ ในป๊อปอัปจะค่อยๆ ปรากฏขึ้นขณะเลื่อน

ที่มา: http://www.spaceneedle.com/home/

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

ที่มา: http://www.amy-movie.com/

Toi Digital Agency - คริสตัลในพื้นหลังเคลื่อนที่ตามการเคลื่อนไหวของเมาส์ ลูกศรเลื่อนลงก็เช่นกัน
Toi Digital Agency – คริสตัลในพื้นหลังเคลื่อนไหวตามการเคลื่อนไหวของเมาส์ ลูกศรเลื่อนลงก็เช่นกัน

ที่มา: http://toi.io/

เหตุใดการโต้ตอบแบบไมโครจึงทำงาน

Saffer ให้เหตุผลหลายประการว่าทำไมการโต้ตอบแบบไมโครจึงใช้งานได้จริง:

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

เหตุใดการโต้ตอบขนาดเล็กจึงกลายเป็นเทรนด์ในการออกแบบธีม WordPress

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

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

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

ธีม Deltex Business WordPress โดย TemplateMonster มีปุ่มผีเปลี่ยนสีเมื่อวางเมาส์
ธีม Deltex Business WordPress โดย TemplateMonster มีปุ่มผีเปลี่ยนสีเมื่อวางเมาส์

ที่มา: http://www.templatemonster.com/wordpress-themes/deltex-wordpress-theme-58517.html

ธีม DW Agro WordPress โดย Design Wall มีเมนูแบบติดอยู่ที่ด้านบนซึ่งตอบสนองโดยการเปลี่ยนสีของไอคอนจากสีขาวเป็นสีแดงเมื่อวางเมาส์ไว้
ธีม DW Agro WordPress โดย Design Wall มีเมนูแบบติดอยู่ที่ด้านบนซึ่งตอบสนองโดยการเปลี่ยนสีของไอคอนจากสีขาวเป็นสีแดงเมื่อวางเมาส์ไว้

ที่มา: https://www.designwall.com/wordpress/themes/dw-argo/

เคล็ดลับสำหรับการออกแบบการโต้ตอบขนาดเล็กในธีม WordPress

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

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

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

ที่มา: http://www.templatemonster.com/wordpress-themes/55048.html

DW Trendy Business WordPress Theme โดย DesignWall มีตัวเลื่อนรูปภาพในส่วนหัวของเว็บไซต์ที่เปลี่ยนสีของปุ่มลูกศรก่อนหน้า/ถัดไปบนเมาส์เพื่อสลับสไลด์
DW Trendy Business WordPress Theme โดย DesignWall มีตัวเลื่อนรูปภาพในส่วนหัวของเว็บไซต์ที่เปลี่ยนสีของปุ่มลูกศรก่อนหน้า/ถัดไปบนเมาส์เพื่อสลับสไลด์

ที่มา: https://www.designwall.com/wordpress/themes/dw-gamez/

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