اصول طراحی صفحه بندی سایت

یکی از المان های شناخته شده و رایج در طراحی سایت، صفحه بندی یا همان Pagination است که در صفحات مربوط به دسته بندی، برچسب، فروشگاه و … کاربرد فراوانی دارد. میتوان گفت تقریبا 90 درصد وب سایت ها در بخشی از خود صفحه بندی را استفاده کرده اند؛ ولی چقدر به اصول طراحی آن و افزایش کاربری توجه داشته اند؟ در این مقاله قصد داریم مهمترین نکات در طراحی یک صفحه بندی مناسب را مرور کنیم. ممکن است برخی از آنها بدیهی و ساده بنظر برسند ولی مطمئن باشید که در فضای وب، سایت های پرطرفداری هستند که همین اصول ساده را نادیده گرفته اند.

صفحه بندی در سایت چیست؟

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

از طرف دیگر صفحه بندی سایت برای گوگل و در نتیجه سئو نیز امری مهم و حیاتی است. گوگل صفحاتی را میپسندد که 10 نتیجه مرتبط با جستجوی کاربر را در اختیار او قرار میدهد؛ دقیقا همانطور که سیستم جستجوی خود بکار گرفته است.

8 نکته در طراحی صفحه بندی سایت

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

1- محتوای صفحه بیش از حد کوتاه نباشد

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

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

2- دکمه های صفحه بندی ریز نباشد

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

دکمه صفحه بندی ریز نباشد

3- صفحه ی کنونی مشخص باشد

من کجا هستم؟ زمانیکه کاربر از صفحه بندی سایت شما استفاده میکند باید بداند که هم اکنون در چه صفحه ای قرار گرفته است. درست نیست که حفظ کردن شماره صفحه را به خود کاربر بسپاریم و انتظار داشته باشیم که با تمام  حواس خود از سایت استفاده کند.

صفحه جاری در طراحی صفحه بندی سایت

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

4- تعداد نمایش صفحات را محدود کنید

در برخی سایت های دانلود مشاهده میکنیم که شماره صفحات تا اعداد بسیار بالا مثل 500 و … ادامه یافته است و در هر صفحه امکان انتخاب 20 تا 30 صفحه وجود دارد. این حق انتخاب به سود کاربر شما نیست. بهتر است تعداد نمایش صفحات را محدود کنید. همچنین در نظر داشته باشید که فاصله میان لینک دو صفحه به اندازه ای انتخاب شود که کاربر به اشتباه بر روی لینک های کناری کلیک نکند. نمونه زیر یک روش اشتباه برای نمایش لینک ها و فاصله میان آنهاست.

فاصله لینک ها در Pagination

5- صفحه بعد و قبل فراموش نشود

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

6- آخرین و اولین را فراموش کنید

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

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

صفحه اول و آخر در Pagination

7- طراحی متفاوت برای نسخه موبایل

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

طراحی صفحه بندی در سایت گوگل

8- تعداد نمایش صفحات را محدود کنید

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

درجه بندی اهمیت لینک ها در صفحه بندی

در طراحی صفحه بندی سایت تنها لینک های مفید و کاربردی را به کاربران نمایش دهید و هر دسترسی اضافی را از دید او خارج کنید مهمترین بخش هایی که باید در صفحه بندی سایت نمایش داده شوند به ترتیب اولویت عبارتند از:

  • صفحه جاری
  • دکمه های صفحه بعد و صفحه قبل
  • نمایش شماره صفحه قبلی و بعدی نسبت به صفحه جاری
  • نمایش لینک صفحه آخر و صفحه آخر بصورت شماره ای

چند مورد از نکته های بالا هم اکنون در سایت شما رعایت شده است؟ بنظر شما تغییر صفحه بندی سایت چقدر در کارایی آن اثرگذار خواهد بود؟

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

