Gerçeklenebilir tasarımlar üretmek

Kullanıcı deneyimi ve arayüz tasarımının gün geçtikçe popülerleştiği bir dönemde, bu kavramların iş dünyasında nasıl çalıştığı üzerine bir şeyler karalamanın önemli olduğunu düşünüyorum. Behance ve Dribbble gibi platformlar her ne kadar “güzel” arayüzler sunsa da aslında iş dünyasında arayüz tasarımı kavramı çok daha farklı konumlanıyor. Maliyet, kazanç, kodlanabilirlik, sürdürülebilirlik, marka kimliği gibi pek çok kavram da tasarım sürecinin içerisine dahil oluyor.

Her şeyden önce şunu söylemeliyim, bahsettiğim kavramlarla tanışmak beni başlarda çok zorladı. “Nasıl yani mor kullanamayacak mıyım?“, “Şuralara biraz ışıltı eklesem?”, “Radiusları artırsam?”, “Şuradaki şekiller biraz dönse?” gibi soru veya isteklerim havada kaldı. Geriye dönüp bakınca tasarım oluşturmaya çalışırken böyle istekler ile yola çıkmamın aslında ne kadar doğal olduğunu gördüm çünkü sadece onları görebiliyor ve gözlemleyebiliyordum.

Bireysel veya küçük ölçekli bir ekiple çalışıyor ve tek başınıza birden fazla görevi yerine getiriyor olabilirsiniz. Ancak burada önemli olanın sürecin sağlıklı yürümesi ve doğru probleme doğru çözümler getirebilmek için takip ettiğimiz adımlar olduğunu düşünüyorum.

Nasıl başlıyoruz?

Büyük ekiplerde iş dağılımı ve belirli bir alanda profesyonelleşme çok daha önemli bir hal alıyor. İşlerin daha doğru yönetimi için “UX & UI Designer” gibi sınırları kısmen belirsiz bir rol tanımımız bulunmuyor. Farklı ihtiyaçlar için alanında profesyonel ekip arkadaşlarımızla birlikte çalışıyoruz.

Ufak bir örnek vermek gerekirse; kullanıcı deneyimi tasarımcısı olan arkadaşlarımız kullanıcı deneyimi yazımı ya da kullanıcı deneyimi araştırması gibi alanları da yönetmiyor, bunun yerine ekibimizde araştırmacı ve yazar arkadaşlarımız bulunuyor.

Ekip yapımızdan ufacık bahsettikten sonra konumuza geri dönüyorum. Bir proje, ekibimize geldiğinde ilk olarak projeyi anlamamız ve kullanıcılarının gerçekten neye ihtiyacı olduğunu doğru analiz etmemiz gerekiyor. Bu süreç bizi tasarım ekibi olarak beklenenden çok daha farklı noktalara sürükleyebiliyor. Örneğin bazen talep edilen değişiklikler ya da geliştirmeler kullanıcıların gerçek ihtiyaçlarını birebir karşılamıyor.

Tasarım süreci çok katmanlı olduğundan yazı boyunca ekip arkadaşlarımdan destek aldım. Bu noktada sahneyi ekibimizin kullanıcı deneyimi araştırmacılarından Ecem’e bırakmam araştırma aşaması hakkında size çok daha doğru fikir verecektir:

“Başlangıç süreci bizim için titizlikle ele almamız gereken planlamalardan oluşuyor. İlk adımımızı projenin genel hedeflerini belirleyerek, kullanıcı ihtiyaçlarını ve beklentilerini anlamak amacıyla derinlemesine bir analiz yaparak atıyoruz. Aynı zamanda; oluşturacağımız tasarımın çözmesi gereken spesifik sorunları tanımlayıp, bu sorunlara odaklanmış bir araştırma stratejisi geliştirmeye başlıyoruz. Projeyi çevreleyen bağlamı anladığımızda araştırma süreci daha etkili ve elde edilen veriler daha anlamlı oluyor.

