13 najlepsze praktyki projektowania stron internetowych na rok 2021

w dzisiejszych czasach możesz uruchomić stronę internetową w kilka minut. Ale jest różnica między stroną internetową, która jest aktywna, a zoptymalizowana.

dlaczego design ma znaczenie? To zajmuje tylko 0.05 sekund, aby ludzie stworzyli opinię na temat twojej witryny. Tak, przeczytałeś to poprawnie-50 milisekund, aby ktoś został zdumiony lub odparty przez Twoją stronę. Większość tej opinii powstaje z projektu.

Projekt strony ma również wpływ na konwersje, wiarygodność i ostatecznie sprawia, że lub psuje sukces Twojej witryny. Żadna strona internetowa nie jest idealna, ale powinieneś ją optymalizować w jak największym stopniu.

oto coś, co należy wziąć pod uwagę: po złym doświadczeniu 88% konsumentów raczej nie wróci na stronę internetową. Ponadto ostatnie badanie wykazało, że 77% agencji twierdzi, że kiepski projekt strony internetowej jest najważniejszą słabością ich klientów.

: Jeśli twój projekt nie jest zoptymalizowany pod kątem user experience (UX), będzie to szkodliwe dla Twojego sukcesu. Dlatego napisałem ten poradnik.

wiele czynników wpływa na projektowanie strony internetowej. Są to trzynaście najważniejszych elementów, które należy potraktować priorytetowo w 2021 r. Jeśli zastosujesz się do tych najlepszych praktyk, wydajność Twojej witryny drastycznie się poprawi.

Użyj tej listy kontrolnej, aby upewnić się, że masz zwycięski projekt

1. Minimalizuj tekst
2. Pokaż, Nie mów
3. użyj krótkich zdań
4. Wypróbuj krótsze akapity
5. Wybierz schemat kolorów pasujący do
6. Wyczyść CTA
7. wzmocnij działania dzięki znajomości
8. uprość nawigację
9. zoptymalizuj swój projekt pod kątem urządzeń mobilnych
10. priorytet SEO
11. monitoruj szybkość ładowania strony
12. ciągłe uruchamianie testów a/b

minimalizuj tekst

nie wypełniaj swoich stron ogromnymi blokami SMS.

nie mówię tu o wpisach na blogu, które czasem trzeba zagłębiać (jak ten!). Mówię o twoich stronach internetowych (np. Strona główna, landing page). Ogranicz tekst do minimum.

chcesz powiedzieć odwiedzającym witrynę wszystko o Tobie, Twojej firmie, Twojej marce i twoich produktach. Ale musisz nauczyć się, jak opowiedzieć tę historię w zaledwie kilku zdaniach lub-jeszcze lepiej – w kilku słowach.

Pokaż, Nie mów

wizualizacje nie tylko pomagają rozbić napisaną treść, ale mogą również zapewnić głębsze Wyjaśnienie. Pokaż gościom, o co ci chodzi. Zrozumieją więcej w krótszym czasie.

Strona produktu Harry ’ ego ucieleśnia obie te dwie pierwsze zasady projektowania:

na przykład, załóżmy, że Twoja strona internetowa sprzedaje maszynki do golenia, ostrza, krem do golenia i inne produkty do golenia dla mężczyzn.

działasz w modelu biznesowym subskrypcji i dostarczasz te produkty swoim klientom co miesiąc. Projekt Twoich maszynek jest bardzo przystojny-są wykonane z rzeźbionego drewna liściastego i są wystarczająco ładne, aby dać je w prezencie.

zamiast wchodzić w te wszystkie szczegóły na stronie głównej, możesz po prostu mieć zdjęcie tych produktów z tekstem mówiącym coś w stylu: „dostarczone do Twoich drzwi.”Przekazujesz wiadomość w zaledwie czterech słowach.

oczywiście, możesz wniknąć w szczegóły, im głębiej użytkownik wejdzie na twoje strony, ale nie jest wymagany długi opis tekstowy.

użyj krótkich zdań

krótkie zdania są łatwiejsze do odczytania.

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

wymieszaj. Jeśli potrzebujesz długiego zdania, wykonaj je krótkim. Różnorodność pomaga.

Wypróbuj krótsze akapity

