در مقاله قبلی که به اسلایدر و تاثیرش در طراحی سایت اشاره کردیم، دیدیم که اختلاف نظر های زیادی درباره استفاده کردن از آن و استفاده نکردن آن بین طراحان سایت وجود دارد. درباره هاور این موضوع صدق نمی کند. در واقع بیشتر طراحان سایت عاشق هاور هستند و آن هایی هم که از آن استفاده نمی کنند معمولا نظر منفی ای درباره اش ندارند. تاثیر هاور در طراحی سایت یک تاثیر کاملا بصری است و با جذابیت سایت ما سر و کار دارد و کمی کاربر را بیشتر با سایت ما درگیر می کند. هاور ها موارد هیجان انگیز اما کوچکی هستند که اگر به طور استاندارد استفاده شوند و کد های CSS آن برای سایت ما مضر نباشند، می توانند باعث جذابیت بیشتر سایت ما شوند و تجربه کاربری خوبی را هم با خود همراه کنند.
میخوای بعدا بخونی ؟
دانلــــــود PDF
فهرست
C
تاثیر هاور در طراحی سایت
C
هاور چیست؟
C
هاور چه تاثیری بر تصاویر سایت می گذارد؟
C
هاور بر روی لینک ها چگونه عمل می کند؟
C
انواع هاور ها به چه صورت است؟
C
چگونه یک افکت هاور بسازیم؟
C
مزیت های هاور چیست؟
تاثیر هاور در طراحی سایت
هر نوع جذابیت بصری ای که شما به سایتتان اضافه کنید می تواند کاربر را درگیر خودش کند. این جذابیت های بصری اگر به تجربه کاربری آسیبی وارد نکند می تواند به شدت تعامل و انگیجمنت کاربر را با شما بیشتر کند. تاثیر هاور در طراحی سایت به این صورت است که هاور، این حس را به مخاطب القا می کند که سایت شما زنده و فعال است. هاور اگر استاندارد باشد و به خوبی از آن استفاده شود، برای مخاطب اعجاب انگیز خواهد بود و مخاطب با طراحی سایت شما بیشتر ارتباط برقرار می کند و در ناخودآگاه به این فکر می کند که طراحی سایت شما به شدت جالب توجه است. بهتر است ما هم با اتفاق همدیگر بیشتر با هاور آشنا بشویم و “تاثیر هاور بر طراحی سایت” را بیشتر مورد ارزیابی قرار دهیم.
هاور چیست؟
هاور یک افکت جایگزین شونده در طراحی گرافیکی استی است که با عملکرد موس بر روی المان ها اجرا می شود. به این صورت که زمانی که شما یک المان در سایت خودتان مانند یک تصویر دارید و بعد از این که نشانگر موس مخاطب روی آن قرار می گیرد، المان تغییر می کند، می چرخد، رنگش عوض می شود و… شما از هاور استفاده کرده اید. برای مثال اگر دقت کرده باشید گاهی ممکن است شما در یک سایت یک دکمه را مشاهده کنید. این دکمه نظر شما را جلب می کند و رنگ آن هم قرمز است. زمانی که شما نشانگر موستان را بر روی آن می برید می بینید که رنگ دکمه از قرمز به مشکی تغییر می کند. این موضوع شاید موضوع کوچکی باشد اما نشان می دهد که سایت شما زنده و فعال است و انگار می فهمد که دارید با آن ارتباط برقرار می کنید.
هاور ها تقریبا بر روی تمام المان های سایت اعم از متون، عکس ها، دکمه ها و… قابل اجرا می باشد و اگر در جای درست استفاده شود می تواند جذابیت زیادی را به همراه داشته باشد. هاور ها معمولا با CSS نوشته و تعیین می شوند به این صورت که در CSS حالت اصلی المان تعریف شده و سپس برای همان مورد از CSS یک Alternation تعریف می شود و حالت هاور بوجود می آید.
هاور چه تاثیری بر تصاویر سایت می گذارد؟
گاهی شما با استفاده از هاور در تصاویر خود می توانید یک داستان تعریف کنید. یا مثلا با هاور می شود در سایت های فروشگاهی، تصاویر رنگ بندی های دیگر محصولات را مشاهده کرد یا حتی با بردن نشانگر موس روی تصویر، بوسیله هاور سمت دیگر محصول نیز مشخص شود که کاربر بتواند تمام اجزای تصویر را به خوبی مشاهده کند. تاثیر هاور در طراحی سایت در این موارد خودش را نشان می دهد. شما می توانید نمونه هایی از هاور های تصاویر را در مثال های زیر مشاهده کنید:
هاور بر روی لینک ها چگونه عمل می کند؟
یکی از مرسوم ترین استفاده از هاور ها بر روی لینک سایت ها می باشد. استفاده از هاور بر روی لینک ها نه فقط جذاب، بلکه لازم است. به این دلیل که هاور شدن لینک ها نشان می دهند که خطی که زیر متن انکرتکست کشیده شده است صرفا یک خط کشی ساده نیست و با عوض شدن حالت متن، شما می توانید بفهمید که یک لینک در این متن وجود دارد و بخواهید که بر روی آن کلیک کنید. یادتان هست که گفتیم لینک ها چقدر بر روی سئو سایت شما تاثیر دارند؟ حال تصور کنید که هاور با اینکه شاید کار کم اهمیتی به نظر می رسد، چقدر قرار است با همین عملکردش بر روی لینک ها به سئو سایت ما کمک بکند.
انواع هاور ها به چه صورت است؟
معمولا هاور ها به سه صورت خودشان را نشان می دهند. نه اینکه به غیر از این سه صورت نوع دیگری وجود ندارد، بلکه این سه نوع هاور مرسوم ترین هاور ها به حساب می آیند. همه این هاور ها به خودی خود نشان دهنده تاثیر هاور در طراحی سایت هم هستند و نمی شود گفت که دقیقا کدام یک از آن ها تاثیر بیشتری را در انگیجمنت مخاطب می گذارد. این هاور ها شامل موارد زیر می شوند:
نوع زوم: این نوع بیشتر برای تصاویر استفاده می شود که زمانی که کاربر نشانگر موس را روی تصویر می برد، تصویر زوم می شود و کاربر می تواند جزئیات بیشتری را مشاهده کند.
متن ها Slide Up: با رفتن نشانگر موس بر روی تصویر، یک متن در بالای آن ها ظاهر می شود که معمولا اطلاعاتی را درباره تصویر به مخاطب می دهد یا ممکن است یک آیتم قابل کلیک کردن در آن ها وجود داشته باشد.
دکمه “Read more”: در این نوع هاور ما یک تصویر داریم که شامل متن و پس زمینه می باشد. حال این متن ممکن است یک عنوان جذاب باشد که کاربر را کنجکاو کند. ما با قرار دادن دکمه Read More یا بیشتر بخوانید مخاطب را مجاب می کنیم که روی آن کلیک کند و با هاور متن بیشتری نمایش داده شود.
چگونه یک افکت هاور بسازیم؟
هم HTML و هم CSS در سایت با کد ها تعریف می شوند. هرکدام از المان هایی که ما در سایت داریم کد های کلیدی خودشان را دارند. ما بوسیله CSS و کلید های آن می توانیم هاور را برای یک المان فعال کنیم. به نظر کار ساده ای می رسد اما چندان هم ساده نیست و برای اجرای آن باید حداقل کمی از دانش برنامه نویسی و کد نویسی سر در بیاوریم. برای اینکه به المان خودمان هاور اضافه کنیم می توانیم از کد زیر استفاده کنیم:
#cc-m-11189106772 .cc-imagewrapper
#cc-m-11189106772
.cc-imagewrapper
#cc-m-11189106772
.cc-imagewrapper
#cc-m-11189106772 .cc-imagewrapper
#cc-m-11189106772
.cc-imagewrapper
@media only screen and (max-width:
#cc-m-11189106772 .cc-imagewrapper
#cc-m-11189106772 .cc-imagewrapper
مزیت های هاور چیست؟
حال که از تاثیر هاور در طراحی سایت با خبر شدیم بهتر است به مزایای دیگر آن نیز اشاره کنیم. تمامی این مزایا شاید کوچک به نظر برسند اما مجموع آن ها در کنار یکدیگر به ما این اطمینان را می دهند که اگر تا به حال از هاور استفاده نمی کردیم، از حالا به بعد بهتر است که کمی بیشتر از آن استفاده کنیم و در سایت خودمان از این جذابیت بی بهره نمانیم. این مزیت ها شامل موارد زیر می شوند:
توجه مخاطب را جلب می کند.
جالب و هیجان انگیز است.
اطلاعات اضافی را فراهم می کند.
به جذابیت سایت کمک می کند.
وب سایت را قابل تعامل می کند.
به مخاطب می فهماند که المان هاور شده کارکردی دارد.
به مخاطب می فهماند که المان هاور شده کارکردی دارد.
نرخ تبدیل بازدید کننده به مشتری را افزایش می دهد.
این تعامل ها باعث بالا رفتن ترافیک در سایت شما می شود.
می تواند مقدار کلیک های وب سایت شما را افزایش دهد.
شانس جذب مشتری را بیشتر می کند.
در نهایت سود دهی شرکت شما را بیشتر می کند.
نتیجه گیری
هیچ امکان و جذابیتی در یک سایت بدون علت نیست. هاور هم یکی از همین جذابیت های سایت محسوب می شود که استفاده از آن ضرری ندارد. هاور ها سرعت سایت را پایین نمی آورند و کد های آن ها انقدر ساده هستند که به ساختار سایت آسیبی وارد نمی کنند. تاثیر هاور در طراحی سایت دیدیم که با وجود سادگی آن بسیار بالاست و تقریبا همه طراحان سایت حرفه ای از هاور ها استفاده می کنند عاشق آن هستند. حواستان باشد که هاور شما البته باید به المانتان بیاید و می تواند مفهوم و مقصودی هم پشت آن باشد که مخاطب را بیشتر با سایت درگیر بکند.
از هاور در سایت های خودتان استفاده بکنید و تاثیر شگفت انگیز آن را مشاهده کنید. مطمئن باشید که این تغییر دهنده المان، قرار نیست هیچ آسیبی به سایت شما وارد بکند و اتفاقا قرار است که جذابیت سایت شما را برای مخاطب دو چندان هم بسازد. ممنون که در این مقاله هم با ما همراه بودید و امیدواریم که مواردی که گفتیم به کار شما بیاید و مورد توجهتان قرار گرفته باشد.
منبع:
gmosolutions