Cititravel.pl. Strona główna: rotator czy baner statyczny?

87
Anna Sorbian | [email protected] Strona główna: rotator czy baner statyczny?

description

Prezentacja Anny Sorbian, Projektanta User Experience Design w Grupie Unity.

Transcript of Cititravel.pl. Strona główna: rotator czy baner statyczny?

Page 1: Cititravel.pl. Strona główna: rotator czy baner statyczny?

Anna Sorbian | [email protected]

Strona główna: rotator czy baner statyczny?

Page 2: Cititravel.pl. Strona główna: rotator czy baner statyczny?

„CZY ROTATOR ZASTĄPIĆ BANEREM STATYCZNYM?”

Page 3: Cititravel.pl. Strona główna: rotator czy baner statyczny?

UŻYTKOWNICY CITITRAVEL.PL

Co na to użytkownicy?

Page 4: Cititravel.pl. Strona główna: rotator czy baner statyczny?

GOSIA NA CITITRAVEL.PL

Gosia chce zobaczyć, czy może sobie

pozwolić na Egipt w sierpniu.

Page 5: Cititravel.pl. Strona główna: rotator czy baner statyczny?

GOSIA NA CITITRAVEL.PL

Gosia potrzebuje chwili, aby zrozumieć layout serwisu.

Page 6: Cititravel.pl. Strona główna: rotator czy baner statyczny?

GOSIA NA CITITRAVEL.PL

I od razu pomija irytujące ją reklamy.

Page 7: Cititravel.pl. Strona główna: rotator czy baner statyczny?

GOSIA NA CITITRAVEL.PL

Ok, załóżmy teraz, że tego nie zrobi ;)

Page 8: Cititravel.pl. Strona główna: rotator czy baner statyczny?

GOSIA NA CITITRAVEL.PL

I jej uwagę przyciągnie duuuży baner.

Page 9: Cititravel.pl. Strona główna: rotator czy baner statyczny?

GOSIA NA CITITRAVEL.PL

Niestety, treść banera zupełnie nie

odpowiada temu, co Gosia chce znaleźć.

Page 10: Cititravel.pl. Strona główna: rotator czy baner statyczny?

GOSIA NA CITITRAVEL.PL

Aby kontynuować prezentację,

załóżmy, że treść banera jednak ją zainteresuje.

Page 11: Cititravel.pl. Strona główna: rotator czy baner statyczny?

GOSIA NA CITITRAVEL.PL

Ale w momencie, gdy Gosia chce kliknąć w ofertę,

rotator przełącza panel.

Page 12: Cititravel.pl. Strona główna: rotator czy baner statyczny?

GOSIA NA CITITRAVEL.PL

Gosia widzi kolejną ofertę, ale wciąż myśli o tej poprzedniej,

w której czytanie się zaangażowała.

Page 13: Cititravel.pl. Strona główna: rotator czy baner statyczny?

Nie wie, czy do niej wrócić, czy czytać następną ofertę.

Zaczyna się irytować koniecznością podejmowania decyzji.

GOSIA NA CITITRAVEL.PL

Page 14: Cititravel.pl. Strona główna: rotator czy baner statyczny?

GOSIA NA CITITRAVEL.PL

Gosia chce jednak powrócić do poprzedniej oferty.

Tylko jak ma to zrobić?

Page 15: Cititravel.pl. Strona główna: rotator czy baner statyczny?

GOSIA NA CITITRAVEL.PL

Gosia nie wie, że ma szukać kropeczek u dołu strony.

Strzałek na przy banerze nie ma.

Page 16: Cititravel.pl. Strona główna: rotator czy baner statyczny?

GOSIA NA CITITRAVEL.PL

Jeżeli nie zrozumie od razu jak nawigować, opuści stronę.

Albo kliknie wstecz, by „wrócić” do pierwszego panelu.

I wyjdzie tym samym z serwisu.

Page 17: Cititravel.pl. Strona główna: rotator czy baner statyczny?

GOSIA NA CITITRAVEL.PL

Może też czekać na rotację panelu.

Ale Gosia się śpieszy.

Podobnie jak inni użytkownicy.

Page 18: Cititravel.pl. Strona główna: rotator czy baner statyczny?

KONTROWERSJE

A computer scientist and cognitive scientist,

PhD studies in Neural Networks and Artificial

Intelligence, author of the bestselling

