شما اینجا هستید: خانه » آموزش ux » طراحی یک search box مناسب

طراحی یک search box مناسب

search box ترکیبی از یک قسمت دریافت اطلاعات (input field) و دکمه ارسال میباشد. نظرات زیادی وجود دارد مبنی بر اینکه search box به خاطر اجزای تشکیل دهنده ساده اش، نیازی به طراحی پیچیده ای  ندارد.

اما هنگامی که کاربران با وب سایت هایی با محتواهای سنگین مواجه میشوند قبل از هر چیز به دنبال یک کادر جستجو میگردند تا بتوانند سریعتر و راحتتر به چیزی که مد نظر دارند دست پیدا کنند. به همین خاطر طراحی یک  search box خوب بسیار با اهمیت میباشد.در این مقاله ما به مواردی که به  طراحی یک search box مناسب کمک خواهند کرد اشاره میکنیم.

  • استفاده از آیکون ذره بین (magnifying-glass)

همیشه سعی کنید  search box شما ترکیبی از کادر جستجو و آیکون ذره باشد. زیرا آیکون ها نماد بصری از انجام یک عملیات میباشند.آیکون هایی کمی هستند که معنای واحدی در سراسر دنیا داشته باشند. و آیکون ذره بین یکی از همین موارد است.

استفاده از آیکون ذره بین

  • نمایش search box  به صورت واضح و برجسته

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

نمایش search box به صورت واضح و برجسته

نمایش search box به صورت واضح و برجسته

 

  • قرار دادن یک دکمه جستجو در کنار search box

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

قرار دادن یک دکمه جستجو در کنار search box

  • ازsearch box در تمامی صفحات سایت استفاده نمایید.

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

 

  • از search box ای با طراحی ساده استفاده کنید.

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

     

از search box ای با طراحی ساده استفاده کنید.

 

  • search box را در موقعیت های از سایت که کاربران انتظار دارند آن را در چنین موقعیتی بیابند قرار دهید

اینکه کاربران مجبور باشند به دنبال کادر جستجو در سایت بگردند اصلا خوب نیست. در جدول نشان داده شده در تصویر زیر، موقعیت هایی از صفحه سایت که برای قرار دادن search box مناسب است را نشان میدهد. که معمولا در بالای صفحه و یا بالا در سمت راست از سایت شما اولین موقعیت هایی هستند که کاربر انتظار داردsearch box  را در آنجا بیابد.(البته در سایت های فارسی موقعیت ها بر عکس میباشند)

قرار دادن search-box در موقعیت های مناسب

قرار دادن search-box در موقعیت های مناسب

 

  • استفاده از مکانیزم پیشنهاد دهی خودکار (auto-suggestion)

یکی از مواردی که موجب شده است موتور جستجوی گوگل در بین سایر موتورهای جستجو بسیار محبوب باشد داشتن مکانیزم auto-suggestion بسیار قوی میباشد. که کاربران را سریعتر به چیزی که میخواهند نزدیک میکند.

 

استفاده از مکانیزم پیشنهاد دهی خودکار

  • به طور واضح مشخص نمایید که کاربران از طریق search box چه مواردی را میتوانند جستجو نمایند.

ایده بسیار خوبی است که درsearch box  مثال هایی از مواردی که کاربر میتواند جستجو نماید را بیان کنیم.و در صورتی که کاربر میتواند از طریق کادر جستجو چندین مورد را جستجو نماید بهتر است که با بیان الگوهایی او را از این موضوع آگاه نماییم. و HTML5 این کار از طریق به کار بردن placeholder فراهم کرده است.

تعیین موارد مورد جستجو

 

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

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

لیست طراحان :  مشاهده طراحان

1 دیدگاه

  1. با تشکر از مقاله خوبتون

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.