Web sitesinin bireysel unsurlarına baktığınızda, kullanıcı deneyimine olumlu katkı yapan şeyler arasında logo marka oluşturucudur ve kendi başına bir incelemeyi hak eder. Bu makalede, web sitesi logosuyla ilgilenirken kullanıcı deneyimini en üst düzeye çıkarmak için bazı ipuçlarını sizinle paylaşmak istiyorum.

Web Sitesi Logosu Ana Sayfa Menü Bağlantısını Değiştirir

Logo, genellikle navigasyon çubuğunda yer alır ve HER ZAMAN ana sayfaya bağlantılı olmalıdır. Kullanıcılar bugün logoya tıkladıklarında geri dönüş yapmasını beklerler. Logo böylelikle bazen hala Home bağlantısını görme alışkanlığı olan web sitelerinde bulunan ve ana sayfaya bağlantı sağlayan menü bağlantısını da değiştirir. Navigasyonda ayrı bir Ana Sayfa bağlantısı yer alması gereksizdir, bu sayede değerli alan da tasarruf edilir.

Almanya'nın Kuzeyinde bulunan Waren (Müritz) şehri, şirketimizin bulunduğu yer, kullanıcıya geri dönüş için ev simgesiyle yardımcı olmaya karar vermiştir. Burada muhtemelen iki nedenle kullanılmış olabilir: Birincisi, logonun yanı sıra başka bir logo daha yerleştirilmiştir, bu da logo üzerine tıklama eğilimini azaltabilir. Diğeri, bu web sitesinin kullanıcılarının internette daha az deneyimli olduklarını düşündüğünü varsayabiliriz. Açıkça söylemek gerekirse, bu ev simgesi kullanıcı deneyimini sınırlı derecede artırır, çünkü bu web sitesinde birçok bilgi mimarisi, kullanıcı arayüzü ve erişilebilirlikle ilgili ciddi eksiklikler bulunmaktadır (özellikle bağlantıları ve metinleri okumak için kontrastlar). Waren (Müritz) şehrinin web sitesi böylece bir olumsuz örnek teşkil etmektedir.

Duyarlı Logo: Cihazın Çözünürlüğüne Göre Logonun Uyarlanması

Masaüstü görünümlerde geniş bir alan bulunur ve bu nedenle kurum adı veya sloganı logoda belirtilebilirken, mobil görünümde yer ve dikkat nedeniyle logo daha küçük bir formda olmalıdır.

Web sitelerinde olduğu gibi logolar da yıllardır boyuta, ortama ve ortama uyarlama trendi kazanmıştır. Responsive Logo da denilen bu durum, logonun ortam durumunu dikkate alarak küçük cihazlarda mükemmel bir şekilde sunulması anlamına gelir, bu da bazen farklı şekillerde sunulmasını gerektirebilir. Tüm cihazlarda ve ekran boyutlarında aynı görünen statik logolara karşı, duyarlı logolar ortamın gerekliliklerine adapte olur ve böylece çeşitli cihazlar üzerinden tutarlı bir şekilde optimize edilmiş bir kullanıcı deneyimi sunar. Logonun formunda sadece küçülme olur, marka mesajında değişiklik olmaz.

İyi bir örnek, İsviçre şirketi Victorinox tarafından sunulmaktadır. Kullanıcı ilk olarak büyük ikonu görür. Tek eksik nokta: Logo PNG dosyası olarak değil SVG olarak eklenmiştir.

Yalnızca resmin olduğu kısımda ekrana logo gösterilir. Arkada, İsviçre kökenini vurgulayan bir dağ görülmektedir. İlk görünümde marka oluşturma önemlidir. Kullanıcının anlamasını sağlamalıdır. Victorinox'ta doğru yerdesiniz. Kullanıcı aşağı doğru kaydırdığında, içerikler önem kazanır. Logo görünümde küçülmekte ve ana içeriklere daha fazla alan vermektedir. Navigasyon üst kısımda sabit kalmaktadır, bu da kullanılabilirlik açısından çok mantıklıdır.

Bir diğer yaklaşımı Guinness web sitesi takip etmektedir: Logo şirket adıyla yerleştirilmiştir. Kaydırma yapılırken logo biraz küçültülür ancak navigasyon hala görünürdür. Kullanıcı yukarı doğru kaydırmaya başladığında, logo ve navigasyonun tekrar büyüyeceği ve kullanıcının daha fazla sayfa ziyaret etmesinin beklendiği kabul edilir.

