Projekt strony dla firmy

Marketing to walka o uwagę klienta. A w dzisiejszych czasach tej uwagi jest naprawdę mało.

Dobra strona internetowa to po prostu must have. Nieważne, czy prowadzisz działalność online, czy offline.

Nie daj się wyprzedzić konkurencji!

Strona, która jest zaprojektowana z myślą o pozytywnym doświadczeniu użytkowników (User Experience - UX), zwiększa konwersję o 400%!

Jeśli Twoja grafika na stronę internetową ostatnio była aktualizowana w 2017 roku, nie wiesz co to CTA, a Twoje menu to labirynt - koniecznie przeczytaj ten artykuł, bo przechodzi Ci koło nosa szansa na większą sprzedaż. Złapmy ją!

Jeśli trak­tu­jesz serio projektowanie stron www, powi­nie­neś sku­piać się na odbior­cach.

Tutaj do gry wcho­dzi współ­czyn­nik kon­wer­sji. Co to takie­go i jak może pomóc Ci w budo­wa­niu suk­ce­su Twojej fir­my?

Aby go obliczyć wystar­czy podzie­lić ilość trans­ak­cji (sprze­da­ży) lub innej pożą­da­nej przez nas akcji przez ilość osób, któ­re odwie­dzi­ły naszą stro­nę.

To ozna­cza, że co dru­ga oso­ba wcho­dzą­ca na witry­nę doko­nu­je pożądanego dzia­ła­nia.

Czasem naj­prost­sze zabie­gi spra­wia­ją, że współ­czyn­nik kon­wer­sji dia­me­tral­nie wzra­sta.

Zmiana kolo­ru przy­ci­sków nawo­łu­ją­cych do akcji, kolej­no­ści obra­zu z tek­stem, redak­cja nagłów­ka.

Przejdźmy do wskazówek, któ­re zamie­nią zwy­kłych obser­wa­to­rów w świa­do­mych klien­tów Twojej firmy!

Źle zaprojektowana strona dla firmy zniechęca. Od razu ją rozpoznasz. Męczy Cię. Nie możesz na niej nic znaleźć.

Ciężko Ci się domyślić, co w ogóle masz na niej zrobić lub gorzej - wychodzisz zanim zdąży się w pełni załadować.

Złote zasady projektowania stron internetowych to:

Jeśli uważasz, że Twoja strona nie przynosi takich zysków, jakich oczekujesz, sprawdź, czy ma wszystkie wymienione wyżej cechy.

Czegoś brakuje? Poniżej znajdziesz inspiracje, jak je wprowadzić na swojej stronie.

Chcesz od razu zacząć działać? Napisz do nas, stworzymy dla Ciebie stronę, o której przeczytałeś powyżej.

Wchodzisz na stronę fryzjera. Chcesz sprawdzić, jakie ma ceny, jak włada nożyczkami i pewnie umówić wizytę.

Trafiasz na stronę fryzjera ze swojego miasta, który kieruje ofertę do takich osób jak Ty, ale…

Wita Cię grafika na stronie przedstawiająca modelkę z awangardową fryzurą. W nawigacji znajdujesz link do podstron: „O mnie”, “Inspiracje”, “Artykuły”, “Wideo” i link do Facebooka.

Nie widzisz cennika, przykładowych cięć i na pewno nie chcesz na co dzień mieć takiej fryzury jak modelka.

Jeśli nie jest to jedyny fryzjer w polu 15 kilometrów, to najpewniej zamkniesz stronę.

Co tu poszło nie tak? Oprócz wielu innych błędów kluczowym problemem okazała się nawigacja.

Gdy potencjalny klient wchodzi na stronę i nie orientuje się szybko, gdzie ma znaleźć informacje, których szuka, w najlepszym wypadku będzie błądził jak we mgle, a później porzuci tę zagadkę.

Jesteśmy przyzwyczajeni do struktury, w której menu nawigacyjne znajduje się u góry strony (ewentualnie w lewym górnym rogu w przypadku aplikacji mobilnych, pod tzw. hamburgerem).

W menu chcemy zobaczyć informacje o firmie (O nas), portfolio, usługi, cennik, kontakt. Oczywiście może się to zmieniać w zależności od rodzaju strony. Layouty stron www muszą odzwierciedlać charakter ich sprzedaży i oczekiwania ich klientów.

Strona e-commerce wymaga innych rozwiązań niż wizytówka agencji marketingowej. E-commerce z tysiącem produktów powinien być zaprojektowany inaczej niż sklep sprzedający trzy produkty.

Przykłady dobrych rozwiązań nawigacyjnych:

Gdy wchodzisz do banku po kredyt, doradca klienta nie opowiada Ci o lokatach i tym, że mając konto w tym banku możesz doładowywać za jego pośrednictwem telefon.

Nie robi tego, bo to Cię w tym momencie nie obchodzi. Przyszedłeś w jednym celu i na nim się skupiacie.

Tak samo projektuje się strony internetowe dla firm. Kiedy je tworzysz, natychmiast stajesz w obliczu niezliczonych potencjalnych czynników rozpraszających uwagę odbiorców.

Niektóre z nich są poza Twoją kontrolą - ciężko konkurować z telefonem od mamy.

Jednak wiele z tego przeciążenia sensorycznego można złagodzić poprzez wybory dokonywane na stronie, od liczby proponowanych opcji po rozmieszczenie informacji na stronie.

To wąskie gardło poznawcze jest określane w psychologii jako paradoks wyboru. Doświadczasz tego przeciążenia sensorycznego, kiedy bezskutecznie przeglądasz Netflix przez godzinę w poszukiwaniu idealnego filmu.

Nieco inaczej sytuacja wygląda na stronie głównej. Tu z natury opcji jest dużo.

O ile na podstronę z ofertą prania kanapy wchodzi ktoś, kto ma brudną kanapę i potrzebuje prania, o tyle o osobach, które wchodzą na Twoją stronę główną nie wiesz w zasadzie nic.

Dlatego prezentujesz im cały przegląd swojej oferty, aby mogli szybko dotrzeć do tego, po co przyszli.

Podstrona z ofertą konkretnego produktu czy usługi powinna skupiać się tylko na niej i spełniać jeden określony cel. Każdy przycisk na podstronie powinien realizować ten sam cel.

Jest to powód, dla którego generalnie mają one lepsze współczynniki konwersji w porównaniu do większości stron głównych.

Mówiąc prościej, musisz ustalić jeden cel dla swojej strony docelowej na samym początku. Zadaj sobie pytanie: "Co chcę, aby użytkownicy robili na tej stronie?".

Twoja strona potrzebuje jasnej struktury, która gładko przeprowadzi użytkownika przez treść i uwypukli najważniejsze, z punktu widzenia celu strony, informacje.

Wygląd tekstu powinien jasno i skutecznie prowadzić odbiorcę do zamierzonego celu. Dostarcza on odpowiednich informacji w odpowiednim momencie, umiejętnie prowadząc jego uwagę.

Uwypuklać można na różne sposoby. Jednym z nich jest tzw. przestrzeń negatywna, czyli wolna przestrzeń (white space) wokół strategicznych elementów strony.

Niuanse projektu, takie jak kolory, czcionki, wzory i kształty również pozwalają przyciągnąć uwagę odbiorców i skierować ich w stronę tego, co najważniejsze na stronie.

Po ustaleniu kolejności każdej sekcji, dobrze postawić się w sytuacji odwiedzającego i wyobrazić sobie postęp.

Jak obszerna powinna być treść w każdej sekcji? Gdzie umieścić elementy wizualne? Jak sprawić, by sekcje nie były monotonne?

Na szczęście nie musisz tego robić “w ciemno”. Czytelnicy online podążają za dwoma głównymi wzorcami: F i Z.

Użytkownicy najpierw skanują stronę w poziomie, tworząc górną kreskę "F". Zwykle oznacza to, że skupiają się na nagłówkach i pierwszych kilku zdaniach akapitu.

Następnie wzrok przemieszcza się w dół strony, gdzie użytkownicy robią kolejne poziome skany, ale już krótsze.

Na koniec użytkownicy skanują stronę pionowo po lewej stronie, szukając kolejnych punktów zainteresowania.

Użytkownicy zaczynają od lewej górnej części strony i skanują ją w poziomie w prawo, tworząc pierwszą kreskę "Z".

Następnie wzrok użytkownika przesuwa się po przekątnej na lewą dolną stronę, po czym następuje drugi poziomy skan na dole strony.

Umieść naj­bar­dziej chwy­tli­we i zwię­złe komu­ni­ka­ty w pierw­szych 300 pik­se­lach, a Twoja szan­sa na sprze­daż wzro­śnie.

Stworzenie per­swa­zyj­ne­go i zwię­złe­go nagłów­ka to pod­sta­wa sprze­da­ży, ale i wiel­ka sztu­ka. Jeśli zain­te­re­su­jesz odbior­cę nagłów­kiem to jest duża szan­sa, że zosta­nie Twoim klien­tem.

Kluczem do suk­ce­su są testy. Przetestuj 3 napi­sa­ne przez Ciebie nagłów­ki i zobacz, któ­ry będzie naj­bar­dziej sku­tecz­ny.

