15 zasad projektowania stron internetowych, aby strona była przyjazna dla klienta

Wyobraź sobie, że wchodzisz do sklepu detalicznego, aby poszukać nowych ubrań roboczych. Gdy się rozglądasz, zauważasz plamy na podłodze, chaotyczne półki i dziwny zapach. Czy zostałbyś w sklepie i kupowałbyś od sprzedawcy?

Projekt sklepu wpływa na zachowanie klientów — to samo dotyczy stron internetowych.

Ankieta przeprowadzona przez firmę Clutch wśród 612 osób wykazała, że ​​83% uczestników zauważa, że ​​projekt strony internetowej jest estetyczny i aktualny. Ewentualnie 50% uczestników opuści witrynę na zawsze, jeśli uzna, że ​​treść jest nieistotna lub nie spełnia ich potrzeb.

Jak więc zaprojektujesz stronę internetową, która spodoba się klientom?

O tym jest ten artykuł. Pokażemy Ci, dlaczego dobre projektowanie stron internetowych jest niezbędne, i podzielimy się 15 zasadami projektowania stron internetowych, które możesz wykorzystać do stworzenia wysokiej jakości strony internetowej.

Dlaczego dobry projekt strony internetowej jest ważny?

Przeciętny projektant stron internetowych zarabia 57 000 USD rocznie — około 8 000 USD więcej niż młodsi twórcy stron internetowych, którzy średnio zarabiają 44 000 USD rocznie. Projektanci są dość dobrze wynagradzani nie bez powodu: ich praca jest niezbędna.

Kiedy nowy potencjalny klient odwiedza Twoją witrynę, tworzy pierwsze wrażenie, które kształtuje jego przyszłe interakcje z Twoją marką. W tym momencie wypracowują swoją pierwszą opinię o Tobie.

Twoja witryna internetowa przekazuje również tożsamość, wizję i pozycję Twojej marki w branży. Jeśli masz bliskich konkurentów z podobnym produktem, witryna, która sprawia, że ​​ludzie mówią „wow”, sprawi, że będziesz bardziej zapadać w pamięć i zwiększysz świadomość marki nad konkurencją.

Dodatkowo, silna strona internetowa może usprawnić działania związane z optymalizacją wyszukiwarek (SEO).

Wyszukiwarki biorą pod uwagę, jak ludzie reagują na strony internetowe, umieszczając je w wynikach wyszukiwania. Jeśli Twój współczynnik odrzuceń jest niski, a ludzie często odwiedzają wiele stron w Twojej witrynie, wyszukiwarki prawdopodobnie ocenią Cię wyżej niż konkurent o wysokim współczynniku odrzuceń.

Pozycjonowanie techniczne jest tutaj również ważne. Strony internetowe z dobrze zaprojektowanymi tytułami, strukturami stron i linkami są bardziej dostępne. W ten sposób zarówno wyszukiwarki, jak i klienci faworyzują je. Przyjrzyjmy się kilku ważnym zasadom projektowania stron internetowych.

15 zasad skutecznego projektowania stron internetowych

Kiedy mówimy o „zasadach projektowania stron internetowych”, odnosimy się do ogólnych zasad projektowania elementów tekstowych i wizualnych witryny lub strony internetowej. Każda marka inaczej przyjmuje zasady projektowania stron internetowych — niektóre są zgodne z najlepszymi praktykami, a inne nie.

Oto 15 zasad projektowania stron internetowych, które pomogą Ci stworzyć doskonałą witrynę internetową (plus przykłady witryn, które skutecznie z nich korzystają):

1. Strony powinny być łatwe w nawigacji

W badaniu Clutch dotyczącym doświadczeń użytkowników na stronach internetowych 94% uczestników postrzegało nawigację w witrynie jako „najważniejszą cechę witryny”.

Nic dziwnego, dlaczego. Jeśli użytkownik wyszukiwarki wchodzi na Twoją witrynę w poszukiwaniu informacji na temat „projektowania mobilnego” i nie może jej znaleźć, naturalnym następnym krokiem jest kliknięcie „wstecz” i wypróbowanie innej witryny.

