درحال حاضر مدیر محصول هستم در basalam.com. پیش از این طراح UI/UX بودم. به پروداکت دیزاین و هر پدیدهای که متاثر از هوشمندی یک دیزاینر باشه علاقهمندم و حالا حالاها میخوام یاد بگیرم.
3 راهبرد اساسی در طراحی «No Result Page»
مقدمه:
چندبار اتاق افتاده که در گوگل چیزی رو سرچ کنید و نتیجه ای پیدا نکنید؟! اونایی که سن و سال بیشتری دارن شاید به خاطر بیارن که قبلا این اتفاق می افتاد اما این روزها، ما دیگه همچین چیزی رو در گوگل نمی بینیم. اما چرا؟
- گوگل نمی ذاره غلط املایی داشته باشید.
- گوگل ادامه کوئری شما رو حدس می زنه. پس امکان ورود کوئری اشتباه رو هم کم میکنه.
- گوگل از شیر مرغ تا جون آدمیزاد رو شامل میشه. پس احتمالا اطلاعاتی نیست که شما بخواید و تو گوگل پیدا نشه.
- گوگل خیلی باهوشه. براساس سابقه جستجو و هزار جور الگوریتم دیگه، بالاخره می تونه یه چیزی مرتبط به کوئری شما بهتون نشون بده و در هربار تلاش شما رو برای رسیدن به جواب درست کمک می کنه.
خب همه اینا باعث شده که گوگل موتور جستجوی خفن و دوست داشتنی باشه و ما رو هیچوقت دست خالی برنگردونه.
اما همه این ویژگی های خوب در موتورهای جستجوی سایت ها یا اپلیکیشن هایی که ما تولیدشون میکنیم نیست و گه گاه کاربرای ما نتیجه ای برای جستجوشون پیدا نمی کنن. این موضوع تجربه کاربری بدی داره و بعد از چندبار تلاش احتمال اینکه کاربر سایت ما رو رها کنه و بره زیاده.
دیزاین مناسب و هوشمندانه این صفحات می تونه این تهدید رو تبدیل به فرصت کنه. اما چطور؟!
سه راهبرد مهم در طراحی صفحه جستجوی بی نتیجه
خیلی از اوقات اون چیزی که کاربر می خواد تو سایت ما هست اما به دلیل هوشمند نبودن موتور جستجوی ما و اشتباهات ناخواسته کاربر، جوابی پیدا نمیشه.
وقتی کاربر به این صفحه میرسه مثل این میمونه که به یک خطا برخورد کرده که مانع ادامه مسیرش شده. یکی از قوانین مهم که باید همیشه حواسمون بهش باشه اینه که به کاربر کمک کنیم تا با خطاها به درستی کنار بیاد.
10 Usability Heuristics for User Interface Design
#9: Help users recognize, diagnose, and recover from errors
سه راهبرد مهم در طراحی صفحات جستجوی بی نتیجه:
1- به طور واضح توضیح بدیم که نتیجه ای مطابق با جستجوی کاربر پیدا نشده.
2- حتما چند پیشنهاد برای شروع دوباره و ادامه مسیر به کاربر بدیم.
3- کاربر رو مسخره نکنیم یا مقصر ندونیم.
1- به طور واضح توضیح بدیم که نتیجه ای مطابق با جستجوی کاربر وجود نداره.
اولین قدم برای کمک به کاربر، این است که به طور واضح کاربر را متوجه اشکال به وجود آمده بکنیم. همچنین پیام باید اونقدر واضح باشد که کاربر دچار سوءتفاهم و اشتباه نشود.
کاربران مدت زیادیه که از موتورهای جستجوی مختلف استفاده می کنند و مدل ذهنی (mental module) و انتظارات مشخصی از ساختار صفحه سرچ دارند. وقتی می خوایم به کاربر بگوییم که نتیجه ای وجود نداره باید دقت کنیم که ساختار (layout) متفاوتی ارائه کنیم.
به عنوان مثال صفحه بی نتیجه سایت NexTag را ببینید.استفاده از ابزارهای ردیابی نگاه (eye tracking) نشون داده که تمرکز دید کاربران بیشتر روی لینک های پیشنهادی بوده و عبارت « ... sorry, no matches found for » اصلا دیده نشده. این به خاطر مدل ذهنی کاربره که در اسکن صفحه جستجو، لینک های بالای صفحه رو معمولا صرف نظر می کنه و میره سراغ لیستی از نتایج که با یه سختار منظم چیده شدند. کاربر از مشاهده خط بالایی صرف نظر کرده. و سریع دنبال تیترهای درشت آبی رنگ می گرده. نتیجه اینه که کاربر پیام اصلی رو نمی بینه، و به جاش پیشنهاداتی برای جستجوی دوباره می بینه.
2- حتما چند پیشنهاد برای شروع دوباره و ادامه مسیر به کاربر بدیم.
تقریبا همه کاربرای شما می دونن برای جستجو لازمه که عبارتی نیازشون رو توصیف میکنه بنویسند و روی دکمه جستجو بزنند. اما تعداد زیادی از کاربران راه های پیشرفته تر مثل اصلاح کوئری و یا ساز و کار موتورهای جستجو رو نمیدونن ( کاملا طبیعیه که ندونن ). بنابراین وقتی به صفحه بی نتیجه می رسند فرصت خوبیه که با چند راهکار، بهشون کمک کنیم تا بتونن مساله شون رو حل کنند:
- کوئری کاربر رو بازگو کنید(did you mean...)
- باکس جستجو همچنان در دسترس باشد (کوئری که کاربر وارد کرده در باکس باشه تا بتونه در صورت لزوم ویرایش کنه)
- کوئری های مشابه که قطعا دارای نتیجه هستند رو به کاربر پیشنهاد بدید.
- نگارش کوئری کاربر را اصلاح کنید.
- روش نوشتن کوئری دقیق تر رو به کاربر یاد بدید.(استفاده از کلمات بیشتر یا کمتر و ...)
در مثال مربوط به سایت NexTag، تمام این راهکارها استفاده شده. در صورتی که کاربر از سردرگمی اولیه خلاص بشه و بفهمه که سرچ بی نتیجه بوده، می تونه به کمک لینک ها و پیشنهادات خوب این صفحه، مسیرش رو ادامه بده.
3- کاربر رو مسخره نکنیم یا مقصر ندونیم.
استفاده از بیان طنز برای بعضی برندها به خوبی جواب میده اما برای استفاده از شوخی و طنز در صفحات بی نتیجه احتیاط کنید. به شرایط محیطی و روانی کاربر دقت کنید. کاربر ممکنه دچار سردرگمی باشه یا عجله داشته باشه که کارشو انجام بده یا اینکه از تلاش بی نتیجه ناامید شده باشه. در اینجا اگر نتونید درست باهاش شوخی کنید ممکنه حس بدی به کاربرتون بدید.
کاربر ممکنه متوجه نشه که شما دارید بهش می خندید یا اینکه سعی دارید بخندونیدش. از اونجایی که فضا مجازیه امکان سوءتفاهم هم زیاده. پس احتیاط کنید و مطمئن بشید که کاربر می فهمه طنز یا فانتزی شما جنبه همدردی و همدلی داره.
برای مثال در صفحه زیر، مشخص نیست که عکس این آقا داره یه کاربر گیج و ویج رو به تصویر می کشه یا موتور جستجویی که گیج شده. این تصویر ممکنه کاربر رو ناراحت کنه.
پیشنهادها(recommendation) در صفحات جستجوی بی نتیجه
پیشنهاد (recommendation) در صفحات مختلف با الگوریتم ها و طراحی های متفاوت انجام میشه. یکی از صفحات مناسب، صفحات جستجوی بی نتیجه هستن. همونطور که در نمودار زیر می بینید، در جریان یک تحقیق در بین سایت های خرده فروشی، مشخص شده که 46% سایتها در این صفحه پیشنهاد میدن.
شما می تونید در این صفحه چنین پیشنهاداتی بدید:
- دستهبندیها (categories)
- پیشنهادهای شخصیسازی شده
- تبلیغات (ads)
- محصولات پرفروش یا محبوب
- شماره تلفن فروش، چت، لینکهای راهنما یا جایگزین
دو مثال زیر رو ببینید:
طراحی صفحه جستجوی بی نتیجه در باسلام
در طراحی این صفحه، اول پیام پیدا نشدن نتیجه رو دادیم. بعد سعی کردیم کوئری مورد نظر کاربر رو حدس بزنیم. و بعد نکاتی در مورد بهینه سازی کوئری به کاربر یاد دادیم.
جستجوی جدیدی که در باسلام پیاده سازی شده قابلیت جستجو در موضوعات مختلف رو داره، (با اینکه جستجو قابلیت تشخیص هوشمند رو داره)، به کاربر یاد دادیم که برای اینکه سریعتر به نتیجه برسه، میتونه کوئری رو دقیق تر بنویسه.
گام بعدی:
در گام بعدی از پیشنهادهای هوشمند هم استفاده می کنیم. پیشنهادهایی که براساس سابقه جستجو، بازدید و علاقه مندی های کاربر شخصی سازی شده اند.
اگر شما هم در طراحی صفحات جستجو، تجربیات خوبی دارید، یا در مورد مطالبی که نوشتم نظری دارید، خوشحال میشم مطرح کنید.
منابعی برای مطالعه بیشتر:
https://www.nngroup.com/articles/search-no-results-serp/
https://baymard.com/ecommerce-search/benchmark/page-types/no-search-results-page
https://justuxdesign.com/blog/8-awesome-examples-of-no-results-found-pages
مطلبی دیگر از این انتشارات
8 مهارت مهم در طراحی UI / UX
مطلبی دیگر از این انتشارات
اثر زیبایی بر کاربردپذیری — Aesthetic Usability Effect
مطلبی دیگر از این انتشارات
گامهای کلیدی برای ساخت یک دیزاین سیستم