En Sık Yapılan Arayüz Hataları: Seri 2

#11: Tıklanılabilir Alanların Ufak Olması
Bağlantılar tıklanmak için tasarlanmıştır. Tıklanılabilir alanın yeteri kadar geniş olduğundan ve kolay tıklanılabilir olduğundan emin olun.

 

#11: Optimize Edilmemiş 404 Sayfaları
404 hatası ya da “Sayfa Bulunamadı” (“Not Found”) mesajı web tarayıcısı sunucu ile iletişim kurduğu zaman sunucu üzerinde mevcut olmayan bir kaynağa bağlanılmak istendiğinde görüntülenir. Örneğin bir kullanıcı hatalı bir URL adresine bağlanmak istediğinde sunucunuz bu adresi veritabanında sorgulayacak ve ilgili sayfayı veya kaynağı bulamadığı takdirde “404 Error Not Found” hatasını görüntüleyecektir.

Aşağıdaki optimize edilmemiş bir 404 sayfasının somut bir örneğidir.
n_01

404 hatası sayfalarınızı düzenlemeniz için bazı fikirler:
Sıkça Sorulan Sorular/Destek sayfasına ulaşılabilinmesi için bir bağlantı koyun.
Site haritası için bir bağlantı koyun.
Web sayfasının üst kısmına arama kutusu yerleştirin.
404 sayfanızı websitenizdeki diğer sayfalarla aynı görsel yapıda oluşturun.

Yukarıda belirttiğimiz tavsiyelere bir örnek:
Mailchimp firması 404 sayfasını optimize edilmiş ve hatta optimize etmenin birkaç adım ötesine gidip 404 sayfasını neredeyse eğlenceli bir sayfa haline getirmiştir.
n_02

 

#12: Yavaş Yüklenen Web Sayfaları
Bir siteyi gezerken uzun yüklenme süresi karşılaşılan en sinir bozucu şeylerden biridir. Hızlı büyüyen online dünyada kullanıcılar artık istedikleri bilgilere erişirken sabırları çok daha erken tükeniyor. Bir kullanıcının sayfa yüklenmesi çok uzun sürdüğü taktirde sayfanın yüklenmesini beklemek yerine siteyi terkedip bir sonraki siteye geçmesi olasılığı daha fazladır. Bu yüzden yüklenme sürelerini gereksiz içerikleri mümkün olabildiğince silerek ve daha ufak boyutlarda resim/fotoğraf kullanarak azaltmaya çalışın.

 

#13: Dağınık ve Karmakarışık Tasarım
Kullanıcıların arayüzünüzü başarılı bir şekilde kullanabilmeleri için tasarımın basit olması gerekir. Ayrıntılı tasarımlar kullanıcıları boğar. Çok fazla içerik kullanıcı tarafında istediklerini bulabilmeleri için daha fazla dikkat sarfetmeleri demektir ve kulanıcılar kolay bir süreç isterler.

Tasarımınız bilgi için kolay bir şekilde taranabilir olmalıdır. Eğer tasarımınızı sadeleştirmek istiyorsanız ilk önce markanızı ve nasıl temsil edilmek istediğinizi gözden geçirin. Aynı zamanda ziyaretçilerinizin ihtiyacı olduğu ve istediği en önemli içerikler üzerinde düşünün. Bu faktörlerin her ikisine de denk gelen unsurları tasarıma dahil edin.

 

#14: Metni Çok Fazla Olan Sayfalar
Aslında metinin fazla olması çok da kötü değildir ancak çok uzun paragraflar kullanmayın. Bilgisayar ekranında yazıları okumak basılı bir kaynağı okumaktan çok daha farklıdır. Metin bloklarını daha kısa paragraflarlar, başlıklar ve alt başlıklar kullanarak ve daha uygun bir beyaz boşluk sağlayarak ayırıştırabilirsiniz.

 

#15: Önemli Bilgileri Saklamak
Bu aslında işinize bağlı olarak siteden siteye göre değişir. Eğer bir e-ticaret siteniz varsa alışveriş sepeti websitenizin her sayfasında normalde sayfanın üst sağ köşesine kalıcı olarak yerleştirilmelidir. Eğer herhangi bir hizmet veya ürün satıyorsanız iletişim bilgileriniz asla zor bulunacak bir yerde olmamalıdır, bu bilgileri websitenizde vurgulamaya dikkat edin.

 

