Your address will show here +12 34 56 78
#ui, #ux

Bugün çok çok ince bir çizgide duran (ki bu çizginin de ince olması adına yaraşır bir davranıştır) bir kavramdan, minimalizmden ve minimal UI tasarımı konusundan bahsedeceğiz.

Minimalizm’i (haliyle) kısaca tanımlamak gerekir; sade ve basit. Minimalizm aslında her şeye uyarlanabilir bir anlayıştır. Edebiyatta, müzikte, sanatta, yaşam şeklide, giyimde, konuşmada… her şeyde minimalizm etkisini gösterebilir ve bu kadar farklı dallarda kullanılsa bile anlamını ve etkisini yitirmez.

Görsel sanatlarda minimalizm 60’lı yıllarda iyice gelişmeye başlamış bir akımdır. Minimalizmin temel ilkesi yalnızca gerekli öğeleri kullanmak ve kişilerin algısını tek bir şeye odaklamaktır.

“Daha fazla yere değil, daha az şeye ihtiyacınız var.”

Joshua Becker

Minimalizm, daha az şey kullanarak daha fazla şey söylemekle ilgili değildir. Bu akım söylemek istediğini en kısa, en basit ve en estetik şekilde söyleyebilmektir ve bu (öyle gözükmese bile) aslında çok da kolay değildir.

SURF – Interactive storytelling by Nick Herasimenka

Minimalizmin karakteristik özellikleri

– Basitlik
– Açıklık
– Dikkatli bir oran ve kompozisyon
– Genellikle büyük miktarda boş alan
– Temel unsur olarak tipografi
– İşlevsel olmayan, dekoratif tüm unsurların ortadan kaldırılması

Liste pek tabi uzatılabilir; ama bu hem vakit kaybı hem de bu yazının ruhuna aykırı olacaktır. 🙂

Minimal UI Tasarımı

Bugün web site ya da uygulama arayüz tasarımlarında minimalizm yoğun olarak kullanılmaktadır. Mümkün olduğunca kullanıcı dostu ve basit bir arayüz tasarımı yapmak amacıyla yola çıkıldığı için, bu yolun minimalizme varması da işten bile değildi zaten.

Flat design

Flat design (düz tasarım) modern dijital arayüzlerde minimalizmin en büyük destekçisidir. Flat design’ın en belirgin özelliği gerçekçi skemorfik görseller yerine 2 boyutlu görseller kullanmasıdır. Düz tasarımda genellikle daha az öğe, daha az kıvrım vardır ve gölge, ışık, renk geçişi veya doku kullanmaktan da kaçınılır. Bu da çok farklı ekran boyut ve çözünürlüklerinde çalışmanın en iyi şekilde görünebilmesini sağlar.

avsc. 6 by Wojciech Zieliński 

Sıkça yapılan bir hata olarak düz tasarım ve minimalizm birbirine karıştırılır; fakat aslına düz tasarım tek başına minimalist bir yaklaşım demek değildir. Düz tasarımda grafikler ile ilgilenilirken, minimalizm genel olarak düzen ve kompozisyonla ilgilenir. Düz tasarım mantığında yapılan bir iş bu haliyle minimalist olmayabilir.

Monochrome ve sınırlı renk paleti

Daha önce renkler ile ilgili birkaç yazı paylaşmıştım. Minimalizmde ise işler biraz daha farklı tabi. Minimal bir arayüz tasarımında, monokrom renk paleti kullanabilir ya da olabilecek minimum seviyeye çekebilirsiniz. Kısıtlı renk paleti kullanmak renk seçiminizi daha da güçlü hale getirecektir.

Monochrome Homepage Watch by Ssilbi NG

İyi bir tipografi

Tipografi, diğer her şeyde olduğu Minimal UI tasarımı konusunda da sadece içeriği iletmeye değil aynı zamanda stili de belirlemeye yardımcı olur. Yalnızca renk seçimi ve grafik stiline dikkat edip uyumsuz bir tipografi yapmak tasarımınızın seviyesini aşağı çekecektir. Yazı tipi seçiminde, kullanılan yazı tipinin öneminden daha önce bahsetmiştim, aynı şeyler burada da geçerli.

Seçim sınırlaması

Minimalizmin, minimal UI tasarımı konusunda en güçlü olduğu nokta kullanıcı konsantrasyonudur. İşlevselliğe ve sadeliğe odaklı olması, fazladan dekoratif öğelere, fazladan detaylara sahip olmadığından kullanıcının dikkatini tek bir yere çeker ve kullanıcının siteye ne amaçla girdiyse o amaca yönelmesini sağlar.