Proje boyunca kullanıcılarla sürekli olarak etkileşimde kalarak tasarım sürecine katkıda bulunuyoruz. Gözlem, mülakatlar, anketler, derinlemesine kullanıcı görüşmeleri ve kullanılabilirlik testleri gibi çeşitli araştırma yöntemleri kullanarak üzerine bir aksiyon almaya dair öneri veya rehberlik edebilecek içgörüler elde etmeye çalışıyoruz.

Projenin amacına göre kullanacağımız yönteme karar vermek, kullanıcı örneklemi oluştururken çeşitlilikle birlikte temsiliyete dikkat etmek ve elde edilen verilerin genelleştirilebilir olmasını sağlamak da oldukça önemli noktalar. Doğru bir yöntem ve örneklem seçimi tasarım kararlarının geniş bir kullanıcı kitlesini gerçeğe yakın bir şekilde kapsamasına ve kullanıcı deneyimini en üst seviyeye taşımamıza katkı sağlıyor.

Araştırmacılar olarak en büyük hedefimiz; tasarımlara sadece estetik ve ticari kaygılarla yaklaşılmamasını sağlarken, aynı zamanda kullanıcılarımızın gerçek ihtiyaçlarına cevap verebilmek ve onlara tatmin edici bir deneyim yaşatmak.

Araştırma sürecimizin sonuna geldiğimizde; elde ettiğimiz verileri detaylı bir analizle değerlendiriyor ve bulgu raporu oluşturuyoruz. Bu rapor; projenin kritik noktalarını, kullanıcı beklentilerini ve taleplerini belirleyip, tasarımın güçlü ve zayıf yönlerini görünür kılıyor. Analiz sonuçları, ekibimize atacağımız adımlar için stratejik rehberlik sağlıyor ve süreç boyunca odağımızın kullanıcıda kalmasına yardımcı oluyor.”

Dikkat ettiyseniz süreç daha en başından yaklaşımlar açısından oldukça farklılaşmaya başladı. Heyecan verici kısmının aslında bu farklılık olduğunu söylemeliyim. Kendinizi bir yandan kullanıcının ihtiyaçlarına çözüm üretirken bir yandan da estetik bir arayüz tasarlamaya çalışırken buluyorsunuz. Mücadele diye buna derim 🙂.

Fikirler somutlaşıyor

Henüz hiçbir tasarımın çalışılmadığı bir aşama olan araştırma aşaması aslında proje boyunca tasarlanacak tüm ekranları etkiliyor. Neyse ki kullanıcı beklenti ve taleplerini tam olarak anladıysak, artık wireframe oluşturmaya oldukça yakınız.

Araştırmacı arkadaşlarımızdan gelen analizler doğrultusunda ekibimiz projeye daha fazla dahiliyet göstermeye başlıyor. Kullanıcının uygulama içerisinde doğru ve rahat gezinebilmesi için öncelikli hedeflerimizden biri kullanıcı akışlarının oluşturulması. Bu akışların oluşturulması sürecinde araştırmacılarımızın yaptığı kart gruplama (card sorting) çalışmalarıyla kullanıcıların ilgili sayfaları nerede aradıklarını, nasıl bir bağlantı kurduklarını analiz ediyoruz. Sonrasında ekibimizdeki kullanıcı deneyimi tasarımcılarımız uygulama için en doğru kullanıcı akışını veriler doğrultusunda hazırlıyor.

Kullanıcı deneyimi tasarımcılarımız projeyi içselleştirdikten ve kullanıcı akışlarını hazırladıktan sonra ilk olarak basit eskizler ile genel çerçeveyi netleştiriyor. Ekip içerisinde bir çok kez bu çizimler üzerine tartışılıyor. Genellikle kullanıcılarımızı dinleyen araştırmacılarımız ile ekranlar üzerine gerekli ekleme çıkarmalar yapılıyor. Tabi bu esnada tasarım da giderek olgunlaşıyor. Kademe kademe ilerleyen bu süreç uygulamanın genel iskeletini oturtabilmek adına büyük önem taşıyor.

