Grafika i wygląd sklepu

Transkrypt

1 #1 Grafika i wygląd sklepu Uniwersytet E-commerce

2 Kupujemy oczami Wygląd ma znaczenie. Oczywiście można osobiście temu zaprzeczać. Mówimy liczy się wnętrze, ale zazwyczaj wtedy, gdy tak naprawdę nie mamy nic wyjątkowego do pokazania. Jednak jeśli chcemy coś sprzedać, robimy wszystko (a przynajmniej powinniśmy), aby nasza oferta była jak najbardziej atrakcyjna. Nieważne czy jest to randka, czy rozmowa o pracę, czy garażowa wyprzedaż, zawsze staramy się jak najlepiej zaprezentować to, co mamy do pokazania. To samo tyczy się sklepu internetowego - jego wygląd może znacznie wpłynąć na efektywność sprzedaży. W tym poradniku omówimy kilka ważnych aspektów dotyczących wyglądu. Pierwsze wrażenie Każdy przeżył sytuację, w której szczególnie ważną rolę odegrało pierwsze wrażenie. Przełomowy moment w życiu, istotna ocena, nadzieja na akceptację. Zdarza się, że nie polubimy jakiejś osoby po pierwszym spotkaniu, lecz później stajemy się dobrymi znajomymi, a nawet przyjaciółmi. Niektórzy z nas mają nawet osobistą dewizę zyskuję przy bliższym spotkaniu. Wiele dobrych płyt wymaga wielokrotnego odsłuchania, aby móc je w pełni docenić. Niestety w przypadku stron www, w tym również sklepów, zazwyczaj nie ma szans na drugą szansę. W cyfrowym świecie wszystko dzieje się błyskawicznie, a ludzie podejmują decyzje w ułamkach sekund. Nikt nie traci czasu na zastanawianie się nad czymkolwiek, ani na wczytywanie się w szczegóły. Według różnych badań i opinii, internauta wchodzący na nową stronę, decyduje w ciągu około 2 sekund, czy chce na niej pozostać, iść dalej, czy wstecz. Dwie sekundy wystarczają na błyskawiczne zeskanowanie treści, zauważenie nawigacji i podjęcie decyzji co dalej?. Ogromną rolę w tym momencie odgrywa połączona moc treści i formy strony www. Internauta powinien w ułamku sekundy ocenić naszą stronę jako przydatną i ciekawą, a informacja ta musi być podana mu w jak najlepszy sposób. Użyteczność Temat użyteczności stron (albo używalności, usability, user experience, UX - te pojęcia nie są synonimami, lecz leżą znaczeniowo bardzo blisko siebie), to bardzo modny temat od kilku lat. Powstają o nim liczne badania, artykuły, książki, blogi. W skrócie chodzi o to, aby treści stron internetowych były podawane w takiej formie, która maksymalnie uprości dotarcie do nich oraz ułatwi ich przyswojenie. Równie istotna jest treść, jak struktura całej strony i nawigacja po niej. W dużym skrócie z punktu widzenia sklepu najistotniejsze elementy to: architektura: katalog i nawigacja (jest to osobny, trzeci temat Akademii Shoper), struktura nagłówków, wyszukiwarka, filtry, opcje, prosty proces zakupowy sfera wizualna (dostępność): wielkości i kroje użytych czcionek, kolorystyka, kontrast, zdjęcia, teksty zastępcze dla obrazków, responsywny design - optymalna prezentacja witryny na każdym ekranie, przekaz: podawanie kompletnych, ciekawych informacji w sposób interesujący, zwięzły, łatwo-przyswajalny, z użyciem barwnego języka, lecz bez zbędnych ozdobników, z wykorzystaniem właściwego profesjonalnego słownictwa, lecz zrozumiałego dla klienta #1 Grafika i wygląd sklepu 1

