Tüm Trendler Buna Değer mi? Web Tasarımcılarının Yaptığı En Yaygın 5 UX Hatası

"Zarafet, gereksiz olan her şey atıldığında ve insan sadeliği ve konsantrasyonu keşfettiğinde elde edilir: duruş ne kadar basit ve ayık olursa, o kadar güzel olur." –Paulo Coelho

Bir web tasarımcısının misyonu, ilgi çekici kullanıcı deneyimleri oluşturmak, site ziyaretçilerinin görevleri tamamlamasına yardımcı olmak ve dönüşümleri artırmaktır. Bu süreçte, genellikle sadece estetiğe odaklanırlar, kısayollar alırlar ve sonunda çeşitli ortak tasarım kalıplarına ve trendlerine güvenirler. Buradaki tehlike, popüler trendler tarafından yoldan sapılabilmesi ve sonuç olarak, trendler uygunsuz bir şekilde konuşlandırıldığı için yaygın UX hataları yapılmasıdır.

Web söz konusu olduğunda, insanlar bir şeyler öğrenmek istemezler, bir şeyler yapmak isterler. Web'de tasarımcıların yalnızca görsel çekiciliğe odaklanmayı tercih ettiği ve bunu yaparken kullanılabilirlikten fedakarlık ettiği pek çok örnek var. Tasarımı yönlendiren bir "vay anının", kullanıcının ilgisini çekecek kadar güçlü olacağını varsaydılar. Ancak ne yazık ki, kullanıcılar kullanıcı arayüzünü anlamakta zorlanıyor, siteyi kullanmakta gerçekten zorlanıyor ve sitenin hemen çıkma oranları fırladı.

Kate Rutter'in belirttiği gibi, "Çirkin ama kullanışlı, güzel ama anlamsızdır." Web tasarım kalıplarını ve trendlerini etkili bir şekilde kullanmanın anahtarı, estetik açıdan hoş görünen ve değer kattıkları yer arasında bir denge bulmaktır.

Bazı yaygın UX hatalarına bakalım.

Web Tasarımı Ortak UX Hatası No. 1: Büyük, Sabit Başlıklar

Web sitelerinde giderek daha uzun yapışkan başlıklar görülebilir. Sabit bir konuma sahip olan ve önemli miktarda yer kaplayan “Markalama blokları” ve gezinme menüleri. Tarayıcı penceresinin üst kısmına ("yapışkan başlık") yapıştırılmış halde kalırlar ve genellikle içeriği altlarında kayarken engellerler.

Büyük markalı web sitelerindeki bazı başlıkların yüksekliği 150 pikselin üzerindedir. Onların değeri nerede? Yapışkan başlıklar gibi sabit öğelerin gerçek faydaları olabilir, ancak web tasarımcıları bunları kullanırken dikkatli olmalıdır; dikkate alınması gereken birkaç önemli UX sorunu vardır.

Yapışkan Gezinme Başlığı Konfor İçin Çok Büyük Olabilir

Yapışkan bir gezinme başlığı ile gitme kararı zaten verilmişse, bunu kullanıcılarla test etmek en iyisidir. Aşırıya kaçmak ve yapışkan gezinme başlığını içerikle doldurmak yaygın bir UX hatasıdır. Sabit bir başlıkla, gezinme ziyaretçiler için yine de rahat olmalıdır. Doğru dengeyi bulamamak, ana içeriğe az miktarda yer kalmasına ve ziyaretçiler için boğucu, klostrofobik bir site deneyimine neden olabilir.

Bazen CSS ile ilgili basit bir geçici çözüm vardır: Yapışkan başlığı biraz şeffaf yaparak, insanlar kaydırdıkça içeriği görebilirler, bu da içerik alanını daha önemli hissettirir.

İşte uzun bir yapışkan başlık örneği: ATP'nin Roger Federer'deki oyuncu profili sayfası.

Bu sitenin yapışkan başlığı 180 pikselin üzerinde bir yüksekliğe sahip! Bu, bazı dizüstü bilgisayarlarda tüm sayfa yüksekliğinin %30'undan fazladır: Önlenebilir kötü bir kullanıcı deneyimi.

Mobil Cihazda Yapışkan Gezinme Başlığı UX Sorununu Dikkate Almamak

Bazı insanlar, yapışkan bir gezinme başlığının etkileşimleri hızlandırabileceği büyük, yüksek çözünürlüklü bilgisayar ekranları kullanıyor olabilir, peki ya mobil? Şüphesiz, önemli sayıda site ziyaretçisi siteye bir mobil cihazdan erişecektir, bu nedenle sabit bir başlık en iyi fikir olmayabilir. Neyse ki, duyarlı tasarım teknikleri, farklı platformlar için farklı çözümler tasarlamayı ve masaüstü tarayıcılar için tasarlanmış yapışkan gezinme başlığına bağlı kalmayı mümkün kılar.

