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.

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.

İ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.

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.

#ui

Mobil UI Tasarımı – 2 : E-Ticaret Sayfa Tipleri

By Selçuk Avcı on

7 Aralık 2018

- #ui

“Bir önceki bölümde” mobil uygulamalarda, tür farketmeksizin, bulunan ortak ekran tiplerinden bahsetmiştim. Bu bölümde ise e-ticaret mobil uygulama tasarımı yaparken size fayda sağlayacak ekran tiplerinden bahsedeceğim.

Katalog ekranı
Bir e-ticaret projesinin ilk amacı ürün satmaktır. Mümkün olabildiğince açık ve net bir şekilde bu ürünlerin de listelendiği bir sayfaya ihtiyacı vardır. Buna katalog sayfası ya da listeleme sayfası diyoruz. Katalog sayfaları için tasarımcıya düşen görev, kullanıcıların dikkatini çekip, onları ürün almaya teşvik edecek bir katalog sayfası oluşturmaktır.

Mobil uygulamalar özelinde, diğer bir çok e-ticaret uygulamasında da olduğu gibi genellikle dikey eksende kaydırarak listelenebilen bir katalog sayfası olmasında fayda var. Mobil uygulama tasarımı

Başka bir yaklaşım olarak yatay eksende listeleme yapabilirsiniz. Kullanıcı yatay eksende bir kaydırma hareketi ile diğer ürünleri görüntüleyebilir. Yatay eksenli listeleme kullanırken sezgisel bir kullanım elde edebilmek için son ürünün tamamını değil bir kısmını gösterebilirsiniz.

Ürünlerin fotoğraf ya da çizimleri elbetteki yüksek kaliteli olmalı ve kullanıcıya alacağı ürünü net bir şekilde göstermeli.

mobil uygulama tasarımı — E-commerce UI app by Cuberto

Katalog ekranında kullanıcıyı harekete geçirecek, ürünü sepete eklemesini sağlayacak bir buton da bulunmasında fayda vardır. Böyle kullanıcı beğendiği bir ürünü ya da ürünleri fazladan bir sayfayla etkileşime girmeden satın alabilirler.

Ürün detay ekranı
Bu ekran, kullanıcının ne aldığını tam olarak detayları ile öğrendiği ekrandır. Ürün detay ekranı, açık bir şekilde ürünle ilgili önemli detaylar ile birlikte sayfanın odağında bulunan ürün fotoğraf ya da çizimlerini içermelidir. Ürün görselleri ve açıklamaları ne kadar detaylıysa kullanıcının satın alma kararı vermesinde o kadar etkilidir.

Ödeme Ekranı (Checkout Screen)
Bu ekran, kullanıcının satın alma öncesindeki gördüğü son ekrandır. Bu noktada tasarımcıya düşen en büyük iş kullanıcıyı rahatlatmaktır. Bu sayfa, kullanıcının iletişim, adres, kredi kartı gibi belirli kişisel bilgilerini paylaştığı bir sayfa olduğundan bu sayfa tüm bu bilgilerin girildiği formlardan ayrı sayfanın o markaya ait olduğunu belirten, kopya sayfa olmadığını, güvenli bir sayfa olduğunu belirten bazı metinler, uyarılar varsa sertifikalar bulundurmalıdır.

#tasarım, #ui

Mobil UI Tasarımı – 1 : Temel Sayfa Tipleri

By Selçuk Avcı on

6 Aralık 2018

- #tasarım, #ui

Kabul edelim ki mobil cihazlar (genelde telefonlar) hayatımızı bir şekilde ele geçirdi. Her an elimizde bir dikdörtgenle yaşıyoruz. Gerek sosyalleşmek, gerek normal hayatımızda, gerekse de iş hayatımızı kolaylaştıran, destekleyen birbirinin alternatifi tonla uygulama mevcut. Aslında mobil UI tasarımı tek başına incelenmesi gereken bir konu sayılabilir. İşte bu noktada bir tasarımcıya düşen görev kullanıcıların ihtiyaçlarını karşılarken aynı zamanda keyifli, kolay ve tatmin bir deneyim sağlayan bir arayüz oluşturmaktır. Bu sebepten tasarımcılar mobil uygulama evreni hakkında olabildiğince bilgi sahibi olmalı, bileşenlerini ve işlevselliğini bilmelidir. İyice gelişen kod sistemleri ile artık standartlaşmış ekranları bir görüşte ayırt etmek zorlaştı. Mobil UI tasarımı hala daha eski anlayıştan izler taşıyorlar elbette; ama artık sadece işlevselliğin yanında görsellik, kolaylık gibi başka etkenlerin de kullanım tercihini etkilemesi sebebiyle epeyce bir farklılaşma söz konusu. Bu yazımda en yaygın mobil uygulama sayfalarından ve mobil UI tasarımı içerisindeki özelliklerinden bahsedeceğim.