3 Planując zmiany w sferze wizualnej musimy zawsze uważać, aby nie popsuć poziomu użyteczności strony. A im dłużej funkcjonujemy na rynku, tym bardziej przywiązani do wyglądu są użytkownicy i tym większą ostrożność należy wówczas zachować. Złota zasada - mniej znaczy więcej. Im mniej elementów na raz obserwujemy, tym silniej na nas one oddziałują i większą skupiamy na nich uwagę. Usuwaj ze stron sklepu wszystkie jej zbędne składniki. Konwencje Mimo, że jako właściciel biznesu chcemy (musimy) wyróżnić go na tle konkurencji, nie powinniśmy posuwać się aż do granic ekstrawagancji. A już na pewno nie możemy szukać wyróżników w tych obszarach, które są utartą konwencją w branży, standardem ułatwiającym korzystanie z każdego kolejnego sklepu www. Jeśli chodzi o wygląd i funkcjonowanie sklepów internetowych, jesteśmy w stanie łatwo odnaleźć się w większości z nich, właśnie dzięki standardom. Przykładowo: logo kierujące po kliknięciu do strony głównej, linki do logowania, rejestracji i koszyka są na samej górze strony, wyszukiwarka umieszczona gdzieś w nagłówku, linki do istotnych informacji w stopce na dole, itp itd. Zauważ, jak podobne są koszyki w większości e-sklepów. Jeśli bardzo zależy nam na innowacji, powinniśmy szukać jej w procesach, które do tej pory stanowią dla klientów jakąś trudność, kosztują ich czas lub pieniądze. Znając doskonale klienta, jego potrzeby i sposób poszukiwania produktów możemy znaleźć nową unikalną funkcję lub niestandardowy sposób na ułatwienie im zakupów. Może być to jakieś szczególne podejście do klienta, lub jakaś unikalna wartość dodana, której nie zaoferuje konkurencja. Poza takimi przypadkami lepiej trzymać się bezpiecznych konwencji i nie eksperymentować, szczególnie na początku działalności sklepu. Wyróżnij się i daj zapamiętać Kilka linijek powyżej napisaliśmy, że należy trzymać się pewnych standardów, gdyż klienci lepiej odnajdą się w sklepie podobnym do innych sklepów czy stron www, które widzieli. Teraz przeczytasz o tym, że silna konkurencja oraz nadpodaż informacji bombardująca internautów wymuszają ciągłą walkę o uwagę konsumenta i pociąga to konieczność wyróżnienia się na tle konkurencji. Temat wybicia się ponad konkurencję i bycia rozpoznawalnym jest szerzej poruszany w czwartej odsłonie Akademii Shoper poświęconej promocji sklepu. Przede wszystkim chodzi o wielopoziomowe budowanie marki. Jednym z istotnych poziomów jest identyfikacja wizualna. Przemyślana i konsekwentna strategia tworzenia tożsamości marki musi zakładać kreację logo, kompozycję kolorystyki, unikalnego stylu, słowem - oryginalny design. Jeśli sklep nie będzie się wyróżniał, jeśli nie będzie posiadał własnego charakteru - nie zostanie zapamiętany. Nasza marka musi być ubrana w stylowe szaty, fajnie się nazywać i mówić tak, by chciało się z nią rozmawiać. O to chodzi w budowaniu osobowości. #1 Grafika i wygląd sklepu 2