Pamiętaj też o przy­ci­skach nawo­łu­ją­cych do akcji (Call to action) i oznacz je kon­tra­sto­wym kolo­rem w sto­sun­ku do kolo­ry­sty­ki stro­ny.

Czasem zmia­na kolo­ru przy­ci­sku bądź jed­ne­go sło­wa w komu­ni­ka­cie zwięk­sza­ją kon­wer­sję o 300%.

CTA to jeden z najważniejszych elementów na stronie.

Oprócz tekstu wykorzystaj wygląd strony internetowej, wizualizacje, aby przekazać odwiedzającym, dlaczego Twoje usługi i produkty mają dla nich znaczenie.

Zdjęcia, ilustracje, animacje i filmy wideo sprzyjają nawiązaniu bardziej znaczącej więzi z odbiorcami. Pomagają pokazać emocjonalne korzyści - od przyjemności po ulgę - które mogą być trudne do przekazania tylko za pomocą tekstu.

Pamiętaj więc, że w doborze wizualizacji nie chodzi o to, by wybierać grafikę na stronę internetową tylko dlatego, że jest estetyczna lub uzupełnia kolorystykę witryny.

Która grafika strony jest najważniejsza? Ta na samej górze, widoczna zaraz po załadowaniu strony.

Hero shot (główny obraz) to jak wejście na czerwony dywan na premierze filmowej - zbiera na siebie pierwsze spojrzenie odwiedzających i musi przyciągać uwagę.

Priorytetem powinna być przejrzystość. Widzowie muszą być w stanie dostrzec ten obraz i zrozumieć cel Twojej strony, nawet jeśli zignorują tytuł.

Hero shotem może być zdjęcie, ilustracja, animacja lub wideo.

Autentyczne zdjęcia osób i przedmiotów uwiarygodniają stronę, sprawiają, że staje się bardziej namacalna. Uruchamiają empatię i zapadają w pamięć.

Jeśli osobowość Twojej marki ma zabawną stronę lub Twoje koncepcje są abstrakcyjne, ilustracje i animacje mogą się świetnie sprawdzić.

Za pomocą wideo możesz pokazać złożone korzyści zajmując przy tym niewielką część strony. Filmy są zazwyczaj bardziej angażujące i nie wymagają od użytkowników żadnego wysiłku. Dlatego sami mamy wideo w sekcji hero na stronie z ofertą projektowania stron firmowych.

Aby sprawdzić czy tak jest u Ciebie, powiększ projekt strony i zmruż oczy tak, aby żadna z treści pisanych nie była czytelna.

Czy pomimo tego, że nie czytasz słów, nadal możesz zrozumieć, czego dotyczy strona? Jeśli tak - zrobiłeś dobrą wizualną robotę.

Internet jest pełen wątpliwych stron internetowych i ofert spamowych, z zapewnieniami bez pokrycia.

Teraz, jeśli jest to dla Twoich odbiorców pierwszy punkt interakcji z Twoją marką, ważne jest, abyś zbudował środowisko zaufania. Jak to zrobić?

Ten namacalny dowód nie tylko przekona odwiedzających, ale także sprawi, że uwierzą w Twoją markę i jej ofertę.

Najpopularniejszym dowodem społecznym są opinie. Przyjrzyjmy im się bliżej.

Źle przygotowana recenzja klienta może potencjalnie sprawić, że Twoja witryna będzie wydawać się mniej wiarygodna.

Jeśli brakuje pewnych wskaźników zaufania, potencjalni klienci mogą założyć, że recenzja jest sfabrykowana.

Co zawiera wiarygodna opinia? Zdjęcie, pełne imię, nazwisko, czasem zasadne jest również stanowisko i firma, jeśli masz klientów biznesowych (B2B).

Chcesz opinii, która przyciągnie uwagę i zwiększy sprzedaż? Użyj tej formuły:

• Problem: Opisz wyzwanie, z którym klient się zmagał, np. „Nie mogłem zdobyć nowych klientów, mimo dużych wydatków na marketing.”
• Rozwiązanie: Pokaż, jak Twój produkt lub usługa to zmieniły, np. „Po 6 miesiącach współpracy ruch wzrósł o 300%, a liczba klientów potroiła się.”
• Rekomendacja: Dodaj mocne podsumowanie od klienta, np. „Żałuję, że nie trafiłem na tych ludzi wcześniej”.

Krótko, treściwie, skutecznie.

Ze względu na to, że logotypy są zwykle tworzone z unikalnymi kształtami i żywymi kolorami, aby przyciągnąć uwagę widza, zwykle zaleca się zmniejszenie nasycenia wszelkich logotypów klientów wyświetlanych na Twojej stronie.

