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

نقش مثبت و تاثیرگذار هاور (Hover) روی تجربه کاربری وب سایت باعث شده که به یک ویژگی پرطرفدار در طراحی سایت و بخصوص برای طراحی سایت های فروشگاهی تبدیل شود.هاورها به طور معمول برای دادن اطلاعات بیشتر به کاربر بلافاصله بعد از قرار گیری نشانگر موس (mouse) روی یک آیتم از سایت مورد استفاده قرار می گیرند.یکی از کاربردهای اصلی hover در طراحی وب سایت های فروشگاهی و تجاری برای هدایت کاربر به کلیک روی دکمه های فراخوان (Call To Action) مانند دکمه "اضافه به سبد خرید" می باشد که در نهایت باعث صرفه جویی در وقت کاربر و هدایت هرچه سریعتر وی به صفحات اصلی وب سایت می گردد.

 بنابراین درک اهمیت و تاثیر مثبت این اِفِکت و بکارگیری آن هنگام طراحی وب سایت بسیار مهم است.البته هنگام طراحی سایت باید به این نکته توجه داشت که استفاده از hover منجر به ایجاد حواسپرتی و سردرگمی کاربران نشود.

بررسی ها نشان داده کابران نیز به هاورها علاقه دارند و آنها را یکی از عناصر مفید در طراحی وب سایت ها می دانند.

بررسی Hoverو تاثیر آن بر تجربه کاربری (UX)وب سایت:

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

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

·         هاور می تواند به گونه ای طراحی شود که شکل و اندازه عکس را تغییر دهد ، رنگ آن را عوض کند یا آیتم را از یک زاویه دیگر نماش دهد

·         معمولا اگر هاورها متناسب با رنگ های مورد استفاده در طراحی سایت بکار گرفته شوند تاثیر بهتری خواهند گذاشت.

·         هنگام طراحی وب سایت می توان از Hover ها برای کمک به کاربر جهت وارد شدن به لینک یا یک صفحه دیگر از سایت (بجای استفاده از منوی سایت) استفاده کرد.

·         هاورها یکی از بهترین روش ها برای هدایت کاربر به دکمه های فراخوان (Call To Action) محسوب می شوند.

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

4 نمونه از بکارگیری هاور در طراحی سایت فروشگاهی

در وب سایت های فروشگاهی ، صفحه های داخلی از اهمیت زیادی برخودارند.تقریبا صفحه مربوط به هریک از محصولات این پتانسیل را دارد تا صفحه فرود (Landing Page) وب سایت شما باشد - صفحه ای که کاربر پس از جستجو وارد آن می شود - و لازم است هنگام طراحی سایت فروشگاهی به این موضوع حتما توجه شود.

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

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

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

·         راه دیگر این است که هنگام Hover کردن روی محصول قیمت و دکمه اضافه به سبد خرید نمایان شود.با این کار دیگر لازم نیست کاربر به دنبال دکمه اضافه به سبد خرید بگردد.

·         می توان طراحی صفحه سایت را به گونه ای انجام دادکه هاور کردن روی محصول منجر به ایجاد یک سایه تیره تر روی عکس محصول شود که به آن (Grounding Effect) گفته می شود.این کار باعث ایجاد تعادل بصری بیشتر در وب سایت می گردد.

·         یکی دیگر از روش ها می تواند این باشد که زمانی که کاربر روی دکمه اضافه به سبد خرید هاور می کند (نشانگر موس خود را روی آن قرار می دهد یا در گوشی موبایل با انگشت دست آن را لمس می کند) محتوای کنونی داخل سبد خرید برای وی به نمایش در بیاید.

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

اِلِمان های متعددی در طراحی سایت وجود دارد که بکارگیری آنها در جای مناسب و استفاده صحیح از آنها می تواند تاثیر بسیار زیادی در موفقیت کسب و کار شما داشته باشد.علاوه بر اینها یک طراحی وب سایت که کاربرپسند انجام شده باشد در روند سئو و بهینه سازی نیز بسیار بهتر عمل خواهد کرد.بخصوص در هنگام طراحی وب سایت فروشگاهی نباید حتی عناصر به ظاهر کوچکی مانند Hover را نادیده گرفت و از تاثیر آن در افزایش نرخ تبدیل فروشگاه های آنلاین چشم پوشی کرد.

در صورتی که نیاز به مشاوره و راهنمایی دارید همواره می توانید با ما تماس بگیرید.