#16: Bozuk Bağlantılar (Broken Links)
Bu düşündüğünüzden daha sık meydana gelen bir durumdur. Bozuk bağlantılar bir websitesini modası geçmiş ve bakımsız gösterir. Bir bağlantı taşınmış ya da kaldırılmış olsun, ziyaretçilere gidecek bir yer bırakmaz. Bozuk bağlantıların olup olmadığını kontrol etmek düşündüğünüzden daha kolay, sizi bu yükten kurtaracak birkaç ücretsiz bozuk bağlantıları bulan araç var. Sitenizi girin, bütün bozuk bağlantıları bulun ve bir an önce düzeltin.

 

#17: Düşük Kalitede veya Stock Fotoğrafları Kullanmak
Düşük kaliteli görsellerden başlayalım. Düşük kalite ve çözünürlükte olan görsellere sahip olan websiteleri kendi itibarlarını zedelerler. Websiteniz birçok müşteri için işletmenizin portresi gibidir, bu yüzden yaptığınız işleri sağlam bir şekilde temsil etmek için yüksek kalitede görseller bulmak için zaman ayırın.

Yanlış anlaşılmasın, kesinlikle stock resimleri kullanmayın demiyoruz ancak bazı stock resimleri, üstün kalitede olmalarına rağmen çok fazla sıradan ve bayağı olabiliyor ve bu tür fotoğrafların stock fotoğrafı olduğu hemen belli oluyor.

Klişeleşmiş stock fotoğraflarını kullanmaktan kaçının, tabi içlerinde Vince Vaughn yoksa eğer.
Klişeleşmiş stock fotoğraflarını kullanmaktan kaçının, tabi içlerinde Vince Vaughn yoksa eğer.

Profesyonel bir şekilde işletmenizin fotoğraflarını çekebilmek için iyi bir fotoğraf makinesine ya da profesyonel bir fotoğrafçıya yatırım yapmak yaptığınız yatırıma değecektir ve jenerik stock fotoğraflarına kıyasla size çok daha fazla itibar kazandıracaktır.

 

#18: Sayfa Yüklendiğinde Müzik veya Video Başlaması
Websitelerine ses ve video koyabilmek, websitelerini geleneksel pazarlama yöntemlerine göre çok daha avantajlı kılar. Multi-medya içerik üretmenizi ve bunları sitenizde kullanılabilir hale getirmenizi kesinlikle tavsiye ediyoruz. Sadece multi-medya içerikleri websitenizi ziyaret eder etmez başlatmayın. Kullanıcılara içeriğinizi dinlemeleri veya izlemelerini bir seçenek olarak sunun. Websitenizin ziyaretçileri ofiste, kütüphanede ya da yüksek sesin websitenizden hemen uzaklaşmalarına sebep olacak herhangi bir yerde olabilirler.

 

#19: Düşük veya Yüksek Contrast
Hiç bir siyah arka plan üzerine beyaz metin içeren bir web sitesini ziyaret ettiniz mi? Tasarım açısından güzel gözükebilir ancak göze de zarar verir.

n_04
Çoğumuz artık günde saatlerce ekrana bakıyoruz. İçeriğinizi okumayı olması gereğinden fazla zor hale getirmeyin. Okuyucularınıza bir iyilik yapın ve sitenizdeki metinleri kolay okunabilir yapın. En iyi seçenek beyaz arka plan üzerine siyah metin kullanmaktır.

 

#20: Karmaşık Navigasyon
Web tasarımda en büyük hatalardan biri de navigasyonu sayfadan sayfaya değişik yapmaktır. Sitenizin amacı, ziyateçilere aradıklarını en kısa sürede ve kolayca bulmalarını sağlamaktır. Ana navigasyonu sayfadan sayfaya değiştirmek ziyaretçilerinizin kafasını karıştıracak ve sitenizi terk etmelerine sebep olacaktır. Sitenizdeki bütün sayfaları navigasyona tıkmak da aynı etkiyi yaratacaktır. Tutarlı bir ana navigasyonun dışında, ziyaretçilere breadcrumb (şu an hangi sayfadasınız) ve sayfalama kullanarak yardımcı olabilirsiniz.

 