używaj przerw akapitowych na swoją korzyść. W porządku jest pisać dłuższe akapity, ale lubię utrzymywać akapity na stronie głównej w kilku zdaniach.

ważne jest również, aby nie przesadzać. Zbyt wiele dobrego, to właściwie coś złego.

Zacznij każdy akapit od nowych informacji, więc jeśli ktoś przewija, może szybko powiedzieć, czy musi przeczytać ten akapit.

eliminacja niepotrzebnego tekstu na stronach zmniejsza bałagan i kładzie większy nacisk na wezwanie do działania.

wyróżnianie się CTA w osobnym akapicie ma większy wpływ niż zakopywanie go w garści tekstu.

bardzo przydatnym narzędziem w tej sytuacji są kule. Zamiast dodawać akapity i pisać w długich formach, rozważ użycie list. Na tych listach użyj podpunktów.

badania pokazują, że więcej osób spojrzy na listy z punktorami niż na inne formaty. To dlatego, że pomagają poprawić skanowalność strony i pozwalają wyróżnić najważniejsze punkty, które chcesz zrobić.

Wybierz schemat kolorów, który pasuje do twojej strategii brandingowej

wybory kolorów, których dokonujesz na swojej stronie internetowej, są ważniejsze niż myślisz.

odwiedzający oceniają Twoją stronę w mniej niż 90 sekund. Większość z nich jest wynikiem wybranych kolorów.

najlepszym sposobem na wybór kolorystyki witryny jest branding. Zobacz swoje logo. Czy kolory na twojej stronie pasują do wizerunku Twojej marki?

oto przykład. Pomyśl o Starbucksie.

kiedy słyszysz tę markę, jestem pewien, że masz obraz w głowie. Może to logo, znak lub Lokalizacja sklepu.

kojarzysz jakieś kolory z tą nazwą? Teraz spójrzmy na ich stronę internetową.

nic dziwnego, że poszli z 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ść, nie ma zamieszania. Byłoby dziwne, gdybyś odwiedził tę stronę, a kolory były żółte i czerwone. To nie ma nic wspólnego z ich marką.

w dalszej części porozmawiamy o wzmocnieniu.

spraw, aby Twoje CTA były jasne i oczywiste

CTA nie powinny być zakopane. Muszą być duże, odważne i potężne i muszą wyraźnie wyróżniać się jako działanie, które powinni podjąć goście.

jednak większość stron internetowych nie ma przycisku CTA, który można zauważyć w mniej niż trzy sekundy. Jest duża szansa, że trafisz do grupy, która zajmie ci więcej czasu. To nie jest kategoria, w której chcesz być.

nie możesz prowadzić konwersji bez skutecznego przycisku CTA.

prawie nigdy nie widzę CTA na stronach wewnętrznych firmy (strony, które wyjaśniają, co robi Twoja marka i co oferujesz). Jest to poważna wada konstrukcyjna. Nie możesz oczekiwać, że odwiedzający powrócą do twojej strony głównej w celu konwersji.

spójrz na to CTA z Lakmus.

Zobacz jakie to proste. Na ekranie jest minimalny tekst, więc wiadomość jest jasna.

w rezultacie wyróżnia się CTA „Zarejestruj się za darmo”. W rzeczywistości Lakmus umieścił go nawet w więcej niż jednym miejscu na ekranie.

gdzie powinieneś umieścić CTA na stronie. Na przykład posty na blogu powinny mieć CTA na górze, aby czytelnicy zobaczyli go szybko, a także na dole po przeczytaniu postu.

Przejdź głębiej: chcesz zoptymalizować swoje CTA? Oto 11 sposobów, aby poprawić swoje wezwania do działania.

wzmocnij działania za pomocą znajomości

jeśli Twoja wiadomość jest taka sama, Twój CTA powinien być taki sam na każdej stronie.

pomyśl o tym, jak ludzie poruszają się po twojej stronie. Nawet jeśli skonfigurujesz pewien przepływ, nie wszyscy wylądują na stronie i przekonwertują w kilka sekund. Mogą najpierw rozejrzeć się po okolicy.

na przykład załóżmy, że masz witrynę e-commerce. Nie powinieneś zmieniać przycisku CTA ze strony na stronę, co wyglądałoby tak:

• Strona główna: Kup Teraz
• strona kategorii: kup dzisiaj
• strona produktu: Kliknij, aby kupić

jeśli odwiedzający widzi jeden z tych przycisków na stronie głównej, drugi na stronie kategorii, a trzeci na stronie produktu, nie ma wzmocnienia.

zamiast tego Zachowaj spójność wiadomości i stylu. Oto dobry przykład z biżuterii i akcesoriów marki MVMT.

nie ma znaczenia, czy jesteś na ich stronie okularów, zegarków lub biżuterii. Zobaczysz to samo” Kup Teraz ” CTA dla swoich produktów.

każda strona pozostaje również spójna z minimalistycznym, czarno-białym designem witryny.

zastosuj tę zasadę projektowania również na swojej stronie internetowej.

wykracza poza przycisk CTA. Chodzi o to, aby tego typu zbrojenia miały jak najwięcej elementów.

spójność języka,komunikacji i projektowania wzmacnia tożsamość marki i pozostawia trwałe wrażenie na umysłach odwiedzających.

Uprość nawigację

nie powinno być trudno odwiedzającemu witrynę znaleźć to, czego szuka na twojej stronie.

postaw się na ich miejscu. Dlaczego odwiedzasz stronę? Jak wykonujesz to zadanie? Może chcesz coś kupić, uzyskać więcej informacji lub zobaczyć, co ma do zaoferowania. Cokolwiek by to nie było, jeśli odwiedzający nie mogą tego szybko rozgryźć, wyjdą.

jest tam po prostu za dużo konkurencji. Użytkownicy nie mają powodu, aby znosić nieporęczną nawigację w witrynie. Wszystko, co muszą zrobić, to opuścić Twoją witrynę i znaleźć to, czego potrzebują gdzie indziej.

nie próbuj odkrywać koła na nowo dzięki złożonemu projektowi. Trzymaj się standardowego formatu.

na przykład większość witryn umieszcza menu nawigacyjne poziomo na górze każdej strony. Jeśli twoje menu jest 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ą. Pojęcie to znane jest jako prawo Hicka.

im więcej opcji dajesz komuś, tym dłużej zajmie mu podjęcie decyzji. Dlatego złożone projekty i nawigacje zmiażdżą Twoje współczynniki konwersji.

jest na ten temat słynny eksperyment, zwany jam study, który omawia paradoks wyboru.

eksperyment przeprowadzono w lokalnym sklepie spożywczym. Konsumenci otrzymali 24 dżemy do próbkowania w jednym dniu i sześć dżemów następnego dnia:

• większy wyświetlacz pierwszego dnia przyciągnął 60% kupujących, ale tylko 3% tych osób dokonało zakupu.
• mniejszy wyświetlacz sześciu dżemów drugiego dnia przyciągnął 40% kupujących, ale 30% z nich dokonało zakupu.

ograniczając wybory, konwersje były dziesięciokrotnie wyższe. Ta sama koncepcja może być zastosowana do nawigacji w witrynie.

wyeliminuj niepotrzebne opcje menu. Na przykład zamiast przycisku” Strona główna”, po prostu Użyj logo witryny, aby przejść do ekranu głównego.

zajrzyj na stronę główną placu.

projekt jest super czysty. Opcje menu są bardzo ograniczone. Ułatwia to odwiedzającym wybór, który pasuje do ich potrzeb.

zauważysz, że na ekranie jest minimalny tekst, a CTA jest jasne i oczywiste.

ten typ projektu sprawia, że prawie niemożliwe jest zgubienie się lub zdezorientowanie odwiedzających witrynę podczas nawigacji.

dla tych z Was, którzy mają wiele opcji na swojej stronie, takich jak sklep ecommerce, możesz dodać pasek wyszukiwania, aby uprościć proces nawigacji bez użycia skomplikowanego menu. Wiele firm programistycznych umieszcza swoje funkcje w karcie funkcji, a nie ma indywidualnej karty dla każdej funkcji.

zoptymalizuj swój projekt pod kątem urządzeń mobilnych

