۰۹۱۲ ۸۷۲ ۷۸ ۶۲

طراحی فرم جستجو

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

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

  • صفحه جعبه جستجو
  • صفحه نمایش قرار دادن

اگر چه توصیه های دقیق ممکن است براساس نیازها و اهداف شما ذهنی باشد (مثلا جستجو ممکن است یک ویژگی اولیه یا ثانویه برای سایت شما باشد؛ ممکن است ساده کردن یا پیشرفت با انتخاب موازی باشد)، نکاتی به طور کلی برای انواع برنامه‌ها و وب سایت‌ها چندین کار وجود دارد اما قبل از شروع سفر ما، بگذارید یک سوال مهم را پاسخ دهیم - چه‌ موقع به جستجو نیاز دارید؟

هنگامی که شما باید (یا نباید) طراحی فرم جستجو در سایت خود داشته باشید

وب سایتهای کوچکتر بدون طراحی فرم جستجو بهتر هستند.
هنگامی یک سایت دارای مقدار محدودی محتوا (به‌عنوان مثال کمتراز 100 تا 200 صفحه)، نیازی به جستجو ندارند.

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

طراحی فرم جستجو در سایت‌هایی که خدمات را از طریق تحویل اطلاعات (پورتال‌های خبری) و سایت‌هایی که رزرو، پرواز و تعطیلات را ارائه می‌دهند، ضروری است.

جعبه طراحی فرم جستجو

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

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

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

جستجو در پشت آیکون پنهان دارای عواقب منفی است:

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

همیشه جعبه جستجو همراه با نماد بزرگنمایی شیشه ای همراه است.

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

نکته: از ساده‌ترین نسخه ذره بین استفاده کنید، زیرا جزئیات گرافیکی کم سرعت تشخیص را افزایش میدهد.

جعبه جستجو را که کاربر انتظار دارد قرار دهید

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

یک دکمه جستجو برای جعبه جستجو را ارائه دهید.

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

نکات:

اطمینان حاصل کنید دکمه ارسال به اندازه مناسب است.
اجازه دهید کاربران با استفاده از Enter وارد جستجو شوند و با کلیک کردن روی نماد. بسیاری از کاربران هنوز هم عادت به کلیک کردن بر روی دکمه واقعی برای ارسال جستجو هستند. برای جلوگیری از مسائل دسترسی به صفحه کلید، مهم است که فرم را تست کنید. اصول تست صفحه کلید ساده است - کلید Tab را می توان برای حرکت از طریق کنترل های فرم استفاده کرد، Enter یک عنصر را انتخاب می‌کند.

مشخص کنید که کاربران چه می توانند جستجو کنند.

ایده خوبی است که یک فیلد نمونه‌ای رادر فیلد ورودی وارد کنید تابه کاربران نشان دهد کدام نمادهارا می‌توان استفاده‌کرد.
اگر کاربر می‌تواند برای چندین معیار جستجو کند، از نکات ورودی برای توضیح آن استفاده کنید.
مطمئن باشید که اشاره خودرا فقط به چند کلمه محدود کنید، درغیر این صورت شما بار واقعی شناختی را افزایش می‌دهید.
در برخی موارد، متن حفره یا سوراخ ممکن است یک مسئله دسترسی ایجاد کند: زمانی که متن حفره یا سوراخ طراحی شده به رنگ روشن تر از متن معمولی باشد، مشکل ایجاد کنتراست ایجاد می شود - این به معنی عدم پذیرش دستورالعمل های پذیرفته شده جهانی است برای دسترسی به وب (نسبت 4.5: 1 برای متن معمولی). علاوه بر این، با توجه به W3C، متن حفره یا سوراخ به طور گسترده ای توسط فن آوری های کمک کننده پشتیبانی نمی شود، و این امر برای کاربران بسیار مشکل است برای پر کردن اشکال دقیق.

جعبه جستجو را در هر صفحه قرار دهید

نیاز به کاربران برای دسترسی به کادر جستجو در هر صفحه ضروری است.
کاربران بیشتر به احتمال زیاد از جستجوی استفاده می‌کنند زمانی که نمی‌توانند محتوای مورد نظر خود را پیدا کنند. این به خصوص برای صفحات مرده مانند 404 درست است.

اندازه فیلد مناسب در طراحی فرم جستجو

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

نکات:

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

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

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

نکات:

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

نتایج صفحات

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

انتخاب یک طرح مناسب برای داده های شما

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

تعداد نتایج تطبیقی ​​را نمایش می دهد.

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

نمایش پیشرفت جستجو

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

نکته: اگر جستجو طول بکشد (بیش از 10 ثانیه) شما می توانید از انیمیشن استفاده کنید.
انیمیشن زیبا می تواند کاربران خود را منحرف کند و آنها را نادیده بگیرد.

«هیچ نتیجه ای را بر نمی گردانید». حذف یک نفر در صفحه بدون نتیجه می تواند ناامید کننده باشد، به خصوص اگر چندین بار تلاش کرده است.

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

به روشنی توضیح دهید که نتایج تطابقی وجود ندارد.

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

ارائه فیلتر و مرتب سازی گزینه ها

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

 

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

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