الگوهای طراحی ناوبری: ۹ چیدمان منو برای وب و موبایل

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

کاربران ناوبری را نمی‌خوانند. آن را اسکن می‌کنند، بهش اعتماد می‌کنند، و فقط وقتی خراب می‌شود متوجه‌اش می‌شوند.

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

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

---

ناوبری واقعاً برای چیست

ناوبری یک سوال را برای کاربر پاسخ می‌دهد: از اینجا کجا می‌توانم بروم؟ واضح پاسخ بده و حرکت می‌کنند. وادارشان کن دنبالش بگردند و می‌روند.

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

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

---

نوار ناوبری بالایی

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

Neon (neon.tech) یک نسخه تمیز از این را اجرا می‌کند. Wordmark در سمت چپ، لینک‌های ناوبری اصلی در مرکز، ورود به سیستم و یک دکمه CTA در سمت راست. هیچ چیزی پنهان نشده، هیچ چیزی تودرتو نشده، هیچ بار شناختی. در بهترین حالت، یک نوار بالایی کل داستان ساختار یک سایت را در یک ردیف بدون نیاز به هیچ تعاملی بیان می‌کند.

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

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

---

منوی همبرگری

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

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

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

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

---

نوار کناری ثابت

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

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

Slack، Notion، و Figma همه از نوارهای کناری ثابت در مقیاس اپ به همین دلیل استفاده می‌کنند. نوار کناری نقشه است. حذف آن به این معنی است که کاربران با هر عمل ناوبری آن مدل ذهنی را بازسازی می‌کنند که هزینه‌ای است که نباید بپردازند.

هزینه، فضای افقی صفحه است. در یک لپتاپ ۱۳ اینچی، یک نوار کناری ثابت ۲۵۰ تا ۳۰۰ پیکسل از محدوده محتوا استفاده می‌کند. در موبایل، اصلاً جایی برای آن نیست.

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

---

نوار tab پایین

نوار tab پایین سه تا پنج آیکون را در پایین یک صفحه موبایل، مستقیماً داخل منطقه شست، لنگر می‌اندازد. این استاندارد برای اپ‌های موبایل native است و، از سال ۲۰۲۶، پیش‌فرض برای هر محصول وبی است که مردم روزانه روی گوشی‌شان باز می‌کنند.

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

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

در سال ۲۰۲۶، نوار tab پایین پیش‌فرض برای هر محصولی است که مردم حداقل روزانه در موبایل باز می‌کنند. اگر یک محصول موبایل مصرف‌کننده یا یک progressive web app موبایل‌محور طراحی می‌کنید و از یک نوار پایین استفاده نمی‌کنید، باید دلیل مشخصی داشته باشید. "ما اول برای دسکتاپ طراحی کردیم" آن دلیل نیست.

---

منوی mega

یک mega menu یک آیتم ناوبری بالایی را به یک پنل چند ستونی گسترده از لینک‌ها، دسته‌ها، و گاهی tile‌های پیش‌نمایش گسترش می‌دهد. برای سایت‌هایی با کاتالوگ‌های بزرگ و سلسله‌مراتب پیچیده ساخته شده که بدون استفاده نشدنی شدن در یک dropdown ساده جا نمی‌شوند.

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

مشکل این است که mega menu‌ها از طراحی یک الگوی فقط دسکتاپ هستند. یک پنل dropdown چند ستونی به موبایل ترجمه نمی‌شود. سایت‌هایی که از آنها استفاده می‌کنند به یک استراتژی ناوبری کاملاً جداگانه برای صفحه‌های کوچک نیاز دارند که سطح طراحی و نگهداری را دو برابر می‌کند.

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

---

Breadcrumb‌ها

Breadcrumb‌ها مسیر از صفحه اصلی تا صفحه فعلی را نشان می‌دهند: خانه > CSS > Grid. آنها ناوبری اصلی نیستند. ناوبری جهت‌یابی هستند، و یک کارکرد دقیق دارند.

MDN از breadcrumb‌ها در هر صفحه مرجع استفاده می‌کند. وقتی از طریق یک جستجوی Google به مستندات CSS grid می‌رسید، مسیر breadcrumb فوراً به شما می‌گوید که این صفحه داخل CSS زندگی می‌کند، که داخل References زندگی می‌کند. آن context یک سلسله‌مراتب سه‌سطحه را در یک خط که برای تجزیه نیازی به تعامل ندارد خلاصه می‌کند.

