8 zasad projektowania stron internetowych, które nadal działają w 2020 roku
Opublikowany: 2021-07-22Projekt Twojej witryny jest ważniejszy dla konwersji niż myślisz. Możesz wdrożyć każdą taktykę zwiększania konwersji na świecie, ale jeśli Twój projekt strony internetowej wygląda na gównianą, nie przyniesie Ci to wiele dobrego.
Design to nie tylko coś, co robią projektanci. Design to marketing. Design to Twój produkt i sposób jego działania. Im więcej poznałem zasad projektowania stron internetowych, tym lepsze wyniki osiągałem.
Darmowy kurs UX i użyteczności
Przejdź od zasad do praktyki. Oglądaj bezpłatne kursy na temat UX i użyteczności.
Oto 8 skutecznych zasad projektowania stron internetowych, które powinieneś znać i przestrzegać.
1. Hierarchia wizualna
Skrzypiące koła są smarowane, a wyraziste efekty wizualne przyciągają uwagę. Hierarchia wizualna to jedna z najważniejszych zasad dobrego projektowania stron internetowych. To kolejność, w jakiej ludzkie oko postrzega to, co widzi.
Ćwiczenie. Proszę uszeregować kręgi w kolejności ważności:
Nie wiedząc nic o tych kręgach, udało Ci się je uszeregować
z łatwością. To wizualna hierarchia.
Niektóre części Twojej witryny są ważniejsze niż inne (formularze, wezwania do działania, propozycja wartości itp.) i chcesz, aby przyciągały one więcej uwagi niż mniej ważne części.
Jeśli menu Twojej witryny zawiera 10 pozycji, to czy wszystkie są równie ważne? Gdzie użytkownik ma kliknąć? Zwiększ widoczność ważnych linków.
Hierarchia nie bierze się wyłącznie z rozmiaru. Amazon uwydatnia przyciski wezwania do działania „Dodaj do koszyka” i „Kup teraz”, używając koloru:
Zacznij od celu biznesowego
Powinieneś uszeregować elementy na swojej stronie internetowej w oparciu o cel biznesowy. Jeśli nie masz określonego celu, nie będziesz wiedział, jaki priorytet.
Oto przykład. To zrzut ekranu, który zrobiłem ze strony Williams-Sonoma. Chcą sprzedawać naczynia na zewnątrz.
Największym przyciągającym wzrok jest ogromny kawałek mięsa (spraw, żebym go chciał), po którym następuje nagłówek (powiedz, co to jest) i wezwanie do działania (zdobądź to). Czwarte miejsce zajmuje akapit tekstu pod nagłówkiem; piąty to baner z bezpłatną wysyłką, a górna nawigacja jest ostatnia.
To jest hierarchia wizualna – ponadczasowa zasada projektowania stron internetowych – dobrze zrobione.
Ćwiczenie. Surfuj po Internecie i świadomie klasyfikuj elementy w wizualnej hierarchii. Następnie spójrz na swoją stronę. Czy coś ważnego (tj. kluczowe informacje, których szukają odwiedzający) jest za daleko w hierarchii? Spraw, by był bardziej widoczny.
2. Boskie proporcje
Złoty podział to magiczna liczba 1,618 (φ). Projekty, w których zastosowano proporcje określone przez złoty podział, są podobno estetyczne.
Następnie mamy ciąg Fibonacciego. Każdy termin jest sumą dwóch poprzednich terminów: 0, 1, 1, 2, 3, 5, 8, 13, 21 itd. Interesujące jest to, że te dwa pozornie niepowiązane ze sobą tematy dają dokładnie taką samą liczbę.
Oto jak wygląda Złoty podział:
Wielu artystów i architektów używa proporcji, aby zbliżyć się do Złotego Podziału. Słynnym przykładem jest Partenon, zbudowany w starożytnej Grecji:
Czy Golden Ratio może działać w przypadku projektowania stron internetowych? Obstawiasz. Oto Twitter:
Oto komentarz, sprzed lat, dyrektora kreatywnego Twittera, Douga Bowmana. Wybór projektu nie był przypadkowy:
Jeśli więc szerokość układu wynosi 960px, podziel ją przez 1,618 (=593px). Wiesz, że szerokość obszaru zawartości powinna wynosić 593px, a pasek boczny 367px. Jeśli wysokość witryny wynosi 760px, możesz podzielić ją na części 470px i 290px (760/1.618=~470).
Jeśli chcesz dowiedzieć się więcej, zapoznaj się z tym artykułem o tym, jak zastosować Złoty podział do typografii.
3. Prawo Hicka
Prawo Hicka mówi, że z każdym dodatkowym wyborem wydłuża się czas potrzebny na podjęcie decyzji.
Doświadczyłeś tego niezliczoną ilość razy w restauracjach. Menu z ogromnymi opcjami utrudnia wybór obiadu. Gdyby oferował dwie opcje, podjęcie decyzji zajęłoby znacznie mniej czasu. Jest to podobne do paradoksu wyboru – im więcej wyborów dajesz, tym łatwiej nie wybierać niczego. Obie zasady wchodzą w grę przy projektowaniu stron internetowych.
Im więcej opcji użytkownik ma w Twojej witrynie, tym trudniej jest z niej korzystać (jeśli w ogóle jest używana). Musimy wyeliminować wybory. Aby stworzyć lepszy projekt strony internetowej, skoncentruj się na wyeliminowaniu rozpraszających opcji w całym procesie projektowania.
W erze nieskończonego wyboru ludzie potrzebują lepszych filtrów! Jeśli sprzedajesz ogromną liczbę produktów, dodaj lepsze filtry, aby ułatwić podejmowanie decyzji. Wine Library sprzedaje ogromne ilości wina.
Robią dobrą robotę z filtrami:
4. Prawo Fitta
Prawo Fitta stanowi, że czas potrzebny na przejście do obszaru docelowego (np. kliknięcie przycisku) jest funkcją odległości do celu i wielkości celu. Innymi słowy, im większy przedmiot i im bliżej się znajduje, tym łatwiej z niego korzystać.
Spotify ułatwia naciśnięcie „Odtwórz” niż inne przyciski:
W aplikacji na telefon komórkowy umieszczają również przycisk odtwarzania w łatwym do dotknięcia miejscu.
Większe nie zawsze znaczy lepsze. Przycisk, który zajmuje połowę ekranu, nie jest dobrym pomysłem i nie potrzebujemy analizy matematycznej, aby nam to powiedzieć. Mimo to prawo Fitta jest logarytmem binarnym. Oznacza to, że przewidywane wyniki użyteczności obiektu biegną wzdłuż krzywej, a nie prostej.
Mały przycisk jest znacznie łatwiejszy do kliknięcia, gdy zwiększy się rozmiar o 20%, podczas gdy bardzo duży obiekt, przy tym samym zwiększeniu rozmiaru o 20%, nie zapewni takich samych korzyści w użyteczności.
Jest to podobne do zasady wielkości docelowej. Rozmiar przycisku powinien być proporcjonalny do oczekiwanej częstotliwości jego używania. Możesz użyć śledzenia myszy, aby zobaczyć, których przycisków ludzie używają najczęściej, a następnie powiększyć popularne przyciski (łatwiej je nacisnąć).
Wyobraźmy sobie, że istnieje formularz, który ludzie mają wypełnić. Na końcu formularza znajdują się dwa przyciski: „Wyślij” i „Resetuj” (wyczyść pola).
99,9999% chce nacisnąć „Prześlij”. Dlatego przycisk powinien być znacznie większy niż „reset”.
5. Zasada trójpodziału
Dobrym pomysłem jest użycie w projekcie obrazów. Wizualizacja komunikuje Twoje pomysły znacznie szybciej niż tekst.
Najlepsze obrazy są zgodne z zasadą trójpodziału: obraz powinien być podzielony na dziewięć równych części za pomocą dwóch równomiernie rozmieszczonych linii poziomych i dwóch równomiernie rozmieszczonych linii pionowych. Wzdłuż tych linii lub na ich przecięciach należy umieścić ważne elementy kompozycyjne.
Poniżej widzisz, dlaczego obraz po prawej stronie jest ciekawszy? To zasada trójpodziału w działaniu.
Używanie pięknych, dużych obrazów przyczynia się do dobrego projektowania stron internetowych. Jeśli Twoje obrazy są ciekawsze, Twoja strona internetowa będzie bardziej atrakcyjna.
6. Prawa projektowe Gestalt
Psychologia Gestalt to teoria umysłu i mózgu. Jego zasadą jest to, że oko ludzkie widzi przedmioty w całości, zanim dostrzeże ich poszczególne części.
Oto, co mam na myśli:
Zwróć uwagę, jak możesz zobaczyć psa bez skupiania się na każdej czarnej plamce, z której składa się pies? Założyciel gestaltyzmu Kurt Koffka tłumaczył to w ten sposób: „całość istnieje niezależnie od części”.
Jeśli chodzi o projektowanie stron internetowych, ludzie najpierw widzą całą witrynę — zanim rozróżnią nagłówek, menu, stopkę i tak dalej.
Istnieje osiem tak zwanych praw projektowania gestalt, które pozwalają nam przewidzieć, jak ludzie będą coś postrzegać. Oto jak każdy z nich odnosi się do projektowania stron internetowych:
1. Prawo bliskości
Ludzie grupują rzeczy, które są blisko siebie w przestrzeni. Stają się jednym postrzeganym obiektem.
Dla efektywnego projektowania stron internetowych, upewnij się, że rzeczy, które nie idą w parze nie są postrzegane jako jeden. Podobnie grupujesz powiązane elementy projektu (menu nawigacyjne, stopka itp.), aby zakomunikować, że tworzą one całość.
Craigslist wykorzystuje to prawo, aby ułatwić zrozumienie, które podkategorie należą do „na sprzedaż”:
2. Prawo podobieństwa
Grupujemy razem podobne rzeczy. To podobieństwo może występować w postaci kształtu, koloru, cieniowania lub innych cech.
Tutaj grupujemy czarne kropki w jedną grupę, a białe w drugą, ponieważ, cóż, kropki tego samego koloru wyglądają podobnie do siebie.
Jak to wygląda w zastosowaniu do projektowania stron internetowych? Mixpanel wykorzystuje podobny projekt dla linków do studiów przypadków, więc postrzegamy je jako jedną grupę, z których każda wzmacnia się nawzajem:
3. Prawo zamknięcia
Poszukujemy kompletności. Kiedy kształty, które nie są zamknięte lub brakuje części obrazu, nasza percepcja wypełnia lukę wizualną. Widzimy okrąg i kwadrat, mimo że na poniższej grafice żaden z tych kształtów nie istnieje.
Bez prawa domknięcia zobaczylibyśmy po prostu różne linie o różnych długościach. Ale prawo zamknięcia łączy linie, tworząc całe kształty.
Stosowanie prawa zamknięcia może uatrakcyjnić logo lub elementy projektu. Dobrym przykładem jest logo World Wide Fund For Nature, które zostało zaprojektowane przez Sir Petera Scotta w 1961 roku:
4. Prawo symetrii
Umysł postrzega obiekty jako symetryczne, formujące się wokół centralnego punktu. Przyjemny percepcyjnie jest podział przedmiotów na parzystą liczbę symetrycznych części.
Kiedy widzimy dwa symetryczne elementy, które nie są połączone, umysł percepcyjnie łączy je, tworząc spójny kształt.
Kiedy patrzymy na powyższy obraz, zwykle obserwujemy trzy pary symetrycznych nawiasów, a nie sześć pojedynczych nawiasów.
Ludzie wolą wyglądy symetryczne od asymetrycznych. Naprzemienne kolumny obrazów i tekstu, wyśrodkowane suwaki i trzykolumnowa lista zwiększają przyjemność wizualną projektu strony głównej Trello:
5. Prawo wspólnego losu
Mamy tendencję do postrzegania obiektów jako linii poruszających się po ścieżce. Grupujemy razem obiekty, które mają ten sam kierunek ruchu i dlatego znajdują się na tej samej ścieżce.
Mentalnie ludzie grupują razem kije lub podniesione ręce wskazujące gdzieś, ponieważ wszystkie wskazują w tym samym kierunku. W projekcie swojej witryny możesz to wykorzystać, aby skierować uwagę użytkownika na coś (np. formularz rejestracyjny, propozycja wartości itp.).
Na przykład, jeśli istnieje szereg kropek, a połowa kropek porusza się w górę, a druga połowa w dół, postrzegamy kropki poruszające się w górę i kropki poruszające się w dół jako dwie odrębne jednostki.
6. Prawo ciągłości
Ludzie mają tendencję do postrzegania linii jako kontynuacji ustalonego kierunku. Kiedy występuje przecięcie między obiektami (np. liniami), mamy tendencję do postrzegania tych dwóch linii jako dwóch pojedynczych, nieprzerwanych bytów. Bodźce pozostają wyraźne nawet przy nakładaniu się.
Fixel używa tego do łączenia twarzy z biosem:
Istnieją również inne prawa Gestaltu, takie jak Figura i Ziemia lub Prawo Dobrego Gestaltu. (Obiekty są zwykle grupowane percepcyjnie, jeśli tworzą regularny, prosty i uporządkowany wzór — jak pierścienie olimpijskie). Jednak te omówione powyżej są najlepszymi zasadami przewodnimi przy projektowaniu stron internetowych.
7. Biała przestrzeń i czysty design
Biała przestrzeń (zwana również „ujemną spacją”) to część strony internetowej, która pozostaje „pusta”. To przestrzeń między grafikami, marginesami, rynnami, odstępami między kolumnami, odstępami między wierszami tekstu lub wizualizacjami.
To nie tylko „pusta” przestrzeń — to ważny element projektowania stron internetowych. Umożliwia istnienie znajdujących się w nim obiektów. Biała przestrzeń polega na wykorzystaniu hierarchii informacji, typografii, koloru lub obrazów.
Strona bez pustej przestrzeni, wypełniona tekstem lub grafiką, może wydawać się zajęta lub zagracona. Zazwyczaj jest to trudne do odczytania. (Ludzie nawet nie zawracają sobie głowy.) Dlatego proste strony internetowe są naukowo lepsze.
Odpowiednia ilość białego miejsca sprawia, że strona internetowa wygląda „czysto”. Chociaż czysty projekt jest kluczowy, aby przekazać jasny komunikat, nie oznacza to tylko mniejszej ilości treści.
Przejrzysty projekt najlepiej wykorzystuje przestrzeń, w której się znajduje. Aby stworzyć przejrzysty projekt witryny, musisz wiedzieć, jak komunikować się wyraźnie, mądrze używając białych przestrzeni. Made.com dobrze wykorzystuje spacje:
Precyzyjne wykorzystanie białej przestrzeni ułatwia skupienie się na głównym przekazie i wizualizacjach, a tekst treści jest łatwy do odczytania. Ogólnie rzecz biorąc, biała przestrzeń promuje elegancję i wyrafinowanie, poprawia czytelność i pobudza koncentrację.
Przeczytaj więcej o białej przestrzeni i prostocie.
8. Brzytwa Ockhama
Po otrzymaniu kilku konkurencyjnych hipotez brzytwa Ockhama nakłania cię do wybrania tej, która przyjmuje najmniej założeń, a tym samym oferuje najprostsze wyjaśnienie. Ujmując to w kontekście projektowania stron internetowych, Occam's Razor przekonuje, że najprostsze rozwiązanie jest zwykle najlepsze.
W poście o swoich doświadczeniach z Angelpadem zespół Pipedrive pisze:
Zespół i mentorzy Angelpad stawiali przed nami wiele wyzwań. „Masz zbyt wiele rzeczy na swojej stronie głównej” było czymś, z czym początkowo się nie zgadzaliśmy, ale z przyjemnością testujemy. I okazało się, że rzeczywiście się myliliśmy. Usunęliśmy 80% treści i zostawiliśmy jeden przycisk rejestracji i jeden link Dowiedz się więcej na stronie głównej. Konwersja do rejestracji wzrosła o 300%.
Nie chodzi tylko o wygląd, ale także o to, jak to działa. Niektóre firmy — takie jak 37Signals — przekształciły „prosty” w model biznesowy. Oto cytat z książki Rework, napisanej przez założycieli Jasona Frieda:
Wiele osób nas nienawidzi, ponieważ nasze produkty robią mniej niż konkurencja. Są obrażeni, gdy odmawiamy włączenia ich funkcji zwierzaka. Ale jesteśmy równie dumni z tego, czego nie robią nasze produkty, jak z tego, co robią. Projektujemy je tak, aby były proste, ponieważ uważamy, że większość oprogramowania jest zbyt złożona: za dużo funkcji, za dużo przycisków, za dużo zamieszania.
Prosty, minimalistyczny design nie gwarantuje, że projekt się sprawdzi. Z mojego doświadczenia wynika jednak, że prostota jest zawsze lepsza niż jej przeciwieństwo — dlatego powinniśmy dążyć do uproszczenia naszych projektów internetowych.
Wniosek
Efektywne projektowanie stron internetowych i sztuka to nie to samo. Ale wiele zasad psychologicznych i projektowych ma zastosowanie do stron internetowych. Możesz zaprojektować świetną witrynę internetową, stosując odpowiednie aspekty tych przepisów do układu, typografii i obrazów.
Projektuj z myślą o użytkowniku i celach biznesowych. Dobry projekt strony internetowej może zapewnić estetyczne i satysfakcjonujące finansowo wyniki.