Projektowanie stron internetowych w 2023

Obecnie możesz uruchomić stronę internetową w kilka minut. Warto jednak rozróżnić czym jest optymalnie zbudowana strona internetowa a strona po prostu opublikowana. Projektowanie stron internetowych w 2022, od czego zacząć.

Szukasz wsparcia? Napisz do nas!

Dlaczego strona internetowa powinna być zbudowana zgodnie z dobrymi praktykami w ramach dobrze zarządzanego projektu? Opinia na temat Twojej strony powstaje w 0,05 sekundy. Tak, dobrze przeczytałeś – 50 milisekund to wystarczający czas na wyrobienie sobie opinii na temat Twojej strony. Ma to bardzo duże znaczenie dla odwiedzających. Pierwsze wrażenie.

To jak Twoja strona jest zaprojektowana wpływa również na ilośc konwersji. Ilość konwersji wpływa bezpośrednio na Twój biznes. Rok 2020 pokazał jak istotne jest posiadanie optymalnej strony czy sklepu internetowego. Zadaj sobie pytanie czy Twoja strona jest optymalna? Czy Twój sklep jest prawidłowo zbudowany?

Żadna witryna nie jest idealna, ale należy zadbać by poziom optymalizacji pod jej cele był maksymalnie możliwy do osiągnięcia. To cel dla Ciebie i dla Agencji, która będzie wykonywała dla Ciebie stronę WWW lub sklep.

Podsumowując: jeśli projekt Twojej witryny internetowej nie jest zoptymalizowany pod kątem wygody użytkownika (UX), będzie to miało negatywny wpływ dla Twojego biznesu. Zacznijmy więc od najważniejszych punktów, na które warto zwrócić uwagę przy projektowaniu strony internetowej cennik.

Najważniejsze czynniki wpływające na jakość strony internetowej

Oto kilkanaście najważniejszych elementów, którym należy nadać wysoki priorytet w 2021 r. Jeśli zastosujesz się do tych sprawdzonych metod, wydajność Twojej witryny znacznie się poprawi a doświadczenie i emocje jakie ona wywoła na odwiedzających ją użytkownikach będą bardzo pozytywne.

Projektowanie stron internetowych: Zminimalizuj tekst

Nie wypełniaj swoich stron ogromnymi blokami tekstu. Jeśli Twoja strona nie jest blogiem i nie pełni funkcji informacyjnej warto byś ograniczył ilość treści. Myślę głównie o Twoich stronach, które spełniają funkcje sprzedażowe i reprezentacyjne np. strona główna, strona produktu, usługi, strona przeznaczona do działań reklamowych. Ogranicz w nich tekst do minimum.

Chcesz opowiedzieć odwiedzającym Twoją witrynę wszystko o sobie -warto to zwizualizować i nadać dyskretny, nienachalny przekaz.

Projektowanie stron internetowych: Wizualizuj nie opisuj

Elementy wizualne nie tylko pomagają w zrozumieniu napisanych treści, ale mogą również dostarczyć więcej informacji niż zwykły tekst. Pokaż swoim gościom, o co Ci chodzi. Zrozumieją więcej w krótszym czasie jeśli to pokażesz. Załóżmy na przykład, że Twoja witryna sprzedaje maszynki do golenia, ostrza, krem do golenia i inne produkty do golenia dla mężczyzn.

Działasz w modelu biznesowym subskrypcji i co miesiąc dostarczasz te produkty swoim klientom. Wygląd twoich maszynek do golenia jest bardzo atrakcyjny – są wykonane z rzeźbionego twardego drewna i są na tyle ładne, że można je podarować jako prezent.

Zamiast zagłębiać się we wszystkie szczegóły na swojej stronie produktowej, możesz po prostu umieścić zdjęcie tych produktów z tekstem w stylu „dostarczamy pod Twoje drzwi”. Przekazujesz swoją wiadomość w zaledwie czterech słowach.

