Przeprojektowany przez Happy Cog VisitPhilly.Com:
Przykładowa nowoczesna strona internetowa
W styczniu Jason Santa Maria wysłał a ćwierkać ogłaszając to visitphilly.com został przeprojektowany przez światowej sławy studio projektowe Happy Cog . Moje zainteresowanie wzbudziło moje zainteresowanie i nie mogłem się powstrzymać, by rzucić okiem.
Mogę szczerze powiedzieć, że nigdy nie byłem bardziej pod wrażeniem przeprojektowania strony internetowej niż byłam z tym.
To, że Happy Cog był w stanie przekształcić tak dużą stronę internetową w piękne, dostępne, funkcjonalne i zachęcające doświadczenie użytkownika, świadczy o talencie zespołu w Happy Cog.
W żadnym wypadku nie jestem w stanie przedstawić krytyki, która oddaje sprawiedliwość planowaniu, projektowaniu i rozwojowi, które musiały przejść do tego projektu.
Pomyślałem jednak, że warto byłoby wskazać, dlaczego ten przeprojektowanie uosabia piękny i skuteczny projekt strony internetowej na dzisiejszym rynku.
Czysty cel
Nazwa domeny, przyciągające wzrok logo, przejrzyste menu rozwijane, piękna fotografia: wszystkie te i inne funkcje odgrywają kluczową rolę w komunikowaniu wyraźnego celu witryny (zachęcenie użytkowników do odwiedzenia miasta Filadelfia) oraz w zapraszaniu użytkowników do eksploracji poprzez strona internetowa, która jest (raczej zaskakująco) pięknym amerykańskim miastem.
Pierwsze elementy nawigacyjne, które zauważy użytkownik, to mega rozwijane menu oraz duże linki tekstowe, które nakładają się na główny obracający się obraz.
Poniższy zrzut ekranu ukazuje te linki, a mianowicie "rzeczy do zrobienia" (które są pokazywane jako aktywne), "Zaplanuj podróż", "Filadelfia teraz" i nakładkę obrazu "Moc lunch".
Te przedmioty oczywiście miały być natychmiast zauważone. W poniższym ujęciu mapowałem najbardziej prawdopodobną ścieżkę oka użytkownika skanującego stronę główną.
Po zanotowaniu (i ewentualnym eksplorowaniu) jednego lub większej liczby rozwijanych menu, użytkownik skanowałby tekst związany z aktywnym obrazem, a następnie naturalnie przesuwał się w dół do sekcji oznaczonej jako "Co nowego", aż w końcu prawie powrócił do nagłówek w pobliżu pola wyszukiwania.
Treść jest zorganizowana w taki sposób, aby użytkownik mógł w ciągu kilku sekund odbyć pouczającą i wizualnie zapadającą w pamięć wędrówkę przez najważniejsze sekcje strony.
Użytkownik nie będzie prawdopodobnie opóźniony, zdezorientowany ani przytłoczony, mimo że wiele treści jest dostępnych do zbadania.
Minimalna liczba podstawowych łączy
Jak wspomniano, jednym z najbardziej widocznych obszarów jest rozwijane menu. Decyzja o trzymaniu się minimalnej liczby głównych linków jest tutaj właściwa.
Posiadanie tylko trzech linków pozwala na wyświetlanie elementów w większej czcionce, dzięki czemu przyciąga uwagę użytkownika i demonstruje skoncentrowaną strukturę witryny.
Minimalny pasek nawigacyjny jest jedną z głównych zmian w przeprojektowaniu i przynosi ogromne korzyści. Porównaj go z nagłówkiem w starym projekcie, który nie jest tak skupiony:
Chociaż stary nagłówek nie jest źle zaprojektowany lub nie nadaje się do użytku, nie jest tak skupiony i nie tak piękny jak nowy. Kolejną słabością jest brak rozwijanych wskaźników menu, które na nowej stronie są przejrzyste i atrakcyjne.
Kiedy użytkownik trafia na taką stronę internetową (często przez wyszukiwarkę Google), najczęściej chce zrobić jedną z dwóch rzeczy: zobaczyć, co ma do zaoferowania miasto Filadelfia lub zaplanować podróż.
Rozproszona nawigacja w nagłówku pomaga użytkownikowi szybko i skutecznie osiągnąć te cele.
Piękna Typografia
Czy możemy oczekiwać czegoś mniej od Happy Cog? Całkowicie uwielbiam czcionkę używaną do logo "Filadelfia i okolica".
Ma subtelnie zachodni styl, ale wciąż jest nowoczesny i dostojny. Aby zachować spójność marki, czcionka jest ponownie wykorzystywana w wielu nagłówkach w całej witrynie, a niektóre z nich są wyróżnione na poniższym zrzucie ekranu.
Większość tekstu na pozostałej stronie jest w czcionce Georgia, z okazjonalnym wykorzystaniem Arial, ale zrobione dość elegancko. Zróżnicowane połączenie nagłówków, treści, podpisów i innych elementów opisowych witryny jest niezwykle czytelne i gustownie przedstawione.
Pomimo ilości treści, nawet na wewnętrznych stronach, użytkownik rzadko kiedy czuje się przytłoczony, w przeciwieństwie do doświadczenia stara strona internetowa .
Zwiększona wydajność i postrzegana prędkość
Strona z tak dużą ilością treści i tak wieloma obrazami nieuchronnie odbije się na wydajności. Deweloperzy byli tego świadomi i bardzo dbali o to, aby wszelkie treści z opóźnionym ładowaniem nie rozpraszały ani nie powodowały, że odwiedzający rezygnują i szukają inne miasto w Pensylwanii .
Jak pokazano poniżej, gdy użytkownik odwiedza stronę główną, ostatni element do załadowania jest jednym z najważniejszych elementów w nowym układzie: głównym obracającym się obrazem. Ale rzeczywiste spowolnienie jest łagodzone przez wskaźnik ładowania zawartości (obracająca animowana grafika):
To ulepszenie użyteczności nie ogranicza się również do dużych obrazów. Ze względu na różnorodność treści w rozwijanych menu, podobna treść ładowana jest wyświetlana jako zawartość menu ładowana przez Ajax:
W tym menu wzmocnienie jest konieczne, ponieważ menu rozwijane zwykle nie są opóźnione po uruchomieniu.
Żaden wskaźnik ładowania nie spowodowałby zamieszania, prawdopodobnie oderwania myszy użytkownika, a następnie powrotu myszy, zastanawiając się, dlaczego ta funkcja jest zablokowana.
Tak więc, chociaż strona nie ładuje się szybciej, zauważalna prędkość jest większa. Jest to lekcja dla wszystkich projektantów i programistów, którzy myślą nie tylko o rzeczywistej prędkości, ale o postrzeganej prędkości.
Funkcje zorientowane na użytkownika
Jedną z najważniejszych cech nowej strony internetowej jest sposób przejścia do nowego projektu, który zapewnia, że powracający użytkownicy nie są zszokowani drastycznymi zmianami.
Podczas pierwszej wizyty na stronie zauważysz duży czerwony baner na górze strony, informując, że witryna została przeprojektowana i nadal jest w wersji beta. Masz możliwość przeglądania strony przy użyciu starego interfejsu.
Zapewnienie odwiedzającym, którzy są przyzwyczajeni do starego układu i struktura opcji powrotu do niego, jest krytyczne, ponieważ zapewnia, że nie stają się sfrustrowani, próbując znaleźć znajome treści.
Na tak dużej stronie internetowej, w szczególności przeprojektowanej przez firmę znaną ze swoich projektów zorientowanych na użytkownika, takie duże zmiany architektoniczne i ulepszenia z pewnością zrzucą odwiedzających, którzy byli przyzwyczajeni do starego stylu.
Wiadomość w czerwonym sztandarze zapobiega zatem dezorientacji lub frustracji ze strony odwiedzających.
Nie spędzałem dużo czasu na porównywaniu starej witryny z nową, więc nie mogę potwierdzić, jak podobna jest zawartość i architektura, ale dlatego, że mamy możliwość odwiedzenia starej strony, zawartość musi być podobna wystarczy, jeśli mamy dostęp do bieżących wydarzeń i innych regularnie aktualizowanych pozycji w obu wersjach.
Jednym z często spotykanych elementów jest link nad polem wyszukiwania, który pozyskuje opinie o nowym projekcie, zapraszając użytkowników do wypełnienia "ankiety w wersji beta". Ta funkcja pokazuje, że właściciele są zaniepokojeni sposobem, w jaki użytkownicy postrzegają witrynę i ją postrzegają.
W pełni dostępna treść
Wielu członków zespołu Happy Cog jest dobrze znanych w Internecie za poparcie standardów internetowych i dostępnych treści, więc nie jest zaskoczeniem, że ta strona jest w pełni dostępna dla praktycznie każdego użytkownika na dowolnej platformie.
Po wyłączeniu obsługi JavaScriptu strona internetowa użytkownika jest bardzo podobna, mimo że wiele ulepszeń nie jest już dostępnych.
CSS text-indent Właściwość służy do zastąpienia tekstu w nagłówkach obrazami przedstawiającymi niestandardową czcionkę. Dzięki temu strony pozostają semantyczne, przyjazne SEO i widoczne dla wszystkich użytkowników.
Poniższy obrazek pokazuje nagłówek na wewnętrznej stronie, po lewej stronie z wyłączonym stylem, po prawej z włączonym.
Możemy zobaczyć, w jaki sposób nagłówki są ulepszane przez obrazy bez utraty ich wartości semantycznej, a projektanci nie stosują niepotrzebnie skomplikowanych metod zastępowania czcionek.
Inną kluczową funkcją ułatwień dostępu jest implementacja ulepszeń JavaScript. Strona główna ma dwa przełączniki zawartości z kartami, jedna nazywa się "Book Online", a druga łączy się z portalami społecznościowymi visitphilly.com:
Gdy JavaScript jest wyłączony, wyświetlana jest cała zawartość obu pól z zakładkami. Wiele witryn z widżetami z kartami wyświetla tylko jedno z pól, gdy JavaScript jest wyłączony, ale generalnie nie jest to najlepsza praktyka.
Ta technika jest używana konsekwentnie w całej witrynie dla wielu funkcji, zapewniając, że warstwa behawioralna (tj. Ajax i JavaScript) jest ulepszeniem, a nie koniecznością.
Dzięki temu treść jest dostępna nie tylko dla użytkowników przeglądających bez JavaScript, ale także dla pająków wyszukiwarek, takich jak Googlebot.
Jakiekolwiek słabości w projekcie?
Ponownie nie jestem w stanie uczciwie krytykować projektu wykonanego przez firmę taką jak Happy Cog. Ale wskażę (ostrożnie) dwie drobne słabości w nowym projekcie i strukturze.
Po pierwsze uważam, że treść trzeciego linku w głównym menu nawigacyjnym jest trochę niejasna ("Philly Now").
Od razu nie wiedziałem, co to znaczy. Zakładałem, że to oznacza bieżące wydarzenia, ale najwyraźniej to połączenie wydarzeń, pogody i aktualnych zdjęć. Wciąż nie jestem pewien, jak to opisać, i mam wrażenie, że link rzadko będzie klikany.
Inną słabością są trójkąty skierowane w prawo w dodatkowym menu nawigacyjnym na stronach wewnętrznych:
Przyjąłem, że te trójkąty wskazują wysunięte menu, ale nie ma lotek. Trójkąty są tylko wskazówkami, które zwrócą uwagę użytkownika na obszar zawartości. Trójkąty skierowane w prawo są najlepiej zarezerwowane dla niezależnych łączy i menu wysuwanych, a nie dla nawigacji pionowej, takiej jak ta.
Znajdujemy to samo na stronie głównej, ale nie jest tak źle, ponieważ strzałki są częścią przełącznika treści sterowanego JavaScript.
Żadna z tych "słabości" nie stanowi większego zagrożenia dla użytkownika. A fakt, że mogę znaleźć tylko dwie słabości pokazuje, jak wielki jest to przeprojektowanie.
Godne badania i naśladownictwo
Znacznie więcej można powiedzieć o skuteczności projektu i kodu visitphilly.com, poza zakresem tego artykułu.
Oprócz tego, o czym tutaj mówiliśmy, mogłem wskazać prawidłowy i dobrze komentowany kod, efektywne wykorzystanie białej przestrzeni, wizualną hierarchię, doskonałe wybory kolorów, praktycznie identyczne doświadczenie w IE6 i więcej.
Mam nadzieję, że ta analiza daje porządny przegląd niektórych kluczowych cech tego nowego projektu i tego, jak uosabia nowoczesne projektowanie stron internetowych w branży.
Dalsze czytanie
- Greater Philadelphia Tourism Marketing Corp. uruchamia zupełnie nowy portal visitphilly.com
- Happy Cog Studios Portfolio
- Recenzja VisitPhilly firmy Happy Cog
Ten post został napisany wyłącznie dla Webdesigner Depot przez Louisa Lazarisa, niezależnego pisarza i programistę. Louis ucieka Imponujące sieci gdzie publikuje artykuły i samouczki dotyczące projektowania stron internetowych. Możesz śledzić Louisa na Twitterze lub skontaktuj się z nim poprzez jego stronę internetową .
Czy podoba Ci się nowy portal visitphilly.com? Czy inne funkcje projektu, układu lub architektury poprawiają komfort użytkowania? Proszę podać swoje uwagi poniżej.