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

یاد بگیرید که چگونه یک وب سایت را ساختار دهید و چه نوع ساختاری برای طراحی وب شما مفید است.

ساختار وب سایت چیست؟

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

تصور کنید وارد یک کتاب فروشی می شوید و تمام کتاب ها را در یک گوشه انباشته می بینید. ترک کردن وسوسه انگیز است به جای صرف زمان برای غربال کردن عناوین برای یافتن عنوان مورد نظر. اگر کتاب ها بر اساس حروف الفبا یا ژانر سازماندهی شوند، تجربه خرید شما بسیار بهبود می یابد.

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

3 نوع متداول ساختار وب سایت

بخشی از زیبایی طراحی وب در این است که ساختار یکسانی برای همه وجود ندارد. اما اگر به دنبال الهام هستید ، این سه ساختار رایج هستند.

مدل خطی

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

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

مدل سلسله مراتبی

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

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

مدل تار

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

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

5 نکته برای ساخت یک ساختار وب سایت خوب

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

1. در مورد رقابت تحقیق کنید

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

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

2. ساختار خود را شناسایی کنید

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

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

3. یک نمودار جریان کاربر بسازید

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

4. از لینک سازی داخلی استفاده کنید

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

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

5. یک نقشه سایت ایجاد کنید

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

نمونه هایی از ساختار وب سایت برای الهام بخشیدن به شما

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

ساختار خطی توسط Polygram

Polygram یک استودیوی دیجیتال با یک وب سایت خطی است – “i” کوچک در گوشه سمت چپ پایین تنها گزینه ناوبری است. با کلیک بر روی آن به صفحه بعدی می‌روید که به شما امکان می‌دهد برای رزرو خدمات پلی‌گرام مکانی رزرو کنید. این تماس برای اقدام (CTA) یک پیوند Calendly با اسلات های موجود برای یک کنفرانس ویدیویی ایجاد می کند.

ساختار ترتیبی به این صورت است:

مدل خطی برای Polygram منطقی است زیرا مشتریان بالقوه فقط می توانند یک اقدام انجام دهند: رزرو مکان. این باعث می شود که مدل خطی انتخاب خوبی برای مشاغل جدید و ارائه دهندگان خدماتی باشد که یک عملکرد واحد دارند. با گسترش خدمات آنها، Polygram ممکن است به این طرح اضافه شود. در حال حاضر، این برای تبدیل بازدیدکنندگان آماده به مشتری کار می کند.

ساختار سلسله مراتبی توسط Webflow Merch Store

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

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

ساختار تار و پود توسط دانیل گمبل

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

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

ساختار سایت خود را تقویت کنید

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