دوره‌ طراحی

طراحی یک بخش جستجوی بی‌عیب و نقص

چرا نباید دکمه های غیر فعال را خاکستری کنیم؟

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

در این مقاله خواهیم دید که چطور می‌توان این قسمت را بهتر طراحی کرد تا کاربر بدون اتلاف وقت به هدفی که می‌خواهد برسد.

بهترین تکنیک‌ها

۱- از آیکون ذره‌بین استفاده کنید.

همیشه بخش جستجو را همراه یک آیکون قرار دهید. آیکون‌ها، نماینده بصری یک شی‌ء، رفتار و یا ایده هستند. تعداد کمی از آیکون‌ها هستند که تمام کاربران از پیش با آنها آشنایی داشته باشند. آیکون ذره‌بین یکی از همین ‌آیکون‌هاست.

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

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

۳- یک دکمه‌ی جستجو برای بخش جستجو بگذارید.
دکمه به کاربران کمک می‌کند که بدانند یک گام دیگر برای شروع جستجو وجود دارد، حتی اگر تصمیم بگیرند این کار را با فشار دادن دکمه‌ی ‌Enter بکنند.
توصیه:

  • سایز دکمه ارسال را درست انتخاب کنید، طوری که کاربر مجبور نباشد موس را خیلی دقیق روی آن بگذارد. یک محدوده‌ی بزرگ‌تر و قابل کلیک، پیدا کردن نقطه و کلیک کردن را آسان‌تر می‌کند.
  • بگذارید کابران بتوانند با زدن Enter و کلیک آیکون، دکمه‌ی ارسال را بزنند. بسیاری از کاربران هنوز عادت دارند که حتما یک دکمه را برای ارسال کلیک کنند.

۴- بخش جستجو را در تمام صفحات بگذارید.
همیشه باید دسترسی به بخش جستجو را در هر صفحه فراهم کنید؛ چرا که اگر کاربران نتوانستند محتوای مورد نظرشان را پیدا کنند، صرف نظر از اینکه در کجای وبسایت شما هستند تلاش خواهند کرد از این بخش استفاده کنند.

۵- بخش جستجو را ساده بسازید.
اگر می‌خواهید یک بخش جستجو طراحی کنید، طوری آن را بسازید که واقعاً شبیه یک بخش جستجو باشد و تا جایی که ممکن است ساده باشد. برطبق مطالعات کابردپذیری، نداشتن جستجوی پیشرفته به صورت پیش‌فرض، کاربر پسندتر است. گزینه‌های جستجوی پیشرفته (مانند جستجوی ‌Boolean در مثال زیر) می‌تواند کاربرانی را که قصد استفاده از آن را دارند، سردرگم کند.

۶- بخش جستجو را در جایی که کاربر انتظار دیدن آن را دارد بگذارید.
خوب نیست که کاربر به دلیل مشخص نبودن جای بخش جستجو، مجبور باشد به دنبال آن بگردد.
طرحی که در پایین می‌بینید، تحقیقی است که توسط اِی.دان شیخ (A. Dawn Shaikh) و کیسی لنز (Keisi Lenz) انجام شده و موقعیت قابل انتظار جای جستجو را در بین ۱۴۲ شرکت کننده در یک نظرسنجی نشان می‌دهد. این تحقیق به این نتیجه دست یافته که در دسترس‌ترین نقطه برای کاربران در قسمت بالای راست یا بالای چپ هر صفحه است؛ یعنی در جایی که کاربران با توجه به الگوی دیداری F شکل می‌توانند به راحتی آن را پیدا کنند. (الگویF شکل الگویی است مبتنی بر این اصل که چشم محتوا را در بالای صفحه به صورت افقی مانند شکل یک F انگلیسی و سپس چپ صفحه را به صورت عمودی دنبال می‌کند.)
شکل محدوده‌هایی را نشان می‌دهد که شرکت‌کننده‌ها انتظار دیدن بخش جستجو را در آن‌ها دارند. گوشه‌ی بالای راست اولین جای مورد انتظار آنهاست.
بنابراین، بخش جستجو را در در قسمت بالا چپ یا بالا درمرکز صفحه قرار دهید و مطمئن باشید که کاربر شما در جای مورد انتظارش آن را پیدا خواهد کرد.
سایت YouTube که محتوای بسیار زیادی دارد از قسمت بالا و مرکز استفاده کرده است.
توصیه:

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

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

طبق یک قاعده‌ی تجربی، داشتن ۲۷ حرف به عنوان ورودی مطلوب است (که ۹۰ درصد درخواست‌ها را در خود جای خواهد داد).
از اندازه‌ی مناسبی برای جستجو استفاده کرده است.
توصیه: استفاده از یک جعبه‌ی جستجوی باز شونده را که با کلیک بر روی آن بزرگ‌تر می‌شود، در نظر داشته باشید. با این کار راهنمایی بصری لازم را به کاربر در جهت پیدا کردن و انجام جستجوی سریع می‌دهید و همچنین در فضای صفحه صرفه‌جویی می‌کنید.

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

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

توصیه:

  • اطمینان حاصل کنید که پیشنهاد خودکار قابل استفاده است و درست کار می‌کند. پیشنهاد خودکاری که ضعیف طراحی شده باشد می‌تواند باعث سردرگمی کاربر شود. بنابراین برای بهبود ابزار جستجو، از سیستم‌های تصحیح خودکار املای کلمات، شناخت کلمات ریشه‌ای و پیش‌بینی متن استفاده کنید.
  • پیشنهاد خودکار را باید هرچه سریع‌تر، یعنی بعد از اینکه حرف سوم وارد شد، فراهم کنید تا بلافاصله تقاضای کاربرتان را جواب داده باشید و تلاش آنها را برای ثبت اطلاعات بیشتر کاهش دهید.
  • کمتر از ۱۰ مورد را نشان دهید (و بدون اسکرول بار scroll bar) که اطلاعات زیاد خسته‌کننده نشود.
  • امکان جهت‌یابی با کیبورد را برای لیست پیشنهاد‌ها قراردهید. وقتی کاربر به پایین لیست اسکرول می‌کند، با عبور از مورد آخر باید به بالای لیست برگردد. دکمه‌ی Esc هم باید به کاربر امکان خروج از لیست را بدهد.

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

۹- مشخص کنید که کاربر چه چیزهایی را می‌تواند جستجو کند.
فکر خوبی است که یک نمونه‌ی درخواست جستجو در بخش ورودی قرار دهید تا کاربرد و چگونگی جستجو را به کاربر پیشنهاد دهد.اگر کاربر می‌تواند برای معیارهای متعدد جستجو کند، برای شرح  در بخش ورودی به آن اشاره کنید (مانند جستجوی سایت IMDB در مثال زیر). HTML5، قرار دادن متن در محل وارد کردن نوشته را آسان کرده است.
توصیه: راهنمایی‌های خود را به چند کلمه محدود کنید، در غیراینصورت بار شناختی را افزایش می‌دهید.

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

منبع: uxplanet.org

آکادمی آژانس طراحی دایره

آموزش طراحی در آژانس طراحی دایره شامل بوت‌کمپ طراحی ۰ تا ۱۰۰، طراحی تجربه کاربری، طراحی تعاملی، طراحی دیزاین سیستم، رنگ و تایپوگرافی و…

به اشتراک‌گذاری در

لوگو سایت

آژانس طراحی دایره

Search