Pierwsze wrażenia mają znaczenie: dlaczego świetny projekt wizualny jest niezbędny

Opublikowany: 2021-07-22

Ludzie dokonują szybkich osądów. Wyrobienie sobie pierwszego wrażenia o osobie zajmuje tylko 1/10 sekundy. Strony internetowe nie różnią się.

Użytkownicy potrzebują około 50 milisekund (ms) (czyli 0,05 sekundy), aby wyrobić sobie opinię o Twojej witrynie, która decyduje o tym, czy zostaną, czy opuszczą.

Ta liczba pochodzi z konkretnych badań. W pierwszym badaniu uczestnicy dwukrotnie oceniali atrakcyjność wizualną prezentowanych stron internetowych na 500 ms każda. W kolejnym badaniu skrócili czas ekspozycji do 50 ms.

Przez cały czas oceny atrakcyjności wizualnej silnie korelowały z jednej fazy do następnej, podobnie jak korelacje między warunkami 50 ms i 500 ms. W ten sposób atrakcyjność wizualną można ocenić w ciągu 50 ms, co sugeruje, że masz około 50 ms na zrobienie dobrego pierwszego wrażenia na swojej stronie internetowej.

To pierwsze wrażenie zależy od wielu czynników: struktury, kolorów, odstępów, symetrii, ilości tekstu, czcionek i innych. Ten post:

  • Szczegółowe badania na stronach internetowych i pierwsze wrażenia.
  • Pokazuje, jak stworzyć projekt wizualny, aby poprawić pierwsze wrażenie.

Uwaga: wszystkie poniższe zrzuty ekranu witryny służą wyłącznie do celów ilustracyjnych .

Badania na stronach internetowych i pierwsze wrażenia

Użytkownicy tworzą opinie projektowe w 17 ms.

Kilka lat temu Google potwierdził liczbę 50 ms w swoich własnych badaniach. W rzeczywistości, zgodnie z ich badaniem, niektóre opinie pojawiają się w ciągu 17 ms, chociaż wpływ na niektóre czynniki projektowe był mniej wyraźny.

Kluczowym wnioskiem z ich badania było to, że strony internetowe o niskiej złożoności wizualnej i wysokiej prototypowości (jak reprezentatywny projekt wygląda dla określonej kategorii stron internetowych) były postrzegane jako bardzo atrakcyjne.

kwadratowy przykład prototypowej strony głównej
Ludzie mają oczekiwania co do tego, jak powinna wyglądać strona internetowa. Odejście od nich jest ryzykowne, bez względu na to, jak pomysłowy lub uderzający projekt.

Kluczowy wniosek: spraw, aby Twój projekt był prosty i znajomy. Postępuj zgodnie z konwencjami. Ludzie mają stałe wyobrażenie o tym, jak powinna wyglądać witryna e-commerce. Jeśli zdecydujesz się na innowacyjne, niekonwencjonalne układy, ludzie będą mniej skłonni je polubić.

Uwaga: zapoznaj się z mnóstwem wskazówek i pomysłów dotyczących e-commerce w naszym obszernym raporcie (247 wytycznych dotyczących e-commerce).

Potrzeba 2,6 sekundy, aby oczy skupiły się na kluczowych obszarach strony internetowej.

W ciągu 2,6 sekundy wzrok użytkownika trafia na obszar witryny, który ma największy wpływ na jego pierwsze wrażenie.

Badacze monitorowali ruchy oczu uczniów podczas skanowania stron internetowych. Następnie naukowcy przeanalizowali dane śledzenia wzroku, aby określić, ile czasu zajęło uczniom skupienie się na określonych sekcjach strony, takich jak menu , logo, obrazy i ikony mediów społecznościowych — zanim przejdą do innej sekcji.

