نقش Hover در طراحی سایت

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

برای آگاهی از خدمات پشتیبانی سایت مه ویژن روی لینک زیر کلیک کنید. پشتیبانی سایت

 

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

Hover چیست؟

هاور(Hover) نوعی از طراحی است که برای دادن اطلاعات بیشتر به کاربر در طراحی سایت به کار می‌رود. در این سبک از طراحی با رفتن نشانگر موس روی هر یک از المان‌ها، تغییری در رنگ، اندازه، سایز، تصویر و... المان رخ می‌دهد. با اینکار توجه کاربر به آن المان جلب می‌شود.

زمانی که کاربری با استفاده از لپ‌تاپ و یا رایانه شخصی از سایت بازدید می‌کند، تعامل کاربر با سایت از طریق موس (mouse) اتفاق می‌افتد. زمانی که المان‌های مختلف وب‌سایت ما دارای هاور باشند، به طرز غیر مستقیمی کاربر را ترغیب به کلیک روی گزینه مورد نظر خود کرده ایم.

از Hoverها می‌توان در بخش‌های مختلف وب‌سایت مثل منو، لیست محصولات، عکس‌ها،لینک‌ها و المان‌های مختلف سایت استفاده کرد؛ اما باید توجه داشت که استفاده از hoverها به طرز هوشمندانه‌ای انجام شود تا باعث بالا رفتن تجربه کاربری سایت شود. اگر از هاورها به تعداد زیاد و بدون دلیل منطقی و صرفا برای ایجاد جذابیت استفاده کنید، این کار سبب شلوغ شدن وب‌سایت و حواس پرتی کاربران می‌شود و در بسیاری از موارد نتیجه عکس به همراه خواهد داشت و باعث سردرگمی کاربران در پیدا کردن مطلب مورد نظرشان می‌شود.

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

همچنین می‌توانید با استفاده از هاورها در صفحه لیست محصولات جذابیت بصری صفحه را بالا ببرید و اطلاعات بیشتری نیز به مخاطب خود بدهید. به طور مثال طراحی صفحه محصولات شما می‌تواند به گونه‌ای باشد که کاربر با هاور کردن (بردن نشانگر موس روی المان) روی محصولات مختلف قیمت محصول و گزینه “افزودن به سبد خرید” را مشاهده کند.

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

اهمیت استفاده از هاور در طراحی سایت

امروزه استفاده از افکت‌های hover به جز جدا نشدنی طراحی وب‌سایت تبدیل شده است و شما می‌توانید انواع هاور‌ها را در وب‌سایت‌ها مشاهده کنید. برخی از طراحان نیز به طرز هوشمندانه‌ای از این افکت در طراحی وب‌سایت استفاده می‌کنند و با استفاده از این افکت کاربر را به سمت صفحه هدف خود می‌کشانند.

استفاده از هاور باعث زیبایی و جذابیت وب‌سایت می‌شود. با استفاده از افکت‌های hover، جلوه‌های بصری سایت را بالا برده و مخاطب را از نظر بصری تحت تاثیر قرار می‌دهیم؛ علاوه بر این هاور باعث تعامل بیشتر کاربر با سایت می‌شود. به اینصورت که کاربر به ازای هر کنش خود، واکنشی از طرف سایت دریافت می‌کند و تحقیقات نشان داده است که هرچه تعامل کاربران با وب‌سایت بالاتر باشد، کاربر مدت زمان بیشتری را در وب‌سایت سپری می‌کند و این عمل باعث بالا رفتن نرخ Time On Site (مدت زمانی که کاربر در سایت سپری می‌کند) می‌شود و تاثیر مثبتی بر سئو سایت خواهد گذاشت.

از طرف دیگر با استفاده از افکت‌های هاور می‌توانیم توجه کاربر را به سمت بخش‌های مهم‌تر وب‌سایت جلب کنیم و کاربر با ورود به سایت می‌تواند به راحتی بخش مورد نظر خود را پیدا کرده و دسترسی کاربر به بخش‌های مختلف سایت آسان‌تر می‌شود و در نهایت تجربه کاربری سایت بالا می‌رود. ازهاورها به عنوان بهترین روش برای برای هدایت کاربر به سمت دکمه فراخوان‌ (call to action) یاد می‌شود.

چگونه از hoverها در طراحی وب‌سایت استفاده کنیم؟

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

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

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

• استفاده از هاور برای ترغیب کاربر به کلیک روی لینک خاص

همانطور که گفتیم یکی از مهم‌ترین کاربردهای hover زمانی است که می‌خواهیم کاربر را به صفحه مشخصی از وب‌سایت هدایت کنیم. هنگام طراحی call to action می‌توانیم با کمک هاورها دکمه فراخوان را برجسته‌تر نشان داده تا کاربر ترغیب به کلیک روی آن شود.

• استفاده از هاور در طراحی صفحه اول وب‌سایت

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

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