Ortak Sayfalar

Splash Screen (Yükleme / Açılış Ekranı) Daha önce “Muhteşem Bir İlk İntiba Yaratmak” yazımda da bahsettiğim gibi ilk intiba kullanıcının bir mobil uygulama ile ilgili fikrini epeyce etkileyen önemli bir noktadır. Bir splash screen’in en az uygulama kadar ilgi görmesi gerekir. Kullanıcının deneyimin başladığı nokta olan splash screenden de memnun kalması önemlidir. Mobil UI tasarımı yaparken bunu asla ve asla unutmayın. Splash screen, genelde minimalist bir anlayışla tasarlanır. Ürünün ismini, logosunu ya da sloganı içerir. Farklı cihazlarda benzer sonuçları elde edebilmek için odak noktası olarak ekranın ortası tercih edilir. Splash Screen by Samuel Medvedowsky Splash screenler özünde birer ‘oyalayıcı’ oldukları için dikkate alınması gerekli bir iki nokta var. Splash screenden asıl uygulama elranına geçme süresi mümkün olduğunca kısa olmalıdır. Bu süre 8-10 saniyeyi geçmemelidir. Aksi halde kullanıcı sıkılmaya başlar. Kullanıcı o uygulamayı splash screenle vakit geçirmek için seçmedi. Aynı zamanda çok da kısa olmamalıdır. Yarım yamalak görüneceğine, hiç görünmesin daha iyi. O yüzden splash screen 5-8 saniye arasında gözükmelidir. Ayrıca kullanıcının splash screendeki ilerlemeyi görebilmesi de iyi olacaktır. İlerlemeyi, yükleme çubuğu ya da yüzdelik ilerleme şeklinde göstermenizde fayda var. Onboard Tutorial Screen (Uygulama içi öğretici ekranı) Öğretici ekranları uygulamanın genelini, navigasyon sistemini, kısa yolları vesaireleri kullanıcıya gösteren ekranlardır. Uygulamayı ilk kez kullananlar için özellikle etkili sayfalardır. Onboarding Animation Öğretici ekranlarının belirli bir standardı olması mümkün değildir. Tamamen o uygulamaya hastır; fakat yine de genel bir tarz yerleşmiştir. Genellikle çizimlerden oluşur ve kullanımı kolay yoldan öğretmeye yöneliktirler. Yine azımsanmayacak oranda da kullanıcının öğreticiyle daha rahat bağ kurmasını sağlayacak maskotlar da kullanılmaktadır. Ana Ekran Ana ekran herhangi bir uygulamanın en önemli bileşenidir. Mobil uygulamalar özelinde bakarsak kullanıcılar çoğu işlemi ana ekran üzerinden gerçekleştirir. Ana ekran da mobil uygulama özelinde, amaca bağlı olarak tasarlanır; fakat yine de bazı ortak bileşenler içerir. Arama çubuğu ya da arama butonu, diğer içeriklere ulaşılmasını sağlayan bağlantılar ana ekranların ortak özellikleridir. Menü Ekranı Etkileşimi kolaylaştırmak için, kullanıcıyı tek dokunmayla istediği yere götüren navigasyon bileşenidir. Ana ekranın bir parçası ya da ayrı bir menü ekranı şeklinde iki farklı yöntemle uygulamaya yerleştirilir. Mobil uygulama özelinde olmasa da kullanıcı etkileşimini kolaylaştırmak adına 7 veya daha az element barındırması tavsiye ediliyor. Daha fazla menü bileşeni gerekiyorsa kategorize etmek iyi bir fikir olabilir.

