Sayfalandırma (Pagination)

Uzun içeriklerin veya çok bölümlü içerikleirn tek ve uzun bir sayfa içerinde bulunması sıkıcılığı artıracak, konsantrasyonun içerik üzerinde yoğunlaşmasında negatif etki oluşturacaktır. Bundan dolayı içeriğin uygun uzunlukta bölünmesi veya her bir bölümün farklı sayfa içerisinde numaralandırılarak gösterilip kolay anlaşılır ve incelenebilir bir hale getirilmesi (sayfalandırma-pagination) sıkça karşılaştığımız bir durumdur.

Sayfalandırmanın en önemli sebebi kullanıcılarınen kısa ve kolay yoldan içeriğe ulaşmasını sağlamaktır. Bir çok haber sitesi uzun haberleri içeriği anlamlı olacak şekilde sayfalandırmakta, bir çok e-ticaret sitesi kategori sayfalarında yüzlerce hatta binlerce ürünü sergilerken sayfalandırmadan yararlanmaktadır. Fakat sayfalandırma yaparken içeriğin gerçekten çok uzun olduğu durumdalarda yapılmalı, aksi halde gereksiz sayfalandırma yapmak kullanıcıların fazladan bir tık yapmasına ve konsantrasyonlarının da dağılmasına sebep olabilir. Hatta bazı e-ticaret sitelerinde sayfalandırma yapılırken yapılan bazı yanlışlar -amaç satışa yönelik gezintiye yönelik düşünülmüş olsa bile kullanıcı tarafından bakıldığında bir eziyet olabiliyor-  kullanıcıyı bezdirip, sıkılmasına ve sayfadan ayrılmasına neden olabilir.

Peki doğru sayfalandırma yaparken nelere dikkat etmek gerekiyor, sayfalandırma nasıl yapılmalıdır?

  1. Öncelikle kullanıcı sayfalandırılmış içerikte hangi sayfada olduğunu rahatça bilmeli
  2. KUllanıcının tıklamasını kolaylaştırmak için sayfalandırma numaraları kolayca tıklanabilecek büyüklükte olmalıdır
  3. Numaralandırılmış sayfalar arasında yeterli boşluk olmalı
  4. Sayfalandırma yaparken altı çizgili linkler kullanmayın, herkes bilir zaten bu linklerin tıklanabilir olduğunu.
  5. ‘Önceki’ ve ‘Sonraki’ linklerini koyun.
  6. Çok fazla sayfalandırmanız varsa ‘İlk Sayfa’ ve ‘Son Sayfa’ linklerini koyun. Eğer çok fazla sayfalı yapılarınız yoksa ‘Son Sayfa’ linkini koymayabilirsiniz. Çünkü en sondaki içerik ilk sayfalardaki içeriklere göre daha az önemlidir ve daha önemli içerikler varken kullanıcıyı istemediğimiz bir sayfaya yönlendirmek istemeyiz.
  7. Sayfalandırma içeriğinin uzunluğunu kullanıcının seçebileceği tasarımlar geliştirin (Örneğin sayfada 20 ürün göster, 30 başlık göster vs gibi)
  8. Eğer (özellikle e-ticaret siteleri için) çok çok fazla sayfalandırma yoksa “Tümünü göster” linkini koyun. Eğer çok fazla sayfalandırmanız varsa kullanıcı bu linke bastığında tümünü listelemekte çok zorlanacaktır ayrıca nu linkin günlük/aylık bandwidtinizi artıracağını da unutmayınız. (7nci maddeyi yaparken sayfada fazlaca ürün/başlık gösterme seçeneğiniz olursa çok gerekli olmayacak bir maddedir, koymanıza gerek kalmaz.)

Çok fazla sayfalı siteler için bir sayfalandırma örneği olarak http://www.1stwebdesigner.com/ adresinde kullanılan örneği verebiliriz. Hem ferah hem kullanışlı ve de eğlenceli bir sayfalandırma örneği. Hem sağa sola birer sayfa oka tıklayarak gidilebiliyor, istenirse hangi sayfaya gidilecekse ona tıklanabiliyor, çoklu sayfa geçişi yapmak için sayfalandırma altındaki scroll yatay olarak kaydırılabiliyor:

Çeşitli pagination örnekleri:

Pet in Canvas

pet-in-canvas

 

LivingDesign

02-living-design

 

The Design Cubicle

the-design-cubicle.jpg

 

pure imagination.

pure-imagination-tumblr.jpg

 