Jak pojmujesz dobrze zaplanowaną nawigację? Czerp inspirację ze strony internetowej The Cool Club.

Po wejściu na stronę główną Cool Clubu układ witryny jest niezwykle przejrzysty. Możesz przejść do kluczowych sekcji produktów (takich jak „gry karciane” i „lista życzeń”) za pomocą przycisków po lewej stronie, a do stron „informacje” i „kontakt” możesz przejść za pomocą przycisków po prawej stronie.

Strony produktów Cool Club są również bardzo łatwe w nawigacji. Marka ma obecnie interaktywną talię kart, która zawiera 54 fajne odmiany i odpowiadające im strony. Po prostu przewiń w dół i kliknij kartę, której chcesz zobaczyć więcej.

Aby stworzyć równie skuteczną witrynę, posortuj treści w przejrzyste kategorie dla nagłówków i stopek i nadaj im opisowe tytuły. Następnie uporządkuj strony według tematu, aby użytkownicy mogli łatwo nawigować między podobnymi tematami.

Dodatkowo zadbaj o spójność nagłówka i stopki w całej witrynie.

2. Zawsze wykorzystuj ujemną przestrzeń

Spacja ujemna (lub „biała spacja”) to obszar wokół tematów strony, niezależnie od tego, czy są to obrazy, filmy, tekst czy przyciski.

Wielu entuzjastycznych marketerów spieszy się, aby wypełnić każdą wolną przestrzeń na stronie, mając nadzieję, że udostępnienie odwiedzającym więcej informacji zwiększy ich zaangażowanie. Jednak często powoduje to przytłaczające i mylące strony.

Tutaj pojawia się negatywna przestrzeń. Użycie negatywnej przestrzeni podkreśla najbardziej krytyczne elementy każdej strony, ponieważ brak koloru przyciąga wzrok odwiedzających do jaśniejszych obszarów.

Oczywiście „użyj negatywnej przestrzeni” nie oznacza „stworzenia nudnej białej strony internetowej”. Zamiast tego możesz wykorzystać przestrzeń, używając kolorów swojej marki, tak jak robi to Garoa.

Strona główna Garoa wykorzystuje kremową paletę do budowania nastroju, jednocześnie wykorzystując negatywną przestrzeń. W rezultacie Twoje oczy kierują się na treść wprowadzającą w części „Pielęgnacja skóry na jesień” pośrodku, zamiast na mniej ważne części.

Pamiętaj, aby wykorzystać białą przestrzeń, aby zaprezentować hierarchię we własnej witrynie internetowej.

3. Strony powinny być spójne, ale angażujące

Kiedy czytasz nazwy marek, takie jak „Cadbury”, „Hershey's” czy „Nike”, od razu przychodzi ci na myśl wizja ich logo, czcionek i stylów projektowych. Na tym polega siła konsekwentnego brandingu.

Projektując swoją witrynę, twórz strony ze spójnymi elementami, aby nadać swojej marce wyraźną tożsamość wizualną. To znaczy:

• Używanie tych samych czcionek, stylów i kolorów w nagłówkach
• Utrzymywanie takich samych odstępów między elementami wizualnymi między stronami
• Używanie palet kolorów zamiast losowych kolorów
• Ustalanie wytycznych dotyczących układu dla długich treści, takich jak wiadomości i posty na blogu
• Korzystanie z szablonu witryny dla wszystkich stron

Spójne strony nie muszą wyglądać całkowicie jednolicie. Zamiast tego możesz zrównoważyć spójność i zaangażowanie, mieszając elementy.

Na przykład możesz użyć różnych czcionek i kolorów w nagłówkach H1, H2 i H3. Możesz też zmienić układ różnych typów stron, aby wszystko pomieszać.

4. Obejmij kolory dopełniające

Kolory dopełniające to pary kolorów, które można mieszać, nie sprawiając, że projekt będzie przytłaczający i brzydki.

