سپنتا پویا — طراح محصول

دو ردیف از راست به چپ. ردیف پیش از: یک منوی کشویی با نوشتهٔ در کتاب‌ها، کنارش کادر واژهٔ جست‌وجو، و یک نوار صورتی کوتاه با برچسب نتیجه‌های کمتر از همان اول. ردیف پس از: کادر واژهٔ جست‌وجو، نوار تیرهٔ بلند همهٔ نتیجه‌ها، سه دکمهٔ فیلتر صورتی قیمت و رنگ و تاریخ، و نوار صورتی کوتاه‌شده با برچسب پالایش گام‌به‌گام
منبع: بنیاد طراحی تعامل (IxDF) · بازنویسی آزاد: سپنتا پویا با کمک هوش مصنوعی · مهر ۱۴۰۵ · زمان مطالعه: حدود ۸ دقیقه

جست‌وجوی پالایش‌شده (Refined Search) چیست؟

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

در یک فروشگاه اینترنتی «کفش» را جست‌وجو می‌کنید. هزار و دویست نتیجه می‌آید: کفش مردانه، زنانه، بچگانه، ورزشی، مجلسی، و چند جفت دمپایی. کفشی که دنبالش بودید احتمالاً جایی در این فهرست هست، ولی هیچ‌کس هزار و دویست نتیجه را نگاه نمی‌کند.

حالا فرض کنید دو کلیک کنید: «مردانه» و «سایز ۴۲». فهرست به سی و چند نتیجه می‌رسد. همین دو کلیک همان الگویی است که به آن جست‌وجوی پالایش‌شده می‌گویند.

جست‌وجوی پالایش‌شده چیست؟

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

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

شکل‌های پالایش

منبع چند راه اصلی برای پالایش نام می‌برد. برای هر کدام مثالی از خودم آورده‌ام.

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

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

پالایش بر اساس زمان. فقط نتیجه‌هایی که در بازهٔ مشخصی اضافه شده‌اند. در یک سایت خبری، «فقط هفتهٔ گذشته».

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

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

دو لحظه: پیش و پس از جست‌وجو

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

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

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

شکل پیشرفتهٔ حالت دوم را «جست‌وجوی چندوجهی» (Faceted Search) می‌نامند. مارتی هرست، پژوهشگر دانشگاه برکلی، در اوایل دههٔ ۲۰۰۰ روی پروژه‌ای به نام Flamenco کار کرد. این پروژه نشان داد کاربران مجموعه‌های بزرگ را بهتر می‌کاوند وقتی چند وجه مستقل، مثل رنگ و قیمت و تاریخ، را هم‌زمان ببینند و با هم ترکیب کنند. هرست این کار را در کتاب Search User Interfaces در سال ۲۰۰۹ هم جمع کرد. امروز تقریباً هر فروشگاه بزرگ اینترنتی شکلی از این الگو را دارد.

فیلتر بی‌بن‌بست

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

یک فیلتر رنگ با چهار گزینه و تعداد نتیجه کنار هر کدام: رنگ مشکی ۱۲۴ با نوار تیرهٔ بلند، رنگ سفید ۸۷ با نوار کوتاه‌تر، رنگ آبی ۳۱ با نوار صورتی کوتاه، و رنگ طلایی ۰ که کم‌رنگ است با برچسب خاموش، نه پنهان. زیرش یک دکمهٔ فیلتر فعال آبی با علامت ضربدر و توضیح فیلتر فعال با راه برداشتن در یک ضربه
نمودار از سپنتا پویا برای این ترجمه (sepantapouya.com)

تعداد را کنار هر گزینه بگویید. وقتی کاربر پیش از کلیک می‌بیند «آبی (۳۱)»، می‌داند چه چیزی منتظرش است. بدون عدد، هر کلیک یک حدس است.

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

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

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

بهترین روش‌ها و دام‌ها

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

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

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

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

پالایش در موبایل

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

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

فوری یا با دکمهٔ اعمال؟ در رایانهٔ رومیزی، نتیجه‌ها معمولاً با هر کلیک فوراً عوض می‌شوند. در موبایل، که فیلترها روی نتیجه‌ها باز شده‌اند، بهتر است کاربر چند فیلتر را انتخاب کند و بعد با یک دکمه اعمالشان کند. در این حالت، دکمهٔ اعمال بهتر است تعداد نتیجه را هم بگوید، مثلاً «نمایش ۳۱ نتیجه». با این کار همان اصل «فیلتر بی‌بن‌بست» در موبایل هم حفظ می‌شود.