Odkryli, że im lepsze pierwsze wrażenie, im dłużej uczestnicy pozostali na stronie.

  • 21 najlepszych pomysłów na testy A/B w e-commerce

    przez CXL

    Popraw swoje pierwsze wrażenie, testując, co działa. Oto 21 najlepszych pomysłów na testowanie e-commerce pochodzących z badań.

  • To pole służy do celów walidacji i należy je pozostawić bez zmian.
przykład badania eyetrackingowego pierwszego wrażenia na stronie internetowej
Badanie podzieliło witrynę na sześć sekcji, a następnie monitorowało ruchy gałek ocznych uczniów. (Źródło obrazu)

Sześć sekcji serwisu, które cieszyły się największym zainteresowaniem widzów, to:

  1. Logo instytucji. Użytkownicy spędzili 6,48 sekundy, skupiając się na tym obszarze, zanim ruszyli dalej.
  2. Główne menu nawigacyjne. Prawie tak samo popularne jak logo, badani spędzali na przeglądaniu menu średnio 6,44 sekundy.
  3. Pole wyszukiwania . Użytkownicy skupili się na nieco ponad 6 sekund.
  4. Główny obraz witryny. Oczy użytkowników fiksowały się średnio na 5,94 sekundy.
  5. Pisemna treść witryny . Użytkownicy spędzili około 5,59 sekundy.
  6. Dno witryny . Użytkownicy spędzili około 5,25 sekundy.

Kluczowy wniosek: dobre pierwsze wrażenie prowadzi do dłuższej wizyty. Upewnij się, że sześć wymienionych tutaj elementów wygląda świetnie.

Pierwsze wrażenia są w 94% związane z designem.

Brytyjscy badacze przeanalizowali, w jaki sposób różne czynniki związane z projektowaniem i zawartością informacji wpływają na zaufanie do internetowych witryn zdrowotnych. Badanie wyraźnie pokazało, że wygląd i styl strony internetowej był głównym motorem pierwszych wrażeń.

przykład czystego projektu strony internetowej
Brytyjskie badanie wykazało, że większość krytyków witryn internetowych opierała się na postrzeganiu projektu witryny, a nie jej zawartości.

Spośród wszystkich informacji zwrotnych od uczestników testu, 94% dotyczyło projektowania:

  • Złożony;
  • Układ zajęty;
  • Brak pomocy nawigacyjnych;
  • Nudne projektowanie stron internetowych;
  • Użycie koloru;
  • Wyskakujące reklamy;
  • Powolne wprowadzanie na stronę;
  • Mały druk;
  • Za dużo tekstu;
  • Wygląd i styl korporacyjny;
  • Słabe możliwości wyszukiwania.

Tylko 6% opinii dotyczyło samej treści. Atrakcyjność wizualna i nawigacja strony miały największy wpływ na pierwsze wrażenia użytkowników na stronie.

Jednocześnie kiepski projekt interfejsu wiązał się z szybkim odrzuceniem i nieufnością do strony internetowej. Gdy uczestnikom jakiś aspekt projektu nie podobał się, cała witryna była rzadko eksplorowana poza stroną główną.

Podobne wyniki uzyskano w badaniu Consumer WebWatch, przeprowadzonym przez ekspertów ds. wiarygodności z Uniwersytetu Stanforda. Odkryli, że to, co ludzie mówią o tym, jak oceniają zaufanie do strony internetowej i jak naprawdę to robią, są różne.

Dane pokazały, że przeciętny konsument zwracał znacznie większą uwagę na powierzchowne aspekty strony, takie jak wskazówki wizualne, niż na jej zawartość. Na przykład prawie połowa wszystkich konsumentów (46,1%) oceniła wiarygodność witryn częściowo w oparciu o atrakcyjność szaty graficznej, w tym układu, typografii, rozmiaru czcionki i schematów kolorystycznych.

Kluczowy wniosek: świetny design sprawia, że ​​ludzie Ci ufają i pozostają w pobliżu. Kiepski projekt powoduje nieufność i sprawia, że ​​ludzie odchodzą.

W przypadku pierwszego wrażenia atrakcyjność wizualna przewyższa nawet użyteczność.