book Landing Page Optimization, CEO of

SiteTuners.

Page 19: Cititravel.pl. Strona główna: rotator czy baner statyczny?

SPIS TREŚCI

A. ROTATOR JAKO ELEMENT INTERFEJSU

B. KORZYŚCI W ZAKRESIE UX

C. PROBLEMY W ZAKRESIE UX

D. ROTATOR - DOBRE PRAKTYKI UX

E. INNE ROZWIĄZANIA DLA PRZESTRZENI ATF

F. REKOMENDACJE

Page 20: Cititravel.pl. Strona główna: rotator czy baner statyczny?

A. ROTATOR JAKO ELEMENT INTERFEJSU

1. Baner wielopanelowy, prezentujący każdy z paneli osobno.

2. Zajmuje istotną część strony powyżej załamania strony, tj. „above the fold”.

3. Zawiera wewnętrzną nawigację, która pozwala na przełączanie paneli.

4. Każdy z paneli rotatora składa się z obrazu i niewielkiej ilości tekstu.

5. Wykorzystywany jest dla prezentacji misji marki, istotnych informacji na temat

oferty oraz aktualnych promocji.

Page 21: Cititravel.pl. Strona główna: rotator czy baner statyczny?

ROTATOR?

Page 22: Cititravel.pl. Strona główna: rotator czy baner statyczny?

PROBLEMYROTATOR W UI

Page 23: Cititravel.pl. Strona główna: rotator czy baner statyczny?

PROBLEMYROTATOR W UI

Page 24: Cititravel.pl. Strona główna: rotator czy baner statyczny?

B. KORZYŚCI W ZAKRESIE UX

1. PREZENTACJA NAJWAŻNIEJSZYCH TREŚCI

2. WYRÓŻNIENIE KILKU TEMATÓW

3. ZACHĘTA DO EKSPLORACJI TREŚCI STRONY

4. „NOWOCZESNY” WYGLĄD

Page 25: Cititravel.pl. Strona główna: rotator czy baner statyczny?

• Rotator zwraca uwagę użytkownika ku najważniejszym

treściom.

• Pełni rolę wizytówki marki.

• Użytkownicy podczas badań byli zdania, że treść paneli

rotatora została wyróżniona ze względu na jej wagę.

PROBLEMY1. PREZENTACJA NAJWAŻNIEJSZYCH TREŚCI KORZYŚCI

Page 26: Cititravel.pl. Strona główna: rotator czy baner statyczny?

• Rotator pozwala na prezentację w górnej części strony

kilku istotnych tematów.

• Właściciel strony jest zwolniony z podejmowania

trudnej decyzji o wyborze tylko jednej treści, która

zajmie szczególne miejsce „above the fold”.

PROBLEMY2. WYRÓŻNIENIE KILKU TEMATÓW KORZYŚCI

Page 27: Cititravel.pl. Strona główna: rotator czy baner statyczny?

• Użytkownicy chętnie korzystają z rotatora podczas

zadań, w trakcie których mają się swobodnie zapoznać

ze stroną.

• Rotator przyciąga uwagę i zachęca do interakcji osoby,

które nie mają określonego celu pobytu na stronie.

PROBLEMY3. ZACHĘTA DO EKSPLORACJI STRONY

http://teced.com/2013/09/24/jumping-on-a-user-experience-carousel-ride/

KORZYŚCI

Page 28: Cititravel.pl. Strona główna: rotator czy baner statyczny?

• Użytkownicy postrzegają strony z ruchomymi

elementami jako bardziej nowoczesne i zgodne z

„modnymi” trendami.

• Rotator może pełnić rolę ciekawego „gadżetu” i być

wykorzystywany w celach marketingowych.

PROBLEMY4. „NOWOCZESNY” WYGLĄD KORZYŚCI

Page 29: Cititravel.pl. Strona główna: rotator czy baner statyczny?

PROBLEMYPROBLEM?

Founder & CEO at

WiderFunnel, Author, Keynote

Speaker, Conversion

Optimization

Page 30: Cititravel.pl. Strona główna: rotator czy baner statyczny?

C. PROBLEMY W ZAKRESIE UX

1. BRAK KONTROLI

2. (NIE)DOSTĘPNOŚĆ

3. TEMPO CZYTANIA UŻYTKOWNIKÓW

4. OGRANICZONY KONTAKT UŻYTKOWNIKA Z TREŚCIĄ