Çabuk ve sezgisel gezinme

Minimal UI tasarımı yaparken gezinme konusu bir zorluk yaratabilir. Tasarımcı, minimal bir tasarım yaparken en yüksek öneme sahip unsurları ön plana çıkartmak zorundadır.

Gezinme öğelerini gizleyecek birçok farklı yol var; fakat kullanılmadan önce iyice üzerine düşünülmeli ve test yapılmalıdır. Örneğin “hamburger menu” üzerinden konuşursak, bazı tasarımlarda gözden kaçabilir, tasarımın içinde kaybolabilir bu üç küçük çizgi. Ya da direkt olarak kullanıcıların etkileşimini zorlaştırabilir. Minimalist bir tasarım yaparken olumlu bir kullanıcı deneyimi için sorun oluşturmamak gerekir.

Negatif alanlar

Dijital tasarımlarda beyaz alanlar, negatif alanlar olarak adlandırılır ve aslında buralar “beyaz renkli yerler” değil boşluklardır. Negatif alanlar özellikle monokrom ya da sınırlı renk paleti kullanılan tasarımlarda kontrast oluşturmada ve okunabilirliği artırmada büyük tol oynar.

Palmers Hero by Ilia Semenov 

Kontrast

Minimalizm sadelik ve işlevselliği ön planda tutarken sınırlı kaynaklarını daha etkili şekilde ön plana çıkartmak için sırtını kontrasta yani karşıtlığa dayar. Renk seçimi ve yerleşimde kontrast oluşturacak kombinasyonlar tercih edilir.

2

#ui, #ux

Arayüzde navigasyon konusu UX tasarımının temel konularından biridir. Neden çok önemlidir sorusunun cevabı ise kullanıcılar belli bir amaç için arayüzünüzle etkileşime geçecekler ve yolu düzgün göremiyorsanız hedefe ulaşmak da zorlaşır. Her geçen gün daha fazla uygulama, web sitesi vesaire gibi arayüzle karşılaşan kullanıcılar sezgisel olarak kolay bir dolaşım bekliyorlar. Bu yüzden bu web tasarım sözlüğü‘nün bu bölümünü menü, düğme, gibi dolaşım ve etkileşim bileşenlerine ayırdım.

Navigasyon (Dolaşım, Yönlendirme, Gezinme)

Temel anlamıyla, navigasyon bir aracın bir yerden başka bir yere gitmesini sağlayan faaliyettir. Bu bir makine faaliyeti de olabilir, bir insan faaliyeti de. Fakat özünde iki nokta arasındaki planlı rotayı bir başkasına aktarmak vardır denilebilir. Kullanıcı deneyimi tasarımı tarafında baktığımızda navigasyon, kullanılabilirlik seviyesini belirleyen bir kavramdır. Bu durumda bir uygulama ya da web sitesi kullanırken, kullanıcıyı yönlendiren, hedefe ulaştırmayı sağlayan ve başarılı bir şekilde etkileşime girmesini sağlayan eylemler ve tekniklerdir. Kullanıcılar için en iyi ve en kolay rotayı belirlemektir.

Navigasyon, tasarım aşamasının en başında göz önünde bulundurulmalıdır. Böylece kullanıcı dostu bir rota belirlemek kolaylaşacaktır.

Menü

En temel gezinme öğesidir. Kullanıcıların, arayüzle etkileşime geçmelerini sağlayan bir grafiksel kontrol ünitesi diyebiliriz. Temel olarak arayüzün işlevini destekler şekildedir. Örneğin bir uygulamada “Kaydet”, “Sil” “Kapat” gibi temel işlevleri bu bileşen barındırır. Ya da satın alma, kategoriler, sayfalar gibi.. Menüler, arayüzde farklı konumlarda (üst, yan, alt menü gibi) ve görünüm ve etkileşime (kayan, aşağı ya da yukarı açılan menü gibi) sahip olabilir. Tasarımcının bu yelpazede görevi yalnızca menü yerleşimi yapmak değil potansiyel ve hedef kullanıcının istek ve beklentilerini dikkate alarak, analiz yaparak işlevselliği, yerleşimi ve düzeni sağlamaktır. İyi tasarlanmış bir menü olumlu kullanıcı deneyimini artıracaktır.

