Muhteşem Bir Kullanıcı Arayüzü Tasarlamanın 7 Kuralı (Bölüm 1)

Dijital estetik üzerine gösterişsiz bir el kitabı

Giriş

Tamam, sırayla gidelim. Bu rehber herkes için değil. Peki, kimin için bu rehber?

  • Gerektiğinde iyi görünen bir UI (User Interface — Kullanıcı Arayüzü) tasarlayabilmek isteyen geliştiriciler.
  • Portfolyolarının Pentagon’da sunulmak üzere hazırlanmış bir PowerPoint sunumundan daha iyi görünmesini isteyen UX (User Experience — Kullanıcı Deneyimi) tasarımcıları. Ya da harika bir kullanıcı deneyimini güzel bir kullanıcı arayüzü paketi içerisinde daha iyi satabileceklerini bilen UX tasarımcıları.

Güzel sanatlar okuluna gittiyseniz veya zaten bir kullanıcı arayüzü tasarımcısı olduğunuzu düşünüyorsanız, bu rehberi a.) sıkıcı, b.) yanlış ve c.) rahatsız edici seçeneklerinin bir bileşimi olduğunu düşünmeniz olası. Bu sorun değil. Bütün eleştirileriniz doğru. Bu sekmeyi kapatın ve işinize bakın.

Bu rehberde ne bulacağınızı söyleyeyim.

Başta hiçbir kullanıcı arayüzü becerisi olmayan bir kullanıcı deneyimi tasarımcısıydım. Kullanıcı deneyimi tasarlamayı seviyordum. Ama çok geçmeden, bir arayüzün iyi görünmesini nasıl sağlayacağımı öğrenmek için birçok sebep olduğunu fark ettim:

  • Portfolyom berbat görünüyordu, çalışmamı ve iş sürecimi iyi yansıtmıyordu
  • Kullanıcı deneyimi danışmanlığı yaptığım müşteriler, uzmanlık alanı sadece kutucuk ve ok çizmekten öteye giden birinin becerilerine ödeme yapmak istiyorlardı
  • Bir noktada ilk aşamalarındaki bir girişimde çalışmak istiyor muydum? Sokak süpürücüsü olmak en iyisi.

Bahanelerim vardı. Estetik hakkında hiçbir halt bilmiyorum. Mühendislik eğitimi aldım — korkunç görünen bir şey inşa etmek bir onur madalyası sayılır.

“Mühendislik eğitimi aldım — korkunç görünen bir şey inşa etmek bir onur madalyası sayılır.”

Sonunda, uygulama estetiğini; diğer yaratıcı uğraşları nasıl öğrendiysem öyle öğrendim; adam akıllı, sıkı analiz ile. Ve hiç utanmadan başkalarından kopya çekerek. Bir arayüz projesi üzerinde 10 saat çalıştım ama sadece 1 saatlik ücret talep ettim. Geriye kalan 9 saat öğrenmek için atılan çılgınca çırpınışlardı. Google, Pinterest ve Dribbble’da çaresizce kopyalayacak bir şeyler aramaktı.

Buradaki “kurallar” harcadığım o saatlerde öğrendiğim dersler.

Meraklılarına birkaç söz: Kullanıcı arayüzü tasarlamakta biraz iyiysem bu bir şeyleri analiz ettiğim için — doğuştan gelen önsezgisel bir güzellik ve denge anlayışından değil.

Bu makale teori ile ilgili değil. Saf uygulama ile ilgili. Burada, altın oranla ilgili hiçbir şey görmeyeceksiniz. Renk teorisinden bahsetmiyorum bile. Sadece bu işte kötü olmaktan öğrendiklerimden ve sonra da kasıtlı olarak pratik yapmaktan bahsediyorum.

Şu şekilde düşünün: Judo, asırlardır süre gelen Japon dövüş sanatı ve felsefi gelenekleri üzerine kurulmuştur. Judo dersi alırsanız dövüşmenin yanında enerji, akış ve uyumla da ilgili birçok şey duyacaksınız. Böyle bir şey.

Krav Maga ise, 1930’ların Çekoslovakya’sında Nazi’lerle savaşan birkaç sert Yahudi tarafından icat edilmiştir. Sanatsal bir tarafı yok. Krav Maga derslerinde, kalemle bir insanın gözünü çıkarmayı öğrenirsiniz.

Bu, ekranların Krav Maga’sı.

Kurallar