5. SKOJARZENIA Z BANEREM REKLAMOWYM – REKLAMA?

Page 31: Cititravel.pl. Strona główna: rotator czy baner statyczny?

C. PROBLEMY W ZAKRESIE UX C.D.

6. OPANOWANIE NAWIGACJI W OBRĘBIE ROTATORA

7. NIEADEKWATNOŚĆ TREŚCI

8. DEKONCENTRACJA

9. GŁÓWNA TREŚĆ BELOW THE FOLD

10.POZOSTAŁE PROBLEMY

Page 32: Cititravel.pl. Strona główna: rotator czy baner statyczny?

• Rotator o dynamicznie zmieniających się panelach

zachowuje się w sposób, w który użytkowników

zaskakuje.

• Użytkownicy irytują się, gdy tracą kontrolę nad

interfejsem – nie lubią elementów, nad którymi nie

panują.

PROBLEMY1. BRAK KONTROLI

Page 33: Cititravel.pl. Strona główna: rotator czy baner statyczny?

• Ruchome elementy są trudne do kliknięcia,

szczególnie dla użytkowników o niskiej sprawnosci

motorycznej.

• Problem ten dotyka także ludzi starszych, dla których

szybkie i precyzyjne klikanie często bywa

problemem.

• Czytniki dla osób niewidzących nie są

przystosowane do syntezowania treści z rotatorów.

2. (NIE)DOSTĘPNOŚĆ PROBLEMY

Page 34: Cititravel.pl. Strona główna: rotator czy baner statyczny?

• Użytkownicy irytują się, gdy nie mogą skończyć

czytać treści panelu, który przyciągnął ich uwagę (przy

automatycznie zmieniających się panelach).

• Znaczna część użytkowników czyta wolno i nie zdoła

ze zrozumieniem przeczytać treści panelu.

• Użytkownicy czytają wolniej w języku obcym .

3. TEMPO CZYTANIA

„(…) I didn't have

time to read it. It

keeps flashing too

quickly.„

http://www.nngroup.com/articles/auto-forwarding/

PROBLEMY

Page 35: Cititravel.pl. Strona główna: rotator czy baner statyczny?

„(…) the discount

deal is visible only

20% of the time.„

http://www.nngroup.com/articles/auto-

forwarding/

4. OGRANICZONY KONTAKT Z TREŚCIĄ

• Drastycznie spada szansa na wyświetlenie przez

użytkowników treści prezentowanej w obrębie rotatora.

Większość widzi tylko pierwszy panel.

• Ludzie nie czytają, tylko skanują!* Rotator nie nadaje się

do skanowania i jest pomijany.

• Ryzyko niewyświetlenia wszystkich paneli to ogranicza

korzyści płynące z rotatora, jako narzędzia do prezentacji

jednakowo ważnych, konkurujących ze sobą treści.

PROBLEMY

*Jakob Nielsen, 1997

Page 36: Cititravel.pl. Strona główna: rotator czy baner statyczny?

5. REKLAMA?

• Większość użytkowników niemal od razu interpretuje

ruchome elementy interfejsu jako reklamę.

• Efekt ten wzmacniany jest przez:

o bogatą szatę graficzną oraz

o duże rozmiary panelu rotatora.

• Treści, które przypominają reklamę, są coraz częściej

przez użytkowników ignorowane.

„(…) research

reveals that

animated ads get

looked at 27% of

the time.”http://www.nngroup.com/articles/designing

-effective-carousels/

PROBLEMY

Page 37: Cititravel.pl. Strona główna: rotator czy baner statyczny?

5. REKLAMA? C.D. PROBLEMY

Customer Experience

Delivery Manager

at EE, UK

Page 38: Cititravel.pl. Strona główna: rotator czy baner statyczny?

zjawisko ignorowania

obszarów przypominających

bannery reklamowe

5. REKLAMA? - BANNER BLINDNESS PROBLEMY

Page 39: Cititravel.pl. Strona główna: rotator czy baner statyczny?

• Użytkownik zanim zacznie czytać treść, będzie musiał

zidentyfikować karuzelę oraz odkryć zasady jej

działania, w tym nawigowania po niej.

• Dla wielu użytkowników może być to zbyt duże

obciążenie, co przyczyni się do zignorowania treści

zawartej w panelach karuzeli.

6. TRUDNOŚĆ W OPANOWANIU