#21: Splash Sayfası
Splash sayfasını landing sayfası ile karıştırmayın. Splash sayfaları eskiden ve malesef hala günümüzde ziyaret edilen sitenin ne olduğunu tanıtmak için kullanılıyor. Pazarlamacılar halen splash sayfalarını kullanmaya devam ediyorlar bunun sebebi de anasayfanın yeteri kadar iyi bir şekilde iletişim kurabileceğine inanmamaları. Smashing Magazine’nin neden splash sayfalarına ihtiyacımız olmadığını açıklayan güzel bir makalesi var. Landing sayfaları ise ziyaretçileri potansiyel müşteri veya müşteriye çevirmek için pazarlama kampanyasının bir parçası olarak kullanılır. Etkili landing sayfaları, ziyaretçiler istenilen eylemleri yerine getirsinler diye dikkatlerini başka yöne çekecek hiçbir içeriği ya da bilgiyi sayfaya dahil etmez.


 

En sık yapılan arayüz hataları serisine devam edeceğiz. Sırada Mobil uygulamalar var!

Yeni yazılardan haberdar olmak istiyorsanız aşağıdaki alana e-posta adresinizi bırakabilir ya da Kullanıcı Ajansı Twitter hesabımızı takip edebilirsiniz.

En Sık Yapılan Arayüz Hataları: Seri 1

En sık yapılan arayüz hatalarını toplayan bir seri yapmaya karar verdik. İşte birincisi. Bunlara dikkat ederek hataları en aza indirebilirsiniz.

1: Kullanıcılardan Çok Fazla Bilgi İstemek
Kullanıcılar tembeldir. Ne kadar fazla form eklerseniz, kullanıcıların motivasyonu o kadar düşer.

Genellikle mümkün olduğunca pürüzsüz bir kullanıcı deneyimi yaratmaya çalışmalısınız. Birkaç yıl önce Imaginary Landscapes firmasının yaptığı bir araştırma çok fazla form koymanın kullanıcıların kayıtlarını caydırma teorisini test etti. Test 11 alanlı form ile ile sadece 4 alanı olan bir formu karşılaştırdı.

11 alanlık form aşağıdaki bilgileri zorunlu kıldı:

İsim
Şirket
Adres
Şehir
Eyalet
Posta Kodu
Telefon
Faks
E-posta
Tercihi iletişim metodu
Yorumlar

y01

Bu forma aynı zamanda ziyaretçilerin siteyi nereden bulduklarını soran checkboxlar dahil edilmişti.

Bir diğer versiyonda daha az alanlı bir form kullandılar:

İsim
Telefon
E-posta
Yorumlar

y02

Tabii ki, telefon numarasını ve yorumları kaldırarak formu daha da fazla kısaltabilirsiniz . Bulunduğunuz sektöre bağlı olarak telefon numarası potansiyel müşterileri belirlemek (lead generation) için önemli olabilir, ancak insanların çoğunlukla istenmeyen telefonları önlemek için telefon numarası kısmını doldurmak istemediğini farkedeceksiniz.

Çalışmanın neticesi ne oldu? Araştırmacılar kısa formu kullanarak kaydolanların oranı uzun forma göre %140 daha fazla olduğunu gördüler. Buna ek olarak dönüşüm oranları kısa formun kullanılmasıyla neredeyse %120 arttı. Çalışma aynı zamanda kaldırılan alanların dönüşüm kalitesi üzerinde hiçbir etkisinin olmadığını ortaya çıkardı.

Gerekli olan alanların ideal sayısını bulmak için, ilk önce kullanıcılarınız üzerinde araştırma yapmalı ve bu kullanıcılardan tam olarak hangi verileri toplamanız gerektiğini bulmalısınız. Çok uzun formların kesinlikle kullanılmaması gerektiğini vurgulamalıyız ama aynı zamanda kaç tane alan kullanılmasına dair de kesin bir sayı yoktur.

Gerçek şu ki, çoğu zaman bir takım şeyleri elde edebilmemiz için diğer şeylerden vazgeçmemiz gerekir burada da durum böyledir. Uğraşmanız gereken birbiri ile yarışan öncelikler var: satış ekipleri genellikle daha fazla potansiyel müşteri bulma peşindeyken tasarımcılar da en iyi kullanıcı deneyimini sunmak için çaba sarfederler. Arada bir denge kurmanın en iyi yolu da test etmektir.

Örneğin, Expedia kendi formundan sadece bir alan (Şirket Adı bilgisi – kullanıcıların kafasını karıştırdı) çıkarınca şatışlarda 12 milyon dolarlık bir artış elde etti.

 