Breadcrumb‌ها در سایت‌های مسطح بی‌فایده هستند. اگر کل محصول شما دو سطح عمق دارد، breadcrumb‌ها درهم‌ریختگی بصری اضافه می‌کنند بدون اینکه ارزش جهت‌یابی ارائه دهند. آنها در سایت‌های مستندات، سلسله‌مراتب‌های تجارت الکترونیک مثل خانه > مردانه > ژاکت > ضدآب، و هر سایتی که کاربران به طور منظم از طریق جستجو عمیقاً وارد می‌شوند جایگاه خود را دارند.

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

---

Command palette

Command palette یک overlay ایجاد شده با صفحه‌کلید است، معمولاً با Cmd+K یا Ctrl+K فراخوانی می‌شود، که ورودی متن را می‌پذیرد و اقدامات رتبه‌بندی شده، اهداف ناوبری، و نتایج جستجو را برمی‌گرداند. Linear، Raycast، Slack، و Figma همه آن را به عنوان یک سطح ناوبری درجه اول ارائه می‌دهند.

در سال ۲۰۲۶، command palette از یک ترفند کاربر قدرتمند به یک مکانیزم ناوبری اصلی در نرم‌افزار بهره‌وری جدی ارتقا یافته است. Cmd+K در Linear شما را در کمتر از دو ثانیه به هر issue، project، یا اقدام workspace می‌رساند. Raycast تقریباً کاملاً حول این الگو ساخته شده است. این محصولات هدف تایپ شده را به عنوان مسیر مستقیم‌تری نسبت به هر سلسله‌مراتب منویی در نظر می‌گیرند، چون برای افراد با عادات صفحه‌کلیدی، همین‌طور است.

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

استفاده صحیح، تقویت است، نه جایگزینی. یک command palette را کنار نوار کناری یا نوار بالایی خود اجرا کنید. به کاربران صفحه‌کلیدی بگذارید منو را کاملاً نادیده بگیرند.

بگذار بقیه بصری ناوبری کنند. هر دو مسیر باید وجود داشته باشند.

---

هدرهای sticky و کوچک‌شونده

یک sticky header در حین scroll کاربر در بالای viewport ثابت می‌ماند. یک shrinking header همین کار را انجام می‌دهد اما ارتفاع خود را پس از اینکه کاربر از یک آستانه scroll عبور کرد کاهش می‌دهد و فضای عمودی را بدون فدا کردن دسترسی به ناوبری بازپس می‌گیرد.

هر دو الگو ناوبری را در صفحه‌های طولانی بدون نیاز به scroll به بالا قابل دسترس نگه می‌دارند. در صفحه‌های پر از محتوا، این یک بهبود واقعی usability است. GitHub از یک sticky header در سراسر صفحه‌های repository استفاده می‌کند تا ناوبری اصلی، جستجو، و context repo همیشه در حین scroll از طریق issue‌ها، کد، و بحث‌ها در دید باشند.

هزینه، فضای عمودی صفحه است. یک sticky header ۶۰ تا ۷۰ پیکسلی آن ارتفاع را از هر موقعیت scroll ادعا می‌کند. در یک تبلت با ارتفاع ۷۶۸ پیکسل، این نزدیک به ۱۰ درصد از viewport است که به طور دائمی توسط ناوبری اشغال شده است. Shrinking header‌ها با کاهش به حدود ۴۰ پیکسل پس از scroll بخشی از آن را بازیابی می‌کنند، اما نیاز به پیاده‌سازی دقیق دارند تا عمدی به نظر برسند نه شکسته.

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

---

Footer چاق

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

Tailwind CSS، Stripe، و اکثر سایت‌های بازاریابی SaaS از footer‌های چاق با چهار تا شش ستون پوشش لینک‌های محصول، مستندات، صفحه‌های شرکت، قانونی، و لینک‌های اجتماعی اجرا می‌کنند. آنها هیچ هزینه‌ای در ارتفاع viewport در طول تجربه محتوای اصلی ندارند و یک نقشه مفید برای کاربرانی که با جستجوی چیزی خاص به پایین می‌رسند ارائه می‌دهند.

