Zasady Tworzenia Serwisów Sprzedażowych

[Inwigilator]

W wielu tematach powtarzają się regularnie podobne problemy, podobne błędy.

Tu proponuję zbierać odpowiedzi na typowe problemy i starać się tworzyć zasady pomocne przy tworzeniu serwsów, szczególnie tych nastawionych na sprzedaż a więc zmuszone do sięgania po dodatkowe mechanizmy zainteresowania klienta. Na początek zebrałem pare uwag z różnych tematów.

Wstęp,

czyli planowanie treści strony.

Oczywiste, że budowanie strony po kawałku i dostawianie przybudówek nie jest receptą na zgrabną i porządną stronę. Pierwszy etap tworzenia strony to makieta. Jedyną nowością w stosunku do powszechnej praktyki rozplanowywania strony będzie tu stwierdzenie, że stroną rządzi jej treść i wszystko podporządkowane jest treści.

Filozofia treści:

Pomocne na wstepie są podstawowe zasady marketingu a dokładnie stosowana w reklamie AIDA:

Ściągnij uwagę odrazu na stronie głównej - tu działa kolor, położenie, ruch. Zainteresuj produktem odrazu, posłuż się wyjątkową ceną, pięknym zdjęciem, niezwykłym produktem lub sposobem sprzedaży. Klient wchodzi głębiej -klika.

Wywołaj chęć zakupu, użyj "specjalnych słów", przekonaj racjonalnymi argumentami albo podejdz klienta na emocje -to działa jeszcze lepiej. Promocja, oferta specjalna, gratis, cokolwiek wyjątkowego, tylko teraz, tylko dla Ciebie, a dzięki temu będziesz miał wspaniały ogródek, piękne drzewko i żona zacznie cię kochać bo to drzewo uczyni cię wreszcie mężczyzną i tak dalej...

Umożliwiaj klientowi natychmiastową akcję, zapewniaj pełną obsługę, podawaj łatwo maile, telefony, adresy, rozwiewaj wątpliwości co do rzetelności usługi, usuwaj wszystkie kłody spod nóg klienta. Tu ważne są możliwości zamawiania, wnoszenia opłat, wybór czego się da i łatwość nawigacji.

Przedstawiłem powyżej prościutki mechanizm marketingowy stosowany w reklami od lat, nic nowego, z tym, że w sieci żadko stosowany bo programiści nie maja na ogól takiej wiedzy z zakresu reklamy. Tym lepiej jeśli ktoś ją ma- bo łatwo przeskoczyć konkurencję.

Ustalanie treści:

Należy zacząć prace w odpowiedniej kolejności:

-ustalić co na witrynie chcemy zawrzeć

-ustalić jaka jest ważność tych treści -dla użytkowników i dla nas;

-przyjęta ważność treści musi zostać wykorzystana do posegregowania zawartości

-wyjdą z tego podkategorie i możesz zacząc projektować menu i zawartość poszczególnych podstron

-przygotowujesz layout dopiero kiedy wiesz ile treści musi się znaleść na stronie głównej i ile średnio na podstronach - wtedy można dopiero poszaleć z grafiką.

Tekst na stronach:

Polecam oczywiście temat o zasadach interpunkcji.

Tekst strasznie nabity, brak akapitów, formatowania oraz za dużo tekstu obok siebie sprawia, że zniechęca czytającego. Ludzie czytają mało i lubią konkrety. Wstawienie kilku obrazków, wytłuszczenie głównych informacji i porządna obróbka tekstu (minimalizacja słów) sprawi, że skuteczność przekazu znacznie wzrośnie. Należy wywalić wodolejstwo, posługiwać się hasłami, skrótami myślowymi, wezwaniami skierowanymi do odbiorcy -Weź udział, Kup, Zagraj, Wybierz, Sprawdz. To tanie chwyty psychologiczne, które gwarantują świetne efekty, oczywiście stosowane z umiarem i ostrożnie. Jeśli ktoś nie czuje się sam na siłach, polecam usługi copywriterów, korektorów. Lepiej wydać 50 -100zł za stronę tekstu niż tracić klientów.

Projektowanie układu: (makieta)

