Bir önceki yazımda, mobil cihazlarda neden hamburger menü kullanılmaması gerektiğinden bahsetmiş ve hamburger menü kullanımının alternatiflerini paylaşmıştım. Bu kez de, bir önceki yazıyla ilişkili olarak hem mobil cihazlarda hem de masaüstü web sitelerinde sıkça yapılan navigasyon (gezinme çubuğu) hatalarına değineceğim.
Kullanıcılar bir web sitesinde ya da bir uygulamada sayfalar arasında geçiş yapabilmek için sıklıkla navigasyon alanını kullanırlar. Dolayısıyla bu alan, kullanıcıların hazırladığınız deneyimi ne kadar hızlı ya da ne kadar yavaş deneyimleyeceğine doğrudan etki etmektedir. Aşağıda belirttiğim navigasyon tasarım hatalarından kaçınmak, kullanıcılara akıcı bir deneyim sunmanızı mümkün kılacaktır.
Bu içerik ücretsiz!
Okumaya devam etmek ve SHERPA Blog okuru olmak için aşağıdakilerden birini seç. Her hafta yenileri eklenen yüzlerce içeriğe ücretsiz ve sınırsız eriş.
Kullanıcılar, menüde bir alana tıkladıktan/bastıktan sonra, o alanla ilgili geri bildirime ihtiyaç duyarlar çünkü; menüden başka bir alana ulaşmak istediklerinde ya da menüye bakarak hangi sayfada olduklarını öğrenmek istediklerinde efor harcamadan aktif alanı görmek isterler.
Seçili menü öğesinin gösterilmemesi, gösterilse de düşük renk kontrastına sahip olması ya da diğer menü öğelerinden ayrışmayan bir stilde hazırlanması, kullanıcıların site hiyerarşisinde nerede olduklarını anlamalarını zorlaştıracaktır.
Bu konudaki en iyi (kötü) örnek apple.com sanırım. Yukarıdaki görselde hangi ana menü öğesinin seçili olduğunu anlamak oldukça zor.
Dolayısıyla diğer menü öğeleriden ayrışmayan, silik olarak hazırlanan seçili menü öğesi ilk anda hangi sayfada olunduğunun anlaşılmamasına sebep olacaktır.
Bu durumun önüne geçmek için;
Baskın alt çizgi kullanımı
Diğer menü öğelerinden farklı ve zemin rengi ile birlikte düşünüldüğünde okunabilir bir font rengi ya da
Arka planı blok halinde farklılaştırılmış bir seçili menü öğesi tasarlamak yeterli olacaktır.
2. Seçili olmayan öğelerdeki düşük renk kontrastı
Burada ise ilk maddenin tam tersi bir durum söz konusu. Seçili öğeyi öne çıkarmak yerine diğer öğeleri arka plana itmek, minimal bir görünüm elde etmek isterken okunabilirlikten ve işlevsellikten ödün vermekle sonuçlanıyor.
Sadece menü öğelerinde değil tüm arabirim öğelerinde düşük kontrast pasif öğe stili olarak kullanıldığı için, burada da seçili olmayan öğelerin basılmayacak/pasifmiş gibi algılanmasına sebep olacaktır.
3. Sadece metin alanının tıklanabilir olması
Menü öğelerinin etrafında yer alan boşlukların tıklanabilir olması gerekmektedir. Aksi durumda, kullanıcılar sadece metin alanının üzerine geldiğinde menü öğesine basabilecekler. Tüm alanı buton olarak kullanmak daha az dikkat gerektireceği için kolay bir kullanım sağlayacaktır.
4. Hover’ı olmayan menü öğeleri
Seçili öğenin aktif olarak gösterilmesiyle birlikte, diğer öğelerin de üzerine gelindiğinde ilk maddede bahsettiğim gibi kullanıcılara bir geri bildirim vermek gerekmektedir.
Menü öğelerine hover özelliği verdiğinizde, bu alanın tıklanabilir olduğu daha kolay anlaşılacaktır. Buradaki önemli nokta, üzerine gelinen öğenin hover stili ile seçili öğe stilinin birbirlerinden farklı olması. Her iki stilin aynı olması, kullanıcıların mouse’u menü üzerinde çekerek aktif alana tekrar bakması gibi uzun bir yol izlemesine sebep olacaktır.
Sonuç olarak, bu küçük ipuçlarını uygulamak, kullanıcıların bir web sitesi ya da uygulamada ilk ve en çok kullanma potansiyeli olan navigasyon alanlarını iyileştirmenizi, dolayısıyla da daha iyi bir deneyim tasarlamanızı sağlayacaktır.
Bu yazının ne yazık ki çok yanlış ve yanıltıcı olduğunu düşünüyorum bunuda sizlerle paylaşarak nedenlerini sıralamak ve tartışmak istedim.
İlk olarak Apple örneğini böyle bir hipotezde kullanmak çok büyük bir hata. Bütün olarak görmeyerek tasarımın sadece bir kısmını keserek koymak büyük yanılgılara ve yanlış anlaşılmalara sebebiyet verir.
Eğer Apple’ın sitesinde navigasyonlar arası geçişler yaparsanız göreceksiniz ki yazı içerisinde kesilerek kullanılan alanın altında hangi sayfada olduğunu çok belirgin olarak zaten göstermekte. (Banner alanın tamamen bulunduğunuz sayfanın ürününü kullanması.) Kaldı ki yazı içerisinde kesilerek gösterilen navigasyon içerisinde zaten alt menü kullanımı bu işe yarıyor. Başarılı icon kullanımları sayesinde ana menü kullanımını tamamlıyor ve nerede olduğunuzu size bangır bangır bağırıyor.
Bu yazı içerisinde kötü örnek olarak başarılı bir navigasyon uygulamasını göstermek ne kadar doğru bilemedim. Ne yazık ki bu ikilemi yaratmanız beni üzdü.
Diğer maddelere gelirsek bu iyi örneği kötülemek için illa yapılması gerekmeyen trickleri yazmışsınız. Navigasyon tasarımında her uygulanan ya da sayı olarak fazla işlerin olması o navigasyonu iyi yapmıyor. İlla navigasyon kullanımında altına büyük bir dikdörtgen koymak, rengini değiştirmek, seçili olmayan öğelerin rengini düşürmek ve arka planı blok olarak farklı renk ile kullanmak şart değil. Tam tersine bunların kullanımı basite kaçmak oluyor.
Apple gibi bu yönde farklı ve oldukça başarılı olan bir işi “en iyi (kötü) örnek” olarak lanse ederek zorunlu olmayan kullanımları standart, basite kaçacak çözümleri illa yapılması gerekiyormuş gibi göstermek.. bilemedim.
Navigasyon örneklemesi olarak Apple’ın kullanımı kötü değil tam tersine iyi bir örnek olarak yazılması. Ana ve alt menü kullanımı açısından bir birini destekleyen ve tamamlayan bir navigasyon. Eğer Apple örneğini ele alıyorsan navigasyonun kullanıldığı site çok önemlidir çünkü eğer markanın yaklaşımı ne şekilde gelişiyorsa o yönde kullanım çok farklılıklar yaratır.
Orkun Duyar
Değerli yorumunuz için çok teşekkürler.
Öncelikle Apple örneğini vermemin sebebini açıklayayım. Sizin de söylediğiniz gibi ana menünün hemen altında kullanılan ürün ikonları, kullanıcıların hangi sayfada olduğunu anlamasına yardımcı oluyor ancak; bu durum, ana menüde yer alan tüm öğelerin altında bu tip bir kullanıma gidilmesini zorunlu kılıyor. Sonuç olarak, yazdıklarınızdan “ikonlu kullanım olmadığında, ana menünün anlaşılması zorlaşır.” sonucu çıkıyor.
Benim de apple.com’un navigasyon alanını kötü örneklerden birisi olarak vermemin sebebi tam olarak buydu. Örneğin Support öğesine tıkladığımızda açılan sayfa ya da detay sayfaları (örneğin şu, şu, şu ya da şu sayfa) bahsettiğiniz ikon kullanımını içermiyor. Dolayısıyla bahsettiğiniz ikonlu kullanım avantajları bu sayfalarda geçerli olamıyor ve yazıda belirttiğim şu kullanıcı deneyimi ihtiyaçları karşılanamıyor.
Kullanıcılar, menüde bir alana tıkladıktan/bastıktan sonra, o alanla ilgili geri bildirime ihtiyaç duyarlar çünkü; menüden başka bir alana ulaşmak istediklerinde ya da menüye bakarak hangi sayfada olduklarını öğrenmek istediklerinde efor harcamadan aktif alanı görmek isterler.
Son paragrafta markanın yaklaşımının çok önemli olduğunu belirtmişsiniz. Sanırım burada Apple’in yeni yaklaşımlarla tasarım trendlerine yön vermesinden söz ediyorsunuz. Eğer kast ettiğiniz buysa, buna tamamen katılıyorum fakat; verdiğim örneğin her gün kullanılan bir telefon, tablet gibi bir cihaz ya da bir uygulama olmadığını göz önünde bulundurmakta fayda var. Yani, temel işlevi ürün tanıtımı ve satışı olan bir web sitesinde, (kullanıcıların her gün hatta her an kullandığı iPhone’larda olduğu gibi) yeni özelliklerin zamanla öğrenilebildiği bir kurguyu çalıştırmak oldukça zor.
Şunu eklemekte de fayda görüyorum. Yazı birazcık apple.com incelemesi olarak algılanmış olabilir ancak; yazının öznesi aslında apple.com ya da apple.com’un navigasyon alanı değil, kötü kurgulanan navigasyon alanları nedeniyle ortaya çıkabilecek sorunlar. Apple.com da, navigasyon alanı göz önünde bulundurulduğunda verebileceğim örneklerden sadece birisi.
Doruk
Teşekkürler Orkun abi
Bunlar da ilgini çekebilir
Senin İçin Öneriyoruz
DAM BİLGİ TEKNOLOJİLERİ A.Ş. | SHERPA BLOG SİTE KULLANIM KOŞULLARI
Demek şifreni unuttun.
Olsun, hangimiz unutmuyoruz ki... Yeni bir şifre oluşturmak için e-posta adresini girmen yeterli.
Bu yazının ne yazık ki çok yanlış ve yanıltıcı olduğunu düşünüyorum bunuda sizlerle paylaşarak nedenlerini sıralamak ve tartışmak istedim.
İlk olarak Apple örneğini böyle bir hipotezde kullanmak çok büyük bir hata.
Bütün olarak görmeyerek tasarımın sadece bir kısmını keserek koymak büyük yanılgılara ve yanlış anlaşılmalara sebebiyet verir.
Eğer Apple’ın sitesinde navigasyonlar arası geçişler yaparsanız göreceksiniz ki yazı içerisinde kesilerek kullanılan alanın altında hangi sayfada olduğunu çok belirgin olarak zaten göstermekte. (Banner alanın tamamen bulunduğunuz sayfanın ürününü kullanması.) Kaldı ki yazı içerisinde kesilerek gösterilen navigasyon içerisinde zaten alt menü kullanımı bu işe yarıyor. Başarılı icon kullanımları sayesinde ana menü kullanımını tamamlıyor ve nerede olduğunuzu size bangır bangır bağırıyor.
Bu yazı içerisinde kötü örnek olarak başarılı bir navigasyon uygulamasını göstermek ne kadar doğru bilemedim. Ne yazık ki bu ikilemi yaratmanız beni üzdü.
Diğer maddelere gelirsek bu iyi örneği kötülemek için illa yapılması gerekmeyen trickleri yazmışsınız. Navigasyon tasarımında her uygulanan ya da sayı olarak fazla işlerin olması o navigasyonu iyi yapmıyor. İlla navigasyon kullanımında altına büyük bir dikdörtgen koymak, rengini değiştirmek, seçili olmayan öğelerin rengini düşürmek ve arka planı blok olarak farklı renk ile kullanmak şart değil. Tam tersine bunların kullanımı basite kaçmak oluyor.
Apple gibi bu yönde farklı ve oldukça başarılı olan bir işi “en iyi (kötü) örnek” olarak lanse ederek zorunlu olmayan kullanımları standart, basite kaçacak çözümleri illa yapılması gerekiyormuş gibi göstermek.. bilemedim.
Navigasyon örneklemesi olarak Apple’ın kullanımı kötü değil tam tersine iyi bir örnek olarak yazılması. Ana ve alt menü kullanımı açısından bir birini destekleyen ve tamamlayan bir navigasyon. Eğer Apple örneğini ele alıyorsan navigasyonun kullanıldığı site çok önemlidir çünkü eğer markanın yaklaşımı ne şekilde gelişiyorsa o yönde kullanım çok farklılıklar yaratır.
Değerli yorumunuz için çok teşekkürler.
Öncelikle Apple örneğini vermemin sebebini açıklayayım. Sizin de söylediğiniz gibi ana menünün hemen altında kullanılan ürün ikonları, kullanıcıların hangi sayfada olduğunu anlamasına yardımcı oluyor ancak; bu durum, ana menüde yer alan tüm öğelerin altında bu tip bir kullanıma gidilmesini zorunlu kılıyor. Sonuç olarak, yazdıklarınızdan “ikonlu kullanım olmadığında, ana menünün anlaşılması zorlaşır.” sonucu çıkıyor.
Benim de apple.com’un navigasyon alanını kötü örneklerden birisi olarak vermemin sebebi tam olarak buydu. Örneğin Support öğesine tıkladığımızda açılan sayfa ya da detay sayfaları (örneğin şu, şu, şu ya da şu sayfa) bahsettiğiniz ikon kullanımını içermiyor. Dolayısıyla bahsettiğiniz ikonlu kullanım avantajları bu sayfalarda geçerli olamıyor ve yazıda belirttiğim şu kullanıcı deneyimi ihtiyaçları karşılanamıyor.
Kullanıcılar, menüde bir alana tıkladıktan/bastıktan sonra, o alanla ilgili geri bildirime ihtiyaç duyarlar çünkü; menüden başka bir alana ulaşmak istediklerinde ya da menüye bakarak hangi sayfada olduklarını öğrenmek istediklerinde efor harcamadan aktif alanı görmek isterler.
Son paragrafta markanın yaklaşımının çok önemli olduğunu belirtmişsiniz. Sanırım burada Apple’in yeni yaklaşımlarla tasarım trendlerine yön vermesinden söz ediyorsunuz. Eğer kast ettiğiniz buysa, buna tamamen katılıyorum fakat; verdiğim örneğin her gün kullanılan bir telefon, tablet gibi bir cihaz ya da bir uygulama olmadığını göz önünde bulundurmakta fayda var. Yani, temel işlevi ürün tanıtımı ve satışı olan bir web sitesinde, (kullanıcıların her gün hatta her an kullandığı iPhone’larda olduğu gibi) yeni özelliklerin zamanla öğrenilebildiği bir kurguyu çalıştırmak oldukça zor.
Şunu eklemekte de fayda görüyorum. Yazı birazcık apple.com incelemesi olarak algılanmış olabilir ancak; yazının öznesi aslında apple.com ya da apple.com’un navigasyon alanı değil, kötü kurgulanan navigasyon alanları nedeniyle ortaya çıkabilecek sorunlar. Apple.com da, navigasyon alanı göz önünde bulundurulduğunda verebileceğim örneklerden sadece birisi.
Teşekkürler Orkun abi