SIEDEM GRZECHÓW GŁÓWNYCH  POPEŁNIANYCH PRZY TWORZENIU STRON WWW

Tworzyć strony www każdy może - trochę lepiej lub trochę gorzej. Niestety błędy elementarne powstają już w fazie planowania i projektowania, dlatego najważniejsze jest ustalenie, co Klient chce na stronie. Właściwie zaprojektowana architektura informacji, z jasnym podziałem na kategorie to podstawa sukcesu w sieci. Wspólnie z klientem należy zdefiniować realne cele, jakie ma spełniać dana witryna.

Cele podstawowe witryny internetowej:

- informacyjny (przejrzysta i konkretna treść,oferta pisana językiem korzyści),
- wizerunkowy (ciekawa grafika spójna kolorystycznie z branżą ale bez wodotrysków),
- sprzedażowy(optymalizacja pod względem pozycjonowania),
- oszczędnościowy (zmniejszenie kosztów obsługi klienta poprzez umieszczenie w witrynie pełnej oferty firmy czy sklepu internetowego, formularzy do pobrania, zakładki FAQ,która odpowiada na pytania ; dzięki takiej strategii możemy ograniczyć liczbę telefonów i zapytań ofertowych, których obsługa zajmuje cenny czas i rzadko przynosi wymierne korzyści).

Oto 7 grzechów głównych popełnianych przy budowie stron www:

1. Nadmierne rozbudowanie warstwy graficznej witryny i źle dobrane kolory do branży


Graficy często używają nietypowych i niezrozumiałych elementów menu, żeby popisać się swoim talentem, jednak z badań psychologów wynika jasno - zbyt rozbudowane animacje flash raczej odstraszają internautów i zniechęcają do dalszej eksploracji. Czy to znaczy, że funkcjonalność stron internetowych nie idzie w parze z atrakcyjną szatą graficzną? Idzie, a nawet biegnie, jednak w tym duecie trzeba zachować estetykę, umiar, przejrzystość, spójność komunikatów zarówno tekstowych jak i graficznych. Niespójność wizualna podstron i chaotyczne stosowanie wielu czcionek o różnych rozmiarach oraz wszystkich kolorów tęczy to częsty problem. Znaczenie ma także wielkość, kolorystyka, położenie przestrzenne i intuicyjność ikon funkcyjnych.


- STRONA POWITALNA z przyciskiem "wejście" niczemu nie służy, lepiej z niej zrezygnować. Błędem jest także tworzenie całej strony w bardzo popularnej wśród grafików technologii Flash, gdyż znacznie obniża ona  dostępność witryny, często stanowi przerost formy nad treścią i spowalnia niektóre części strony, co może irytować użytkownika. Na niekorzyść serwisu wpływa także jego zbyt duża objętość, na którą składa się waga wszystkich elementów, od kodu HTML i JavaScript po pliki graficzne, filmy itp.

- MUZYKA na stronach internetowych dawno przeszła do lamusa. W czasach kiedy większość z nas surfuje po internecie, słuchając tego, co mu się podoba, wielkim nietaktem jest tworzenie kakofonii i narzucanie użytkownikowi słuchania tego, co podoba się dyrektorowi. Muzyka często irytuje, dlatego należy z niej zrezygnować, a jeśli jest konieczna to przynajmniej trzeba dać widoczną możliwość jej wyłączenia.

- KOLORYSTYKA nie jest obojętna dla potencjalnego użytkownika strony i ma znaczenie w podejmowaniu decyzji konsumenckich. Każda branża ma intuicyjnie zarezerwowaną gamę barw w jakiej powinna się poruszać np. pomarańcz i błękit - optymistyczne kolory młodości i witalności idealnie pasują do  serwisu randkowego lub portalu o tematyce turystycznej. Przewaga barwy pomarańczowej symbolizuje gorącą letnią porę, pewność i energię. Kolor ten często używany jest także przy tworzeniu stron internetowych dla ludzi młodych. Inaczej jest z branżą związaną z finansami - doradcy finansowi czy banki powinni unikać jak ognia koloru czerwonego (wyzwala podświadomie emocje towarzyszące spadką na giełdzie), a strzałem w dziesiątkę jest zielony, kojarzony z hossą na GPW. Salony kosmetyczne chętnie korzystają z różu, natomiast gabinety lekarskie, szkoły wyższe z pastelowego niebieskiego.