„Instead of simply looking

at content on a page, users

are burdened with having

to identify the carousel and

then learning its controls,

conventions and behaviors.„

http://bradfrostweb.com/blog/post/carousels/

PROBLEMY

Page 40: Cititravel.pl. Strona główna: rotator czy baner statyczny?

• Panele w obrębie rotatora prezentują treści wybrane

przez twórców strony, które bardzo często nie są zgodne

z zainteresowaniem użytkownika.

• Często treści w panelach nie odnoszą się do celu, z

jakim użytkownik wchodzi na stronę.

• Treści w panelach są trudne w odbiorze ze względu na

prezentację bez kontekstu.

• Nieadekwatność obniża zaufanie użytkownika do strony.

7. NIEADEKWATNOŚĆ TREŚCI PROBLEMY

Page 41: Cititravel.pl. Strona główna: rotator czy baner statyczny?

• Panele zmieniające się dynamicznie rozpraszają

użytkownika i odwracają jego uwagę od celu, który

chciał zrealizować na stronie

• Istnieje niebezpieczeństwo, że rotator przyczyni się do

niesfinalizowania zakupu w sklepie internetowym.

8. DEKONCENTRACJA PROBLEMY

Page 42: Cititravel.pl. Strona główna: rotator czy baner statyczny?

• Główna treść strony zsunięta zostaje przy dużych

panelach rotatora poniżej zgięcia strony – użytkownik

zmuszony jest do scrollowania, aby do niej dotrzeć.

• Istnieje niebezpieczeństwo, że brak widocznej treści

zniechęci użytkowników do dalszego szukania i

przyczyni się do opuszczenia przez nich strony.

9. GŁÓWNA TREŚĆ BELOW THE FOLD PROBLEMY

Page 43: Cititravel.pl. Strona główna: rotator czy baner statyczny?

• Nie ma możliwości linkowania do konkretnego elementu

na rotatorze i przesłania go innej osobie:

www.bbc.co.uk/news/world-africa-14619799

• Karuzele zbudowane we Flash’u uniemożliwiają otwarcie

kolejno wyświetlanych elementów w innych zakładkach

przeglądarki.

10. POZOSTAŁE PROBLEMY PROBLEMY

Page 44: Cititravel.pl. Strona główna: rotator czy baner statyczny?

1. „OD RAZU WIDAĆ, ŻE TO ROTATOR”

2. GRUPOWANIE PODOBNYCH TREŚCI

3. SPÓJNY STYL GRAFICZNY

4. NAJWAŻNIEJSZE TREŚCI POZA ROTATOREM

5. ZAUWAŻALNA I ZROZUMIAŁA NAWIGACJA

D. ROTATORY – DOBRE PRAKTYKI UX

Page 45: Cititravel.pl. Strona główna: rotator czy baner statyczny?

6. NAWIGACJA WYGODNA MYSZKI ORAZ PALCA

7. ZAPEWNIENIE UŻYTKOWNIKOWI KONTROLI

8. OPTYMALIZACJA ŁADOWANIA DANYCH

9. OGRANICZONA ILOŚĆ PANELI

10. ATRAKCYJNOŚĆ WIZUALNA

D. ROTATORY – DOBRE PRAKTYKI UX C.D.

Page 46: Cititravel.pl. Strona główna: rotator czy baner statyczny?

• Funkcjonalność rotatora powinna być z łatwością

identyfikowana przez użytkownika

• Fakt, że rotator zawiera więcej paneli, niż ten, który

jest w danym momencie wyświetlany, powinien być

oczywisty.

• Można to osiągnąć poprzez zauważalne elementy

nawigacji, fragmenty kolejnych paneli, bądź

miniatury obrazów zawartych w kolejnych panelach.

1. „OD RAZU WIDAĆ, ŻE TO ROTATOR” DOBRE PRAKTYKI

Page 47: Cititravel.pl. Strona główna: rotator czy baner statyczny?

• Rotatory powinny prezentować na panelach podobną treść

– zestawienie komunikatów nie może wydawać się

użytkownikowi przypadkowe.

• Można grupować w nich np. oferty promocyjne, cele

organizacji, artykuły.

• Za pomocą rotatora możliwe jest wprowadzenie elementów

storytellingu, budującego wizerunek marki, zwracając

uwagę użytkownika na wartości wspierane przez brand.

