Your address will show here +12 34 56 78
#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, #ux
Bir önceki bölümü okuduysanız UI ve UX arasındaki farkları, prototipleme ve wireframe ile ilgili bilgi sahibi olmuşsunuzdur.

Bu bölümde web tasarım teknikleri ve bir web sitesinin bölümleri ile ilgili bilgiler vereceğim.

Web Tasarım

Web sitelerinin ve sayfalarının hem etkileşimlere hem de estetik niteliklere sahip olarak oluşturulması işidir en basit tanımıyla. Web tasarım süreci bir fikirden yola çıkılarak başlayan, grafikleri, içerikleri, kullanıcı alışkanlıklarını içeren bir süreçtir. Aynı zamanda web sitesinin ya da sayfanın arayüz yapısını, işlevselliğini, görünümünü tanımlamak için de kullanılır. Ayrıca içerik üretimi ve yönetimini de web tasarımı içerisine ekleyebiliriz.

Görüldüğü üzere epeyce kapsamlı bir açıklaması var web tasarımın. Bu haliyle bir çok işlem, araştırma ve hatta bilimi içinde barındırır.

– çizim ve kompozisyon

– görsel ve renk

– mantık ve şema

– analiz ve istatistik

– görsel sanatlar

– programlama

– kullanıcı araştırması

– psikoloji

– metin yazarlığı

– kurum kimliği

– pazarlama


Yukarıda yazdığım listeden yola çıkarak başarılı bir web tasarım birbirinden farklı disiplinlerin bir araya gelmesiyle oluşur. Bu haliyle başarıya ulaşmak için bu farklı disiplinlerden uzmanlarla çalışmanın faydası vardır. Tasarımcı bu noktada diğer analiz ve istatistiklerin sonuçlarına göre hareket edecektir.


Anasayfa

Bir web sitesinin en popüler parçasıdır. Kullanıcıların bir web sitesinde olan yolculuğunun başlangıç noktasıdır. Site içeriğindeki önemli noktalara bağlantılar içerir. Bunlara ek olarak, anasayfa, arama alanı, sloganı, karşılama mesajı, önerilen/ öne çıkarılan içerik, kategorizasyon gibi bileşenleri de içerebilir. Olumlu kullanıcı deneyimi için ilk adımdır. Dağınık ve kullanışsız bir anasayfa ne kadar güzel görünürse görünsün, işlevi ne kadar faydalı olursa olsun kullanıcı deneyimini negatif etkileyecektir.

Landing page (açılış sayfası)

Landing page basit olarak kullanıcının hangi sayfada olduğunu anlaması için, kullanıcıyı karşılaması için hazırlanmış ön sayfalardır. Aslında artık kullanılmayan “hoşgeldiniz” sayfalarıdır. Ama artık daha geniş bir anlamı ve amacı olduğunu söyleyebiliriz.

Günümüzde landing page’ler özellikle bir ürün, uygulama, hizmet ya da özellik tanıtımı yapmak amacıyla oluşturulmuş spesifik web siteleri olarak kullanılıyor. Kullanıcının dikkatini o an amaçladığı şeyden uzaklaştırmadan kendini satmaya çalışıyor da diyebiliriz. Özellikle dijital pazarlama kampanyalarında sıkça başvurulan bir yöntem haline geldi landing page. Çoğu uzmana göre, özellikle belirli bir ürün ya da hizmetin pazarlanması ya da tanıtılmasında landing page çok daha verimli bir çözüm.


Responsive (Duyarlı) Tasarım

Responsive tasarım, bir arayüzün kendisini farklı cihaz ve ekran boyutlarına göre ayarlamasıdır. Genellikle cihazlar ve ekranlar arasında içerik ve işlev bakımından bir değişiklik olmaz, yalnızca boyutlandırmalarda değişiklik gerçekleşir. Bir arayüzün farklı cihazlarda ve elranlarda aynı işlevi, aynı faydayı, aynı kullanışlılığı aynı başarıyla sağlaması başarılı bir responsive için en önemli koşuldur.

 