Bar (Çubuk)

Etkileşimin bazı temel aşamalarını barındıran kısımdır. Genellikle uygulamalarda alt kısımda hızlıca temel etkileşimleri gerçekleştirmeye olanak sağlar. Instagram, twitter, facebook gibi sosyal medya uygulamalarının neredeyse tamamında bu bar kullanımını görebilirsiniz. Kullanıcıyı olabildiğince uygulamanın temel özelliklerini, hızlıca kullanmasını sağlayan bir bileşendir.

Temel olarak bar (ya da çubuk) türleri şu şekildedir.

Tab Bar (Sekme Çubuğu)

Genellikle mobil uygulamalarda ve yine genellikle ekranın alt kısmında konumlandırılmıştır ve uygulamanın bölümleri arasında hızlı geçiş yapmayı sağlar.


Loading Bar (yükleme çubuğu)

Mevcut eylemin hangi aşamada olduğunu yüzde ya da zaman olarak gösterir. Kullanıcı işlemin ne kadar süreceği ile ilgili fikir sahibi olmuş olur.

 


Progress Bar (İlerleme çubuğu)

Yapılan faaliyetin ne kadarının yapıldığını ve sürecin ne kadarının tamamlandığını gösterir.


Button (Düğme)

Button ya da düğme tüm arayüzlerin en popüler bileşenidir. Kullanıcıların dijital arayüzde etkileşime girmelerinin en kolay yoludur. Çünkü aslında dijital arayüzlerdeki butonlar gerçek hayattakilerin birer kopyalarıdır. Button ile ilgili daha detaylı bilgiyi “Buton Tasarımı” ile ilgili yazımdan öğrenebilirsiniz.


Switch (anahtar, şalter)

Gerçek hayattaki gibi, iki seçenek arasından bir tanesini seçmesine olanak sağlar. Açık ya da kapalı gibi. Burada önemli olan nokta iki seçenekten hangisinin seçildiğini kolayca açıklayabiliyor olmalı. Renk farklılıkları gibi etkilerle bu sağlanabilir.


Picker (seçici)

Özellikle doğum tarihi, saat gibi çoklu seçeneklerden birini seçilebilmesini sağlar. Kullanıcı örneğin doğum tarihini seçmek için açılan picker’dan tarihleri yukarı ya da aşağı kaydırarak doğru olanı bulur ve seçer.


Checkbox (tik!)

Tik atmak dediğimiz işlevin arayüze uyarlanmış hali diyebiliriz. Bir onay vermek, çoklu seçeneklerden birini işaretlemek gibi işlevlerde kullanılır.

0

#ux
Herkes biliyor ki ilk intibayı değiştirmek inanılmaz zordur. (belki ikinci bir şans yoktur bile denilebilir.) Bu durum dijital dünyada ise çeşitlilik ve rekabetten dolayı imkansıza yakındır. O yüzden kullanıcıya (özellikle yeni kullanıcıya) yaratacağınız ilk intiba çok önemlidir ve haliyle bu intiba yaratma işinde web sitenizin belli bölümlerinin daha çok etkisi vardır, belki de header tasarımı da bunun en önemli kısmıdır.

Bu yazımda bunlardan biri olan, daha önce de Web Tasarım Sözlüğü‘nde kısaca değindiğim, header’dan bahsedeceğim ve header tasarımı yaparken kullanabileceğiniz bazı ipuçları vereceğim.

Header nedir?

Header, basitçe, bir web sayfasının en üstteki kısmıdır. Sayfaya ilk girişte, daha ilk saniyede, kaydırma yapmadan gördüğünüz şeydir. Bu haliyle epeyce stratejik bir durumu vardır.

Header, genelde “menü” olarak anılsa da aslında çok daha fazla şey barındırır bünyesinde. Bir örnek ile inceleyelim.


Nasıl gözüktüğünü bir kenara bırakıp yalnızca barındırdıklarına bakıyoruz. En üstte logo, menü ve giriş butonu bulunuyor. Hemen altında da büyükçe bir görselle (belki slider da olabilir) açıklamalar ve hemen altında da kullanıcıyı etkileşime çağıran bir buton bulunuyor. En altta ise sayfayı kaydırabildiğimizi belirten bir de küçük aşağı yönlü ok bulunuyor. 

Bir header’da neler bulunur?