Giriş ve profil ekranları Mobil uygulamaların çoğu kullanıcılara kişisel hesap oluşturma imkanı tanıyor. Bu yüzden bir tasarımcı giriş ve profil ekranlarını iyi bilmelidir. Giriş ekranları, kullanıcının uygulamaya giriş yapmasını mümkün olduğunca kolaylaştırmalıdır. Kullanıcı adı ve şifresini girebileceği iki form kutusu ve onay butonuyla birlikte kayıt olma seçeneği mutlaka bulunmalıdır. Profil ekranı Kullanıcıların kişisel verilerini görebildiği ya da sosyal paylaşım temelli bir uygulama ise yaptığı paylaşımlara ayrıca hesap ayarlarını, gizlilik durumu gibi seçeneklere ulaşabildiği ekrandır. Bir nevi uygulama ve kullanıcı arasındaki kişisel alandır. Dikkat edilmesi gereken en önemli noktalardan biri profil sayfası içerisindeki bilgilerin sınırlandırılmasıdır. Sınırlandırma yapılmazsa karmakarışık bir profil ekranıyla karşılaşacaktır kullanıcı. Bu sayfa mümkün olabildiğinde minimalist bir anlayışa sahip olmalıdır. İstatistik ekranı Bazı mobil uygulamalar kullanıcı etkinlikleri ile ilgili istatistikler bulundurur. Uygulama ne kadar çok veriye sahipse, istatistik ekranının tasarımı o derece zorlaşır. İstatistiklerin kullanıcı tarafından tam olarak anlaşıldığından emin olunmalıdır. Kullanıcıya, verileri açık ve kolay bir şekilde verebilmelidir. Bunu farklı şemalarla, eğriler ve tipografiler kullanarak sağlayabilirsiniz.

Takvim Etkinlik ya da yapılacaklar listesi gibi uygulamalar başta olmak üzere başka bir çok uygulama kullanıcıya kişisel bir takvim sunar. Uygulama türüne göre göre takvimin işlevi değişse de görünüş olarak uygulamanın geneline uygun olmalıdır. Temel sayfa tiplerini tanıdık, bir sonraki bölümde spesifik uygulamalar için ortak sayfaları inceleyeceğim.

#ui, #ux

Web Tasarım Sözlüğü: Navigasyon Bileşenleri

By Selçuk Avcı on

29 Kasım 2018

- #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.

#ui, #ux

Web Tasarım Sözlüğü – 2

By Selçuk Avcı on

2 Ekim 2018

- #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.

–

#ui, #ux

Web Tasarım Sözlüğü – 1

By Selçuk Avcı on

28 Eylül 2018

- #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.

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.

–

#ui, #ux

Yeni Başlayanlar İçin Dev Rehber: Web Sitesi Türleri

By Selçuk Avcı on

26 Eylül 2018

- #ui, #ux

Bir web tasarım projesine başlamadan önce, tasarım yaptığınız ürünün amacını ve hedef kitlesini tanımlamak hayati önem taşır. Öyle ki tasarımını yaptığınız web sitesi neredeyse 2 milyondan fazla web sitesinin bulunduğu bir ağda yayına girecek ve aralarında farkedilmesi gerek.

Başlamadan önce şu basit soruları cevaplamanız yararınıza olur:

web sitesini kim kullanacak? (hayır. Cevap herkes değil)
– neden kullanacaklar?
– hangi problemi çözmeye yarayacak?
– onları ne tekrar geri getirir? (gelmeleri gerekiyor mu?)
– bu web sitesini özel yapan şey ne?

Bu ve benzeri soruların cevapları web sitesinin türünü belirleyecektir. Bu soruları sormak neden önemli derseniz; kullanıcıların web sitenizden neler bekleyeceğini ve onlara neyi, nasıl vereceğinizi daha iyi anlayacaksınız.

Bu yazımda genel itibariyle web sitesi türleri ile bilgiler vereceğim.

Farklı web sitesi türleri nelerdir?

Temelden girelim. Bir web sitesi kullanıcısına metin, video, ses, görsel vs. de dahil olmak üzere çeşitli içerikler sunan web sayfalarından oluşan, bir alan adına sahip olan ve bir web sunucusunda yayınlanan bir koleksiyondur.

Web sitelerini sınıflandırmaya tabi tutacaksak herkesin söyleyeceği bir şeyler vardır. Kimisi teknik konulardan ayırır, kimisi kullanıcı kitlesine göre… Bir sürü farklı sınıflandırma yapabiliriz.

