UI tasarımının gücü öyledir ki, çok başarılı bir uygulama ile bir etki yaratmayan veya daha da kötüsü, kullanıcı üzerinde unutulmaz derecede kötü bir izlenim bırakan bir uygulama arasındaki fark anlamına gelebilir! Yüksek kaliteli uygulamalar oluşturmaya gelince, tüm küçük ayrıntılar çok önemlidir. Bu nedenle, en yaygın UI tasarım hatalarından bazılarını ve bunları nasıl düzeltebileceğinizi veya tamamen önleyebileceğinizi paylaşmak istiyoruz. Tasarım kariyerinize yeni başlıyorsanız, bu hataların farkında olmak paha biçilmez olacaktır.

Her uygulama farklıdır ve mükemmel arayüzü oluşturmak için evrensel bir formül yoktur ancak aşağıdaki liste kesinlikle daha iyi tasarımlar sunmanıza yardımcı olacaktır. Ayrıca bu liste, bir arayüz tasarlarken kaçınmak istediğiniz şeylerin bir “kontrol listesi” olarak da hizmet edecektir.

1. UI öğelerinizde tutarsızlık

Sorunsuz bir uygulama oluşturmak için çok fazla farklı stil kullanmaktan kaçının. Bu, kullanıcılarınıza karışık sinyaller gönderir! Anahtar, istediğiniz zaman kalıpları ve öğeleri tekrar etmektir. Tutarlı görünen bir tasarım, ziyaretçileriniz arasında güven oluşturmada ve keyifli bir deneyim yaratmada uzun bir yol kat eder. Ayrıca, kullanıcılarınızın uygulamanızda yollarını çok daha hızlı öğrenmelerine yardımcı olur.

Tutarsızlığı önlemek için aşağıdaki unsurlara dikkat edin:

Butonlar, metin, bağlantılar, üstbilgi, altbilgi, vurgulu durumları vb. öğeler için renk paletinin tutarlı kullanımı.

Başlıklar, paragraflar, bağlantılar vb. için tutarlı yazı tipi stilleri.

Uygulamanızdaki şekiller için yuvarlak veya kare köşeler kullanın: İkonlar, kartlar, butonlar vb.

Tutarlı çizgi kalınlığı: İkonlar, bölücüler ve kullandığınız diğer çizgiler için.

2. Varsayılan alt gölgeyi kullanma

Alt gölgeler söz konusu olduğunda daha az şey daha iyi demektir. Bunları her zaman aşırı kullanmamanızı tavsiye ederiz, yoksa çok yoğun, gürültülü bir tasarım ortaya çıkmış olur. Ancak bunları kullanmanız gerekiyorsa, şu ipuçlarını izleyin:

Çok sert bir renk olduğu için alt gölgeler için siyah kullanmayın, bunun yerine arka plan renginizin daha koyu bir sürümünü kullanın; bu daha doğal görünecektir.

3. Birincil ve ikincil butonlar arasındaki küçük ayrım

Uygulamalarla çalışırken, kullanıcının tamamlayabileceği birçok işleminiz olacaktır. Birincil eylemlere görsel önem vermek önemlidir. Tüm gezinme, butonlar aracılığıyla gerçekleşir, bu nedenle, kalın ve belirgin hale getirerek kullanıcının birincil butonları tanımlamasını kolaylaştırmanız gerekir. İkincil işlemler daha az belirgin olmalı, ancak kullanıcı bunları arıyorsa yine de görünür olmalıdır.

Birincil ve ikincil butonlar için farklı görsel ağırlık kullanın. En güçlü görsel ağırlığa sahip buton daha fazla dikkat çekecektir.

Bu nedenle, birincil butonlara görsel ağırlık vermek için güçlü renkler, kalın metin ve boyut kullanın. İkincil eylemler için tersini yapın.

4. Metin hiyerarşisi eksikliği

Metin, bilgi içeriğinin birincil birimidir ve bu nedenle her zaman okunaklı ve düzenli olması gerekir. Düzgün biçimlendirilmiş metin, kullanıcıların bilgi algısını kolaylaştırır.

Tasarımcılar olarak bizim işimiz, bunu en sindirilebilir ve kapsamlı şekilde organize etmektir. İşte akılda tutulması gereken bazı şeyler:

Her stil başlığı arasında bol miktarda kontrast oluşturun: Her stili ayırmak için boyut, ağırlık ve renk kullanın.

Bilgi hiyerarşisinin açıkça görülebilmesi için her zaman sayfanın en belirgin öğesi olması gereken büyük bir başlıkla başlayın. Alt başlıklar ve diğer metinler önemli ölçüde daha küçük olmalıdır.

Yeterli boşluk ve karakter aralığı kullanın.

Metin bloklarınızı net bir şekilde ayırın, ilgili bilgileri birbirine bağlamak için az miktarda alan kullanın ve farklı bilgi bloklarını görsel olarak ayırmak için çok fazla alan kullanın.

5. Kötü ikonografi

Bazen simgeler tasarımın “en kolay” kısmı gibi görünüyor. Hatta bazı tasarımcılar, aslında modern arayüzlerin temel bir parçası olmalarına rağmen, onları “ekstra” bir dekoratif unsur olarak görüyorlar. Özellikle simgelerin butonlara eşdeğer olduğu mobil cihazlarda çoğunlukla simgelerden oluşan bir arayüz bulacaksınız.