Sposób wyświetlania kolorów na ekranie jest zgodny z modelem kolorów czerwonego, zielonego i niebieskiego (RGB), a nie z modelem cyjan, magenta, żółtym i czarnym (CMYK) używanym w drukowaniu. Malarze często używają również modelu kolorów czerwono-żółto-niebieskiego (RYB), który traktuje kolory uzupełniające jako czerwono-zielony, niebiesko-pomarańczowy i żółto-fioletowy.

Bez względu na to, jaki model preferujesz, użycie kolorów dopełniających ma podobne zastosowanie do czerni i bieli. Dopełniające się kolory podkreślają i tworzą wyraźną tożsamość wizualną Twojej marki.

Możesz to zobaczyć na stronie internetowej Swab The World.

Na poniższym zrzucie ekranu organizacja charytatywna zajmująca się rakiem krwi używa zieleni i odcieni magenta. Te kolory zmieniają się na inne dopełniające się kombinacje kolorów, gdy odwiedzasz różne sekcje witryny (chociaż wszystkie kolory mają podobne nasycenie, więc branding pozostaje spójny).

Kolory dopełniające to zasada, którą można łatwo zastosować w swoim projekcie. Jeśli chcesz zachować prostotę, wybierz dwa uzupełniające się kolory i dodaj je do kontrastujących elementów (takich jak H2 i tekst podstawowy). Lub użyj wielu odcieni każdego koloru na każdej stronie.

5. Projektuj z myślą o docelowej grupie odbiorców

Jeśli spojrzysz na strony internetowe The Cool Kids, Garoa i Swab The World, możesz zauważyć, że każda strona internetowa ma unikalne „odczucie”. To uczucie wynika z dostosowania projektu strony internetowej do odbiorców.

Personalizacja jest tutaj ostatecznym celem. Większość z nas lubi kupować produkty i usługi od marek, z którymi czujemy się związani i przez które są reprezentowane. W rzeczywistości badania pokazują, że 72% konsumentów ceni zakupy od firm, które „dostosowują się do ich przekonań i wartości”. Tak więc, jeśli ktoś odwiedza Twoją witrynę i widzi w niej swoje wartości, cele i priorytety, jest bardziej prawdopodobne, że dokona zakupu od Ciebie.

Aby dostosować projekt witryny do swoich odbiorców, rozważ:

• Jakie obrazy pasują do Twojego rynku docelowego?
• Jaki ton pasuje do Twoich odbiorców (na przykład profesjonalny, minimalistyczny, szampański itp.)
• Jakie tematy Twój rynek docelowy pojawia się w Twojej witrynie, aby zobaczyć?
• Jak możesz przekazać pozycjonowanie swojej marki poprzez projektowanie stron internetowych
• Na jakie wezwania do działania (CTA) reagują Twoi odbiorcy (i gdzie należy je umieścić, aby zoptymalizować współczynnik klikalności (CTR))

Dodatkowe punkty, jeśli możesz użyć automatyzacji witryny, aby zapewnić osobiste wrażenia na podstawie profilu użytkownika i wcześniejszych interakcji z Twoją marką.

Pomocne może być czerpanie inspiracji od konkurentów lub marek, które sprzedają różne rzeczy docelowej grupie demograficznej.

6. Czcionki powinny być czytelne i dostępne

Czcionki, których używasz w swojej witrynie, określają, czy odwiedzający mogą przeczytać to, co napisałeś, czy nie. Można powiedzieć, że są bardzo ważne.

Pierwszą rzeczą do rozważenia przy wyborze czcionki jest bezpieczeństwo w sieci. Czcionki bezpieczne w Internecie są obsługiwane przez systemy operacyjne i przeglądarki internetowe, więc będą działać na większości urządzeń.

Musisz także wziąć pod uwagę dostępność. Dostępne czcionki powinny być wyraźne i łatwe do odczytania w dużych i małych rozmiarach. Na przykład czcionki oparte na kursywie nie są zbyt dostępne, podczas gdy Times New Roman jest dość przystępny.

Dodatkowo zwracaj uwagę na trendy czcionek na innych stronach internetowych przy wyborze czcionki. W 2021 r. badacz danych Michael Li przeanalizował czcionki na ponad 1000 stronach internetowych. Znalazł następujące trendy:

• 85% czcionek nie używa szeryfów (mało dodanych linii do liter w rodzaju gazety)
• Pięć najlepszych czcionek to Sans Serif, Arial, Helvetica, Helvetica Neue i Roboto
• Nagłówki H1 mają 58% prawdopodobieństwa braku szeryfów (w porównaniu z 93% w przypadku tekstu akapitu)
• Dwa najpopularniejsze rozmiary czcionek akapitowych to 14 pikseli i 16 pikseli

Możesz wykorzystać te informacje, aby wybrać styl czcionki zgodny z tym, czego ludzie szukają w witrynach internetowych. Możesz też zdecydować się na zrobienie czegoś innego.

Virgin to marka, która wybrała drugą opcję. Virgin użyło co najmniej pięciu czcionek na poniższym zrzucie ekranu. Czcionki te oddzielają sekcje strony i sprawiają, że wyglądają zachęcająco.

7. Przestrzegaj prawa Fitta i prawa Hicka

Psycholog Paul Fitts po raz pierwszy opracował Prawo Fitta w 1954 r., ale nadal jest ono bardzo istotne w projektowaniu stron internetowych w 2022 r. Prawo Fitta twierdzi, że rozmiar celu wpływa na to, ile czasu zajmuje komuś dotarcie do niego.

W kontekście projektowania stron internetowych lub środowiska użytkownika (UX) oznacza to, że użytkownicy będą potrzebować mniej czasu na klikanie większych przycisków lub więcej czasu na klikanie mniejszych przycisków. Tak więc, aby wykorzystać prawo Fitta, powinieneś ustawić przyciski CTA bardzo duże i widoczne, aby łatwiej było w nie kliknąć.

„Łatwy” jest tutaj kluczowy. Prawo Hicka, opracowane przez brytyjskiego psychologa Williama Edmunda Hicka i amerykańskiego psychologa Raya Hymana, mówi, że ludzie stają się zmęczeni za każdym razem, gdy coś decydują.

Tak więc im więcej decyzji poprosisz odwiedzającego witrynę o podjęcie, tym większe prawdopodobieństwo, że stanie się on zbyt zmęczony, aby wykonać.

8. Użyj niezmienności, aby podświetlić kluczowe informacje

Kiedy coś jest „niezmienne”, wyróżnia się jako wyjątkowa opcja spośród kilku bardzo podobnych opcji. Najbardziej oczywistym przykładem niezmienności jest podświetlanie w planach na stronach z cenami, takich jak ta z Boxa.

Ale to nie jedyny sposób, w jaki możesz użyć niezmienności. Niezmienność może pomóc w ustaleniu hierarchii wizualnej na stronach, aby wyróżnić kluczowe informacje i przyciągnąć ludzi do ważnych części strony.

Spójrz na przykład, jak Muzeum Fransa Halsa wykorzystało niezmienność do stworzenia hierarchii wizualnej na swojej stronie głównej:

Hierarchia na tym obrazie jest następująca: znak „witamy”, obrazy, znak „kup bilety”, znak „wszystkie wystawy”, potem inna treść.

Aby użyć niezmienności do stworzenia własnej hierarchii, uszereguj elementy strony według ważności. Następnie dostosuj rozmiar, kolor i rozmieszczenie każdego elementu, aż oczy odwiedzających skierują się na każdy element w wybranej przez Ciebie kolejności.

9. W CTA: używaj jasnego języka, w którym ludzie będą chcieli kliknąć

Poruszyliśmy kwestię, jak ważne jest, aby przyciski były duże i łatwe do klikania, ale rozmiar nie jest jedyną rzeczą, którą należy wziąć pod uwagę podczas tworzenia przycisków.

Klikalne przyciski są jednocześnie opisowe i przekonujące. Sprawiają, że odwiedzający jest ciekaw, do czego prowadzi przycisk, i dają mu powód, by tam pójść.

Jednym ze sposobów, aby to zrobić, jest użycie szczegółowego tekstu przycisku, takiego jak „kliknij tutaj, aby przeczytać naszego bloga”, „znajdź tutaj nasze tajemnice marketingowe” lub „oto nasz raport 2022”. Innym jest sprawienie, aby Twoje przyciski były wizualnie ekscytujące lub niepowtarzalne.