Polisle Kahve sitesi de sabit bir başlığa sahiptir, ancak çok daha küçüktür - 80 pikselden daha kısa.

Bu durumda başlık navigasyonu, daha verimli navigasyon sağladığı için yüksek çözünürlüklü ekranlar için tartışmasız doğru çözümdür. Daha küçük çözünürlüklü ekranlarda, başlık da sabittir ancak önemli miktarda yer kaplar. Mobil cihazlarda sabit gezinme başlığına mükemmel bir alternatif, her zaman mevcut olan hamburger menüsüdür. Bu model evrensel bir problem çözücü olmasa da, önemli miktarda alan boşaltır.

Web Tasarımı Genel UX Hatası No. 2: İnce, Hafif Yazı Tipleri

Bu günlerde ince, hafif yazı tipleri çok sayıda mobil uygulamada ve web sitesinde yaygındır. Ekran teknolojisinin ilerlemesi ve iyileştirilmiş işleme ile birçok tasarımcı bunları zarif, temiz ve modaya uygun oldukları için kullanıyor. Ancak, ince yazı tipleri kullanılabilirlik sorunlarına neden olabilir ve bu nedenle UX'i engelleyebilir.

Bir web sitesindeki tüm metinlerin amacı okunaklı olmaktır ve ince yazı tipi okunabilirliği ciddi şekilde etkileyebilir. Tüm ziyaretçiler bir siteyi ince yazı tipini iyi gösteren bir ekranda görüntüleyemez. Bazı hafif türlerin Retina ekranlı bir iPhone veya iPad'de okunması zor olabilir.

Her şeyden önce, metin okunaklı olmalıdır. Kullanıcılar uygulamanızdaki kelimeleri okuyamıyorsa, tipografinin ne kadar güzel olduğunun bir önemi yoktur.

Apple İnsan Arayüzü Yönergeleri

Apple, mobil uygulamalardan bahsediyor, ancak aynı ilke web siteleri için de geçerli. Okunabilirlik zorunludur, iyi kullanılabilirlik için isteğe bağlı değildir. Okunamıyorsa, bir web sitesine içerik koymanın bir anlamı yoktur.

İnce tip kullanmadan önce göz önünde bulundurulması gereken bazı yaygın UX hataları şunlardır:

Trend Olduğu İçin İnce ve Hafif Yazı Tiplerini Kullanmak

Yazı tipleri sadece iyi görünmemeli, aynı zamanda okunaklı olmalıdır. Uygun kontrast ve okunabilirlik elde etmek için tasarımcılar tasarımlarında optimum kombinasyon için çaba göstermelidir: boyut, ağırlık ve renk.

Tüm site metninin okunaklı olduğundan emin olmak için siteyi çeşitli cihazlarda ve ekran boyutlarında test etmek en iyisidir.

Bu da bizi bir sonraki yaygın UX hatasına götürür:

Tüm Büyük Cihazlarda Metin Okunabilirliğini Test Etmeme

İnce, hafif tip, birçok tasarımcının pahalı, ince ayarlı monitörlerinde iyi görünebilir, ancak tasarımlarımızı genellikle daha ucuz, standart altı ekranlarda gören ortalama bir kullanıcı da dikkate alınmalıdır. En iyi uygulama, yazı tiplerinin tüm büyük cihazlarda nasıl göründüğünü kontrol etmektir: masaüstü bilgisayarlar, dizüstü bilgisayarlar, tabletler ve akıllı telefonlar.

Örneğin, bir mobil tasarımı test ederken, katılımcıların siteyi gün ışığında mobil cihazlarda kullanmasını sağlayın; gerçek dünyadaki kullanıcılar her zaman mükemmel tarama ve aydınlatma koşullarına sahip olmayacaktır. Bir web sitesinde ince bir yazı tipi kullanıyorsanız, mobil kullanıcılara uyum sağlamanın basit bir yolu vardır: daha iyi okunabilirlik için mobil cihazlarda daha kalın bir yazı tipi belirtin.

Web Tasarımı Genel UX Hatası No. 3: Düşük Kontrastlı Metin

Düşük renk kontrastlı öğelerin kullanılması, modern kullanıcı arayüzü tasarımında da moda haline geldi. Minimalist bir tasarım trendinden doğdu çünkü bazı alanlarda kontrastı azaltarak tasarım “minimalist” görünecekti. Tasarımcılar, sunulması gereken bilgilerin karmaşıklığını azaltamadılar, bu nedenle tasarımda düşük kontrastla oynadılar.