Kartka papieru i rysujemy. Można też użyć jakiegoś prostego programu. Opierając się na ogólnych zasadach prowadzenia wzroku najważniejsze miejsca są proste do wyznaczenia. Tam należy dać najważniejszą zawartość.

Wystarczy wzorować sie na portalach, które mają profsjonalne wyniki badań i na ich podstawach projektuja serwisy.

Oko widza ląduje mniej więcej w 2/5 ekranu od góry i 1/5 od lewej po czym zjeżdza w kierunku prawy-dół do punktu znajdującego się w 4/5 szerokości na sam dół ekranu.

Jeśli chcemy podciągnąć oko z miejsca lądowania troszkę w górę lub w lewo -pomoże w tym kolor, ruch i grafika (ewentualnie większa czcionka). Dlatego jeśli najważniejszy jest dla nas zwykły tekst - artykuł umieszczamy dokładnie w tym punkcie, opatrując go w nagłówek koncentrujący uwagę (gdyż oko nie łapie masy tekstu traktując ją jak jedną plamę) -tekst nie może być dlugi bo oko ucieka- jeśli chcemy dać dużo treści- kierujemy okiem za pomocą akapitów, zaganiamy zdjęciami na druga stronę, używamy nagłówków śródtekstowych itd- cała zabawa w wilka i owce.

Trzymając się tej zasady jeśli nad miejscem lądowania umieścimy hasło lub logo - mamy duże prawdopodobieństwo, że podciągna one wzrok widza w górę. Jeśli logo damy po prawej na końcu billboardu -poprowadzimy oko na prawo i stracimy sporo czasu żeby zagonić widza (trikami, lub poprostu informacją której poszukuje) na druga stronę. Trzeba pamiętać, że widz się szybko nudzi. Nie znajdzie nic interesującego poza logo i go juz nie ma.

Dlatego ważne jest...

Projektowanie grafiki:

Polecam lekturę tego artykułu o kolorach.

Strona to treść a grafika to uzupełnienie i za zadanie ma "nie przeszkadzać" a wspomagać odbiór treści.

Kolorystyka strony oddziałuje na widza, wprawia go w nastrój, skłania do pewnych zachowań, nasuwa skojarzenia. Dobór kolorów dla firmy jest elementem całej polityki sprzedazy.

Sama grafika, jako synteza koloru i kształtu jest najskuteczniejszą formą przekazu. Jedno zdjęcie jest w stanie zawrzeć więcej informajcji niż strona tekstu.

Wygląd zdjęcia wpływa na wyniki sprzedazy. To jak zaprezentujemy produkt ma kluczowe znaczenie- patzr zasady sprzedazy. Dlatego lepiej zainwestować w obróbkę zdjęć i wycinani niż ładować wszystko na stronę automatem. Musimy sprawić klientowi możliwość jaknajpełniejszego poznania produktupomimo niemożności dotknięcia go. Dzieki temu możemy uniknąć zwrotów, zawodów i nieporozumień. Możemy także zwiększyć sprzedaż. Jeśli układ produktów i wygląd strony porównamy do układu na wystawie to brzydka jakość zdjęć będzie jak brudna szyba i pokryte kurzem nic nie warte eksponaty.

Kształt też wpływa na odbiór przez widza. Delikatność lini, zgrabność formy graficznej -- perfumy, delikatne ubrania i bielizna, kwiaty, biżuteria. Ostre linie, podziały to cechy męskie -motoryzacja, sprzęt, komputery, broń i militaria.

projektowanie grafiki jest kluczowym sposobem na stworzenie...

Klimatu strony

Przykładowo strona o perfumach powinna sprawiać wrażenie wykwintności, wytworności, zamożności i dobrego smaku. Klient musi czuć się zadowolony z zakupu w eleganckim sklepie. To dlatego choć dasz do porównania klientowi orginalne Chanel kupione od ruskich, (kradzione powiedzmy z tirów) i podróbe Chanell z eleganckiego sklepu - to i tak większość będzie się zarzekać, że te ze sklepu lepiej pachną. Ważne jest poprostu opakowanie.

Świetnym narzędziem budowania klimatu jest muzyka ale należy stosować to ostrożnie. Nie chcemy zawału serca u naszego uzytkownika, oglądającego w środku nocy, po ciemnku stronę na której w sklepie z militariami wita go seria wystrzałów.