Header bir çok şeyi barındırabilir;

  • marka kimliği. Marka kimliği çok geniş bir içeriği kapsıyor aslında. Haliyke header e bütün bir marka kimliğini koymak hem manasız hem de imkansızdır. O yüzden marka kimliğinin logo, marka adı, slogan, maskot, kurumsal renkler gibi temel unsurları koymak gerekir.

  • Ürün ya da hizmetin temasını ve amacını belirten küçük bir alan.

  • sayfalara ve içeriğe bağlantılar

  • sosyal medya bağlantıları

  • telefon numarası, elektronik posta gibi temel iletişim bilgileri

  • eğer arayüz çok dilli ise dil değiştirme bileşeni

  • arama alanı

  • abonelik alanı

  • sepet ve istek listesi

  • bir yazılımsa indirme, uygulama mağazası, deneme sürümü gibi bağlantılar


Yukarıdaki tüm bileşenleri bir header tasarımı yaparken mutlak kullanmaya gerek yok haliyle. Ama isterseniz tabi koyabilirsiniz tamamen sizin tercihiniz; ama böyle bir durumda bilgi yüklemesi olacak. Çok daha fazla bileşenin olması ilk bakışta daha fazla şey aktarıyormuş hissiyle iyi görünebilir ancak kullanıcının dikkatini asıl yoğunlaşması gereken bileşenlerden uzaklaştırır. O yüzden header tasarımı yaparken en başta iyi bir strateji yapmalısınız.



Header neden önemlidir?

Header kısmının birden fazla önemi vardır. 

Göz önünde bulundurulması gereken ilk şey, kullanıcıların bir web sayfasıyla ilk saniyede nasıl etkileşimde bulunduğunu gösteren göz tarama modelleri. İnsanlar bir siteye giriş yaptıklarında ilk yaptıkları şey tüm içeriği taramaktır. Detaylı inceleme yapmadan önce istemli ya da istem dışı olarak içeriği genel olarak tararlar. Kendilerini bu web sitesinde zaman geçirmeye ikna edebilecek bir şey ararlar. İşte bu noktada kullanıcıyı ikna etmek konusunda en büyük rol header’a düşüyor. 

Okunabilirlik ve Hiyerarşi

Okunabilirlik gördüğünüz gibi yine karşımıza çıktı. Bir web sitesinin ilk amacı, kullanıcıya amacını anlatmaktır. Bir ürün mü tanıtıyor? Bir hizmetten mi haberdar ediyor? Bir sosyal sorumluluk projesine destek mi arıyor? Bunların tamamını, web sitelerinin çoğu metin içeriklerle kullanıcıya ulaştırır. O yüzden okunabilir olmak bir web sitesinin, tüm bileşenleri için, olmazsa olmazdır. 

Okunabilirliği artırmak için özellikle renk ve tipografi konusunda çok dikkatli olmalısınız.


Kullanıcılar, genel olarak üç şekilde web sitelerinde tarama yaparlar. Bunlar “F-modeli”, “Z Modeli” ve “Gutenberg Modeli” olarak adlandırıyoruz. Bu modellemeler ile kullanıcıyı tanıyarak arayüzünüzün başarısına katkıda bulunabilirsiniz.


header tasarımı

Bu model, daha çok bilgi ve metin, daha az görsellik barındıran durumlarda genellikle kullanılıyor olan tarama modelidir. Klasik şekilde, dört köşeye yerleşmiş olan noktalar arasında, soldan sağa, oradan da yine sol alta ve tekrar sağa doğru devam eden bir tarama biçimidir. Bu bir web sitesi de olabilir, bir afiş de olabilir, bir kitap da olabilir. İnsanlar çoğunlukla bu modeli kullanırlar.


header tasarımı

Z-Modeli’yle ise Gutenberg modeline oranla daha fazla görsellik barındıran durumlarda karşılaşıyoruz. Tarama yönü Gutenberg modeli gibi soldan sağa ve aşağı yönlü olsa da, görsel oranı daha fazla ve içerik daha çok bölündüğü için yönlenme sayısı da fazla olacaktır.



header tasarımı

Diğer bir model olan F modelinde ise kullanıcı içeriği soldan sağa düz bir şekilde tarar. Sonrasında sayfayı aşağı yönde hareket ettirir ve bu sırada yukarıdan aşağı içeriğin sol kısmını dik bir şekilde tarar. Sonrasında yine soldan sağa bir hareket yapıp, yine aynı şekilde yukarıdan aşağı dik bir tarama yapar. Özellikle arama motoru sonuçlarında rastlanılan bir tarama modelidir. (Bu tarama modelleri ile ilgili yakında daha detaylı bilgi vereceğim.)