2. GRUPOWANIE PODOBNYCH TREŚCI DOBRE PRAKTYKI

Page 48: Cititravel.pl. Strona główna: rotator czy baner statyczny?

2. GRUPOWANIE: AMAZON DOBRE PRAKTYKI

Rotatory (manualne)

promujące:

TYLKO Kindle

TYLKO jesienne

płaszcze

Page 49: Cititravel.pl. Strona główna: rotator czy baner statyczny?

3. SPÓJNY STYL GRAFICZNY DOBRE PRAKTYKI

• Rotatory powinny posługiwać się panelami o spójnym stylu

graficznym.

• Powinno unikać się wrażenia chaosu oraz poczucia

przypadkowości.

• Jednolita szata graficzna wniesie spokój w dynamiczne

środowisko strony z rotującymi panelami.

• Użytkownik zamiast oswajać się ze zmieniającą się,

różnorodną grafiką, skupi się na treści.

Page 50: Cititravel.pl. Strona główna: rotator czy baner statyczny?

4. NAJWAŻNIEJSZE TREŚCI POZA ROTATOREM DOBRE PRAKTYKI

• Rotatory powinny stanowić dodatek do treści oferty

głównej strony.

• Powinno unikać się umieszczania w nich

najważniejszych dla właścicieli strony treści.

• Pozwoli to na redukcję ryzyka związanego z

pominięciem przez użytkownika treści, które są

kluczowe dla osiągnięcia zakładanych celów

biznesowych.

Page 51: Cititravel.pl. Strona główna: rotator czy baner statyczny?

• Elementy nawigacji muszą być łatwo zauważalne i

identyfikowane jako służące do przełączania paneli.

• Działanie nawigacji musi być zrozumiałe – zalecane

jest stosowanie strzałek.

• „Kropeczki” nawigacyjne są niewystarczające.

Bardzo niewiele użytkowników je dostrzega, a jeszcze

mniejsza ilość z nich korzysta.

5. NAWIGACJA: ZAUWAŻALNA I ZROZUMIAŁA

„Even iOS (where this

design pattern was

popularized) users skipped

right over and commented

on the fact that they had

no idea that there was

more content available”

http://bradfrostweb.com/blog/post/carousels/

DOBRE PRAKTYKI

Page 52: Cititravel.pl. Strona główna: rotator czy baner statyczny?

• Elementy nawigacji dostosowane do nawigowania

zarówno myszką, jak i za pomocą palca na ekranach

dotykowych

• Obszar do kliknięcia powinien być wyraźnie oznaczony i

zapewniać swobodę przy trafianiu, zwłaszcza palcowi.

• Obszar klikalny powinien być odpowiednio szeroki, aby

nawet mało precyzyjne wskazanie powodowało

oczekiwaną przez użytkownika akcję.

6. NAWIGACJA: DLA MYSZKI I PALCA DOBRE PRAKTYKI

Page 53: Cititravel.pl. Strona główna: rotator czy baner statyczny?

NAWIGACJA - PRZYKŁAD DOBRE PRAKTYKI

on hover

Wyraźny kierunek

nawigacji,

opatrzony etykietą

Czytelna prezentacja

informacji na temat

miejsca, w którym

się znajdujemy

Wielkość elementów

nawigacji pozwala na

komfortowe

„tapnięcie” palcem

Page 54: Cititravel.pl. Strona główna: rotator czy baner statyczny?

NAWIGACJA - PRZYKŁAD DOBRE PRAKTYKI

Strzałka nawigacji osadzona

jest w panelu rotatora, nie zaś

poza jego obszarem. Zapewnia

to kontekst dla zrozumienia

działania rotatora.

(zasada bliskości w psychologii gestaltu)

Page 55: Cititravel.pl. Strona główna: rotator czy baner statyczny?

NAWIGACJA - PRZYKŁAD DOBRE PRAKTYKI

Wskazanie końca rotatora –

zapobiegnie to nieświadomemu

przeglądaniu tych samych

treści.

+

Rotatory nie zmieniające paneli

samoczynnie powinny

umożliwić powrót do początku.

Page 56: Cititravel.pl. Strona główna: rotator czy baner statyczny?

7. ZAPEWNIENIE UŻYTKOWNIKOWI KONTROLI

- ROTATORY STEROWANE MANUALNIE

• Wskazane jest rozważne stosowanie rotatorów