İşte:

  1. Işık gökyüzünden gelir
  2. Önce siyah — beyaz
  3. Beyaz alanınızı iki katına çıkarın
  4. Görsel üzerine metin yerleştirme yöntemlerini öğrenin (bkz: Bölüm 2)
  5. Metni öne çıkarın — ve arka plana itin (bkz: Bölüm 2)
  6. Sadece iyi fontları kullanın (bkz: Bölüm 2)
  7. Bir Sanatçı Gibi Araklayın (bkz: Bölüm 2)

Başlayalım.

Kural 1: Işık Gökyüzünden Gelir

Gölgeler, insan beynine hangi kullanıcı arayüzüne baktığımızı anlatan paha biçilemez ipuçlarıdır.

Bu belki de UI tasarımıyla ilgili öğrenilecek bariz olmayan en önemli şeydir: ışık gökyüzünden gelir. Işık, o kadar sık ve tutarlı olarak gökyüzünden gelir ki doğrusu aşağıdan gelmesi ürkütücü görünür.

VuuuUUUuuu

Işık gökyüzünden geldiğinde, nesnelerin üstünü aydınlatır ve altlarına gölge düşürür. Nesnelerin üst kısımları daha açık, alt ksımları daha koyudur.

İnsanların alt göz kapaklarının özellikle gölgeli olduğunu düşünmezsiniz ama üzerlerine biraz ışık tuttuğunuzda birden karşınızda şeytani bir kız bulursunuz.

Aynı şey kullanıcı arayüzü için de geçerlidir. Nasıl yüz hatlarımızın bütün alt kısımlarında az miktarda gölge varsa bulabileceğiniz bütün kullanıcı arayüzü ögelerinin alt kısımlarında gölgeler vardır. Ekranlarımız düz ama üzerlerinde gösterilen her şeyin üç boyutlu görünmesini sağlamak için büyük miktarda sanatsal emek harcadık.

Bu görselde en beğendiğim bölüm sağ alt köşedeki dürten imleç.

Butonları ele alalım. Nispeten düz sayılabilecek bu butonda bile ışıkla ilgili birkaç detay var.

  1. Tıklanmamış butonun (en üstteki) koyu renkli bir alt kenarı var. Güneş oralarda parlamıyor, evlat.
  2. Tıklanmamış butonun üstü, altından biraz daha açık. Bunun nedeni hafif kıvrımlı bir yüzeye benzemesi. Nasıl önünüzdeki aynayı güneşi görmek için biraz yana doğru eğmeniz gerekiyorsa, bir tarafa doğru eğimli yüzeylerde size biraaazcık daha fazla güneş ışığı yansıtır.
  3. Tıklanmamış butonun belli belirsiz gölgesi düşüyor — belki de büyütülmüş bölümde bunu görmek daha kolay.
  4. Tıklanmış butonun da alt kısmı koyu olsa da genel olarak daha koyu bir rengi var — bunun nedeni ise ekran düzleminde olması ve ışığın ona kolayca ulaşamaması. Birisi çıkıp, elimiz ışığı engellediği için gerçek hayatta gördüğümüz bütün butonların da renginin daha koyu olduğunu savunabilir.

Bu sadece bir butondu ancak burada ışığın bu dört efekti mevcut. Burdan çıkarılacak ders bu. Şimdi bunu her şeye uygulayacağız.

iOS 6 biraz eski, ışık davranışı için iyi bir vaka çalışması örneği.

Karşınızda iOS 6 ayarlarından iki tanesi — “Rahatsız Etme” ve “Bildirimler”. O kadar büyük bir olay yok, değil mi? Ama bir de üzerlerinde kaç tane ışık efekti olduğuna bakın.

  • Gömülü kontrol panelinin üst kenarının küçük bir gölgesi var
  • “Açık” kaydırma rayı de birazcık gömülmüş
  • “Açık” kaydırma rayı çukur ve dibi daha fazla ışık yansıtıyor
  • İkonlar biraz dışarıya doğru çıkmış. Üst kısımlarındaki parlak sınırları görüyor musunuz? Bu, ışık kaynağına göre dikey konumda olan bir yüzey olduğunu gösteriyor, bu yüzden çok fazla ışık alıyor ve bu yüzden gözünüze çok fazla ışık yansıtıyor.
  • Bölüm çizgisinin güneş almayan yeri gölgeli ve karşı tarafı daha aydınlık.
Bölüm çizgisine yakından bir bakış. Eski Hubster konseptlerimden birisinden.

