Najlepsze praktyki tworzenia udanych relacji internetowych

Relacje internetowe to wciągający, interaktywny i łatwy do udostępniania format storytellingu. Relacje internetowe są tworzone przy użyciu podsekcji frameworku AMP. Relacje internetowe zapewniają twórcom i wydawcom możliwość porządkowania treści w pełnoekranowym, bogatym wizualnie i wciągającym dla użytkowników formacie mobilnym.

Relacje internetowe są krótkie, a czytelnicy lubią szybkie kąski w swoich krótkich wolnych chwilach. Czekanie na metro lub kawę otwiera możliwości konsumpcji skondensowanej treści. Upewnij się, że każdy kęs wciąga i zachwyca, stosując się do tych najlepszych praktyk tworzenia udanej relacji internetowej.

Na pierwszy rzut oka

Główne elementy satysfakcjonującej, strawnej relacji internetowej:

• Opowiedz całą, ciekawą historię.
• Zmaksymalizuj efekt strony tytułowej dzięki wysokiej jakości grafice i chwytliwemu tytułowi.
• Nadaj jej atrakcyjność wizualną za pomocą filmów i zdjęć, które pasują do ekranu użytkownika i go wypełniają.
• Mówiąc mniej, można powiedzieć więcej, zwłaszcza przy użyciu obrazów. Staraj się utrzymywać ilość tekstu mniejszą niż 10 słów na stronie.
• W przypadku korzystania z filmów: krótsze są najlepsze, więc staraj się trzymać czasu poniżej 15 sekund.
• Niektóre osoby i niektóre sytuacje wymagają oglądania bez dźwięku. Zachowaj integralność treści, dodając do filmów podpisy.
• Daj czytelnikom coś do przeklikania. Średnia długość od 10 do 20 stron pozwala większości autorów opowiedzieć dobrą narrację.
• Nie nadużywaj animacji ani osadzania i zwróć uwagę na czas przejścia.

Poznaj swoją narrację

Zaplanuj wprowadzenie do relacji, utwórz architekturę i zbuduj kompletną narrację. Kiedy już dowiesz się, co chcesz powiedzieć, przeanalizuj to. Każda strona relacji internetowej powinna przekazywać jeden pomysł, który działa spójnie z innymi.

Gustowna i wypełniająca treść

Każda relacja internetowa musi mieć minimum 4 strony, ale najlepiej mniej niż 30. Relacje internetowe muszą być dobrze opowiedziane i łatwe do skonsumowania. Jeśli jest to konieczne do narracji, użyj więcej niż 30 stron.

Wybierz mnie! Opakowanie

Twoja strona tytułowa to opakowanie relacji internetowej. Jest to pierwsza rzecz, którą zobaczą widzowie, a jeśli jej nie otworzą, będzie to też jedyne, co zobaczą. Upewnij się, że jest atrakcyjna! Dobra strona tytułowa ma dwa elementy — przyciągające wzrok obrazy i krótki, zapadający w pamięć tytuł.

Obrazy

Użyj wysokiej jakości pionowego obrazu lub filmu, wypełniającego cały ekran. Poinformuj swoich fanów o swojej marce, dodając do niej favicon i logotyp.

Tytuł

Tytuł powinien być zrozumiały i przejrzysty, najlepiej krótszy niż 10 słów w mniej niż 40 znakach. Należy podać autora i tytuł publikacji oraz dodać datę publikacji, jeśli relacja jest wrażliwa na czas.

Marka i data

Czytelnik musi wiedzieć, kto i kiedy opublikował relację internetową. Na stronie tytułowej należy umieścić oznaczenie marki i datę publikacji. To sprzyja zaufaniu, a jeśli użytkownikowi spodobają się Twoje treści, lojalności. Ta relacja internetowa z CNN o podróżach po Włoszech pozwala z łatwością sprawdzić, kto ją opublikował i jak bardzo jest ona aktualna.

Uczta dla oczu

Zachwyć czytelników wysokiej jakości obrazem, który przykuwa ich uwagę i tekstem, który mogą łatwo i szybko przeczytać. Używaj głównie wysokiej jakości filmów i obrazów, ale dodaj odrobinę ożywczej animacji tam, gdzie ma to sens.