4 Treść i forma Podobno nie ocenia się książki po okładce. Może twierdzą tak recenzenci lub literaturoznawcy. Przeciętny czytelnik wybiera w księgarni pozycje z ciekawą okładką i pochwalnym cytatem z nikomu nieznanej gazety lokalnej w USA. To samo dotyczy muzyki, filmów itd. Jednak sklep www to miejsce, które musi mieć coś więcej do zaoferowania niż ładne logo i kilka atrakcyjnych zdjęć. Póki co, w sieci najbardziej liczy się treść - jeśli sklep nie odpowiada na zapotrzebowanie klienta, brakuje oferty lub jest ona skąpo zaprezentowana, klient takie miejsce opuści. Gra pozorów zawsze się kończy, a pod płaszczykiem blichtru znajduje się wyłącznie rozczarowanie. Pamiętajmy, że im bardziej profesjonalnie kreujemy wizerunek, tym większą składamy obietnicę klientom. Nim wzniesiemy się na wyżyny stylizacji, warto upewnić się, że nasza oferta jest bogata, prezentowana w przystępny sposób, zaś proces dokonywania zakupów maksymalnie uproszczony i bezbolesny. Content is the king czyli treść jest królem, którego dopiero ubieramy w piękne szaty. Złota zasada - KISS - Keep it simple, stupid Nie komplikuj, nie udziwniaj. Niech to będzie proste. Nie utrudniaj klientom zakupów! Zaufanie Najważniejszym kapitałem marki w sieci jest zaufanie. Czy wygląd sklepu ma na nie wpływ? Oczywiście - nie rozmawiamy z nieznajomymi, unikamy osób podejrzanych, dziwnych, zachowujących się nieprzewidywalnie. Osoby atrakcyjne, dobrze ubrane wzbudzają od razu większą sympatię. Nasze ostrożne zachowanie ma często charakter instynktowny, nieuświadomiony lub uwarunkowany społecznie ( nie kupuję w sieci, bo mi ktoś przyśle cegłę ). Sklep wyglądający profesjonalnie, działający w sposób kontrolowany i prezentujący satysfakcjonującą ofertę ma większą szansę na sukces. Podejrzana witryna z chaotyczną treścią, zaburzoną architekturą i bez istotnych informacji nie wzbudzi pozytywnych uczuć, choćby zamieściła tysiąc znaczków zapewniających o jej rzetelności, zgodności z prawem itp. Dokonując zmian w stronie sklepu, zawsze musisz brać pod uwagę, jak wpłynie to na percepcję strony pod względem bezpieczeństwa, profesjonalizmu, smaku. Każda zmiana wyglądu może wpłynąć pozytywnie lub negatywnie na jego odbiór. Pamiętaj, że diabeł tkwi w szczegółach i czasem nawet drobnostka może zepsuć efekt opracowanego projektu. Staraj się, aby sklep był po prostu miejscem wprawiającym w dobre samopoczucie. Klienci muszą mieć przyjemność z samego przeglądania witryny, wtedy chętniej będą do niej wracać. Poza tym wciąż muszą czuć, że mają pełną kontrolę nad tym co w sklepie robią i że nic ich nie zaskoczy. #1 Grafika i wygląd sklepu 3

5 Sposoby na dobry wygląd Jak wszyscy wiemy, dobry wygląd to jest coś, na co trzeba zapracować. Dotyczy to również sklepu www. Efekt WOW nie bierze się znikąd. Pomysł, plan i konsekwencja to przepis na osiąganie każdego celu. I tak również wygląda sposób na sukces online. Nie ma dróg na skróty, najwyżej można podzielić tę drogę na etapy i podążać nią w swoim tempie. Zrób to sam Podobnie jak z dbaniem o własny wygląd, również w kwestii szaty graficznej sklepu, podstawowe efekty można osiągać samemu. Któż lepiej zna swoją markę i potrzeby jak nie właściciel firmy? Sklep działający na oprogramowaniu Shoper posiada na starcie kilka wbudowanych skórek i wersję mobilną, więc jest od czego zacząć. Panel administracyjny daje bardzo wiele możliwości dokonywania zmian w układzie modułów (metodą przeciągnij i upuść ). Dzięki takim narzędziom jak slider, opcja promowania produktów na stronie głównej, zmianom domyślnych widoków i rozmiarów miniatur zdjęć, można znacznie przebudować wygląd sklepu. Nagłówek Wgranie własnego nagłówka jest bardzo proste. W menu edycji stylu wybieramy przygotowany plik (o szerokości strony sklepu, czyli zazwyczaj 980 pikseli) i zapisujemy zmiany. Następnie sprawdzamy skutek klikając zobacz sklep. Nagłówek powinien być tak przygotowany aby nie ograniczał widoczności wyszukiwarki. Logo Wgranie własnego logo to również proces bardzo łatwy. Dodajemy je podobnie jak plik nagłówka. Po wgraniu, logo zostaje automatycznie umieszczone nad wartwą nagłówka, więc nie ma obawy że będzie przykryte. Warto zwrócić uwagę na dwie istotne rzeczy: Rozmiary - aby logo było widoczne ale nie dominowało na stronie i nie wychodziło z nagłówka. Przezroczystość - zazwyczaj lepiej jest, gdy logo mamy wyizolowane na tzw. przezroczystej warstwie (w pliku.png). Chyba że tło logotypu jest identyczne jak kolor nagłówka, wtedy nie będzie widać, gdzie warstwa z logo przykrywa tło. Moduły Zakładka Moduły zawiera 5 sekcji pozwalających dostosować wygląd wybranych części sklepu w zależności od tego, co w nich ma robić klient. Zalecamy dostosowanie każdej z tych sekcji. Warto przemyśleć osobno każdy przypadek i obserwować, jak nasze zmiany wpływają na użyteczność sklepu. Na początku trzeba przemyśleć, czy będziemy w ogóle potrzebowali lewej i prawej kolumny. Być może na niektórych stronach z jednej z nich można zrezygnować. #1 Grafika i wygląd sklepu 4