samoczynnie zmieniających panele

• Rotatory powinny pokazywać nowy panel tylko wówczas,

gdy poprosi o to użytkownik.

• Jeżeli użytkownik nie wywoła akcji, panel nie powinien

się ruszać: powinien dać szanse wolno czytającemu

użytkownikowi na zapoznanie się z treścią.

DOBRE PRAKTYKI

Page 57: Cititravel.pl. Strona główna: rotator czy baner statyczny?

7. ZAPEWNIENIE KONTROLI C.D.

- PANELE SAMOCZYNNIE ROTUJĄCE

Niektóre serwisy wykorzystują

banery samoczynnie rotujące,

wyraźnie umożliwiając jednak

wstrzymania rotowania i obsługę

manualną.

DOBRE PRAKTYKI

Page 58: Cititravel.pl. Strona główna: rotator czy baner statyczny?

7. ZAPEWNIENIE KONTROLI C.D.

- PANELE SAMOCZYNNIE ROTUJĄCEDOBRE PRAKTYKI

Zapewniony jest podgląd

kolejnego panelu rotatora

Panel nie rotuje,

jeżeli znajduje się

nad nim kursor

Page 59: Cititravel.pl. Strona główna: rotator czy baner statyczny?

7. ZAPEWNIENIE KONTROLI C.D.

- PANELE SAMOCZYNNIE ROTUJĄCEDOBRE PRAKTYKI

Licznik umieszczony w

nawigacji wskazuje

moment, w którym panel

zostanie przełączony

Page 60: Cititravel.pl. Strona główna: rotator czy baner statyczny?

7. ZAPEWNIENIE KONTROLI C.D.

- PANELE SAMOCZYNNIE ROTUJĄCEDOBRE PRAKTYKI

Jeżeli użytkownik rozpoczął

nawigować manualnie, rotator

wstrzymuje automatyczną

rotację paneli, reagując już tylko

na kolejne akcje użytkownika.

Poprawny przykład: http://www.nestle.com/ (screen)Niepoprawnie już jednak: http://www.nestle.pl/pl

Page 61: Cititravel.pl. Strona główna: rotator czy baner statyczny?

8. OPTYMALIZACJA ŁADOWANIA DANYCH

• Zadbaj o to, aby w rotatorach nieautomatycznych

wszystkie panele nie były ładowane jednocześnie.

Przyspieszy to czas ładowania strony.

• Większość użytkowników i tak nie dotrze na kolejne

panele, więc nie warto poświęcać tempa ładowania się

strony jedynie dla komfortu mniejszości.

DOBRE PRAKTYKI

Page 62: Cititravel.pl. Strona główna: rotator czy baner statyczny?

9. OGRANICZONA ILOŚĆ PANELI

• Zaleca się, aby ilość paneli nie przekraczała 5 (NN Group).

Inne badania sugerują ich redukcję do 4, a nawet 3.

• Nawet ci z użytkowników, którzy wejdą w interakcję z

rotatorem, nie dotrą do dalszych paneli.

• Użytkownik nie skupi się na treści większej ilości paneli.

• Mniejsza ilość paneli ułatwi powrót do konkretnej treści,

która użytkownik będzie chciał wyświetlić ponownie.

DOBRE PRAKTYKI

„Second, I might

suggest keeping the

number of features to

a maximum of four (or

better yet, three), as it

appears that as the

number of features

increases, the click-

throughs on sub-

features decreases

dramatically”

http://weedygarden.net/2013/01/carousel-stats/

Page 63: Cititravel.pl. Strona główna: rotator czy baner statyczny?

10. ATRAKCYJNOŚĆ WIZUALNA

• Komunikat rotatora powinien być w głównej mierze

wizualny.

• Uwagę użytkowników przyciągnie atrakcyjna grafika,

nie zaś bogaty opis.

• Zdjęcie powinno wypełniać prawie cały obszar rotatora,

towarzyszyć mu zaś powinno zrozumiałe i skuteczne

Call To Action.

DOBRE PRAKTYKI

Page 64: Cititravel.pl. Strona główna: rotator czy baner statyczny?

E. INNE ROZWIĄZANIA DLA PRZESTRZENI ATF

1. ROZBUDOWANIE NAWIGACJI

2. SEGMENTACJA KLIENTÓW

3. WSPARCIE GRAFIKĄ GŁÓWNEGO CTA

