Jak Peggy Olson zaprojektowałaby dla Interactive

W erze Mad Men marketerzy dokładnie wiedzieli, jak zostanie skonsumowana ich praca. Docelowi odbiorcy zobaczą reklamę w telewizji, usłyszą ją w radiu, zobaczą w czasopiśmie lub na billboardzie, a być może trafią do (ślimakowej) skrzynki pocztowej. Jeśli planowałeś reklamę drukowaną lub przesyłkę pocztową, znałeś dokładny rozmiar nieruchomości, dla której projektowałeś, i optymalizowałeś reklamę, aby pasowała do tej przestrzeni. Konsument zobaczyłby tę treść dokładnie tak, jak ją sobie wyobrażałeś, kiedy ją projektowałeś.

Gdyby Peggy Olson projektowała dziś reklamę, musiałaby wziąć pod uwagę kontekst, w jakim ta reklama będzie oglądana i jak jej docelowi odbiorcy będą z nią wchodzić w interakcje. Nie byłoby żadnej gwarancji, że jej praca będzie oglądana w sposób, w jaki sobie to wyobrażała, więc musiała zoptymalizować układ i projekt, aby wywierały wpływ niezależnie od tego, jak były oglądane. Musiała upewnić się, że wezwanie do działania (CTA) było jasne, zwięzłe i czytelne – nawet na trzycalowym ekranie.

Projektowanie stron internetowych, stron docelowych i e-maili jest dziś o wiele bardziej skomplikowane niż w czasach Mad Men. Dziś masz dodany wymiar interaktywnych elementów i niewiedzy na jakim urządzeniu będą przeglądane treści. Układ, który wygląda idealnie na pełnowymiarowym ekranie komputera, może być kompletnym bałaganem, gdy ogląda się go na tablecie lub smartfonie. Wezwanie do działania, które jest niejasne lub umieszczone w niewłaściwym miejscu, może obniżyć wskaźnik zaangażowania.

Trzy kluczowe najlepsze praktyki projektowania interaktywnego

Większość dzisiejszych konsumentów ma zdolność koncentracji jak komar. Masz około dwóch sekund, aby ich zaczepić, gdy trafią na Twoją treść, zanim zdecydują, czy kliknąć na coś bardziej interesującego. Konieczne jest zrozumienie tych trzech pojęć podczas projektowania wiadomości e-mail, strony docelowej lub strony internetowej:

1. Jak układ wpływa na zaangażowanie: dowiedz się, jak rozmieścić elementy na stronie w celu maksymalnego zaangażowania
2. Jak treść wpływa na zaangażowanie: Dowiedz się, co zmusi mnie do interakcji z Twoimi treściami
3. Jak ważny jest czas: Masz dwie sekundy, aby zwrócić moją uwagę

Brzmi prosto, prawda? Gdyby to było takie proste, nie pisałbym tego! Nie jestem w stanie powiedzieć, ile treści napotykam na co dzień, które frustrują mnie do tego stopnia, że ​​wystarczy nacisnąć przycisk Wstecz. Mówię o dużych korporacjach z głębokimi kieszeniami, ale bez zmysłu projektowego.

Przejdźmy więc do rzeczy praktycznych. Zapoznaj się z kilkoma bardzo prostymi wskazówkami, które pomogą Ci zoptymalizować układ strony pod kątem zaangażowania na dowolnej platformie.

Jak oko skanuje stronę

Pierwszą rzeczą, którą musisz zrozumieć, jest sposób, w jaki ludzkie oko śledzi fragment treści. Kiedy studiowałem reklamę na studiach, powiedziano nam, że oko śledzone jest na stronie w formie dużej litery Z, zaczynając od lewego górnego rogu. Jestem pewien, że ta teoria została wymyślona w badaniu, w którym jakiś badany oglądał fragmenty treści, podczas gdy facet w białym fartuchu próbował narysować wzór ruchów gałek ocznych na kartce papieru. Było to na długo przed powszechnie dostępną obecnie technologią map cieplnych, która jest używana do sprawdzania, jak ludzie śledzą strony przeglądane online. Pamiętaj, że ludzie skanują druki nieco inaczej niż treści online.

W dzisiejszych czasach panuje zgoda co do tego, że podczas przeglądania treści online oko śledzi wzór dużej litery F, wciąż zaczynając od lewego górnego rogu. Twoje oko zwykle śledzi poziomo najpierw górny pasek litery F, następnie drugi pasek litery F, a na koniec od góry do dołu wzdłuż pionowej łodygi litery F.