Özetle; header’in önemi bir web arayüzü için tartışılmaz şekildedir. Saniyeler içinde karar veren kullanıcıyı “burada kalmalısın” diye ikna edici bir görevi vardır. Bununla beraber bir web arayüzü için header bölümü bir zorunluluk değildir tabi. Header’in işlevini başka yaratıcı yollarla karşılayan örnekler de mevcut. Ama header’in olup olmaması da, olursa nasıl olması gerektiği de diğer her şey gibi bir araştırma ve analiz sonucunda karar verilmesi gereken şeylerdir.

0

#tasarım, #ux

UX tasarımı ile ilgili en detay noktalarından biridir içeriklerde bölümlendirme. Peki bu bölümlendirmeyi nasıl yapacağız? Sonsuz kaydırma (infinite scrolling) mı yoksa sayfalama (pagination) şeklinde mi? İki tarzın da artıları ve eksilerini inceleyerek seçim yapmanızda yardımcı olmaya çalışacağım.


SONSUZ KAYDIRMA (INFINITE SCROLL)

Sonsuz kaydırma, içeriğin bölümleri arasında belirlenmiş bir bitiş çizgisi olmadan, sayfayı kaydırdıkça içeriğin diğer bölümlerin yüklenmesini sağlayan bir tekniktir. İçeriği okurken ya da görürken deneyim sekteye uğramaz, devamlı bir haldedir. Bu yönüyle cazip gelse de her içerik/site/uygulama için genel bir çözüm değildir.

Artı 1 – kullanıcı katılımı

Sonsuz kaydırma yöntemiyle, kullanıcıyı sayfanızda ya da uygulamanızda daha fazla kalmasını sağlayabilirsiniz. İçerikleri görüntülemek için sayfayı kaydırmaya devam etmesi de etkileşimi artıracaktır. Özellikle sosyal medya gibi bir içerik denizinde sonsuz kaydırma, içeriklerin yüklenmesini beklemeden etkileşime girmek için çok etkili bir yoldur.

Sonsuz kaydırma, kullanıcıların belirli bir şeyi aramadığı “keşif” odaklı sayfa ve uygulamalar için neredeyse bir zorunluluk sayılabilir. Sonsuz kaydırma ile keşfettiği içerikler sayesinde daha fazla zaman harcayacak ve etkileşiminizi artıracaktır.

Artı 2 – kaydırma tıklamadan iyidir.

Kaydırma, tıklama ya da dokunmadan daha iyi bir deneyim sunar. Fare tekerlekleri ya da dokunmatik ekranlar bu kaydırma işlemini çok hızlı hale getirdiler. Sürekli ve uzun bir içerik için sonsuz kaydırma, metni sayfalara ayırmaktan daha kullanışlıdır.

Artı 3 – kaydırma mobil cihazlar için daha iyidir.

Özellikle dokunmatik ekranlar sonrasında kaydırma hareketi çok daha kolay bir hal aldı. UX tasarımı işte bu yüzden daha da önemli hale geldi. Kullanıcılar sezgisel olarak içerikle etkileşime geçmeye başladılar. Mobil cihazlardaki kontroller sonsuz kaydırma için mükemmeldir.

Eksi 1 – sayfa performansı

Sayfanın hızlı yüklenmesi, kullanıcı deneyiminin her şeyidir. Tüm deneyimi planlarken ilk önce aklınıza bu gelmeli. İstediğiniz kadar benzersiz biz deneyim tasarlayın, sayfa yüklenme süresi uzunsa kullanıcınıza veda etmeye hazırlıklı olun. İşte sonsuz kaydırmanın handikaplarından biri de bu. Sayfayı kaydırmaya devam ettikçe yüklenen veri artacak ve bir noktadan sonra yükleme performansı düşmeye başlayacak. Bu performans düşüşü özellikle kısıtlı donanım sahibi cihazlarda takılmalara bile sebep olabilir.

Eksi – 2: yer belirleme

Nerede kalmıştık? Kullanıcılar içeriğin belirli bir noktasına geldiklerinde oraya bir işaret koyamazlar. Oldu ki içeriğinizin yarısında bir şekilde sayfadan ayrıldı. Sonra geri döndüğünde ne yapacak? En baştan aşağı doğru kaydıracaklar. Kullanıcı bunu yapmak istemez.