6 Układ podstawowy- jest to schemat domyślny każdej strony sklepu. Zgodnie z jego ustawieniami wyświetlają się strony, którym nie zdefiniujemy osobnego układu modułów. Jest to przede wszystkim wygląd stron informacyjnych i artykułów. Strona główna - to układ, w którym możemy zmieniać najwięcej. Wbrew pozorom, nie jest to najczęściej występująca strona w sklepie, lecz warto poświęcić dłuższą chwilę na solidne przemyślenie każdego elementu dosłownie każdej literki) jaki chcemy umieścić na niej. Warto rozejrzeć się po internecie i sprawdzić, jakie są obecnie trendy w kształtowaniu wyglądu stron głównych. Można odwiedzać różne sklepy (najlepiej z USA, Wielkiej Brytanii), strony dla projektantów i grafików (Smashing Magazine, Behance, Dribbble) i znaleźć jakąś inspirację. Dokonując zmian warto pamiętać, że strona główna powinna być wizytówką sklepu a nie streszczeniem całej zawartości. Ma wprowadzać odwiedzającego w pewien nastrój, zaciekawić go i zachęcić do dalszej eksploracji sklepu. Umieszczajmy na niej tylko najważniejsze i aktualne treści. Pamiętać należy, że zmiany wyglądu strony głównej dokonujemy również poprzez dodanie np. modułu Slider oraz prezentację produktów polecanych. Ilość tych produktów, podział na kolumny i wielkość miniatur zdjęć potrafią znacznie wpłynąć na wygląd strony głównej sklepu. Lista produktów - to widok, który jest wyświetlany dość często przez klientów przeglądających wybraną kategorię lub wyniki wyszukiwania. Uwaga internauty powinna skupiać się na elementach wyświetlanych na liście a informacje na niej dostępne powinny mu pomóc w wyborze produktu do bliższego zapoznania i zachęcić go do kliknięcia. Zastanów się, które moduły są zbędne w tym widoku? Odrzuć te, które nie są niezbędne a mogą tylko rozpraszać uwagę klienta. Może w ogóle zrezygnować z jednej kolumny? Warto natomiast dodać opcje filtrowania listy po różnych cechach i atrybutach produktów. Planując sposób wyświetlania produktów (np. lista ze skróconymi opisami lub galeria większych zdjęć) oraz ich ilość, musisz ostrożnie dobrać ich ilość, aby nie było ich za mało (zbyt dużo podstron do przeglądania) ani za dużo (dłuższy czas ładowania strony oraz więcej elementów na raz do objęcia wzrokiem). Szczegóły produktów - najczęściej wyświetlany widok w Twoim sklepie, najczęstsza strona docelowa (na którą wchodzą odwiedzający bezpośrednio z zewnątrz, np. z Google lub porównywarek), najważniejsza strona z punktu widzenia konwersji (klient ma już produkt na wyciągnięcie ręki, wystarczy dodać go do koszyka). Na tym układzie modułów należy skupić się najbardziej. Ilość dodatkowych treści ograniczyć do absolutnego minimum - zostawiamy tylko rzeczy przydatne, jak Menu i Ostatnio oglądane. Dobrze jeśli klient od razu może dowiedziećo tym, jak najtaniej oraz jak najszybciej może otrzymać ten produkt. Co powinno się znaleźć na samej karcie produktu omawiamy w Akademii Shoper na drugim szkoleniu. Koszyk - ta strona nie jest (niestety) najczęściej wyświetlaną, ale jest ekstremalnie ważna. Stąd już klient powinien skierować się do kasy i sfinalizować zakup. Musimy tutaj nie tylko ograniczać ilość elementów odwracających uwagę, ale również możliwych akcji (kliknięć). Im mniejszy wybór możliwych kroków, tym większa szansa, że zakupy zostaną doprowadzone do końca. Słowem - staramy się w pełni pokierować działaniami klienta i nie rozproszyć jego uwagi. Kiedy chcesz dodać jakiś moduł na stronę sklepu, sprawdź wszystkie jego możliwości, poznaj w 100% jego działanie. Zobacz, czy jego wygląd zmienia się w zależności od położenia (boczna kolumna albo środek strony). Koniecznie prześledź z osobna jak moduł wyświetla się na każdej stronie, na której może się pojawić. Spokojnie, jestem inżynierem Zanim zabierzesz się za własnoręczne modyfikowanie wyglądu sklepu, wykonaj kilka czynności, dzięki którym Twoja praca będzie efektywna i bezpieczna. #1 Grafika i wygląd sklepu 5

