Bir acente yazılımı yıllar içinde büyüdükçe arayüzde fark edilmeyen bir dağınıklık birikir. Teklif ekranındaki "Kaydet" düğmesi mavi ve sağ alttadır; müşteri kartında yeşil ve sol üsttedir. Bir ekrandaki tarih seçici gün-ay-yıl sırasıyla çalışırken diğerinde takvim açılır. Hata mesajları bir formda alanın altında, başka bir formda pencere olarak görünür. Bu farklılıkların her biri küçük görünür; ancak bir araya geldiklerinde kullanıcıya her ekranı yeniden öğrenme yükü getirir.
Tasarım sistemi, bu dağınıklığa karşı geliştirilmiş bir yaklaşımdır. Ortak tasarım ilkelerini, görsel kuralları ve yeniden kullanılabilir arayüz bileşenlerini tek bir kaynakta toplar. Bu yazıda acente yazılımı özelinde tasarım sisteminin neden gerekli olduğunu ve nasıl kurulabileceğini ele alıyoruz.
Tasarım Sistemi Neleri Kapsar?
- Tasarım ilkeleri: Ürünün hangi değerleri öncelediğini anlatan kısa ifadeler; örneğin "önce hız", "her işlem geri alınabilir olsun" gibi.
- Görsel temel: Renk paleti, yazı tipleri, boşluk ölçüleri, köşe yuvarlaklıkları ve gölgeler.
- Bileşen kütüphanesi: Düğmeler, giriş alanları, tablolar, kartlar, bildirimler, modal pencereler gibi hazır parçalar.
- Kalıplar: Bileşenlerin bir araya gelerek oluşturduğu tekrar eden çözümler; örneğin arama ve filtre çubuğu, form bölümü, boş liste görünümü.
- Kullanım kılavuzu: Her bileşenin ne zaman kullanılacağını, ne zaman kullanılmayacağını gösteren örnekler.
Acente Yazılımı İçin Neden Özellikle Önemli?
Acente yazılımları çok sayıda farklı modülü bir araya getirir: CRM, teklif, poliçe, tahsilat, raporlama, kullanıcı yönetimi. Her modül farklı zamanlarda, bazen farklı geliştiriciler tarafından yazılır. Tasarım sistemi olmadan her modül kendi bileşenlerini üretir ve ürün, birbirine eklenmiş ayrı uygulamalar gibi görünmeye başlar.
Ayrıca trafik, kasko ve DASK gibi branşların ayrı sorgu akışları vardır. Bu akışların içerik olarak farklı, davranış olarak tutarlı kalabilmesi için ortak bir bileşen kütüphanesi gereklidir. Bir branşa yeni alan eklendiğinde yeni bir giriş bileşeni icat etmek yerine mevcut olan kullanılır.
Kullanıcıya Faydası
- Öğrenme süresi kısalır: Kullanıcı bir ekranda öğrendiği davranışı diğer ekranlarda da bulur.
- Hatalar azalır: Aynı görünen öğelerin aynı şekilde çalışması, yanlış tıklamaların önüne geçer.
- Güven artar: Tutarlı bir arayüz, kullanıcıya özenle hazırlanmış bir ürün izlenimi verir.
- Erişilebilirlik yaygınlaşır: Erişilebilirlik kuralları bileşen düzeyinde uygulandığında, her yeni ekran bu kuralları otomatik olarak devralır.
Geliştirme Ekibine Faydası
Tasarım sistemi yalnızca kullanıcı için değil, yazılımı geliştiren ekip için de verimlilik sağlar. Yeni bir ekran tasarlanırken sıfırdan başlamak yerine hazır bileşenler kullanılır. Tasarımcı ile geliştirici arasındaki iletişim ortak bir dile dayanır: "Birincil düğme", "uyarı bildirimi", "veri tablosu" gibi terimlerin herkes için aynı anlamı vardır. Bir bileşende yapılan iyileştirme, onu kullanan tüm ekranlara yansır.
Tasarım Sistemi Nasıl Kurulur?
1. Mevcut arayüzün envanterini çıkarın
Sistemdeki tüm düğmelerin, giriş alanlarının, tabloların ve bildirimlerin ekran görüntülerini toplayın ve türlerine göre gruplayın. Bu çalışma genellikle aynı işi gören çok sayıda farklı bileşen olduğunu ortaya koyar ve sadeleştirmenin nereden başlayacağını gösterir.
2. Temel görsel kuralları belirleyin
Renkler, yazı boyutları ve boşluk ölçüleri için sınırlı ve isimlendirilmiş bir set oluşturun. Her ekranda serbestçe seçilen değerler yerine bu set kullanılır.
3. En sık kullanılan bileşenlerle başlayın
Tüm kütüphaneyi bir anda kurmaya çalışmak yerine, en sık kullanılan bileşenlerden başlayın: Düğme, metin alanı, açılır liste, tablo ve bildirim. Bu bileşenler doğru kurulduğunda arayüzün büyük bölümü tutarlı hale gelir.
4. Her bileşenin durumlarını tanımlayın
Bir bileşen yalnızca varsayılan görünümüyle tanımlanamaz. Üzerine gelinmiş, odaklanmış, devre dışı, yükleniyor ve hatalı durumlarının her biri tasarlanmalı ve belgelenmelidir.
5. Kullanım örneklerini belgeleyin
Her bileşen için doğru ve yanlış kullanım örnekleri hazırlayın. Örneğin bir sayfada yalnızca bir birincil düğme bulunması gerektiği, yıkıcı işlemler için hangi düğme türünün kullanılacağı gibi kurallar açıkça yazılmalıdır.
6. Sahipliği netleştirin
Tasarım sisteminin bir sahibi olmalıdır. Yeni bileşen ihtiyacı doğduğunda kimin karar vereceği, değişikliklerin nasıl duyurulacağı belirlenmezse, sistem kısa sürede yeniden dağılır.
Sık Karşılaşılan Zorluklar
- Esneklik baskısı: Her ekip "bizim ekranımız farklı" diyerek yeni bir varyasyon ister. Varyasyonlar değerlendirilmeli; gerçekten gerekliyse sisteme eklenmeli, değilse mevcut bileşen kullanılmalıdır.
- Eski ekranların taşınması: Mevcut ekranların tamamını bir anda yeni bileşenlere geçirmek mümkün olmayabilir. Kademeli geçiş, en çok kullanılan ekranlardan başlanarak yapılabilir.
- Belgelerin güncel kalması: Kullanılmayan ya da gerçek kodla örtüşmeyen bir kılavuz, olmamasından daha kötüdür. Bileşen kodu ile belgeler mümkün olduğunca birlikte güncellenmelidir.
Web ve Mobil Arasında Ortak Dil
Acente yazılımı hem web panelinde hem de mobil uygulamada kullanıldığında tasarım sistemi, iki platformun aynı ürün olarak algılanmasını sağlar. Platformların kendine özgü kalıpları korunabilir; ancak renkler, terimler, ikonlar ve temel davranışlar ortak kalmalıdır.
Örnek: Tek Bir Tarih Seçicinin Etkisi
Poliçe başlangıç tarihi, doğum tarihi, ruhsat tarihi ve görev tarihi gibi alanlar acente yazılımının pek çok ekranında bulunur. Tasarım sistemi olmadan her ekip kendi tarih seçicisini yazar; biri haftayı pazartesiden, diğeri pazardan başlatır, biri elle yazıma izin verir, diğeri vermez. Ortak bir tarih bileşeni tanımlandığında bu farklar ortadan kalkar, klavye ve ekran okuyucu desteği tek bir yerde çözülür ve tarih biçimiyle ilgili destek talepleri tek bir düzeltmeyle tüm ekranlarda giderilir.
Tasarım Sistemi Bir Proje Değil, Bir Üründür
Tasarım sistemini bir kez kurup bırakmak, onun değerini kısa sürede tüketir. Sistem, ürünle birlikte büyüyen ve düzenli olarak bakımı yapılan bir iç ürün olarak ele alınmalıdır. Kullanıcı geri bildirimleri, erişilebilirlik testleri ve yeni modül ihtiyaçları, bileşenlerin sürekli iyileştirilmesi için girdi sağlar.
InsureHub'da acente yazılımının farklı modüllerini ortak bir bileşen yaklaşımıyla geliştirmeyi hedefliyoruz. Modüller arasındaki tutarlılığı kendiniz görmek için demo talebi bırakabilirsiniz.