Techi

techi.jpg

 

The Strange Attractor

the-strange-attractor

 

dirty.ru

dirty.ru

 

UX and all…

ux-and-all.jpg

 

Flickr

flickr.jpg

 

UX Magazine

ux-magazine.jpg

 

Toplink.gr

toplinks.jpg

 

Mister Wong

mister-wong.jpg

Freelance Switch

freelance-switch.jpg

 

Smashing Magazine

smashing-magazine.jpg

 

Noupe

noupe-2011.jpg

 

Naldz Graphics

naldz-graphics.jpg

 

Vodafone

vodaphone-pages.jpg

 

SpaceCollective

space-collective.jpg

 

Snoggle News

snoggle-news.jpg

 

Image Spark

imgspark.jpg

 

Blog Catalog

blog-catalog.jpg

 

LogoMoose

logomoose.jpg

 

Design Newz

design-newz.jpg

 

Pligg Design Gallery

pligg-gallery.jpg

 

Mac Appstorm

mac-appstorm.jpg

 

I Love Typography

i-love-typography.jpg

 

Premiere Speakers Bureau

premiere-speakers-blog.jpg

Newegg

newegg.jpg

 

Standart sayfalandırmalara rağmen çoğu web tasarımcı arayüzleri tasarlarken renkleri formlar, arka planlar ve şekiller ile kullanma eğilimindedir.

Sayfalama kullanıcıların dikkatini çekmek için güzel tasarlanmaktan ziyade sitede kolay gezinmenin bir parçası olarak önemli bir işlevsellik sunar ve bu amaca hizmet edecek şekilde tasarlanmalıdır. Ancak herşeye rağmen görsel olarak da etkin olarak kullanılmalıdır. Çoğu tasarımda mavi ve gri renkler hakimdir.

Basit Numaralandırma

Açıklama: Facebook

Açıklama: Screenshot Pagination

Açıklama: Businessweek

Açıklama: Slanted

Açıklama: Cpluv

Açıklama: Stylegala

Açıklama: Screenshot Pagination

Açıklama: Overture

Açıklama: Misal

Renkler ve Şekiller Kullanılarak Sayfalama

Bu tip tasarımlarda mevcut sayfanın vurgulanır ve diğer sayfalardan ayırmak için renkler kullanılır. Sayfa numaralarına aynı zamanda bir dikdörtgen, daire veya bir buton ile şekil verilmiştir. Geçerli sayfa genellikle linklendirilmez.

Açıklama: StylishLabs

Açıklama: Apple Store

Açıklama: Bildblog

Açıklama: Screenshot Pagination

Açıklama: Sitepoint

Açıklama: Amazon

Açıklama: Maple

Açıklama: Screenshot Pagination

Açıklama: Screenshot Pagination

Açıklama: Screenshot Pagination

Açıklama: Flickr

Açıklama: Screenshot Pagination

Açıklama: Screenshot Pagination

Açıklama: Screenshot Pagination

Açıklama: UXMag

Açıklama: Screenshot Pagination

Açıklama: Screenshot Pagination

Açıklama: Screenshot Pagination

Açıklama: Screenshot Pagination

Açıklama: Screenshot Pagination

Açıklama: Screenshot Pagination

Açıklama: Screenshot Pagination

Açıklama: Screenshot Pagination

Açıklama: Screenshot Pagination

Açıklama: Screenshot Pagination

Açıklama: Screenshot Pagination

Açıklama: Screenshot Pagination

Açıklama: Screenshot Pagination

Açıklama: Screenshot Pagination

Açıklama: Screenshot Pagination

Açıklama: Screenshot Pagination

Açıklama: Screenshot Pagination

Açıklama: Designshack

Açıklama: Screenshot Pagination

Açıklama: Screenshot Pagination

Açıklama: Screenshot Pagination

Açıklama: Screenshot Pagination

Açıklama: Screenshot Pagination

Açıklama: Screenshot Pagination

Açıklama: Screenshot Pagination

Manuel Sayfa Girerek Sayfalama

Bazı durumlarda kullanıcılar gitmek istediği sayfayı text-inputlara elle girmek isteyebilir. Bu tip tasarımlar sınırlı sayıda da olsa bazen kullanılabiliyor.

Açıklama: Screenshot Pagination

Açıklama: Veer

Açıklama: Screenshot Pagination

Sıradışı Çözümler

Açıklama: Screenshot Pagination

Açıklama: Screenshot Pagination