Dünyanın en büyük pazaryeri sitelerinden Etsy, 2012 yılında arama sonuçlarında sonsuz kaydırma tekniğini kullandı. Sonuç? Kullanıcı etkileşimi azalmaya başladı. İnsanlar uzunca bir listeyi gözden geçirdikten sonra, listenin başındaki ya da sonunda bir ürüne gitmek için az önce yaptığı kaydırma işlemini tümden geriye doğru yapmak zorundaydılar ve yapmak istemediler.

Eksi – 3: saçma kaydırma çubukları

Kaydırma çubuğunun uzunluğu ve konumu sayfanın içerdiği veri miktarıyla orantılıdır. Bir içeriği okurken kaydırma çubuğu 150px yüksekliğinde ve sayfanın sonuna yaklaşmış haldeyken, bir sonraki cümleye geçmek için kaydırdığınızda 70px’e düşse ve sayfanın ortasına gelse kullanıcı ne hisseder? Siz ne hissedersiniz?
Bu can sıkıcı histen kurtulmak için bazı arayüzlerde kaydırma çubuğunu gizleyenler çıktı. Durumu kurtarmak yerine daha vahim hale getirmek denen şey işte tam olarak bu.



SAYFALAMA (PAGINATION)

En klasik yöntemdir. İçerik belirli bölümlerinden sayfalara ayrılır. Sayfanın sonuna geldiğinizde sayfa numaralarını görürsünüz.

Artı – 1: iyi dönüşüm

Sayfalamanın en büyük artısı içeriğin boyutunu kestirebilmenizdir. Özellikle listeleme sayfalarında kullanıcının aradığı şeye ulaşmasında kolaylık sağlar.

Google arama sonuçlarını sayfalayarak vermesi iyi bir örnektir. Kullanıcı aradığı şeyin alaka düzeyinin, sayfa sayısıyla ters orantılı olduğunu bilir ve ona göre hareket eder.

Artı 2 – kontrol hissi

Sonsuz kaydırmada bir noktadan sonra istediğiniz kadar kaydırın sona gelmeyecekmiş gibi hissedersiniz. (sosyal medya siteleri ve uygulamalarında durum neredeyse buna yakındır zaten)

Kullanıcılar mevcut sonuçların sayısını bilirse sonsuz kaydırma’ya nazaran daha bilinçli hareket ederler ve sonuç sayısını bildikleri için aradıkları şeye ulaşmaları ne kadar vakitlerini alacağını tahmin edebilirler.

Artı – 3: yer bulma

Sayfalandırılmış bir arayüzde kullanıcı aradığı şeyin konumu hakkında sezgisel olarak bilgi sahibi olabilirler. Ya da okuduğu içeriğin neresinde kaldığıyla ilgili zihinlerinde bir yer işareti oluşturabilirler.

Özellikle e-ticaret site ve uygulamalarında sayfalama kullanmak çok iyidir. Çünkü kullanıcıların azımsanmayacak bir kısmı online alışverişini yarıda bırakıp başka bir şeylerle uğraşıp, sonra tekrar geri dönüp alışverişlerine devam ediyor. Bu noktada o kullanıcıyı hızlıca kaldığı noktaya yönlendirebilmek gerekir.

Eksi: Ekstra İşlem

Sayfalamanın en büyük eksisi kullanıcının diğer sayfaya geçmek için, geçiş için gerekli bağlantıyı bulması, tıklaması ve yeni sayfanın yüklenmesi gerekiyor. (düğmeler ile ilgili yazıma ulaşmak için buradan buyurun)

Sayfa geçişlerindeki ekstra işlemden ziyade asıl problem çoğu web sayfası ya da uygulama sayfalarda sınırlı içerik göstermesi. Sayfa başına içerik oranını iyi ayarlanmış olmazsa kullanıcılar çok fazla ekstra tıklama yapmak zorunda kalabilir.

Hangisini ne zaman kullanmalıyız?

Sonsuz kaydırmanın en etkili olduğu yerler, içeriğin kullanıcılar tarafından oluşturulduğu sosyal medya tarzında, akış temelli site ve uygulamalardır.

Sayfalandırma, daha çok bir hedefe yönelik site ve uygulamalarda daha işlevseldir.