Na koniec luźne uwagi dotyczące funkcjonalności. Mam nadzieję, że wątek będzie rozwijany

Funkcjonalność.

Przykład

Szukałem książki kilka minut, znalazłem, wyczytałem o niej ile sie da (a mało się da) i "dodałem do koszyka" i co? Kuku. "Załóż konto, aby móc dodawać pozycje do koszyka" a książkę poszukaj sobie jeszcze raz.

Nie zabardzo idzie się tu na rękę klientowi.

Funkcjonalność w reklamie:

Standardy form reklamowych w Internecie oparte są na badaniach i doświadczeniach specjalistów, warto więc skorzystać z nich nawet w kwestii takich banałów jak banner na stronie prywatnej. Pozwala to na wykorzystanie takiego bannera taże na innych serwisach w celu promocji własnego. Zmniejsza rozproszenie oka widza, przyzwyczajonego zresztą do takiej formy graficznej, ma tez wiele innych zalet. Znajomość standardów pozwala także przygotować własną stronę pod emisję przyszłych reklam, jeśli taką się planuje. Standardy IAB tutaj.

Rozpisałem się i muszę teraz lecieć, sporo zostało do opisania ale na to przyjdzie czas.

[Gość w3master]

mysle, ze polski internet nie bedzie gotowy na taka dyskusje, dopuki nie zdamy sobie sprawy z istotnej rzeczy - stron nie tworzymy dla siebie, nie dla wlascicieli, nie dla zon wlascicieli, ale dla klientow. to on podejmie ostatecznie decyzje, czy dokonac zakupu, czy nie. a w tej decyzji napewno nie pomoze to, ze zona zleceniodawcy gustuje w rozowym.

[Tomekk]

ja uważam, że właśnie dzięki takiej dyskusji, na temat poruszony przez Inwigilatora, polski internet może zdać sobie sprawę jak ważną rolę odgrywa opowiednie przygotowanie tekstu i grafiki.

[XaV1er]

Ciekawe i dobre informacje, szkoda ze ostatnie akapity takie krotkie

Natomiast chcialbym zwrocic uwage, ze traktuja one bardziej o uzytecznosci (usability) niz funkcjonalnosci. To co autor przedstawia, to ulomnosc interfejsu uzytkownika, ktory nie zostal zoptymalizowany, a wiec kuleje jego uzytecznosc, a nie funkcjonalnosc (jestem pewien, ze skrypt realizuje funkcje dokladania rzeczy do kosztka, jak juz sie zarejestrujesz) !!!

pozdrawiam

no i mam nadzieje ze rozwazania beda kontynuowane

[Gość w3master]

mozemy tez zrobic liste niezbednej bibliografii:

• projektowanie funkcjonalnych serwisow internetowych - jakob nielsen
  
• architektura informacji w serwisach internetowych - louis rosenfeld
  
• serwisy www, projektowanie, tworzenie i zarzadzanie - june cohen
  
• przyjazne witryny www - 37 signal, matthew linderman
  

do trzeciej i czwartej pozycji zagladam regularnie

lista pozycji polecana przez autora *https://webaudit.pl/ - roberta drozda

Defensive Design for the web,

- tu glownie problemy serwisow transakcyjnych, formularze, intranety. Napisali to praktycy z 37signals

Web Bloopers 60 Common Web Design Mistakes And How To Avoid Them

- problemy wlasciwie z kazdej dziedziny

The Design of Sites - Patterns, Principles, and Processes for Crafting a Customer-Centered Web Experience

- to taka cegiełka, opisane ponad sto roznych elementow serwisu oraz tego jak ludzie z nich korzystają

Usability For The Web

- to sie raczej przydaje gdy analizuje sie nie gotowy serwis, ale jeszcze w trakcie projektu, sporo checklist i sugestii

Bulletproof Web Design

- tu raczej kwestie standardów sieciowych i dostępności

zasoby www:

• *https://www.ok-cancel.com/
  
• *https://offline.pl/
  
• *https://webusability.pl/
  
• *https://www.nierobcietegowdomu.pl/
  
• *https://www.aresluna.org/attached/usability
  

[Inwigilator]

Przeklejam kawałek o psychologicznych aspektach projektowania i wpływu na sprzedaż.