Şimdi de mikrofonu bize tasarım sürecinden kısaca bahsetmeleri için ekibimizin kullanıcı deneyimi tasarımcılarından Çağla ve Karya’ya uzatıyorum:

“Aslında bizim için projenin başlangıcında atacağımız adımlar proje hedefine göre değişiklik gösteriyor. Örneğin sıfırdan tasarlanacak bir ürün ile var olan bir ürünün iyileştirilmesi arasında izlediğimiz yol farklılaşıyor. Var olan bir ürünü geliştireceksek öncelikli adımlarımız analiz toplantılarıyla geliştireceğimiz ürünü iyice anlamak ve kritik kullanıcı akışlarını çıkarmak oluyor. Sıfırdan yapacağımız bir projede ise bu akışların doğal olarak sıfırdan oluşturulması gerekiyor. Her iki senaryoda da benchmark çalışmasının ve araştırma çıktılarını içselleştirmenin kritik olduğunu düşünüyoruz. Kullanıcı ihtiyaçlarını, acı noktalarını, benzer ürünleri ve yaklaşımları anlamadan beklentilere cevap vermek oldukça zor. Bazı durumlarda kullanıcılar (doğru bir tasarım olmasa bile) alışkanlıklarından gelen konforu arayıp belirli bir tasarımı benimsemiş olabiliyorlar. Bu gibi noktaların farkında olmak, kullanıcı üzerinde doğru etkiyi yaratabilmek ve alıştığı deneyimler sunabilmek için önemli.

Wireframe adımını low ve high fidelity aşamaları olarak ikiye ayırıyoruz. Bu noktada amacımız adımları bölerek ürün gelişimini katmanlandırmak oluyor. Çünkü her yeni aşamada yapılan eklemeler tasarımın olgunlaşmasını sağlıyor. Tabi wireframe çizilirken ürüne entegre edilecek etkileşimler ve içerikler de düşünülmeli. İçerik derken yalnızca sayfaları dolduracak içeriklerden bahsetmiyoruz. Hangi buton bizi nereye yönlendirecek, hani sayfa hangi sayfanın altına gelecek gibi bilgi mimarisi detaylarını düşünmek önemli. Ek olarak kullanıcının tasarımı deneyimlerken yaşayacağı hisleri öngörmek ve yönetmek de süreçte rol alan tüm tasarımcıların ortak sorumluluğu bizce. Çünkü kullanıcı alışkanlıkları buton üzerindeki bir efektten, metinden, sayfanın kayma yönüne kadar küçük olarak nitelendirebileceğimiz detaylardan etkileniyor.”

Üç, iki, bir ışıklar

Proje bu şekilde devam ededursun, biraz da paralelde başlayan görsel tasarım sürecimizden bahsetmek istiyorum. Projeyle ilgili gerekli aktarımları alıp wireframeler elimize ulaştıktan sonra, hızlı bir start verebilmek için bu adımı genellikle kullanıcı deneyimi tasarımcılarıyla birlikte yürütüyoruz.

Konsept tasarım süreci, belirli bir ekran üzerinde farklı tarzların denenmesiyle ilerliyor. Bu ekran bazen uygulamanın eski versiyonunda bulunan bir sayfa, bazen de yeni bir tasarım olabiliyor. En doğru seçeneği yakalamak için farklı tiplerde pek çok ekran çalışıyoruz. Bu ekranları ekipçe inceliyor ve yorumluyoruz. Beğendiğimiz parçalar üzerinde daha detaylı çalışmaya başlıyor ve günün sonunda konsepti netleştirmiş oluyoruz.

Tutarlı ve kodlanabilir tasarımlar

