Kullanıcı Arayüz Tasarımının (UI) Kuralları

Web sitesi mi yapıyorsunuz? Eğer cevap olumluysa, aynı zamanda kullanıcı arayüz tasarımı da yapıyorsunuz demektir. Gelecekte bu rol sizin için çok daha önemli hale gelebilir.

Bugünkü web siteleri; navigasyon ve iletişim formlarından öteye geçmeyen, basit kullanıcı arayüzlerine sahip. Gelişen teknoloji ve standartlar, daha dinamik ve kişiselleştirilmiş deneyimler için talep yaratacak ve bu çaresiz, daha çok kullanıcı arayüzü işi demek. UI tasarımı kuralları nelerdir?

Netlik Kuralı

Kullanıcı, açık anlam ifade etmeyen arayüz elemanlarını reddedecektir. Bu yüzden netlik, ui tasarımının birinci kuralıdır.

Google “basitleştirme” kararı aldı ve navigasyon barında bulunan her şeyi bir simgede topladı. Sonuç? Çoğu insan bu simgeyi fark etmedi bile ve Gmail onlarca destek talebi almaya başladı.

Doğası gereği insanlar, anlamadıkları şeylerden kaçınırlar, hatta genellikle yok sayarlar. Arayüz elemanlarını insanların merak edeceği şekilde tasarlamayın. Çünkü kimse anlamak için uğraşmayacaktır.

Öncelikli Eylem Kuralı

Kullanıcılar sırada ne olduğunu merak etmemeliler. Öncelikli eylemler belirgin olmalı. İnsanlar ne yapacaklarını bilirlerse kendilerini çok daha rahat hissedeceklerdir.

Çevre Kuralı

Web sitesi tasarımında kullanıcılar arayüz kontrollerini, kontrol etmek istedikleri elemanın yanında görmek isterler.

Facebook'da adınızı nasıl değiştiriyorsunuz? Üst sağ köşedeki ayarlar seçeneğine geliyorsunuz, Hesap Ayarları'nı seçiyorsunuz ve isminizi bulup, değiştir butonuna tıklıyorsunuz. Linkedln'de bu işlem nasıl peki? Adınızın yanındaki kalem simgesine tıklıyorsunuz.

Kullanıcılar her zaman arayüz elemanlarını, kontrol etmek istedikleri nesnelerin çevresinde görmeyi beklerler. Gerçek yaşam için bunun örneği; mısır patlatmak istediğinizde mikrodalgaya gidip programı başlatmak. Eğer mikrodalga sizden, bodruma inip, kontrol merkezini bulmanızı ve orada gerekli düğmelere basmanızı isteseydi, emin olun ki bu çok pratik olmazdı – ki bu Facebook örneğiyle aynı.

Eğer bir eleman düzenlenebiliyorsa, lütfen kontrolleri, değişecek elemanın çevresine yerleştirin.

Default Kuralı

Kullanıcılar nadiren default ayarları değiştirirler.

Nokia'nın zil sesini çok net hatırlıyorsunzdur. Bunun sebebi, o zil sesinin default olması ve insanların çoğunun bunu değiştirmemiş olmasıdır.

Default ayarlar güçlüdür:

• Çoğu insan telefonunda default zil sesi ve arkaplan kullanır.
• Çoğu insan (belki siz bile) televizyonlarındaki fabrika ayarlarını değiştirmez.
• Çoğu insan buzdolaplarında default ısıyı değiştirmez.

Defaul ayarları fark etmiyoruz ama dünyamızı yönetiyorlar. Yani default değerlerinizin, kullanışlı ve olabildiğince pratik olmasına dikkat edin. Çoğu insanın onları değiştirmeyeceğini varsaymak daha güvenli.

Yönlendirme Kuralı

Web sitenizin tasarımında kullanıcılar muhtemelen, onlardan yapmalarını istediğiniz şeyleri yapacaktır.

Eğer kullanıcılarınıza bir şey yaptımak istiyorsanız, tereddüt etmeden bunu onlardan isteyin.

Geribildirim Kuralı

Eğer temiz ve devamlı geribildirimler verirseniz kullanıcılarınız kendilerini daha kontrol altında ve rahat hissedeceklerdir.

