.

Co to jest interaktywna strona internetowa i jakie są jej elementy?

Interaktywne witryny internetowe bardziej angażują użytkowników. Oglądanie filmów, przeglądanie interesujących infografik lub rozwiązywanie quizów sprawia, że spędzają więcej czasu na Twojej stronie. Zwiększa to szanse na zapamiętanie Twojej firmy i nawiązanie z Tobą kontaktu. W naszym artykule pokażemy Ci elementy interaktywnej strony internetowej i podpowiemy, czego użyć, aby stworzyć taką w Drupalu.

Czym jest interaktywna strona internetowa?

Jest to taka witryna, która aktywnie angażuje użytkowników. Mogą nie tylko zapoznawać się z treścią, ale także wchodzić z nią w interakcję, np. odtwarzać filmy, klikać w diagramy lub wypełniać ankiety i formularze. Interaktywny design, polegający na tworzeniu stron w sposób stymulujący zaangażowanie odwiedzających, jest częścią doświadczenia użytkownika (UX – user experience) – szerszego postrzegania Twojej strony internetowej i jej użyteczności. Dlatego wprowadzając funkcje związane z interakcją, pozytywnie wpływasz również na UX.

Interaktywna witryna umożliwia budowanie dwukierunkowej komunikacji z użytkownikami. Ty udostępniasz informacje, a oni mogą na nie odpowiadać poprzez różne działania. Ponadto są bardziej skłonni do konwersji. Na przykład po obejrzeniu filmu prezentującego Twoje produkty lub usługi, chętniej nawiążą z Tobą kontakt, kupią produkt lub zapytają o wycenę. Wszystkie te działania wydłużają czas przeglądania strony. To natomiast pokazuje Google, że użytkownicy znajdują na Twojej stronie to, czego szukają. Świadczy to o tym, że dostarczasz wysokiej jakości treści i może poprawić Twoją pozycję w rankingu.

Analizując interakcje odwiedzających z Twoją witryną internetową, możesz zapewnić im bardziej spersonalizowane doświadczenia. Możesz użyć danych zebranych w swoim narzędziu do automatyzacji marketingu, takim jak Mautic, aby pokazać użytkownikowi spersonalizowaną wiadomość przy następnej wizycie na Twojej stronie.

Elementy interaktywnych stron internetowych

W sieci można znaleźć przykłady najlepszych interaktywnych stron z przyciągającymi wzrok animacjami, filmami, dźwiękami, a nawet niektórymi funkcjami grywalizacji. Jeśli potrzebujesz tak bogatych wrażeń wizualnych w swojej witrynie, możesz wykorzystać te projekty jako inspirację. Jednak zastosowanie jedynie wybranych elementów interaktywnych już wystarczy, aby Twoja strona była bardziej atrakcyjna dla użytkowników. Poniżej znajdziesz kilka pomysłów na to, co możesz wdrożyć.

Angażujące treści i filtry

Tekst to podstawowa forma treści na stronie, która może spodobać się odwiedzającym i zachęcić ich do określonych działań, takich jak kliknięcie w link. Dlatego też kluczowe jest pisanie na firmowym blogu wciągających artykułów, które jednocześnie będą stanowić wiarygodne źródło wiedzy. W ten sposób czytelnicy zaufają twojej witrynie, będą do niej wracali i poznawali ją dokładniej. Aby uprościć tę aktywność, możesz dodać do swojego bloga filtry odpowiadające głównym kategoriom Twoich treści.

Filtry są jednym z interaktywnych elementów na stronie Droptica

Filtry na naszym blogu ułatwiają użytkownikom przeglądanie treści.

W przypadku sklepu internetowego przydadzą Ci się bardziej zaawansowane filtry, takie jak cena, cechy produktów, czy dostępność, aby klienci mogli łatwo i szybko odnaleźć to, czego szukają.

Komentarze, forum i udostępnianie treści w mediach społecznościowych