Oczywiście, im głębiej użytkownik zagłębia się w Twoje strony, tym bardziej szczegółowe informacje są dostępne, ale obszerny opis tekstowy nie jest wymagany szczególnie w pierwszym kroku.

Projektowanie stron internetowych: Używaj krótkich zdań do projektowania stron internetowych

Krótkie zdania są łatwiejsze do odczytania. Prawda?

Nie bombarduj odwiedzających dużymi fragmentami tekstu. Nie będą wiedzieć, od czego zacząć czytać i nie będą w stanie przetrawić Twoich treści.

Wymieszaj to. Jeśli potrzebujesz długiego zdania, dołącz do niego krótkie. Warto stosować narzędzia takie jak Yoast w WordPress, który w locie analizuje Twoje treści i wskazuje elementy do poprawienia. Czytelność treści jest jednym z kluczowych parametrów UX i SEO.

Projektowanie stron internetowych: Stosuj krótkie akapity

Wykorzystaj przerwy w akapitach, daj odpocząć od tekstu. Można pisać dłuższe akapity, ale lepiej jest ograniczać akapity szczególnie strony głównej do kilku kluczowych zdań.

Ważne jest również, aby nie przesadzić. Rozpoczynaj każdy akapit od nowych informacji, więc jeśli ktoś przewija, może szybko stwierdzić, czy musi przeczytać ten akapit czy może go pominąć.

Wyeliminowanie zbędnego tekstu na stronach zmniejsza bałagan i nie odciąga uwagi od najistotniejszych informacji. Szczególnie ważne jest by nie odciągać uwagi od “call to actions” CTA.

Wyróżnienie wezwania do działania w akapicie to kluczowy cel.

Bardzo przydatnym narzędziem w tej sytuacji są listy. Zamiast dodawać akapity i długie formy, rozważ użycie list z punktami.

Badania pokazują, że więcej osób będzie patrzeć na listy niż na inne formaty treści. Listy są jasnym przekazem. Grupują one najważniejsze informacje w punty. Dla wielu użytkowników tego typu formy są jedynymi przyswajalnymi.

Projektowanie stron internetowych: Kolorystyka strony

Wybierz schemat kolorów, który pasuje do Twojej strategii budowania marki.
Wybór kolorów identyfikujących Twój Brand jest ważniejszy niż myślisz.

Odwiedzający oceniają Twoją witrynę w mniej niż 90 sekund. W większości jest to efekt wybranych przez Ciebie kolorów.

Najlepszym sposobem wyboru schematu kolorów witryny jest branding. Zobacz swoje logo. Czy kolory na Twojej stronie internetowej pasują do wizerunku Twojej marki?

Oto przykład strony internetowej Starbucks.

Kiedy słyszysz słowo Starbucks, jestem pewien, że masz w głowie obraz. Może to logo, znak lub lokalizację jakiegoś konkretnego sklepu.

Czy kojarzysz jakieś kolory z tą nazwą? Spójrzmy teraz na ich witrynę internetową.

Nic dziwnego, że zdecydowali się na zieloną kolorystykę.

Ten wybór projektu pasuje do ich logo i wizerunku marki, co wzmacnia to, co konsumenci już kojarzą z marką. Zachowując spójność, utrwalasz swój wizerunek w umysłach klientów.

Byłoby to dość abstrakcyjne doświadczenie, gdybyś odwiedził stronę Starbucks, a kolory byłyby żółte i czerwone. To nie miałoby nic wspólnego z ich marką i tym jak ją sobie wyobrażasz.

Projektowanie stron internetowych CTA powinno być jasne i oczywiste

Nie należy ukrywać CTA . Muszą być duże, odważne i widoczne oraz powinny wyróżniać się jako kolejna czynność, którą powinni wykonać Twoi goście. Myśl jaka powinna towarzyszyć użytkownikowi to – kliknij.

