اتفاقات روزمره ، اخبار مهم و دیگر مطالب میهن وب هاست را می توانید در این قسمت مطالعه کنید

اگر به دنبال بهبود رابط کاربری سایت وردپرسی هستید، استفاده از Microinteractions در وردپرس راهکاری مناسب خواهد بود. استفاده صحیح از Microinteractions در سایت‌های وردپرسی، نیاز به دقت بسیار بالایی دارد.

منظور از Microinteractions در وردپرس چیست؟

به انیمیشن و افکت‌های کوچکی که در سایت‌ها استفاده می‌شوند، Microinteractions می‌گویند. این افکت‌ها هنگام عبور نشانگر ماوس از روی برخی عناصر وب سایت، مشاهده می‌شوند. برخی از این انیمیشن‌ها نیز زمان کلیک کردن یا نوشتن متن در یک باکس، به نمایش در می‌آیند. به عنوان مثال، با کلیک روی آیکون تشویق مطابق تصویر (1):

تصویر (1)

یک انیمیشن همانند تصویر (2) ظاهر می‌گردد:

تصویر (2)

ممکن است این تصور ایجاد شود که Microinteractions در وردپرس، صرفا بخش‌های ظریف و انیمیشن‌های کوچک را به سایت می‌افزایند اما این برداشت کامل نیست. در واقع Microinteraction‌ ها می‌توانند کاربرد‌های فراوان دیگری نیز داشته باشد. قابلیت‌های Microinteractions در وردپرس به ایجاد انیمیشن و افکت‌های ظریف خلاصه نمی شود و می‌تواند موارد زیر را نیز تحت پوشش قرار دهد:

• راهنمای تصویری بیشتری فراهم می کند تا کاربران نحوه تعامل با عناصر سایت را بیاموزند.
• هدف عناصر مختلف سایت را برای بازدیدکنندگان شفاف تر خواهد کرد.

چگونه می‌توان Microinteraction‌ ها را به سایت وردپرسی اضافه کرد؟

سه روش جهت افزودن Microinteractions به سایت وردپرس وجود دارد که عبارتند از:

1. توسط CSS
2. توسط JavaScript
3. توسط افزونه‌ها

هر کدام از این روش‌ها، مزایا و معایبی دارند که با بررسی آنها، می‌توانید روش مناسب را برای وب‌سایت خود انتخاب کنید.

پیاده سازی Microinteractions توسط CSS

بدون شک Cascading Style Sheet یا به اختصار CSS، نقش بسیار مهمی در طراحی سایت ایفا می‌کند. همین امر باعث می‌شود که گزینه‌ای ایده‌آل برای پیاده‌سازی Microinteractions در وردپرس ایت باشد. فرآیند آن می‌تواند به آسانی از طریق ویرایش کدهای CSS تم اصلی یا چایلد تم، انجام شود. 

افزودن افکت به لینک‌ها، می‌تواند جذابیت آنها را دو چندان نماید. در این صورت، بازدیدکنندگانی که برای اولین بار وارد سایت می‌شوند از نحوه تعامل با عناصر سایت، مانند دکمه ها یا فرم تماس، مطلع می‌گردند. جهت اصلاح کد‌های CSS در وردپرس، می‌توان از بخش "سفارشی سازی"  وردپرس استفاده نمود.

پیاده سازی Microinteractions در وردپرس توسط JavaScript

استفاده از JavaScript، راهکاری عالی جهت متحرک سازی عناصر موجود در سایت است. "Button" یا همان "دکمه"، یکی از بهترین عناصر جهت پیاده‌سازی Microinteractions در وردپرس می‌باشد. گاهی اوقات به کار گیری JavaScript بهتر از CSS خواهد بود.

از بهترین کتابخانه‌های رایگان جاوا اسکریپت جهت متحرک سازی دکمه‌ها می‌توان به Ladda Buttons اشاره کرد. از طریق این کتابخانه‌ می‌توان به راحتی Microinteractions را در سایت‌های وردپرسی درج نمود.

تصویر (3)

پیاده سازی Microinteractions توسط افزونه‌های وردپرس 

افزونه‌های متعددی برای وردپرس توسعه داده شده‌اند که امکان افزودن توابع Microinteractions در وردپرس را فراهم می‌سازند. از معروفترین آنها می‌توان به موارد زیر اشاره کرد: 

• افزونه WPForms، امکان نمایش متن مناسب در مراحل پردازش ورودی‌های یک فرم را فراهم می‌سازد.
• افزونه WordPress Tooltips، امکان افزودن توضیحات به ویدیوها، تصاویر و حتی کلمات را فراهم می‌کند.
• افزونه LottieFiles که افکت‌های مبتنی هاور یا اسکرول را ایجاد می‌نماید.

چگونه باید از Microinteractions در وردپرس استفاده شود؟

روش های متنوعی برای ایجاد و استفاده از Microinteractions در وردپرس وجود دارد. آشنایی با آنها می‌تواند در انتخاب بهترین گزینه، به مدیران سایت‌ها کمک کند.

