Web Sitesi Zaman Çizelgesi Bölümü: Süreci Göstermek
Bir şirketin geçmişi, bir projenin aşamaları ya da bir hizmetin adımları düz metinle anlatıldığında okunmaz. Zaman çizelgesi, bu bilgileri sıralı ve görsel bir akışa dönüştürerek kavranmasını kolaylaştırır.
Bu rehberde zaman çizelgesi bölümünün nerelerde kullanılacağını, nasıl tasarlanacağını, mobil düzenini ve erişilebilirlik tarafını ele alıyoruz. Yapının sitenize uyarlanması için Weblike web sitesi tasarımı ekibimizden destek alabilirsiniz.
Web Sitesi Zaman Çizelgesi Bölümü Nedir?
web sitesi zaman çizelgesi bölümü, olayları ya da adımları kronolojik sırayla görsel bir hat üzerinde sunan bölümdür. Her durak bir tarih ya da aşamayı temsil eder.
Çizelge yalnızca geçmişi anlatmak için kullanılmaz. Bir sürecin adımlarını göstermek için de uygundur.
Nerelerde Kullanılır?
Zaman çizelgesi birkaç farklı bağlamda değer üretir. Kullanım amacı tasarımı da belirler.
- Şirket tarihi: Kuruluştan bugüne.
- Süreç adımları: Hizmetin işleyişi.
- Proje planı: Aşama ve teslimler.
- Sipariş durumu: Hangi aşamada olduğu.
Şirket Tarihi
Kurumsal sayfalarda geçmişi anlatmak için kullanılır. Marka güvenilirliğini destekler.
Kurumsal sayfa yapısını hakkımızda sayfası yazısında ele aldık. Her durak somut bir olay içermelidir.
Süreç Anlatımı
Hizmetin nasıl işlediği adım adım gösterilebilir. Bu anlatım belirsizliği azaltır.
Adım sayısı sınırlı tutulmalıdır. Beş adım çoğu hizmet için yeterlidir.
Proje Süreci
Ajans ve danışmanlık sitelerinde proje akışı çizelgeyle gösterilir. Müşteri ne zaman ne olacağını görür.
Teslim sürecini proje teslim süreci yazısında anlattık. Süre bilgisi de eklenebilir.
Sipariş Takibi
Siparişin hangi aşamada olduğu çizelge biçiminde gösterilebilir. Bu gösterim en çok kullanılan biçimdir.
Takip sayfasını sipariş takip sayfası yazısında ele aldık. Tamamlanan adımlar işaretlenmelidir.
Yatay mı, Dikey mi?
Dikey çizelge daha fazla metin taşıyabilir ve mobilde doğal akar. Yatay çizelge ise daha az yer kaplar.
Karar içerik miktarına göre verilmelidir. Uzun açıklamalar dikey düzen gerektirir.
Durak Sayısı
Çok sayıda durak çizelgeyi okunmaz hale getirir. Önemli olanlar seçilmelidir.
Yirmi yıllık bir geçmiş beş altı durakla anlatılabilir. Her yıl için durak açılmamalıdır.
Durak İçeriği
Her durakta tarih, kısa başlık ve birkaç cümle bulunmalıdır. Uzun metinler akışı bozar.
Ayrıntı için bağlantı verilebilir. Çizelge bir özet olmalıdır.
Görsel Kullanımı
Duraklara küçük görseller eklenebilir. Bu görseller anlatımı güçlendirir.
Görsel boyutları tutarlı olmalıdır. Farklı oranlar düzeni bozar.
Simge Kullanımı
Her durak için bir simge kullanılabilir. Simgeler aşamayı hızla anlatır.
Simge seti tutarlı olmalıdır. Tek bir çizim stilinde kalınmalıdır.
Hat Tasarımı
Durakları birleştiren hat ince ve sade olmalıdır. Kalın ve renkli hatlar dikkati içerikten alır.
Hat rengi marka paletinden seçilmelidir. Nötr tonlar genelde daha iyi çalışır.
Tamamlanma Durumu
Süreç çizelgelerinde tamamlanan adımlar farklı gösterilmelidir. Bu ayrım anlık durumu anlatır.
Renk tek başına yeterli olmamalıdır. Simge ya da metin de kullanılmalıdır.
Animasyon
Kaydırdıkça beliren duraklar ilgi çekebilir. Ancak animasyon abartılmamalıdır.
Animasyon performansını animasyon performansı yazısında anlattık. Hareket azaltma tercihi dikkate alınmalıdır.
Kaydırma Davranışı
Yatay çizelgelerde kaydırma göstergesi bulunmalıdır. Kullanıcı daha fazla içerik olduğunu görmelidir.
Kaydırma düğmeleri de eklenebilir. Yalnızca sürükleme ile çalışan düzenler fark edilmez.
Mobil Düzen
Mobilde dikey düzen tercih edilmelidir. Yatay çizelgeler dar ekranda zor kullanılır.
Duraklar arası boşluk artırılmalıdır. Mobil ilkelerini mobil öncelikli tasarım yazısında ele aldık.
Metin Uzunluğu
Durak metinleri benzer uzunlukta olmalıdır. Çok farklı uzunluklar düzeni bozar.
Karakter sınırı belirlenebilir. Uzun açıklamalar ayrı sayfaya taşınmalıdır.
Tarih Biçimi
Tarihler tutarlı bir biçimde yazılmalıdır. Karışık biçimler dikkat dağıtır.
Yalnızca yıl yeterli olabilir. Ayrıntılı tarih her zaman gerekli değildir.
Erişilebilirlik
Çizelge anlamlı bir liste yapısıyla kurulmalıdır. Yalnızca görsel düzenle anlam üretilmemelidir.
Ekran okuyucu sırayı anlayabilmelidir. Erişilebilirlik tarafını web sitesi erişilebilirliği yazısında anlattık.
Klavye Kullanımı
Etkileşimli çizelgelerde klavyeyle gezinme mümkün olmalıdır. Ok tuşlarıyla durak değiştirme beklenen davranıştır.
Odak göstergesi görünür olmalıdır. Bu ayrıntı sık atlanır.
Renk Kontrastı
Hat ve metin renkleri yeterli kontrast sağlamalıdır. Açık gri metinler okunmaz.
Kontrast ölçülerek doğrulanmalıdır. Arka plan rengi de hesaba katılmalıdır.
Baskı Görünümü
Bazı çizelgeler çıktı alınabilir. Proje planları bu kapsamdadır.
Yazdırma düzeni test edilmelidir. Yatay çizelgeler baskıda kesilebilir.
İçerik Yönetimi
Duraklar yönetim panelinden eklenebilmelidir. Koda gömülü çizelgeler güncellenmez.
İçerik yönetimini içerik yönetim sistemi yazısında ele aldık. Sıralama kolay değiştirilebilmelidir.
Güncelleme
Şirket tarihi çizelgeleri yıllık güncellenmelidir. Son durağı birkaç yıl önce kalan çizelge ihmal izlenimi verir.
Güncelleme takvime bağlanmalıdır. Yeni duraklar eklendiğinde eskiler sadeleştirilebilir.
Kaynak Gösterimi
Tarihsel bilgiler doğru olmalıdır. Yanlış tarih kurumsal güveni zedeler.
Bilgiler iç kayıtlardan doğrulanmalıdır. Hafızaya dayanan tarihler sık hatalı çıkar ve sonradan düzeltilmesi zor olur.
Performans
Çok sayıda görsel ve animasyon sayfayı yavaşlatır. Görseller boyutlandırılmalıdır.
Hız ölçümünü Google PageSpeed Insights üzerinden yapabilirsiniz. Animasyonlar hafif tutulmalıdır.
Gelecek Planları
Bazı çizelgeler gelecekteki hedefleri de gösterir. Bu duraklar farklı bir biçimde işaretlenmelidir.
Gerçekleşmemiş hedefler açıkça ayrılmalıdır. Karışık gösterim yanıltıcı olur.
Tarih verilen hedefler takip edilmelidir. Geçmiş bir tarihte kalan hedef güven kaybı üretir.
Yaygın Hatalar
Zaman çizelgesi tasarımında tekrar eden birkaç hata görülür. Bunlar kolayca düzeltilebilir.
- Çok durak: Okunmaz uzunlukta liste.
- Uzun metin: Durak içinde paragraflar.
- Yatay mobil: Dar ekranda kullanılamaz.
- Eskimiş: Son durak yıllar öncesinde.
Bağlam Metni
Çizelgenin üstünde kısa bir giriş metni bulunmalıdır. Ziyaretçi neye baktığını bilmelidir.
Birkaç cümle yeterlidir. Uzun giriş metinleri çizelgeyi ekranın altına iter.
Sadeliğin Değeri
web sitesi zaman çizelgesi bölümü, az sayıda durak ve kısa metinlerle çalıştığında güçlü bir anlatım aracıdır. Kalabalıklaştığında ise düz metinden bile daha zor okunur.
Bu nedenle çizelge hazırlarken asıl iş, neyin gösterileceğine değil neyin çıkarılacağına karar vermektir.
Olayları ya da adımları kronolojik sırayla görsel bir hat üzerinde sunan bölümdür.
Şirket tarihi, hizmet süreç adımları, proje planı ve sipariş durumu gösteriminde.
Dikey düzen daha fazla metin taşır ve mobilde doğal akar; yatay düzen daha az yer kaplar.
Önemli olanlar seçilmeli; yirmi yıllık geçmiş beş altı durakla anlatılabilir.
Tarih, kısa başlık ve birkaç cümle; ayrıntı için bağlantı verilmelidir.
Renk tek başına yeterli olmamalı; simge ya da metin de kullanılmalıdır.
Dikey düzene geçilmeli ve duraklar arası boşluk artırılmalıdır.
Anlamlı liste yapısı kurulmalı, klavyeyle gezinme ve yeterli renk kontrastı sağlanmalıdır.
Çok sayıda durak, uzun metinler, mobilde yatay düzen ve güncellenmemiş son durak.
Çizelge, az şey gösterdiğinde çok şey anlatır. web sitesi zaman çizelgesi bölümü kurulurken durak sayısını sınırlamak, metinleri kısa tutmak, tamamlanma durumunu renk dışında da belirtmek, mobilde dikey düzene geçmek ve yıllık güncelleme yapmak gerekir. Süreç tarafını proje teslim süreci yazımızda ele aldık.
BİZE ULAŞIN
Bizimle iletişime geçerek projeniz için hemen ücretsiz teklif alabilirsiniz.