Większość witryn nie ma jednak przycisku wezwania do działania, który można znaleźć w mniej niż trzy sekundy. To nie jest grupa stron WWW, w której chcesz się znaleźć ze swoją witryną.

Nie możesz generować konwersji bez skutecznego przycisku wezwania do działania, CTA.

Prawie nigdy nie widzę wezwania do działania na stronach firmy (stronach, które wyjaśniają, czym zajmuje się Twoja marka i co oferujesz). Jest to poważna wada projektowa. Nie możesz oczekiwać, że użytkownicy będą wracać do Twojej strony głównej, aby dokonać konwersji. Jest to znakomite miejsce by używać mechanizmów dostępnych w ramach działań Marketing Automation.

Mamy tu minimalny przekaz, komunikat jest jasny. Możesz poprosić o wycenę strony lub konsultacje. Mam nadzieję, że masz ochotę kliknąć.

Miejsce, w którym należy umieścić wezwanie do działania, różni się w zależności od strony. Na przykład posty na blogu powinny mieć wezwanie do działania u góry, aby czytelnicy mogli je szybko zobaczyć, a także u dołu, po przeczytaniu postu. Ewentualnie w miejscu, w którym ja umieściłem. Przycisk jest naturalnym elementem wynikającym z treści. Tekst naprowadza Cię by kliknąć.

Projektowanie stron internetowych Dobre, powtarzalne wzorce

Jeśli Twoja wiadomość jest taka sama we wszystkich przypadkach np:. “wyślij zapytanie”, wezwanie do działania powinno być takie samo na każdej stronie, na której ten komunikat chciałbyś umieścić.

Pomyśl o tym, jak ludzie poruszają się po Twojej witrynie. Nawet jeśli skonfigurujesz określony scenariusz, nie wszyscy będą nim podążać. Zrozumienie ról jakie pełnią poszczególne strony to ważny punkt w projektowaniu stron internetowych.

Załóżmy na przykład, że masz witrynę e-commerce. Nie należy zmieniać przycisku wezwania do działania ze strony na stronę.

• Strona domowa: przejdź do kasy teraz
• Witryna kategorii: Kup już dziś
• Strona produktu: kliknij, aby kupić

Jeśli odwiedzający zobaczy jeden z tych przycisków na Twojej stronie głównej, drugi na stronie kategorii, a trzeci na stronie produktu, będzie miał wrażenie, że coś tu jest pomieszane.

Zamiast tego zachowaj spójność przekazu i stylu. Spójność to kolejna z cech o jaką warto zadbać. Spójność w języku, przekazie i projekcie wzmacnia tożsamość Twojej marki i pozostawia trwałe wrażenia w umysłach odwiedzających.

Uprość nawigację

Odwiedzający witrynę internetową nie powinien mieć trudności ze znalezieniem w niej tego, czego szuka.

Postaw się na ich miejscu. Dlaczego odwiedzasz witrynę? Jak wykonujesz to zadanie? Może chcesz coś kupić, uzyskać więcej informacji lub zobaczyć, co ma do zaoferowania. Niezależnie od przyczyny, jeśli odwiedzający nie mogą szybko tego znaleźć, stracisz go.

Użytkownicy nie mają powodu, aby męczyć się z nieporęczną nawigację w witrynie. Opuszczą Twoją witrynę i tyle. Jest wiele innych konkurencyjnych stron

Nie próbuj wymyślać na nowo koła za pomocą złożonego projektu. Trzymaj się standardowych, wypróbowanych formatów.

Na przykład większość witryn internetowych umieszcza menu nawigacyjne poziomo u góry każdej strony. Jeśli twoje menu znajduje się gdzie indziej, może to zmylić odwiedzających.

