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

آیا تا به حال در وب سایتی به دنبال چیزی بوده اید اما موفق به پیدا کردن آن نشده اید؟

ممکن است صفحات را زیر و رو کرده باشید ، اما در نهایت نتوانستید محصول/پست/مقاله دقیقی را که در ذهن داشتید پیدا کنید. خسته کننده است ، نه؟

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

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

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

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

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

در حالی که هیچ “بله” یا “نه” سختی برای درج ویژگی جستجو وجود ندارد ، اما سایتهای بزرگتر عموماً از جستجو بیشتر از سایتهای کوچکتر سود خواهند برد. این امر به این دلیل است که وقتی کاربران با سایتی گسترده مواجه می شوند ، بیشتر به جستجو اعتماد می کنند.

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

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

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

گاهی اوقات ممکن است این نوار ها را با کمی تغییر ببینید ، اما اکثر آنها به دلیل سادگی و دسترسی به این شکل ظاهر می شوند.

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

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

2. در محل مورد انتظار قرار دهید

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

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

3. شامل نماد جستجو

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

به چند روش می توانید این نماد را به نوار خود اضافه کنید ، می توانید آن را روی دکمه جستجو قرار دهید:

می توانید آن را درون نوار جستجو قرار دهید:

و یا:

4. اندازه مناسب

اندازه نوار جستجوی شما بستگی به اهمیت آن در سایت شما و طول مورد انتظار یک پرس و جو معمولی دارد.

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

5.افزودن تکمیل خودکار را در نظر بگیرید

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

کاربران را از نظر تعداد پیشنهادات خسته نکنید – در حالی که بستگی به اندازه وب سایت شما و میزان محتوای فهرست بندی شده دارد ، معمولاً یک تا 10 محدوده خوبی است.