Header

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 şeye hizmet eder. Marka logosu, sloganı, kurumsal renkleri, sunulan ürün ya da hizmetin özeti sayılabilecek bilgileri, temel iletişim bilgilerini, sosyal medya bağlantılarını, kategorileri, çoklu dil varsa dil değiştiriciyi, arama ve abonelik alanlarını barındırabilir. Tabi bukadar şeyin yanında yine menü de header içerisinde yer alabilir.

Footer

Header’in tersine bir arayüzün en altında bulunur. İşlevsel olarak header’a yakındır. Footer, bir yönüyle header’i destekler niteliktedir. Çünkü; logo, slogan, arama ve abonelik alanlarını, header’dan biraz daha kapsamlı bir dolaşım menüsünü, küçük bir iletişim formunu, bir haritayı barındırabilir.

0

#ui, #ux

Web tasarım sözlüğü – Bölüm 1

Daha öncesinde web tasarım aşamalarıyla ilgili bir çok yazım oldu; fakat sonradan UI ve UX ile ilgili yazmanın hoşuma gittiğini farkettim ve işleri biraz daha ciddileştirmek istedim.

Etraftaki “ben bu işin kralıyım, 27 senedir yui yapıyorum insanları” gibi ekstradan ve boş (çoğu için diyorum) bir özgüvenle yazmak istemiyordum zaten. Bu yüzden yeni yazılar için yeni araştırmalar yapmaya başladım ve bu araştırmalar kendim için de epeyce faydalı oldu.

O sırada da bir açıklamalı web tasarım sözlüğü derlemek gerektiğini düşündüm. Oturup tümünü yazmak yerine bolca örnekli ve açıklamalı bölümler halinde yazmanın daha iyi olacağını düşünüyorum.

Uzunca bir girizgahtan sonra ilk kısma girebiliriz.

web tasarım


UX – User Experience (Kullanıcı deneyimi)

Kullanıcıların, etkileşime girdiği/kullandığı ürünün farklı aşamalarında ya da tümünde sahip olduğu genel tutum ve duygusal geri bildirimdir. Bu kadar kısa şekilde tanımlayabiliriz fakat aslında olduğu şeyi anlatmakta yetersiz kalıyor.

Aslında UX kullanılabilirlik, kullanıcıya sağlanan fayda, kullanıcının ürünü kullanmak istemesi, tercih edilebilirlik, etkileşim yöntemi, sonuç hızı gibi çeşitli temel etkenlerin tamamını barındırır.

Tasarımın ve son aşamada ürünün mantıksal, olağan ya da olağandışı tüm sorunları, sağlayacağı faydalar analiz edilip buna göre tasarlanırsa, son kullanıcının ihtiyacını, hızlı, kolay ve sorunsuz şekilde karşılayabilir. İşte bu sorunsuzluk da kullanıcı tarafındam biraz önce bahsettiğimiz temel etkenlerin tamamının olumlu geri dönüşü anlamına gelecektir. Olumlu kullanıcı deneyimi, kullanıcıları elde tutma konusunda en güçlü etkenlerden biridir.


UX wireframing

Tasarlanan arayüzün şemasını oluşturmadır. Genel yapısıyla, grafik tasarımını yapmadan, arayüzün çalışma yapısını ortaya çıkartırsınız bu aşamada.

Sayfaların bağlantı haritası, bikeşenlerin konumları, etkileşimler gibi bir çok kısmı burada halledebilirsiniz.

Wireframing aşamasında kullanıcı analizleri, rekabet araştırması gibi verileri kullanmanızda fayda var. Elinizdeki verilere dayanarak oluşturulan wireframe sayesinde, ortaya çıkacak ürünün kullanılabilirliği ve işlevselliği üst düzeyde olacaktır.

UI – User Interface – kullanıcı arayüzü

Son kullanıcının ürününüzle etkileşime girdiği yerdir. Wireframe ile belirlediğiniz yapının kullanıma hazır olan halidir. İkili tanın yaparsak, UX ürünün nasıl çalıştığı, UI de nasıl göründüğü ile ilgilenir. Metaforik olarak anlatırsak, UX aşamasında şasisini, koltuk sayısını, bagaj boyutunu gibi özelliklerini belirlediğiniz bir aracın rengini, görünümünü, şeklini verdiğiniz adımdır.

