Dijital Tasarımda Görsel İçerik Stratejisi
Web sitesi tasarımında görsel ve içerik seçiminde en verimli strateji ve çözümler.
The Speed Element of Design etkinliğimizin son yazı dizisinde tasarımcıların dikkat etmesi gereken bir başka konuya, görsel içerik stratejisine ve performans bütçelerine değineceğiz. Diğer yazılarımız için:
Tasarlanan site ya da uygulamanın tüm içeriğinin yüklenme süresini azaltmaya yönelik çözümler ile düzenlenmesi, performans bütçesi (performance budget) olarak adlandırılır. Özellikle e-ticaret sektöründe hızın ve kullanıcı deneyiminin rekabeti direkt olarak etkilediği dönemde sitenin görsel içerik stratejisi büyük önem taşımaktadır.
Güncel olarak bir e-ticaret sitesinin yüklenme süresi 2.5 saniye ve altında ise iyi performanslı, üzerinde ise kötü performanslı olarak değerlendirilmektedir. Dolayısı ile görsel içeriğe bakışımız da bu süreyi baz alarak şekillenmelidir. Bu hedef doğrultusunda sayfanın boyut limitasyonunun 800 KB olduğu örneği üzerinden yola çıkarsak görsel içerik bütçesinin dağılımı aşağıdaki gibi olmalıdır:
Bütçenin %60’ından fazlası görsellere ayrılırken, %5–10’u Javascript’e, kalan kısmı da CSS’e dağıtılabilir.
Bir sitenin ya da uygulamanın kullanıcıya en çok yük oluşturan kısmı görselleridir. Optimize edilmemiş görseller yüklenme sürelerini artırıp, site performansını aşağıya çeker. Peki görsellerin seçiminde ve yerleştirilmesinde ne gibi önceliklendirmeler yapılmalı? Hangi strateji ile görseller elenmeli? Bu soruları görselleri 4 gruba ve önceliklendirmeye ayırarak cevaplandırabiliriz:
Peki bu gruplar nedir?
- Navigasyon görselleri: Tasarımda olmazsa olmaz şeklinde nitelendirebileceğiniz görsellerdir. Arama ikonu, menü ikonu, sepet ikonu, logo gibi tasarımda olmadığı takdirde kullanıcının aksiyon alamayacağı görsellerdir.
- Marka iletişimi: Marka iletişimi için kritik önem taşıyan ve yüksek önceliklendirmeye sahip görsellerdir. Örneğin; markanın maskotu, monogramı, deseni ya da ürün bazlı bir site ise ürünün kendisi olarak düşünülebilir.
- Dekoratif: Tasarımın işlemesi için şart olmayan fakat tasarıma pozitif katkıda bulunan detaylardır. Olmasa da olur şeklinde düşünülebilen bu tip görsellere örnek olarak gölgeler, fırça vuruşları, sağ ve sol panellerdeki süslemeler gösterilebilir.
- Bilgilendirici görseller: Alternatiflerinin bulunabileceği ya da görsel olarak tasarımda olması zorunlu olmayan, önceliklendirmede son sırada yer alan görsellerdir. Ödeme opsiyonları, sponsor logoları, indirimli ya da yeni ürün belirtici görseller örnek olarak gösterilebilir. Bu tipteki görsellerin temel amacı kullanıcılara ek bilgi sunmasıdır. Bu görseller yerine yazı kullanılabilir.
“Bir sitenin ya da uygulamanın kullanıcıya en çok yük oluşturan kısmı görselleridir.”
Aşağıdaki örnekte sıralandırmaya uygun olarak tasarlanmış opsiyonu inceleyebilirsiniz:
Hangi içerik için hangi format kullanılmalı?
Görsel içerik stratejisinde doğru formatları kullanmak, performans bütçelerinde büyük değişiklikler yaratacaktır.
1. Görseller için JPEG / WebP
Görseller JPEG 2000, JPEG XR ve WebP (encoding) formatında hazırlanmalı. Bu formatlar JPG, PNG ve GIF ile kıyaslandığında, tarayıcılar tarafından daha hızlı algılanmakta ve hem masaüstü hem de mobil erişimlerde daha hızlı deneyimi (render) mümkün kılar.
2. Logo ve ikonlar için SVG / PNG / FONT
Burada JPG ve GIF formatlarından kaçınılmalı.
3. Küçük animasyonlar için GIF değil, Video kullanılmalıdır.
Sanılanın aksine GIF formatı videoya göre daha düşük performanslıdır. Bunun sebebi GIF formatı buffer özelliği içermediğinden dolayı daha uzun sürede kullanıcıya ulaşır. Tamamı yüklenmeden izleme imkanı olmadığı için GIF formatındaki görüntüler kullanıcıların daha uzun süre beklemesi ve performans düşüklüğü ile sonuçlanabilir. MP4 tipi videolar ise tüm modern tarayıcılarda anında oynatılabilir ve kullanıcıya daha bütünsel bir deneyim vaad eder.
Gerek format seçimi, gerekse hareketli görüntünün sunulma biçimi açısından bir tasarımın görsel içerik stratejisi tüm deneyime pozitif ya da negatif yönde etkide bulunabilir. Görsel içerik bütçesini ne kadar minimize edebilirseniz tasarımınız o kadar yalın ve performanslı algılanacaktır. Ancak burada unutulmamalıdır ki hızlı bir deneyim için temel tasarım elementlerinden ve tasarımın kalitesinden ödün verilmemelidir.
