Połącz się z nami

Internet Maker

Klinika stron WWW – Mapy na nowo

Quickmap to niezależny wydawca map transportowych. Kompas wskazał serwisowi nowy kierunek.

Każda strona domowa musi dać próbkę oferty serwisu i umożliwić korzystanie z niej. Spójna nawigacja oraz czytelnie oznaczone przyciski to podstawa graficznej harmonii w serwisie. Głównym problemem serwisu Quickmap (www.quickmap.com) i dużym wyzwaniem dla jego przebudowy była olbrzymia ilość informacji rywalizująca o uwagę użytkownika. Rozgardiasz panujący w interfejsie utrudniał nawigację po serwisie.

Starą stronę główną podzielono na sześć osobnych paneli ułożonych w trzech kolumnach i dwóch rzędach. Nagłówek każdego panelu był w innym kolorze. Wyglądało to trochę jak biurowa tablica do robienia notatek, a nie jak spójna, uporządkowana wizytówka firmy.

  • Nadmiar informacji. Głównym problemem projektu Quickmap była olbrzymia ilość informacji rywalizująca o uwagę użytkownika. Rozgardiasz panujący w interfejsie utrudniał nawigację.
  • Layout. Starą stronę główną podzielono na sześć paneli ułożonych w trzech kolumnach i dwóch rzędach. Nagłówek każdego panelu był w innym kolorze. Wyglądało to trochę jak biurowa tablica, a nie jak wizytówka firmy.
  • Odnośniki. Na stronie głównej starego projektu było 30 odnośników, które wprowadzały zamieszanie.

Aby nadać serwisowi osobowość i umożliwić jego identyfikację, nową stronę domową zaprojektowaliśmy w firmowym kolorze – czerwonym, wziętym z logo Quickmap. Zmniejszając liczbę kolorów w palecie sprawiliśmy, że serwis stał się bardziej prosty i zyskał konieczną osobowość związaną z zamianą szarej kolorystyki na kolor bardziej atrakcyjny – czerwony.

Na stronie głównej starego projektu było 30 odnośników, które wprowadzały zamieszanie. Ułatwiliśmy użytkownikom podejmowanie decyzji dzięki zmniejszeniu liczby opcji, które można wybrać i poprzez bardziej rozważne użycie kolorów. Nowy projekt podzieliliśmy na dwa wyraźne obszary, stosując różne kolory w głównych liniach okalających panele.

Dzięki nowej lokalizacji logo, wzrok biegnie od lewego górnego rogu w dół do panelu z podręcznymi mapami, a następnie do paneli z zakładkami. Proste linie i bloki kolorów przyciągają wzrok do kluczowych miejsc strony. Pozbieraliśmy dodatkowe informacje o Quickmap i umieściliśmy je w prostym panelu nawigacyjnym poniżej głównego nagłówka. Przyciski \”click here\” to wystarczająco czytelne sygnały dla odbiorcy. Mówią, jak nawigować, aby dostać się do olbrzymiej porcji informacji znajdujących się w serwisie.

O ile pierwsza wersja Quickmapa była odrobinę źle zorganizowana pod względem rozmieszczenia produktów i zaprezentowania oferty serwisu, w obecnej staraliśmy się uporządkować jej elementy składowe w sposób ułatwiający korzystanie. Uporządkowaliśmy produkty i przydzieliliśmy im kategorie według ważności marek. Główne produkty znalazły się po lewej stronie, te mniej istotne po stronie prawej.

Powodem użycia czerwonych zakładek w głównych panelach była chęć wyeksponowania ich nagłówków. Zakładki pomogły też uporządkować tekstowe pola, czego bardzo brakowało w pierwotnym projekcie. Ten sposób ich wyróżnienia, tak jak to zrobiliśmy, wywołuje poczucie czystości i w odbiorze sprawia wrażenie uporządkowanego.

Dzięki temu mamy więcej białej przestrzeni, co pozwala \”oddychać\” poszczególnym elementom. Wraz z podziałem na części, pojawieniem się kolorów, ikon, ilustracji i zdjęcia, serwis stał się o wiele bardziej dynamiczny i przyjemniejszy w korzystaniu.

Ze względu na brak hierarchii i struktury w starym projekcie, całkowicie przebudowaliśmy nawigację. Jedynymi znaczącymi elementami promocyjnymi obecnymi w poprzedniej wersji były tekstowe odnośniki, które jednak ginęły gdzieś w tekście powitania. W przypadku marketingowego serwisu, którego istotą jest sprzedaż, produkt musi być bardziej widoczny i być centralnym punktem strony domowej.