Page 65: Cititravel.pl. Strona główna: rotator czy baner statyczny?

1. ROZBUDOWANA NAWIGACJA ZAMIAST ROTATORA

• Uwydatnij najpopularniejsze kategorie

• Pomóż nowym użytkownikom w odkryć zakres oferty

dzięki dużym zdjęciom kategorii

• Pomóż w nawigacji stałym

bywalcom

Page 66: Cititravel.pl. Strona główna: rotator czy baner statyczny?

1. ROZBUDOWANA NAWIGACJA C.D. ZAMIAST ROTATORA

Page 67: Cititravel.pl. Strona główna: rotator czy baner statyczny?

2. SEGMENTACJA KLIENTÓW ZAMIAST ROTATORA

• Pozwól użytkownikowi odnaleźć ofertę pasującą do

jego potrzeb

• Zwróć się bezpośrednio

do poszczególnych

segmentów klientów i

pokaż, że znasz

ich potrzeby

Page 68: Cititravel.pl. Strona główna: rotator czy baner statyczny?

3. WSPARCIE GRAFIKĄ CALL TO ACTION ZAMIAST ROTATORA

• Wykorzystaj znajomość psychologii, aby statyczna

grafika wzmacniała siłę przekazu CTA

Page 69: Cititravel.pl. Strona główna: rotator czy baner statyczny?

F. PRAKTYKA I REKOMENDACJE

1. CO ROBIĄ OBECNIE INNI?

2. CASE STUDIES

3. PROPOZYCJE DLA CITITRAVEL.PL

Page 70: Cititravel.pl. Strona główna: rotator czy baner statyczny?

1. CO ROBIĄ OBECNIE INNI? PRAKTYKA

• Stosowanie rotatorów jest jeszcze bardzo popularne

• Najwięksi gracze, którzy dotychczas posiadali rotatory,

stopniowo z nich rezygnują (np. Microsoft,

Google Analytics)

• Idea strony głównej wyposażonej w „hero image” jest

obecnie najpopularniejszą formułą, coraz więcej brandów

decyduje się jednak na jego statyczną wersję

Page 71: Cititravel.pl. Strona główna: rotator czy baner statyczny?

2. CASE STUDY:

ROTATOR MANUALNY VS. AUTOMATYCZNYPRAKTYKA

ROTATOR MANUALNY

~ 1% osób kliknęło na rotator

84% na pierwszy panel

ok.4% na kolejne

ROTATOR AUTOMATYCZNY

~ 9% osób kliknęło na rotator

40% na pierwszy panel

na kolejne: 18%, 11%

http://weedygarden.net/2013/01/carousel-stats/

Na różnice miała jednak wpływ treść obu stron i rodzaj publiki.

Page 72: Cititravel.pl. Strona główna: rotator czy baner statyczny?

2. CASE STUDY:

PRAWIE NIKT NIE KLIKA NA ROTATORPRAKTYKA

Efekt: mniej niż 1% kliknięć!

http://searchenginelan

d.com/homepage-

sliders-are-bad-for-

seo-usability-163496

promocja webinarów i ksiąg dobrych praktyk.

Promocja usług

budowanie wizerunku marki

Page 73: Cititravel.pl. Strona główna: rotator czy baner statyczny?

2. CASE STUDY:

MNIEJ PANELI = LEPSZA KONWERSJAPRAKTYKA

Znaczny

spadek ilości

kliknięć na

dalsze panele

Wzrost ogólnej liczby

kliknięć na rotator po

redukcji paneli z 8 do 5

Page 74: Cititravel.pl. Strona główna: rotator czy baner statyczny?

2. CASE STUDY:

PAUZA MUSI BYĆ ŁATWO DOSTRZEGALNAPRAKTYKA

Ilość osób korzystających z

pauzy znacznie wzrosła, gdy

zwiększono jej wymiary

Page 75: Cititravel.pl. Strona główna: rotator czy baner statyczny?

2. CASE STUDY:

BANNER BLINDNESS + ROTACJAPRAKTYKA

„Czy Siemens ma jakieś

promocje na pralki?”

Baner

zmienia

ofertę co 5 s.

Uczestniczka badania nie

dostrzegła oferty, pomimo

tego, że oferta zajmowała

największy obszar na stronie.http://www.nngroup.com/articles/auto-forwarding/