Co to oznacza? Oznacza to, że twoje wezwanie do działania musi znajdować się gdzieś w tym wzorze dużej litery F lub musisz założyć dziecku wąsy. Podejmij świadomą decyzję projektową, aby umieścić główne wezwanie do działania w miejscu, w którym przyciągnie wzrok widza w ciągu pierwszych dwóch sekund.

Prawdziwe katastrofy projektowe

Przyjrzyjmy się zatem prawdziwej katastrofie projektowej, którą pomógł mi stworzyć jeden z moich kolegów z Act-On. Przykro mi to mówić, ale poniższy przykład pochodzi z prawdziwych treści, które natknąłem się w Internecie. Posłużyłem się fikcyjną firmą Actomatic, aby zademonstrować najczęstsze błędy popełniane przez ludzi i sposoby ich poprawiania.

Przykład 1: Nie zmuszaj mnie do przewijania, aby zobaczyć wezwanie do działania

Najczęstszą straconą szansą, jaką widzę, jest fragment treści, którego nie można udostępnić lub udostępnianie przycisków, które są zakopane na dole strony pod zakładką. Zagięcie to wyimaginowana linia u dołu ekranu. (Termin wywodzi się z czasów, gdy gazety były składane na pół; „powyżej zakładki” było lepszym miejscem, zapewniającym lepsze czytelnictwo). iPhone może znajdować się w odległości 100 pikseli od góry. Należy o tym pamiętać podczas układania treści strony.

Jeśli mówimy o blogu lub wielostronicowym artykule, zaryzykowałbym zgadywanie, że większość ludzi jest gotowa udostępnić po przeczytaniu nagłówka (jeśli jest dobry) i pierwszych dwóch zdań fragmentu treści, ponieważ chcą być pierwszym z bramy. Ludzie lubią udostępniać świeże treści, a nie treści, które widzieli już pięć razy udostępniane przez swoich rówieśników.

Sugeruję umieszczenie przycisków udostępniania u góry iu dołu treści lub przycisków udostępniania, które unoszą się obok treści podczas przewijania.

Współpracowałem z bardzo znaną firmą, która stwierdziła, że ​​kiedy dodali przyciski udostępniania na górze artykułu, a także na dole, wskaźnik udostępniania wzrósł o ponad 400%.

Przykład 2: Och, moje oczy!

Czy kiedykolwiek trafiłeś na fragment treści, który był tak zajęty, że nie wiedziałeś, gdzie szukać? Może miał wideo do udostępnienia, formularz do wypełnienia, trochę kopii, kilka linków tu i tam. Gdybym trafił na poniższą stronę, nie wiedziałbym, od czego zacząć, więc prawdopodobnie w ogóle bym się nie zaangażował. Ten przykład nie wskazuje mi, co jest najważniejsze na tej stronie. Masz dwie sekundy lub mniej, aby przykuć moją uwagę i zaangażować mnie, a właśnie mnie straciłeś.

Jeśli masz wiele wezwań do działania, wyjaśnij, jaka jest logiczna kolejność tych elementów. Przeliteruj to za pomocą numerowanych objaśnień, jeśli musisz. Gdybym trafił na tę stronę, zadałbym następujące pytania:

Układ wygląda na nieplanowany i niechlujny z przypadkowymi białymi spacjami i dziwnymi czcionkami. Wezwania do działania są zdecydowanie poniżej zakładki.

Gdybym miał doradzać firmie Actomatic, zacząłbym od pytania, co chcą osiągnąć dzięki tej stronie. Jaki jest tutaj cel? Zakładam, że głównym celem jest skłonienie ludzi do zarejestrowania się na blogu oraz obejrzenia i udostępnienia krótkiego filmu. Jeśli tak, to musimy wprowadzić pewne zmiany.

1. Upewnij się, że główne wezwanie do działania znajduje się nad zakładką. Zarówno przyciski udostępniania, jak i przycisk subskrypcji znajdują się pod zakładką.
2. Wyjaśnij, że chcesz, aby odwiedzający zarejestrowali się na blogu ORAZ udostępnili film
3. Dodaj informacje o firmie

OK, spójrzmy teraz:

Nowa, ulepszona wersja ma nieco inny layout, mniej czcionek, krótką notkę o firmie i wideo oraz niższą barierę subskrypcji bloga. Dodałem również linki na dole i przycisk Kontakt. Zwróć uwagę, jak zoptymalizowałem układ, aby zmaksymalizować ilość informacji, które czytelnik zobaczy w ciągu pierwszych dwóch sekund, podążając za naturalnym sposobem, w jaki oko skanuje stronę. Teoria wzorca F mówi, że jest to kolejność, w jakiej widz będzie przeglądał elementy na stronie:

1. Logo firmy
2. Nagłówki
3. Przyciski udostępniania i subskrypcji
4. Sekcja Eksploruj na dole

Daj mi powód do interakcji

Teraz, gdy masz już uporządkowany układ, musisz dać mi powód do interakcji z Twoimi treściami. Jeśli chcesz, żebym wypełnił formularz lub udostępnił Twoje treści, musi istnieć ku temu ważny powód. Więc pozwól, że zapytam, co z tego mam?

Jeśli nie znasz odpowiedzi na to pytanie, oznacza to, że nie odrobiłeś pracy domowej.

Głównym powodem, dla którego ludzie wchodzą w interakcję z treścią, jest czerpanie z niej pewnego rodzaju satysfakcji emocjonalnej lub materialnej. Jeśli twoje treści są dobre, podzielę się nimi, ponieważ dzięki nim wyglądam na dobrze poinformowanego przed moimi rówieśnikami. Dostaję zastrzyku ego, jeśli jako pierwszy dowiaduję się o nowym widżecie, który właśnie wydałeś, więc oczywiście podzielę się faktem, że muszę go zobaczyć jako pierwszy.

Może jesteś organizacją non-profit, a Twoje treści to podnosząca na duchu opowieść o kimś, kto zrobił coś niezwykłego. Udostępnię te treści, ponieważ sprawiają, że czuję się dobrze i jestem miłosierny. Zaoferuj mi szansę wygrania iPada, jeśli wypełnię formularz, a znacznie bardziej prawdopodobne będzie, że podam Ci moje dane osobowe.

Sztuką jest wiedzieć, co zmusza odbiorców do zaangażowania. Czy jest to nagroda emocjonalna, nagroda materialna, czy jedno i drugie? Postaw się na ich miejscu i stwórz strategię zaangażowania skierowaną do odbiorców.

Nie komplikuj

Niedawno przemawiałem na konferencji, na której przedstawiłem studium przypadku skutecznej kampanii marketingu społecznego. Nosiłem T-shirt z napisem z przodu: #KeepItSimple. Staram się praktykować to, co głoszę.

Pracowałem z klientami, którzy stworzyli niezwykle skomplikowaną interaktywną treść, a także z innymi, którzy zachowali jej niewiarygodną prostotę, a prostota wygrywa prawie za każdym razem. Oto jak to uprościć:

• Wybierz kroje czcionek, takie jak Trebuchet, które są łatwe do odczytania online.
• Nie mieszaj zbyt wielu krojów i rozmiarów czcionek na stronie. Jeden rozmiar dla nagłówków, jeden rozmiar dla tekstu podstawowego.
• Jeśli to możliwe, ogranicz je do jednego wyraźnego wezwania do działania.
• Trzymaj ważne rzeczy powyżej zakładki.
• Staraj się, aby bariera wejścia była jak najniższa (nie pytaj o czyjeś pierworodne dziecko, jeśli wszystko, czego naprawdę potrzebujesz, to jego adres e-mail)

Twoje zadanie domowe

Chwileczkę, nigdy nie mówiłeś, że na końcu tego artykułu będzie praca domowa! Gdybym ci powiedział, że będzie praca domowa, przeczytałbyś tak daleko? UH Huh. Chciałbym, abyś krytycznie spojrzał na jedną ze swoich stron docelowych i zadał sobie pytanie, czy można ją ulepszyć.

• Wyświetl jedną ze swoich stron docelowych na laptopie i urządzeniu mobilnym. Czy musisz przewijać, aby dostać się do wezwania do działania? Czy wyświetla się dobrze na urządzeniu mobilnym?
• Poproś znajomego, który nic nie wie o Twojej firmie, o obejrzenie jednej z Twoich stron docelowych i poproś go o szczerą opinię podczas przeglądania. Poproś ich, aby powiedzieli Ci, co najpierw zauważyli, czym zajmuje się Twoja firma i jakie jest główne wezwanie do działania na stronie.
• Sprawdź, czy wszystkie ważne elementy mieszczą się we wzorcu F.
• Przetestuj swoje strony w jak największej liczbie przeglądarek na jak największej liczbie platform. Safari nie renderuje elementów takich jak Chrome. Firefox nie renderuje elementów takich jak Internet Explorer (IE). A różne wersje IE mogą wyświetlać zawartość zupełnie inaczej.

Nie musisz mieć dyplomu z układu i projektowania reklam, aby to osiągnąć. Ale musisz być gotów spojrzeć na swoje obecne treści krytycznym okiem.

To jest warte wysiłku.