Programowanie Neurolingwistyczne czyli docieranie do adresata komunikatu z pominięciem procesów racjonalizacyjnych. W skrócie -polega to na specjalnym formułowaniu komunikatu lub przekazywaniu go w specyficznych okolicznościach. Efekt komunikatu to przyjęcie go "do wiadomości" a nie zastanawianie się nad jego sensownością czy polemizowanie z nim. Stąd nazwa- zaprogramować kogoś nie znaczy przekonać. Znaczy -wprowadzić mu do głowy daną rzecz bez sprzeciwu.

Programowanie neurolingwistyczne jest jednym z ciekawszych zagadnień psychologi kognitywnej, szczególnie w zakresie właśnie nas interesującym -wywierania wpływu na klienta.

Przykładami wykorzystania komunikatu wywierającego wpływ są hasła reklamowe (plus cała reszta mechanizmów), które kreują wizerunek produktu z którym podświadomie się oswajamy. "Głodny na co czekasz?" oznacza "Snickers zaspokaja głód". Jesteśmy głodni i nie zastanawiamy sie już czy ten batom zaspokoi głód (bo tak naprawdę nie zaspokoi), to że zaspokoi już wiemy/przyjmujemy na wstępie i decyzja przenosi sie na inny poziom -czy nas stać na niego, czy ten a nie inny itd. I dalej sprzedawca używa innych mechanizmów itd, itd. Już nie musi sie martwić mamusiami, które będą dzieciom tłumaczyć ze słodyczami sie nie najedzą. Dzieci wiedzą swoje z reklamy, a powszechnie znana jest prawda, że łatwiej komuś zaszczepić opinię na nowy temat niż ją zmienić.

Polecam książkę Dolińskiego "Wywieranie wpływu społecznego", ponadto w bibliografi znajduje się sporo innych, ciekawych pozycji. Niestety wszystko trzeba samemu przenosić na grunt Internetu.

[zeus]

Apropo tematu Roberta Drozda i jego strony to wlasnie na niej wyczytalem informacje o nowej ksiazce (pierwszej w polsce) nt. SEM ktora pisze jeden z forumowiczów a na ktora np. ja osobiscie czekam ze zniecierpliwieniem

[Inwigilator]

Kilka uwag na temat prezentowania logotypu.

Logo firmy jest ważnym elementem polityki firmy. Jest uzywane jako znak rozpoznawczy, jako element wpływający na postrzeganie firmy i jako element promujący produkt. Oczywiście specjalistyczna literatura wyróżnia przeróżne funkcje i zastosowania logotypów, natomiast tu postaram się podać kilka użytecznych uwag dla projektujących serwisy i posługujących się logami.

1. Logo powinno posiadać swój obszar ochronny, którego nie należy naruszać podczas prezentacji. Nic nie powinno nachodzic na logo, przysłaniać go, być w jego tle czy dotykać go bezpośrednio. Zależnie od rozmiaru około 10% wielkości logo dookoła to obszar ochronny.

2. Nie prezentuje sie w okolicy logo lub w miejscach zwykle przeznaczanych na logotyp -żadnych mogących wprowadzić w błąd logopodobnych elementów.

3. Kolorystyka logotypów powinna być konsekwentnie stosowana. Kolory powinny być dobrane tak, by logo można było zaprezentowac na bieli i na najpopularniejszych tłach. W przypadku problemów należy stosować wersję logo przygotowaną pod dane tło.

4. Kształt logo -najpopularniejszy to prostokąt/kwadrat. Koła są niebezpieczne ze względu na prezentację głównie na prostokątnych obszarach- więc logo kuliste będzie marnować miejsce i nie będzie mogło byc tak wyraźne jak podobne logo w formie prostokąta. Zawsze należy zobaczyć ile tracimy z wielkości jeśli chcemy umieścić logo w kwadracie i prostokącie.

