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

1. Anna Sorbian | anna.sorbian@unity.pl
Strona główna: rotator czy baner statyczny?

2. „CZY ROTATOR ZASTĄPIĆ BANEREM STATYCZNYM?”

3. UŻYTKOWNICY CITITRAVEL.PL
Co na to użytkownicy?

4. GOSIA NA CITITRAVEL.PL
Gosia chce zobaczyć, czy może sobie
pozwolić na Egipt w sierpniu.

5. GOSIA NA CITITRAVEL.PL
Gosia potrzebuje chwili, aby zrozumieć layout serwisu.

6. GOSIA NA CITITRAVEL.PL
I od razu pomija irytujące ją reklamy.

7. GOSIA NA CITITRAVEL.PL
Ok, załóżmy teraz, że tego nie zrobi ;)

8. GOSIA NA CITITRAVEL.PL
I jej uwagę przyciągnie duuuży baner.

9. GOSIA NA CITITRAVEL.PL
Niestety, treść banera zupełnie nie
odpowiada temu, co Gosia chce znaleźć.

10. GOSIA NA CITITRAVEL.PL
Aby kontynuować prezentację,
załóżmy, że treść banera jednak ją zainteresuje.

11. GOSIA NA CITITRAVEL.PL
Ale w momencie, gdy Gosia chce kliknąć w ofertę,
rotator przełącza panel.

12. GOSIA NA CITITRAVEL.PL
Gosia widzi kolejną ofertę, ale wciąż myśli o tej poprzedniej,
w której czytanie się zaangażowała.

13. Nie wie, czy do niej wrócić, czy czytać następną ofertę.
Zaczyna się irytować koniecznością podejmowania decyzji.
GOSIA NA CITITRAVEL.PL

14. GOSIA NA CITITRAVEL.PL
Gosia chce jednak powrócić do poprzedniej oferty.
Tylko jak ma to zrobić?

15. GOSIA NA CITITRAVEL.PL
Gosia nie wie, że ma szukać kropeczek u dołu strony.
Strzałek na przy banerze nie ma.

16. 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.

17. GOSIA NA CITITRAVEL.PL
Może też czekać na rotację panelu.
Ale Gosia się śpieszy.
Podobnie jak inni użytkownicy.

18. 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.

19. 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

20. 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.

21. ROTATOR?

22. PROBLEMYROTATOR W UI

23. PROBLEMYROTATOR W UI

24. 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

25. • 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

26. • 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

27. • 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

28. • 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

29. PROBLEMYPROBLEM?
Founder & CEO at
WiderFunnel, Author, Keynote
Speaker, Conversion
Optimization

30. 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?

31. 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

32. • 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

33. • 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

34. • 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

35. „(…) 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

36. 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

37. 5. REKLAMA? C.D. PROBLEMY
Customer Experience
Delivery Manager
at EE, UK

38. zjawisko ignorowania
obszarów przypominających
bannery reklamowe
5. REKLAMA? - BANNER BLINDNESS PROBLEMY

39. • 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

40. • 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

41. • 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

42. • 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

43. • 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

44. 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

45. 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.

46. • 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

47. • 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

48. 2. GRUPOWANIE: AMAZON DOBRE PRAKTYKI
Rotatory (manualne)
promujące:
TYLKO Kindle
TYLKO jesienne
płaszcze

49. 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.

50. 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.

51. • 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

52. • 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

53. 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

54. 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)

55. 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.

56. 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

57. 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

58. 7. ZAPEWNIENIE KONTROLI C.D.
- PANELE SAMOCZYNNIE ROTUJĄCE
DOBRE PRAKTYKI
Zapewniony jest podgląd
kolejnego panelu rotatora
Panel nie rotuje,
jeżeli znajduje się
nad nim kursor

59. 7. ZAPEWNIENIE KONTROLI C.D.
- PANELE SAMOCZYNNIE ROTUJĄCE
DOBRE PRAKTYKI
Licznik umieszczony w
nawigacji wskazuje
moment, w którym panel
zostanie przełączony

60. 7. ZAPEWNIENIE KONTROLI C.D.
- PANELE SAMOCZYNNIE ROTUJĄCE
DOBRE 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

61. 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

62. 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/

63. 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

64. E. INNE ROZWIĄZANIA DLA PRZESTRZENI ATF
1. ROZBUDOWANIE NAWIGACJI
2. SEGMENTACJA KLIENTÓW
3. WSPARCIE GRAFIKĄ GŁÓWNEGO CTA

65. 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

66. 1. ROZBUDOWANA NAWIGACJA C.D. ZAMIAST ROTATORA

67. 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

68. 3. WSPARCIE GRAFIKĄ CALL TO ACTION ZAMIAST ROTATORA
• Wykorzystaj znajomość psychologii, aby statyczna
grafika wzmacniała siłę przekazu CTA

69. F. PRAKTYKA I REKOMENDACJE
1. CO ROBIĄ OBECNIE INNI?
2. CASE STUDIES
3. PROPOZYCJE DLA CITITRAVEL.PL

70. 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ę

71. 2. CASE STUDY:
ROTATOR MANUALNY VS. AUTOMATYCZNY
PRAKTYKA
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.

72. 2. CASE STUDY:
PRAWIE NIKT NIE KLIKA NA ROTATOR
PRAKTYKA
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

73. 2. CASE STUDY:
MNIEJ PANELI = LEPSZA KONWERSJA
PRAKTYKA
Znaczny
spadek ilości
kliknięć na
dalsze panele
Wzrost ogólnej liczby
kliknięć na rotator po
redukcji paneli z 8 do 5

74. 2. CASE STUDY:
PAUZA MUSI BYĆ ŁATWO DOSTRZEGALNA
PRAKTYKA
Ilość osób korzystających z
pauzy znacznie wzrosła, gdy
zwiększono jej wymiary

75. 2. CASE STUDY:
BANNER BLINDNESS + ROTACJA
PRAKTYKA
„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/

76. 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

77. WNIOSEK?

78. 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

79. 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

80. 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

81. Ale wszyscy mają rotator!
Chcemy rotator.
REKOMENDACJE

82. Chcemy rotator!
OK, ALE ZRÓBMY GO LEPIEJ! REKOMENDACJE
http://shouldiuseacarousel.com/

83. 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

84. 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

85. 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

86. A design isn’t finished until
somebody is using it.
Brenda Laurel
WIĘCEJ PEWNOŚCI WNIOSĄ TYLKO BADANIA.

87. Tytuł prezentacji
Imię Nazwisko
Unity S.A.
ul.Przedmiejska 6-10,
54-201 Wrocław
www.unity.pl
Znajdź nas na FB:
www.unity.pl/facebook