CNN'nin Yeni Web Sitesi Tasarımı İnşa Edildi
26 Ekim Pazartesi günü CNN.com yeni bir web sitesi tasarımı geliştirdi ve bilgi-ağır mizanpajında bazı önemli değişiklikler yaptı.
Yeni tasarım güzel, temiz, düzenli ve iyi yapılandırılmış. Göz atmaya ve başka bir sayfaya geçmek amacıyla ilginç bir şeyleri bulmaya davet ediyor.
Önceki tasarım biraz darmadağın ve çok davetkar değildi; içerik baktı görünüyordu yapılandırılmamış bir alana zorlanıyordu. Yeni düzen çok farklı ve modern web tasarımı ve kullanılabilirlik en iyi uygulamaları ve trendleri bir dizi kucaklar .
Dolayısıyla, sadece kayda değer gelişmeler değil, aynı zamanda şüpheli tasarım ve kullanılabilirlik kararlarından bazılarına daha ayrıntılı bir şekilde bakalım.
Kılavuz-İlham Düzeni
“Izgaradan ilham alan” ifadesini kullanıyorum çünkü yeni tasarım bir ızgaraya dayanıyor gibi görünüyor, ancak elemanların hassas hizalanması tam olarak orada değil.
Onların bakışlarına göz kulak olmak birincil stil sayfası , stillerini ve ızgaralarını gevşek bir şekilde temel almış görünüyorlar. Blueprint CSS çerçeve.
CSS sıfırlamaları Blueprint çerçevesine birçok benzerlik taşır ve “blueprint” kelimesi en üstte yer alır, bu yüzden Blueprint hakkındaki sınırlı bilgiye dayanarak mantıklı bir değerlendirme olacaktır.
Ana sayfanın ekran görüntüsünü analiz ettikten sonra, yeni düzeni bir ızgaraya dayandırırsa, o kılavuzun özellikleri şöyle olacaktır: 16 sütun, sütun başına 50 piksel, 12 piksel paçavra ile (sütunlar arasındaki boşluk), toplam genişlik 980px.
Aşağıda, bir Photoshop’un belirttiği gibi benim ızgara tahminimin görsel bir temsili var:
Sayfadaki öğeler, bir ızgara düzeninden olağan bir şekilde beklenebilecek hizalama ve denge türlerini takip etmese de, bu düzende, aşağıda gösterilen önceki tasarıma göre dikkat çekici bir gelişme vardır:
Yeni sayfa düzeni, tüm sayfa öğelerini 980px genişliğindeki kapsayıcının içinde tutuyor. Bu, tüm sayfanın sabit genişlikli bir içerik bölümünün üzerinde yer alan akışkan genişliğinde bir üstbilgiye sahip, tıknaz görünümlü önceki tasarımının aksine.
Ayrıca, eski tasarım yuvarlatılmış köşeler ve kare arasında karar veremese de, yeni tasarım, aşağıdaki resimde gösterildiği gibi, uygun elemanları ayıran ince eğimli efektlerle kare köşelere sahiptir.
Biçim, ızgara benzeri olsa da, belirtildiği gibi, sıkı bir ızgara biçimi değil ve katın altındaki bölümler, yukarıdakilerden yapı bakımından oldukça fazladır.
Drastically Geliştirilmiş Başlık Bölümü
Yeni tasarımdaki en belirgin gelişmelerden biri başlık bölümüdür.
Yatay gezinme çubuğu modern, temiz ve net . Arama kutusu, kayıt seçeneği ve giriş bağlantısı, olması gereken yerde sağ üst köşede.
Ve, modern tasarımda site logosunu ortalamak geleneksel olmasa da, bu durumda çalışır. Kolayca unutulmayan çok baskın, canlı bir marka deneyimi yaratır.
Gezinme çubuğunun bir diğer güzel özelliği, ikincil olan ve mikro sitelerde veya kardeş sitelerde açılacak olan birincil ve birincil bağlantıları olan renk ve grafiklerle gösterilmesidir. İkincisi sağa dönük üçgenler (“Para” ve “Spor”) ile belirtilmiştir - daha fazlası aşağıdadır).
Mekanın Etkili Kullanımı
Sayfanın sağ tarafında, birincil reklam biriminin altında, akordeon tarzı bir içerik değiştirici dahil edildi. Bu sayede, kullanıcı, çok sayıda farklı konuyla ilgili içeriğin göreceli olarak küçük bir alanda önizlemelerini görüntülemesine olanak tanıyor.
Video ve Öykü Popülerliği Üzerindeki Vurgu
Önceki tasarımda, videonun sağ tarafında bir kutuda oldukça güçlü bir vurgu vardı. Yeni tasarımda, video, ana gezinme çubuğunda, "Ana Sayfa" bağlantısıyla neredeyse aynı görsel önem verilen büyük bir kategoridir .
Video hikayeleri site genelinde öne çıkarılmıştır ve aşağıda gösterildiği gibi video içeriğine bağlantı veren fotoğrafların geleneksel "oynat düğmesi" bağlantısıyla açıkça belirtilir:
Yukarıdaki resimde görüldüğü gibi, “Ev” ve “Video” ile aynı önem verilen başka bir kategori, yeni ve hala beta olan “NewsPulse” bölümüdür.
Bu bölüm, popülerlikle ilgili haber öykülerini (toplam sayfa görüntüleme sayısıyla değil, yorumlarla hesaplanmış gibi görünüyor) görüntüler ve okuyucunun sonuçları kategoriye veya hikaye türüne göre filtrelemesini sağlar.
Güçlü Kategori Sayfaları
Birincil gezinme çubuğundan erişilen ana kategori sayfaları (“ABD”, “Dünya”, “Politika” vb.), Ana sayfaya benzer şekilde çalışır .
Aslında, hangi sayfada olduğunuzu bilmiyorsanız, ana sayfada olduğunuzu düşünebilirsiniz. “ABD” kategorisi aşağıda gösterilmiştir:
Bu bölümlerin her biri, en iyi öyküleri, en son haberleri ve bu kategoriyle ilgili diğer öğeleri rahatça gösterir.
Ana sayfada ve makale sayfalarında da yer alan görüntülerin altındaki siyah ve beyaz başlıklar , aşırı süslü grafikler veya yazı tipi stilleri kullanılmadan göz alıcı ve okunması kolay.
Güçlü Makale Sayfaları
Makale sayfaları, çoğunlukla, ana sayfanın canlı markasını koruyor. Gövde metni 14px Arial'de çok okunabilir çizgi yüksekliği ile güzel bir şekilde görüntülenir.
Sayfalardaki bazı öğeler biraz küçük gibi görünse de, ben şahsen makale gövdesinin yazı tipi boyutunun sayfada göze çarpmasını seviyorum, böylece okuyucu üzerinde odaklanmaya devam edebilir.
Ayrıca, her bir öykünün sol tarafında, mevcut öyküyü birkaç madde işaretli listede özetleyen “Öykü Öne Çıkanlar” adlı bir bölüm var. Bu, CNN tasarımcılarının, kullanıcıların uzun materyali “taraması” için çevrimiçi eğilimlerinin farkında olduklarını gösteriyor.
Bilgi bombardımanı
Yeni tasarımın tüm olumsuz yönlerinden, muhtemelen ilk ortaya çıkan sorun, daha önce tartışıldığı gibi, daha yapısal ve organize olmasına rağmen, ana sayfadaki bağlantıların ve bilgilerin aşırı yüklenmesidir.
Ana sayfa yaklaşık iki buçuk ekran uzunluğundadır ve ana gezinme çubuğundaki öğeleri kopyalayan bölümler içerir ve her kategorinin altında yaklaşık yarım düzine alt bağlantı bulunur. Bu bölümler ekranın altında görünür ve bu resimde gösterilir:
CNN, dünyanın en popüler sitelerinden biri olduğu için (her ay 38 milyon tekil ziyaretçi), bu bölümler diğer sitelere kıyasla çok daha fazla trafik alacaktır, ancak, katın çok altında gözüktüğü için ve çok fazla şey olduğu için bağlantılar, ana sayfadan bu bağlantıları ziyaret eden göreceli miktarın büyük olasılıkla oldukça düşük olması muhtemeldir.
Önemli Bölümler Gömülü?
Yukarıda belirtildiği gibi, ana sayfadaki pek çok bilgi katlamanın altında görünüyor. Ve önemli bir şekilde, bazı önemli içeriğin ana sayfanın alt kısmına , başlığın altındaki iki tam ekranın altına tamamen gömülü olduğu anlaşılıyor.
Örneğin, “Sıcak Konular” başlıklı bir bölüm sağ tarafta, bazı tanıtımların ve reklamların hemen üstünde, sağ tarafta görünür.
Bu bölümün akordeon içerik değiştiricisinin yerini alacağı veya akordeon içine dahil edileceği daha mantıklı görünmektedir.
“Sıcak Konular” ın altında görünen reklamlar ve tanıtımlar, konumlarının ortaya koymasından daha önemli görünmektedir. Yine, bu kadar yüksek trafikli bir web sitesinin bu alanlarda çok sayıda tıklama almasına rağmen, katın üstündeki bölümlere ve reklamlara kıyasla tıklama oranı muhtemelen büyük ölçüde farklı olacaktır.
Tabii ki, CNN'nin üreticileri hangi içeriğin en önemli olduğunu biliyorlar ve kullanıcılarının alışkanlıklarını herkesten daha iyi anlıyorlar - ancak bu düzen ve kullanılabilirlik zorlukları diğer geliştiricilerin benzer kararlarla karşı karşıya kalması durumunda analiz etmede yardımcı oluyor.
Kullanılabilirlik Gizemleri
Yeni sitede, optimum kullanılabilirlik için tasarlanamayan birkaç öğe vardır.
Bir örnek, mikro site bağlantılarının her birinde görünen sağa dönük üçgendir . İlk bakışta, o üçgenlerin ne için olduğundan emin değildim. Görünecek bir JavaScript kaydırıcı bölümünü belirtiyorlar.
Bazı kullanıcılara tam dikkat göstermeyen kullanıcılar, açılır menüler oluşturan aşağı doğru işaret eden oklar için onları yanlış bile gösterebilirler.
Bu yeterli olurdu - ama sonra bu bağlantıların yeni bir pencerede açılan, bu durumda doğru olmayan kullanıcılar olduğunu varsayarak sorunu sunacaktı. Daha önce tartışılan akordeon içerik değiştiricisinin de birkaç kullanılabilirlik sorunu var. İlk olarak, JavaScript devre dışı bırakıldığında, akordeon işe yaramaz hale gelir ve herhangi bir içerik göstermez.
Tüm içeriği görüntülemek için varsayılan olarak genişletmeli veya öğelerden birini görüntülemelidir. Ayrıca, akordeon bölümleri için köprülü başlıklar hala kendi bölümlerine bağlamalıdır, ancak yapmazlar.
Akordeon içeriğiyle ilgili başka bir problem, içerdiği metin çok küçük olduğu için akordeon içerisinde tıklanabilir olanın her zaman açık olmamasıdır. Bu, bağlantıların akordeon içeriğinin geri kalanından daha az ayrılmasını sağlar.
Aşağıdaki resimde, çizdiğim kırmızı ok iki madde işaretli liste öğesini işaret ediyor. Bu liste öğelerindeki metin köprülerdir, ancak ilk bakışta bu açık değildir.
Bazı Kesimler Hala Eski Tasarımı Yansıtıyor
Bir sitenin CNN'lerin büyüklüğünde yeniden tasarlanmasında olduğu gibi, bazı bölümler tüm sayfalar tam olarak bütünleşene kadar eski tasarımı yansıtmaya devam edecektir.
Bu genellikle, sık sık ziyaret edilmeyecek eski içerikler için geçerlidir, ancak CNN durumunda, bazı önemli bölümler hala eski cilde sahiptir.
İki örnek vardır hakkında ve temas sayfaları.
Küçük Tipografi
Modern web tasarım trendlerine uymayan belirli bir tasarım sorunu, küçük metin ve küçük tipografik elemanların kullanılmasıdır.
Akordeon içeriğindeki yazı tipinin küçük boyutu daha önce tartışıldı. Ayrıca, makale ve video sayfalarında, ana sayfada “Son Haberler” bölümü, başlıkta “Kayıt” ve “Giriş” linkleri ve katın altındaki metin linkleri üzerinde görünen “paylaşım” araç çubuğu da vardır. ana sayfa, birkaç söz.
Yukarıda gösterilen “paylaşım” araç çubuğu daha büyük tipografi ile daha etkili olur mu? Aşağıda gösterilen “önerilen” bölüm veya daha küçük tipli diğer bölümler hakkında ne düşünüyorsunuz?
Sonuç
Yeni CNN.com sitesi, burada tartışılmayan haber servislerine ve özelleştirilmiş içeriğe daha fazla önem veren bir dizi özellik ekledi. Aşağıdaki ilk bağlantı, yeni özelliklerin bazılarını ele alan CNN tarafından sunulan bir video içermektedir.
Yeni sitenin eskiden çok daha güzel ve ilginç bir kullanıcı deneyimi sunduğunu kesinlikle düşünüyorum ve akordeon içerik değiştiricisindeki zayıflıkların yanı sıra, yeni tasarıma getirilen dezavantajlar da bu kadar önemli değil.
Yeni CNN.com'un tasarımına çok fazla zaman ve planlama gibi geldi ve web tasarımcılarının ve kendi sitelerinde kullanılabilirliği geliştirmeye ilgi duyanların , göz önünde bulundurulacak değişikliklerden bazılarını dikkate almaya çalışacağını düşünüyorum. CNN'nin yeni web sitesinde.
Daha fazla okuma
- Yeni CNN.com'a hoş geldiniz (CNN.com'daki Video)
- Yeni CNN.com (TechCrunch'ta İlk Ekran Görüntüleri)
- Yeni CNN.com Goes Live: Ne Düşünüyorsun?
Bu yazı serbest yazar ve web geliştiricisi Louis Lazaris tarafından Webdesigner Deposu için özel olarak yazılmıştır. Louis koşuyor Etkileyici Webler Web tasarımında makaleler ve eğitimler yayınlar. Louis'i takip edebilirsin Twitter'dan ya da onunla temasa geç web sitesi aracılığıyla .
CNN'nin yeni site tasarımı hakkında nelerden hoşlanırsınız veya sevmiyorsunuz? Yorumlarınızı aşağıda paylaşın.