#2: Kullanıcı Geribildirimini Almayı Son Dakikaya Bırakmak
Kullanıcı geribildirimi bazen büyük bir sınav için hazırlanmaya benzer. Mümkün olabildiğince erken ve sık çalışmanızın farkındasınızdır ama bir şekilde çalışmayı sınavdan bir önceki akşama sığdırırsınız ve artık bir fark yaratmak için çok geç kalmışsınızdır.

Kağıtla prototipleme ve hızlı prototipleme size bir tasarımı inşa etmeden çok önce test etme imkanı verir. Bu yüzden kullanıcı geribildirimi almak için elinizde tamamlanmış bir tasarım olması gerektiğini düşünme hatasına düşmeyin.

Test etmek için tasarımın ya da projenin tamamının bitmesini beklemeyin. Kağıt prototipleme ya da hızlı prototip araçlarını kullanarak testler yapabilirsiniz. Bu sayede daha az maliyetle çok daha önceden hataları yakalamanız ya da hangi alanları formlara koyacağınızı belirleme imkanınız olur.

 

#3: Diğer Tasarımları Körü Körüne Taklit Etmek
Çok yaygın bir UX hatası da diğer tasarımların düşünceli bir şekilde tasarlanıp üzerinde araştırma ve test yapıldığı varsayılarak kopyalanmasıdır.
Başka tasarımları körü körüne kopyalarken kopyaladığınız tasarımdaki hataları ve problemleri de kendi tasarımınıza eklemiş olursunuz.

Tasarım patternlarını kullanmak ve diğer tasarımların en iyi kısımlarını almak mantıklı olsa da ilham aldığınız tasarımların nasıl bir performans göstereceğini bilmek açısından test yapmanızı öneririz. A/B testi yapmak iyi bir yoldur, bunun haricinde en basitinden birkaç kullanıcı bulup tasarımınızı test edebilirsiniz.

 

#4: Online Okuma İçin PDF Kullanılması
Kullanıcılar internette dolaşırken PDF dosyası ile karşılaşmaktan nefret ederler çünkü PDF formatı alıştıkları düzeni bozar. Baskı ve belgeleri save etmek gibi en basitinden işlemler bile zorlaşır çünkü standart tarayıcı komutları PDF dosyaları üzerinde çalışmaz. PDF boyutları genellikle kağıt boyutlarına göre optimize edilmiştir ve bu boyut da nadiren kullanıcının tarayıcı penceresiyle uyumlu olur. Güle güle sorunsuz scroll etme. Merhaba ufacık fontlar.

Daha da kötüsü PDF dosyaları gezinmesi zor olan bir içerik yığınıdır.

PDF kılavuzların ve diğer büyük dosyaların dağıtımı ve baskı çıkartmak için harikadır. Sadece bu amaçla kullanın ve ekranda taranması veya okunması gereken bilgileri gerçek web sayfası olarak oluşturun.

> PDF dosyalarının online okuma için neden kötü olduğunu açıklayan bir makale.

 

#5: Ziyaret Edilmiş Bağlantıların Rengini Değiştirmemek
Geçmişte hangi sayfaları ziyaret ettiğinizi bilmeniz şu andaki konumunuzu anlamanıza yardımcı olacaktır. Geçmişte ve şu anda bulunduğunuz konum bir sonraki aşamada nereye gideceğinize karar vermenize yardımcı olur. Bağlantılar bu navigasyon sürecinde en önemli faktördür. Kullanıcılar daha önce bazı bağlantıları ziyaret edip istedikleri sonucu alamadılarsa bu bağlantıları hariç tutabilirler. Aynı şekilde eğer ziyaret ettikleri bağlantıları yararlı buldularsa bu bağlantıları tekrar ziyaret edebilirler.

En önemlisi, hangi bağlantıları daha önce ziyaret ettiklerini bilmeleri, kullanıcıların farkında olmadan aynı bağlantıları tekrar tekrar ziyaret etmelerini engeller. Bunu sağlayabilmek için de web sitelerinde ziyaret edilmiş ve edilmemiş bağlantılar için değişik renkler kullanmak gerekir.

> Bağlantı renklerini değiştirmenin kullanılabilirlik üzerinde etkileri

 

#6: Yeni Tarayıcı Pencereleri Açmak
Bazen tasarımcılar, bağlantıları yeni bir pencerede açmanın kullanıcıları websitesinden ayrılmalarını önleyeceğini zannederler. Ancak kullanıcıya agresif bir yaklaşım göstermenin yanında bu tür bir strateji uygulamak aslında bir dezavantajdır çünkü kullanıcılar çoğu zaman tarayıcıdaki “Geri” butonunu kullanarak siteye geri dönerler ve yeni pencere açıldığı zaman Geri butonu etkisiz hale gelir. Bunun yanında kullanıcılar çoğu zaman yeni bir pencerenin açıldığını farketmezler özellikle de pencerelerin ekranı tamamen kaplayacak şekilde açıldığı ufak bir monitör kullandıkları zaman. Bu yüzden geldiği yere geri dönmek isteyen bir kullanıcı gri bir hal almış Geri butonunu gördüğü zaman kafası karışır.

Kendilerinden beklenildiği gibi davranış göstermeyen bağlantılar kullanıcıların kendi kullandıkları sistemi anlayamamalarına neden olur. Bir bağlantı mevcut sayfayı yeni içerik ile değiştiren basit bir köprü görevi görmelidir. Kullanıcılar yersiz pop-up pencerelerinden nefret ederler. Eğer kullanıcılar hedef sayfayı yeni bir pencerede açmak isterlerse tarayıcılarının “yeni pencerede aç” komutunu kullanabilirler.
user

#7: Kullanıcıları Neler Olduğundan Haberdar Etmemek
Ne zaman bir işlem devam ediyorsa (bir formun yollanması, filtrenin üzerine tıklanması, sonuçların aranması gibi) sayfanın ne işlem yaptığını kullanıcıya bildirmek iyi bir uygulamadır. Bir işlem yapılırken yükleme animasyonları ya da işlem durum barlarının kullanılması buna bir örnektir.

 

#8: Responsive Tasarımın Olmaması
Sitenizin desktop versiyonu PC üzerinde iyi gözükebilir ama eğer sitenizin bir mobil versiyonu yoksa, sitenize akıllı telefon üzerinden erişildiği zaman kullanıcı deneyiminin ne kadar kötü olacağını bir düşünün. Ekranın her tarafında dikey ve yatay scroll barlar olması, içeriği görüntülemek için zorla parmakla ekranı sağa kaydırmak, okunamayacak derecede ufak olan yazılar, üzerine tıklanılamayacak kadar ufak olan bağlantılar ile bu liste uzayıp gider. Özetlemek gerekirse desktop için yapılan tasarımlar mobil cihaz ile görüntülemek için uygun değildir.

 

#9: Tasarım İlkelerini Göz Ardı Etmek
İlk izlenimler, kullanıcıların bir websitesi ya da uygulamayı kullanıp kullanmayacağına üzerinde çok büyük bir rol oynar. İçeriğin orantısız bir şekilde olması, satırların çok uzun olması, butonların garip yerlere yerleştirilmiş olması ve beyaz alanın kötü bir şekilde yönetilmesi gibi genel tasarım kurallarını göz ardı eden unsurlar kullanılabilirliğe çok olumsuz yönde etkiler ve kullanıcı deneyiminin kalitesini düşürür.

Her ne kadar şeytan ayrıntılarda gizli olsa da, basit ilkelere uymak websitenizde ya da uygulamanızda uyumlu ve mantıklı bir düzen sağlayamanıza yardımcı olacaktır.

Şunu da belirtmek gerekir ki, iyi bir tasarım kendi kendine yeterli değildir ve estetik üzerinde gereğinden fazla durmak estetiği tamamen göz ardı etmek kadar zararlı olabilir. Bir uygulamanın güzel gözükmesinin temel amacı kullanıcıyı cezbedip uygulamayla etkileşime geçmesini sağlamaktır. Sıradan bir tasarıma yönelen ve tasarıma kişisel bir dokunuş katmayan tasarımcılar ve geliştiriciler kullanıcıyı kaybetme riski oluştururlar.

 

#10: Kullanıcıyı En Önemli Geribildirim Kaynağı Olarak Görmemek
Diğer bir önemli kullanılabilirlik hatası da kullanıcıyı tamamen devredışı bırakıp göz ardı etmektir. Kullanıcının görüşünü almak, kullanılabilirliği geliştirmek için gereklidir. Çok yaygın bir hata bir yazılımın ya da tasarımın nasıl olacağına kendi kişisel görüşünüzden yola çıkarak karar vermektir. Kullanıcılarla iletişim kanallarını açmak ve yarattığınız arayüzün kolay kullanılabilir ve anlaşılabilir olduğunu test etmek size ürünlerinizi geliştirebilmeniz için kritik bilgiler sunacaktır.