تسریع انتشار محتوای سایت در شبکه‌های اجتماعی

امروزه بیش از 50 درصد جمعیت جهان در شبکه‌های اجتماعی فعال هستند که یک ظرفیت مناسب برای رسیدن به اهداف سایت و کسب‌و‌کار آنلاین است. با انتشار مطالب در شبکه‌های اجتماعی، میزان تعامل با افراد افزایش می یابد که می تواند به شهرت برند شما کمک کند.

انتشار مطالب در شبکه‌های اجتماعی، موجب افزایش تعامل و کسب اعتبار بیشتر می‌شود که در نهایت به جلب اعتماد کاربران کمک خواهد کرد. استفاده از قدرت شبکه‌های اجتماعی، یک استراتژی عالی برای حضور آنلاین موثر است.

 افزونه‌هایی مانند Highlight and Share، انتشار مستقیم مطالب در شبکه‌های اجتماعی را با استفاده از microinteractions بسیار آسان می‌نمایند.

تصویر (4)

این افزونه رایگان بوده و استفاده از آن بسیار آسان است. در واقع تمامی قابلیت‌های لازم، پس از نصب افزونه فعال خواهند شد. اگر کاربران متن سایت را انتخاب کنند، گزینه اشتراک گذاری در شبکه‌های اجتماعی، توسط این افزونه نمایان می شود. بازدیدکنندگان نیز با انتخاب هر یک از شبکه‌های اجتماعی، به سرعت می‌توانند متن انتخابی خود را در آن منتشر کنند. 

نمایش Tooltip‌ های مفید به کاربران سایت

Tooltip متنی است که برای توضیح بیشتر یک واژه، عکس یا هر عنصر دیگری استفاده می‌گردد. معمولا زمانی که ماوس روی آن عنصر قرار می‌گیرد متن Tooltip به نمایش در می‌آید. هدف اصلی Tooltip‌ها ارائه اطلاعات بیشتر به کاربران است.

اگر از Tooltip استفاده شود، توضیح اصطلاحات و دستورالعمل‌ها به مراتب آسانتر شده در فضای صفحه نیز صرفه جویی خواهد شد. این امر به بازدیدکنندگانی که اطلاعات کمتری دارند نیز کمک خواهد کرد تا مطالب منتشر شده را درک نمایند. برای پیاده سازی tooltip Microinteractions در وردپرس می‌توان از افزونه WordPress Tooltips استفاده نمود. 

افزودن انیمیشن‌های سرگرم کننده

اگر به آیکون like، چند emoji یا همان "شکلک" اضافه گردد و آنها را زمانی که ماوس روی گزینه like قرار می‌گیرد به کاربر نشان دهد، جذابیت این گزینه چند برابر خواهد شد. در این حالت کاربر می‌تواند هنگام لایک یک مطلب، واکنش خود را نیز توسط شکلک‌های بیشتری نمایش دهد.

تصویر (5)

توسط افزونه Animate It، به راحتی می‌توان چنین قابلیتی را در مطالب سایت وردپرسی افزود. این افزونه نیز رایگان بوده و امکانات فراوانی را برای شخصی سازی ارائه می‌دهد. با استفاده از این افزونه، دیگر نیازی نیست که عناصر موجود در سایت را تحت انیمیشن موردنظر، مجددا طراحی نمایید. افزونه Animate It، این امکان را فراهم کرده است تا به همه عناصر فعلی سایت، افکت و انیمیشن دلخواه خود را اضافه کنید.

بهترین روش استفاده از Microinteractions

اگر به تازگی وارد دنیای وردپرس و طراحی سایت شده باشید، استفاده صحیح و به اندازه از Microinteractions در وردپرس کمی دشوار خواهد بود. با این حال، پیروی از دو اصل زیر می‌تواند در پیاده سازی درست و سریع Microinteractions کارگشا باشد.

1. عناصر متحرک را مشخص نمایید

وجود انیمیشن‌ها و افکت‌ها، در بهبود رابط کاربری سایت بسیار حائز اهمیت است اما نباید برای هر عنصری به کار گرفته شوند. انیمیشن‌ها گزینه‌ای عالی جهت استفاده در فرم‌ها و دکمه‌ها هستند. برای نمونه، انیمیشن استانداردی که هنگام تایپ کلمات در بخش جستجو نمایش داده می‌شود را در نظر بگیرید:

تصویر(6)

پیاده سازی این انیمیشن بسیار ساده است. با توجه به اینکه متن داخل کادر کوچک می‌باشد، در بهبود کارایی آن مفید خواهد بود. به عنوان یک قاعده کلی، هنگام متحرک سازی عناصر سایت، باید به موارد زیر دقت نمود:

