Cloudflare Radar yeniden tasarlandı: kutulardan haritaya
Cloudflare, Radar'ın ana sayfasını yeniledi: eşit ağırlıklı kutuların yerine harita ve sekmeler geldi. Süreçten web tasarımı için çıkan dersler.
Cloudflare Radar, internet trafiğini, kesintileri ve saldırıları anlık gösteren ücretsiz bir site. 2020'den beri ağ uzmanları ve araştırmacılar kullanıyor. Cloudflare 8 Ekim'de ana sayfayı yeniledi. Hedef, aynı veriyi gazeteciler, karar vericiler ve sıradan kullanıcılar için de anlaşılır kılmak.
Eski tasarımın sorunu
Cloudflare'in tasarım ekibi eski sayfanın sorunlarını açıkça yazıyor:
- Bento düzeni: sayfa, farklı boyutlarda kutulardan oluşan bir ızgaraydı. Her kutu aşağı yukarı aynı ağırlıkta göründüğü için göz nereden başlayacağını bilemiyordu.
- Dikey kartlar doğal okuma sırasını bölüyordu.
- Görünüm, Cloudflare'in genel marka diliyle uyuşmuyordu.
Bir kullanıcının geri bildirimi özellikle etkili olmuş: Radar'ı öğrencilerine göstermekte zorlandığını söylemiş.
Yeni tasarım
Sayfanın üstünde artık bir dünya haritası var. İlk sırada kesintiler gösteriliyor, çünkü internetin o anki durumunu en somut anlatan veri bu. Harita aynı zamanda bir menü gibi çalışıyor; ülkelere ve konulara oradan geçiliyor. Haritanın altındaki kutular sekmelere dönüştü. Her sekme kısa bir özet ve daha fazlasını keşfetme çağrısıyla başlıyor.
Denemelerden çıkan ders
Ekip haritada birçok sürüm denemiş. İlk sürümler fazla yoğunmuş; güvenilirliği veri bolluğuyla göstermeye çalışmışlar. Sonrakiler reklam sayfası gibi olmuş; daha sıcak görünmüş, ama canlı veriyi durağan bir özet gibi göstermiş. Son tasarım ikisinin arasında: canlı veri hissini koruyor, ama okunması kolay.
Sizin siteniz için
Bento ızgarası son yıllarda sık görülen bir tasarım kalıbı. Radar'ın deneyimi, kalıbın bedelini gösteriyor: her şey eşit önemdeyse okur neye bakacağını bilemiyor. Ana sayfanızda bir şeyi öne çıkarmak için ötekileri geri çekmeniz gerekiyor. Ziyaretçinin ilk ekranda göreceği tek şeyi seçip gerisini sıraya koymak, kutu sayısını artırmaktan daha çok iş görüyor.
Markanızın görsel dilini birlikte kuralım. Logo ve kurumsal kimlik →