Google iki tekniği harmanlamak konusunda çok iyi bir örnektir. Google Görseller, arama sonuçlarını, kullanıcıların metinlere göre daha hızlı tarayabilmeleri sebebiyle sonsuz kaydırmayı kullanır. Fakat normal arama sonuçları metin olduğu için klasik sayfalama tekniği kullanılır.

Sonuç
Sonsuz kaydırma ya da sayfalama tekniklerinden birini seçmeden önce iki tekniğin de artı ve eksilerini tartmalı ve arayüz tasarladığınız ürüne uygunluğunu düşünmelisiniz. UX tasarımı yaparken göz önünde bulundurmanız gereken nokta uygunluk ve işlevsellik.  UI ve UX Tasarımı ile ilgili diğer yazılarımı da okumanızı tavsiye ederim…

0

#ui

Daha önce UI tasarımı konusunda renk kullanımından ve rengin UI tasarımında ne denli önemli olduğundan bahsetmiştim. Şimdi rengin bir adım ötesine geçiyor ve tasarımcıların şu sorusuna cevap arıyorum;  UI tasarımı yaparken nasıl bir renk şeması kullanmalıyım? Karanlık mı, aydınlık mı? Bu yazıda koyu ve açık renk şemalarıyla ilgili önemli noktalara değineceğim.


ui tasarımı


Seçim yapmak ve bu seçimin etkileri

Arayüz tasarımında renk şemaları ile ilgili herkes bir şey söylüyor. Renk şemalarıyla ilgili evrensel bir standart oluşturmak isteyenler bile var. Fakat aslında ortadaki durum şu; proje neyi gerektiriyor, tasarımcı ne düşünüyor? (renk şeması özelinde bahsediyor olsam da UI tasarımının her noktasında geçerlidir bu) Aynı proje için bir tasarımcı aydınlık bir renk şeması seçebilirken, bir diğeri karanlık tarafa geçebilir. Önemli olan her iki tarafın da artılarını eksilerini iyi tahlil etmek. Bir arayüz tasarlarken genel renk şemasını seçmek için en başta dikkate alınması gereken birkaç husus var. Değinelim.

Belirginlik Kullanıcı, ekrandaki tüm detayları görebilmeli ve arayüz içindeki elementleri açıkça ayırt edebilmeli. Seçilen renk şeması ve bunların kombinasyonları arayüzün kolay ve sezgisel kullanımını desteklemeli işlevsel özellikleri ön plana çıkarmalıdır. Eğer kullanıcı arayüzle etkileşime girmekte zorluk çekiyorsa seçilen renk şeması ne olursa olsun, sonuç başarısız demektir. (Böylesi bir durumda tek suçlu renk şeması olmayabilir. İşlevsel elementler düzgün şekilde yerleştirilmemiş olabilir; fakat bu adıma kadar her şeyin düzgün yapıldığını varsayıyorum.) Renk şemasının belirginliğe olan başarılı katkısını görmek için tasarımın geneline biraz “blur” efekti verip bakın. İşlevsel elementler kendilerini belli ediyorlar mı? Bulanık bir görüntüde bile elementler kendilerini belli ediyorlarsa doğru bir netken zaten belli edeceklerdir.

Okunabilirlik (yine) Daha önce de bahsettiğim gibi okunabilir olmak bir arayüzün en önemli özelliğidir. Çünkü arayüz kendini yazılı olarak ifade eder. Ekran için arkaplan seçimi çok yüksek ihtimalle okunabilirliği etkileyecektir. Özellikle metin odaklı UI tasarımı yaparken ilk dikkat etmeniz gereken nokta budur. Eğer arayüzünüzün okunabilirliği zayıfsa, kullanıcı büyük bir çaba harcamak zorunda kalacaktır. Büyük bir çaba harcamak zorunda kalan kullanıcının, bu çabayı harcamak yerine alternatiflere yöneleceğini söylemeye bile gerek yok.

Erişilebilirlik Bir arayüzün önemli amaçlarından biri de mümkün olduğunca fazla kişiye erişebilmektir. Sonrasında ise erişebildiği bu kişileri etkileşime geçirme aşaması gelir. Kişilerin kullanıp kullanmama kararının da istekleri ve ihtiyaçlarından çok fiziksel yetenekleri ve yeterliliklerine dayandığını düşünürsek, tasarımınız mümkün olduğunca çok erişilebilir – etkileşime geçilebilir yapmanız gerekiyor. Renk şemanız, bunu etkileyen ana faktörlerden biridir. Çok geniş bir yaş aralığını, özel ihtiyaçları, kişilerin engeli olup olmadığını göz önünde bulundurmalısınız.