Bu aşamada artık projenizde grafikler, tipografi, renkler, sesler gibi her türlü duyusal öğe bulunmaktadır.

UX ve UI birbirlerini destekler niteliktedirler. UI’deki bu öğelerin kullanıcı deneyimini olumlu ya da olumsuz etkileyeceğini unutmayın.

Prototip

Kelime anlamıyla aynı manaya gelir. Nihai ürün ortaya çıkmadan önce yapılan işlemdir. Özellikle wireframing aşamasında yapılacak prototipleme ürünün doğruları ve yanlışları hakkında bilgi verecektir.

Prototip yapmanın önemi özellikle son birkaç yılda epey arttı. Prototipi yapılmış bir çalışmayı kullanıcıya sunmak özellikle işin başında geri bildirim almak açısından çok önemlidir.

Prototip aslında nihai ürünün bir önceki aşaması olarak düşünülse de bir arayüz tasarımında aslında UX’ten sonra gelir. Prototipleme aşamasında yoğunlaşılan nokta ürünün kullanıcı deneyiminin, işlevlerinin geliştirilmesi açısından kullanışlıdır. Prototip aşamasından sonra UI tasarımına geçilmesi daha sağlıklı olacaktır.

0

#ux
Splash screen (yükleme ekranı) nedir? Splash screen tasarımı nasıl yapılır?
Splash screen kullanıcıların bir aplikasyonu başlattıklarında, uygulamanın adını, logosunu ya da bir görseli gördükleri, karşılarına çıkan ilk ekrandır. Bu splash screen aplikasyon verilerinin yüklenmesi için gereken süre boyunca görünecektir. İşte tam da bu yüzden splash screen tasarımı çok önemlidir. İyi bir ilk izlenim yaratmada splash screen tasarımının rolü İnsan ilişkilerinde olduğu gibi, yaptığınız tasarımın sevilip sevilmemesi de çok büyük oranda ilk izlenime bağlı denebilir. Kullanıcı, ilk izleniminden hemen sonra kalmak ya da gitmek arasında bir tercih yapacaktır. Splash screen’de bekleme süresinin fazla olması çoğu zaman kullanıcının gitmesi için yeterli bir sebeptir. Mükemmel bşr dünyada yükleme süresi olabildiğince kısa olmalıdır. Fakat özellikle ülkemizde mükemmel bağlantı hızları olmadığı malum. Böyle bir durumda splash screen’de bekleme süresini kısa tutmak bizim elimizde olan bir şey değil. Bu durumda ne yapmalı?

“Süreyi kısaltamıyorsak, onu keyifli hale getirmemiz gerekiyor.”

Splash screen kullanmaktaki asıl amaç kullanıcıların dikkatini başka bir yöne çekip, beklediklerini unutturmaktır. Örneğin uygulamanın içeriğiyle ilintili bir animasyon kullanabilirsiniz:


 

 

 
Ya da daha soyut şeyler kullanabilirsiniz:


Eğer uygulamanızın yükleme süresi genelde 10 saniyeden fazla sürüyorsa, yükleme işleminin devam ettiğini belirten bir gösterge koyabilirsiniz. Böylece biraz önceki tekrar eden animasyonun sıkıcı olmaya başlamasının da, yeni bir dikkat dağıtıcıyla, önüne geçmiş olursunuz. Belirsiz beklemeler yerine, ilerlemeyi görebildikleri yüklemelerde kullanıcıların vazgeçme eşiği yükselecektir.

0

#ui
UI (ya da arayüz) tasarlarken her şeyde olduğu gibi bu işte de en öncelikli işlerinizden biri renk seçimi. Renkler de her şey gibi, en iyi, uyumlu ve dengeli olduğunda güzeldir. Bu yazımda UI tasarımında renk kullanımı ile ilgili bazı bilgiler paylaşacağım. 

İnsanlar istek yaparken aksini söylese de ne kadar az renk o kadar iyidir. Hatta sayı veriyorum 3! 3 ana renk seçin ve daha fazlasına ihtiyaç duyarsanız bu 3 ana rengin tonlarını kullanın.

60-30-10 kuralı

