مهم‌ترین نکات طراحی نوار جستجو در سایت

طراحی نوار جستجو در سایت

حتما برای شما هم پیش آمده است که دریک وب سایت به دنبال چیزی بوده‌اید، اما درنگاه اول آن را پیدا نکرده‌اید. در این شرایط ممکن است صفحه را به سمت بالا و پایین پیمایش (اسکرول) کرده و یا در منو به دنبال گزینه مد نظرتان بگردید، اما نتوانید محصول/مقاله/پست دقیقی که در ذهنتان داشتید را پیدا کنید. اینجاست که دو راه در پیش رو دارید؛ خارج شدن از سایت یا پیدا کردن نوار جستجو در سایت.

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

فهرست مطالب

آیا وب سایت شما به نوار جستجو نیاز دارد؟

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

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

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

مهم‌ترین نکات برای طراحی نوار جستجو

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

در ادامه مهم‌ترین نکاتی که در این طراحی باید مد نظر داشته باشید را بررسی می‌کنیم.

شامل یک فیلد متنی و یک دکمه جستجو باشد

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

می‌توانید از ویژگی‌هایی مانند افزودن کنتراست پس زمینه، رنگ و یا گرد کردن گوشه کادر استفاده کنید، اما حواستان باشد که کاربران به راحتی آن را تشخیص دهند.

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

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

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

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

در محل مورد انتظار قرار بگیرد

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

درباره نویسنده این مقاله
فروزان موسوی نژاد
فروزان موسوی نژاد

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

اشتراک گذاری این مقاله

اشتراک گذاری در twitter
Twitter
اشتراک گذاری در linkedin
LinkedIn
اشتراک گذاری در telegram
Telegram
اشتراک گذاری در whatsapp
WhatsApp
اشتراک گذاری در email
Email

خواندن این مطالب توصیه می‌شود

طراحی صفحه فرود

صفحه فرود چیست؟ 4 تکنیک مهم طراحی صفحه فرود برای افزایش نرخ تبدیل اگر از …

تکنیک های بازاریابی شبکه های اجتماعی

تکنیک های بازاریابی شبکه های اجتماعی تکنیک های بازاریابی شبکه های اجتماعی موارد ساده اما …

هدف در آنالیتیکس

تنظیم goal یا هدف در گوگل آنالیتیکس اگر شما یک سایت دارید، برای آنالیز آن …

تفاوت HTTP و HTTPS

تفاوت HTTP و HTTPS چیست؟ هر پروتکل چگونه کار می‌کند؟ تفاوت HTTP و HTTPS چیست؟ …