Upewnij się, że są one nieco zmniejszone, aby nie odwracały uwagi od reszty układu Twojej strony.

Przy projektowaniu stron internetowych bezwzględnie ważne jest też zadbanie o bezpieczeństwo użytkownika. Zarówno od strony technicznej, jak i tej dotyczącej interfejsu.

Zacznijmy od strony technicznej. Stosowanie certyfikatu SSL jest absolutną koniecznością. Tak samo, jak stosowanie się do wszystkich wskazówek dotyczących polityki prywatności, danych osobowych i zapisywania cookiesów.

Nawet jeśli Twoi potencjalni klienci nie są w pełni świadomi zagrożeń, jakie mogą na nich czekać na stronach internetowych, Ty powinieneś wziąć na siebie odpowiedzialność za zadbanie o ich bezpieczeństwo. Dodatkowo jest to związane z wymogami prawnymi.

Jak jeszcze dać odczuć potencjalnym klientom, że są bezpieczni na Twojej stronie?

Teraz, mając już zaufanie, możesz zachęcać do działania. Pora na skuteczne angażowanie potencjalnego klienta.

Zależy Ci na tym, aby odbiorca dokonał konwersji - działania, na którym zależy Ci najbardziej. Jednak po drodze możesz go angażować na różne sposoby. Wciągać w interakcję i popychać do konwersji.

Mikrointerakcje to niewielkie, subtelne interakcje, do których aplikacja lub strona zapraszają użytkownika.

Przykłady mikrointerakcji:

Mikrointerakcje mogą nie tylko ułatwiać korzystanie ze strony, ale także bawić użytkowników, wprowadzając elementy humoru czy niespodzianki.

Tego typu zabawne interakcje nie są odpowiednie dla każdej branży - nie znajdziemy ich raczej na stronach firm pogrzebowych.

Jednak są miejsca, gdzie humor świetnie się sprawdzi, na przykład na stronach startupów, marek odzieżowych, serwisów rozrywkowych, aplikacji społecznościowych, czy firm zajmujących się kreatywnymi usługami.

Na stronie sklepu z gadżetami można zastosować mikrointerakcję, gdzie po dodaniu produktu do koszyka, pojawia się krótka animacja „tańczącego” koszyka, który „cieszy się” z nowego przedmiotu.

Wykorzystuj również spersonalizowane treści.

Prosty przykład: Rekomendacje produktów oparte na zachowaniu lub preferencjach użytkownika, tworzą bardziej odpowiednie i angażujące doświadczenie.

Unikaj dodawania punktów tarcia - czy to rozpraszających wizualizacji, zagmatwanych etykiet, czy też za długich formularzy.

Kwestie te mogą stanowić przeszkodę w konwersji odbiorców na potencjalnych klientów. Ważne jest, aby nakreślić procesy konwersji, które są wolne od zakłóceń, zamieszania i frustracji.

Powolne ładowanie to pierwsza przeszkoda. Nikt nie będzie czekał w nieskończoność na zobaczenie strony, którą nawet nie wie, czy warto oglądać.

Formularze kontaktowe, które zdają się nie mieć końca to kolejne utrudnienie. Nie oznacza to jednak, że należy ograniczać liczbę pól formularza za wszelką cenę.

Gromadzone dane odgrywają kluczową rolę w kwalifikacji potencjalnych klientów i lepszym zrozumieniu problemów, które próbują rozwiązać.

Dlatego ważne jest, aby ograniczyć niepotrzebne elementy, ale zachować kluczowe pola formularza, które są bezcenne dla Twojej firmy.

Jeśli formularz musi mieć sporo pól, przemyśl przedstawienie go w formie wieloetapowej.

Pytania, które budzą największy opór - dane kontaktowe - zostaw na koniec.

Bierz pod uwagę użytkowników mobilnych.

Istnieje prosty sposób, żeby przekonać się, czy projekt Twojej strony będzie wyglądał dobrze na urządzeniach mobilnych.

Ułóż treść w jednej kolumnie, szerokości mniej więcej 980 pikseli, która może naśladować jej wygląd na smartfonie.

Zwróć szczególną uwagę na część strony "above the fold" (widoczną bez przewijania).

Biorąc pod uwagę krótszy czas przebywania na stronach mobilnych w porównaniu do komputerów stacjonarnych i wyższy współczynnik odrzuceń, ważne jest, aby Twój projekt rezonował z odbiorcami, gdy tylko wylądują na Twojej stronie.