Rainforest Protector przyjął oba podejścia. Rainforest Protector pozwala poruszać się po amazońskim lesie deszczowym, odwiedzając różne lokalizacje. Przycisk każdej lokalizacji zawiera obraz i akcję, taką jak „odwiedź wioskę”.

10. Wykorzystaj wzór F lub wzór Z

Przez ponad 13 lat naukowcy z Nielsen Norman Group (grupa NN) wykorzystywali eye-tracking, aby zobaczyć, jak ponad 500 osób angażuje się w treści. To doprowadziło ich do opracowania wzorca F, który mówi, że pierwszą rzeczą, jaką ludzie robią, jest przeglądanie strony, a następnie czytanie w wierszach od lewej do prawej. Lubię to:

Możesz wykorzystać wzorzec F w swojej witrynie, tworząc wokół niego treść lub model alternatywny.

Facebook słynie ze wzoru w kształcie litery Z na swojej stronie głównej. Gdy odwiedzasz stronę, Twoje oczy kierują się na logo „Facebook”, następnie na przycisk „zaloguj się”, następnie na obrazek po lewej stronie, a na końcu na przycisk „załóż konto”.

11. Dobre strony internetowe są szybkie i przyjazne dla urządzeń mobilnych

W czwartym kwartale 2021 r. 54,4% ruchu w witrynie na całym świecie pochodziło z urządzeń mobilnych. Jeśli więc Twoja witryna nie jest dostosowana do urządzeń mobilnych, możesz zmniejszyć ruch o połowę.

Szybkość wpływa również na organiczny ruch w witrynie. Badania Google pokazują, że 53% osób opuszcza witrynę, jeśli ładuje się ona w czasie dłuższym niż trzy sekundy.

Najłatwiejszym sposobem, aby Twoja witryna była przyjazna dla urządzeń mobilnych lub szybka, jest wybranie szybkiego motywu witryny stworzonego przez ekspertów. Lub, jeśli chcesz bardziej zaangażować się w projektowanie swojej witryny, możesz stworzyć własną, responsywną witrynę internetową.

To właśnie zrobili projektanci filmu z 1917 roku. Witryna 1917 zapewnia wciągające wrażenia, aby ludzie zainwestowali w film. Jest specjalnie zaprojektowany dla urządzeń mobilnych, ponieważ możesz poruszać się palcem po okopach pierwszej wojny światowej.

Jeśli jesteś spostrzegawczy, zauważysz, że witryna 1917 również wykorzystuje wzór F.

12. Podziel tekst na kawałki wielkości zgryzu

Zastanów się: wyszukujesz „gry umysłowe” i znajdujesz stronę, która wydaje się obiecująca. Jednak po kliknięciu go przytłaczają Cię duże fragmenty tekstu, które są trudne do odczytania.

Jak wiele osób, możesz wyłączyć witrynę (niezależnie od tego, jak obiecująca jest treść!).

Badania eye-trackingowe przeprowadzone przez Missouri University of Science and Technology pokazują, że odwiedzający witrynę internetową spędzają średnio 5,59 sekundy na czytaniu tekstu. Tak więc, jeśli ludzie nie mogą skonsumować Twojego tekstu w tym czasie, jest mało prawdopodobne, że odpowiednio ich zaangażujesz.

Rozwiąż ten problem, dzieląc tekst na małe kawałki. Do tego:

• Używaj krótkich zdań
• Trzymaj się z dala od kolokwializmów
• Podaj definicje wszelkich używanych słów branżowych
• Unikaj „fioletowej prozy” (niepotrzebne metafory, przysłówki i przymiotniki)

13. Użyj siatek

Kiedy mówimy „użyj siatek”, nie mamy na myśli tego, że Twoja witryna powinna wyglądać jak tabela Excela. Zamiast tego podziel swoją witrynę na odrębne sekcje, które służą określonemu celowi, aby odwiedzający mogli szybko zlokalizować treść.