Jak już wspomnieliśmy, celem interaktywnej strony internetowej jest wprowadzenie dwustronnej komunikacji między Twoją firmą a odwiedzającymi. Jest kilka prostych sposobów, aby to umożliwić, na przykład wdrożenie systemu komentarzy. Dzięki temu Twoi użytkownicy będą mogli reagować na twoje treści i wymieniać się opiniami z innymi, co pozwoli Ci uzyskać cenną wiedzę na ich temat. Możesz później wykorzystać te obserwacje do tworzenia artykułów i filmów odpowiadających ich potrzebom, ulepszania niektórych elementów swojej strony albo do przeprowadzania wspomnianej wcześniej personalizacji treści.

Aby jeszcze bardziej zachęcić odwiedzających do dyskusji na poruszane przez Ciebie tematy, możesz dodać forum do swojej witryny. Może to pomóc w zbudowaniu społeczności wokół Twoich produktów lub usług i sprawić, że użytkownicy będą wracali na Twoją stronę, aby zadawać pytania lub pomagać innym. Powinieneś również przyłączyć się do tych działań, aby pokazać, że Twoja firma dba o potencjalnych i aktualnych klientów, a także pomaga w rozwiązywaniu ich problemów. Możesz także udostępniać tworzone przez siebie interesujące treści, aby przyciągnąć ruch do różnych części Twojej strony internetowej i zwiększyć szanse na konwersję.

Jeśli nie masz ochoty dodawać forum do swojej witryny, możesz zachęcić ludzi do dyskusji na temat swoich artykułów na zewnętrznych platformach, takich jak Facebook czy Twitter. W tym celu wprowadź na swojej stronie przyciski do udostępniania treści w mediach społecznościowych. Stojący za nimi mechanizm umożliwia integrację Twojej strony z wybranym kanałem mediów społecznościowych. Gdy użytkownik udostępni Twoje treści na określonej platformie, jego obserwatorzy będą mogli je komentować.

Czat

Nawet jeśli dostarczasz solidne treści, oferujesz możliwość komentowania lub dodania posta na forum, użytkownicy mogą mieć dodatkowe pytania lub potrzebę szybkiego kontaktu z Tobą. Czat pozwoli im zadawać pytania w czasie rzeczywistym. Mogą uprzednio skorzystać z artykułów instruktażowych, linku do strony z najczęściej zadawanymi pytaniami lub Twojego helpdesku. Jeśli w tych zasobach nie odnajdą odpowiedzi na swój problem, pojawi się opcja czatu w czasie rzeczywistym, pozwalająca porozmawiać z przedstawicielem działu obsługi klienta, sprzedaży lub marketingu. Gdy nie są oni dostępni, użytkownik może zostać przekierowany do centrum pomocy lub formularza kontaktowego. Ponadto, zamiast angażować swoich specjalistów, możesz skorzystać z czatbota. Potrafi on zrozumieć potrzeby odwiedzającego, podać podstawowe informacje (o dostępności produktu lub statusie zamówienia) lub odpowiedzieć na najczęściej zadawane pytania.

Formularze z opiniami i oceny

Innym sposobem na wprowadzenie interakcji do Twojej witryny jest wdrożenie formularzy z opiniami. Będą punktem wyjścia dla komunikacji z użytkownikiem, poznawania jego problemów, potrzeb i sugestii dla ulepszenia Twojej strony, produktu lub usługi. Jeśli kontaktująca się z Tobą osoba zgodzi się na opublikowanie jej opinii na Twojej stronie, będzie to stanowiło dowód społeczny (potwierdzenie wartości twojego produktu lub usługi) dla Twoich potencjalnych klientów.

Oprócz udostępnienia pola tekstowego, w którym można wystawić opinię, możesz również dodać obok niego możliwość wystawienia oceny w postaci gwiazdek. Dzięki temu osoby przeglądające Twoją witrynę będą mogły jedynie zerknąć na oceny, bez konieczności całych czytania opinii. Możesz dać użytkownikom możliwość dodawania ocen bez pisania opinii, co przyda się zwłaszcza na platformach e-commerce, gdzie odwiedzający zwykle zaczynają od spojrzenia na liczbę gwiazdek przed zapoznaniem się z recenzjami.