Mobilny to sposób, w jaki większość świata uzyskuje dostęp do Internetu. Oznacza to, że jeśli nie jesteś zoptymalizowany pod kątem urządzeń mobilnych, Twoja witryna nie będzie działać dobrze.

spójrz na te dane z Hootsuite:

Wyszukiwarki rozpoznają to i nagradzają witryny przyjazne dla urządzeń mobilnych. Oto kilka dodatkowych statystyk, aby trafić w sedno:

• Google wie, że 87% właścicieli smartfonów korzysta ze swoich urządzeń do wyszukiwania w Internecie co najmniej raz dziennie.
• 58% wszystkich wyszukiwań Google odbywa się z urządzenia mobilnego
• wynik: 70% wyników pierwszej strony w Google jest zoptymalizowanych dla urządzeń mobilnych.

mobilne SEO jest najważniejszą rzeczą, którą możesz zrobić, aby dobrze pozycjonować w Google. Poważnie.

jeśli Twoja strona nie wygląda dobrze na smartfonie, ludzie nie będą chcieli zostać. Upewnij się więc, że projekty stron internetowych są przyjazne dla urządzeń mobilnych.

Przejdź głębiej: chcesz dowiedzieć się, jak zoptymalizować swoją stronę pod kątem urządzeń mobilnych? Sprawdź nasz kompletny przewodnik po przyjaznej dla urządzeń mobilnych stronie internetowej.

priorytet SEO

wszystko, co robisz na swojej stronie, musi wrócić do SEO.

i nie wystarczy po prostu dodawać słowa kluczowe tu i tam. Jest to system doskonalenia treści w całej witrynie i nieustannego kierowania na konkretne tematy, aby zbudować autorytet witryny w tym obszarze.

na przykład strona docelowa witryny ecommerce będzie chciała skupić się na pewnych elementach strony, takich jak:

• użyteczność. Jak łatwo jest odwiedzającym korzystać i nawigować.
• kom. Jak twoja strona wygląda i działa na urządzeniu mobilnym.
• Optymalizacja słów kluczowych. Słowa i zwroty, które chcesz uszeregować.
• linki wewnętrzne. Jak często linkujesz do innych stron w swojej witrynie.
• Jest to często największy tekst na stronie internetowej. W związku z tym wykonuje większość ciężkich prac na stronie docelowej.

utwórz mapę witryny XML. Ułatwi to robotom INDEKSUJĄCYM Wyszukiwarki analizowanie treści na twojej stronie. Mapa witryny pokaże botom lokalizację stron w witrynie, kiedy strona była ostatnio aktualizowana, częstotliwość aktualizacji i związek z innymi stronami w witrynie.

odpowiednia Mapa strony pokazuje Google, że nie masz zduplikowanych treści, które mogą zaszkodzić twoim rankingom SEO.

podczas projektowania witryny Istnieje mnóstwo mniej oczywistych elementów, które również wpływają na ranking w Google.

omówiliśmy już kilka aspektów, które możesz poprawić na samej stronie. Ale inne elementy obejmują:

• domena. Twój adres URL jest dość konsekwentny w stosunku do twojej pozycji w google. Kluczowe czynniki obejmują posiadanie słowa kluczowego w domenie, wiek domeny i rozszerzenie domeny (np. wysokiej jakości, takie jak. com,. NET,. gov,.org a nietradycyjne rozszerzenia).
• jakość strony. Twoja strona musi być pomocna dla odwiedzających. Kluczowe czynniki obejmują stronę „O Nas”, stronę „Skontaktuj się z nami”, częstotliwość aktualizacji witryny, łatwość poruszania się po witrynie, czas pracy (jak często witryna ulega awarii) i certyfikaty SSL.
• Backlinks. Odnosi się to do częstotliwości, z jaką witryna jest połączona z innymi witrynami. Jest to kluczowy czynnik dla dobrego rankingu w Google. Kluczowe czynniki to liczba stron z linkami, jakość i autorytet witryn, które odsyłają do Ciebie, tekst kotwicy, którego używają do umieszczania linków, oraz to, czy te linki pochodzą z domen .edu lub .gov.

Monitoruj szybkość ładowania strony

wiem, co niektórzy z was myślą. Co prędkość ładowania strony ma wspólnego z projektowaniem stron internetowych? Wszystko.