Genellikle gömülü olan elementler:

  • Metin giriş alanları
  • Tıklanmış butonlar
  • Kaydırma rayları
  • Radyo butonu (seçilmemiş)
  • Onay kutucukları

Genellikle kabarık olan elementler:

  • Butonlar (tıklanmmamış)
  • Kaydırma butonları
  • Aşağı doğru açılır kontroller
  • Kartlar
  • Seçilmiş radyo butonunun buton kısmı
  • Açılır pencereler

Artık bunları bildiğine göre, her yerde dikkatini çekecek. Rica ederim, evlat.

Bir dakika, ya düz tasarım, Erik?

iOS7, teknoloji çevrelerinde “düz tasarımı” ile heyecan yaratmıştı. Bu gerçekten de “düz” olduğu anlamına geliyor. Taklit edilmiş girinti ve çıkıntılar yok — sadece renklerden oluşan çizgi ve şekiller.

Herkes gibi ben de temiz ve sade olanı severim ama bunun uzun sürecek bir trend olduğunu düşünmüyorum. Arayüzlerdeki belli belirsiz 3-D simülasyonları tamamen vazgeçemeyecek kadar çok doğal görünüyor.

Yakın gelecekte yarı-düz UI görmemiz daha olası (ve bu alanda tasarlmada yetkin hale gelmenizi öneririm). Buna “düze yakın tasarım” adını vereceğim. Halen temiz, halen sade ancak bazı gölgeler ve insanlara neye tıklayacaklarını/dokunacaklarını/neyi kaydıracaklarını gösteren ipuçları var.

OS X Yosemite— düze yakın, düz değil.

Ben bunları yazarken, Google bütün ürünlerini “Matertal Tasarım” diline geçiriyor. Özünde fiziksel dünyayı taklit etmeye çalışan ortak bir görsel dil.

Materyal Tasarım rehberinden bir görsel, farklı gölgeler kullanarak farklı derinlik seviyelerinin nasıl anlatılabileceğini gösteriyor.

Kalıcı olacağını düşündüğüm şey bu tür şeyler.

Bilgiyi karşıya taşımak için fazla belli belirsiz gerçek dünyadakine benzer ipuçları kullanıyor. Anahtar kelime, belli belirsiz.

Gerçek dünyayı taklit etmediğini söyleyemezsiniz ancak 2006'ın web’i de değil. Desen, gradiyent, parıltı yok.

Düze yakın geleceğin yöntemi, bence. Düz? Pff, geçmişten bir şey.

Şu düz tasarım şimdi çok popüler görünüyor!

Kural 2: Önce Siyah — Beyaz

Renkleri eklemeden önce gri tonlama ile tasarım yapmak, görsel tasarımın en karmaşık ögesini basitleştirir — ve sizi nesneler arasındaki boşluğu ve nesnelerin sayfa üzerindeki dağılımı üzerinde odaklanmaya zorlar.

UX tasarımcıları bugünlerde gerçekten “önce-mobil” için tasarlamakla ilgileniyorlar. Bu, sayfaların ve etkileşimlerin zilyon piksellik Retina ekranınızda hayal etmeden önce bir telefonda nasıl göründüğü hakkında düşünmeniz anlamına geliyor.

Bu tür bir kısıtlama harika. Düşüncelerinizi netleştirir. Daha zor problem (minicik bir ekranda kullanılabilir uygulama) ile başlıyorsunuz sonra da çözümü daha kolay bir probleme (büyük bir ekranda kullanılabilir uygulama) uyguluyorsunuz.

İşte size benzer başka bir kısıtlama: önce siyah-beyaz tasarlayın. Daha zor olan, uygulamayı güzel ve mümkün olan her açıdan kullanılabilir yapma problemi ile başlayın ama renklerden yararlanmadan. En son rengi ekleyin, o zaman geldiğinde bile gerçekten belirli bir amaç uğruna ekleyin.

Haraldur Thorleifsson’ın gri tonlamalı tel kafesleri ikinci derece bir tasarımcının tamamlanmış siteleri kadar iyi görünüyor.

Bu, uygulamaları “temiz” ve “sade” tutmanın güvenilir ve kolay bir yolu. Çok farklı yerlerde çok fazla renk bulundurmak gerçekten temiz/sade bir tasarımı mahvetmenin kolay bir yoludur. ÖSB (Önce Siyah-Beyaz) tasarlamak sizi öncelikli olarak aralıklar, ölçüler ve sayfa düzeni gibi şeyler üzerinde odaklanmaya zorlar. Bunlar da temiz ve sade bir tasarımının ana meseleleridir.