• Im mniej opcji w menu, tym lepiej. W przeciwnym razie ludziom będzie zbyt trudno znaleźć to, czego potrzebują. Ta koncepcja jest znana jako prawo Hicka.
• Im więcej opcji dasz komuś, tym dłużej zajmie mu podjęcie decyzji. Dlatego złożone projekty i nawigacje zmniejszają współczynniki konwersji.
• Wyeliminuj niepotrzebne opcje menu. Na przykład, zamiast przycisku „Strona główna”, po prostu użyj logo witryny, aby połączyć się z ekranem głównym.
• Dla tych z Was, którzy mają wiele opcji w swojej witrynie, takich jak sklep e-commerce, mogą dodać pasek wyszukiwania, aby uprościć proces nawigacji bez korzystania ze skomplikowanego menu.

Mobile friendly a projektowanie stron internetowych

Mobile to kanał, przez który większość ludzi na świecie korzysta z ze stron internetowych. Oznacza to, że jeśli nie jesteś zoptymalizowany pod kątem komórek, Twoja witryna nie będzie działać dobrze.

Szczególnie ważne jest to dla SEO i UX. Wyszukiwarki rozpoznają to czy strona jest przystosowana do mobile i nagradzają witryny przyjazne dla urządzeń mobilnych. Oto kilka dodatkowych statystyk, które pomogą Ci zrozumieć jak to jest ważne:

• Google wie, że 87% właścicieli smartfonów używa swoich urządzeń do przeszukiwania internetu przynajmniej raz dziennie.
• 58% wszystkich wyszukiwań w Google odbywa się na urządzeniu mobilnym
• Wynik: 70% wyników na pierwszej stronie w Google jest zoptymalizowanych pod kątem urządzeń mobilnych.
• Optymalna strona mobilna to jedna z kluczowych rzeczy, jaką możesz zrobić, aby uzyskać dobrą pozycję w Google. Poważnie.

Jeśli Twoja witryna nie wygląda dobrze na smartfonie, ludzie nie będą chcieli do niej wracać. Dlatego upewnij się, że projekt Twojej witryny jest dostosowany do urządzeń mobilnych. Sprawdź to na stronie sprawdzającej witryny mobilne.

SEO a projektowanie stron internetowych

Projektowanie stron www i SEO mają wiele ze sobą wspólnego. Pierwszym z nich jest mapa witryny strony. Prawidłowa struktura bez duplikacji i błędów jest jednym z czynników wpływających na widoczność strony w wynikach wyszukiwarek.

W trakcie projektowania witryny, zwróć uwagę na następujące elemeny:

• Domena. Twój adres URL ma duże znaczenie dla pozycji w Google. Takie elementy jak, wiek domeny, jej historia czy rozszerzenie domeny: .pl, .com mogą wpływać pozytywnie lub negatywnie na widoczność.
• Jakość witryny. Twoja witryna musi być użyteczna dla użytkowników. Powinna zawierać stronę „O nas”, stronę „Skontaktuj się z nami” czyli jasno określać kto jest jej właścicielem. Inne ważne elementy to częstotliwość aktualizowania witryny, łatwość nawigacji w witrynie, częstotliwość występowania błędów i awarii witryny) i certyfikaty SSL.
• Linki zwrotne. Odnosi się to do częstotliwości, z jaką witryna jest połączona z innymi witrynami. Jest to kluczowy czynnik zapewniający dobrą pozycję w Google. Więcej znajdziesz w artykułach o SEO dla ecommerce, Pozycjonowanie stron, Narzędzia SEO.

Wpływ szybkość ładowania strony na UX i SEO

Wiem, co niektórzy z Was myślą. Co szybkość ładowania strony ma wspólnego z projektowaniem stron internetowych? Ma i to bardzo dużo.

Pewnie większość z Was myśli, że czas ładowania strony zależy głównie od szybkości hostingu na jakim ta strona się znajduje.

Każdy nowy element, który dodajesz do swojej witryny, zwłaszcza obrazy, filmy i inne złożone pliki multimedialne, może wpłynąć na wydłużenie czasu ładowania.