W badaniu zbadano wpływ atrakcyjności wizualnej i użyteczności na wydajność użytkownika i satysfakcję ze strony internetowej.

Użytkownicy wykonywali różne zadania na stronach internetowych, które różniły się atrakcyjnością wizualną (wysoką i niską) oraz użytecznością (wysoką i niską). Wyniki pokazały, że na pierwsze wrażenia największy wpływ ma atrakcyjność wizualna witryny.

Użytkownicy wystawili wysokie „oceny użyteczności i zainteresowania” witrynom o wysokiej atrakcyjności i niskie „oceny użyteczności i zainteresowania” witrynom z Niska apel. Użyteczność witryny nie miała znaczącego wpływu na postrzeganie przez użytkowników witryny, która nie jest atrakcyjna, nawet po pomyślnym korzystaniu z witryny.

Kluczowy wniosek: zainwestuj w design. To jest najważniejsze dla przyciągnięcia użytkowników. Zabawne, że świetny projekt wizualny doprowadzi do wyższych ocen użyteczności, a rzeczywista użyteczność będzie miała znacznie mniejsze znaczenie.

Pozytywne pierwsze wrażenie może zwiększyć ogólną satysfakcję.

W eksperymencie przeprowadzonym w celu zbadania wpływu oczekiwań dotyczących produktu na subiektywne oceny użyteczności uczestnicy przed testem użyteczności przeczytali pozytywną lub negatywną recenzję produktu dotyczącą nowatorskiego urządzenia mobilnego. Grupa kontrolna nic nie czytała.

urządzenie mobilne wykorzystywane w badaniach torowania z pozytywnymi recenzjami produktów.
Urządzenie użyte w badaniu. Pozytywne recenzje produktów skłaniały użytkowników do bardziej pozytywnych doświadczeń, nawet jeśli nie udało im się ukończyć przydzielonego zadania.

Badanie ujawniło zaskakująco silny wpływ pozytywnych oczekiwań na subiektywne oceny poeksperymentalne. Uczestnicy, którzy przeczytali pozytywną recenzję, dali urządzeniu znacznie lepsze oceny po eksperymencie niż grupy z negatywną pierwszą i bez pierwszej.

Ten wzmacniający efekt pozytywnej liczby pierwszorazowej utrzymywał się nawet w warunkach trudnego zadania, kiedy użytkownicy nie wykonywali większości zadań.

Kluczowe wnioski: jeśli użytkownicy „od razu” polubią Twoją witrynę, zmniejszą ci trochę czasu na czkawkę. Ten rodzaj torowania może działać również w drugą stronę: A n egatywny pierwsze wrażenie zmniejsza ogólną satysfakcję z Twojej witryny.

Więc jeśli chcesz zrobić dobre wrażenie, od czego najlepiej zacząć?

Jak zrobić świetne pierwsze wrażenie dzięki projektowi wizualnemu

1. Wyróżnij swoją witrynę (i firmę) swoim projektem.

Czy jesteś szykowna, głupia, seksowna, bystra, inteligentna, klasyczna czy co? Czym różnisz się od konkurencji? Czy komunikujesz to tak szybko, jak to możliwe, za pomocą typografii, obrazów i projektu na swojej stronie internetowej?

Istnieje równowaga między unikaniem „innowacyjnego” projektowania — które może zniechęcić konsumentów — a poszukiwaniem unikalnego stylu wizualnego. Zbyt często firmy z tej samej branży przyjmują podejście „ja też” w estetyce projektowania.

Czasami konkurencyjne witryny są tak podobne, że jeśli usuniesz logo z nagłówka witryny, odróżnienie jednej witryny od drugiej byłoby prawie niemożliwe.

Z tego, co zauważyłem, dzieje się tak z dwóch głównych powodów:

  1. Wewnętrzna rozmowa o estetyce designu sprowadza się do rozmowy o cechach, a nie o budowaniu wyraźnej tożsamości wizualnej.
  2. Przyjęto cechy i estetykę, które „wyglądają, jakby działały” w konkursie.