در بافت فارسی

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

پنج نکتهٔ جست‌وجوی پالایش‌شده در بافت فارسی: ی و ک عربی را با ی و ک فارسی یکی کنید، نیم‌فاصله را در جست‌وجو نادیده بگیرید، رقم فارسی و انگلیسی هر دو کار کنند، لغزندهٔ بازه در راست‌به‌چپ از راست شروع می‌شود، و واژهٔ محاوره را هم بشناسید
نمودار از سپنتا پویا برای این ترجمه (sepantapouya.com)

یک: «ي» و «ك» عربی را با «ی» و «ک» یکی کنید. بعضی صفحه‌کلیدها و بعضی داده‌های قدیمی شکل عربی این دو حرف را دارند. کاربری که با صفحه‌کلید فارسی «کتاب» را جست‌وجو می‌کند، باید کالایی را هم ببیند که با «ك» عربی ثبت شده. این یکسان‌سازی باید هم در متن جست‌وجو انجام شود و هم در داده.

دو: نیم‌فاصله را در جست‌وجو نادیده بگیرید. کاربر ممکن است «می‌خواهم»، «میخواهم» یا «می خواهم» بنویسد. هر سه یک واژه‌اند. جست‌وجویی که این‌ها را جدا بداند، نیمی از نتیجه‌ها را از دست می‌دهد.

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

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

پنج: واژهٔ محاوره را هم بشناسید. کاربر فارسی‌زبان ممکن است «گوشی»، «موبایل» یا «تلفن همراه» بنویسد، یا «کاپشن» به‌جای «ژاکت». جست‌وجویی که مترادف‌ها را بشناسد، پیش از هر فیلتری به کاربر کمک کرده است. این همان یافت‌پذیری است، از زاویهٔ زبان.

جمع‌بندی

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

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

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

منبع

این نوشته «بازنویسی آزاد» است از موضوع What is Refined Search? منتشرشده در وب‌سایت بنیاد طراحی تعامل (Interaction Design Foundation — IxDF؛ بدون نام نویسندهٔ مشخص)، به‌همراه مقالهٔ همراه آن، Increase the User's Sense of Control with the Refined Search Design Pattern. مفاهیم پایهٔ برگرفته از این منبع — تعریف جست‌وجوی پالایش‌شده به‌عنوان الگوی رابط برای محدود کردن نتیجه‌ها با دسته، مسئلهٔ اضافه‌بار اطلاعاتی، شکل‌های پالایش بر اساس دسته، ویژگی، زمان و سلسله‌مراتب، اجزای پیاده‌سازی از کادر ورود تا حالت پیش‌فرض، نمونه‌های جست‌وجوی تصویر، مدیریت فایل و سایت اشتراک عکس، و فهرست بهترین روش‌ها و دام‌ها — از این منبع گرفته شده، اما متن فارسی و توضیح‌ها کاملاً مستقل نوشته شده‌اند.

متن مقالهٔ اصلی تحت هیچ لایسنس بازی منتشر نشده است؛ به همین دلیل اینجا ترجمهٔ کلمه‌به‌کلمه ارائه نشده و متن کامل انگلیسی (به‌همراه همهٔ تصاویر) در لینک زیر در دسترس است.

ارجاع‌های بیرونی: جست‌وجوی چندوجهی و پروژهٔ Flamenco از مارتی هرست و همکاران در دانشگاه برکلی؛ و مارتی هرست، Search User Interfaces (۲۰۰۹).

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

تصاویر: تصویر نمونهٔ صفحهٔ منبع با عنوان استفادهٔ منصفانه (Fair Use) آمده است و اینجا بازتولید نشده. هر سه نمودار این صفحه طراحی اختصاصی مترجم است.

مشاهدهٔ مقالهٔ اصلی
سپنتا پویا

مترجم: سپنتا پویا

طراح ارشد محصول. مقالات تخصصی UI/UX را با حفظ ساختار و لحن نسخهٔ اصلی و با کمک هوش مصنوعی به فارسی برمی‌گردانم.

دربارهٔ من

در این مقاله

  • - جست‌وجوی پالایش‌شده چیست؟
  • - شکل‌های پالایش
  • - دو لحظه: پیش و پس از جست‌وجو
  • - فیلتر بی‌بن‌بست
  • - بهترین روش‌ها و دام‌ها
  • - پالایش در موبایل
  • - در بافت فارسی
  • - جمع‌بندی

برچسب‌ها

  • جست‌وجو
  • فیلتر
  • الگوی رابط
  • ترجمه