7 Dokumentacja - stwórz plik tekstowy, w którym określisz kilka fundamentalnych zasad dotyczących Twojego sklepu. Kim są klienci, z czym ma się kojarzyć marka, jakie jest przewodnie hasło lub motyw, określ charakter sklepu, jego nastrój za pomocą 2-3 słów. W skrócie: czym Twój sklep jest, czym chcesz, aby był oraz koniecznie opisz czym Twój sklep na pewno nie będzie. Kopia robocza - utwórz kopię skórki, którą chcesz modyfikować. Nigdy nie działaj bezpośrednio na aktywnej skórce. Nie ryzykuj, że klienci zobaczą przypadkiem efekty Twoich różnych prób i zabaw z layoutem. W ekstremalnych przypadkach Twoje zmiany mogą być trudne do szybkiego przywrócenia, a do tego czasu sklep mógłby odstraszyć wiele osób. Dodatkowo za każdym razem, gdy dokonasz znaczących zmian wyglądu, wykonuj następną kopię, aby zachowywać wersje z kolejnych kamieni milowych Twojego projektu. W razie czego zawsze będziesz mieć możliwość powrotu do jakiegoś etapu i pójścia w inną stronę. Sklep ze stylami graficznymi - zanim poświęcisz wiele godzin a nawet dni na samodzielną edycję sklepu i zabawę w małego grafika, przejrzyj katalog skórek dostępny w panelu. Być może któraś z nich okaże się inspiracją lub po prostu idealnie trafi w Twoje potrzeby i niewielkim kosztem zaoszczędzi Ci ogromną ilość czasu? Pamiętaj, że najwięcej uwagi właściciel sklepu powinien poświęcać ofercie oraz obsłudze klienta, a czas jest Twoim najcenniejszym zasobem. Modyfikacja vs. aktualizacja Jeśli wprowadzisz bardzo zaawansowane zmiany - a dokładniej - jeśli wyedytujesz coś w plikach.tpl, Twój sklep straci możliwość aktualizacji. Lepiej więc tego unikać, szczególnie jeśli nie jest się dokładnie pewnym swoich działań. Korzystając z wszystkich dostępnych opcji (moduły, pliki graficzne, własny CSS i JS) można przeprowadzić wystarczająco wiele rozbudowanych zmian, by dostosować sklep do swoich potrzeb. O ile nie czujesz się w tym obszarze jak ryba w wodzie - pliki z rozszerzeniem.tpl zostaw w spokoju. Projekt na życzenie Dokonując w sklepie własnoręcznych modyfikacji wyglądu lub wybierając jedną z popularnych gotowych skórek trzeba brać pod uwagę tymczasowość takiego rozwiązania. Jeśli myślimy poważnie o biznesie i zależy nam na wynikach, a nie tylko próbujemy i się zobaczy, powinniśmy od razu uwzględnić w naszych planach stworzenie kompleksowego projektu graficznego dostosowanego do potrzeb profesjonalnego sklepu. Bez oryginalnej identyfikacji wizualnej, nie stworzymy rozpoznawalnej marki, obniżymy skuteczność działań marketingowych, nie wykorzystamy potencjału jaki drzemie w naszym pomyśle. Gdy zlecamy wykonanie indywidualnego projektu dla naszego sklepu, mamy największy wpływ na to, jak będzie on wyglądał i naprawdę czujemy się twórcami internetowego biznesu. Grafika wykonywana jest etapami, posiadamy możliwość zgłaszania uwag i pełnej realizacji swojej wizji (o ile jest technicznie realna). Poza tym do nas należą autorskie prawa majątkowe do wykonanego projektu, więc ewentualnie możemy go przenieść lub odsprzedać w przyszłości. #1 Grafika i wygląd sklepu 6

