H O K K A
Haber Yazılımında Kampanya İncele
15 Aralık 2016

Verimli Basitleştirerek Navigasyonu Etkileşim Tasarımı

Verimli ve kullanışlı bir Navigasyon, yani gezinti menüsü tasarlamak oldukça etkili bir yöntemdir. Bu nedenle tasarımcılar bilgi mimarisini yakından incelemeli ve çeşitli navigayon sistemleri ile ilgili bilgi sahibi olmalıdır. Gezinti menüsü etkileşimi mümkün olduğunca titiz davranılarak oluşturulmalıdır. Ziyaretçilerinizin gezinti deneyimi basitleştirildiğinde önemli ölçüde etki yaratmayı sağlayabilirsiniz. Öyleyse bunu nasıl başaracağız? Navigasyon menüsü deneyimini tasarlarken dikkat etmemiz gereken bazı temeller vardır. Bunları tek tek ele alalım:

Etkileşimli Bağlantılar

Düzenleme  ve Düzeyler

Fonksiyonel İçerik

Hedef Bölümler

Semboller

Dikkate alacağımız bu özellikleri birbirleri ile farklı şekillerde uyumlu hale getirerek çeşitli sonuçlar elde edebiliriz. Önemli olan dikkat çekici, zengin bir navigasyon deneyimi yaşatmaktır. Bu nedenle tasarımcılar navigasyon etkileşimi tasarlarken daime yenilikleri takip etmek zorunda hissederler. Tasarımlar ilgi çekici olmalıdır. Ziyaretçiler karmaşık bir gezinti deneyimi  yaşamak istemezler. Oluşturacağımız gezinti sistemi içeriği doğru bir şekilde yansıtmalı ve ziyaretçileri yormamalıdır.

SEMBOLLER

Semboller internet sitelerinin temel öğelerinden biridir. Birçok tasarımcı ziyaretçileri site içeriğine yönlendirmek için sembolleri ve ikonları kullanmayı tercih eder. İnternet sitenizin sembol ve ikonlarını kullanırken dikkat etmeniz gereken kullanacağınız bu araçların birbirleri ile uyumlu olmalıdır.

Açılır menüleri aşağı doğru gösteren üçgen sembolü en çok tercih edilen menü sembollerinden biridir. Burada yer alan sembol menü içerisinde yer alır ve kendisinin devamında açılan bir menüyü gösterir. Böylece bu sembol diğer doğrudan bağlantılardan ayıracaktır.

Menü için kullanılan etiketlerin yanında, aşağı doğru açılır bir menüyü ifade eden üçgen sembolü çok tercih edilen yöntemlerden biridir. Bazen bu üçgen veya ok sembolü aşağı doğru inmek yerine yana doğru genişler. Bir diğer örnekte yana doğru açılan ok – üçgen ana menünün uzantısını dikkate alarak genişleme yönünde açılmaktadır.

Menüleri güzel göstermenin işlevsel yollarından biri de artı ( + ) sembolünü kullanmaktır. Bazı tasarımcılar üçgen – ok sembolleri ile birlikte + sembolünü birlikte uyumlu bir şekilde kullanmayı tercih eder. İyi bir menü tasarımında gözü yormayacak, uyumlu bir kullanım oluşturulması gerekir. Aşağıdaki örnekten üst menü için ok sembollerini, soldaki gezinti menüleri için üçgen – ok sembollerini bir arada görebilirsiniz. Burada kullanılan üçgen genişletme sembolündeki amaç dinamik menüyü daha fazla içerik için genişletmektir.

Önemli internet sitelerinden bazıları yatay menü üzerinde kullanılmak üzere üçlü yatay çizgi sembolünü kullanmayı tercih edebilir. Bu sembol genellikle gezinti menüsünü göstermek için kullanılır.

Bunun en güzel örneklerinden birini Nokia sayfasında görebilirsiniz. Gezinti menüsünü temsil eden üçlü yatay çizgi yatay düzlemde sağda, en solda tasarlanmıştır. Üç çizgi yatay olarak aşağı inen, dik bir menüyü gösterecektir. Burada dikkat edilmesi gereken menü ile yatay üç çizginin uyumlu olmasıdır. Bunun zıt bir örneğini aşağıdaki internet sitesinde görebilirsiniz. Aşağıdaki örneğimizde menünün bölümleri aşağı doğru sıralanmaktadır. Menü ile yatay bölümler uyumsuz bir şekilde çalışmaktadır.