Zaten ince yazı tiplerini ele aldık, ancak daha da büyük bir tuzak var: düşük kontrastlı hafif bir yazı tipinin kombinasyonu , kötü okunabilirlik nedeniyle UX'i ciddi şekilde engelliyor. Tasarımcılar bu kullanılabilirlik tuzağından kaçınmak için ellerinden gelen her şeyi yapmalıdır.

Gövde Kopyasında Düşük Metin Kontrastı

Cool Springs Financial, web sitesinde gövde metni için ince bir Helvetica çeşidi kullanır. Zarif görünmesine ve estetik açıdan hoş bir kullanıcı arayüzüne katkıda bulunmasına rağmen, birkaç platformda okunması zordur. Düşük kontrast mutlaka kötü olmasa da, metnin okunmasını zorlaştırarak bir web sitesinin kullanılabilirliği üzerinde olumsuz bir etkisi olabilir.

Metin Kontrastını Test Etmemek

Tasarımcıların Web İçeriği Erişilebilirlik Yönergelerine göre doğru metin kontrastını ayarlamalarına yardımcı olacak Colorable adlı web'de kontrast kontrolü için şık bir araç var. Tasarımcılar doğru metin kontrastını kullandıklarını öğrendiklerinde, web sitelerindeki diğer renkleri ayarlayabilir ve metnin okunabilir olduğundan emin olmak için hızlı bir çoklu cihaz/kullanıcı testi yapabilirler.

Web Tasarımı Yaygın UX Hatası No. 4: Kaydırma Ele Geçirme

Web'de zemin kazanan bir başka yüksek riskli eğilim de "kaydırma kaçırma". Bu eğilimi uygulayan web siteleri, sayfa kaydırmanın kontrolünü ele alır (genellikle JavaScript ile). İnsanlar bununla karşılaştıklarında, artık sayfa kaydırma üzerinde kontrol sahibi olamazlar ve davranışını tahmin edemezler, bu da kolayca kafa karışıklığına ve hayal kırıklığına yol açabilir. Bu, web sitesinin kullanılabilirliğine zarar verebilecek ve en kötü ihtimalle “bilgisayar öfkesine” neden olabilecek riskli bir deneydir.

Bazı web siteleri kaydırma kaçırmadan kurtulabilir, ancak bu herkesin yapabileceği anlamına gelmez. Örneğin, birçok web tasarımcısı, kaydırma kaçırma, paralaks efektleri ve çeşitli ürünlerin yüksek çözünürlüklü görüntüleri ile Apple'ın sitelerini takip ediyor. Apple'ın kendi web sitesi için hedef pazarı, benzersiz bir konsepti ve özel içeriği var. Her sitenin kendine özgü sorunları olduğundan, bu sorunlara özel olarak hazırlanmış benzersiz çözümleri de olmalıdır.

Gerçek Dünya Kullanıcılarıyla Test Etmemek

Modaya uygun fikirleri veya UI kalıplarını ödünç alırken, UX sorunlarından kaçınmak için bir web sitesinin prototipini gerçek dünyadaki kullanıcılar üzerinde test etmek en iyisidir. Basit kullanılabilirlik testi, örneğin bir kaydırma kaçırma uygulamasının uygulanabilir olup olmadığını ortaya çıkaracaktır. Tasarımcılar, test yapmadan, kaydırma kaçırmanın işe yarayıp yaramayacağını bilemezler ve varsayımlar yapmak genellikle maliyetlidir.

Popüler bir kişisel blog sitesi olan Tumblr, ana sayfalarında kaydırma kaçırmayı kullanır. Bunu yapmak riskli olsa da, hedef kitlelerini ve sunmak istedikleri havalı, havalı kullanıcı deneyimini iyi tanıdıklarını varsaymak güvenlidir. Site ziyaretçileri kaydırmaya başladığında, kaydırma ele geçirilir ve insanlar bir sonraki bölüme alınır.

Uzun kaydırma sayfası, yüksek dozda doygun renkler ve pencerenin sol tarafındaki belirgin gösterge noktaları ile ayırt edilebilen birkaç bölüme ayrılmıştır. Sonuç olarak, Tumblr'ın ana sayfası, hoş olmayan, deneysel bir web sitesi yerine, ziyaretçilerin üzerinde kontrol sahibi olduğu büyük bir dikey atlıkarınca gibi geliyor.

Web Tasarımı Ortak UX Hatası No. 5: Dönerli Araçlar