پاسخ‌گوی سوالات شما هستیم سوال شما توسط کارشناسان وبسیما پاسخ داده شده و از طریق پیامک اطلاع رسانی می‌شود
نام و نام خانوادگی نام و نام خانوادگی به فارسی
آدرس ایمیل sample@domain.com
تلفن همراه 09 XX XXX XXXX
متن نظر
ثبت دیدگاه
  • zahra kamran
    16/05/2020

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

    • وبسیما
      WEBSIMA
      31/05/2020

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

  • Mojtaba
    24/01/2020

    سلام
    در مورد نحوه استفاده از تگ rel canonical و noindex در صفحه بندی های آرشیو سایت توضیح بدید.

    در وبلاگ شما از یواست قدیمی نسخه 4 استفاده شده و صفحات بعدی آرشیو noindex هستند. در نسخه های جدید یواست مورد noindex برای صفحات آرشیو اضافه نمیشه و rel canonical هم به صفحه اول آرشیو اشاره نمیکنه.

    • وبسیما
      WEBSIMA
      26/01/2020

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

  • Hasan Mohammadi
    19/07/2018

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

    • وبسیما
      WEBSIMA
      21/07/2018

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

  • محمد
    04/05/2017

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

    • وبسیما
      WEBSIMA
      06/05/2017

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

  • محمد
    01/05/2017

    سلام
    در یک سری از مجموعه های سایتم به خاطر همین دلایلی که عرض کردید داخل پیج های بعدی قرار گرفتند آیا مشکلی داره که گوگل آن صفحات را ایندکس کند ؟ در صورتی در قسمت نظرات به دوست عزیزمون هم اشاره کردید که از نظر موضوعی این ها یکسان هستند ولی آن لینک هایی که داخل صفحات دیگر نمایش داده شدند برای ما مهم هستند و انتظار داریم گوگل آنها را ایندکس کند و به خاطر اینکه این لینک داخل ان صفحه هست دنبال کند و امتیاز به ما بدهد ادامه یو آر ال ها من گذاشتم page3? داخل گوگل که زدم گوگل همه این پیج ها را هم ایندکس کرده بود الان یه سوال پیش میاد که چکار باید کنم که گوگل امتیاز کم نکند و بهم امتیاز مثبتی بدهد و همچنین بقیه لینک ها داخل صفحات دیگر را ایندکس کند

    • وبسیما
      WEBSIMA
      04/05/2017

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

  • Garmin
    17/02/2017

    با سلام سایت جالبی دارید. موفق باشید.

  • آرش
    04/02/2017

    طراحی سایتتون خیلی قشنگه. مطالبتونم همین طور.
    متشکرم

    • وبسیما
      WEBSIMA
      04/02/2017

      شما لطف دارید دوست عزیز، خوشحالیم که برای شما کاربردی بوده

  • سیروان
    07/09/2016

    ممنونم
    فایل robats.txt
    در سایت من هست
    آیا لازمه کد خاصی تو اون فایل وارد کنم؟
    نه فروشگاه من پرستاشاپه

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

    • وبسیما
      WEBSIMA
      09/09/2016

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

  • سیروان
    06/09/2016

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

    • وبسیما
      WEBSIMA
      06/09/2016

      سلام دوست عزیز
      راه حل این مشکل ساده ست. شما باید کاری کنید که صفحات دوم و سوم و … توسط گوگل ایندکس نشن. چون عملا از نظر موضوعی با صفحه اول دسته بندی یکسان هستند و شانسی برای کسب جایگاه ندارند. برای اینکار پیشنهاد میکنم از فایل robots.txt استفاده کنید یا اگر از وردپرس استفاده میکنید افزونه yoast برای اینکار گزینه های مناسبی داره.

  • گاما گرافیک
    06/06/2016

    با تشکر از مقاله خوبتون
    از لحاظ تجربه پذیری کاربری سایتتون لذت می برم به جز یک مورد که توی برخی از مقاله هاتونم استفاده از اونو عنوان کرده بودین و برای سو سایت،مفید و قابل استفاده هست…!!!
    خوشحال میشم اگر منظور منو متوجه شده باشید و تغییراتی رو در روند بهبود حرکت بین مقالات برای کاربرای سایت اعمال کنید.

    شاد و پر انرژی باشید

    • وبسیما
      WEBSIMA
      07/06/2016

      سلام دوست عزیز خوشحالیم که مورد پسند شما بوده ولی موردی که اشاره کردید رو متوجه نشدم چیه

مشاهده همه