Kullanıcı Arayüzünde Görsel Hiyerarşi Nedir?

Daha iyi görsel hiyerarşi oluşturulmuş web siteleri genellikle çok daha iyi bir kullanıcı deneyimine sahip olur ve çok daha fazla ürün satışı gerçekleştirir.

Hepimizin bildiği gibi iyi şekilde ayarlanmış bir görsel hiyerarşi kullanıcı arayüzü içeriklerini çok daha etkili biçimde organize eder ve web sitesinin kullanıcılar için çok daha ilgi çekici olmasını sağlar. Bu yüzden kullanıcı deneyimi (UX) ve kullanıcı arayüzü (UI) tasarımcıları görsel elemanların tasarımda öne çıkması için daha fazla uğraşırlar.

Peki bir web sitesinde güçlü bir görsel hiyerarşi oluşturmak için ne yapmak gerekiyor? Web sitenizin kullanıcı arayüzü içeriklerini -daha iyi bir görsel hiyerarşi için- nasıl organize edebilirsiniz?

Web sitesinde görsel hiyerarşi; web sitesinin kullanıcı arayüzü elemanlarının, kullanıcıların web sayfalarında gezinmelerini kolaylaştırmak için, önem düzeylerine göre sıralanması ve sunulmasıdır. Daha iyi görsel hiyerarşi oluşturulmuş web siteleri genellikle çok daha iyi bir kullanıcı deneyimine sahip olur ve çok daha fazla ürün satışı gerçekleştirir.

Kullanıcı deneyimi bir yana, görsel hiyerarşi elemanlarını web sitenizi daha çekici ve daha güzel yapmak için de kullanabilirsiniz.

Web sitesinde görsel hiyerarşinin tanımını öğrendikten sonra daha iyi görsel hiyerarşi ve kullanıcı deneyimi için neler yapabilirsiniz sorusunun cevabını öğrenmelisiniz.

Boyut

Boyut, daha iyi bir görsel hiyerarşi için kullanılabilecek en güçlü araçlardan biridir ve tasarımcıların web sayfası elemanlarını düzenleme işinde oldukça büyük bir yeri vardır.

Bir kullanıcı arayüzü elemanı ne kadar büyükse, o kadar dikkat çeker. Web sitesi elemanlarınızın boyutlarıyla oynayarak onların önemini gösterebilirsiniz. Tabii web elemanlarının boyunu kabul edilebilir aralıklarda tutmakta fayda var.

Örnek olarak web sitesi metinlerini ele alalım. Çok büyük kelimeler kesinlikle sayfa içeriklerini azaltacaktır. Ayrıca çok küçük kelimeler de kullanıcılarının içerikleri okumasını ve ihtiyaç duyulan bilgileri bulmalarını güçleştirecektir.

Gölge ve Saydamlık

Beyaz arka plandaki siyak sözcükler gibi, zıt gölgeli ve farklı saydamlık özellikleri ile benzer elemanlar arasındaki hiyerarşik ilişkiyi gösterebilirsiniz. Bazı durumlarda daha iyi bir kullanıcı deneyimi için; fazla renk içermeyen, zıt gölgeli elemanlar ile görsel hiyerarşi oluşturabilirsiniz.

Ayrıca gölge ve saydamlık kullanarak oluşturduğunuz görsel hiyerarşi ile web sitenizi basitleştirip inanılmaz bir minimalist tasarım da elde edebilirsiniz.

Renkler

Tasarımcıların güçlü bir hiyerarşi oluşturmak için sıklıkla kullandığı diğer bir görsel araç da renktir. Tasarımınızda çok daha iyi bir görsel hiyerarşi oluşturmak için renkleri etkili biçimde kullanmayı bilmelisiniz:

1. Parlak renkler

Parlak renkler, boğuk renklere kıyasla kullanıcıların dikkatini daha çok çeker. Vurgulamak istediğiniz web içerikleri için parlak renkleri tercih edin. Ayrıca özel mesajlar içeren bazı renkler web sitenizin baskın rengini tercih etmenize yardımcı olabilir ve kullanıcıların dikkatini çekmenizi sağlayabilir.