Konsept tasarımın oluşturulması esnasında pek çok seçenek çalıştığımızdan bahsetmiştik. Bu tasarımlar farklı tarzlarda olsa da Akbank’ın tasarım dilini ve duruşunu taşımasına özen gösteriyoruz. Bunun için her zaman takip ettiğimiz ve marka kimliğini korumamızı sağlayan iki kaynağımız bulunuyor. Bu kurallara uyarak Akbank’ın görsel tasarım dilini koruyoruz.

Bir diğer kritik nokta ise yaptığımız tasarımların gerçek dünyada çalışabilmesi. Akbank Tasarım Ofisi olarak pek çok proje üzerinde çalışıyoruz bu da aslında birden fazla programlama dili ile kodlanan farklı yapılarda uygulamalar demek.

Ufak bir parantez açarak tasarım kütüphanemizi kısaca anlatmam süreci sizin için daha net bir hale getirecektir. Tasarım kütüphanemizi mikrodan makroya doğru katmanlı bir yapı ile oluşturduk. Oluşturduğumuz her bir parçayı ise geliştirilecek olan programlama frameworküne ve Akbank Brand Guideline’ına bağlı kalarak tasarladık. Yıllardır kullandığımız tasarım sistemimiz hakkında daha fazla bilgi almak isterseniz ekibimizde tasarım sistemimizden sorumlu Gül’ün “Taşındık, yeni adresimiz Figma!” yazısını hemen yan sekmeye açmanızı tavsiye ederim 🙂

Nerede kalmıştık? Önceki paragrafta bahsettiğim gibi ortak bir frontend kütüphanemiz bulunuyor. Bu kütüphanenin geliştirileceği frameworku takip ederek tasarım sistemini oluşturuyoruz. Ardından geliştirdiğimiz tüm bileşenler bu kütüphane içerisine frontend ekipleri tarafından ekleniyor. Daha sonra geliştirilen tüm uygulamalar bu kütüphaneden besleniyor. Bu yaklaşım çok daha kontrol edilebilir ve güncel tutulabilir yapılara olanak sağlıyor. Uygulamalar için geliştirdiğimiz ekranlar için ise ilgili uygulamanın geliştirildiği frameworkun dokümanını ayrı bir şekilde takip ediyoruz.

Ortak bir kütüphane üzerinden ilerlemenin bir çok avantajı bulunuyor. Her şeyden önemlisi yirmiden fazla iç uygulamanın olduğu bir yerde bizim için çok daha kontrol edilebilir bir yapı sunuyor. Bunun dışındaki faydalarını ise kısaca şöyle özetleyebilirim:

Tutarlılığı koruyor: Renk paleti, tipografi, ikonlar gibi temel yapılardan çok daha kompleks yapılara kadar farklı ekiplerin kodladığı uygulamalarda bile çok daha standartlaşmış bir görünüm elde etmemizi sağlıyor.

Hızımızı arttırıyor: Hem Tasarım Ofisi olarak bizim hem de yazılım ekiplerinin bir projeye başlarken hazır yapılar ile çok daha rahat ve hızlı hareket edebilmesini sağlıyor.

Güncelleme kontrolünü yükseltiyor: Geliştirilen parçalar zaman içerisinde işlevini yitirebiliyor, tasarımsal olarak geliştirilmesi gerekebiliyor ya da yeni özelliklere ihtiyaç duyulabiliyor. Bu durumda güncellemeleri tek bir yerden yönetebiliyor ve yeni komponenti rahatça hayata geçirebiliyoruz. Bu özelliği sadece kompleks yapılardaki gibi düşünmeyin, bir butonun içerisine ikon eklemek gibi basit bir işlem bile bu özellik olmadığında çok daha zorlaşabiliyor.

Sonuç olarak

Kullanıcıların hayatını ciddi manada kolaylaştıracak uygulamaları üretmek farklı farklı alanlardan pek çok kişinin desteği ile mümkün oluyor. Bu noktada Tasarım Ofisi olarak en doğru tasarımları gerçeklenebilir şekilde üretiyoruz.

Sizin bu konudaki deneyimleriniz nasıl? Sorularınızı ve yorumlarınızı bekliyoruz!