طراحی منوی سایت؛ الگوها، برچسب‌ها و سنجش با کاربر

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

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

منوی سایت چه کاری باید بکند

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

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

الگوهای رایج در طراحی منوی سایت

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

برچسب‌ها؛ کلمه‌هایی که منو را می‌سازند یا خراب می‌کنند

بیشتر مشکلات منو، مشکل کلمه است، نه مشکل الگو. چند اصل برای نوشتن برچسب:

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

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

عمق یا پهنا؛ چند سطح و چند گزینه

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

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

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

منوی موبایل

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

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

سنجش منو: کارت سورتینگ، تست درختی، تست اولین کلیک

برای طراحی منوی سایت بر اساس داده، سه روش پشت سر هم کار می‌کنند:

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

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

مثال: منوی سایت یک آموزشگاه زبان

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

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

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

طراحی منوی سایت با یوزر تستینگ

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