• به عناصری افکت و انیمیشن اضافه کنید که کاربران با آن تعامل دارند.
• بخش ها و عناصری را بیابید که احتمال می‌دهید بازدیدکنندگان نحوه کار با آنها را ندانند. توسط انیمیشن‌ها، به کاربران در استفاده از امکانات سایت کمک نمایید.
• اگر از به کار گیری Microinteractions در بخش های مختلف مطمئن نیستید، صرفا از آن برای دکمه ها، فرم‌ها و کادر جستجو استفاده نمایید. به خاطر داشته باشید که نباید در متحرک سازی عناصر سایت افراط کنید.

2. Microinteractions مناسب را انتخاب کنید

هدف اصلی Microinteractions در وردپرس، بهبود تجربه کاربری سایت است. لذا قبل از ایجاد انیمیشن، باید به خوبی در مورد آن فکر کنید. به عنوان مثال، آیکون جستجویی را در نظر بگیرید که پس از کلیک روی آن، کادر جستجو باز شده و موجب جابجایی المان‌های اطراف  می‌شود:

تصویر (7)

برخلاف کادر جستجوی قبلی که با نمایش انیمیشن هنگام تایپ متن موجب افزایش کارایی می‌شد، این تغییر شکل آیکون جستجو، کمکی به بهبود تجربه کاربری نمی‌کند. نحوه تغییر این فرم و جابجایی سایر اجزای موجود در صفحه، برای برخی کاربران ناخوشایند خواهد بود. همچنین پیاده سازی این انیمیشن نیز به سادگی انیمیشن استاندارد قبلی نیست. اگر تمایل دارید Microinteraction ها موجب بهبود تجربه کاربری سایت شوند، این موارد را در نظر داشته باشید:

• انیمیشن باید نحوه عملکرد یک عنصر را نشان دهد. به عبارت دیگر، اجرای انیمیشن باید به درک عناصر از سوی کاربران، کمک نماید.
• اگر کاربری یک بخش را با موفقیت پشت سر می گذارد، از انیمیشن ها برای نمایش یک پیام مرتبط، استفاده نمایید.

همواره بهترین افزونه ممکن را برای پیاده سازی Microinteractions در وردپرس انتخاب و نصب نمایید. 

نکاتی برای استفاده موثر از Microinteractions در وردپرس

از آنجایی که Microinteractions برای یک سایت وردپرسی بسیار مهم هستند، باید تا جای ممکن از آنها به صورت موثر استفاده نمایید. نکاتی که باید به آنها توجه نمود عبارتند از:

• اهمیت کارایی 

ابتدا باید هدف از ایجاد Microinteractions را مشخص نمایید. اولین دلیل برای پیاده سازی Microinteractions، متقاعد کردن کاربر به تعامل با یک عنصر مشخص در سایت است. در نتیجه، باید تا جای ممکن Microinteractions را کاربردی طراحی کرد تا با کاربر ارتباط برقرار نماید.

• سادگی از اصول اولیه است

برای اینکه Microinteractions کوچک و ساده باشند، عبارت Micro در نام آنها قرار گرفته است. هر بخشی که برای بهبود تجربه کاربری بازدیدکنندگان استفاده می‌شود باید ساده و واضح باشد. به همین دلیل نباید از Microinteractions برای متن‌ها و تصاویر غیر ضروری، استفاده شود.

• توجه به ساختار

نباید Microinteractions را بدون دلیل پیاده سازی نمایید. انیمیشن دکمه ای که دارای Call-To-Action است، با انیمیشینی که باید کاربر را ترغیب به کلیک روی آن دکمه نماید، متفاوت می باشد.

• ماندگاری

نکته بسیار مهم در ایجاد Microinteractions این است که باید طبیعی به نظر برسند. نباید این حس به بازدیدکننده القا شود که او را توسط انیمیشن‌ها احاطه کرده اید تا به هدف خود برسید. در واقع کاربران نباید متوجه Microinteraction ها شوند.

• تجربه اندوزی و تست

مانند بخش های دیگر یک سایت وردپرسی که در دسترس عموم قرار می‌گیرند، نیاز است تا Microinteractions را نیز مورد بررسی دوره‌ای قرار دهید. دلیل آن نیز بررسی عملکرد صحیح Microinteractions و بهبود آن می باشد.

بهترین راهکار این است که گزارش عملکرد Microinteractions را مستقیما از کاربران سایت دریافت نمود. همچنین می‌توان به مرور زمان، Microinteractions را تغییر داد تا بهترین نسخه ممکن را یافت.

جمع بندی

Microinteraction ها سریعا در حال تبدیل شدن به بخشی بسیار مهم از تجربه کاربری وردپرس هستند. به صورت میانگین، صرفا 15 ثانیه وقت دارید تا توجه بازدیدکنندگان را به سایت خود جلب کنید. استفاده صحیح از Microinteractions در وردپرس می‌تواند به جذب کاربران کمک کند. می‌توان پیش‌بینی کرد که در آینده Microinteractions قابلیت‌های بیشتری به سایت‌های وردپرسی اضافه خواهند کرد.