Arayüz tasarımında Responsive çalışmak ama nasıl?
Giriş
Teknolojinin baş döndüren hızı geçmişten günümüze tasarım yaklaşımlarını da fazlasıyla değiştirdi. Hayatımıza dahil olan yüzlerce farklı boyuttaki ekran ile geliştirilen tasarımları farklı büyüklükler ve farklı oranlara da duyarlı üretmek, kaliteli bir tasarımın en önemli unsurlarından birisi haline geldi.
İşte bu noktada hayatımıza giren bir yaklaşım var: Responsive tasarım. Responsive tasarım, web sayfalarının, uygulamaların veya diğer kullanıcı arayüzlerinin, farklı cihazlarda ve ekran boyutlarında en iyi şekilde görüntülenmesini sağlamak için üretilmiş bir yaklaşımdır. Bu yaklaşım, bir kullanıcının web sayfasını veya uygulamayı masaüstü ve dizüstü bilgisayarlarda, tabletlerde veya cep telefonlarında kullanırken kullanıcı arayüzünün tüm cihazlarda tutarlı olmasını sağlıyor. Yani cihaz boyutlarına göre otomatik olarak düzenlenen ve yeniden boyutlandırılan tasarım öğelerinin web sayfaları veya uygulamaların mobil cihazlar gibi daha küçük cihazlarda kullanımı da kolaylaştırmış oluyor.
Biz de Akbank Tasarım Ofisi olarak, kullanıcı deneyiminde oldukça kritik olan responsive yaklaşımını kullanıcılarımıza bütünleşik bir deneyim sunabilmek ve cihaz bağımsız şekilde tasarımda tutarlı kalabilmek için fazlasıyla önemsiyoruz.
Hadi, responsive tasarımları üretilmesi süresince neler yaşadığımıza derinlemesine bir göz atalım.
Çözünürlükler
Responsive tasarım grid sistemi uygulamalarımızı geliştirirken uzun yıllardır kullandığımız bir yöntem. Gridler her ne kadar kolon yapısından ibaret gibi görünse de işin teknik tarafına daldığımızda, kullanıcılarımıza en iyi deneyimi sunabilmemiz için derin bir oluşum süreci olduğunu söyleyebilirim. Öncelikle 30 farklı tip ve 10.000 den fazla ekranın olduğu bir banka uygulamasında, ürettiğimiz tasarımların cihaz bağımsız desteklenmesi için tasarımlarımıza en uygun, en kullanıcı dostu haliyle her boyutta desteklenen bir sistem oluşturarak yol almamız gerektiğinin bilinci ile çalışmalarımızı sürdürüyoruz.
Banka içerisinde kullandığımız ekranların çözünürlük bilgilerini bir arada tuttuğumuz bir listemiz var. Bu listede farklı boyutlarla birlikte farklı oranlarda da bir çok ekranımız mevcut. Her bir widget ve boşluğun nasıl hareket edeceğini mantıklı ve bilimsel bir zemine oturtup çalışanlarımıza en iyi kullanıcı deneyimini nasıl sunabiliriz konusunda sürekli kafa yoruyoruz. Bu konuda epey yol katettiğimizi ve ve çalışmalarımıza bu yönde hız kesmeden devam ettiğimizi söyleyebilirim.
Farklı büyüklükteki ekranlarda yapılan tasarımların davranışları da farklı olacağı için tasarımlarımızın çalışacağı 5 farklı aralığı net olarak belirledik.
XSmall / < 576
Small / 576–768
Medium / 768–1038
Large / 1038–1367
XLarge / > 1367
Bankamız içerisindeki ekranları baz alarak bu aralıkları oluştursak bile amacımız günün şartlarına uyumlanmak değil. Bu sebeple ilerleyen günlerde ekranların değişmesi, yeni ekran alınması gibi ihtimalleri her zaman göz önünde bulunduruyoruz. Oluşturduğumuz aralıkları maksimum seviyede global tutuyor ve dönem dönem kontrollerini sağlayıp güncel ihtiyaçları halen karşılayıp karşılamadıklarını sürekli kontrol ediyoruz.
Genel Kullanım
Grid kullanımı
Endüstri standartlarını ve ekran yapılarını da baz alan temel taban gridimiz 4px (pixel) ve katları olacak şekilde belirlenmiş durumda. Endüstri standardı olarak genelde kullanılan 4 px katlarını bizim de kullanmamızın bazı temel sebepleri var. Bu sebeplerden en önemlisi çift sayıların 1.5, 2.5 gibi buçuklu katlarını da alabiliyor olmak. Ek olarak 4px aynı zamanda tam olarak yeterli büyüklükte olduğundan katlarını kullandığımızda bize çok daha fazla çalışma opsiyonu sunuyor.
Taban gridimizi yerleştirdikten sonraki aşamada sayfadaki componentlerin konumlanacağı gridi 12 kolonlu sistemi kullanarak yerleştiriyoruz. 12 kolonlu sistemi kullanmamızın genel sebebi 2,3,4,6 sayılarına bölünebiliyor olması. Bu sayede farklı componentler için tek bir grid çözümü ile ilerliyoruz. Kolon yapımız sayesinde ekran boyutu anlık olarak değişse bile tasarımımızın nasıl görüneceğini net bir şekilde belirleyebiliyoruz.
Sayfalarımızda sol veya sağ alanlarda bulunan menü bildirim alanı, müşteri bilgi alanı gibi alanları sayfa grid sistemimizin geneli itibariyle dışında tutuyoruz. Bu alanlar bize zaman zaman müşteri bilgisi, iş takibi gibi bilgileri verdikleri için ekran değişikliği durumlarında sabit kalmaları gerektiğini düşündüğümüz bir alan. Tabii bu gibi alanları da kendi kaderlerine terk etmedik. Bu kısmı ayrıca anlatacağım. 😊
Sayfaya konumlandırdığımız 12 kolonlu grid yapısının sağ ve sol boşlukları ekran aralıkları için ayrı ayrı tanımladığımız bir alan. Yine farklı ekran boyutları için gutter değerlerini özel olarak belirliyoruz. Kolonlarımız ise spacing, margin, padding ve gutter değerleri dışında alanı dolduracak şekilde büyüyüp küçülecek şekilde belirleniyor. Kolon büyüklüklerinin aktif bir şekilde hareket edebiliyor olması sayesinde belirli bir ekran büyüklüğü aralığında da responsive yapıyı koruyabiliyoruz. Örneğin: Large aralığında olan ve 1366px çözünürlüğünde bir ekran üzerinde bulunan, 1030 px genişliğinde bir component tam olarak 12 kolonu doldururken; aynı component 1280px çözünürlüğünde bir ekran üzerinde yine 12 kolonu dolduruyor ama bu sefer 944px genişliğinde bir alanı doldurur. Böylelikle farklı ekran çözünürlüklerinde problemsiz çalışmayı kolaylaştırmış oluyoruz.
Sayfa grid sistemimizden bir aşama daha derinleştiğimizde ise componentlerimizin iç gridleri karşımıza çıkıyor. Componentlerimizin içerisine grid koyarak onların iç düzenini de en üst seviyede koruyarak responsive tasarımlar üretmek ve bu düzeni korumak bizim için çok önemli. Bu yapılardaki kuralları dıştan içe koruyarak yaptığımız tasarımlardaki tutarlılığı da en üst seviyeye çıkarabiliyoruz.
Component içlerinde de 400px genişliğinden daha küçük olan componentler için tek kolon, daha büyük componentler için ise 12 kolonlu sistemi kullanıyoruz.
Grid yapısı sayesinde sayfa üzerinde kullanmış olduğumuz gridler ile benzer yapıda çalışan iç gridlerimiz de sayfa büyüklükleri değiştiğinde padding, margin ve spacing değerlerini koruyor ve kolonlarımız da büyüklüğe göre değişim gösteriyor.
Yaz yaz yaz bi kenara yaz
Text kullanımları
Akbank Tasarım Ofisi olarak tasarım sistemlerimizi oluştururken fontlarımız üzerine de ince eleyip sık dokuyarak çalışıyoruz. Ekran boyutlarımızı ve çözünürlüklerimizi de fazlasıyla dikkate alarak oluşturuldu. Font satır yükseklikleri, boşluk gibi bir fontun sahip olabileceği tüm değerleri göz önünde bulunduran, özenle hazırlanmış bu set yıllardır tasarımlarımızda bize eşlik ediyor.
Gelelim fontlarımızı responsive davranışlarda nasıl kullandığımıza…
Her şeyden önce tasarımlarımızda font büyüklüklerini koruyabildiğimiz en yüksek seviyede korumak en önemli önceliğimiz. Tasarımlarımızı her türlü senaryoyu göz önünde bulunduracak şekilde oluşturmaya özen gösteriyoruz. Tabii ki dünyanın bin bir türlü hali var, Akbank’ın da bir çok farklı uygulaması. Bu yüzden olası senaryolar dışında kalan farklı durumlarda davranışlarımız da net bir şekilde önceden kurallarıyla belirlenmiş oluyor.
Text yerleşimleri
Günümüzde bir banka uygulamasını sahip olduğu en önemli şeylerden birisi de içeriklerle varolan sistemler. Bizler de gridleri oluştururken, yüzlerce farklı içerik ve tiple karşımıza çıkan tasarımları gözardı etmemeye özen gösteriyoruz. Bu yüzden text içeriklerimizi de derinlemesine analiz ederek farklı senaryolara göre nasıl değişiklik göstermesi gerektiklerini kurallar bütünlüğünü bozmadan net bir şekilde belirleyerek çalışmalarımızı sürdürüyoruz.
Bu derin analizler sonucunda text kullandığımız alanlarda üç farklı text senaryosu karşımıza çıkıyor.
- Text içeriğinden kayıp veremediğimiz alanlar; Bu durumlarda textimizi maksimum seviyede, belirlenmiş aralıklar içerisinde boyut değiştirmeden korumaya özen gösteriyoruz. Eğer yine de alana sığmazsa text boyutunu küçültülerek içeriği maksimum seviyede korumayı hedefliyoruz.
- Text içeriğinden kayıp verebildiğimiz alanlar; Bu durumlar genellikle uzun paragraflar gibi alanlarda yer alıyor. Bu alanların genellikle bir detay sayfası oluyor ve bu yüzden direkt sığmayan alanı yan yana 3 nokta ile ifade ediyoruz.
- Başlıklar ve kalıplaşmış terimlerin olduğu alanlar; Bu alanların gridlere sığmama durumunda ise kullanıcı profilimizin terimlere fazlasıyla hakim olmasından dolayı yapılarda kısaltmaya giderek bir çözüm üretiyoruz.
Boşluklar gelişi güzel… Şaka şaka boşluklarımızda kurallı.
İyi bir tasarımda boşluk kullanımı fazlasıyla önemli olduğu için, boşluklarımızı en iyi seviyede ve tek düzende tutmaya özen gösteriyoruz. Fakat değişen ekran büyüklüklerinde boşlukları sabit tutmak pek de mümkün olmuyor; en azından hepsini 🙂
Boşluklarımız için de ekran çözünürlük aralıklarımıza göre belirlediğimiz standartlarımız var. İlk olarak içerik ve sayfa düzeni içerisinde bir sınıflandırma yapımızdan bahsetmek istiyorum.
Bu yapıyı 3 ana başlık altında ele alıyoruz:
- Sayfa içerisinde yer alan boşluklar; belli aralıklar için belirlendi ve aralık değişmediği sürece sabit tuttuk.
- Sayfa içerisindeki elemanların iç paddingleri; sabit olarak belirlendi ve bu boşlukları da belirlenmiş aralıklar dışına çıkılmadığı sürece değiştirmeme kararı aldık.
- Belirli bir aralıkta değişiklik gösteren tek boşluklar; widgetların iç elemanlarında sahip olunan boşlukları ekran büyüklüğüne göre değiştirdik. Bu sayede içeriği fazlasıyla değiştirmeden, hiçbir yapıyı üst üste getirmeden ve doğru boşluk kullanımı ile sunabilmiş olduk.
Boşlukların da kendi içindeki bu düzeni sayesinde içeriği fazlasıyla değiştirmeden, hiçbir yapıyı üst üste getirmeden doğru boşluk kullanımını sağlayabiliyoruz.
Sonuç olarak
Tasarımlarımızın kullanıcılarımız tarafından farklı farklı ekranlarda aynı deneyimi yaşayarak kullanabileceği bir ekosistemi ekip olarak titizlikle kurduk ve güncellemeye devam ediyoruz. Responsive bir tasarım hazırlarken sizin öncelikli dikkat ettiğiniz noktalar neler? Yorumlarınızı bekliyoruz.
Tasarım konusunda günceli yakalamak ve gelişmeleri takip etmek için bizi takip etmeyi unutmayın 🙂
Akbank Design Studio Medium blogunda okumak istediğin başka konu var mı? Bize bu formdan ulaşabilirsin.