Bu kural aslında, iç mimaride kullanılan bir kuraldır ve aslında yazılı bir kural değildir tabi. Daha çok bir teknik diyebiliriz aslında 60-30-10 için. Bu verdiğimiz rakamlar aslında bütün içerisinde renklerin kapladığı alandır. Bu formül, bir denge duygusu yarattığı ve gözün bir odak noktasından diğerine rahatça hareket etmesine izin verdiği için işe yarar. Ayrıca kullanımı inanılmaz derecede kolaydır. Şöyle ki; %60 baskın renk, %30 ikincil renk, %10 üçüncül renk. Bu teknik uzun yıllardır kullanılan bir tekniktir ve kullanılmaya devam edecektir. Bu bir gerçek!


Renkler ve Anlamları

Ana konusu renkler olan bir yazıda elbette ki renklerin anlamlarından da bahsedecektik. Fakat bizim işimize yarayacak kadarını anlatıp bırakacağım. Ne derseniz deyin renklerin anlamlarından ziyade, insanda hissettirdikleri bir şeyler var. Kırmızı “aşk, tutku” anlamlarına geliyor deyince her ne kadar “hadi canım” deyip geçsek de bize hissettirdikleri buna yakın şeyler olabilir. Her ne kadar renkler kültürden kültüre farklılık gösterse bile yine de genel geçer bir his dünyası vardır diyebiliriz. Zarif, şık ve pahalı bir giyim markası düşünün; aklınıza gelen renkler siyah ve beyaz olacaktır. O yüzden bu tarz mağazaları her yerde görüyorsunuz. Kırmızı aşk ve tutk olabilir belki; ama aslında hissettirdiği daha ilkel bir duygudur ve o yüzden yiyecek markaları genelde bu renktedir. Konumuza dönecek olursak, projeye uygun renkler seçmek, o proje için en öncelikli şeylerden biridir. (Bu arada hali hazırda bir markanın kurumsal kimliği üzerinden yapılacak bir projeyse o noktada bir tasarımcı olarak, eğer kurumsal renk istenen sonuca varamyorsa dahiyane bir fikir bularak işi çözmelisiniz.)


Gri Tonlamalı Çalışmak

Tasarım aşamasında seçtiğiniz renklerle çalışmak çok güzel. Renklerle oynamak gibi oluyor hatta bazen; ama kimi zaman bu bir sıkıntı yaratabiliyor. 3 saat bir sayfa üzerinde çalıştığınızı düşünün sonrasında diğer sayfaya geçtiğinizde farkettiniz ki aslında renkler başka şekilde kullanılmalı! Bu durumda çok güzel bir 3 saat kaybetmiş olabilirsiniz. O yüzden her şeyi yerli yerine koyarken renk olarak gri tonlamalı çalışmak size büyük bir artı katacaktır. Her materyal nerede nasıl, hangi tonda görünecek çok rahat belirleyebilirsiniz ve olası durumlarda müdahale şansınız daha kolay olur.

Doğaya Bir Göz Atın

Doğada inanılmaz renk paletleri vardır. Renk seçiminde zorlanıyorsanız kendinizi doğanın şefkatli kollarına bırakın. Her tasarımınızda renk uyumlarını (kimi zaman zıtlıklar; ama yine de dengeli bir biçimde) yakalamanın en kolay yolu budur.


İlham Alın

Projeniz için renk seçimi yaparken ya da palet oluştururken diğer tasarımcıların neler yaptıklarına bakmaktan çekinmeyin. İnsanlar hangi renkleri, hangi renklerle beraber, hangi oranlarda kullanmış görmek size yeni kapılar açacaktır.


Kullanışlı araçlar

Renk seçimi için kullanışlı araçlar internette bulunuyor. Coolors.co, Adobe Kuler, Paletton.com gibi uygulama ve siteler size yardımcı olacaktır. Kullanmaktan çekinmeyin. Sözün özü renkte ustalaşmak çok zor bir iştir. Eğer bu konuda ustalaşmak istiyorsanız yapabileceğiniz tek şey aslında şudur; oynayabildiğiniz kadar renklerle oynayın.

UI tasarımında renk kullanımı ile ilgili bu yazıma da göz atabilirsiniz…

0

#ui