Ben bu yazıda işleve, içeriğe ve tasarıma göre sınıflandıracağım.

İçeriğe göre;

Düzen ve içerik olarak varolan tüm web siteleri iki ana gruba ayırabiliriz; statik ve dinamik siteler.

Statik web siteleri; en temel web siteleridir. Çoğu zaman içeriği değişmez ve kullanıcılar da içerik değişikliğine katkıda bulunmazlar. Adı üstünde statik yani sabit web sitelerdir. Kullanıcı etkileşiminden ziyade belirli bir konu, kişi ya da şirket ile ilgili bilgi verme amacıyla yapılırlar.

Dinamik web siteleri; içeriği düzenli olarak güncellenen sitelerdir. Dinamik web sitelerinde güncellemeler çok fazla şeye göre değişir. Örneğin bir e-ticaret sitesi düşünün. Bu siteye her girişinizde başka şeyler görürsünüz. Hatta arama/satın alma geçmişinize göre, yaşınıza, mevsime ve daha bir sürü etkene göre içerik değişime uğrar. Ya da kullanıcı direkt olarak içeriğe katkı sağlayabilir, değiştirebilir hatta bazı durumlarda içeriği kaldırabilir. Bu durumda web sitesi tüm bunlara uyum sağlayabilmelidir.

Amaç ve işleve göre;

Kişisel web sitesi, kişiyi bir amaçla tanıtan web siteleridir. Bu bir yazar olabilir, tasarımcının portföy sitesi ya da yazılımcı blogu olabilir.

Kurumsal web siteleri, şirketi tanıtmayı amaçlayan web siteleridir. Şirketin verdiği hizmetle, ürünle ilgili bilgileri, iletişim, kurum kültürü, çalışanlar, çalışma saatleri gibi şirket ile ilgili bilinmesi gerekenleri içerir.

E-ticaret web siteleri, ana amaçları ürün satmak olan sitelerdir. Kullanıcılar fiziksel bir mağazaya gitmesine gerek kalmadan ürünlerle ilgili görsellere, yorumlara ulaşabilir ve onları satın alabilir.

Stok siteler, kullanıcıların müzik, fotoğraf, grafik gibi çeşitli içerikleri paylaşmalarına ya da içeriği ücretli ya da ücretsiz şekilde kullanabilecekleri sitelerdir.

Eğitim web siteleri, bilgilendirici içerikler barındıran sitelerdir. Ansiklopedi, kütühanr, çevrimiçi dersler, müzeler, galeriler gibi.

Katalog siteleri, temel olarak belirli bir alan ya da konu ile ilgili düzenlenmiş verilerin listelendiği web siteleridir. Örneğin İstanbul’da grafik tasarım dersi veren okulların listelendiği bir web sitesi.

Video akış siteleri, çevrimiçi TV yayını ya da streaming platformları gibi tamamen videodan oluşan web siteleridir.

Kitlesel fonlama web siteleri, bir yardım ya da yatırım amacıyla para toplamayı hedefleyen web siteleridir.

Sosyal web siteleri, insanların fikir alışverişinde bulunabilecekleri, paylaşım yapabilecekleri bir platform amacına sahip sitelerdir. Sosyal web sitelerinin içeriği genellikle kullanıcılar tarafından oluşturulur.

Haber siteleri, bir tür çevrimiçi dergi veya gazetedir. Amaçları, kullanıcıları en son haberler ve olaylar hakkında bilgilendirmektir.

Uyumluluğa göre;

Artık insanlar mümkün olduğunca cep telefonu ya da tablet kullanıyorlar. Hal böyle olunca web siteleri de bu mobil dönüşüme uymak zorunda.

Statik web sitesi, cihaz ne olursa olsun sadece tasarlandığı şekliyle görüntülenir ve kendini optimize etmez. Bir akıllı telefonda statik bir masaüstü web sitesi açtığınızda içeriği düzgünce görüntüleyebilme şansınız oldukça azdır. Aramaların %50den fazlasının mobil cihazlardan yapıldığını düşünürsek statik bir web sitesi sahibi olmak mantıklı değil.

Akışkan (fluid) web sitesi, görüntülendiği aygıta bakmaksızın yalnızca ekran boyutuna göre elementlerin sayfa içerisinde hareket etmeleriyle oluşan web siteleridir. Site içerisindeki elementler her cihazda aynı oranda yer kaplamaya devam ederler.