Długie czasy ładowania prowadzą do wysokich wskaźników porzuceń. Nie możesz tego zignorować. Jeśli Twoje strony ładują się zbyt długo, będzie to ogromny problem dla Ciebie i Twojego biznesu.

Co więcej, 25% ludzi opuszcza strony internetowe, które ładują się dłużej niż cztery sekundy. Oznacza to, że stracisz 25 na 100 odwiedzających. Większość odwiedzających oczekuje, że strona załaduje się w ciągu dwóch sekund lub krócej. Czas nad tym się pochylić i sprawdzić jak to wygląda u Ciebie. Sprawdzisz to używając narzędzia Google do analizy czasu ładowania się strony.

Poniżej kilka z kluczowych czynników:

• Zmniejsz rozmiary plików obrazów i ich typ
• Skorzystaj z narzędzi do buforowania przeglądarki
• Zmniejsz liczbę żądań HTTP
• Popraw swoje TTFB (czas do pierwszego bajtu)
• Zmniejsz i połącz swoje pliki

Więcej przeczytasz w moim artykule na temat czasu ładowania się strony i mobile first. Zadbaj o najszybszy hosting dla WordPress.

Projektowanie stron internetowych: Wersja AMP a projektowanie stron internetowych

Wersja AMP stron to kolejny ważny element. Często strona traktowana jest jako jedna aplikacja WWW. W niektórych przypadkach zalecane jest zastosowanie dodatkowej bardzo lekkiej wersji strony jaką jest wersja AMP. Więcej przeczytasz w moim wpisie na temat Co to jest AMP

W tym artykule chciałbym bardzo zwrócić uwagę na spójność projektów AMP i nie AMP. Czcionki, kolorystyka czy układ powinny być w obu przypadkach zbliżone. Pamiętać należy o tym, że AMP jest minimalną wersją strony będzie wiec zawierała bardzo uproszczone style CSS oraz moduły. Dzięki temu zachowa lekkość wymaganą w przypadku stron AMP.

Projektowanie stron internetowych: Cykliczne testy A / B

Jeśli chodzi o projekt witryny, nie możesz go tak po prostu opublikować, zostawić i zapomnieć.

Jak powiedziałem wcześniej, żadna witryna nie jest idealna. Zawsze możesz ulepszyć swój projekt. Dlatego zalecane są systematyczne testy A / B w celu poprawy poszczególnych składników strony.

Testy A / B umożliwiają regularne ulepszanie witryny i testowanie elementów, aby implementować poprawki i usuwać elementy negatywnie wpływające na odczucia użytkowników.

Niemal każdy element projektu witryny można przetestować. Na przykład możesz utworzyć dwie różne strony docelowe, które mają różne wezwania do działania CTA, ale poza tym są takie same. Jeśli jedna strona docelowa działa lepiej niż druga, wiesz, że jej wezwanie do działania prawdopodobnie wykona zadanie znacznie lepiej niż to drugie.

Oto kilka sugestii, które pomogą Ci ukierunkować swoje testy:

• Przetestuj lokalizację swojego przycisku CTA
• Sprawdź kolor swojego przycisku CTA
• Przetestuj tekst wezwania do działania CTA
• Sprawdź obrazy, których używasz na stronach docelowych
• Przetestuj różne wersje tekstu
• Sprawdź rozmiary swojego paska nawigacyjnego

FAQ

Podsumowanie

Stwierdzenie, że projekt strony internetowej jest ważny, brzmi bardzo trywialnie. Twoje decyzje dotyczące projektu strony internetowej ostatecznie wpłyną na to, czy witryna odniesie sukces i zrealizuje swoje cele.

Nie ma znaczenia, czy Twoja witryna jest zupełnie nowa, czy istnieje już od dekady. Oto najlepsze praktyki projektowania stron internetowych, których musisz przestrzegać w 2021 roku

Artykuł uaktualniony 4 miesiące