UI tasarımı dediğimiz şey, birbirine bağlı sayfalar oluşturmaktan fazlasıdır. Bunu aklımızda tutalım öncelikle. UI tasarımı (arayüz, interface) yukarıda bahsettiğimiz gibi sayfalar tasarlayıp bunları birbirine bağlamaktan ziyade bir deneyim tasarlamaktır. Arayüzdeki görsellik, tipografi, animasyonlar, efektler, yerleşim planı bütünüyle iyi bir etkileşim sağlamalı. Her ne kadar makine olsa da insanların bu arayüz sayesinde makineye komut vereceğini unutmamak gerekir. Bu noktada tasarımcının işi bu deneyimi olabildiğine iyi hale getirmektir. Bu deneyimi yaratmada aklınızda bulunması gereken 10 ipucuna hazırsanız geçelim.


1. Kullanıcıyı tanıyın

En başta yapmanız gereken şey budur. Kullanıcıların kim olduğunu bilmek zorundasınız. Analiz uygulamalarından alabileceğiniz tüm demografik veriyi almalısınız. Bu demografik bilgiler size kesin hedefler çıkarmada yol gösterici olacaktır; ama daha da önemlisi şu ki kullanıcıların analitik verilerinden ziyade ne istediklerini bilmelisiniz. Arayüzünüzle etkileşime girmiş, 40-50 yaş aralığındaki 1300 erkeğin aslında ne amaçladığını bilmeniz demek bu. Ekranınızda yazan istatistiklerdeki kişilerle empati kurmanız gerekiyor. 40-50 yaş aralığındaki 1300 erkekle birebir görüşmeniz pek mümkün olmadığı için, birkaç örnek kişiyle görüşüp, üstüne analiz verilerini çok dikkatli incelemelisiniz. Kullanıcının kim olduğunu ve ne istediğini bilmeden bu inceleme işini sakın bırakmayın.


2. Kullanıcıların nasıl etkileşime gireceklerini belirleyin

İşte arayüzdeki tuşlara basarak diyebilirsiniz. İşin özünde durum gerçekten bu olsa da detaya indikçe işler biraz dallanıp budaklanıyor. Tasarlamaya başlamadan önce belirlemeniz gereken husus; insanların UI ile nasıl etkileşime gireceğidir. Dolaylı mı yoksa direkt olarak mı etkileşime geçecekler?

Doğrudan etkileşim
Bir düğmeye dokunma,

Kartı hızlıca kaydırma,

Bir öğeyi parmak ucuyla sürükleyip bırakma

Dolaylı etkileşim
Fareyle işaretleme ve tıklatma

Klavye komutlarını / kısayollarını kullanma

Bir form doldurmak

Grafik tabletinde çizim yapmak

Kullanıcılarınızı tanıdıktan sonra, kullandıkları cihazlar da hesap etmeniz gerekiyor bu adımda. Dokunmatik ekran kullanan yaşlı insanlar için bir arayüz hazırlayacaksanız hızlı animasyonlar, hızlı kaydırma hareketleri olan bir arayüz tasarlamamalısınız. Ya da klavye ve mouse kullanan yazılımcılar için tasarım yapıyorsanız, mouse ile çalışma zamanını en aza indirmek için çalışma yapmalısınız.



3- Sonuçları açıklayın

Her etkileşimin sonuçları vardır. Örneğin arayüzde bulunan bir butona dokunmak/tıklamak, alışveriş yapmak, bilgileri silmek ve bir fotoğrafa yorum olarak “burcucum choq güsel çıkmıshsın!!1” yazmak anlamına gelebilir. Kullanıcı etkileşime girdiğinde sonucunu bilmelidir. Windows’un klasik “emin misin?” sorusu buna çok güzel örnektir. Çünkü insanlara “bu dosyayı sildikten sonra geri döndüremezsin” diye açıklamada bulunur.


4- Hataları öngörün