oczywiście, czasy ładowania są związane z planem hostingowym witryny, serwerem, ruchem i rzeczami tego rodzaju. Jednak wybory projektowe mogą również wpływać na czas ładowania.

za każdym razem, gdy dodajesz element do swojej witryny, w szczególności obrazy, filmy i inne złożone pliki multimedialne, może to mieć wpływ na czas ładowania. W związku z tym może spowolnić żądania HTTP.

powolny czas ładowania prowadzi do wysokiego wskaźnika porzucania. Nie możesz tego zignorować. Jeśli ładowanie stron trwa zbyt długo, będzie to ogromny problem.

co więcej, 25% osób porzuca strony internetowe, które ładują się dłużej niż cztery sekundy. Tak, cztery sekundy. To wszystko, co masz, albo stracisz 25 na 100 gości. Większość odwiedzających oczekuje, że strona załaduje się w ciągu dwóch sekund lub mniej.

więc jak możesz zastosować to do swojego projektu strony internetowej?

• zmniejsz rozmiary plików obrazów
• skorzystaj z narzędzi buforowania przeglądarki
• zmniejsz żądania HTTP
• popraw TTFB (czas do pierwszego bajtu)
• Minifiguruj i łącz pliki

dostępnych jest wiele narzędzi online aby pomóc ci osiągnąć te rzeczy. Na przykład sprawdź wtyczkę WordPress Rocket jako zasób do minifigurowania i łączenia plików. Skorzystaj z narzędzia Page Speed Insights firmy Google, aby monitorować czas ładowania za każdym razem, gdy wprowadzasz zmiany projektowe w swojej witrynie.

ciągle przeprowadzaj testy A/B

jeśli chodzi o projektowanie stron internetowych, nie możesz go po prostu ustawić i zapomnieć.

jak powiedziałem wcześniej, żadna strona nie jest idealna. Zawsze możesz ulepszyć swój projekt.

dlatego musisz uruchomić testy A / B. Pozwalają one na regularne Ulepszanie witryny i testowanie elementów, aby zobaczyć, co działa najlepiej, a co ważniejsze, co w ogóle nie działa.

można przetestować prawie każdy element projektu witryny. Na przykład możesz utworzyć dwie różne strony docelowe, które mają różne CTA, ale są takie same. Jeśli jedna strona docelowa działa lepiej niż druga, będziesz wiedział, że jej CTA prawdopodobnie wykona zadanie.

oto kilka szybkich sugestii, które pomogą Ci zacząć we właściwym kierunku:

• Sprawdź lokalizację przycisku CTA
• sprawdź kolor przycisku CTA
• Przetestuj kopię CTA
• Przetestuj obrazy używane na stronach docelowych
• sprawdź zmiany brzmienia tekstu na ekranie
• Sprawdź rozmiar paska nawigacyjnego

jest tak wiele opcji, że mógłbym spędzić cały dzień rozmawiając o tym. Dla tych z Was, którzy nie są zaznajomieni z testami A/B lub potrzebują pomocy, sprawdź mój przewodnik na wszystko, co musisz wiedzieć przed rozpoczęciem testów A/B.

wniosek

stwierdzenie, że projekt strony internetowej jest ważny, byłoby niedopowiedzeniem. Twoje wybory w zakresie projektowania stron internetowych ostatecznie wpłyną na sukces Twojej witryny.

• każda strona może zostać ulepszona. Użyj tej listy jako przewodnika jako zasobu, aby pomóc ci wprowadzić te ulepszenia.
• nie daj się przytłoczyć. Nie mówię, że musisz wdrożyć wszystkie te sugestie projektowe z dnia na dzień, ale musisz od czegoś zacząć.
• nie wyciągnąłem tych pomysłów z powietrza. Wszystko na tej liście jest poparte badaniami i statystykami związanymi z zasadami projektowania.

pamiętaj: każda strona to praca w toku. Jeśli włożysz pracę i zawsze dostroisz swoją stronę, poprawisz swoją przewagę nad konkurencją.

nie ma znaczenia, czy Twoja strona jest nowa, czy istnieje od dekady. Oto najlepsze praktyki projektowania stron internetowych, które musisz przestrzegać w 2021 roku.