Aby dowiedzieć się więcej o doświadczeniu klienta w ramach Twojej witryny internetowej lub oferty, możesz tworzyć ankiety, które będą bardziej złożonymi formularzami – z odpowiedziami wielokrotnego wyboru lub takimi z pustymi miejscami do wypełnienia. Możesz także zdecydować się na jeszcze bardziej interaktywną formę zbierania opinii – quizy. Pozwalają klientowi bawić się zdjęciami i ilustracjami lub rozwiązywać zagadki, aby dowiedzieć się, czy np. potrzebują nowej witryny internetowej lub posiadają odpowiednio zoptymalizowaną stronę.

Przykład quizu na stronie Kristen Poborsky

Quiz pozwalający dopasować odpowiednie treści dla konkretnej firmy na stronie Kristen Poborsky.

Gify, interaktywne infografiki i filmy

Gify mogą przykuć uwagę użytkowników podczas przewijania strony – np. Twojego postu na blogu. Te elementy wizualne mają na celu rozśmieszenie lub zadziwienie odbiorcy i pokazanie bardziej wyluzowanej strony Twojej marki. Czytanie artykułu może być nieco monotonne, więc poruszający się element może nieco ożywić użytkownika i zmotywować go do zapoznania się z resztą treści. Ten ostatni cel dotyczy również animowanych ilustracji i interaktywnych infografik. Pierwszy element może zostać wywołany poprzez najechanie kursorem lub przewinięcie strony. Nowe elementy ilustracji pojawiają się, gdy użytkownik przewija w dół, co pozwala utrzymać jego zainteresowanie i zaangażowanie w odkrywanie całej historii. Interaktywne infografiki również zwiększają zaangażowanie. Mogą zawierać interaktywne mapy i wizualizację danych oraz zachęcać czytelników do klikania różnych elementów. Jakie inne treści pozwalają utrzymać uwagę ludzi?

Globalne badanie wykazało, że ponad 25% respondentów spędzało ponad 10 godzin tygodniowo na oglądaniu filmów online w 2020 roku. Dlatego osadzając tego typu treści w swojej witrynie lub umieszczając je w tle jakiejś strony, najprawdopodobniej przyciągniesz uwagę użytkowników.

Interaktywne elementy w Drupalu

W Drupalu z łatwością stworzysz interaktywne strony internetowe dzięki różnym gotowym elementom i modułom. Przedstawimy Ci kilka z nich.

Wideo i karuzela

Standardowo możesz osadzić film (np. z YouTube lub Vimeo) na swojej stronie lub użyć go w tle, dzięki obecności modułu Media w rdzeniu Drupala. Może być konieczne wykonanie pewnych prac programistycznych lub uzyskanie pomocy dewelopera przy konfiguracji elementów multimedialnych. Możesz również skorzystać z gotowego rozwiązania w Drooplerze – dystrybucji Drupala.

Video w tle na stronie Droptica

Wideo w tle strony głównej Droptica, dodane za pomocą Drooplera.

Kolejnym przydatnym elementem rdzenia jest karuzela, udostępniająca zapętlony pokaz slajdów, którym użytkownik może sterować. Za jej pomocą możesz np. wyświetlać swoje produkty, usługi lub logo firm, z którymi współpracujesz.

Karuzela, interaktywny element, pozwala użytkownikom przeglądać przedmioty za pomocą strzałek

Karuzela na stronie internetowej Droptica. Gdy najedziesz kursorem na konkretny element, zobaczysz wokół niego poświatę.

Moduł Comment

W rdzeniu Drupala znajduje się również moduł Comment, który umożliwia użytkownikom pozostawienie swoich opinii pod Twoimi treściami. Jako administrator witryny internetowej będziesz otrzymywał powiadomienia o nowych komentarzach. Jeśli chcesz, aby Twoi czytelnicy również je otrzymali, musisz zainstalować jeden z modułów do powiadomień o komentarzach.

Przyciski do udostępniania treści w mediach społecznościowych z modułem AddToAny

Jak już wspomnieliśmy, przyciski do udostępniania treści w mediach społecznościowych umożliwiają użytkownikom szybkie publikowanie linków do Twoich treści na popularnych platformach. W Drupalu taka opcja nie jest dostępna od razu, ale możesz w tym celu zainstalować moduł AddToAny. Zapewnia on całkiem sporo przycisków udostępniania, takich jak Twitter, Facebook, LinkedIn i Reddit, a także kilka innych przydatnych funkcji: pływające paski udostępniania dla komputerów stacjonarnych i urządzeń mobilnych oraz integrację z Google Analytics.