Wszystkie zdjęcia i filmy powinny zajmować cały ekran przy minimalnym użyciu formatu letterbox tam, gdzie ma to sens.

Wideo

Filmy są bardzo angażujące dla czytelników, zawrzyj ich jak najwięcej w swojej relacji internetowej. Stosuj filmy krótsze niż 15 sekund. Jeśli masz dłuższy film, zastanów się nad rozłożeniem go na krótsze części.

Relacje internetowe są konsumowane w trybie pionowym, należy więc pamiętać o następujących kwestiach:

• W miarę możliwości nagrywaj filmy na urządzeniach mobilnych wysokiej klasy.
• Nagrywaj w rozdzielczości 480p.
• Nagrywaj z szybkością co najmniej 24 klatek na sekundę.

Upewnij się, że treść jest dostępna. Zmień rozmiar filmów tak, aby na dole znajdowało się miejsce na tekst i podpisy. Nie wszyscy czytelnicy będą mogli lub chcieli usłyszeć treść filmu.

Obrazy

Używaj pełnoekranowych, pionowych obrazów o dobrej rozdzielczości (828 x 1792).

Unikaj skadrowanych w poziomie zdjęć.

Świadome kadrowanie

Skup się na tym, co jest ważne. Wykadruj niepotrzebne lub rozpraszające elementy i upewnij się, że kluczowy obiekt na zdjęciu jest ostry i kompletny. Pamiętaj, że górna i dolna część zdjęcia może zostać przycięta na niektórych urządzeniach, więc przetestuj je odpowiednio.

DOBRZE	ŹLE
Ten obraz jest skadrowany w celu dopasowania do zawartości strony i wspiera główną ideę.	Przy takim kadrowaniu nie wiadomo, na czym ma skupić się czytelnik ani jaką ideę ma przekazać obraz.

Tekst

Upewnij się, że tekst jest czytelny. Rozmiar czcionki 24 powinien być rozmiarem minimalnym, ale tekst powinien być tak duży i czytelny, jak to tylko możliwe. Użyj koloru tekstu kontrastującego z tłem strony relacji lub obrazem. Nie dołączaj obrazów ani filmów wideo, zawierających tylko tekst.

DOBRZE	ŹLE
Duży kontrast sprawia, że słowa łatwo zobaczyć.	Przy słabym kontraście słowa i obrazy mogą się zlewać, przez co trudno jest odczytać słowa i nadążać za relacją.
Podświetlenie tekstu może sprawić, że słowa będą się wyróżniać i ułatwi to czytelnikom skoncentrowanie się na relacji.	Używanie jasnego tekstu na zatłoczonym obrazie sprawia, że słowa te są trudne do odczytania.

Kąski słów

Tekst należy podawać jako kąski, a nie posiłki. Staraj się nie przekraczać 200 znaków na stronę.

Traktuj szczegóły jak listę składników, udostępniaj je tylko wtedy, gdy użytkownicy o to poproszą. Dołącz długą treść tekstową w załączniku strony. Załączniki stron informują użytkownika, że jest więcej tekstu do przeczytania. Jeśli są zainteresowani, mogą przeciągnąć palcem po swoich urządzeniach.

Strona z treścią tekstową dłuższą niż zdanie może okazać się nieunikniona. Staraj się, aby takie strony stanowiły nie więcej niż 10% wszystkich stron relacji.

DOBRZE	ŹLE
Postaraj się ograniczyć tekst tylko do tego, co niezbędne. Różne rozmiary i style rozbijania bloków tekstu mogą zwiększyć jego zrozumiałość.	Ściana takiego tekstu może być trudna do odczytania i może zniechęcać do angażowania się w relację.

Animacje

Animacje zaostrzają apetyt, gdy są stosowane celowo, np. w celu dodanie ruchu do statycznych obrazów. Możesz animować obrazy i zasoby za pomocą efektów wpływania na ekran, obrotu lub zanikania.

DOBRZE	ŹLE
Ruch w tym przykładzie pomaga wspierać główną ideę i dodaje do strony element dynamiczny.	Ta statyczna strona jest funkcjonalna, ale może jej zabraknąć okazji do angażowania czytelników.