Podsumowując, głównymi celami projektu dla serwisu Quickmap jest bezbolesne wprowadzenie użytkowników do serwisu i skierowanie ich uwagi na główne produkty. Osiągnięto to poprzez przygotowanie projektu o bardziej zdecydowanej strukturze. Najważniejszym wyzwaniem przy zmianie projektu komercyjnej strony jest utworzenie naprawdę jasnej oferty sprzedażowej za pomocą czystego, dostępnego języka obrazu. Porzućmy bałagan, użyjmy dwóch lub trzech kolorów w opozycji do tła i umieśćmy nasz najlepiej sprzedający się produkt na pierwszym planie.

  • Sieciowe konwencje. Przeniesienie loga Quickmap z poprzedniej wersji strony i umieszczenie go w najbardziej znaczącym miejscu na ekranie, w górnym lewym rogu, natychmiast określiło strukturę, ustalając hierarchiczną kompozycję. Począwszy od lewego górnego rogu, stronę czyta się jak książkę od lewej do prawej, z góry na dół.
  • Sprzedajmy się. Quickmap utworzono z zamiarem sprzedaży papierowych map, udostępniania animowanych tras przejazdu oraz po to, by zachęcić lokalne władze i firmy transportowe do składania zamówień. W starym serwisie trudno było to odnaleźć. Promocje oraz najnowsze i ważne dodatki do strony należy natychmiast na niej umieszczać.
  • Wygładzamy wygląd. Kolory użyte na Quickmap.com nie były klarowne i sprawiały wrażenie wyblakłych – jakby słońce prześwietliło sklepowe okno i pozbawiło kolorów prezentowane obiekty. Odeszliśmy od stosowania wielu kolorów – zaakcentowaliśmy jeden główny w dwóch natężeniach dla panelu i tła. Czarny tekst i niebieskie odnośniki w opozycji do białego tła.

  • Wzmacniamy przekaz. Wprowadzając hierarchię wyeksponowaliśmy jedne aspekty strony nad innymi. To może być zaleta, jeśli sprzedajemy ograniczoną liczbę produktów. W obecnym projekcie jasno wskazaliśmy na produkty ważne, za którymi umieściliśmy drugorzędne i trzeciorzędne. Zajmują one mniej miejsca i są słabiej ozdobione.
  • Identyfikacja. Oryginalnej Quickmap brakowało mocnego nagłówka, by ugruntować stronę. Poprawiliśmy ten błąd, dodając nagłówek identyfikujący markę. Wysłanie wyraźnego graficznego sygnału umożliwiającego identyfikację celów i zawartości serwisu osiągnięto poprzez dołączenie fotomontażu. Szczególny nacisk położyliśmy na turystów i osoby odwiedzające zjednoczone królestwo.
  • Przyciski i odnośniki. W poprzedniej wersji Quickmap nie było jasne co można kliknąć, a linki były porozrzucane na całej stronie. Jedynie dwa z nich wyglądały jak przyciski. Reszta tekstowych odnośników była w kolorze niebieskim. Brakowało ikon, więc utworzyliśmy kilka, podobnych do tych, które można znaleźć w legendzie map, a które pozwalają szybko zorientować się w stosowanych oznaczeniach.

Pięć porad napędzających serwisy

  1. Dzielenie strony na jasno zdefiniowanie obszary. Definiowanie obszarów na stronie jest o tyle ważne, że umożliwia użytkownikom decydowanie, które z nich zawierają informację odpowiadającą ich potrzebom. Konwencje projektowania stron odziedziczono z dzienników i czasopism, więc trzymajmy się ich, jeśli to jest typowy biznes: logo w górnym lewym rogu, nagłówek, stopka i prosty layout.
  2. Identyfikacja i cel serwisu. Od pierwszego słowa strona musi mówić odwiedzającym kim jesteśmy i czym się zajmujemy. Opowiedzmy o naszej ofercie sprzedaży oraz znaczeniu i pozycji firmy. W tym samym czasie na stronie domowej możemy pokazać pozostałe produkty, nawet wtedy, gdy użytkownik ich nie szuka. Sprzedaż uzupełniająca, jak mówią w biznesie.
  3. Pokoloruj mnie. Na ogół użycie zbyt wielu kolorów to błąd. Wprowadza to zamieszanie, gdyż kolory w codziennym życiu coś znaczą. Czerwony to \”stop\”, zielony – \”idź\”, niebieski oznacza \”odpowiedzialny\”, czarny \”zimny\” i tak dalej. Spróbujmy tak położyć nacisk na kolory, by skupiły uwagę odbiorców na fragmentach strony, które chcemy podkreślić. Użyjmy też bladego tła, aby przesunąć treść na pierwszy plan.
  4. Nawigacja. Dla użytecznych stron ważnym czynnikiem jest wizualna spójność. Umieszczenie nawigacji w tym samym miejscu na każdej ze stron pozwala użytkownikom szybciej z niej skorzystać. Użyteczność upraszcza stronę w maksymalny sposób, zapamiętajmy więc dwie zasady. Po pierwsze podzielmy ją na pięć czy sześć obszarów, by uprościć nawigację. Po drugie oznaczmy dobrze odnośniki, by rzucały się w oczy.
  5. Doświadczenie użytkownika. Gdy wchodzimy do supermarketu, towary nie leżą w nim na środku hali. Mamy tu przykład pełnego doświadczania marki: od drzwi wejściowych do wyjścia. Oznaczmy każdą stronę oddzielnie, zastosujmy firmowe kolory i sprawmy, by nasi klienci czuli, że ktoś się nimi opiekuje na każdej stronie, którą odwiedzą.

Kliknij, by skomentować

Zostaw komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Popularne

Połącz
Newsletter

Zapisz się do naszego newslettera i bądź na bieżąco!