İnsan dediğin hata yapar. Bu hatayı en aza indirgemeniz gerekiyor. Bunun iki yolu oldupunu söyleyrbiliriz. 1. Hataları olmadan önce önleme 2. Olduktan sonra sonuçları düzeltme İletişim formlarında görürsünüz tğm alanları doldurmaya yönlendirir form sizi. Böylece bilgilerinizi eksiksiz girerek size ulaşılamamasının önüne geçer. Bu, siz tüm gerekli alanları doldurmadıkça aktif olmayan gönder butonu olabilir. Bazen yazılan e-posta adresinin ya da telefon numarasının geçerli olup olmadığını kontrol etmek olabilir. Eksik bilgi girildiğinde uyarı yapılabilir. Yapmanız gerekem çoğunlukla hangi hataların yapılabileceğini kestirmektir. Bu öngörü kullanıcıların arayüzünüzle olan etkileşimini daha sağlıklı hale getirecektir.


5- Geri bildirim verin

Geri bildirimlerle yaşıyoruz. 3 boyutlu uzayda vücudumuz sürekli geri bildirimler alarak konumunu belirler, diğer eşyalara ne kadar yakınız, hızımız ne, yürürken ayağımızı ne kadar açıyoruz… Bu geri bildirimlerden alınan sonuçlarla ayak serçe parmağımızı sehpanın kenarına vurmadan yolumuza devam edebiliyoruz. (em azından genellikle) Böylesine geri bildirim dolu bir dünyada kullanıcıyı bihaber bırakmamak gerekir. O yüzden arayüzde geribildirim vermelisiniz. Sayfanın yüklenmesi sırasında yüklemeyi gösteren bir ikon. Form gönderdikten sonra bir teşekkür ya da durum bildirimi yapın.

6- Standartları görmezden gelmeyin

Tasarımcılar (ben de) standartların dışına çıkmayı, duvarları yıkmayı severler. Bu iyi bir şeydir; ama bazen Amerika’yı tekrar keşfetmeye gerek yok. Sebep? Çünkü insan beyni o kadar da çalışkan değildir. Hatta baya tembeldir. Yeni bir etkileşim yolu öğrenmektense eskisini kullanmaya meyillidir. O yüzden yeniden icat edilmiş bir tekerlek yerine, eskisinden o kadar da uzak olmayan biraz daha geliştirilmiş bir tekerlek daha iyidir. Böyle çalışan bir sistemi, bem duvarları yıkacağım diyerek yenemezsiniz. Bugün web tabanlı olarak bile çalışan office uygulamaları var. Örneğin Word ile aynı işlemi yapan binlerce program var. Fakat gelin görğn ki özellikle üst menü kısmı neredeyse hep aynıdır. Kullanıcı yeni kullandığı programda her şeyi baştan öğrenmez ve sadece programın asıl amacı olan yazma işine odaklanır.

7- Kolay olun

İnsan, kısa süreli hafızasında çok fazla şey saklayamaz. Bunu bir kenara not alın. Eğer kullanıcı arayüzünüzle ilk kez etkileşime geçiyorsa, kısa süreli hafızasını kullanacaktır. Bu yüzden arayüzü hemen öğrenmesini sağlamalısınız. İnsanların arayüzü öğrenmeye harcadıkları vakti, yapmak istediklerine harcamalarını sağlayın.


8- Seçimleri basitleştirin

Aslında bir ekonomi yaklaşımı olan (aslında satınalma yaklaşımı) Hicks yasası der ki “seçenek ne kadar çoksa, seçim süresi de o kadar çoktur.” O yüzden kullanıcının seçim süresini olabildiğince kısa tutun. Oradan buradan çıkan bannerlar, pop-up’lar, bülten abonelikleri… kullanıcının kafasını karıştırmayın.


9- Analizlere güvenin, onları dinleyin

Tasarımı sadece sanatsal bir şey olarak düşünmeyin. Özellikle UI tasarımı yaparken, işin içine etkileşim de girdiği için kullanıcıların davranışlarını es geçemezsiniz. Yalnzca çok güzel görünen bir arayüz, sadece çok güzel görünen bir arayüzdür. Bu görünüme kullanıcıyı ve davranışlarını da katmalısınız. Bir çok analiz programı bulunuyor. Bu analiz programlarını kullanmalısınız. Oradan gelecek veriler, kullanıcıların etkileşim halindeyken neler yaptığını size gösterecektir. Ve bu analizler size arayüzünüzü geliştirmede çok yardımcı olacaktır.

10- Bu dediklerimi yapın

🙂

 

0