❓ سوال اول: چند تا دکمه (آیکون) مجازیم توی باتم نویگیشنِ پایینِ صفحه بذاریم؟ هرچی بیشتر بهتر؟

💡 پاسخ:
نه، شلوغش نکنید! استاندارد طراحی (مخصوصاً تو متریال دیزاین گوگل) میگه بین ۳ تا ۵ عدد.
چرا؟
اول اینکه اگر بیشتر از ۵ تا بشه، دکمه‌ها خیلی کوچیک میشن و کاربر ممکنه اشتباهی روی یک دکمه ی دیگه رو لمس کنه (انگشت ما که موسِ دقیق نیست!).
دوم اینکه مغز آدم‌ها تو پردازش گزینه‌های زیاد زود خسته میشه (به این میگن بار شناختی). اگر اپلیکیشنی بیشتر از ۵ تا بخش اصلی داره، یعنی معماری اطلاعاتش نیاز به بازبینی داره.

❓ سوال دوم: فقط آیکون بذاریم بهتره یا حتماً باید زیر آیکون‌ها متن هم بنویسیم؟

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

← به جز آیکون‌های خیلی خیلی جهانی مثل «خانه 🏠» یا «سرچ 🔍» بقیه آیکون‌ها می‌تونن برای آدم‌های مختلف معنی‌های متفاوتی داشته باشن.

✓پس همیشه از ترکیب «آیکون + یک کلمه متن کوتاه و خوانا» استفاده کنید تا کاربر، ثانیه‌ای شک نکنه که قراره کجا بره.

❓ سوال سوم: کاربر از کجا باید بفهمه الان تو کدوم صفحه‌ست؟

💡 پاسخ :
این یکی از مهم‌ترین اصول UX به اسم «بازخورد یا Feedback» هست. نویگیشن بار شما باید نشون بده که کاربر الان کجاست! به این حالت میگن Active State.

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

❓ سوال چهارم: دلیل انتقال منوها از بالای صفحه به پایین صفحه در طراحی‌های مدرن چیست؟

💡 پاسخ :
دلیل اصلی این موضوع، بزرگ‌تر شدن ابعاد صفحه نمایش گوشی‌های هوشمند و توجه ویژه به راحتیِ دستِ کاربره.
در دنیای تجربه کاربری، مفهوم بسیار مهمی به نام «محدوده دسترسی شست» (Thumb Zone) وجود داره. زمانی که کاربر گوشی را با یک دست نگه می‌داره، انگشت شست به راحتی و بدون هیچ فشاری به نیمه پایین صفحه می‌رسه؛ اما برای لمسِ گزینه‌های بالای صفحه، کاربر مجبوره زاویه دستش را تغییر بده یا از دست دومش کمک بگیره. 😄
طراحان برای ایجاد حس راحتی بیشتر به کاربر، تصمیم گرفتن که مهم‌ترین دسترسی‌ها را در همون محدوده پایین صفحه (جایی که انگشت شست به طور طبیعی قرار داره) قرار بدن.

به بهانه‌ی اومدن پاییز، دوست داشتم یکی از پلی‌لیست‌های پاییزیِ موردعلاقه‌م رو باهاتون به اشتراک بذارم 🥹🧣
امیدوارم گوش بدید و کلی لذت ببرید 🍂

سلام 🙂‍↕️من اومدم بهتون یه چیزی که اون اوایل همیشه باهاش درگیر بودم رو اینجا باهاتون به اشتراک بذارم.
اگر همیشه براتون سوال بوده که هر کجای یک سایت چی به چیه و چه اسمی داره، این پست مخصوص خودته و تا آخر بخونش😉👇

هوش مصنوعی اومده همه ی این آپشن ها رو توی یه تصویر بهمون نشون داده که بدونید هرکدوم اسمش چیه‌.

🌐 آناتومی یک وب‌سایت از صفر تا صد:
✶ Logo (لوگو):
پلاک و هویت اصلی سایت که معمولاً بالا خودنمایی می‌کنه تا بفهمیم تو سایتِ چه کسی هستیم.

✶ Header / Main Menu (هدر و منوی اصلی):
زمانی که شما وارد یک وب سایت می شید، اولین چیزی که می‌بینید، هدر سایته. به همین دلیل نحوه چیدمان این قسمت ، اهمیت زیادی داره.
هدر سایت باید شامل موارد زیر باشه:
•لوگوی سایت
•منوی خدمات و یا محصولات سایت
•دکمه های ضروری مانند سبد خرید، آیکون شبکه های اجتماعی، تماس با ما، آیکون جستجو و… است.

✶ Upper Navigation (منوی ثانویه):
لینک‌های کوچیک‌تر و فرعی که معمولاً بالای منوی اصلی قرار دارن (مثل اطلاعات تماس یا دسترسی‌های سریع).

✶ Hamburger / Mobile Menu (منوی همبرگری):
منوی همبرگری (☰)برای طراحی‌های موبایل یا مینیمالیستی محبوب هستن چون هدرها رو تمیز نگه می‌داره و هنگام کلیک، لینک‌های بیشتری رو نشون می‌ده.🤓