Oczywiście po uruchomieniu nowej witryny wszyscy są zbyt zajęci przybijaniem sobie piątki, by zauważyć, że nowy projekt jest niemal wierną kopią konkurent, lub że zupełnie zapomniałeś zapytać obecnych klientów, dlaczego w ogóle lubili robić zakupy w Twojej firmie.

Jeśli chcesz bardziej wyróżnić swoją komunikację wizualną, ale nie wiesz od czego zacząć, sprawdź Technikę Zaltman Metaphor Elicitation Technique i zastosuj ją w swoich ankietach jakościowych. To może pomóc zaprojektować pierwsze wrażenie, że przemawia do podstawowych wartości swojej marki bez alienacji odwiedzających.

Technika ZMET w badaniach marketingowych od Taylana Demirkayi

„Tożsamość marki” to nie tylko delikatna rzecz, którą można przetasować. Cheskin Research & Studio Archetype już w 1999 roku odkryło, że sześć najważniejszych czynników budujących zaufanie w firmie e-commerce to:

  • Marka;
  • Nawigacja;
  • Spełnienie;
  • Prezentacja;
  • Najnowsza technologia;
  • Logo bezpieczeństwa.

Pomyśl o tym przez chwilę. Jeśli pierwsze wrażenie jest takie, że Twoja witryna jest nie do odróżnienia od innych witryn, dlaczego ktoś miałby przeglądać Twoje strony produktów, nie mówiąc już o wyborze Ciebie spośród konkurencji?

Oto przykład: wpisałem w Google „skórzaną kurtkę”, aby sprawdzić, czy rozróżnienie wizualne i ogólne pierwsze wrażenie byłyby problemem podczas losowego wyszukiwania. Były to pierwsze trzy wyniki:

Czy coś oddziela te trzy witryny? Niezupełnie, mimo że nie dzielą dokładnie tej samej grupy demograficznej.

Zajęło mi trochę czasu przewijanie wyników wyszukiwania, zanim znalazłem jakąkolwiek stronę, która nie wyglądała jak te powyżej, w końcu natknąłem się na Bomboogie. Nie da się ukryć, że strona różni się od konkurencji:

W przeciwieństwie do innych witryn, strona natychmiast wywołuje inne wrażenie — nie jest to firma, która produkuje delikatne, modne kurtki. Ich kurtki są „inspirowane kurtkami używanymi przez lotników”, a strona wygląda na część.

Lata temu, kiedy po raz pierwszy przeprowadziłem te badania, najbardziej charakterystyczną stroną, którą znalazłem, był Schott. Chociaż zrezygnowałbym z ich suwaka obrazu, nawigacji po napojach gazowanych i wielu fałszywych tekstur, w projekcie był urok, który wywarł silne pierwsze wrażenie, zwłaszcza biorąc pod uwagę, że jest to stara marka.

Schott

Możesz wyczuć charakter i emocje, i zorientować się, czy są godne zaufania, czy nie, o co chodzi w całym pierwszym wrażeniu.

Trend projektowy również dogonił ich i teraz wyglądają znacznie bardziej jak każda inna witryna:

Shopify stworzył listę 100 pięknych projektów e-commerce, które przedstawiają firmy z wyraźnym pierwszym wrażeniem.

Kluczowe wnioski : możesz (i powinieneś) komunikować unikalną tożsamość marki, nie będąc na tyle innowacyjnym, by dezorientować lub denerwować użytkowników.

2. Zainspiruj odwiedzających witrynę do stworzenia silniejszego pierwszego wrażenie.

Badanie dotyczące roli pierwszych wrażeń w serwisach turystycznych wykazało, że elementy związane z inspiracją miały największy wpływ na pierwsze wrażenie s.

Sugeruje to, że atrakcyjne wizualnie bodźce są ważnym narzędziem zachęcającym ludzi do dłuższego pozostawania w witrynie, a tym samym przekształcania większej liczby odwiedzających w kupujących.