Responsive web siteleri, tamamen uyum sağlamak ve hatta şekil almak üzerine kuruludur. Çeşitli cihazlarsa çeşitli haller alabilirler. Responsive bir web sitesi, akıllı telefon ve masaüstü tarayıcısında aynı görünmeyebilirler; fakat içerikleri tamamen aynı ve tektir. Cihazlara özel uyum sağlaması, etkileşimi her platform için daha kullanışlı hale getirir. Responsive için en kullanıcı dostu yöntem diyebiliriz.

Sonuç:

Web sitesi türleri hakkında genel bilgiler vermeye çalıştık. Genel hatlarıyla bildiğiniz bu web sitesi türleri, size, tasarım projenizde göz önünde bulundurmanız gereken noktalar konusunda bir yol haritası çizecektir. (En azından kroki olarak) İlerleyen zamanda bu türlerle ilgili daha detaylı yazılar yazacağım.

–

#ui

UI Tasarımında Işık ve Karanlık: Renk Şeması Seçimi

By Selçuk Avcı on

22 Ağustos 2018

- #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.

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.

–

#ui

Button Tasarımı ve Kullanımı

By Selçuk Avcı on

14 Ağustos 2018

- #ui

Button Tasarımı ve Kullanımı

Button (düğme de dersek bir sıkıntı olmaz aslında, hatta bundan sonra düğme olarak anılacaktır.) etkileşim ve arayüz tasarımının en sıradan öğesidir. Bakıldığında “amaaan düğme en nihayetinde” gibi bir algı oluştursa da kullanıcı etkileşiminin en önemli bileşenidir. Bu yazımızda düğmelerden bahsedeceğim.

Düğme Çeşitleri

Grafik arayüzler ilk ortaya çıktıklarından bugüne düğmeler bir çok farklı tarzda karşımıza çıktı. Tüm bu tarzların en büyük amacı, bu görünen şeyin tıklanabilir olduğu ve kullanıcının bu düğmeye tıklayarak etkileşime girebileceğini farkettirmek. Aslında tarz ne olursa olsun bir düğmenin doğadaki en büyük amacı kendine tıklattırmak.

3 Boyutlu Düğmeler

Grafik arayüzlerin ilk günlerinden beri varlığını sürdüren bir düğme türü. Özellikle Windows 95 ve 98 arayüzlerinden hatırlayacağınız düğmedir. Bu düğmenin tasarımı çok basit bir algı yönetimine dayanıyordu. Arkaplandan ayırmak için kenarları çiz, bir tarafı koyu diğer tarafı açık renk ve degrade geçişli yap! Böylece ben buradayım diyen ve 3 boyutlu görünen bir düğmen olsun.

Skemorfik Düğme

Skemorfik tasarım dediğimiz şey gerçek hayatta olan nesnelerin dijital tasarımlarda da benzer şekilde kullanılması. iBooks kitaplığının gerçekten de bir ahşap kitaplıkmış gibi görünecek şekilde tasarlanması bunun en iyi örneğidir. Zaten Jobs’a göre dijital tasarımlarda gerçek hayattakilere benzer nesneler kullanılırsa en acemi insan bile iç güdüsel olarak o makineyi kullanabilecektir. Bu tarz düğmeler, gerçekten de varolan o cihazdaki düğmeler gibi tasarlanır.

Flat Düğme

Arayüz tasarımını tamamen değiştiren şey aslında bu düz düğme tasarımıdır. 3. boyuttan, skemorfizmden sıyrılıp kendi varlığını oluşturmuştur. Düz tasarım anlayışıyla artık fiziksel ortam yani gerçek hayatın görünümünü taklit etmeye, ona benzemeye çalışmayıp kendi dijital varlığını ortaya koymuştur. Sonuç olarak, geleneksel olarak tıklanabilirliği / taranabilirliği kullanıcılara iletmek için kullanılan ağır görsel ipuçlarını bir kenara atmıştır. Düz tasarım anlayışı artık neredeyse her yerde karşımıza çıkar. Hatta ve hatta yine skemorfik bir anlayışla fiziksel düğmeler de düz tasarıma benzemeye başlamış durumda bile diyebiliriz. Tüm dünya bir düz tasarım anlayışına doğru adım adım ilerliyor.