8 Jak zrealizować projekt bez stresu i frustracji? Oto kilka wskazówek : Szczegółowo i precyzyjnie opisz swoją wizję. Im dokładniejszy będzie początkowy brief, tym mniej zmian i uwag będziesz zgłaszać w trakcie prac. Znajdź jak najwięcej przykładów, w których wskażesz konkretne wytyczne grafikowi. Nigdy nie zakładaj, że ktoś na pewno wie, o co ci chodzi. Stwierdzenie może zielony, może czerwony nie jest przykładem konkretnej wytycznej. Każde ustalenia telefoniczne spisuj w mailowym podsumowaniu jeszcze w trakcie rozmowy lub tuż po niej. Po spisaniu listy uwag wstrzymaj się z jej wysłaniem przez jeden dzień. Przeczytaj ją ponownie i sprawdź, czy niczego nie brakuje i czy na pewno każda uwaga jest przemyślana. Wszelkie zmiany i uwagi zgłaszaj zbiorowo, gdy otrzymasz do oceny kolejną wersję roboczą projektu. Bardzo dokładnie przeanalizuj cały materiał otrzymany od grafika i drobiazgowo oceń (co wymaga zmiany i jakiej oraz które elementy są już w porządku i nie chcesz ich zmieniać). Przesyłanie dodatkowych uwag już po rozpoczęciu prac nad kolejną wersją dezorganizuje pracę grafika i często powoduje utratę części już wprowadzonych zmian. To rodzi frustrację i opóźnienia. Jeśli nie zgadzasz się w jakiejś kwestii z grafikiem, weź pod uwagę, że on prawdopodobnie zna się na tym lepiej. Zawsze możesz poprosić o opinię kogoś z zewnątrz. Korzystaj z usług firm/osób sprawdzonych, posiadających dobre opinie i ciekawe portfolio (nie listę rzekomych klientów tylko galerię realnych prac). Nie wybieraj najtańszej ani podejrzanie taniej oferty. Pamiętaj, że w tej branży możesz wybrać tylko dwie opcje spośród trzech: tanio, szybko, dobrze. Wymagaj przedstawienia harmonogramu prac i kontaktu w określonych terminach. Ustal warunki przyszłych aktualizacji projektu i wdrożeń poprawek w przypadku zmian w oprogramowaniu (np. pojawienia się nowych funkcji) Jeśli chcesz porozmawiać o projekcie graficznym dla Twojego sklepu, zadzwoń do nas: (pon - pt, 8-16) #1 Grafika i wygląd sklepu 7