inspirujący widok natury na chilijskiej stronie turystycznej

Użyteczność była drugim najważniejszym czynnikiem wpływającym na tworzenie pierwszego wrażenia, a za nim wiarygodność.

Podsumowując, mówi nam to, że podróżni chcą zainspirować się miejscem docelowym (zdjęcia). Nie chcą marnować energii psychicznej na zastanawianie się (użyteczność) i chcą mieć pewność, że dostawca usług turystycznych jest legalny (wiarygodność).

Kluczowy wniosek: jeśli sprzedajesz marzenie (np. pomysł wyjazdu na wakacje do Chile), inspirująca fotografia jest wiodącym twórcą pierwszego wrażenia.

3. Upewnij się, że obszar nad zakładką kołysze się.

Na przestrzeni lat ta wyżej wymieniona kwestia była przedmiotem gorących dyskusji. Badania wskazują, że ludzie nie mają problemu z przewijaniem i w rzeczywistości wolą todziałowy treść na wiele stron. Co to ma wspólnego z pierwszym wrażeniem?

9 zabójców wiarygodności stron internetowych

Autor: Alex Birkett

Dowiedz się, jak stworzyć stronę internetową, która wzbudza zaufanie, a nie sceptycyzm — która wspomaga zakup, a nie go odstrasza.

  • To pole służy do celów walidacji i należy je pozostawić bez zmian.

Oto nowy sposób myślenia o powyższym problemie: musi być najlepszą częścią Twojej witryny. Pierwsze wrażenia powstają w 0,05 sekundy. W tym czasie użytkownicy nie będą przewijać w dół.

Dlatego to, co widzą natychmiast bez przewijania, decyduje o tym, czy kiedykolwiek przewiną w dół. Pamiętając o tym…

Zwróć szczególną uwagę na swoją nawigację.

przykład przejrzystej nawigacji w witrynie

Liczne badania heatmap wykazały, że nawigacja jest zazwyczaj jednym z pierwszych i najczęściej oglądanych obszarów witryny. Ale poza typowymi kategoriami, co należy uwzględnić ?

Według badania Business Insidera, dlaczego ludzie porzucają koszyki, 25% osób stwierdziło, że „strona jest zbyt skomplikowana” (tj. nawigacja jest trudna w obsłudze), a blisko 60% zauważyło „ukryte koszty” (tj. koszty wysyłki ) jako główny powód, dla którego odeszli bez pa ying .

wykres pokazujący, dlaczego kupujący wychodzą bez płacenia w sklepie e-commerce
Ukryte koszty i skomplikowane strony internetowe to dwa kluczowe powody, dla których użytkownicy opuszczają strony internetowe bez płacenia.

W innym badaniu przeprowadzonym przez eConsultancy odwiedzający zapytani o kupowanie w nieznanej witrynie e-commerce zauważyli, że „profesjonalny projekt”, „witryna zawiera znane marki” i „widoczne dane kontaktowe” wpłynęły na ich decyzję o zakupie (lub niekupowaniu). ).

wyniki badania dotyczące zakupów u sprzedawcy, którego nie znasz.

Dobra robota, nawigacja w witrynie może zawierać niektóre lub wszystkie elementy, których nieobecność zniechęca odwiedzających do zakupów.

Wystarczy spojrzeć na to, ile jest komunikowane w nawigacji jednej z moich ulubionych witryn, ThinkGeek, bez wchodzenia w zawartość witryny:

nawigacja w witrynie, która zawiera wiele cennych informacji.

Bez konieczności polowania za dużo, łatwo znaleźć:

  • Czas wrażliwy promocje;
  • Wiele sposobów na głębsze poruszanie się po witrynie (kategorie, zainteresowania, wyszukiwanie);
  • Nowe, Top i Exclusive produkty, a także wskazówka produktów, które niosą (prezenty, koszulki, elektronika, bony upominkowe);
  • Program nagród;
  • Produkty w sprzedaży;
  • Ich próg „bezpłatnej wysyłki”;
  • Dostępność obsługi klienta (za pomocą przycisków „Czat na żywo” i „Pomoc”).