Menü bölümleri dikey düzlemde değilse üçlü yatay çizgi güzel bir görüntü yaratmaz. Üç yatay çizgi sembolü günümüzde çok kullanılıyor olmasına rağmen yeni bir kavramdır. Bazen bir gezinti menüsünü göstermekten daha fazla işleve sahip olabilir veya farklı amaçlar için kullanılıyor olabilir. Eğer üç yatay çizgiye bir isim verirsek onun kulanım amacını belirtme şansını bulabiliriz.

Sembolleri kullanırken onları amacına uygun kullanmamız gerekir. Amacına uygun kullanırken daha da önemlisi onları birbirleri ile tutarlı hale getirmektir. Böylece internet siteniz kalabalık olmaz ve güzel bir görünüm ortaya çıkar. Sembollerin uyumsuz kullanıldığı bir örnek vererek bu durumu daha iyi bir şekilde açıklayabiliriz.

Üstteki örnek sembollerin birbirleriyle uyumsuz bir şekilde kullanımını görüyoruz. Sağ üstteki üç yatay çizgi sembolü navigasyon menüsünü aşağı doğru açmaktadır. “View Nutrition İnfo” bölümünde üç yatay çizgi ile ayrı bir menü ortaya çıkar. “Location” bölümünde aşağı doğru ok kullanılırken, “Drinks” ve “Food” bölümünde artı ( + ) sembolleri yer almaktadır.

Birbirlerine uymayan bu semboller ziyaretçilerin kafasını karıştırabilir. Menü göstergesi olarak aynı anda farklı semboller kullanmamak gerekir. Ayrıca menülerin açılışını gösteren okları bu amaç dışında kullanmak karışıklığa neden olabilir. Bu duruma örnek olarak aşağıdaki site görüntüsünü inceleyebilirsiniz. Burada aşağıda veya yana açılan menüleri temsil eden sembollerin bu amaçla kullanılmadığını görürsünüz.

 

Yukarıdaki üçgen sembolleri açılır menüden ziyade ne çıkacağı belli olmayan bağlantılar olarak sunulmaktadır. Böyle bir kullanımda tüm ok sembolleri için aynı amacı uygulamaya zorunlu kalırsınız. Yoksa ortaya bir karışıklık çıkar ve ziyaretçiler bir ok – üçgen sembolünde bir bağlantı mı yoksa menü mü çıkacağına karar veremeyecektir.

Bunun yerine sunulan ürünleri tek bir menü içerisinde alt kategorilere ayırabilirsiniz. Aynı şeyi “About” bölümü ile ilgili yapabilirsiniz. Bu bölümü ok sembolü ile ayrı bir alana doğru açabilirsiniz. Burada dikkat edilmesi gereken şey ziyaretçilerin üçgen veya ok sembollerini gördüklerinde bunları açılır menü olarak düşünmeleridir. Aksi halde kafa karışıklığı ortaya çıkacaktır.

 

HEDEF BÖLÜMLER

Internet sitenizdeki menünün içeriğinde bulunan bağlantılar kolay okunur olmalıdır. Bununla birlikte, bu bağlantılar birbirleri ile tutarlı bir şekilde oluşturulmalıdır. İçerikte yer alan ve bir link ile bağlanan bu bölümlere “Hedef Bölümler” adını vereceğiz.

Hedeflenen bu bölümleri gören ziyaretçileriniz onlara tıklamadan önce onların tam olarak ne olduğunu başlık olarak görmelidirler. Burada yapmanız gereken doğru yazı boyutunu ve  yazı rengini belirlemenizdir. Böylece başlığınız daha rahat okunabilir olacaktır.

Buna bir örnek olarak aşağıdaki internet sitesi görüntüsünü inceleyebiliriz. Sitenin ortasında yer alan, “Laptops”, “Desktops” gibi başlıklar olarak sunulan bölümde renklerin nasıl bir kontrast oluşturduğunu görebilirsiniz. Ayrıca seçilen yazı tipi ve boyutu bu alanın rahat okunmasını sağlamaktadır. Bu bölüm özellikle yukarıdaki açılır menülerden farklı olarak tasarlanmıştır. Böylece ziyaretçi arasındaki farklı kolayca ayırt edecektir.