Aby to zrobić, nie musisz używać linii siatki. Zamiast tego stwórz rozróżnienie między przestrzeniami siatki z kolorem, negatywną przestrzenią i cieniowaniem, tak jak zrobił to Atlason. Strona główna Atlason zawiera nowe i najlepiej sprzedające się produkty w siatkach. Ponieważ odwiedzający prawdopodobnie szukają tych produktów, siatki pomagają im znaleźć je w kilka sekund.

Jednym z najłatwiejszych sposobów korzystania z siatek w witrynie jest wybranie motywu WordPress, który ich używa. Przykłady obejmują siatkę, siatkę murowaną i siatkę wahadłową.

14. Pamiętaj o równowadze

W kontekście projektowania stron internetowych „równowaga” odnosi się do sposobu, w jaki elementy projektu układają się względem siebie i czy elementy przedstawiają harmonię. Istnieje wiele sposobów na zachowanie równowagi w witrynie, w tym niektóre z poniższych zasad projektowania witryn:

• Poprzez symetrię (w tym symetrię dwustronną, promieniową lub translacyjną)
• Korzystanie z kolorów dopełniających lub kontrastujących
• Korzystanie z elementów o podobnych kształtach i rozmiarach
• Korzystanie z powtarzających się wzorów

Możesz zobaczyć równowagę w akcji na stronie internetowej Woven. Ta strona internetowa wykorzystuje zrównoważoną paletę kolorów, czerń i biel, aby stworzyć kontrast w tekście i symetrię, aby przyciągnąć uwagę odwiedzających do treści.

15. Zwróć uwagę na szczegóły

Teoria Gestalt mówi, że ludzie postrzegają coś jako całość, zanim spojrzą na poszczególne elementy. Albo, jak powiedział Kurt Koffka: „Całość istnieje niezależnie od części”. Chociaż ludzie zwykle odwołują się do teorii Gestalt dotyczącej psychologii, dotyczy ona również projektowania stron internetowych.

Musisz zwrócić uwagę na drobne szczegóły w swojej witrynie, aby projekt wyglądał na dopracowany i kompletny. Projektując coś, łatwo jest skupić się na ważnych elementach, takich jak nagłówki, obrazy i wezwania do działania, i zapomnieć o innych rzeczach, takich jak:

• Ikony stopki i nagłówka
• Przyciski mediów społecznościowych
• Jak skutecznie przekonwertowałeś swoją witrynę na WordPress (jeśli dotyczy)
• Odstępy w tekście
• Literówki i błędy gramatyczne
• Kompatybilność z przeglądarką
• Rozmiary obrazu

Dokładnie sprawdź te elementy, zanim klikniesz „opublikuj” i upewnij się, że Twoja witryna zapewnia profesjonalizm. Możesz przeoczyć drobne wady, ale odwiedzający nie.

Dodatkowo bądź na bieżąco z nowymi trendami i koncepcjami w zasadach projektowania stron internetowych. Dodanie ich do swojej witryny sprawi, że będzie wyglądać na nową, świeżą i wciągającą.

Streszczenie

Dobrze zaprojektowany sklep detaliczny poprawia wrażenia klientów, podczas gdy kiepski może na zawsze zniechęcić klientów do Twojej marki. Tak samo jest z projektowaniem stron internetowych.

Budowanie atrakcyjnej wizualnie strony internetowej to coś więcej niż tylko zabawny projekt. Może ci pomóc:

• Przekaż profesjonalizm
• Buduj zaufanie wśród odwiedzających
• Wyróżnij się na tle konkurencji
• Przyciągnij ruch organiczny z wyszukiwarek

Wykorzystaj zasady projektowania stron internetowych opisane w tym artykule, aby zbudować witrynę, która sprawi, że odwiedzający powiedzą „wow”.

Teraz, gdy omówiliśmy już wszystko, co wiemy o projektowaniu stron internetowych, chcielibyśmy usłyszeć od Ciebie. Co zauważasz, gdy odwiedzasz witrynę marki? Dodatkowo, czy stosujesz jakieś zasady, o których nie wspomnieliśmy na Twojej stronie? Powiedz nam w komentarzach poniżej.