Animacji używaj oszczędnie, bo nadużywane będą niesmaczne. Unikaj dodawania zbyt dużej ilości jednego smaku i oszczędnie stosuj przyprawę w postaci animacji.

Przede wszystkim synchronizacja

Strony powinny wchodzić w ich pełny stan szybko — animacja nie powinna powstrzymywać użytkownika przed przejściem na następną stronę — ale nie za szybko! Ważne jest, aby zapewnić odpowiednie połączenie stylu i czasu trwania. Na przykład proste animacje powinny trwać mniej niż 500 milisekund, a przesuwanie na obrazie tła powinno trwać dłużej.

Zastanów się nad ruchem w kreacji. Zmieniaj wiele obiektów w sekwencję, zamiast kazać im poruszać się razem w jednym efekcie. Elementy mogą mieć różne efekty i czasy trwania, ułatwiające uzyskanie spójnej animacji.

Pary doskonałe

Dopasuj styl animacji do estetyki relacji. Skorzystaj z dostępnej biblioteki animacji relacji internetowych, aby znaleźć styl i intensywność, które będą Ci odpowiadać, nie odwracając uwagi od treści.

Apetyt na więcej

Pozwól użytkownikom na dalsze zgłębianie tematu poprzez osadzanie treści stron trzecich, dołączanie dodatkowych informacji i udostępnianie linków do nowych lokalizacji.

Strategiczne elementy osadzone

Elementy osadzone zapewniają dodatkowy wymiar w stosownych przypadkach i są przyjemnie prezentowane. Umieść odpowiednią treść obok osadzonego elementu w taki sposób, aby stanowiła ona integralną część relacji. Być może konieczne będzie włączenie funkcji interaktywności dla osadzonego elementu.

DOBRZE	ŹLE
Element osadzony na tej stronie dobrze integruje się z resztą układu. Nagłówek, data i grafika tła pomagają poprawić wygląd.	Umieszczenie samego elementu osadzonego na stronie wygląda na niedokończone i nie integruje się dobrze z pełną relacją.

Dołączenie dodatkowej zawartości

Usprawnij swoją relację internetową, umieszczając odpowiednią treść w załącznikach. W ten sposób czytelnicy mogą pogłębić swoją wiedzę, jeśli chcą dowiedzieć się więcej o danej relacji. Czytelnicy łatwiej poruszają się po relacji, gdy dodatkowa zawartość jest załączona do odpowiednich stron.

Załączniki działają dobrze z długimi blokami tekstu, a jeśli relacja zawiera wideo podświetlenia, możesz dołączyć cały film jako załącznik.

Linki do nowych lokalizacji

Linki można dodawać w dowolnym miejscu na stronie relacji internetowej. Dotknięcie linku powoduje wyświetlenie etykiety narzędzia. Informuje ona użytkownika o miejscu, do którego prowadzi link i umożliwia potwierdzenie działania przed wyjściem z relacji.

DOBRZE	ŹLE
Linki na tej stronie są wyraźnie oznaczone i otoczone odpowiednią treścią. Nie kolidują one z nawigacją po relacji.	Linki na tej stronie całkowicie blokują nawigację. Czytelnicy nie będą w stanie z łatwością przejść do poprzedniej lub następnej strony.

Zastanów się strategicznie nad rozmiarem, lokalizacją i częstotliwością pojawiania się linku. Zbyt wiele interaktywnych elementów może skomplikować nawigację i sfrustrować czytelników.

Kodowanie czy tworzenie

Relacje internetowe można ręcznie kodować od podstaw lub tworzyć za pomocą narzędzi do tworzenia.

Jeśli ręcznie kodujesz relację internetową, utworzysz ją od podstaw za pomocą frameworku AMP. Artykuł Utwórz swoją pierwszą relację internetową pozwoli Ci zacząć. Po utworzeniu relacji internetowej upewnij się, że jest to prawidłowy AMP. Możesz ją przetestować za pomocą walidatora AMP. Więcej informacji zawiera artykuł Szczegóły techniczne relacji internetowych.

• Written by @CrystalOnScript