İlk önce bu yazının tasarım konusunda ‘eğitilmiş’ bir göze sahip tasarım öğrencileri, profesyonel tasarımcılar ve onlarla beraber çalışacak mühendis, yazılımcı, proje yöneticisi ve editörler için hazırlandığını belirterek başlamak istiyorum.
Tasarım eğitimine yeni yerleşen ‘Kullanıcı Arayüzü Tasarımı’ dersleri daha önce web tasarımı üzerinden, daha sonra da mobil uygulamalar üstünden ilerlemeye başladı. Kullanıcı arayüzü tasarımı, web tasarımındaki WordPress hegemonyası yüzünden tasarımcıya daha fazla özgür alan bırakan mobil uygulamaların popülerleşmesine neden oldu. Bu yazıda başlangıçtan itibaren madde madde tasarım sürecini anlatacağım. Bazı maddelerin içerikleri ve süreçteki yerleri değişebilir. Fakat, genel olarak süreç böyle işlemekte.
-
Araştırma:
İlk önce uygulamanın fikrini iyice araştırmalısınız. Araştırma en basitinden daha önce yapılmış işleri tekrarlamamanız için önemlidir. Bulunan örnek tasarımlarından kendi tasarımınıza katacağınız tarz, kompozisyon, grid gibi temel tasarım fikirleri geliştirebilirsiniz. Tabii ki örnekleri incelemek var olan tasarımları kopyalamak için yapılmaz. Araştırma süreci kopyalamak için değil o tasarımlardaki çalışmayan unsurları iyi analiz edip geliştirmek için önemlidir. Renk kombinasyonlarını, tipografi seçimlerini, görsel dili detaylı bir şekilde incelemek tasarlayacağınız arayüze artı puan kazandıracaktır. Başarılı olduğu kadar başarısız örnekler de incelenmeli ki onlardaki tasarım hataları tekrarlanmasın. Tabii burada en önemli konu bu dediğimiz tüm aşamalara gelmeden önce uygulamanın içeriğinin hazır olması. Tasarımcı içeriği yaratmaz sadece ona görsel ve işitsel şekil/form verir. Bu yüzden içeriğin tasarım başlamadan tamamlanması gerekir ve tasarımcı o içeriği analiz ederek tasarımını ona göre hazırlar. Yarım kalmış veya tasarım sürecinde değişen içerik, tasarım aşamalarının değişmesine neden olur. Bundan dolayı tasarım araştırma süreci mobil uygulamanın içeriğine göre yapılır. Bir müzik uygulaması arayüzü tasarımı ile haber uygulaması arayüzü tasarımı aynı olamaz. Bu yüzden, içeriğin tasarım süreçlerinden önce tamamlanması önemlidir.
Örnek toplamak için kullanılabilecek siteler:
-
Akış şeması (Flowchart):
Akış Şeması, mobil uygulamanın içindeki ekranlar arasındaki geçişleri, hangi ekrandan hangi ekrana geçileceğini ve uygulama içindeki diğer navigasyonel fikirlerin tasarım süreci başlamadan önce görsel olarak düzenlenmesidir. Aslında kısaca bir içerik planlama şemasıdır ve bunun tasarım süreci boyunca belgelenmiş olması önemlidir. Böylece, hangi ekranları tasarlayacağınızı sürecin başından itibaren belirlemiş olursunuz. İçerik editörü, yazılımcı ve diğer proje çalışanları ile beraber çalışıp, uygulamanın akış şemasını çıkartmalısınız. Akış şeması, uygulamanın içinde arayüzler arasındaki geçişin, çalışma akışının ve sürecinin her bir aşamasını (arayüzünün) oklar ile birbirlerine bağlanarak görsel anlatımına denir. Mesela, bir sosyal medya uygulaması yapılıyorsa; “Giriş Yap” ekranından başka hangi arayüzlere geçiş olacağı (mesela, “Şifreni mi unuttun?” ve “Kayıt Ol” ekranları). Bu akış şeması aslında “kullanıcı uygulama içinde hangi arayüzden hangisine geçecek ve uygulama toplamda ne kadar arayüz içerecek?” sorularına cevap vermek için tasarım aşamasının başında yapılmalıdır. Akış şemasının arayüz tasarımı aşaması başlamadan iyi analiz edilip sonlandırılması hem tasarımcı hem de yazılımcının işini kolaylaştırır.
Akış Şeması için kullanılabilecek programlar:
-
Digital branding:
Mobil uygulama fikri üstüne çalışmaya ilk önce uygulamanın telefonun ana arayüzde kullanılacak logoyu tasarlayarak başlamak birçok tasarım kararını önceden alıp işi kolaylaştırmak demektir. Telefon veya tablette diğer uygulama logolarıyla yan yana duracak tasarımı renk, tipografi, çizim ve şekil olarak iyi düşünmek gerekir. Çok fazla renk ve detay içeren çizimleri kullanmak en fazla 180×180 piksel boyutunda kullanılacak ikonu okumayı zorlaştırır. Onun yerine sade birkaç şekil ile çok fazla renk içermeyen bir tasarım yapmak okumayı kolaylaştırır. Logo tasarımı uygulamanın amacına uygun bir şekil üstünde düşünülebilir. Tasarlarken şeklin özgün olması görünürlük açısından çok yarar sağlayabilir. Ayrıca, renkleri de tasarruflu kullanmakta yarar vardır. 180×180 piksel içine 3 veya 4 renkli bir tasarım yapmak okunmasını zorlaştırabilir. Bir de, logonun içine uygulamanın ismini yerleştirmek yerine sadece baş harfleri yerleştirmek bu küçük tasarım alanında daha iyi sonuç verir. Logonuzu telefonun ekran görüntüsüne diğer uygulamaların logolarıyla koyup farklı arka planlarla görünürlüğünü test etmek iyi olacaktır. Telefonların arayüzlerine konulan fotoğraflar veya çok fazla renk içeren imajlar logonuzun fark edilmesini zorlaştırır bu yüzden bu test işinize yarayacaktır. Son olarak da, logoyu hem pozitif hem de negatif olarak uygulama içinde test etmek gerekir. Logonun sadece pozitif olarak kendi renk içerikleriyle değil negatif olarak da uygulama içinde kullanılabilir olması arayüz tasarımında işinizi kolaylaştırır.
-
Wireframing:
Türkçe’ye telkafes diye çevrilmiş “Wireframe” aslında arayüz tasarımının şematik planıdır. Yani, tasarımın görsel bir iskeletidir. Genellikle elle çizilen ama günümüzde arayüz tasarımının gelişmesiyle dijital ortamda da hazırlanabilir. Wireframe, arayüzdeki görsel elemanların yerleşimini genel hatlarıyla göstermek için yapılır. Arayüzdeki kompozisyon ve elemanlar arasındaki hizalama hiyerarşi, kontrast, devamlılık, yakınlık, arka plan ve şekiller arasındaki ilişkiyi düzenlemek için ilk önce wireframe tasarlamakta yarar vardır. Butonların nerede duracağı, imgelerin pozisyonları ve büyüklükleri ile metin aralarındaki ilişkiler bu süreçte çözülür. Farklı görsel senaryoların ne şekilde gösterileceği, hangi özelliklerin nerede duracağı, bilgi ve fonksiyon arasındaki öncelik ilişkisi wireframe tasarlanırken göz önüne alınmalıdır. Bunun için arayüzde tutarlı bir grid oluşturmak en mantıklısı olacaktır. Grid oluşturmak hem tüm arayüzler arasındaki tasarım tutarlılığını sağlar hem de tasarım elemanlarını yerleştirmenizde size yardımcı olur. İlk tasarım eskizlerini siyah beyaz olarak yapmak işinizi kolaylaştırabilir. Bunun birinci nedeni tasarımınızdaki boşlukları ve elemanlar arasında ilişkiyi daha iyi görmenizi sağlamasıdır. İkinci olarak, tasarımınızdaki kontrast değerini ve fon ile elemanlar arasındaki boşlukları ayarlamanızı kolaylaştırır. Sade ve temiz tasarım her zaman kullanıcı deneyimini kolaylaştırır. Tasarımın fonksiyonellik ve estetik boyutunu sürecin başında düşünmek ve estetiği fonksiyonelliğe kurban etmemek gerekir. Bu yüzden renk kullanımını bir sonraki aşamaya taşımak yararlı olacaktır.
Uygulamanın ilk arayüzünün tasarımını yaparken uygulamanın birden çok arayüzü olacağı unutulmamalıdır. Mesela, “Kayıt Ol” arayüzü ile “Arkadaşlar” arayüzü birbirinden çok farklı olabilir. Farklı arayüzlerle başa çıkmak için tasarımda kullanacağınız görsellerin her arayüzdeki yerleşimi düşünmek gerekir. Tasarımda buna “tutarlılık” denir. Mesela, ikonların yeri, boyutu her arayüzde aynı olursa veya aynı ikonlar her arayüzde farklı yerlerde olup hiyerarşileri aynı olursa kullanıcı deneyimi artar.
Bazı Wireframe programları:
http://www.simplediagrams.com/
-
UI Kiti ve arayüz detaylarının tasarımı:
Kullanıcı arayüzü tasarlarken göz önüne alacağınız elemanlardan biri de ikon seti tasarımıdır. Seti daha önce tasarladığınız uygulamanın logosuna göre tasarlamak gerekir. Internet üstünden satın alınan ikon setleri özgün bir tasarım yapmak isteyenler için uygun olmayabilir. İkon setini tasarlarken renkleri, kenar şekilleri, çerçeveleri, çizgi kalınlıkları, leke değerleri gibi tasarım özelliklerini iyi düşünmek şarttır. Bu süreçte de tutarlı bir tasarım yapmak tüm ikonların beraber çalışmasını kolaylaştırır. Bu tasarım sürecinde tasarlanan ikonlardan bazılarını başka ikon setleri arasına koyup benzerlik ve farklılıklarına bakmak tasarımcının işini kolaylaştırabilir. Siyah beyaz olarak başladığımız tasarımı renklendirmeden önce bir renk skalası çıkarmak da öyle… Kullanımı basitleştirmek için 2-3 zıt renk ve onların 3-4 ton açık ve koyusu seçilebilir. Çok fazla kontrast kullanmak uygulamanın kullanımını zorlaştırır. Ayrıca, ana renklerden kaçıp kendi renk skalanızı oluşturmanız tasarımı diğer rakiplerinden farklılaştırıp bir kimlik oluşturmanızda yardım eder. Renk kullanımında, koyu ve açık alanlar yaratılmalıdır ki kullanıcı tasarımı kolay okuyabilsin. Ayrıca, mobil uygulama arayüzünün içindeki animasyonları uygulamanın estetik ve içeriğine göre kurgulamak gerekir. Menü, logo, ikon, buton, imaj ve diğer geliş gidişler için oryantasyon çok önemlidir.
Tutarlılık için aynı köşeden çıkan menüler veya aynı animasyon stili ile gelen fotoğraflar kullanılabilir. Böylece, kullanıcı her arayüzde ne ile karşılaşacağını anlayabilir. Üst üste veya perspektif ile gelen elemanlar arayüze üçüncü bir boyut katabilir ve böylece kullanıcı deneyimini katmanlar arasında arttırarak farklılaştırabilir. Animasyonu biraz oyun alanı olarak düşünebiliriz, burada tasarımcı arayüze fiziksel özellik katabilir. Elemanlara zıplama, sekme, hızlanma veya hızlı kaydırınca yavaşlama özellikleri verilebilir ve böylece kullanıcıyla uygulama arasında fiziksel bir bağ kurulabilir.
Görsel dilde tipografi, iletişimi sağlamak için çok önemli bir yer tutar. Hele mobile arayüz tasarımı gibi diğer bir çok görsel ve işitsel eleman ile beraber bütünlük içinde durması gereken küçük bir ekranda daha önemli bir yere sahiptir. Burada iki ana kuralı uygulamak tasarımcı için yararlı olacaktır. Birincisi, sadelik diğeri ise okunabilirlik. Mobil arayüzlerdeki fotoğraf, çizim ve grafik elemanlarının bol kullanımı tipografik alanı tasarımın nefes alabileceği yerler yapar. Figür ve arka plan ilişkisini sağlamak için yazıyı ne kadar sade (mesela, yazının fonu tek renk ve görsellere göre daha fazla kenar boşluklu) tutulursa tasarım o kadar kolay kullanılabilir olur. Yazının fonunu beyaz bırakmak ve arayüzün kenarlarına çok yaklaştırmamak satır takibini kolaylaştırır. Mobil arayüzlerde genellikle bir satırda 30-40 karakter kullanılır. Eğer görsel dilde bir harmoni yakalanmak isteniyorsa, çok flu bir fotoğraf üstüne de yazı yazılabilir ama bunu ekranda tekrar tekrar denemek gerekebilir. Kolay okunabilirlik için kullanılacak fontun her büyüklükte okunması gerekir. Butonların üstünde, başlıklarda ve ana alanda kullanıldığında okunurluğunu kaybetmeyen fontlar her zaman tasarımcının işini kolaylaştırır. Mobil arayüz tasarımlarında genellikle kullanılan fontlar: Gill Sans, Avenir, Univers, Ubuntu, Roboto, Lucida Grande, Lato, Clear Sans ve Droid Sans.
Not: Seriflerin pikselleri kırık kırık göründüğü ve bu okunurluğu azalttığı için serifli font kullanımı pek önerilmez fakat, eğer fontlar içinde bir çeşitlilik yaratılmak isteniyorsa, ana yazı değil de büyük başlıklarda serifli kullanmak bu sorunu en aza indirebilir.
Farklı renk kodlarını çevirmek için: http://serennu.com/colour/hsltorgb.php
Kendi renk skalanız ve örnek renk skalaları için:
http://www.materialui.co/colors
http://www.materialpalette.com/
-
Prototip / Kullanıcı deneyimi:
Tasarım bir süreçtir. Teknoloji, ergonomi, estetik ve kullanıcı deneyimleriyle sürekli yenilenir. Bu yüzden mobil uygulamanın arayüzünü tasarladıktan sonra bir prototipi çıkartılıp kullanıcı deneyimine tabi tutulması gerekir. Her ne kadar kullanıcı deneyimi tasarımı (UX Design) terimi son 5 yıla özgü bir terim olarak görülse de bu deneyim tasarım terimi var olduğundan beri tasarım sürecinin en doğal parçasıdır. Yani, tasarımcı “kullanıcı” için tasarlar. Bu kendisi de olabilir başkası da. Eğer, bir mobil arayüz veya başka bir tasarım kullanıcı deneyimi testlerine girmezse zaten o tasarımı “bitmiş” varsaymak mümkün değildir (Kullanıcı deneyimi tasarımı konusuna başka bir yazıda daha detaylı değineceğim).
Mobil arayüz tasarımını bitirdikten sonra kolaylıkla bulunulabilecek ve kodlama bilmeden rahatlıkla kullanılabilecek “Prototip yapma” programları ile mobil cihazlara yüklenebilecek çalışan küçük bir prototip tasarlanır (aşağıda bir kaç tanesinin bağlantıları mevcut). Bu programların amacı hangi butonun ne işe yarayacağı, genel Wireframe ve akış şemasını daha görünür ve kullanılabilir yapmaktır. Böylelikle tasarımcı, kullanıcı, yazılımcı ve müşteriye uygulama konusunda genel bir bilgi verir. Bu programlarda tasarımcılar yazılım yapmaya ihtiyaç duymadan kolayca ekranları birbirlerine bağlayarak uygulamanın bir prototipini yapabiliyorlar. Bu prototip birebir uygulama gibi çalışmasa da kullanıcı deneyimi testleri için rahatlıkla kullanılabilir. Prototip sayesinde tasarım aşamasında çalışan bir test ürünü ortaya çıkarmak süreci hem hızlandırır hem de kolaylaştırır. Bu ve benzeri prototip uygulamalar tasarım sürecinde hem zamandan hem de paradan tasarruf etmenizi sağlar. Uygulamanın prototipini deneyen kullanıcılardan gelecek geri dönüşlerle tasarım süreci devam eder. Prototip ile kullanıcıya deneteceğiniz uygulama içindeki navigasyon, etkileşim, akış şeması, UI ve farklı kullanım şekillerini inceleyip kullanıcıdan geri dönüşleri not alarak tasarımı bu geri dönüşlere göre düzelterek sonlandırabilirsiniz. Bu da, daha planlama sürecinde problemlerinizi çözmeyi sağlar.
Prototip yapılabilecek programlar:
