Daha iyi bir arayüz tasarımı için 10 temel ipucu

İşlevselliğe ve düzene odaklanan arayüz tasarımı, büyük resme odaklanan kullanıcı deneyimi tasarımının alt kümesi olarak kabul edilir.

Dolayısıyla kullanıcı arayüzü tasarımı sadece ürününüzün nasıl göründüğünü değil, tüm deneyimini ilgilendiren bir prensiptir.

Zarif, kullanımı kolay ve kullanıcı merkezli arayüzler oluşturmak istiyorsanız bu 10 basit ipucuna göz atmanızda fayda var.

Her şeyden önce tasarımını oluşturacağınız ürün ya da hizmetin kullanıcı kitlesini tanımanız oldukça kilit bir önem taşıyor. Kullanıcı kitlesinin ihtiyaçları ve amaçlarını iyi bir şekilde öğrenmek oluşturacağınız arayüz tasarımının iskeletini belirleme konusunda size yardımcı olacaktır.

Kullanıcıyı tanıma ve ne istediklerini öğrenme konusunda asla çekingen davranmayın. Tasarımınızın her aşamasında ürün ya da hizmetinizin hitap edeceği kullanıcı kitlesinin ihtiyaçlarını derinlemesine öğrenmek ve onlarla empati kurmak çok daha başarılı arayüz tasarımları çıkarmanızı sağlayacaktır.

Arayüz tasarıma başlamadan önce insanların bu tasarımla nasıl etkileşime geçeceğini belirlemeniz yararınıza olacaktır. Özellikle dokunmatik cihazların hayatımıza bu denli girdiği günlerde bu konu çok daha önemli hale geliyor.

İnsanlar bir uygulama ya da web sitesiyle genellikle iki yolla etkileşim kuruyorlar:

Doğrudan: Ürünün bir bileşeni ile doğrudan etkileşime girmek

Dolaylı: Ürünle harici bir bileşenle etkileşime girmek

Örnek verecek olursak; Tinder uygulamasının arayüzü ve kullanıcı deneyimi tasarımı basit bir ‘kaydırma’ hareketi üzerine kurulu.

Doğrudan etkileşim örnekleri:

• Butona dokunma
• Kaydırma
• Parmak ucuyla sürükleyip bırakma

Dolaylı etkileşim örnekleri:

• Mouse ile işaretleme ve tıklama
• Anahtar komutları ve kısa yolları kullanma
• Form alanına yazı yazma
• Grafik tabletinde çizim yapma

Tasarımdan önce ürün ya da hizmetin hangi etkileşim tarzını kullanacağını belirlemek oluşturacağınız arayüz tasarımını büyük ölçüde etkileyecektir. Dolayısıyla en başından buna karar vermek ileride tatsız sonuçların ortaya çıkmasına engel olacaktır.

Uygulama da ya da web sitesindeki birçok etkileşimin bir sonucu vardır. Bu etkileşimler kullanıcıya para harcattırabilir, fotoğraf beğendirebilir ya da çıkış yapmanıza neden olabilir.

Kullanıcıların bu etkileşimlerin sonucunu önceden tahmin edebilmesi tasarımınızın benimsenmesi için olmazsa olmaz kriterlerinden biri olarak kabul edilebilir. Yani uzun lafın kısası; web siteniz ya da uygulamanızda yer alan bir etkileşimden kullanıcının ne beklemesi gerektirdiğini onlara önceden sezdirmeniz gerekiyor ki ürününüzü daha rahat bir şekilde kullanabilsinler.

Tasarımla beklentileri yönlendirme örnekleri:

• İstenilen eyleme karşılık gelen butonu farklı renkler ve tasarımla vurgulama
• Kabul görmüş semboller kullanmak (silme için çöp kutusu, eklemek için artı sembolü, arama için büyüteç sembolü vb.)
• İlgili bir anlamı olan renk seçmek (git butonu için yeşil, dur butonu için kırmızı vb.)

Yazı ile beklentileri yönlendirme örnekleri:

• Buton içine net ifadeler yazma
• Yönlendirici / teşvik edici metinler (kaçırmayın!, hemen yükle, abone ol vb.)
• Uyarı verme ve onay isteme

Her insan hata yapar, sizin kullanıcılarınız da dahil. Dolayısıyla tasarımınızı oluştururken kullanıcı kitlenizin kafasını karıştıracak hamlelerden kaçınmalı ya da ne olursa olsun hata yapacaklarını kabullenmeniz gerekiyor.

Arayüz tasarımında insan hatalarının etkisini azaltmaya yardımcı olan iki yol vardır:

1- Hataları oluşmadan önce engellemek

2- Hatalar yapıldıktan hemen sonra onların düzeltilmesini sağlamak

Özellikle e-ticaret sektöründe kullanıcı hatasını azaltmaya yönelik birçok tekniğin kullanıldığını görebilirsiniz. Siz alanları dolduruncaya kadar butonlar aktif olmaz, e-posta adresiniz bir hata varsa form bunu tespit eder ve uyarır ya da sepetinizi terk etmek istediğinizde karşınıza açılır pencereler gelir. Tüm bunlar kullanıcının hata yapabileceğini varsayıp alınmış önlemler.

Hataların olabileceğini önceden görmek onları sonradan düzeltmekten çok daha kolaydır. Dolayısıyla tasarımınızı oluştururken bunun iyi bir analizini yapmak sonrasında işlerinizi fazlasıyla kolaylaştıracaktır.

Kullanıcının tıklamasını arzu ettiğiniz bir butonu büyük yapmak ilk başta çok akıllıca bir fikirmiş gibi gelebilir. Bu etkili ancak her senaryoda kullanmanızın uygun olmadığı bir yöntem.

Tasarımınızda kullandığınız öğeler diğer etkileşim unsurlarınına da uygun olarak yerleştirilmeli. Estetiği bozmadan ancak kullanıcının dikkatini çekecek şekilde konumlandırılmış butonlar emin olun sayfanın neredeyse tamamını kapsayan açılır pencereler ya da butonlar çok daha etkili.

Web sayfaları genel olarak sistematik ızgaralar için ayarlanmış olsa da tasarımcılar yavaş yavaş doğal şekiller ve düz çizgilere yöneliyorlar. Organik şekiller doğal olarak kusurlu ve asimetrik olduğu için sayfa elemanlarını öne çıkaran bir web tasarımlarına derinlik sağlayabiliyorlar.

Aranızda elbet aşırı yaratıcı tasarımcılar vardır. Ancak yaratıcı olacağım diye geniş kitlelerce kabul görmüş tasarımı değiştirmek çoğu zaman sizi farklı kılmıyor, aksine o tasarımın çalışma mantığını bozduğunuz için kullanıcıları kaçırıyorsunuz.

Örnek verecek olursak; Microsoft Word programının üst tarafındaki barlar ve sekmeler bu tip üretim programları için bir standart haline geldi. Vista zamanından kalma Word programı ile 2015 yılında kullandığımız Google Docs menü barının benzer olması bunu kanıtlıyor.

Eğer insanlar tarafından genişçe kabul görmüş bir tasarım anlayışı varsa bunu tamamen değiştirmek çoğu zaman yararınıza olmayabilir. Dolayısıyla standartları görmezden gelmeyin.

Tasarımınızda kullanıcının öğrenmesi ya da hatırlaması gereken ne kadar az şey varsa o kadar iyi. Elbette sadelik adı altında kullanıcının uygulamanıza erişimini ve kullanımı kısıtlayın demiyoruz, ancak olabildiğince basit ve fonksiyonel tasarımlar kullanmak kullanıcılarınızı korkutup kaçırmayacak, uygulamanıza ısınmalarını sağlayacaktır.

Ne demiş Leonardo da Vinci: Sadelik sofistikeliğin doruğudur. (Bir tasarım blogunda bu cümleyi kullanmazsak olmazdı)

Oluşturduğunuz tasarımın karmaşık ve çirkin olmaması elbette kullanıcıların karar verme sürecini de etkileyecektir.

Yukarıda saydığımız tüm maddelerle bağlantılı olan bu karar verme sürecini tasarımla ne kadar basitleştirirseniz süreç o kadar hızlanır. Açılış sayfaları ve e-posta bültenlerinin de genellikle tek bir CTA butonu barındırması bu yüzden. Ne kadar basit, o kadar hızlı.

Standartları görmezden gelemeyeceğiniz gibi verileri de yok saymamalısınız.

Tasarımınızı oluştururken daha önce yapılmış kullanıcı araştırmaları ve testlerinden yararlanmanız ürününüze büyük bir katkı sağlarken ürününüz piyasaya sürüldükten sonra alacağınız geri bildirimler de yapacağınız tasarımlar için bir o kadar pozitif sonuçlar doğurabilir. Yaptığınız bir tasarım size çok güzel görünse bile daha önce yapılan araştırmalara göre bu tip tasarımların uygulamada çuvalladığını görebilirsiniz.

Dolayısıyla veri toplayın, bunları düzenli olarak analiz edin ve uygulayın. Bunun için proje tipinize göre Google Analytics ya da Mixpanel gibi araçlar kullanabilirsiniz, tamamen size kalmış.

Unutmayın: Veriler yalan söylemez.

Kaynak: https://webflow.com/blog/10-essential-ui-design-tips