Duyarlılık (responsive) Kişilerin çok çeşitli olması gibi, bu kişilerin kullandığı cihazlar ve ekran boyutları da çok çeşitlidir. Yüksek çözünürlüklü kocaman bir ekranda zarif, şık ve çekici görünen bir çizginin düşük çözünürlüklü bir ekranda leke gibi görünebileceğini dikkate almalısınız. Ya da seçtiğiniz renk şeması çoğu cihaz ve ekranda olması gerektiği gibi görünmeyebilir. Her projeniz için çeşitli cihaz ve çözünürlüklü ekranlarda test yapmak için zaman ayırmalısınız. Ayıracağınız bu vakit sizi sonradan karşılaşabileceğiniz problemlerden ve ekstra iş yükünden kurtaracaktır.

Çevre Renk şeması seçiminde dikkate almanız gereken bir başka etmen de kullanıcıların arayüzünüzü hangi ortamlarda daha çok kullanacağı. Kullanıcılar daha çok doğal ışık alan dış mekanlarda mı kullanacaklar yoksa iç mekan yapay ışıkta mı? Çok mu aydınlık yoksa çok mu karanlık? Örneğin; parlak bir güneş altında sıkça kullanılacak bir uygulama arayüzü için koyu bir şema seçmeniz ekranda yansıma oluşmasına yol açabilir. Renk şeması seçerken arayüzün kullanılacağı ortamı dikkate almak hayati bir önem taşır.

Renk şeması seçiminde adım adım süreç Bu adımları izleyerek renk şeması seçimininin altından başarıyla kalkabilirsiniz.

Arayüzün amacını net olarak belirleyin. Kullanıcı, sizin arayüzünüzle ne amaçla etkileşime geçeceğini iyice anlayın. Bu bir blog gibi metin ağırlıklı bir arayüz mü olacak? Bu durumda açık renklerden oluşan bir şema daha faydalı olabilir. Yoksa görsellerin yoğunlukta olduğu bir arayüz mü yapıyorsunuz? Koyu renkli bir renk şeması görsellerinizin daha iyi görünmesini sağlayabilir.

 


Hedef kitleyi iyi analiz edin

Daha önceki yazılarımda da sıkça söylediğim gibi kullanıcılarınızı iyi anlayın. Çünkü bir arayüz kullanıcıya ulaşmıyorsa, onu etkileşime katamıyorsa bitmiş sayılmaz. Kullanıcınızı tanıdığınızda arayüzünüz sağlam temeller üzerine kurulacaktır. Orta yaşlı insanlar alışılmışlığın getirdiği açık renkli bir arkaplanı sevme eğilimindedirler. Genç yetişkinler daha orijinal ve koyu tonlarda şemalardan hoşlanırlar. Çocuklar kendilerine komik gelen detaylarla dolu parlak renkli arayüzleri severler. Arayüzünüzün hedef kitlesi tasarımınıza direkt olarak etki eder. Bunu unutmayın.


Rakip analizi

Çok yüksek ihtimalle UI tasarımı yaptığını ürün, aplikasyon ya da web sitesi piyasadaki tek ürün, aplikasyon ya da web sayfası değil. Kullanıcılar sizin sunduğunuz ürün ya da hizmeti hali hazırda bir başkasından temin ediyor. Bu yüzden mevcut arayüzleri araştırmak sizi onlardan öne çıkartacak tasarımı oluşturmanızda epey fayda sağlayacaktır.


Mümkün olduğu kadar test yapın

Bu ana kadar bahsedilen her şey tek bir ekran, tek bir çözünürlük için geçerli olabilir; fakat ya ekran değişince? O yüzden yapabildiğiniz kadar farklı cihazlar, çözünürlükler, koşullar altında test yapın. Düşük çözünürlükte düşük ışıklandırmalı bir ortamda kullanıldığında, yüksek çözünürlükte ve yüksek doğal ışıkta kullanıldığında aynı performansı sağlıyor mu? Tüm bu test sürecini atlamanız arayüzünüzün çıkartacağı problemleri, güçlü ve zayıf yönlerini, verimsiz tasarım işlemlerini görmeden yayına almanıza, o da kullanıcının başka alternatiflere yönelmesine sebep olabilir.

0