İnternet siteniz mobil cihazlarda ve loş ışıkta nasıl görünecektir? Tasarım yaparken bu özellikleri mutlaka dikkate almalı, yazı tipi ve rengini buna göre tasarlamalısınız. Hedef bölümler yeterince büyük olarak tasarlandığında tıklanması o kadar kolay olacaktır. Hedef bölgeyi belirleyen şeklin tıklanabilir bölümü o alanı tamamen kapsamalıdır. Dolayısıyla hedef bölgeyi tıklamak zor olmayacak, orada yer alan tüm pikseller tıklanabilir bir şekilde, kolay erişilebilir hale gelecektir.

Yukarıdaki örnekte piksel ve hedef bölge bağlantısı arasındaki ilişkiyi daha rahat görebilirsiniz. En sağdaki bölümde piksel kaybı oluşmamış ve hedef daha kolay tıklanır hale gelmiştir. Böylece ziyaretçiler kolayca hedefi tıklayacak ve istedikleri alanı zorlanmadan görebileceklerdir.

Görüntüleri büyük parçalar halinde vermek avantajlı olur. Onları geniş alanlarda kullanmak ve tıklanma kısmını alana yaymak önemlidir ancak burada dikkat edilmesi gereken bu bölgelerin ekranı kaplayarak kısıtlamasıdır. Boşluk bölgeleriniz varsa burada hedef bölgeleri çok büyük yapmaya gerek yoktur.

Okunabilirlik ve büyük şekilli hedef bölgeleri oluştururken onların birbirleri ile çelişmemesi gerektiğini unutmamalıyız. Kategori altında kategori oluşturarak çoklu düzeyde menü anlayışı uygulanabilir. Bu tür tasarımlar biraz uyumsuz navigasyon çeşidi sayılabilir. Burada her bir kategori, bir başka kategoriye doğru ilerleyerek devam eder.

Alt kategorileri görmek için bir bölümü açıp kapamak nispeten daha kullanışlı bir yoldur. Ziyaretçi kategoriler içinde hareket ederek birinden diğerine ilerleyebilir. Eğer ziyaretçiniz menüyü kapamak isterse menünün dışında bir noktaya tıklayarak menüyü kapatır. Buna bir örnek vermek istersek:

 

ETKİLEŞİMLİ BAĞLANTILAR

Etkileşim bağlantıları ziyaretçilerin içeriğe giriş şeklini belirler. Bu bağlantılar genellikle fare ile gelerek, yazılarak ilerleyerek, kaydırarak ve tıklanarak meydana getirilir. Bunlar gezinti menüsünde genel olarak uygulanan yöntemlerdir.

Yukarıda fare ile menü üstüne gelerek açılışın bir örneğini görüyorsunuz. Bu oldukça kullanılan yöntem aynı zamanda istenmeden menülerin açılmasına veya kapanmasına neden olabilmektedir. Bunun olmaması için bazı tasarımcılar gecikmeli açılma tekniğini kullanırlar. Ancak gecikme süresinin iyi ayarlanması gerekir. Gecikme süresi çok uzun olura sayfada gezinti yapmak ziyaretçiler için oldukça can sıkıcı hale gelebilir.

Gecikme süresinin belirli bir ölçüsü olmayacaktır. Kişilerin fare kullanım alışkanlık ve süreleri birbirinden farklı olabilir. Site yoğunluğu ve içeriği de bu süreyi etkileyen faktörler arasındadır. Buna bir çözüm olarak fare imlecinin gideceği yolu tahmin etmek ve geçici, üstü kapalı bir bağlantı bölgesi oluşturmak kullanılabilir. Burada ziyaretçi başka bir menüyü yanlışlıkla açmadan ilgili içeriğin alt kategorilerine ulaşabilir. Bunun bir örneğini aşağıda görebilirsiniz:

Üstü kapalı alanlarla bir kategori içinde gezinti sağlamanın kesin bir çözüm şekli olmadığını bilmemiz gerekir. Bu yöntemin de kendi içinde hata payları bulunacaktır. Burada ziyaretçiler gezinti yaparken fareyi oldukça dikkatli hareket ettirmek zorunda hissedeceklerdir. Ziyaretçileriniz daha önceden bu sayfanın alanlarını bilmediği için fare imlecinin hızının yaratacağı sorunlar hala geçerli olmaya devam edecektir.