- KONTRAST a właściwie słaby kontrast to częsty problem pojawiający się na stronach www. Designerzy namiętnie stosują tekst o podobnym kolorze do tła, ponieważ myślą, że wygląda to estetycznie, albo bardzo jaskrawe elementy, bo przykuwają uwagę, nie zdając sobie sprawy z tego, że ciężko się to czyta. Niekiedy trzeba zbliżyć głowę na 20cm od monitora, żeby przeczytać taki tekst. Szczególnie buttony takie jak "szukaj", "czytaj więcej", "zaloguj się" powinny kontrastować z tłem i sprawiać wrażenie wypukłych gdyż umożliwiają interakcję użytkownika ze stroną.


- LOGO na stronie powinno być umieszczone na samej górze w lewym rogu i zajmować maksymalnie 1/3 szerokości strony, tuż pod logo nieco mniejszą czcionką umieszczone motto. Logo to obraz, który użytkownik powinien zobaczyć w pierwszej kolejności. Polska jest krajem, w którym czytamy od lewej do prawej, dlatego właśnie do tego rogu najpierw powędruje wzrok użytkownika. Jeżeli chodzi o stronę graficzno-estetyczną, zaleca się odświeżenie co jakiś czas logo, szczególnie wtedy gdy rażąco nie pasuje do poziomu nowo powstającej  witryny. Logo nie może sprawiać wrażenia jakby zostało stworzone w Wordzie za pomocą funkcji WordArt.To dyskwalifikuje firmę w oczach klienta.

- BANNER może być w formie statycznej lub dynamicznej (ruchomej). Zdjęcia banerowe muszą być  profesjonalne i interesujące, ale nie za duże. Najczęściej promują one jeden główny produkt lub usługę. Warto w banerze dynamicznym umieścić produkt główny z każdej kategorii lub stworzyć historyjkę z kilku zdjęć i zdań nawiązującą do branży. Ogromny banner na stronie głównej z bardzo szybko zmieniającymi się fotografiami sprawia, że dostaje się oczopląsu (może zaszkodzić epileptykom), nie mówiąc o tym, że nawet nie sposób zobaczyć, co kolejne fotografie nam przedstawiają. Kiedy mamy do czynienia z bannerem dynamicznym i każdy z elementów porusza się w inny sposób i z inną szybkością, trudno skupić się na czymkolwiek, dlatego lepiej zrobić proste przejścia niż akrobacje flashowe. Fajnie  gdy banner jest  klikalny i zachęca do interakcji - np. kliknij i zapoznaj się z ofertą albo promuje coś - nie jest to jednak wymóg. Wymogiem jest aby intuicyjnie kojarzył się z branżą. Dynamiczne banery i slideshowy nie powinny zmieniać się zbyt szybko. Użycie elementów zmieniających się z dużą prędkością nie wpływa pozytywnie na odczucia użytkownika. Są one frustrujące dla tych, którzy wolno czytają, ale także utrudniają przeglądanie zawartości reszty strony, nieustannie odciągając uwagę. Warto aby przy dynamicznych elementach strony był przycisk pauzy, przerywający taki cykl.


- PERSONALIZOWANE ZDJĘCIA W KONTENCIE I W MODUŁACH; warto stosować tzw. wabiki/atraktory uwagi np. serwis randkowy zamieszczający zdjęcia par którym się udało i personalizowane rekomendacje - wbrew pozorom takie zabiegi działają i uwiarygodniają.