Kiedyś była tendencja do konstruowania logo w oparciu o nazwę i element charakterystyczny, można sie wtedy posługiwać całością lub tylko elementem - np. Nike i słynny ptaszek, obecnie dominuje tendencja do wiekszego nacisku na wizerunek i nowe loga opierają się na nazwie i haśle -np. HBO To nie TV to HBO!, AXN Telewizja akcji, lub prezentowaniu znaku kojarzonego z nazwą i hasła przykładowo mcdonalds--https://www.mcdonalds.pl/ , pepsi i kulka, suzuki i S, itd Najlepiej wykorzystywać wzory najpopularniejsze gdyż są to rozwiązania w które zainwestowano olbrzymie fundusze (np logo orlenu sprzedano za tak wygórowaną, chorą sumę a przecież to tylko dwie kreski i kropka). Oczywiście nie ma co wykorzystywać cudzych pomysłów, mówię tylko o konstrukcji.

Muszę wychodzić, może coś więcej jeszcze pożniej dorzucę kiedy to przeczytam.

[Inwigilator]

Copywriterskie zasady tworzenia zawartości.

1. Tekst ma być krótki.

Nie piszemy: W naszej firmie zajmujemy się między innymi projektowaniem stron internetowych.

Piszemy: Projektujemy strony internetowe.

Odbiorca nie ma czasu czytać, a jak ma czas to lepiej możemy mu go spożytkować.

Często ilość tekstu odstrasza i tracimy odbiorcę gdyż uznaje że tu łatwo nic nie wyczyta. Idzie gdzie indziej.

2. Tekst ma być na temat.

Nie piszemy: Hodowla krów jest niezwykle niebezpieczna, lecz dzięki wieloletniemu doświadczeniu i pełnego zaangażowania osiągneliśmy w tej dziedzinie niezwykłą biegłość.

Piszemy: Jesteśmy specjalistami w hodowli krów.

lub krócej: Specjalizujemy sie w hodowli krów.

3. Tekst ma być sensowny.

Nie piszemy: Naszą firmę załozył już pradziadek Antomi i od tej pory z ojca na syna przekazujemy sobie sekret uprawy najwspanialszej odmiany buraka cukrowego.

Piszemy: Firma istnieje od 1910r. z powodzeniem doskonaląc uprawę buraka cukrowego.

4. Tekst ma być.

Nie dajemy na SG pieknego zdjęcia naszego pieska i nic więcej.

Piszemy: Champion MAX, wielokrotny zwycięzca na międzynarodowych pokazach psów rasy bullterier.

Generalnie musimy napisać co to za strona, zasugerować czego możan spodziewać się na podstronach.

Hasło w nagłówku - Hodujemy championów i zdjęcie psa- wyjaśnia już sporo-- że to strona hodowcy, że hoduje psy, że ma dobre wyniki...

Hodowla Mysiekiszki - juz nie jest takie wspaniałe bo nie wiemy co sie tu hoduje-- wiec lepiej Hodowla psów rasy Bullterier "Mysiekiszki" jeśli to nazwa hodowli.

Wypada też napisać pare słow na SG. Nie polecam rozpoczynać "Witajcie" bo to troszkę naiwne.

Seria szybkich faktów, napomykając o zawartości podstron - w 2-3 krótkich akapitach absolutnie wystarczy.

5. Tekst ma byc poprawny gramatycznie, ortograficznie, ma byc sformatowany, wyrównany, ujednolicony, z wyszczególnionymi nagłówkami, akapitami itd.

Często zmieniane są całe zdania tylko po to aby dana linijka miała o 10 znaków więcej i kończyła się idealnie z poprzednią.

6. Duże ilości tekstu można łamać za pomocą lini przerwy, kolejnego nagłówka, przesunięcia całego akapitu w stosunku do reszty (lub wcięcie), a także poprzez umieszczanie w tekście zdjęć i grafiki.

tyle narazie...

[Inwigilator]

Tak to robia zawodowcy:

https://www.zloteczasy.pl

przykład jak zainteresować i wciągnąć w coś co przeciętny internauta omija szerokim łukiem....

[Inwigilator]

Projektowanie menu. cz1

Lokalizacja:

Podział: lewa kolumna, góra-środek, prawa kolumna, menu niestandardowe.

Umieszczanie menu w lewej kolumnie przy samym brzegu strony ma najwięcej zalet

-jest to miejsce w którym widz intuicyjnie poszukuje menu, miejsce to ściąga wzrok a konstrukcja -pisanie pod sobą -pozwala na zamieszczenie dużej ilości linków.

Góra-środek ma ten minus, że frazy w menu wyznaczają wielkość (długość) buttonów, poza tym menu nie może zawierać wielu linków. Plusem jest centralne ustawienie manu a zatem lepsza widoczność.