Yukarıdaki yöntemin dışında uygulanacak bir başka yol tıklayarak menü açmadır.

Tıklayarak bağlantı açmanın kendi içinde bazı faydaları olacaktır. Her şeyden önce bu yöntem hataların meydana gelme olasılığını en aza indirecektir. Bu tür menü anlayışı içinde dolaşan ziyaretçileriniz bir noktada dolaşmayı bırakıp, başka bir bölüme ilerleyebilir ve daha sonra aynı içeriğe geri dönebilir. Dokunmatik ekranlarda fare olmadığı için bu yöntem fare imleciyle açılmadan daha avantajlı bir yöntemdir.

Kaydırarak açma yöntemini kullanmaya devam edecekseniz bu konuda aşırıya kaçmamalısınız. Bazı sayfa tasarımlarında içerikte yer alan bölümleri görmek gerekebilir ve bu noktada kaydırma yöntemi uygulanabilir. Kaydırma yaparken ziyaretçilerinizin kategorileri görmesini sağlayabilirsiniz fakat kategoriler arası geçişlerde bu yönteme gerek duymayabilirsiniz. Uzun açılan menüde ziyaretçileriniz bütün kategorileri görmek için sayfada aşağı ilerlemek zorunda kalabilir. Bunun yerine önemli içerikleri sayfanın üst bölümünde vermek daha iyi bir çözüm olacaktır:

Yazıyla içeriye ulaşmak uygulanabilecek bir başka yöntemdir. Burada aranan sonuçlar için arama yapma veya yazarak içeriğe ulaşma yöntemleri uygulanır. Arama için bir gezinti menüsü oluşturmaya gerek duyulmaz. Arama ve filtreleme kavramları birbirine yakın şeylerdir.

Yazarak filtreleme yöntemi arama yapmaya oldukça benzer. Ancak ziyaretçiler kategoriler arasında ilerlemek yerine gezintiyle içeriğe ulaşırlar. Yazarak filtreleme yaparak kaydırma gibi yöntemler olmadan ve uzun listelere göz atmadan aranan sonuçlara ulaşılabilir.

Mobil cihazlar kayarak – uçarak kullanılan menüler için elverişli değildir. Bu nedenle tasarımcılar açılan menüde tekrar ilerleyerek menü içeriğine erişim sağlama yolunu denerler. Menü açılan yeni sayfada görünür, böylece kaydırma yapmaya gerek olmadan içerikte gezinti yapılabilir:

Böyle yöntemlerde geri dönüşü sağlayacak bir ok veya üçgen sembolü kullanılabilir.

Birçok kategoriyi görünür kılmanın bir başka yolu da devasa menüler oluşturmaktır. Devasa menü biçimleri içerikte yer alan seçenekleri panel ve alt bölümlere dağıtır. Bu yönteme örnek olarak aşağıdaki görüntüyü inceleyebilirsiniz:

Ayrı ayrı kategorileri ele almak yerine tüm kategorileri bir arada görürüz. Ancak ziyaretçiler belirli bir zamanda belirli bir kategoriyi incelemek isteyebilir. Be sebepten dolayı geri kalan kategoriler gereksiz hale gelebilir. Buna bir çözüm olarak alt kategorileri çeşitli sekmeler halinde düzenleyebilirsiniz. Böylece ziyaretçiniz bir kerede tek bir kategoriyi görecektir:

Bu yöntemle menülerinizi karmaşık olmaktan çıkarabilir, daha güzel bir görüntü elde edebilirsiniz. Sekmeler halinde elde edeceğiniz sade görünümle diğer resim ve yazılar için daha geniş bir yere sahip olursunuz.

Bazı tasarımcılar zengin bir içeriği yönetebilmek amacıyla dinamik filtrelerden yararlanırlar.

İç içe geçen menülerle dinamik filtrelerden yararlanmak yararlı bir yöntem olurken aynı zamanda bazı öğelerin dışarıda kalmasına veya çok kaydırma yapılmasına neden olabilir. Bunun yerine açılabilir menüler kullanabilirsiniz:

Açılabilir menülerle birlikte dinamik filtreleri uyumlu olarak kullanmak görselliği karmaşık olmaktan çıkarır ve kolay bir kullanım sağlar. Buradaki zorluk ziyaretçilerin her bir içerik bölümü için ayrı ayrı tıklama yapmak zorunda olmasıdır. Mobil cihazlarda kullanabileceğiniz filtreleme yöntemlerinden birini örnekte görebilirsiniz:

İçeriğin içerisinde gezinti yaparken kaydırarak ilerleme yöntemine bir örnek olarak bu tasarıma göz atabilirsiniz:

 

Sayfa işaretleri kullanarak ziyaretçilerin sayfadaki konumunu gösterebilirsiniz:

Mobil cihazlarla gezinti yaparken ana kategoriye ve geçerli kategoriye dönüşleri işaretlemek yeterlidir:

 

DÜZENLEME

İnternet siteleri doğru bir şekilde düzenlenerek ilgili içeriğin göze hoş gelecek şekilde olmasını sağlanır. Sitenin içeriğinde yer alan tüm öğeler uyumlu ve anlamlı olarak düzenlenir. Düzenleme işleminin amacı içeriği uygun bir şekilde sıralamaktır, açıklama yapmak değildir.

İnternet siteniz içerisindeki öğeler belirli bir mantığa göre sıralanabilir. Bazen alfabetik düzenleme tercih edilebilir veya bir haber sitesi söz konusuysa sıralama yayın tarihine göre uygulanabilir.

Bazı site tasarımlarında sıralamaya kullanıcıların karar vermesi için widget kullanım imkanı sunulur:

Widget olarak bilinen araçlar ziyaretçilerin gezinti tercihlerini belirlemek üzere site içerisindeki öğeleri sıralamasına yardım ederler. Kullanımına göre bu araçlar istenmeyen sıralamaların silinmesine yardımcı olabilir. Puanlama yöntemleriyle sıralama yaparak ziyaretçiler yüksek puanlamadan düşüğüne göre sıralama yapabilir.

İnternet siteleri öğeleri çeşitli yöntemlere göre sıralarlar. Genelde sıralamalar ızgara, liste veya sütunlar şeklinde yapılmaktadır. Bunun dışında bazı karmaşık yapılar kullanılsa bile bastiliği ilke edindiğimizi unutmamalıyız. Başlık ve resimli seçenekler sunacaksanız ızgarayı; başlıklar, resimler ve açıklamaları sunacaksanız listelemeyi tercih edebilirsiniz. Bazı tasarımcılar ikinci seçenek için tablo uygulamasını tercih edebilirler.

Bu ızgara görünümünden de anladığımız gibi ızgara seçimleri kullanacağımız alanı iyi bir şekilde değerlendirmemizi sağlar. Siteyi ziyaret eden kullanıcılar aradıklarını rahatça bulabilirler. Ancak her site içeriği resim ağırlıklı olmayabilir. Bu nedenle başlıkları vurgulamak gerekir.

Yukarıda başlıkların ağırlıkta olduğu liste sıralamasını görüyorsunuz. Burada başlıklar resimlerin yanında veya altında-üstünde konumlandırılabilir. Bu tip ızgara listelerinde önemli olan başlığı vurgulamaktır. Haberler gibi içeriklerin olduğu site tasarımlarında daha çok bu tercih edilir. Listeler tablolardan daha fazla yer kaplar ancak okuma rahatlığı açısından daha kolaydır. Ürün listelerinde görsellik önemli olacağından resim ve yazı tablosu kullanılabilir:

Gezinti seçeneklerini sunmanın bir yolu da etiket bölümü oluşturmaktır. Etiket bölümleri önemli olan sıralama özelliklerini taşıdığı gibi aynı zamanda kelimelere dayalı, alfabetik olarak önemli içeriklerin göstergesi olabilir:

 

FONKSİYONEL İÇERİK

Bir internet sitesi tasarımında bir tür navigasyon – gezinti türü kullanmayı ihmal etmeyin. Gezinti şablonunda kullanacağınız resimler sadece site içeriğindeki öğeleri ve seçenekleri sunmak için kullanılır. Kullanacağınız resimler detaylı bilgileri göstermek için gezinti alanında yer almaz. Ziyaretçileriniz menü özelliklerini kullanıp gezintiye başladığında slayt, video gibi hareketlerin duracağı şekilde tasarım meydana getirin.