منبع: بنیاد طراحی تعامل (IxDF) · بازنویسی آزاد: سپنتا پویا با کمک هوش مصنوعی · مهر ۱۴۰۵ · زمان مطالعه: حدود ۸ دقیقه

کادر جست‌وجو (Search Box) چیست؟

💡 این متن «بازنویسی آزاد» است: ایده‌ها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثال‌های تازه بازگو شده‌اند و ترجمهٔ کلمه‌به‌کلمه نیست. بخش‌های افزودهٔ مترجم در جعبهٔ منبع مشخص شده‌اند. ترجمه و بازنویسی این متن با کمک هوش مصنوعی انجام شده است.

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

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

کادر جست‌وجو چیست؟

کادر جست‌وجو (Search Box) به تعریف منبع، جزئی از رابط است که کاربر در آن پرسش خود را می‌نویسد و سامانه نتیجه‌های مرتبط را برمی‌گرداند. مسئله‌ای که حل می‌کند ساده است. کاربر در یک سامانهٔ بزرگ اطلاعات نمی‌خواهد همه‌چیز را دستی مرور کند.

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

کالبد یک کادر خوب

منبع نُه توصیه برای پیاده‌سازی کادر جست‌وجو دارد. نمودار بالای صفحه همین اجزا را روی یک کادر راست‌به‌چپ نشان می‌دهد. من توصیه‌ها را در سه دسته گذاشته‌ام.

دیده شدن. کادر باید قاب روشن و رنگ داخلی متضاد، معمولاً سفید، داشته باشد تا از اطرافش جدا شود. جایش بالای صفحه است، بالای ناحیهٔ نتیجه‌ها یا درون ناوبری اصلی. یک نشانهٔ دیداری، یعنی نماد ذره‌بین یا واژهٔ «جست‌وجو»، باید بگوید این کادر برای چیست. منبع با نقلی از نیلسن تأکید می‌کند که جست‌وجو باید از هر صفحه در دسترس باشد.

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

فرستادن و نتیجه. یک دکمهٔ دیدنی برای فرستادن باشد، و کلید Enter هم همین کار را بکند. در صفحهٔ نتیجه، واژهٔ جست‌وجو بالای نتیجه‌ها دیده شود و نتیجه‌ها به ترتیب ارتباط بیایند.

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

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

اندازه و متن راهنما

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

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

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

کادر دیدنی یا فقط نماد

این بخش هم افزودهٔ من است. در صفحه‌های کوچک، وسوسهٔ رایجی هست: کادر جست‌وجو را پشت یک نماد ذره‌بین پنهان کنیم تا جای بیشتری بماند.

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

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

بعد از جست‌وجو

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

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

مشکلات رایج

منبع بخشی را به مشکلات احتمالی کادر جست‌وجو اختصاص داده است. من این مشکلات را با چهار نمونهٔ رایج در محصولات امروز باز کرده‌ام.

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

دامنهٔ مبهم. کاربر باید بداند در کجا جست‌وجو می‌کند. آیا کادر کل سایت را می‌گردد، فقط همین دسته را، یا فقط راهنما را؟ متن راهنمایی مثل «جست‌وجو در کتاب‌ها» این ابهام را برمی‌دارد.

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

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

در بافت فارسی

جست‌وجو در فارسی دردسرهایی دارد که در راهنماهای انگلیسی دیده نمی‌شوند.

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

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

سه: نماد ذره‌بین را آینه نکنید. در رابط راست‌به‌چپ، جای نماد ذره‌بین از چپ به راست کادر منتقل می‌شود، چون کاربر از راست شروع می‌کند. ولی خود نماد نیازی به آینه شدن ندارد. ذره‌بین جهتی ندارد که با جهت خواندن تغییر کند. دکمهٔ پاک کردن هم باید در انتهای متن، یعنی سمت چپ، بنشیند.

چهار: نمایهٔ «ی» و «ک» و نیم‌فاصله را یکسان کنید. همان قاعده‌ای که برای فیلترها گفتیم، اینجا پایه‌ای‌تر است. «ي» و «ك» عربی با «ی» و «ک» فارسی، و «می‌خواهم» با «میخواهم»، باید یک نتیجه بدهند.

پنج: صفحهٔ بی‌نتیجه را بن‌بست نکنید. در فارسی احتمال غلط املایی، شکل‌های مختلف نوشتن یک واژه و واژه‌های محاوره بالاست. همین صفحهٔ بی‌نتیجه را برای کاربر فارسی‌زبان مهم‌تر می‌کند. پیشنهاد املای درست و دسته‌های نزدیک اینجا بیشترین اثر را دارد.

جمع‌بندی

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

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

اگر بخواهم یک پرسش بگذارم: آخرین باری که صفحهٔ بی‌نتیجهٔ محصولتان را دیدید کی بود، و به کاربر چه می‌گوید؟