Footer‌های چاق برای SEO بیشتر از ناوبری زنده اهمیت دارند. هر لینک در یک footer چاق یک مسیر قابل crawl است. آنها یکی از روش‌های اصلی هستند که موتورهای جستجو صفحه‌های ثانویه و ثالثیه در یک سایت را کشف می‌کنند. از دیدگاه صرف usability، اکثر کاربران هرگز به footer scroll نمی‌کنند، اما آنهایی که این کار را می‌کنند در یک جستجوی عمدی هستند.

footer چاق را داخل تجربه‌های محصول logged-in نگذارید. Notion یک footer بازاریابی داخل ویرایشگر نشان نمی‌دهد. این الگو متعلق به سایت‌های بازاریابی و مراکز مستنداتی است که کاربران ناشناس و جدید آزادانه مرور می‌کنند.

---

چگونه الگوی مناسب را انتخاب کنیم

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

ترکیب الگوها طبیعی و مورد انتظار است. اکثر محصولات جدی از دو یا سه الگو استفاده می‌کنند. مستندات Tailwind CSS از یک نوار بالایی برای ناوبری سطح سایت، یک نوار کناری ثابت برای ناوبری اسناد، و breadcrumb‌ها برای جهت‌یابی سطح صفحه استفاده می‌کند. آن سه الگو به طور همزمان سه سطح مجزا از سلسله‌مراتب ناوبری را بدون همپوشانی پوشش می‌دهند.

Brainy به طراحان کمک می‌کند تصمیمات تیزتری سریع‌تر بگیرند روی کاری که واقعاً منتشر می‌شود. ببینید ما برای سازندگان چه می‌سازیم.

---

اشتباهات ناوبری که بی‌سروصدا usability را می‌کشند

پنهان کردن اقدامات اصلی در یک hamburger menu. اگر کاربران روزانه به یک ویژگی نیاز دارند، نمی‌تواند پشت یک tap اضافی زندگی کند. نرخ کلیک روی خود همبرگر را اندازه‌گیری کنید. اگر زیر ۳۰ درصد است، مسیرهای داخل برای اکثر کاربران نامرئی هستند.

برچسب‌گذاری ناسازگار در سطوح مختلف. "Insights" روی dashboard، "Reports" در ایمیل onboarding، "Analytics" در اسناد راهنما، همه به همان مقصد اشاره دارند. ناوبری یک واژگان است. هر مترادف یک علامت سوال در مدل ذهنی کاربر است.

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

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

استفاده بیش از حد از تودرتویی. یک dropdown سه سطح عمیق تقریباً همیشه یک مشکل معماری اطلاعات است که به اشتباه در UI نمایان شده. ابتدا ساختار را مسطح کنید. منوهای تودرتو برای اسکن کند هستند، در touch غیرقابل استفاده، و نیاز به کنترل دقیق ماوس برای باز ماندن در hover دارند.

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

---

سوالات متداول

متداول‌ترین الگوی ناوبری در وب چیست؟

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

چه زمانی باید از یک hamburger menu استفاده کنم؟

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

یک نوار ناوبری باید چند آیتم داشته باشد؟

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

آیا می‌توانم چند الگوی ناوبری در یک سایت استفاده کنم؟

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

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

ناوبری چگونه SEO را تحت تأثیر قرار می‌دهد؟

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

---

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

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

نه الگو تقریباً همه چیز را پوشش می‌دهد: نوار بالایی برای سایت‌های بازاریابی و مرجع گسترده، نوار کناری ثابت برای ابزارها و مستندات عمیق، نوار tab پایین برای موبایل استفاده روزانه، mega menu برای عمق کاتالوگ، breadcrumb‌ها برای جهت‌یابی سلسله‌مراتبی، command palette برای ابزارهای بهره‌وری سرعت‌محور، sticky header‌ها برای محتوای long-form، همبرگر به عنوان fallback برای مسیرهای ثانویه، و footer چاق به عنوان نقشه شانس دوم برای سایت‌های بازاریابی.

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

تحلیل‌های بیشتر طراحی وب و UI را در Brainy Papers کاوش کنید، یا کنار جامعه سازندگان Brainy بسازید و مهارت را در کنار ۲ میلیون طراح که به درست کردن اصول اساسی اهمیت می‌دهند تقویت کنید.