Happy Cogs Redesign von VisitPhilly.Com:
Eine vorbildliche moderne Website
Im Januar schickte Jason Santa Maria eine tweeten das ankündigend visitphilly.com wurde vom weltberühmten Designstudio neu gestaltet Glückliche Zahn . Mein Interesse war geweckt, und ich konnte nicht anders, als einen Blick darauf zu werfen.
Ich kann ehrlich sagen, dass ich noch nie von einem Website-Design mehr beeindruckt war als von diesem.
Dass Happy Cog eine so große Website in ein schönes, zugängliches, funktionales und einladendes Nutzererlebnis verwandeln konnte, zeugt vom Talent des Teams von Happy Cog.
Ich bin keineswegs in der Lage, eine Kritik zu geben, die der Planung, dem Design und der Entwicklung gerecht wird, die in dieses Projekt eingeflossen sein müssen.
Aber ich dachte, es wäre nützlich, darauf hinzuweisen, warum dieses Redesign ein schönes und effektives Website-Design für den heutigen Markt verkörpert.
Ein klarer Zweck
Der Domainname, ein auffälliges Logo, klare Drop-down-Menüs, schöne Fotografie: all dies und mehr spielen eine Schlüsselrolle bei der Kommunikation des Zwecks der Website (um die Nutzer dazu zu ermutigen, die Stadt Philadelphia zu besuchen) und um die Benutzer dazu einzuladen Die Website ist (ziemlich überraschend) eine schöne amerikanische Stadt.
Die ersten Navigationselemente, die der Benutzer bemerkt, sind die Mega-Dropdown-Menü-Links und die großen Textlinks, die das rotierende Hauptbild überlagern.
Der folgende Screenshot hebt diese Links hervor, nämlich "Dinge zu tun" (die aktiv angezeigt wird), "Plane deine Reise", "Philly Now" und die Bildüberlagerung "Power Lunch".
Diese Gegenstände sollten offensichtlich sofort bemerkt werden. In der Abbildung unten habe ich den wahrscheinlichsten Blickpfad eines Benutzers, der die Homepage scannt, zugeordnet.
Nach dem Aufspüren (und möglicherweise Erkunden) eines oder mehrerer der Dropdown-Menüs würde der Benutzer den mit dem aktiven Bild zusammenhängenden Text scannen und dann natürlich zu dem Abschnitt mit dem Titel "Was ist neu" zurückkehren, um schließlich fast den vollen Kreis zu erreichen der Header in der Nähe des Suchfelds.
Der Inhalt ist so organisiert, dass der Benutzer innerhalb von Sekunden eine informative und visuell denkbare Wanderung durch die wichtigsten Abschnitte der Seite machen kann.
Der Benutzer wäre wahrscheinlich nicht verspätet, verwirrt oder überfordert, obwohl so viel Inhalt zur Verfügung steht.
Ein Minimum an primären Links
Wie bereits erwähnt, ist einer der prominentesten Bereiche das Dropdown-Menü. Die Entscheidung, sich hier auf eine Mindestanzahl von primären Links zu beschränken, ist richtig.
Da nur drei Links vorhanden sind, können die Elemente in einer größeren Schrift angezeigt werden, wodurch die Aufmerksamkeit des Benutzers geweckt und die fokussierte Struktur der Website demonstriert wird.
Die minimale Navigationsleiste ist eine der wichtigsten Änderungen im Redesign und bringt große Vorteile. Vergleichen Sie es mit dem Header-Bereich im alten Design, der nicht so fokussiert ist:
Obwohl der alte Header nicht schlecht entworfen oder unbrauchbar ist, ist er nicht so fokussiert und nicht annähernd so schön wie der neue. Eine weitere Schwäche ist das Fehlen von Drop-Down-Menü-Indikatoren, die auf der neuen Website klar und attraktiv sind.
Wenn ein Nutzer auf eine Website wie diese gelangt (oft über eine Google-Suche), werden sie in der Regel eines von zwei Dingen tun wollen: Sehen Sie, was die Stadt Philadelphia zu bieten hat oder planen Sie ihre Reise.
Die abgespeckte Navigation in der Kopfzeile hilft dem Benutzer, diese Ziele schnell und effizient zu erreichen.
Schöne Typografie
Würden wir von Happy Cog etwas weniger erwarten? Ich liebe die Schriftart, die für das Logo "Philadelphia and the Countryside" verwendet wird.
Es hat eine subtile westliche Atmosphäre, ist aber immer noch modern und würdevoll. Um das Branding konsistent zu halten, wird die Schriftart für viele Überschriften auf der Website wiederverwendet, von denen einige im folgenden Screenshot hervorgehoben sind.
Der größte Teil des Textes auf dem Rest der Website ist in Georgia Schrift, mit gelegentlicher Verwendung von Arial, aber ziemlich elegant. Der vielfältige Mix aus Überschriften, Bodycopy, Bildunterschriften und anderen beschreibenden Elementen der Website ist äußerst lesenswert und geschmackvoll präsentiert.
Trotz der Menge an Inhalten, selbst auf internen Seiten, fühlt sich der Benutzer selten, wenn überhaupt, überwältigt, im Gegensatz zu der Erfahrung auf der alte Webseite .
Erhöhte Leistung und wahrgenommene Geschwindigkeit
Eine Website mit so viel Inhalt und so vielen Bildern hat zwangsläufig einen Leistungseinbruch. Die Entwickler waren sich dessen bewusst und sorgten mit großer Sorgfalt dafür, dass verzögerte Inhalte nicht störend wirken oder die Besucher aufgeben und schauen eine andere Pennsylvanian Stadt .
Wenn der Benutzer die Startseite aufruft, ist das letzte Element, das geladen werden soll, eines der wichtigsten Elemente im neuen Layout: das rotierende Hauptbild. Die tatsächliche Langsamkeit wird jedoch durch den Inhaltsladeindikator (die sich drehende animierte Grafik) gemildert:
Diese Verbesserung der Benutzerfreundlichkeit ist auch nicht auf große Bilder beschränkt. Aufgrund der Vielfalt der Inhalte in den Dropdown-Menüs wird eine ähnliche Grafik zum Laden von Inhalten angezeigt, wenn der Menüinhalt über Ajax geladen wird:
Für dieses Menü ist die Erweiterung zwingend erforderlich, da Drop-Down-Menüs normalerweise nicht verzögert werden, wenn sie ausgelöst werden.
Kein Ladeindikator hätte Verwirrung stiftet, möglicherweise die Benutzermaus weg und dann die Maus zurück, sich wundernd, warum die Funktionalität steckenbleibt.
Obwohl die Seite nicht wirklich schneller geladen wird, erhöht sich die wahrgenommene Geschwindigkeit. Dies ist eine Lektion für alle Designer und Entwickler, nicht nur an die tatsächliche Geschwindigkeit, sondern auch an die wahrgenommene Geschwindigkeit zu denken.
Benutzerorientierte Funktionen
Eines der wichtigsten Merkmale der neuen Website ist die Art und Weise, in der der Übergang zum neuen Design erfolgt ist. Dies stellt sicher, dass wiederkehrende Besucher nicht von den drastischen Veränderungen schockiert werden.
Wenn Sie die Website zum ersten Mal besuchen, bemerken Sie ein großes rotes Banner oben auf der Seite, das Sie darüber informiert, dass die Website neu gestaltet wurde und noch in der Betaversion ist. Sie haben die Möglichkeit, die Website mit der alten Benutzeroberfläche zu durchsuchen.
Es ist von entscheidender Bedeutung, Besuchern, die mit dem alten Layout und der Struktur vertraut sind, die Möglichkeit zu geben, darauf zurückzugelangen, da sie sicherstellen, dass sie nicht frustriert werden, wenn sie versuchen, vertraute Inhalte zu finden.
Auf einer so großen Website, vor allem einer, die von einer Firma, die für ihre benutzerorientierten Designs bekannt ist, neu gestaltet wurde, werden solche architektonischen Veränderungen und Verbesserungen die Besucher, die sich an den alten Stil gewöhnt haben, abwerfen.
Die Nachricht im roten Banner verhindert Verwirrung und Frustration seitens der Besucher.
Ich habe nicht viel Zeit damit verbracht, die alte Website mit der neuen zu vergleichen, daher kann ich nicht bestätigen, wie ähnlich die Inhalte und Architekturen sind, aber da wir die Möglichkeit haben, die alte Website zu besuchen, müssen die Inhalte ähnlich sein Genug, wenn wir in beiden Versionen auf aktuelle Ereignisse und andere regelmäßig aktualisierte Elemente zugreifen können.
Ein übliches Element ist der Link, der über dem Suchfeld erscheint, um Feedback zum neuen Design einzuholen, indem Benutzer dazu eingeladen werden, eine "Beta-Umfrage" auszufüllen. Dieses Feature zeigt, dass die Eigentümer sich Sorgen darüber machen, wie Nutzer die Website wahrnehmen und wahrnehmen.
Vollständig zugänglicher Inhalt
Viele der Mitglieder des Happy Cog-Teams sind im Internet bekannt für ihre Befürwortung von Webstandards und barrierefreien Inhalten. Es überrascht daher nicht, dass diese Website für praktisch jeden Benutzer auf jeder Plattform zugänglich ist.
Wenn JavaScript deaktiviert ist, ist die Benutzererfahrung der Website sehr ähnlich, auch wenn viele Verbesserungen nicht mehr verfügbar sind.
Das CSS text-indent Eigenschaft wird verwendet, um den Text in den Überschriften durch Bilder mit der benutzerdefinierten Schriftart zu ersetzen. Dies stellt sicher, dass die Seiten semantisch, SEO-freundlich und für alle Benutzer sichtbar bleiben.
Das Bild unten zeigt eine Überschrift auf einer internen Seite, auf der linken Seite mit deaktiviertem Stil, auf der rechten Seite mit aktiviertem Stil.
Wir können sehen, wie die Überschriften durch Bilder verbessert werden, ohne ihren semantischen Wert zu verlieren und ohne dass die Konstrukteure auf unnötig komplexe Font-Replacement-Methoden zurückgreifen.
Eine weitere wichtige Eingabehilfe ist die Implementierung der JavaScript-Erweiterungen. Die Startseite verfügt über zwei Registerkarten mit Inhaltsumschaltung, eine mit dem Namen "Book Online" und die andere mit den sozialen Netzwerken von visitphilly.com:
Wenn JavaScript deaktiviert ist, wird der gesamte Inhalt in beiden Registerkarten angezeigt. Viele Websites mit Widgets mit Registerkarten zeigen nur eine der Boxen an, wenn JavaScript deaktiviert ist. Dies ist jedoch im Allgemeinen keine bewährte Methode.
Diese Technik wird konsistent auf der Website für eine Reihe von Funktionen verwendet, um sicherzustellen, dass die Verhaltensebene (dh Ajax und JavaScript) eine Verbesserung darstellt, keine Notwendigkeit.
Dadurch wird der Inhalt nicht nur für Benutzer zugänglich, die ohne JavaScript navigieren, sondern auch Suchmaschinenspider wie Googlebot durchsuchen.
Irgendwelche Schwächen im Design?
Wiederum bin ich nicht in der Lage, ein Design, das von einer Firma wie Happy Cog stammt, ziemlich zu kritisieren. Aber ich werde (vorsichtig) zwei kleine Schwächen im neuen Design und der Struktur aufzeigen.
Zunächst finde ich den Wortlaut des dritten Links im primären Navigationsmenü etwas vage ("Philly Now").
Ich wusste nicht sofort, was das bedeutete. Ich hatte angenommen, dass es sich um aktuelle Ereignisse handelte, aber es ist anscheinend eine Kombination von Ereignissen, Wetter und aktuellen Fotos. Ich bin immer noch unsicher, wie ich es beschreiben soll, und ich habe das Gefühl, dass der Link selten angeklickt wird.
Die andere Schwäche sind die nach rechts zeigenden Dreiecke im sekundären Navigationsmenü auf internen Seiten:
Ich nahm an, dass diese Dreiecke Fly-Out-Menüs angezeigt haben, aber keine Ausstiege. Die Dreiecke sind nur Zeiger, um den Benutzer auf den Inhaltsbereich aufmerksam zu machen. Nach rechts zeigende Dreiecke sind am besten für Standalone-Links und Fly-Out-Menüs reserviert, nicht für eine vertikale Navigation wie diese.
Wir finden das gleiche auf der Homepage, aber es ist nicht so schlimm, weil die Pfeile Teil eines JavaScript-gesteuerten Inhaltsumschalters sind.
Keine dieser "Schwächen" beeinträchtigt die Benutzererfahrung sehr. Und die Tatsache, dass ich nur zwei Schwächen feststellen kann, zeigt, wie groß das Redesign wirklich ist.
Würdig für Prüfung und Nachahmung
Über die Wirksamkeit des Designs und des Codes von visitphilly.com, die über den Rahmen dieses Artikels hinausgehen, könnte noch viel mehr gesagt werden.
Zusätzlich zu dem, was wir hier besprochen haben, konnte ich den gültigen und gut kommentierten Code, die effektive Verwendung von Leerraum, die visuelle Hierarchie, die exzellente Farbauswahl, die praktisch identische Erfahrung in IE6 und mehr hervorheben.
Ich hoffe, dass diese Analyse einen guten Überblick über einige der Hauptmerkmale dieses neuen Designs gibt und wie es modernes Webdesign in der Branche verkörpert.
Weiterführende Literatur
- Größere Philadelphia Tourism Marketing Corp. startet brandneue visitphilly.com
- Glücklich Cog Studios Portfolio
- Happy Cogs Review von VisitPhilly
Dieser Beitrag wurde exklusiv für Webdesigner Depot von Louis Lazaris, einem freiberuflichen Autor und Webentwickler, geschrieben. Louis rennt Beeindruckende Webs wo er Artikel und Tutorials zum Thema Webdesign veröffentlicht. Sie können Louis folgen auf Twitter oder sich mit ihm in Verbindung setzen über seine Website .
Gefällt dir das neue visitphilly.com? Verbessern irgendwelche anderen Merkmale des Designs, des Layouts oder der Architektur die Benutzerfreundlichkeit? Bitte geben Sie Ihre Kommentare unten an.