Klas gri tonlama.

ÖSB’nin kullanışlı olmadığı bazı durumlar da var. Belirli, güçlü bir duruşu olan tasarımlar — “canlı”, “cafcaflı”, “çizgi film türü” vb. — renkleri son derece iyi kullanabilen bir tasarımcıya ihtiyaç duyar. Ama, çoğu uygulamanın temiz ve sade dışında belirli bir duruşu yoktur. Olanları ise, kabul edelim ki, tasarlamak çok daha zordur.

Julien Renvoye’dan (solda) ve Cosmin Capitanu’dan (sağda) cafcaflı ve renkli tasarımlar. Göründüğünden daha zor.

Geriye kalan her şey için, ÖSB.

Adım 2: Renk nasıl eklenir?

Eklmesi en kolay renk tek renktir.

Gri tonlamalı bir siteye tek renk eklemek, dikkatleri daha basit ve etkili bir şekilde çeker.

Bunu bir adım ileri de götürebilirsiniz. Gri tonlama + iki renk veya Gri tonlama + bir tonun farklı renkleri

Pratikte renk kodu — diğer bir deyişle: Bir dakika, ton nedir?
Web, genellikle renkten RGB hex kodları ile bahseder. Onları görmezden gelmek en iyisi. RGB tasarımları renklendirmek için iyi bir yapı değil. (HSV veya HSL ile “temelde aynı anlama gelen”) HSB çok daha kullanışlı.
HSB, RGB’den daha iyi çünkü renkle ilgili doğal düşünme biçimimize uyuyor ve HSB değerlerine yapılan değişikliklerin baktığınız rengi nasıl etkileyebileceğini tahmin edebiliyorsunuz.
Bu sizin için yeni bir haberse işte HSB renkleriyle ilgili iyi bir el kitabı.
Tek ton altın teması, Smashing Magazine’den.
Tek ton mavi tema, Smashing Magazine’den.

Bir tonun doygunluğunu ve parlaklığını değiştirerek çok sayıda renk üretebilirsiniz — koyular, açıklar, arka planlar, vurgular, göz yakalayanlar — üstelik gözü yormazlar.

Bir ya da iki temel tona dayanan farklı renkler kullanmak, tasarımı dağınık göstermeden elementleri vurgulamak veya etkisizleştirmek için kullanılabilecek en güvenilir yöntemdir.

Geri sayım zamanlayıcısı Kerem Suer’den

Renkle ilgili diğer birkaç not

Renk görsel tasarımın en karmaşık alanıdır. Renk üzerine yazılan çoğu şey aptalca olsa da, önünüzdeki tasarımı bitirmeniz için bir şeye yaramasa da, karşıma çok iyi şeyler çıktı.

Küçük bir alet çantası:

  • Asla Siyah Kullanma (Ian Storm Taylor). Tamamen düz grilerin gerçek hayatta olmaması, gri tonlarının — özellikle koyu tonlarınızın — doygunluğunu arttırmanın tasarımınıza nasıl bir görsel zenginlik kattığı konusunda konuşuyor. Üstelik, doygunluğu arttırılmış griler gerçek dünyayı daha iyi taklit eder ki bu başlı başına bir avantaj.
  • Adobe Color CC. Renk planları bulmak, değiştirmek, oluşturmak için harika bir araç.
  • Renge Göre Dribbble’da Arama Yapmak. Belirli bir renkle hangi renklerin iyi gittiğini bulmanın diğer bir yolu. Eğer zaten bir renk üzerinde karar kıldıysanız, gelin ve dünyanın en iyi tasarımcılarının o renkle/uyumlu diğer renklerle neler yaptığına bir göz atın.

Kural 3: Beyaz alanınızı iki katına çıkarın

Tasarlanmış gibi görünen bir kullanıcı arayüzü yapmak için, olabildiğince nefes alacak alan bırakın.

İkinci kuralda ÖSB’nin (Önce Siyah-Beyaz), tasarımcıları renkten önce aralıkları ve sayfa düzeni hakkında düşünmeye zorladığını ve bunun neden iyi bir şey olduğunu anlatmıştım. Şimdi ise aralık ve sayfa düzeni hakkında konuşmamızın zamanı geldi.

Daha önce sıfırdan başlayarak HTML’de kodlama yaptıysanız muhtemelen HTML’in var sayılan olarak sayfada nasıl göründüğüne aşinasınızdır.