Pozbądź się nadmiaru tekstu. Potencjalni klienci będą przeglądać, nie będą natomiast czytać długich fragmentów tekstu - przynajmniej nie od razu.

Ukryj bardziej szczegółowe informacje w rozwijanych sekcjach, a tzw. zapychaczy, które nic nie wnoszą, pozbądź się całkowicie. Punktory i zwięzłe zdania są kluczem do zaangażowania użytkowników.

Projekt strony internetowej powinien być tak prosty, jak to tylko możliwe. Nie myl jednak prostego projektu z minimalistycznym designem. To dwa różne pojęcia.

Najprostsze marki radzą sobie o 330% lepiej od konkurentów!

Trzymaj się mądrej prostoty w każdej sferze projektu: grafik na stronie, layoutu, formularzy, CTA, menu nawigacyjnego. Nim umieścisz kolejny element na stronie, upewnij się, czy zbliża użytkownika do podjęcia akcji, na jakiej Ci zależy.

Proste komunikaty ułatwiają użytkownikom podjęcie działania, a zatem prowadzą do konwersji.

Skomplikowane hasła, treści i nieczytelne grafiki komplikują wykonanie jakiejkolwiek aktywności i powodują paraliż decyzyjny.

Pamiętaj, że większość z nas boi się: ryzyka, że produkt nie spełni naszych oczekiwań, że nie będzie można go zwrócić, że nie zdąży dotrzeć na czas.

Spokojnie adresuj te potrzeby i staraj się wzbudzić jak największe zaufanie oraz niwelować problemy, które mogą wystąpić na ścieżce zakupowej.

Prosta strona to też strona responsywna. Nie mamy czasu czekać, aż strona się załaduje. Zwłaszcza jeśli strona konkurencji już się otworzyła w kolejnym oknie przeglądarki.

Twoja strona musi być dostępna dla wszystkich potencjalnych klientów. Niezależnie od wieku, sprawności fizycznej czy rodzaju urządzenia, z jakiego korzystają.

Jeśli np. kierujesz swoją stronę do seniorów, uwzględnij ich potrzeby. Zadbaj o odpowiednią wielkość liter, łatwo dostępne opcje powiększenia treści, kontrast, duże, wyraźne grafiki, treści wideo z napisami, transkrypcjami i inne udogodnienia.

Projektowanie stron internetowych nie przebiega w próżni. Pomyśl o całym ekosystemie swojej marki, podróży, w którą wyruszają Twoi odbiorcy.

Utrzymanie spójności strony i innych zasobów marki - takich jak np. reklamy i materiały promocyjne - jest integralną częścią zapewnienia płynnego doświadczenia użytkownika.

Twoja marka jest zasadniczo odzwierciedleniem połączeń, które nawiązujesz z potencjalnymi klientami. Każdy pojedynczy punkt kontaktu z nimi ma moc kształtowania relacji i postrzegania Twojej firmy.

Nie można przecenić kluczowej roli, jaką odgrywa tutaj projekt.

Projektując stronę www dla swojej firmy, stajesz przed wyborem wielu rozwiązań. Tym pierwszym jest zdecydowanie sposób jej projektowania.

Możesz kupić generyczny layout strony lub zwrócić się do profesjonalistów, którzy wykonają ją specjalnie dla Ciebie.

Powszechnie dostępne layouty mają tę zaletę, że są stosunkowo niedrogie i jest ich naprawdę wiele. Dlatego prawdopodobieństwo, że znajdziesz coś, co będzie Ci odpowiadać, jest całkiem wysokie.

To rozwiązanie ma też wady. Po pierwsze, ktoś ten layout będzie musiał zaimplementować na Twojej stronie, a także przenieść dotychczasowe treści i wkomponować je w obecny układ lub stworzyć nowe.

Może to powodować komplikacje. To jak wciskanie pufy do pudełka po butach. Może być trudno. Może trzeba będzie pociąć pufę, aby się zmieściła. Wyrzucić ⅔ i może wtedy się zmieści.

Gotowe layouty mają ograniczoną możliwość tworzenia układów. Nie do wszystkich da się wprowadzić dodatkowe elementy, których nie zawierają, a Ty ich potrzebujesz: np. konkretny slider na stronie głównej.

Strona zaprojektowana przez profesjonalistów niweluje wszystkie te problemy. Jest unikalna. Należy jednak się liczyć z większymi kosztami wstępnymi.

Jeśli jednak popatrzysz długofalowo, to strona dla firmy wykonana zgodnie z Twoimi potrzebami i dobrymi praktykami projektowania www, przyniesie Ci większą konwersję. Zwrot z inwestycji także będzie większy. To będzie procentowało latami.