✶Drop Down Menu (منوی آبشاری):
منویی که وقتی موس رو میبری روش، مثل آبشار گزینه‌هاش باز میشه و کلی زیرمجموعه جلوت سبز میشه.

✶ Hero Section (بخش قهرمان!):
همون بنر بزرگِ اول صفحه که با یک عکس پس‌زمینه خفن، شعار اصلی کسب‌وکار و یک دکمه جذاب، حسابی خودنمایی می‌کنه.

✶ Button / CTA (دکمه دعوت به اقدام):
همون دکمه‌های وسوسه‌کننده‌ای مثل «دریافت مشاوره» یا «خرید کن» که کاربر رو ترغیب به کلیک کردن می‌کنه.

✶ Section (بخش):
هر بلوک مستطیلی و جداگانه تو صفحه که یک بخش کامل از خدمات، ویژگی‌ها یا مطالب سایت رو تو خودش جا داده.

✶ Footer (فوتر / پانویس):
تهِ تهِ سایت! جایی که اطلاعات تماس، آدرس، ساعت کاری و کلی لینک‌های قانونی و مهم رو اونجا می‌ذارن.

✶ Link (لینک):
کلمات یا گزینه‌هایی که تا روشون می‌کنی کلیک، پرتت می‌کنن به یک صفحه دیگه!

✶Breadcrumbs (بردکرامب / مسیر راهنما):
اون لینک‌های کوچیکی که معمولاً بالای صفحه محصولات یا مقالات هستن (مثلاً: خانه > فروشگاه > دیجیتال > گوشی). به کاربر می‌گن الان دقیقا کجای درختِ ساختار سایت قرار داره و به راحتی می‌تونه برگرده عقب.

✶ Sidebar (سایدبار / نوار کناری):
ستون عمودی که سمت راست یا چپ صفحات (مخصوصاً بلاگ‌ها یا فروشگاه‌ها) قرار می‌گیره و توش فیلتر محصولات، دسته‌بندی‌ها، مقالات محبوب یا بنرهای تبلیغاتی رو می‌ذارن.

✶Pop-up / Modal (پاپ‌آپ یا مودال):
همون پنجره‌های خوشگلی که ناگهان وسط صفحه می‌پرن رو هوا! معمولاً برای خبرنامه، تخفیف‌های ویژه، یا اخطارهای مهم استفاده میشن.

✶ Floating Button / Back to Top (دکمه‌های شناور):
دکمه‌هایی که به صفحه «چسبیدن» و با اسکرول کردن کاربر بالا و پایین نمیرن؛ مثل همون دکمه معروفِ فلش رو به بالا (برای برگشتن سریع به بالای صفحه) یا دکمه چت آنلاین و پشتیبانی.

✶ Pagination (صفحه‌بندی):
توی لیست‌های طولانی (مثل محصولات فروشگاه یا مقالات)، اون شماره صفحات (۱، ۲، ۳...) یا دکمه «بارگذاری بیشتر» که ته صفحه میذارن تا مطالب قطره‌چکانی و مرتب لود بشن.

✶Cookie Banner (بنر کوکی):
اون نوار یا کادری که معمولاً پایین صفحه ظاهر میشه و به کاربر اطلاع میده که این سایت از کوکی‌ها استفاده می‌کنه (تو سایت‌های بین‌المللی خیلی واجبه).

توی یه مقاله ای یه چیزی خوندم و چون من خوندمش شما هم باید بخونیدش🙂🥲

✦برای اینکه هدر موبایلِ سایت‌تون تمیز و کارآمد بمونه، این چند تا نکته رو رعایت کنید:

★از «منوی همبرگری» استفاده کنید:
این آیکون (☰) به شما کمک می‌کنه تا گزینه‌های منوی اصلی را به‌طور منسجم و مرتب در فضایی کوچک جا بدید.
←فقط حواستون باشه که موقعیتش توی “ناحیۀ دسترسی انگشت شست” (Thumb Zone) باشه تا کاربر راحت بتونه روش کلیک کنه و انیمیشن باز شدنش هم از لحاظ بصری، نرم و استاندارد باشه.

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

★فقط روی یک «دعوت به اقدام» (CTA) تمرکز کن:
زیاده‌روی نکنید؛ فقط یک موردِ کلیدی، مثلاً «تماس فوری»، «رزرو» یا آیکون سبد خرید کافیه! بقیه رو توی همون منوی همبرگری قرار بدید.

★از هر سانتی‌متر فضا درست استفاده کنید:
اضافات رو بریزید دور! آیکون‌های شبکه‌های اجتماعی، لینک‌های فرعی یا کادر جستجو، جاشون توی هدرِ اصلی نیست؛ اون‌ها رو بفرستید داخل همون منوی همبرگری تا هدر خلوت بمونه.

✦نکته :
حتماً لینکِ صفحه اصلی (Home) رو روی لوگو بذارید، چون این یکی از عادت‌های قدیمیِ همه کاربرهاست. همچنین، هدر رو «استیکی» (Sticky) کنید تا وقتی کاربر داره صفحه رو اسکرول می‌کنه و می‌ره پایین، هدر همیشه اون بالا در دسترسش بمونه.

همین خدافظ🦦