Örneğin mavi rengi genellikle güven, huzur ve barış gibi duygular uyandırır. Yani bu rengi güvenlikle ilgili web sitelerinde kullanmak daha mantıklı olacaktır. Kırmızı rendi de genellikle özgüven, gençlik ve mutluluk gibi terimleri çağrıştırır. Promosyon reklamları için kırmızı rengi doğru bir seçim olacaktır.

2. Renk eğimleri

Renk eğimleri net bir görsel hiyerarşi oluşturmak için tasarımınıza yardımcı olabilir.

3. Renk blokları

Birbirine yakın ve aynı renk bloklarında konumlandırılmış, mantıksal olarak uyumlu elemanlar kullanıcıların bu blokları kullanmasını ve sayfaya göz gezdirmesini kolaylaştırır. Ayrıca renk blokları görsel hiyerarşi oluşturmak için de kullanılabilir.

Sayfa Planı da Bir Görsel Elemandır

Bir web sitesi, web veya ürün özelliklerine göre sayfanın daha okunaklı olması veya içeriklerin zenginleştirilmesi için farklı sayfa yapılarında tasarlanabilir.

Yine bir web sitesi tekrarlı sayfa yapıları kullanabilir. Bu şekilde kullanıcılar bu web sitesini tanıdık görmeye başlar ve aradığı bilgileri hızlı bir şekilde bulabilir.

Kısaca; sayfa yapıları çekici web siteleri yapmanın etkili görsel bir yoludur.

1. Grid

Grid, sayfa fonksiyonlarını birbirinden ayırmak için kullanılan, tasarımcıların web sitelerinde görsel içerikleri organize etmelerine yardımcı olan önemli bir araçtır. Sayfadaki grid yapıları renk değişimleri ile birlikte web tasarımını oldukça çekici yapmanıza yardımcı olabilir.

2. Nokta ve Çizgiler

Sayfa bloklarını birbirinden ayırmak için grid yapılarını tercih etmiyorsanız, bunun yerine noktalar ve çizgiler kullanarak düzenli bir sayfa yapısı oluşturabilirsiniz.

3. Hizalama

Web sayfası görsellerini, metinlerini ve diğer elemanların hizalanması, web sitenizin hiyerarşisini mükemmel gösterebilir.

Boşluklar

Web sitesinin kullanıcı arayüzü elemanları arasındaki boşluk (özellikle de negatif boşluk); kullanıcı arayüzü içeriklerinin dikkat çekmesini sağlar ve sezgisel bir görsel hiyerarşi oluşturmanıza yardımcı olur.

Kontrast

Renkler, gölgeler, boyutlar ve boşluk gibi bahsi geçen bütün görsel elemanlar, aralarında kontrast farkı oluşturularak, tasarımcıların görsel hiyerarşiyi öne çıkarmalarını sağlayabilir.

Bir seçenek olarak; bir ya da daha fazla kullanıcı arayüzü elemanını üst üste bindirecekseniz, üst katmandaki elemanların öne çıkması için kontrast kullanabilirsiniz. Tasarımda bir kaos yaratmak istemiyorsanız, kontrastları dengede tutmakta fayda var.

Daha spesifik olmak gerekirse; üst katmanın, en önemli ve en net elemanla ve en zengin detaylarla konumlanması gerekiyor. Aynı şekilde alt katmanların veya arka planın da gösterişsiz elemanlar ve az detay içermesi gerekir. Aksi halde kullanıcıların kafaları karışabilir ve önemli verileri anlamayabilirler.

Tasarım Stili de Görsel Hiyerarşiyi Etkileyebilir

Sıra dışı bir tasarım yalnızca web sitenizi ilginç yapmakla kalmaz, aynı zamanda görsel hiyerarşiyi de etkileyebilir. Tasarımınızda farklı yazı tipleri, grafikler, görseller ve diğer görsel elemanlar kullanmak her zaman daha iyi bir görsel hiyerarşi için iyi bir yaklaşımdır.

Ayrıca sıra dışı tasarım fikirleri web sitenizi farklı ve çekici hale getirebilir.