E her şeyin düz olduğu bir dünyada, düğmeler nasıl farkedilecek? Bu sorunun cevabı çok kısa; renk! Düz tasarımda renk özellikle önemlidir, çünkü düz düğmeler kullandığınızda, bu renkler kullanıcının bunları tanımasına yardımcı olan ana tanımlayıcılardan biri olacaktır.

Neredeyse Düz Tasarım ve Süzülen (Floating) Etkileşim Düğmeleri

Aslında bir yönüyle düz tasarımdır. Hatta düğme özğnde düz bir tasarıma sahip olsa da bazı görsel ayırıcılarla arayüze derinlik/katman eklemek amaçlanır. Gölgelendirme, katmanlı işlev ve ışık hareketleri kullanılarak yapılır büyük çoğunlukla. Google’nin en son tasarım dili olan Materyal Tasarım’la ortaya çıktığını söyleyebiliriz. Fakat süzülen düğmeler kesinlikle materyal tasarımın bir hediyesi bize. Ana veya öne çıkarılan etkileşim için tüm grafik arayüzden bağımsız ve en önde duran bu düğmeler, siz tüm arayüzle etkileşime girseniz dahi (kaydırma, büyütme/küçültme gibi) o olduğu yerde kalır. Google Haritalar, süzülen etkileşim düğmesi için harikulade bir örnektir.

Hayalet Düğme

2013-14 yıllarında fırtına gibi esen bu düğme hala varlığını sürdürse de eskisi kadar mode değil diyebiliriz. Dikdörtgen ya da kare biçimlidirler. İnce bir çizgiyle sınırları belirlenmiştir ve içinde sadece düz metin bulunur. Hayalet düğme de yeni nesil düz tasarım anlayışıyla ortaya çıkmıştı; ama özellikle moda olması iOS 7’nin yayınlanmasıyla oldu. Apple’ın yeniden tasarlanmış arayüzünde kullandığı düğmelerin çoğu hayalet düğmeydi.

Düğmeler için Bazı İpuçları

Düğmeler ile ilgili tarihsel ve tarz bilgileri de aldığımıza göre geldik şimdi asıl meseleye; düğme tasarlamak. Arayüzlerinizde düğmeleri tıklanabilir yapabilmek için (yani kullanıcının bunun bir düğme olduğunu farketmesi gerekiyor) bazı önemli noktaları atlamamanız gerekiyor.
1- Düğmeler, düğme gibi görünmeli. (Şekil)
2- Kullanıcının etkileşim kolaylığı. (Dolgu ve Boyut)
3- Düğmenin işlevi. (Etiketleme)
4- Kullanıcıyı tetiklemek için renk farkı. (Renk)
5- Düğmeler arasındaki benzerlik. (Tutarlılık)
Bu dört temel unsuru atlamadığınız zaman arayüzünüz için harika bir düğme tasarımı yapabilirsiniz.

Şekil

Düğmelerinizi dörtgen ya da köşeleri yuvarlatılmış dörtgen yapın. Uzunca bir süredir, dijital düğmeler dörtgen formunda yapılıyor, haliyle kullanıcı bir düğme aradığında onun bir dörtgen formunda olacağını düşünür. Arayüzünüzün genel sitiliyle uyumlu bir dörtgen düğme tasarlamanız kullanıcının işini kolaylaştıracaktır. Tabi gidip üçgen, farklı şekillerden de düğme yapabilirsiniz. Yapmamanız için önünüzde bir engel yok; fakat az önce dediğim gibi; kullanıcı dörtgen formunda bir şey arıyor tıklamak için!

Dolgu ve Boyut

Bir düğmenin boyutu kullanıcının farketmesi açısından en önemli etkenlerdendir. Düğmenizin boyutu ne küçük ne de çok büyük olmalıdır. Ayrıca diğer tıklanabilir elementlerle (link, metin kutusu, seçim kutusu, diğer düğmeler) aralarında bir dolgu alanı bırakmalısınız. Bu dolgu alanı dediğimiz şey ingilizce’de padding olarak geçiyor. Düğmenin etrafında bir dolgu alanı var ve o dolgu alanı diğer elementlerin yaklaşmasına izin vermiyor gibi düşünebilirsiniz. E peki hangi boyutta olmalı dediğinizi duyar gibiyim, o konuda da MIT Touch Lab’in yaptığı araştırmayı kılavuz alabilirsiniz kendinize. Bu araştırmada ortalama parmak ucu dokunma alanı 8-14 mm arasında olduğunu söyleniyor. Yani kendinize düğme için 10x10mm’lik minimum limit belirleyebilirsiniz.