- NAWIGACJA/BUTTON/CALL TO ACTION; brak konsekwencji w wyglądzie nawigacji poszczególnych elementów to także częsty błąd. Jeśli wyróżnione elementy służą bardzo podobnemu celowi, ich zachowanie po najechaniu kursorem myszki powinno być podobne.Witrynę musi charakteryzować przede wszystkim łatwa i intuicyjna nawigacja, która nie powodują  poczucia zagubienia i pozwala na szybkie dotarcie do poszukiwanych informacji, dlatego przyciski takie jak np. zaloguj, zarejestruj, więcej, wstecz, szukaj powinny być dobrze widoczne.

- LOGOTYPY PARTNERÓW powinny być ładnie wycięte w png, a jeśli  nie to przynajmniej umieszczone na białym tle, aby wyglądały schludnie. Lepiej ukazać wszystkich partnerów ciągiem flashowym niż każdego z osobna slajdami.

- KONTAKT powinien być widoczny w module. W kontakcie należy zawrzeć takie informacje jak: dokładny adres biura, piętro, telefon stacjonarny, telefon komórkowy, e-mail, godziny pracy, mapkę google, warto także zamieścić NIP, REGON, KRS i kapitał zakładowy. Wskazana jest także estetyczna grafika np. telefon, koperta, małpa i tekstowa zachęta do akcji- "napisz lub zadzwoń". Powinna pojawić się także INFORMACJA O INFOLINII. Taką informacje umieszcza się albo na górze po prawej albo w module po lewej/ ale tylko raz, zachęta do akcji z obrazkiem telefonu albo uśmiechniętą Panią z call center.

- PUNKTORY powinny być na każdej podstronie takie same, należy także pamiętać o zachowaniu symetrii przy wymienianiu usług czy produktów.

- CZCIONKA powinna kontrastować z tłem, około 15 pkt, raczej czarna na białym tle niż biała na czarnym, odpowiednio duża i standardowa z polskimi znakami. Nagłówki większe i wyboldowane. Czcionki niestandardowe stosuje się jako element dekoracyjny np. w bannerach, w logo, w motto, natomiast w kontencie unikamy tego typu rozwiązań. W branżach stawiających na nowoczesność lepiej używać czcionek bezszeryfowych (Verdana, Geneva, Arial, Helvetica,Tahoma, Myriad Pro, Minion Pro), niż szeryfowych (Times New Roman, Georgia, Garamond, Lucida, Curier New). Tekst w kontencie najlepiej pisać czcionką o wielkości 14px, nagłówki: 17 z boldem, 20 bez boldu. Optymalna szerokość strony aby była dopasowana także do notebooków i iphonów wynosi max 1100 piks.



2. Książkowe ułożenie tekstu na stronie


Różnica między stroną WWW, a tradycyjnym materiałem drukowanym jest kolosalna. Ekran komputera nie jest kartką papieru, a stronę WWW czyta się inaczej niż broszurę, czy folder reklamowy. Na podstawie wielu badań użyteczności stron oraz analiz typu eye tracking (badanie ruchu gałek ocznych użytkownika) udowodniono, że internauci nie czytają stron WWW w całości, a raczej je przeglądają ją, "skacząc wzrokiem" między różnymi elementami.

Trzeba im to umożliwić, zachowując odpowiednią przejrzystość, umieszczając najważniejsze informacje na górze strony, czy też pozwalając na przeglądanie poszczególnych stron w wygodny dla nich, a nie w z góry narzucony sposób.

Odpowiednie dzielenie tekstu oraz pisanie  w stylu odwróconej piramidy jest jak najbardziej wskazane. Ważne informacje powinny być zawsze  umieszczone w górnej części ekranu.  Nie należy zostawiać dziur, tekst musi być wyjustowany, a zdjęcie powinny oblane tekstem.

Skomplikowana i nieczytelna struktura serwisu, zbyt duża ilość danych i informacji oraz trudność w znalezieniu poszukiwanych materiałów wywołują u użytkowników poczucie zagubienia np.w menu czy w stopce. Człowiek ma ograniczoną zdolność percepcji i może jednocześnie ogarnąć około siedmiu elementów, dlatego przy budowaniu menu należy pamiętać o zasadzie użycia 7±2 elementów.

Dobra wyszukiwarka, która pozwala od samego początku zacieśnić krąg poszukiwania to podstawa portalu randkowego czy sklepu internetowego.

Minusem dla użytkowników może stać się długość strony. Zdarzają się strony, w których aby dojechać do ich końca, trzeba w przypadku standardowych rozdzielczości dwukrotnie użyć przycisku "Page Down".



4.Brak informacji o tym, gdzie użytkownik się aktualnie znajduje

Pamiętajmy aby aktywna zakładka menu była wyróżniona innym kolorem, warto aby witryna zawierała ścieżkę nawigacyjną, aby użytkownik nie czuł się zagubiony jak w labiryncie Minotaura. Warto także aby na stronie był dobrze widoczny pasek nawigacji dodatkowej, zwany "okruchami chleba" (ang. breadcrumbs).  W przypadku okruchów chleba przyjęła się nazwa "Strona główna". W pasku zawsze powinien być link ułatwiający użytkownikowi powrót do strony głównej.

5. Niestandardowe nazewnictwo/słownik

np. koszyk nazwany wózkiem w sklepie internetowym, język czy grafika muszą być intuicyjne, zgodne z doświadczeniem użytkownika np. domek jako powrót do strony głównej) brak tłumaczenia zwrotów obcojęzycznych, onanizm lingwistyczny i różnego typu skróty (powinny być wyjaśnione aby nie odsyłać użytkownika do google), błędem jest używanie  w menu głównym nazewnictwa nic nie mówiącego użytkownikowi np. sferowo?? sfera realu..."Corporate Governance". Pamiętajmy- Polacy nie gęsi...

6. Po wykonaniu akcji, niemożność cofnięcia jej
np. zakup produktu i brak możliwości szybkiego wycofania się z jego zakupu, brak możliwości zmiany zmiany maila-od początku uzupełnianie formularza, przycisk wyślij obok wyczyść - może skutkować pomyłką i nagle cały formularz przepada, jeśli nie działa możliwość cofnięcia akcji.

7. Zbyt długi formularz czy ankieta

Jeśli pole formularza wymaga szczególnego sposobu wprowadzenia danych (co raczej nie powinno mieć miejsca), to osoba wypełniająca musi zostać o tym poinformowana wcześniej. Po drugie, w przypadku popełnienia błędu, należy wyświetlić ponad formularzem odpowiedni komunikat oznaczony czerwonym kolorem, który wskazuje na problem. Nie wystarczy enigmatyczny przekaz w stylu "Błąd!". Konieczny jest dokładniejszy zwrot rodzaju "Uwaga! Nie wypełniłeś pola z datą urodzenia". Problematyczne pole powinno zostać dodatkowo oznaczone. Nic nie stoi na przeszkodzie, aby otoczyć je czerwoną ramką i wyświetlić dodatkowy komunikat. Im mniej pól użytkownik musi zaznaczyć/ wypełnić, tym większe prawdopodobieństwo, że wypełni formularz. W tym wypadku trzeba koniecznie podać imię, nazwisko, e-mail i zaznaczyć dwa checkboxy, a wystarczy sam adres poczty elektronicznej i link do warunków.



W trakcie tworzenia strony trzeba zawsze pamiętać o optymalizacji strony pod względem pozycjonowania. W tym celu w kodzie źródłowym powinno się uzupełnić tagi "keywords" oraz "descriptions", nadać obrazkom alternatywne teksty. Adresy URL powinny być nadpisane a tytuł strony musi zwierać słowa klucze. W stopce max 10 słów kluczy podlinkowanych, nie należy przesadzać - ograniczona percepcją. Tego typu zabiegi ułatwią pozycjonowanie strony w wyszukiwarkach. Pozycjonowanie strony to krok kolejny, który jest konieczny jeśli Klient chce aby jego strona była odwiedzana przez potencjalnych klientów, bo samo stworzenie i zawieszenie strony w internecie to dopiero połowa sukcesu.

autor artykułu:

Dagmara Klekowska, psycholog biznesu

© 2012 GRUPA DENIGMA, wszelkie prawa zastrzeżone