Aslında her şey ekranın üst kısmına doğru sıkıştırılmıştır. Fontlar küçük; satır arlarında kesinlikle hiç boşluk yoktur. Paragraflar arasında biraaazcık boşluk bulunur ama fazla değil. Paragraflar, ister 100 piksel ister 10000 piksel olsun, sayfanın sonuna doğru uzanır gider.

Estetik açıdan bu korkunç. Tasarlanmış gibi görünen bir kullanıcı arayüzü yapmak için, olabildiğince nefes alacak alan bırakın.

Bazen gülünç miktarda.

Beyaz alan, HTML ve CSS
Siz de benim gibi varsayılan olarak beyaz alanın bulunmadığı CSS ile biçimlendirmeye alışkınsanız bu kötü alışkanlıklardan kurtulmananın zamanı geldi. Varsayılanın beyaz alan olduğunu düşünmeye başlayın — her şey beyaz alan olarak başlar, ta ki siz bir sayfa ögesi ekleyerek onu yok etmeye başlayıncaya kadar.
Zen işi gibi mi geliyor? Bence insanların hâlâ taslak yapmasının nedeni bu?
Boş bir sayfayla başlamak, sadece beyaz alanla işe koyulmak anlamına geliyor. Aralıklar ve sayfa kenarları hakkında en başlardan düşünmeye başlıyorsunuz. Çizdiğiniz her şey, bilinçli olarak beyaz alanı ortadan kaldıran bir karar.
Bir takım biçimlendirilmemiş HTML ile işe başlamak, içerikle başlamak anlamına geliyor. Aralıklar sonradan akla gelen bir şey. Açık bir şekilde belirtilmesi gerekiyor.

İşte Piotr Kwiatkowski’den açıklayıcı bir müzik çalar konsepti.

Özellikle soldaki menüye dikkat edin.

Sol menü

Menü parçaları arasındaki dikey boşluk metnin yüksekliğinin tam iki katı. 12px bir fonta ve bir o kadar da aşağıda ve yukarıda bırakılan boşluğa bakıyorsunuz.

Ya da liste başlıklarına bir bakın. “PLAYLISTS” kelimesi ve kendi alt çizgisi arasında 15 piksellik bir boşluk var. Bu fontun şapka yükekliğinden fazla! Listeler arasındaki 25 pikselden bahsetmeyelim bile.


Yukardaki gezinme çubuğunda daha fazla boşluk var. “Search all music” metni çubuk yüksekliğinin %20'si kadar. Simgeler de benzer şekilde orantılanmış.

Sol kenar çubuğu metin satırları ve diğer şeyler arasında cömertce bırakılmış boşlıkları gösteriyor.

Piotr burada fazladan boşluk bırakma konusunda itinalı davranmış ve karşılığını almış. Sırf eğlencesine oluşturduğu bir konsept olsa da (bildiğim kadarıyla), estetik açıdan, piyasadaki en iyi müzik kullanıcı arayüzleriyle yarışabilecek kadar güzel.


İyi bir şekilde, cömertçe bırakılmış beyaz alan — forumlar gibi — en dağınık arayüzlerden bazılarını bile davetkar ve sade gösterebilir.

Matt Sisto’nun konsept forum tasarımı

Veya Wikipedia.

Konsept Wikipedia tasarımı, Aurélien Salomon’dan

Wikipedia konseptlerinin siteyi kullanmak için gerekli olan ana işlevleri dışarıda bıraktığını savunan bol miktarda argüman bulabilirsiniz. Ancak, öğrenmek için iyi bir yol olmadığını söyleyemezsiniz!

Satır aralarında boşluk bırakın.

Ögeler arasında boşluk bırakın.

Öge grupları arasında boşluk bırakın.

Neyin işe yaradığını analiz edin.


Tamam, bu Bölüm 1'i sonlandırıyor. Buralarda kaldığınız için teşekkürler.

Bölüm 2'de şu dört kural hakkında konuşuyor olacağım.

  • Görsel üzerine metin yerleştirme yöntemlerini öğrenin
  • Metni öne çıkarın — ve arka plana itin
  • Sadece iyi fontları kullanın
  • Sanatçı gibi çalın

Faydalı bir şeyler öğrendiyseniz, Bölüm 2'yi okuyun.

Buna benzer daha fazla öğretici yazı görmek istiyorsanız, Tasarım Bülteni’me abone olmalısınız.

Geri bildiriminiz olursa, bana tweet atın veya birkaç satır yazın.

Serbest UX/UI tasarımcısı mı lazım? Beni işe alın.