Etiketleme

Düğmeler için bulabileceğiniz en net etiketi seçmelisiniz. Kullanıcı “acaba bu düğmeye basınca/tıklayınca/dokununca” ne olacak diye düşünmemeli. Aşağıdaki örnekte gördüğünüz gibi bir uyarı ekranında bulunan düğmedeki gibi bir etiketleme yaparsanız kullanıcıda bir bilinmezlik yaratmanız işten bile değil. Bu uyarı ekranı az önce fotoğraf silmek istediğini “çöp kutusu ikonlu” düğmeye basarak belirten bir kullanıcının karşılaştığı uyarı. Kullanıcının bu uyarıyı gördüğünde muhtemel tepkisi; “OLUR derken?”

Renk

Diğer içeriklerden faklı renkte olan bir düğme hemen kendini belli edecektir. Ama yalnızca renk farkı yaratarak geçiştiremezsiniz bu konuyu. Rengi farklı olduğu için düğmeye dokunan kullanıcı, bu etkileşiminden bir geri bildirim almak ister. Kullanıcının düğmeyle etkileşime girdiğini belli etmek için etkileşim sonrasında boyut, kontrast hatta belki animasyon gibi bir geri bildiriciye ihtiyacınız var.

Sonuç!

Düğmeler, bulundukları arayüzde kendilerine dokunulması için varlar. Kullanıcının etkileşimde bulunmasına yardımcı olmanız gerekiyor. Asıl amacınız olan “kullanıcıyı etkileşimin içine çekmek” işlevini total olarak düşünürken düğmelerin önemini atlamayın. Düğmelere gereken önemi gösterin.

#tasarım, #ui

UI Tasarımında Tipografi – Bölüm 1

By Selçuk Avcı on

6 Haziran 2018

- #tasarım, #ui

UI Tasarımında Tipografi

Tipografinin, UI tasarımında zor kısımlardan biri olduğunu söylemek yanlış olmaz. Tipografi çok uzun süredir hayatımızda varolan bir şey, bu yüzden çok fazla varyasyon, çok fazla uygulama çeşidi ve çok fazla kural var. Bu yazıda, uzun uzun teorik bilgiler vermektense, daha pratiğe yönelik bilgiler ve projelerinizde kullanabileceğiniz birkaç ipucu vereceğim.

Kullanıcıyı Unutmuyoruz

UI tasarımında daha önce de skça belirttiğim gibi en önemli şey kullanıcı. O yüzden UI namına bir proje yapıyorsanız her zamanki gibi burada da kullanıcıyı unutmamalısınız. Özellikle tipografi gibi çözünürlükle yakından ilişkili bir konuda, kullanıcıları göz ardı etmek ölümcül bir hatadır. Unutmayın ki dünya üzerinde sadece çok iyi monitörler, çok iyi mobil cihazlar yok. Herkes en son teknoloji ürünü cihazlar kullanarak, arayüzünüzle minimum 2K çözünürlükte etkileşime girmiyorlar. Hal böyle olunca arayüzünüzü yalnızca retina ekranlarda mükemmel görünecek şekilde yaparsanız, diğer ekranlarda projeniz amiyane tabirle patlayacaktır. O sebepten seçeceğiniz yazı tipleri olabildiğince esnek olmalılar. Fazlaca ağırlık (font weight), özel karakterler içeren bir font kullanmalısınız ve bunu yaparken de çok geniş bir cihaz perspektifinde görüntüleneceğini unutmamalısınız.

İyi bir tipografi “görünmez”dir; ama kötü yapılmış bir tipografi “ben buradayım!!!” diye bağırır. Halka’daki kız gibi ekrandan çıkıp, kullanıcının gözüne gözüne girer.

Okunabilirlik