Karusel (çeşitli içerikler arasında geçiş yapmak için bir slayt gösterisi) web'de, özellikle de açılış sayfalarında ve ana sayfalarda çok yaygındır. Yararlı olabilseler de çok sayıda kullanılabilirlik sorunları vardır ve bu nedenle başka bir yaygın UX hatası olarak nitelendirilirler. Nielsen Norman Group'a göre: " insanlar genellikle bu büyük resimleri hemen kaydırır ve içindeki tüm içeriği kaçırır ." Ziyaretçiler, dönen slaytların bazılarında değerli içerik göremeyebileceğinden, kullanıcı deneyimini olumsuz etkileyebilir.

Web Sitesi Karuselleri Kullanıcılara Değer Sağlamayabilir

Doğru yapılırsa, bir atlıkarınca, büyük çarpıcı görüntülerle kullanıcıların ilgisini çekebilir. Sorun şu ki, atlıkarıncalar genellikle herhangi bir ek değer katmazlar, sadece dekorasyon için vardırlar ve yalnızca diğer herkes onları kullandığı için dahil edilir. Bir site atlıkarıncasının mantıklı olup olmadığını test etmenin bir yolu: bir atlıkarıncanın ziyaretçiye sağladığı üç faydayı yazın. Üç anlamlı fayda bulunamazsa, herhangi bir değer katmaz.

Önceki ve sonraki Okların Keşfedilebilirliği Düşük

Bir web sitesi atlıkarıncasındaki önemli bilgiler, sonraki ve önceki oklar bulunamıyorsa gizli kalabilir. Kontroller ayrıca mobil cihazlar için musluk uyumlu olmalıdır.

Genellikle atlıkarıncayı kontrol edecek oklar yoktur; slaytları ilerletmek için yalnızca slayt göstergesi noktaları dahil edilmiştir. Bununla birlikte, genellikle düşük kontrastlıdırlar, düşük keşfedilebilirliğe sahiptirler ve yeterince büyük tıklanabilir veya dokunulabilir bir alana sahip değildirler. Küçük tıklanabilir hedefler, kötü UX'e, hayal kırıklığına uğramış bir web sitesi ziyaretçisine ve web sitesinden hızlı bir şekilde çıkışa neden olabilir.

Örneğin, Floresta Longo Vakfı web sitesinin ana sayfasında dönen bir resim karuseli vardır. Otomatik oynatmaya ayarlı ve beş fotoğraf arasında dönüyor. Ancak önceki ve sonraki oklar küçük ve şeffaftır, bu da onları tespit etmeyi ve tıklamayı zorlaştırır. Ziyaretçilerin açık olduğu slayt için hiçbir gösterge ve resimlerin neyi temsil ettiğini gösteren hiçbir etiket yoktur. Görüntüler bağlantı değildir ve saf dekorasyon görevi görür. Bu tür atlıkarınca, ziyaretçinin ilgisini çekmek için bir miktar değere sahip olsa da, genel olarak arzulanan çok şey bırakıyor.

Çözüm

Web tasarım trendleri, dikkatli bir şekilde ele alınmadığı ve uygulanmadığı takdirde, birçok yaygın UX hatasına yol açabilir. UX tasarımcıları en iyi yargılarını kullanmalı ve yenilik yapmaktan korkmamalıdır, ancak mükemmel web sitesi kullanılabilirliği sağlamak için tasarımlarını gerçek dünyadaki kullanıcılarla kapsamlı bir şekilde test etmelerine yardımcı olacaktır.

Web tasarım trendlerinin çılgın bolluğunda, moda olan şeyler gelir ve gider. Bu kaosun ortasında, estetiğin, verimliliğin ve kullanılabilirliğin dengeli kullanımı, en güçlü olduğu kanıtlanan ve en fazla kullanıcı kabulünü kazanan UX trendlerini ayırt etmede önemli bir rol oynar.

Web tasarımcıları en havalı renk şemasını, en gösterişli kaydırma animasyonunu veya en fantastik paralaks efektlerini bulabilirler, ancak bunun sonucunda insan etkileşimi zarar görürse, UX zayıf olacak ve insanlar hızla yoluna devam edecek. Başka bir site sadece bir tık uzağınızda.

Toptal Tasarım Blogunda daha fazla okuma:

• Duyarlı Tasarım - En İyi Uygulamalar ve Hususlar
• Web Sitesi Tasarım Sürecine Tarayıcıdan Yaklaşma
• Tasarımcılar için Kodlama – Ne Kadar Bilmeliyiz?
• Kullanıcı Arayüzü Tasarımı En İyi Uygulamaları ve Yaygın Hatalar