Bu nedenle, öğenin anlamını açık bir şekilde ileten doğru “sembol”ü seçmek ve uygulamanızdaki simgeler için tutarlı bir stil sağlamak çok önemlidir.

İkonografi söz konusu olduğunda, şu ipuçlarını izleyin:

Simgeleriniz için vektörler/SVG kullanın: Bu simgenizin herhangi bir cihazda veya çözünürlükte keskin görünmesini sağlamanın en kolay yoludur.

Tutarlı bir stil kullanın: Her şeyden önce, tüm simgelerinizin ana hatları çizilmeli veya doldurulmalıdır. Ayrıca, tutarlı bir çizgi kalınlığı ve köşe yarıçapı sağlayın.

Simgenizin mesajının net olduğundan emin olun.

6. Hizalanmamış elemanlar

Bir şeyleri hizalamanın gücünü keşfettiğinizde, herhangi bir düzenin güzel ve dengeli görünmesinin anahtarının bu olduğunu anlarsınız.

Arayüzünüzü düzenlemenize yardımcı olacak iki temel yol vardır: 12 sütunlu bir grid ve bir temel grid. Her ikisi de nihai tasarımda görünmez, ancak dengeli bir arayüze sahip olmak için kritik öneme sahiptir.

Birçok tasarımcı grid kullanmanın yaratıcılığı kısıtlayabileceğini düşünüyor ve bir bakıma doğru. Ancak, UI tasarımına yeni başlıyorsanız, kuralları çiğnemeden önce öğrenmeniz gerektiğine inanıyoruz.

İşte UI tasarımında hizalama için en iyi ipucu:

İlgili öğeleri farklı taraflara hizalamayın. Görsel olarak birbirine bağladığı için ilgili öğeleri her zaman aynı tarafa hizalamaya çalışın.

7. Düşük kontrast

Kontrast, görsel bir kompozisyondaki her şeydir. Arayüz öğeleriniz arasında düşük kontrast olduğunda, tüm öğeler bir araya gelir ve hepsi aynı göründüğü için donuk ve okunması zor bir arayüzle karşılaşırsınız. Düşük kontrast, düşük kullanılabilirliğe eşittir.

UI tasarımında kontrast söz konusu olduğunda şu ipuçlarını izleyin:

Kullanıcının dikkatini arayüzünüz aracılığıyla yönlendirmek için kontrastı kullanın. Örneğin: harekete geçirici mesajlar için yüksek kontrastlı renk kullanın.

Uygulamanızın farklı bölümlerini net bir şekilde ayırmak için kontrastı kullanın. Örneğin: Üst bilgi, içerik ve alt bilgi arasında net bir fark göstermek için farklı arka plan renkleri kullanın.

Öğeleri arka plandan ayırmak için kontrastı kullanın. Örnek: Üstte metin bulunan fotoğrafların okunması zor olabilir, bu nedenle fotoğrafınız ile metniniz arasında yüksek kontrast sağlayarak metninizin okunaklı olmasını sağlayın.

8. Kafa karıştırıcı formlar

Formlar, kullanıcı yolculuğunun çok önemli bir parçasıdır; giriş yapmak, kaydolmak, çıkış yapmak vb. için kullanılırlar. Bu nedenle, formu göndermeden önce ve sonra net rehberlik sağlamak önemlidir.

Form tasarımı için bazı işaretçiler:

• Hatayı belirtmek için yalnızca renk kullanmaktan kaçının. Doğru bir giriş ve süreci kolaylaştırmak için her zaman eyleme dönüştürülebilir geri bildirim verin.

• Form çok uzunsa, onu mantıksal bölümlere ayırmayı düşünün ve kullanıcının hangi adımda olduğunu belirtmek için bir ilerleme çubuğu gösterin.

9. Mobil ve tablette zayıf dokunma hedefi

Küçük dokunma hedefleri sinir bozucudur çünkü kullanıcının istediği eylemi tamamlamasını zorlaştırabilir. Akıllı telefonumuzdaki yanlış butona basmanın ve yanlış ekran yüklenirken beklemek zorunda kalmanın sıkıntısını hepimiz yaşamışızdır!

Bu nedenle, tıklanabilir öğeler tasarlarken, kullanıcıların farklı boyutlarda parmaklara sahip olduğunu unutmayın:

Yetişkin bir işaret parmağının ortalama genişliğinin 1,6 ila 2 cm olduğunu akılda tutarak parmak dostu hedefler oluşturun.

Dokunma hedefinizi en az 45-57 piksel genişliğinde yapın. Bu, kullanıcılara doğruluk konusunda endişelenmeden hedefi vurmak için yeterli alan sağlayacaktır.

10. Alakasız veya düşük kaliteli görseller kullanmak

Arayüzünüzdeki fotoğraflar bir hikaye anlatmaya yardımcı olacaktır, bu nedenle hikayeyi ve uygulamanızın görünümünü tamamlayacak güçlü bir resim seçin.

Görüntüleri seçerken şu ipuçlarını aklınızda bulundurun:

Alakasız fotoğraflardan kaçının. Hizmetiniz veya ürününüzle ilgili fotoğrafları gösterin.

Yalnızca yüksek kaliteli görüntüler kullanın.

Yaratıcı ve gerçekçi fotoğraflar seçin. Sahte veya sahnelenmiş stok fotoğraflardan kaçının.