Tipografide, haliyle, en önemli şey budur. Okunabilirlik, yazı tipindeki her bir harfin, diğer harflerden ne kadar kolay ayırt edilebilmesi ile ölçülebilir. Düşününce tüm yazı tipleri okunabilirliği yüksek olsun diye yapılmıştır sanılsa da aslında öyle bir durum da söz konusu değildir. İnternet, okuması dünyanın en zor yazı tipleri ile dolu. Hatta bazen sırf kolay okunamasın diye oluşturulmuş yazı tipleri bile var. Örnek vermek gerekirse “büyük I” ve “küçük l” harfleri, her ekran boyutunda ve font büyüklüğünde dahi birbirlerine karışmıyorsa o yazı tipi okunabilirliği yüksek bir yazı tipidir.

Büyük Harf Yüksekliği

Okuduğumuz metinlerde harflerin çok çok büyük bir kısmı küçük harflerden oluşuyor. Gel gelelim yalnızca küçük harfler de kullanmıyoruz. Büyük harf kullanımlarından sonra gelen küçük harfler yazı tipinin okunabilirliğini doğrudan etkiler.

Yukarıdaki görselde görüldüğü üzere büyük ve küçük harfler arasındaki yükseklik oranı fazla olan versiyonda okunurluk daha iyi.

Harf içi boşluklar

“o”, “u”, “d”, “b” gibi bazı harflerin içinde boşluklar vardır. Bu boşluklar özellikle çözünürlüğü düşük olan cihazlarda yanlış görünebilir. Aslında “u” yazıyor; fakat ekran çözünürlüğünün kötü olması “o” olarak algılamamıza sebep olabilir. Harf içi boşlukları fazla olan yazı tipi kullanmanız daha iyi olacaktır.

Ağırlık

Ağırlığı (font-weight ya da amiyane tabirle et kalınlığı) düşük olan yazı tipleri, kalın olanlara nazaran daha iyi görünürlük sağlarlar. Özellikle harf içi boşlukları fazladır.

Bu bölümü burada bitiriyorum; ama tipografiyle ilgili söyleyeceklerim henüz bitmedi. Devam edecek!

–

#ui, #ux

UI Tasarımında Minimalizmin Gücü!

Minimalizmin karakteristik özellikleri

Minimal UI Tasarımı

Flat design

Monochrome ve sınırlı renk paleti

İyi bir tipografi

Seçim sınırlaması

Çabuk ve sezgisel gezinme

Negatif alanlar

Kontrast

#ui

Mobil UI Tasarımı – 2 : E-Ticaret Sayfa Tipleri

#tasarım, #ui

Mobil UI Tasarımı – 1 : Temel Sayfa Tipleri

Ortak Sayfalar

#ui, #ux

Web Tasarım Sözlüğü: Navigasyon Bileşenleri

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

Menü

Bar (Çubuk)

Tab Bar (Sekme Çubuğu)

Loading Bar (yükleme çubuğu)

Progress Bar (İlerleme çubuğu)

Button (Düğme)

Switch (anahtar, şalter)

Picker (seçici)

Checkbox (tik!)

#ui, #ux

Web Tasarım Sözlüğü – 2

Web Tasarım

Anasayfa

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

Responsive (Duyarlı) Tasarım

Header

Footer

#ui, #ux

Web Tasarım Sözlüğü – 1

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

UX – User Experience (Kullanıcı deneyimi)

UX wireframing

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

Prototip

#ui, #ux

Yeni Başlayanlar İçin Dev Rehber: Web Sitesi Türleri

Farklı web sitesi türleri nelerdir?

Amaç ve işleve göre;

Uyumluluğa göre;

#ui

UI Tasarımında Işık ve Karanlık: Renk Şeması Seçimi

Seçim yapmak ve bu seçimin etkileri

Hedef kitleyi iyi analiz edin

Rakip analizi

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

#ui

Button Tasarımı ve Kullanımı

Button Tasarımı ve Kullanımı

Düğme Çeşitleri

3 Boyutlu Düğmeler

Skemorfik Düğme

Flat Düğme

Neredeyse Düz Tasarım ve Süzülen (Floating) Etkileşim Düğmeleri

Hayalet Düğme

Düğmeler için Bazı İpuçları

Şekil

Dolgu ve Boyut

Etiketleme

Renk

Sonuç!

#tasarım, #ui

UI Tasarımında Tipografi – Bölüm 1

UI Tasarımında Tipografi

Kullanıcıyı Unutmuyoruz

Okunabilirlik

Büyük Harf Yüksekliği

Harf içi boşluklar

Ağırlık