Commerzbank, web sitesinde tam olarak uygun çözüm sağlamamıştır. Logo kurum adıyla görünür ve SVG olarak yerleştirilmiştir, bu iyi bir çözümdür. Ancak yan yana bulunan navigasyon noktalarıyla çok güçlü bir rekabet içindedir. Kaydırma yapılırken, navigasyon tamamen kaybolur ve kullanıcının yeniden görmesi için tamamen en tepeye kadar kaydırması gerekir. Daha iyi bir çözüm, tekmeler zamanının nasıl olduğu gibi tarafsızca.com'da olduğu gibi, ne zaman olduğunu görerek, yüksek çözünürlükte başında görüntülenen uygun şekilde hemen yanıt verebilmek oldu.

Dönüşüm optimizasyonu açısından oldukça iyi çözülen bir şekilde sunulan şey Commerzbank'ın büyük düğmenin bakışını kontrol eden büyük resmidir. İki kişinin bakış yönüne bakar. Otomatik olarak ziyaretçinin ilgi noktasını düğmeye çekerler. Bu tür bakış noktalarının Çağrıya Yönlendirme üzerine yoğunlaştırılması oldukça etkili olmaktadır. İyi iş Commerzbank!

İlginç olan şey, mobil versiyonlardaki örnekleri incelediğimizde ortaya çıkıyor.

Mobil versiyonda Victorinox logosu daha küçük ve kullanıcı için etkileşim seçeneklerini daha iyi düzenlemek için ortalanmış durumda. Guiness logosunun altında değil yanında metin yer alıyor. Böylece harf daha fazla alan kaplıyor ve en üst navigasyon çubuğu çok büyük olmuyor. Commerzbank ise akıllı telefon çözünürlüğünde metni sadece gizliyor.

Responsive logoların Kullanıcı Deneyimi'ndeki rolü önemlidir, çünkü web sitesine kullanıcıların nasıl eriştiğinden bağımsız olarak görsel tutarlılığı ve marka kimliğini korumaya yardımcı olurlar.

Bir logo değişen çözünürlüklere duyarlı değilse, logo kullanıcının ilgisini fazla çekebilir. Örneğin, Hypovereinsbank'ın logosu çok çarpıcı bir şekilde, özellikle akıllı telefon görünümünde sağa yerleştirilmiş Call-to-Action ile aşırı rekabet ediyor. Orta seviyedeki gri navigasyon noktaları masaüstü görünümünde gözden kaçırılıyor. Genel olarak, bu web sitesi bazı UX hatalarına sahip.

Responsive logoları sağlamak için tasarımcıların logo adaptasyonları sağlamaları gerekmektedir. Logo farklı arka planlarda da iyi çalışmalı ve çeşitli boyutlarda da olmalıdır. Çözünürlük ne kadar küçük olursa, detaylar da o kadar azalır. Ancak bununla birlikte, marka kimliğini kaybetmemesi önemlidir. Responsive logoların kullanımında bu yüksek sanatı anlatır. Yani marka yenileme yaparken, gelecek logonuzu kullanırken bu gereksinimi düşünmelisiniz.

Web Sitesi Logosunun Dosya Formatı

Çözünürlüğe bağlı olarak doğru boyutun yüklenmesi nedeniyle Responsive logoların kullanımı mantıklıdır. Örneğin, bir akıllı telefon gibi küçük çözünürlüklerde yalnızca daha küçük grafik yüklenir. Bu, yükleme süresinden tasarruf sağlar. Ancak en büyük etkiyi elde etmek için:

1. Logoyu doğru çözünürlükte entegre edin (ayrıca yükseklik ve genişlik hakkında bilgiler verin). Sık ​​sık, logolar çok yüksek çözünürlükte eklenir ve daha sonra görüntülenme için küçültülür.
2. Logo'yu Vektör formatı SVG olarak ekleyin, PNG veya JPG yerine.

Web Sitesi Logosunu Favicon olarak Kullanma

Favicon olarak logonun basitleştirilmiş formunu kullanın. Bu sırada, küçük favicon çözünürlüğünde tanınmayan metinler veya diğer küçük unsurlardan kaçının.

Yukarıdaki örnekte Guinness web sitesi, web sitesi için logosunu iyi bir şekilde kullanırken, favicon olarak optimal değil. Küçük beyaz Guinness metni tanınmıyor ve favicon içinde genel izlenim azalıyor. Kontrast düşüktür. İzlenim, metinsiz ve sadece logonun harfesine odaklanıldığında daha iyi olacaktır. Bu diğer örnekler, Guinness'tan daha iyi çözümler sunmaktadır.

Eğer responsive logolara odaklanan bir ajans arıyorsanız, bizimle iletişime geçmekten çekinmeyin. 4eck Media olarak Kullanıcı Deneyimi için profesyoneliz.

Eğer profesyonel bir konumlandırma önemliyse, belki ayrıca şu İkon Paketleri ve Kurumsal Tasarım Şablonları da ilginizi çekebilir: