Sekmeli Gezinme: Ne Zaman Kullanılır ve Nasıl Optimize Edilir

En sevdiğim kullanıcı deneyimi alıntılarından biri , Google'da Stüdyo ve Tasarım Sistemleri Başkanı Chikezie Ejiasi'den geliyor.

Şöyle yazdı: “Hayat sohbettir. Web tasarımı aynı şekilde olmalıdır. Web'de, muhtemelen hiç tanışmadığınız biriyle konuşuyorsunuz; bu nedenle net ve kesin olmak önemlidir. Bu nedenle, iyi yapılandırılmış gezinme ve içerik organizasyonu, iyi bir konuşma yapmakla el ele gider.”

Sekmeli gezinme net ve kesin olabilir mi? Tabii ki yapabilir, bu da onu geçerli bir gezinme ve içerik organizasyonu biçimi yapar.

UX ile ilgili çoğu şeyde olduğu gibi önemli olan, onu nasıl uyguladığınız ve nasıl optimize ettiğinizdir.

Sekmeli gezinme nedir?

Sekmeli gezinme, bilgilerin içeriği farklı bölümlere ayıran sekmelerde düzenlendiği bir gezinme ve kullanıcı arabirimi stilidir.

Genel olarak, sekmeli gezintilere baktığınızda bazı ortak özellikleri fark edeceksiniz:

1. Yuvarlatılmış sekme köşeleri;
2. İster boşluk ister tek satır olsun, sekmelerin ayrılması;
3. Sekmelerdeki efektleri gezdirin;
4. Sekmelere derinlik ve boyut eklemek için gradyan.

Sekmeli gezinme, bir ofiste çalışan veya televizyon izleyen herkesin aşina olması gereken klasör metaforuna dayanmaktadır. Tıpkı UsabilityGeek'ten Mifsud'un açıkladığı gibi…

Justin Mifsud, UsabilityGeek :

“UI terminolojisinde metaforlar, kullanıcı ile uygulama arasındaki yakınlığı kolaylaştırmak için kullanılan fikir veya nesnelerdir.

Kullanıcı arayüzünde sekmelerin kullanılması, dosyalarda gerçek dünyadan sekme bölücüler veya bir dosya çekmecesindeki klasörlerdeki sekmeler gibi göründükleri için mükemmel bir benzetmedir.

Bu nedenle, kullanıcıların bu sekmelerin içeriği bölümlere ayırdığını ve tıpkı gerçek hayatta olduğu gibi, sekmeye (web'de bir sekmeye tıklayarak taklit edilen) ulaştığını ve ilgili içeriği göstereceğini bilmesi daha sezgiseldir. (UsabilityGeek aracılığıyla)

Metafor çok yaygın olduğundan, uygulamada dikkatli olmanız önemlidir. Sekmeli gezinmelerin güçlü bir prototipi vardır, bu nedenle tam olarak beklendiği gibi görünmeleri ve çalışmaları gerekir.

Tüm iyi navigasyon sistemlerinde olduğu gibi, sekmeler şunları yapmanızı sağlar:

• İçeriği anlamlı bir şekilde farklı bölümlere ayırın;
• İnsanlara hangi içeriğin kendilerine uygun olduğunu ve bu içeriğe nasıl ulaşabileceklerini gösterin;
• İnsanlara sitenizin neresinde olduklarını görsel olarak gösterin.

Sekmeli gezinmeyi kullanmak ne zaman iyi bir fikirdir?

Genel olarak, aşağıdaki durumlarda sekmeli gezinmeyi kullanmak iyi bir fikirdir...

• İki ila dokuz farklı içerik kategoriniz var.
• Kategori adları, hem konum hem de kopya açısından nispeten kısa ve öngörülebilirdir (yani, prototiple eşleşirler).
• Kategori sayısının düzenli olarak değişmesi olası değildir.
• Kategoriler doğası gereği benzerdir; birlikte sekmeli olmaları mantıklı.
• Kategoriler tek bir satıra sığar.

Nielsen Norman Group'tan Jakob Nielsen'in açıkladığı gibi, sekmeli gezinme birden çok satır gerektirecek kadar karmaşık hale geldiğinde sorunlar ortaya çıkmaya başlar...

Jakob Nielsen, Nielsen Norman Grubu :

"Birden çok satır, uzaysal belleği yok eden ve böylece kullanıcıların daha önce hangi sekmeleri ziyaret ettiklerini hatırlamalarını imkansız hale getiren, sıçrayan kullanıcı arabirimi öğeleri oluşturur.

Ayrıca, birden çok satır, aşırı karmaşıklığın kesin bir belirtisidir: Tek bir satıra sığamayacak kadar çok sekmeye ihtiyacınız varsa, tasarımınızı basitleştirmelisiniz.” (NN/g üzerinden)

Birden çok satır ayrıca görsel hiyerarşi sorunları yaratır. İkinci bir sıra olduğunda, kullanıcıya ikinci sıradaki sekmelerin alt kategoriler olduğu veya en azından birinci sıradaki sekmelerden daha az önemli olduğu sinyalini verebilir.

Genel olarak, aşağıdaki durumlarda sekmeli gezinmeyi kullanmak iyi bir fikir değildir:

• İnsanların içeriği aynı anda karşılaştırmasını istiyorsunuz. Bu, hafızayı zorlar ve bilişsel yükü önemli ölçüde artırır.
• Kendinizi "Daha fazla..." tarzı bir bağlantı eklemeyi düşünürken buluyorsunuz.

Tabii ki, bunlar sadece temel yönergelerdir. Tüm "kullanmalısın" kurallarına uyabilir ve kitleniz için işe yaramadığını görebilirsiniz. Nihayetinde test etmeniz gereken bir şey.

Sekmeli navigasyonunuzun ziyaretçileriniz için sorun yaratıp yaratmadığını anlamak için dijital analizlerinizi kullanabileceğinizi unutmayın. Oradan, sorunları düzeltmek için değişiklikler yapabilir veya yeni bir gezinme türü deneyebilirsiniz.

tartışma

Modern tasarım uygulamaları buna benzeyen pek çok siteye sahipken…

…bazı insanlar sekmeli gezinmeyi ana gezinme olarak kullanır.

Google'dan Luke Wroblewski'nin yıllar önce kaydettiği gibi, Amazon bu trende gerçekten öncülük etti...

Luke Wroblewski, Google :

“1998'de sitenin iki üst düzey kategorisi vardı: kitaplar ve müzik.

Ek kategoriler eklendikçe (video ve hediyeler gibi), yatay sekme sistemi oldukça iyi ölçeklendi ve ürün kategorilerini renkle ayırt etmek için güzel bir fırsat yarattı.” (LukeW aracılığıyla)

İşte Amazon'un önceki günlerde sekmeli gezinmeyi nasıl kullandığına bir bakış…

Sitenin popülaritesi arttıkça, Amazon'un ihtiyaç duyduğu sekme sayısı da arttı…

1999'da Jakob bunu "kötü bir tasarım ve sekme metaforunun kötüye kullanılması" olarak nitelendirdi:

Sekmelerin alternatif (ancak ilgili) görünümler arasında geçiş yapmak için ilgisiz konumlara gitmekten daha iyi kullanılacağını düşünüyorum.

Farklı alanlara gitmek için değil, aynı bağlam içindeki görünümler arasında geçiş yapmak için sekmeleri kullanmalısınız. Bu, en önemli noktadır, çünkü ilk etapta sekmelere sahip olmamızın nedeni, görünümleri değiştirirken yerinde kalmaktır.

Jakob Nielsen

Yine de pek çok site Amazon'un izinden gitti ve sekmeli gezinme tanımı, Nielsen'in "alternatif görünümler arasında geçiş yapma" tanımından değişmeye başladı.

Sekmeli navigasyonu ana navigasyon sistemi olarak kullanmak biraz modası geçmiş olsa da işe yarayabilir. Çoğu şeyde olduğu gibi, birincil endişeniz Nielsen'in sekmeli gezinme hakkında ne söylediği değil, hedef kitlenizin ne söylediği olmalıdır.

Kullanımı zor mu buluyorlar? Sitenizde düzgün bir şekilde geziniyorlar mı? Sitenizin en önemli unsurlarını bulabiliyorlar mı? Emin olmak için kullanılabilirlik testi yapın.

Sekmeli gezinme nasıl uygulanır?

Air Canada, çoğu büyük havayoluyla birlikte, sekmeli navigasyonu iyi kullanıyor…

Sekmeli gezinmeyi kendiniz uygularken (herhangi bir düzeyde), akılda tutulması gereken bazı şeyler şunlardır:

• Öncelikle, sekmeyle ilgili daha akıllıca kararlar verebilmek için sitenizin bilgi mimarisini (IA) tasarlayın.
• Yalnızca kategori adı (metin) değil, tüm sekme tıklanabilir olmalıdır.
• Tüm siteniz için sekmeli gezinme kullanıyor olsanız bile, bir "ana sayfa" sekmesi kullanmayın. Bunun yerine, logonuzun ziyaretçileri ana sayfaya götürmesini sağlayın.
• Sekmenin kapsamının net olması için sekme, kontrol ettiği içerik alanına bağlanmalıdır.
• Kategori adları bir veya iki kelime uzunluğunda olmalı ve sade bir İngilizce ile yazılmalıdır. Sekmeleri okumayı zorlaştıracağı için tamamı büyük harf kullanmaktan kaçının.
• Birden çok sekme sırasını istiflemeyin. Gerekirse, bunun yerine alt kategorileri (yani sekmelerin altında ikinci bir yatay çubuk) kullanın. Alt kategori kullanıyorsanız, seçilen sekme ile aşağıdaki alt kategori çubuğu arasında görsel bir bağlantı olduğundan emin olun. Kullandığınız alt kategori miktarının çok fazla olmadığından emin olun; yoğunlaştırın ve basitleştirin.
• Seçilen sekme, geçerli konumu belirtmek için belirgin bir şekilde işaretlenmelidir. Bununla birlikte, seçili olmayan sekmelerin sesi, unutulacak veya gözden kaçacak kadar kapatılmamalıdır.
• Kullanıcının sekmelerin birbiriyle nasıl ilişkili olduğunu tam olarak anlaması için sayfadan sayfaya tutarlı bir sekme sırası korunmalıdır.

Jakob, bu tür bir tutarlılığın neden önemli olduğunu açıklıyor...

1. Tanınabilirlik. Bir şey her zaman aynı göründüğünde, neyi arayacağınızı bilirsiniz ve onu bulduğunuzda ne olduğunu bilirsiniz.

2. Öngörülebilirlik. Bir şey her zaman aynı şekilde çalıştığında, ona göre hareket ettiğinizde ne olacağını bilirsiniz.

3. Güçlendirme. Mevcut tüm özelliklerle ilgili geçmiş bilginize güvenebildiğinizde, hedefinize ulaşmak için kolayca bir dizi eylem oluşturabilirsiniz.

4. Verimlilik. Yeni bir şey öğrenmek için zaman harcamanıza veya tutarsız özelliklerin etkisi hakkında endişelenmenize gerek yok.

Jakob Nielsen

Doğru yapılan sekmeli gezinme örnekleri

Sekmeli navigasyonu anlamanın en iyi yolu, özellikle de pek çok farklı şekilde kullanılabildiği için, bazı örneklere bakmaktır.

1. Albüm Sanatı Koleksiyonu

Albüm Sanatı Koleksiyonu, sekmeli gezinmenin oldukça popüler bir örneğidir…

Burada iki şey ilginç…

1. Gezinme yatay değil dikeydir.
2. Navigasyon simgeleri içerir.

Tipik olarak, yatay olarak sunulan sekmeli gezinmeler bulacaksınız. Bu kısmen tasarım prototiplerinden kaynaklanmaktadır. Yaygın olduğu için, insanlar logonun altındaki yatay boşlukta gezinme eğilimindedir.

Elbette bu, gezinme için o alanı kullanmakla sınırlı olduğunuz anlamına gelmez. Sadece kullanıcı testini kullandığınızdan emin olun. Sitenizin kullanım kolaylığını etkilemek için biçimsel nedenlerle gezinmenizi taşımak istemezsiniz.

Albüm Sanatı Koleksiyonu gezinme simgelerini kullanırken metin tabanlı açıklamalardan vazgeçmediklerini unutmayın. Simge kullanılabilirlik testi başlı başına bir makaledir, ancak çoğu zaman metin tabanlı açıklamalar tek başına simgelerden daha kullanışlıdır. Six Revisions'tan Jacob Gube açıklıyor…

Jacob Gube, Altı Revizyon :

"Sekme kontrol metnini değiştirmek için simgeler kullanmaktan kaçının çünkü semboller farklı insanlar için farklı anlamlara gelebilir - en güvenli bahis, bölme bilgilerini açıklamak için düz metin kullanmaktır." (Smashing Magazine aracılığıyla)

2. Fatura Makinesi

Fatura Makinesi, ana gezinme örneği olarak temel sekmeli gezinmenizdir…

Ancak, gereksiz olan bir "Giriş" sekmesi içerirler. Seçilen sekmenin nasıl öne getirildiğine ve sekmelerin içerik alanına nasıl bağlandığına dikkat edin.

3. Tampon

Buffer, sekmeli navigasyonun en sevdiğim örneklerinden biriydi. Geçmişte, bireylere ve işletmelere yönelik bir teklifleri vardı, bu nedenle içeriklerini ekranın alt kısmında ayırmak için sekmeler kullanıyorlar.

İşte bireyler için içeriğin başlangıcı…

Ve işte işletmeler için içeriğin başlangıcı...

Bu, tamamen ayrı bir site veya deneyim oluşturmadan iki farklı kitleyle konuşmalarına olanak sağladı.

Daha sonra Buffer'ın ürün sayfası, diğer tekliflerin yanı sıra Yayınla, Yanıtla ve Analiz ile (hepsi oldukça açıklayıcı) derin değişikliklere uğradı. Sayfalarında kullandıkları gezinme sekmesi şu şekildedir:

Farklı fiyatlandırma planlarının yanı sıra, bu ürün tabanlı sekmeler, sekmedeki ürünle alakalı farklı bir referans gösteriyordu:

UX Booth'tan David Leggett'in açıkladığı gibi, sekmeli gezinme, birincil ve ikincil gezinme düzeylerinin ötesinde alakalıdır. Buffer'ın durumunda olduğu gibi ekranın alt kısmında bile kullanılabilirler...

David Leggett, Kullanıcı Deneyimi Kabini :

“Sekmelerin birincil ve ikincil gezinme seviyeleriyle sınırlı olması gerekmez. Bir kullanıcıya aynı içeriğin alanları arasında geçiş yapma yeteneği sağlarlarsa, oldukça yararlı olabilirler.

Bir sayfayı yeniden yüklemeden içeriği değiştiren teknolojiyle birleştiğinde, sayfada gezinen son kullanıcıya somut bir his verebilir.” (UX Kabini aracılığıyla)

Hatırlanması gereken en iyi 3 uygulama

Sekmeli gezinmeyi denemeden veya sizin için çalışmadığına karar vermeden önce şu üç faktörü göz önünde bulundurun: erişilebilirlik, parçalama ve hız.

1. Erişilebilirlik önemlidir

Sitenizin engelli veya sınırlamaları olan kişiler tarafından erişilebilir olmasını istiyorsunuz. Sekmeli gezinme ile bunu yapmak için yapmanız gerekenler...

• Kişilerin klavyelerindeki "Sekme" tuşunu kullanarak sekmelerde gezinmesine izin verin.
• Kişilerin klavyelerindeki "Enter" tuşunu kullanarak bir sekme seçmesine izin verin.
• Alternatif bir yöntem kullanılarak hangi sekmenin seçildiğini belirtin. Örneğin, "aktif" kelimesiyle bir başlık özelliği ekleyebilirsiniz.

Sitenizin daha fazla kişi için kullanımını kolaylaştırmak, dönüşümlere asla zarar vermez.

2. Parçalama önemlidir

Sekmeli gezinme ile içeriğinizi düzenlemeye ve parçalara ayırmaya nasıl karar verdiğiniz son derece önemlidir. Bu yüzden yukarıdaki ilk uygulama tavsiyem sitenizin bilgi mimarisi ile ilgiliydi.

Justin, uygun organizasyonun neden hayati olduğunu açıklıyor…

Justin Mifsud, UsabilityGeek :

“Sekmeler, içeriği ekranda daha az yer kaplayan anlamlı bölümlere ayırır. Bu sayede kullanıcılar (tüm içeriğin paragraflar halinde olması yerine) ilgilendikleri içeriklere kolayca ulaşabilmektedir.” (UsabilityGeek aracılığıyla)

Sitenizde olmasını istediğiniz tüm içeriği düşünün. Ardından, bu içeriği dört ila beş grupta gruplandırın. Muhtemelen, bu alıştırmayı tekrarlayabilecek ve sonunda iki veya üç farklı kova elde edebileceksiniz. Bu iyi. Hangi kişilerin yanıt verdiğini görmek ve daha iyi gezinmek için kullanıcı testi yapın.

Her şeyden önce, emin olmak isteyeceksiniz…

1. İçeriğiniz, ziyaretçiler için mantıklı, beklenen ve anlaşılır bir şekilde parçalanır.
2. Sekmelerinizin sırası anlamlı ve mantıklı.
3. Sekmeleriniz mevcut prototipleri takip eder. Örneğin, SaaS siteleri genellikle belirli bir şekilde kümelenirken, e-ticaret siteleri genellikle başka bir şekilde kümelenir.

3. Hız önemlidir

Hızın önemini defalarca yazdık. Bu nedenle, sekmeli gezinmenin etkinliğinde hızın da rol oynaması şaşırtıcı olmamalıdır.

Yakup gayet güzel açıklıyor...

Jacob Gube, Altı Revizyon :

“Modül sekmelerini kullanmanın bir amacı, içeriğin hızlı ve etkileşimli sunumuna izin vermektir. Bunun için, etkin olmayan bölme içeriğini HTML belgesinde satır içi olarak yazmaya çalışmalı ve ardından bölmeyi görsel olarak biçimlendirmek ve gizlemek için CSS ve JavaScript kullanmalısınız; bu, bir sayfanın yeniden yüklenmesini gerektirmekten veya uzak kaynak verileri istemekten daha hızlıdır.

Bölmeler arasında geçiş yaparken sayfanın yeniden yüklenmesini önleyin çünkü bu, bölmeler arasında gezinmeyi önemli ölçüde geciktirir. Ajax kullanılarak uzaktan yüklenen içerik, dinamik ve uzaktan konumlandırılmış bölme bilgileri için bir seçenek olabilir, ancak belge ağacına eşzamansız olarak DOM tarafından eklenen düğümlerin farkında olmayabilecek ekran okuyucu kullanıcıları için bir zorluk teşkil ediyor." (Smashing Magazine aracılığıyla)

Bu tavsiye, ana navigasyon olarak sekmeli navigasyonu kullananlar için geçerli değildir, ancak Air Canada ve Buffer gibi sekmeli navigasyonu kullananlar dikkate almalıdır.

Çözüm

Sekmeli gezinme, ziyaretçilerinizle kesinlikle "iyi bir sohbet" ile sonuçlanabilir . Düzgün bir şekilde uygulanırsa, ziyaretçilerinize tam olarak nerede olduklarını, tam olarak nelerin mevcut olduğunu ve kendilerine sunulanlara tam olarak nasıl erişebileceklerini söyleyecek kadar net ve kesindir.

Kullanılabilirlik testi ve optimizasyonun yardımıyla bu konuşma daha da gelişir.

Bununla birlikte, her şeyde olduğu gibi, araştırmanızı (bu durumda bilgi mimarisi araştırmanızı) yürüttüğünüzden ve test ettiğinizden, test ettiğinizden, test ettiğinizden emin olun.

Özetle…

1. Sekmeli gezinme, birincil veya ikincil gezinme düzeylerinin ötesinde olduğu gibi ana gezinme sistemi olarak da kullanılabilir.
2. Tek bir satıra sığan kısa adlara sahip iki ila dokuz katı, benzer kategoriniz olduğunda sekmeli gezinmeyi deneyin.
3. İnsanların içeriği karşılaştırmasını istediğinizde veya kendinizi bir "Daha fazla..." bağlantısı eklemeyi düşünürken bulmak için sekmeli gezinmeyi denemeyin.
4. En iyi uygulama uygulamalarını takip edebilirsiniz, ancak…
5. Önemli olan verilerinizdir. Ziyaretçileriniz, sekmeli gezinme ile sitenizde gezinmeyi zor buluyor mu? Öğrenmek için kullanılabilirlik testi yapın.
6. Açılan sorunları düzeltin. Ya da birçok maliyetli sorun varsa, başka bir navigasyon sistemini düşünün.
7. Sekmeli gezinme söz konusu olduğunda erişilebilirlik, parçalama ve hız önemlidir, bu nedenle çok dikkatli olun.

Bununla ilgili bir şey üzerinde mi çalışıyorsunuz? CXL topluluğunda bir yorum yayınlayın!