Happy Cog'ın VisitPhilly.Com'un Yeniden Tasarımı:
Örnek Bir Modern Web Sitesi
Ocak ayında, Jason Santa Maria bir cıvıldamak bunu ilan etmek visitphilly.com dünyaca ünlü tasarım stüdyosu tarafından yeniden tasarlandı Mutlu Cog . İlgi alanım titredi ve yardım edemedim ama bir göz atmaya başladım.
Dürüstçe söyleyebilirim ki, bir web sitesi yeniden tasarladığımdan daha fazla etkilenmemiştim.
Happy Cog'ın bu kadar geniş bir web sitesini güzel, erişilebilir, işlevsel ve davetkar bir kullanıcı deneyime dönüştürebilmesi, Happy Cog'taki ekibin yeteneğine tanıklık ediyor.
Hiçbir şekilde, bu projeye girmiş olması gereken planlama, tasarım ve geliştirmeye adalet eden bir eleştiri sunma konumunda değilim.
Ancak, bu yeniden tasarımın neden bugünün pazarı için güzel ve etkili bir web sitesi tasarımını ortaya çıkardığını belirtmenin yararlı olacağını düşündüm.
Açık Amaçlı
Etki alanı adı, göz alıcı logo, açık açılır menüler, güzel fotoğrafçılık: Tüm bunlar ve web sitesinin farklı amacını (kullanıcıların Philadelphia şehrini ziyaret etmelerini teşvik etmek için) iletişim kurmada ve kullanıcıları keşfetmeye davet ederken daha fazla rol oynarlar. Web sitesi (oldukça şaşırtıcı bir şekilde) güzel bir Amerikan şehri.
Kullanıcının bildirdiği ilk gezinme öğeleri mega açılır menü bağlantıları ve ana dönen resmi kaplayan büyük metin bağlantıları.
Aşağıdaki ekran görüntüsü, “Yapılacaklar Yapılacak” (aktif olarak gösterilen), “Yolculuğunuzu Planla”, “Philly Now” ve görüntü örtüsünü “Power Lunch” olarak adlandırmaktadır.
Bu öğeler açıkça fark edilmek isteniyordu. Aşağıdaki fotoğrafta, kullanıcının ana sayfayı taramasının en olası göz yolunu haritalandırdım.
Kullanıcı, açılır menüden bir veya daha fazlasını belirledikten (ve muhtemelen keşfederek) sonra, aktif görüntü ile ilgili metni tarar ve ardından “Yenilikler” etiketli bölüme doğru aşağıya doğru hareket eder ve son olarak neredeyse tam olarak çevreye geri döner. arama kutusunun yanındaki başlık.
İçerik, kullanıcının saniyeler içinde sayfanın en önemli bölümleri boyunca bilgilendirici ve görsel olarak unutulmaz bir gezinti yapabilmesi için düzenlenmiştir.
Bu kadar çok içeriğin keşfedilmesine rağmen kullanıcı muhtemelen geciktirilemez, karışık veya bunalmış olmaz.
Asgari Birincil Bağlantılar
Belirtildiği gibi, en göze çarpan alanlardan biri açılır menüdür. Burada asgari sayıda ana bağlantıya bağlı kalma kararı doğru olanıdır.
Sadece üç bağa sahip olmak, öğelerin daha büyük bir yazı tipinde görüntülenmesini sağlar, böylece kullanıcının dikkatini çeker ve web sitesinin odaklanmış yapısını gösterir.
Minimum gezinme çubuğu, yeniden tasarlamadaki önemli değişikliklerden biridir ve büyük faydalar sağlar. Odaklanmayan eski tasarımdaki başlık bölümüne karşılaştırın:
Eski üstbilginin kötü tasarlanmamış veya kullanılamaz olmasına rağmen, odaklanmış değil, yeni olan kadar güzel değil. Diğer bir zayıflık ise, yeni web sitesinde açık ve çekici olan açılır menü göstergelerinin olmaması.
Bir kullanıcı (genellikle bir Google aramasında) gibi bir web sitesine geldiğinde, genellikle iki şeyden birini yapmak istemeyeceklerinden daha fazlası: Philadelphia kentinin seyahatlerini sunması veya planlaması için ne yapması gerektiğini görün.
Başlıktaki soyulmuş gezinme, kullanıcının bu hedefleri hızlı ve verimli bir şekilde gerçekleştirmesine yardımcı olur.
Güzel Tipografi
Happy Cog'den daha az bir şey bekler miyiz? “Philadelphia ve Kırsal” logosu için kullanılan yazı tipini kesinlikle seviyorum.
Son derece batılı bir his var ama hala modern ve onurlu. Markalamayı tutarlı tutmak için, yazı tipi web sitesi genelinde birçok başlık için yeniden kullanılır, bazıları aşağıdaki ekran görüntüsünde vurgulanır.
Web sitesinin geri kalanındaki metnin çoğu, Arial'in ara sıra kullanımı ile Gürcistan yazı tipindedir, ancak oldukça zarif bir şekilde yapılmıştır. Web sitesinin çeşitli başlıklar, gövde kopyaları, başlıklar ve diğer tanımlayıcı unsurlar karışımı son derece okunabilir ve zevkli bir şekilde sunulur.
İç sayfalarda bile içeriğin miktarına rağmen, kullanıcı deneyimden farklı olarak aşırı derecede hissedilirse eski web sitesi .
Artan Performans ve Algılanan Hız
Bu kadar çok içeriğe ve çok fazla görüntüye sahip bir web sitesi, kaçınılmaz olarak performansa çarptı. Geliştiriciler bu konuda bilinçliydi ve herhangi bir gecikmeli yükleme içeriğinin dikkat dağıtmayacağından veya ziyaretçilerin pes etmesine ve aramaya neden olmasına özen gösterdiler. başka bir Pennsylvanian şehri .
Aşağıda gösterildiği gibi, kullanıcı ana sayfayı ziyaret ettiğinde, yüklenecek son öğe yeni düzendeki en önemli öğelerden biridir: ana dönen görüntü. Ancak gerçek yavaşlık, içerik yükleme göstergesiyle (dönen animasyon grafiği) azaltılır:
Bu kullanılabilirlik geliştirme, büyük resimlerle de sınırlı değildir. Açılır menülerdeki içerik çeşitliliği nedeniyle, Ajax aracılığıyla menü içeriği yük olarak benzer bir içerik yükleme grafiği görüntülenir:
Bu menü için geliştirme zorunludur, çünkü açılır menüler normalde tetiklendiğinde gecikmez.
Hiçbir yükleme göstergesi karışıklığa neden olabilir, muhtemelen kullanıcının faresini uzaklaştırır ve sonra da neden geri çekilir, neden işlevsellik sıkışır.
Dolayısıyla, sayfa aslında daha hızlı yüklenmese de algılanan hız artar. Bu, tüm tasarımcıların ve geliştiricilerin sadece gerçek hızı değil, algılanan hızı da düşünmeleri için bir derstir.
Kullanıcı Odaklı Özellikler
Yeni web sitesinin en önemli özelliklerinden biri de, yeni tasarıma geçişin yoludur, bu da geri dönen ziyaretçilerin şiddetli değişimlerden etkilenmemesini sağlar.
Web sitesini ilk kez ziyaret ettiğinizde, sayfanın üst kısmında, web sitesinin yeniden tasarlandığını ve hâlâ beta olduğunu bildiren büyük bir kırmızı banner görürsünüz. Eski arayüzü kullanarak web sitesine göz atma seçeneği sunulur.
Eski yerleşime alışık olan ziyaretçilere vermek ve ona geri dönme seçeneğini yapılandırmak çok önemlidir çünkü tanıdık içeriği bulmaya çalışırken hayal kırıklığına uğramamasını sağlar.
Bu kadar büyük bir web sitesinde, özellikle kullanıcı odaklı tasarımlarıyla tanınan bir şirket tarafından yeniden tasarlanan bu büyük mimari değişiklikler ve iyileştirmeler, eski stile alışmış olan ziyaretçileri atmak zorunda kalıyor.
Kızıl bayraktaki mesaj, daha sonra ziyaretçi tarafında herhangi bir karışıklık veya hayal kırıklığını önler.
Eski web sitesini yenisiyle karşılaştırarak çok fazla zaman geçirmedim, bu yüzden içeriğin ve mimarinin ne kadar benzer olduğunu doğrulayamıyorum, ancak eski web sitesini ziyaret etme seçeneğine sahip olduğumuz için içeriğin benzer olması gerekiyor. Her iki versiyonda güncel olaylara ve düzenli olarak güncellenen diğer öğelere erişebilmemiz için yeterlidir.
Ortak bir unsur, arama kutusunun üzerinde görünen ve kullanıcıların “beta anketi” doldurmaya davet ederek yeni tasarımla ilgili geri bildirim talep eden bağlantıdır. Bu özellik, sahiplerin kullanıcıların web sitesini nasıl deneyimledikleri ve algıladıkları konusunda endişe duyduklarını göstermektedir.
Tamamen Erişilebilir İçerik
Happy Cog ekibinin üyelerinin çoğu, web standartlarının ve erişilebilir içeriğin savunuculuğu için iyi bilinir, bu nedenle bu web sitesinin herhangi bir platformdaki hemen hemen her kullanıcı için tamamen erişilebilir olması şaşırtıcı değildir.
JavaScript devre dışı bırakıldığında, pek çok geliştirme artık mevcut olmasa bile, kullanıcının web sitesi deneyimi çok benzerdir.
CSS text-indent özellik, başlıktaki metni özel yazı tipini gösteren resimlerle değiştirmek için kullanılır. Bu, sayfaların semantik, SEO dostu ve tüm kullanıcılar tarafından görülebilir olmasını sağlar.
Aşağıdaki resim, dahili bir sayfadaki bir başlığı, soldaki stil devre dışıyken, sağda etkin olanı göstermektedir.
Başlıkların, anlamsal değerlerini kaybetmeden ve tasarımcılar gereksiz yere karmaşık yazı tipi değiştirme yöntemlerine başvurmadan resimlerle nasıl geliştirildiğini görebiliriz.
Diğer bir önemli erişilebilirlik özelliği, JavaScript geliştirmelerinin nasıl uygulandığıdır. Ana sayfa, biri “Kitap Çevrimiçi” olarak adlandırılan ve diğeri visitphilly.com'un sosyal ağlarına bağlanan iki sekmeli içerik anahtarlayıcısına sahiptir:
JavaScript devre dışı bırakıldığında, her iki sekmeli kutudaki tüm içerik görüntülenir. Sekmeli widget'lara sahip pek çok web sitesi, JavaScript devre dışı bırakıldığında yalnızca bir kutu görüntüler, ancak bu genellikle en iyi uygulama değildir.
Bu teknik, bir dizi özellik için web sitesi boyunca tutarlı bir şekilde kullanılır ve davranış katmanının (yani Ajax ve JavaScript) bir zorunluluk değil, bir zorunluluk olmasını sağlar.
Bu, içeriği yalnızca JavaScript olmadan göz atmakta olan kullanıcılara değil, Googlebot gibi motor örümceklerini de arama yapan kullanıcılara da ulaştırır.
Tasarımdaki Zayıflıklar?
Yine, Happy Cog gibi bir şirketin yaptığı bir tasarımı eleştirmek için hiçbir durumda değilim. Ancak yeni tasarım ve yapıdaki iki küçük zayıflığı (dikkatlice) belirteceğim.
İlk olarak, birincil navigasyon menüsünde üçüncü bağlantının ifadesini biraz belirsiz buluyorum (“Philly Now”).
Bunun ne anlama geldiğini bilmiyordum. Mevcut olayları kastettiğini varsaymıştım, ama görünüşe göre olayların, hava durumunun ve güncel fotoğrafların bir bileşimi. Hala nasıl tarif edileceğinden emin değilim ve bağlantının nadiren tıklanacağı hissine kapılıyorum.
Diğer zayıflık iç sayfalarda ikincil navigasyon menüsünde sağa dönük üçgenler:
Bu üçgenlerin sineklik menüleri olduğunu düşündüm, ama uçurum yok. Üçgenler, kullanıcının dikkatini içerik alanına çekmek için sadece işaretçilerdir. Sağa bakan üçgenler, bağımsız bağlantılar ve sineklik menüler için en iyi şekilde ayrılır, bunun gibi dikey gezinme değildir.
Ana sayfada aynı şeyi buluyoruz, ancak buradakiler o kadar da kötü değil çünkü oklar JavaScript tabanlı içerik değiştiricinin bir parçası.
Bu “zayıflıkların” ikisi de kullanıcı deneyimlerine zarar veriyor. Ve sadece iki zayıflık bulabildiğim gerçeği, bunu yeniden tasarlamanın ne kadar büyük olduğunu gösteriyor.
Muayene ve Taklite Değer Vermek
Bu makalenin kapsamı dışında, tasarımın etkinliği ve visitphilly.com'un kodu hakkında çok daha fazla şey söylenebilir.
Burada tartıştığımıza ek olarak, geçerli ve iyi yorumlanmış kodu, beyaz alanın etkili kullanımını, görsel hiyerarşiyi, mükemmel renk seçimlerini, IE6'daki hemen hemen aynı deneyimi ve daha fazlasını gösterebilirim.
Umarım bu analiz, bu yeni tasarımın temel özelliklerinden bazılarına ve sektördeki modern web tasarımını nasıl örneklendirdiğine dair genel bir bakış sunar.
Daha fazla okuma
- Büyük Philadelphia Turizm Pazarlama A.Ş. yepyeni visitphilly.com başlattı
- Mutlu Cog Stüdyoları Portföyü
- Happy Cog'ın VisitPhilly'nin İncelemesi
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 .
Yeni visitphilly.com hoşunuza gitti mi? Tasarımın, düzenin veya mimarinin diğer özellikleri kullanıcı deneyimini iyileştirir mi? Lütfen aşağıdaki yorumlarınızı gönderin.