[UX mevs] #04 — Benzerlik Kanunu ve Atomik Tasarım Prensibinin Önemi
#S01E04
Önsöz
Merhaba Ben Çağdaş ve burası TurkNet Design. UX Mevs’in dördüncü bölümünde, birden fazla kişinin çalıştığı bir ekibin içerisinde tasarım çıktısı üretirken bunu belirli bir disiplin ile işletmek üzerine konuşacağız. Yani Atomik Tasarım Prensibi.
Tasarım çıktıları atomik prensiplere göre üretildiğinde sana ve çıktılarına +40 değer puanı kazandıracak bir konu, bu yüzden tüm dikkatini buraya vermelisin. ☕️
Giriş: Benzerlik Kanunu Ne? [Kötü çeviri olabilir 🤪]
Evet böyle yazınca biraz kötü çeviri gibi duruyor. Ancak atomik tasarım prensibine değinmeden önce Law of Similarity yani Benzerlik Kanunu üzerinde kıascık bile olsa durmak sebep — sonuç ilişkisi için önemli.
UX Mevs serisinin 3. bölümünde basitliğe vurgu yapmış ve insanların, sunulan seçeneklerin sayısı arttıkça seçim yapmak konusunda zorlandığı üzerinden tasarım süreçlerine olan etkisini konuşmuştuk.
Bu alışkanlığı iç cebimize koyduktan sonra üzerine eklememiz gereken bir diğer alışkanlık ise tasarımda benzerlik ve doğru orantılı olarak tutarlı olma faktörü. Tasarım çıktılarınızı üretirken tutarlı olmanız ve tüm bu konuları bütünün birbirini tamamlayan birer parçası gibi görmeniz gerekiyor.
Benzer renkler, şekiller, boyutlar veya desenler gibi görsel özellikler, bir kullanıcıyı bir arayüz içindeki belirli bir öğeye veya bölüme yönlendirebilir. Benzerlik, kullanıcının görsel ayrıntıları hızla tanımasına ve belirli bir öğeye odaklanmasına yardımcı olur.
Law of Similarity, kullanıcı deneyimini geliştirmek için dikkat çekici ve kolay anlaşılır bir tasarım oluşturmak için kullanılabilecek önemli bir araç. Kullanıcıların bir arayüzü daha hızlı anlamalarını ve daha kolay benimsemesini sağlar.
Şimdi gelelim bunu UX Mevs yazı dizine uygun şekilde örneklendirmeye.
Grid (ızgara) sistemlerinin varlığı benzerlik kanunu için önemli bir unsurdur. Belirli ve benzer özellikleri ihtiva eden elementlerinizi gridler sayesinde anlamlı bir sıra bütünü içerisinde verebilirsiniz.
Bu konuda daha kolay anlaşılacak bir örnek verelim. E-posta istemcilerinin arayüzleri belirli bir standart barındırır ve elbette hepimizin aşına olduğu Gmail bu konuda çok popüler.
Gmail arayüzü, gelen kutusunda benzer özelliklere sahip e-postaların gruplanmasına ve benzer etiketlerin veya kategorilerin kullanılmasına dayanır. Bu, kullanıcıların e-postaları hızla taramalarını ve ilgili olanları bulmalarını kolaylaştırır.
Bir an önce Atomik Tasarım Prensibi ile ilgili konuşmak istediğim için bu konuyu burada kapatıyorum. İlgilenenler için de aşağıya birkaç örnek bırakıyorum.
Gelişme: Hadi Atomu Parçalayalım!
Şimdi gelelim esas konumuza. 🤓 İster tek kişilik dev kadro olun isterseniz kocaman bir ekibin parçası çalışmalarınızı yaşayan, gelişen ve geliştirilebilen bir sistem üzerine kurmalısınız.
Kütüphane ve bulut tabanlı çalışmak standart haline geldiği günümüzde, bütünü parçalayabildiğiniz ve tekrar bir araya getirip defalarca kullanabileceğiniz belirli bir metoda ihtiyacınız var. Bunun en popüler ve sürdürülebilir yolu ise Atomik Tasarım Prensibi dediğimiz disiplin.
Atomik Tasarım Prensibi en basit haliyle, bütünü parçalara ayırmanız yani dekonstrüksiyon uygulamanız ve tasarım çıktılarınızı oluşturmak için kullanmanız anlamına geliyor.
Çıktılarınız belirli elementlerin bir araya gelmesiyle oluşuyor. Ve bu elementler tüm tasarım süreçlerinizde defalarca ve defalarca farklı yerlerde kullanılıyor. Dolayısıyla elementlerinizi her zaman belirli bir yerden beselemeniz gerekiyor.
Çıktılarınızın üretim süreçleri atomik prensiplere uygun şekilde oluşturulduğunda aşağıya çıkan tablo şu şekilde oluyor.👇
TurkNet’in login ekranında yer alan giriş kutucuğu üzerinden atomik tasarım prensibini çalıştırırsak: 👇
İyi de Ne Gerek Var?
Basit bir giriş alanı tasarlamak istiyoruz ama ne kadar çok iş değil mi? Evet öyle ve öyle de olmak zorunda aslında. Eğer tasarım süreçlerinizi daha kolay, daha hızlı ve daha sürdürülebilir olarak yürütmek istiyorsanız bu sizin kefaretiniz. 🫨
Yukarıdaki örnek üzerinden konuşalım mesela.
Değişkenleri hariç tuttuğumuzda 13 farklı atomun bir araya gelmesi ile oluşturuluyor. Hatta bu bir örnek olmasaydı daha fazla da parçalayabilirdik. Bu örnekte kullandığımız butonu radius değişkeni hariç 2 farklı atomik parça oluşturuyor. Butonun rengi ve içerisindeki text.
Bu butonu tasarımlarımızda 30 farklı ekranda daha kullandığınızı hayal edin. Eğer atomik prensiplere göre çalışmazsanız 30 defa daha butonu çizecek misiniz?
Bence çizmemelisiniz! 🤯
“Ben zaten elementlerimi kütüphaneye atıyorum niye atomik olarak ayırmalıyım” der gibisiniz. Burada da ilk başta anlattığım benzerlik kanunu ve tutarlılık devreye giriyor aslında.
Yine aynı butonu ele alalım. Bu butonun kullandığı renk primary (#164E87) renginiz ve tüm tasarım süreçlerinde bu rengi kullanacaksınız. Bu rengi en küçük atomik parça olarak stil ya da değişken olarak atayıp ardından da ihtiyacınız olan her yere bu atomu çağırmanız, hem hata ihtimalini azaltır hem handoff süreçlerinin yönetilebilir olmasını sağlar hem de üretim süreçlerini hızlandırır.
Ve en önemlisi de benzer özellikleri ihtiva eden benzer elementleri gruplamanız farklı çıktılar için bu benzer element gruplarını çalışmalarınız için temel olarak kullanabilirsiniz.
En Çok Kafa Karıştıran Konu: Şimdi Hangisi Atom, Hangisi Molekül?
Bu kesin çizgilerle belirli bir konu değil. Bu yüzden çalışmalarınız için dekonstrüksiyon yani yapısöküm işlemi uygulamalısınız. Ancak en basit haliyle ilk denemeler için aşağıdaki görsel işinize yarayacaktır.
Sonuç: Artılar / Eksiler
Atomik Tasarım Prensibi ile çalışmanın artılarına yukarıda parça parça değindim ancak toparlayacak olursak sanırım şunları söyleyebiliriz.
- Tutarlı çıktılar üretmenize yardımcı olur.
- Yaşayan bir tasarım sisteminizi oluşturmanız için önemlidir.
- Yazılım Geliştiricileri ile handoff süreçleri çok daha yönetilebilir ve kolay olacaktır.
- Yeni boyut, yeni tema gibi kompleks süreçleri çıktılarınıza entegre etmeniz kolaylaşır.
- Atomik elementleriniz tüm tasarım çıktılarınızı kanal bazlı besleyebilir. Yani ürününüzün mobil uygulamasını geliştirmek istediğinizde atomlar sizin için hazır bekliyor olacaklar.
Peki bu sürecin hiç mi problemi yok? Elbette var. Kısaca bahsetmek gerekirse:
- Çalıştığınız ekip bu disiplini benimsemez ise geçmiş olsun. Kendi kendinize debelenirsiniz.
- Yorucu ve zaman gerektiren bir süreçtir. Ol deyince olmuyor. Aylara yayılan bir süreç olduğunu unutmamak gerekir.
- İyi bir planlamaya ihtiyaç var. Eğer bir DesignOps. Specialist’iniz ya da bu konuda deneyim sahibi birilerinin liderliğinde çalışmazsanız süreci elinize yüzünüze bulaştırmanız yüksek ihtimal.
- Eğer ilk defa bu konsepti tasarım süreçlerinize entegre edecekseniz, aynı elementleriniz üzerinde yapısöküm işlemi uyguladığınız gibi bu süreci de yapısöküm ile yönetmeniz ve küçük adımlarla ilerlemeniz önemli. Yoksa muhtemelen verimsiz ve işlevsiz bir çıktı elde edeceksiniz.
Kaynaklar:
Haftaya UX Mevs’te Ne Var?
[UX mevs] #04 — ZeigarnikEtkisi