Twoja własna internetowa społeczność z Open Social

Jeśli zamiast umożliwiać użytkownikom udostępnianie Twoich treści na platformach innych firm chcesz zbudować własną społeczność online, wypróbuj Open Social. To dystrybucja Drupala przeznaczona do tworzenia przestrzeni do dzielenia się wiedzą i komunikacji. Osoby, które dołączą do twojej platformy, będą mogły:

  • tworzyć grupy i dołączać do nich,
  • tagować i wspominać pozostałych członków,
  • organizować wydarzenia i zarządzać nimi,
  • śledzić aktualne działania w społeczności.
Holmesglen - internetowa społeczność stworzona za pomocą Open Social, dystrybucji Drupala

Holmesglen - przykład społecznościowej witryny internetowej stworzonej za pomocą Open Social.

Interaktywne strony internetowe w Drupalu – przykłady

Istnieją witryny, które z powodzeniem wykorzystują interaktywne elementy opisane powyżej, a także kilka innych. Przyjrzyjmy się tym stronom i dokładnym lokalizacjom takich elementów.

911day.org

Na stronie 911day.org każdy, kto chce pomóc innym, może znaleźć dla siebie wolontariat. Działania te są organizowane przez fundację MyGoodDeed, jej partnerów oraz wszystkie chętne osoby, w hołdzie osobom rannym i zabitym 11 września 2001 roku. Na stronie głównej widać film odtwarzany w tle. Klikając przycisk Watch our projects in action, możesz obejrzeć cały film z dźwiękiem. Ten element strony 911day.org pokazuje pracę wolontariuszy, aby zachęcić odwiedzających witrynę do dołączenia do nich.

Video w tle na stronie głównej 911day.org

Źródło: 911day.org

Here.com

Ta firma dostarcza technologię mapowania i lokalizacji, która jest dokładnie przedstawiona w dynamicznym filmie w tle na stronie głównej Here.com. Nie jest to jednak jedyne miejsce, w którym znajduje się wideo. Kilka z nich jest osadzonych w akapitach zakładki Platform. Dzięki temu potencjalny klient może zobaczyć funkcjonalności tej platformy w praktyce.

Wideo sprawia, że strona Here.com jest bardziej interaktywna

Filmy w paragrafach uatrakcyjniają treść dla użytkowników.

PZPN – platforma turnieju i biblioteka

Platforma Polskiego Związku Piłki Nożnej Z Podwórka na Stadion poświęcona jest największemu dziecięcemu turniejowi piłki nożnej w Europie. Strona zawiera filmy z historiami młodych piłkarzy oraz nagrania z meczów w zakładce Multimedia. Kolejnym angażującym elementem jest interaktywna mapa Polski. Gdy klikniesz na konkretny region, zobaczysz liczbę znajdujących się w nim drużyn, a także ich nazwy.

Interaktywna mapa na stronie z Podwórka na Stadion

Dzięki interaktywnej mapie użytkownik może zapoznać się z lokalnymi dziecięcymi drużynami piłkarskimi. Źródło: witryna internetowa turnieju.

Stowarzyszenie posiada również platformę Łączy nas piłka. Gromadzone są na niej wiadomości piłkarskie, wyniki meczów i nagrania. W bibliotece PZPN znaleźć można nagrania z najnowszych meczów, jak również tych historycznych.

Biblioteka PZPN jest interaktywną stroną, zawierającą wiele nagrań z meczów

Źródło: Biblioteka PZPN

Łatwe tworzenie interaktywnej strony internetowej

Jak pokazaliśmy, nie potrzebujesz skomplikowanych elementów, aby zbudować interaktywną witrynę internetową, która zaangażuje użytkowników. Już same komentarze, przyciski udostępniania treści w mediach społecznościowych, fora i filmy na Twojej stronie zwrócą ich uwagę. Możesz łatwo dodać te opcje do Drupala za pomocą dedykowanych modułów. Jeśli jednak nie wiesz, który z nich wybrać lub jak dokładnie je wdrożyć, nasi programiści Drupala mogą ci pomóc.