Page 76: Cititravel.pl. Strona główna: rotator czy baner statyczny?

http://prezi.com/e9-zaikclehn/will-front-page-

carousels-improve-your-conversion-rate/

PRAKTYKA2. CASE STUDY: BANER VS. ROTATOR

Użytkownicy

zwracają wzrok

ku elementom

statycznym,

pomijając

ruchome panele

rotatora.

Użytkownicy

koncentrują

uwagę na treści

statycznego

banneru

Page 77: Cititravel.pl. Strona główna: rotator czy baner statyczny?

WNIOSEK?

Page 78: Cititravel.pl. Strona główna: rotator czy baner statyczny?

3. PROPOZYCJE DLA CITITRAVEL.PL

I. Statyczny hero image

II. Wyraźne CTA - niekonkurujące z obrazem w tle

III. Mniej tekstu na panelu, wyraźny font

IV. Obraz na panelu rotatora wspiera CTA

REKOMENDACJE

Page 79: Cititravel.pl. Strona główna: rotator czy baner statyczny?

3. PROPOZYCJE DLA CITITRAVEL.PL

CTA ginie w kompozycji

Rotujący baner,

który zniknie za 5

sekund

+

brak wyraźnych

strzałek nawigacji

+

brak pauzy

Rozbudowane copy

konkurujące z

odcieniami zdjęcia

Kierunek

aktywności postaci

odwodzi wzrok

od CTA

REKOMENDACJE

Page 80: Cititravel.pl. Strona główna: rotator czy baner statyczny?

3. PROPOZYCJE DLA CITITRAVEL.PL

Wyraźne CTA

statyczny

hero image

Krótkie, kontrastowe copy

niekonkurujące ze swoim tłem

Kierunek

ruchu

prowadzi

wzrok

ku CTA

REKOMENDACJE

Page 81: Cititravel.pl. Strona główna: rotator czy baner statyczny?

Ale wszyscy mają rotator!

Chcemy rotator.

REKOMENDACJE

Page 82: Cititravel.pl. Strona główna: rotator czy baner statyczny?

Chcemy rotator!

OK, ALE ZRÓBMY GO LEPIEJ! REKOMENDACJE

http://shouldiuseacarousel.com/

Page 83: Cititravel.pl. Strona główna: rotator czy baner statyczny?

3. PROPOZYCJE DLA CITITRAVEL.PL

I. Zachowanie automatycznego rotatora na stronie

II. Mniejszy rozmiar rotatora

III. 2-3 panele w obrębie rotatora

IV. Spójna, jednolita szata graficzna paneli rotatora

V. Wyraźne CTA i informacja o value proposition oferty

VI. Obraz na panelu rotatora wspiera CTA

VII. Mniej tekstu na panelu + duży, wyraźny font

REKOMENDACJE

Page 84: Cititravel.pl. Strona główna: rotator czy baner statyczny?

3. PROPOZYCJE DLA CITITRAVEL.PL

VIII. Obraz na panelu o mniejszej ilości detali

IX. Wolna autorotacja (za J.Nielsenem: min. 3 sekundy na

1 słowo) – wrażenie statyczności

X. Odliczanie do pojawienia się kolejnego panelu

XI. Wyraźna, duża nawigacja w obrębie rotatora

XII. Możliwość zatrzymania autorotacji

REKOMENDACJE

Page 85: Cititravel.pl. Strona główna: rotator czy baner statyczny?

3. PROPOZYCJE DLA CITITRAVEL.PL

XIII. Zatrzymanie autorotacji po przejęciu kontroli przez

użytkownika

XIV. Wyraźna informacja o ilości paneli

XV. Uwzględnienie wytycznych SEO

XVI. Spójny przekaz zbioru rotujących slajdów, np.:

o Różne zalety jednej oferty

o Różne oferty na wyjazdy do jednego miejsca

REKOMENDACJE

Page 86: Cititravel.pl. Strona główna: rotator czy baner statyczny?

A design isn’t finished until

somebody is using it.Brenda Laurel

WIĘCEJ PEWNOŚCI WNIOSĄ TYLKO BADANIA.

Page 87: Cititravel.pl. Strona główna: rotator czy baner statyczny?

Tytuł prezentacji

Imię Nazwisko

Unity S.A.ul.Przedmiejska 6-10,54-201 Wrocławwww.unity.pl

Znajdź nas na FB:www.unity.pl/facebook