Porównaj to z ekstremalnym przykładem, takim jak Zara, a zobaczysz, dlaczego jest to ważne:

przykład minimalistycznej nawigacji

Studium przypadku: Alight zwiększa liczbę wyszukiwań w witrynie o 16% i zakupy o 25%

Stary Alight

Alight (obecnie CurvyHQ) wiedział, że ich strona wydaje się przestarzała. Sprzedawca kobiet w dużych rozmiarach uwspółcześnił nawigację w całej witrynie.

Zwiększyli rozmiar paska wyszukiwania, usunęli symbol zaufania, włączyli kategorie „wyprzedaż” i „nowe” do różowego obszaru nawigacyjnego oraz wyjaśnili swoją propozycję wartości, a także inne drobne aktualizacje.

zaktualizowana nawigacja po stronie głównej z paskiem wyszukiwania

Rezultatem był wzrost wyszukiwań w witrynie o 16% i wzrost ogólnych zakupów o 25%, a wszystko to dzięki temu, że nawigacja jest częścią silnego pierwszego wrażenia.

Pierwsze wrażenia — na stronach internetowych lub w NBA — mogą trwać latami.

Badania przeprowadzone przez ekonomistów Barry'ego Stawa i Ha Hoanga dotyczyły wpływu nakazu draftu w NBA. Obserwowali kariery graczy przez pięć lat po tym, jak zostali powołani. Pięć lat wystarczy, aby wykazać się na wiele sposobów, więc zlecenie draftu nie powinno odgrywać żadnej roli, prawda?

Źle. Według badania, czas gry, jaki otrzymują gracze, jest skorelowany z ich kolejnością draftu. Drużyny przyznawały więcej czasu na grę graczom z wysokimi draftami i dłużej ich zatrzymywały, nawet po kontrolowaniu występów zawodników na korcie, kontuzji, statusu handlowego, zajmowanej pozycji i innych czynników.

Każdy wzrost liczby draftów (tzn. uzyskanie dziewiątego draftu zamiast ósmego) skracał czas gry aż o 23 minuty. Co niewiarygodne, kolejność draftu nadal przewidywała czas gry przez piąty rok gracza w NBA, ostatni rok mierzony w badaniu. Zawodnicy wybrani w pierwszej rundzie mieli też dłuższe kariery; grali przez 3,5 roku dłużej niż reszta.

przykład strony głównej, która robi jasne, mocne pierwsze wrażenie

Inne badanie dotyczyło trwałości pierwszego wrażenia. Odkryła, że ​​nowe doświadczenia, które zaprzeczają pierwszemu wrażeniu, zostają „związane” z kontekstem, w którym powstały. Jednak pierwsze wrażenia wciąż dominują w innych kontekstach.

Nasz mózg przechowuje doświadczenia naruszające oczekiwania jako „wyjątki od reguły”. Zasada (tj. pierwsze wrażenie) jest traktowana jako ważna z wyjątkiem konkretnego kontekstu, w którym została naruszona.

Kluczowy wniosek: Jeśli pierwsze wrażenie jest negatywne, może to skutkować uprzedzeniem użytkownika przez lata.

Wniosek

Atrakcyjność wizualna ma znaczenie. Dużo. Moja rada: nigdy nie próbuj oszczędzać na projektowaniu. Wielokrotnie widziałem, jak „prosty” remont projektu spowodował znaczny wzrost konwersji.

Ludzie formułują swoją opinię o Twojej witrynie w milisekundach. Pierwsza sekunda w Twojej witrynie może mieć większe znaczenie niż wszystkie kolejne sekundy (jeśli w ogóle). Upewnij się, że jedna sekunda robi dobre pierwsze wrażenie.