Prawa kolumna nie jest najlepszym miejscem do umieszczania menu. Jest to miejsce gdzie wzrok widza kończy oglądanei strony, zupełnie nie intuicyjne dla poszukującego treści. Rodzi tez inne funkcjonalne problemy jak równanie do lewej lini- przez co różne długości wyrazów w menu "brudzą" nam prawą krawędź strony.

Menu niestandardowe- umieszczane na środku, lub dole strony, lub zupełnie dominujące stronę wykluczając prezentowanie innych treści, mają swoje plus i minusy zależnie od okoliczności. Pasują szczególnie w stronach zupełnie neistandardowych, choć jako odcinające się od powszechnego doświadczenia widzów mogą czasem skutkować zmniejszoną skutecznością całego serwisu. Niekonwencjonalne menu jest często uzywane w Intro. Jest to dosyć skuteczny sposób zaprezentowania co można na stronie znaleść pod warunkiem małej ilości buttonów oraz dobrego dobrania zwrotów do treści.

Warto pamiętać, że do wytworzenia charakteru (klimatu) strony także można użyć rodzaju menu

-menu standardowe, do stron uporządkowanych

-menu niestandardowe powoduje efekt "disrupt" czyli rozbicia uwagi widza, dobre do stron które mają mieć taki efekt, stron promujących agresywnie lub mających kampanie negatywne itp

[mrtn]

przykład jak zainteresować i wciągnąć w coś co przeciętny internauta omija szerokim łukiem....

nie rozumiem wszedłem dwa razy raz zinto raz bez ... czeka sie długo nic nie zoabczyłem wyszedłem

to chyba prawidłowy przykład złego zchęcania :/

[MMP]

Prawa kolumna nie jest najlepszym miejscem do umieszczania menu. Jest to miejsce gdzie wzrok widza kończy oglądanei strony, zupełnie nie intuicyjne dla poszukującego treści. Rodzi tez inne funkcjonalne problemy jak równanie do lewej lini- przez co różne długości wyrazów w menu "brudzą" nam prawą krawędź strony.

Tutaj sie troche nie zgodze. Masz racje jeżeli chodzi o strone główną.Na podstronach z treścią menu powinno przejść właśnie na prawą strone by czytający mógł sie skupić na treści.

[Inwigilator]

Jak najbardziej się zgadzam z tym co piszesz, nie zdązyłem niestety skończyć poprzedniego posta, wysłałem co miałem przed wyjściem. Dotyczyło strony głównej.

Menu w prawej kolumnie jest dobrym rozwiązaniem jako nawigacja w tekście, szczególnie w przypadku długich artykułów. Można w kilku punktach streścić cały artykuł, z możliwościa przeskoczenia do interesującego nas wątku. Można także umieścić w takim menu inne artykuły związane z tym prezentowanym. Przykład takiego menu: https://www.tezmedium.pl/efficiency.xml

Każdy typ menu odpowiednio dopasowany do funkcji i grupy docelowej serwisu może mieć szczególne zalety w konkretnym przypadku a byc zupełnie bezuzyteczne, zastosowane w sposób nieprzemyślany w innym serwisie.

przykład niestandardowego menu wewnątrz strony wraz z ciekawie rozwiązanym menu górnym: https://www.axn.pl/

[kadzielawski]

Każdy typ menu odpowiednio dopasowany do funkcji i grupy docelowej serwisu może mieć szczególne zalety w konkretnym przypadku a byc zupełnie bezuzyteczne, zastosowane w sposób nieprzemyślany w innym serwisie.

Jak najbardziej się zgadzam, natomiast jeżeli mamy się koncentrować na serwisach sprzedażowych to należy pamiętać o nawykach i przyzwyczajeniach klientów. W rzeczywistości rozkład manu w sklepach internetwych jest od dawna ustandaryzowane i odejście od standardów może jedynie zaszkodzić. Zatem sumująć:

pasek nawigacyjny górny poziomy - działy i kategorie

pasek nawigacyjny prawy pionowy - seriw i rozbicie działów (kategorii)

dolny pasek poziomy - powtórka z górnego + dodatkowe informacje.

W serwisach sprzedażowych tego nie przeskoczymy.