Temat — jak podejść do projektowania wiadomości e-mail

Znaczący odsetek konsumentów — 99% — codziennie sprawdza pocztę e-mail. Niektóre grupy demograficzne, w tym millenialsi, wolą komunikację e-mailową od firm od innych form komunikacji, takich jak rozmowy telefoniczne lub SMS-y. A dzięki ponad 5 miliardom kont e-mail aktywnych na całym świecie poczta e-mail jest niezbędnym elementem każdej strategii produktów cyfrowych.

Chociaż istnieją tysiące projektów szablonów wiadomości e-mail dostępnych dla marketerów, projektowanie wiadomości e-mail jest ważnym obszarem wiedzy dla projektantów stron internetowych. Dotyczy to zwłaszcza tych, którzy chcą współpracować z większymi markami, firmami kreatywnymi i innymi, którzy unikają szablonów.

Podczas projektowania wiadomości e-mail projektanci powinni pamiętać o kilku kwestiach: od ograniczeń większości platform pocztowych (z ograniczoną obsługą takich rzeczy, jak czcionki internetowe jednego z największych — Gmaila), a także od oczekiwań konsumentów podczas otwierania wiadomości e-mail z firma, z którą mogą już prowadzić interesy.

Znaczenie projektowania mobilnej poczty e-mail

Ponieważ co najmniej połowa wszystkich wiadomości e-mail jest obecnie otwierana i odczytywana na urządzeniach mobilnych, ignorowanie przez projektantów projektów wiadomości e-mail przyjaznych dla urządzeń mobilnych jest nieodpowiedzialne. Zwłaszcza biorąc pod uwagę, że współczynniki konwersji mobilnych wiadomości e-mail są zwykle znacznie wyższe niż współczynniki na komputery stacjonarne.

Ten projekt mobilnej poczty e-mail od PiperJaffray zapewnia prostotę i elegancję. Czytelny na urządzeniu mobilnym dzięki przejrzystym linkom i subtelnemu brandingowi. Na pierwszym miejscu stawia potrzeby użytkownika, poprawiając ogólne wrażenia użytkownika i postrzeganie firmy.

Dribbble utrzymuje swoje wiadomości e-mail „Popular shots” na miejscu, koncentrując się wyłącznie na treści. To skupienie sprawia, że ​​e-maile są łatwe w nawigacji na urządzeniach mobilnych. Chociaż prosty układ, który koncentruje się na treści, jest dobrym pomysłem w przypadku wielu rodzajów wiadomości e-mail, szczególnie dobrze nadaje się do wiadomości mobilnych, gdzie ułatwia zarówno konsumpcję treści, jak i interakcję z nią.

Koncentrowanie się na treści

W ramach najlepszej praktyki, niezależnie od tego, czy projektują wiadomości e-mail, czy inne produkty cyfrowe, projektanci powinni zawsze skupiać się na treści. Niektóre projekty e-maili wykorzystują tę najlepszą praktykę do skrajności, tworząc minimalistyczny projekt, w którym treść jest projektem.

Podczas pracy nad większością projektów wiadomości e-mail projektanci czerpią korzyści z wcześniejszego utworzenia treści przed przystąpieniem do projektowania. Jednak szczególnie w minimalistycznych projektach jeszcze ważniejsze jest, aby wiedzieć, jaka będzie treść z góry.

Marvel skupia się bezpośrednio na ich zawartości dzięki minimalistycznemu wzornictwu. Białe tło i obrazy, które obsługują tylko tekst na stronie, sprawiają, że treść naprawdę się wyróżnia.

Wszystkie e-maile Unsplash skupiają się bezpośrednio na promowanych obrazach. Przycisk „Wyświetl kolekcję” i zanikanie na dole obrazów może zwiększyć liczbę kliknięć do witryny, ponieważ powoduje, że ludzie chcą zobaczyć więcej.

Wzmacnianie marki

Gdy odwiedzający odwiedza witrynę, jest to (najlepiej) wciągające doświadczenie brandingowe. Wszystko jest pod kontrolą projektanta serwisu. Ale projekt e-maila jest inny. Użytkownik przegląda wiadomości e-mail w innej aplikacji, a nie wszystkie aplikacje poczty e-mail renderują wszystkie wiadomości e-mail jednakowo.

Z tego powodu branding w projektach wiadomości e-mail jest niezbędny do stworzenia odpowiedniego doświadczenia dla użytkownika czytającego wiadomość e-mail. Jednak branding często musi być prosty, aby skutecznie renderować się na różnych urządzeniach i klientach poczty e-mail dla największego odsetka użytkowników.

Proste logo u góry wiadomości e-mail, wykorzystujące te same obrazy nagłówka na wielu obrazach i utrzymujące jak najwięcej elementów spójnych z innymi produktami cyfrowymi marki, stanowi długą drogę do wspierania i wzmacniania postrzegania marki przez konsumentów.

Branding Everlane jest z natury prosty w e-mailach i na stronie internetowej. Ich logo umieszczone w widocznym miejscu na górze tego e-maila wzmacnia tę markę.

The Middle Finger Project używa spójnego obrazu nagłówka we wszystkich swoich e-mailach, wraz z jasnofioletowym akcentem kolorystycznym. Dzięki temu ich e-maile są natychmiast rozpoznawalne dla każdego, kto subskrybuje, a branding jest kontynuowany na stronie.

Przyciąganie uwagi kolorem

Kolor ma silny wpływ na ludzki umysł, dzięki możliwości wpływania na emocje, postrzeganie, a nawet zachowanie. Efektywne używanie kolorów w wiadomościach e-mail może zwiększyć współczynniki klikalności i konwersji. W niektórych testach różnica w kolorze przycisków może mieć ponad 20% różnicy we współczynnikach konwersji.

Ale to nie tylko wezwania do działania, które czerpią korzyści z używania koloru. Tworzenie kolorowej wiadomości e-mail może być odejściem od oczekiwań i stworzyć zupełnie inny wygląd niż inne wiadomości e-mail w skrzynce odbiorczej danej osoby.

Zwrócenie uwagi na baner sprzedażowy jaskrawoczerwonym kolorem przypomina prawdziwe znaki sprzedażowe, które często są również wykonane w tym samym kolorze. Oko czytelnika natychmiast przyciąga czerwień.

Article, skandynawska witryna eCommerce zajmująca się meblami, wykorzystuje stonowaną, czerwono-zieloną kolorystykę, przy czym czerwień zwraca uwagę na najważniejszą część — przycisk wezwania do działania.

Podczas gdy niektóre projekty e-maili wykorzystują kolor jako sposób na zwrócenie uwagi na konkretną część treści, ta wiadomość e-mail z zoo w Houston wykorzystuje jasne kolory, aby stworzyć zabawny i energiczny projekt. Jaskrawa, pomarańczowa i intensywnie różowa kolorystyka natychmiast przyciąga wzrok i przyciąga czytelnika.

Korzystanie z oszałamiających obrazów

Ludzie są wizualnymi stworzeniami, a oszałamiające obrazy mogą podnieść e-mail i przyciągnąć uwagę czytelnika. Obrazy mogą również wzmocnić przekaz wiadomości e-mail i markę firmy.

Wydaje się, że programy telewizyjne mają przewagę w kategorii „oszałamiające obrazy”, a ten e-mail od Netflixa wykorzystuje żywy, ale tajemniczy kadr z Stranger Things . Połączenie przyciągającego wzrok obrazu z wezwaniem do działania „Odtwórz” bezpośrednio pod nim ma sens z perspektywy UX, ponieważ ułatwia czytelnikom natychmiastowe obejrzenie promowanego programu.

Oszałamiające obrazy nie ograniczają się tylko do zdjęć. Karykatura lub ilustracja, takie jak te, które WePresent wykorzystuje w swoich e-mailach, przyciągają wzrok tak samo jak zdjęcie i mogą pomóc przyciągnąć czytelników do treści.

Ten e-mail Deadliest Catch , promujący serial dokumentalny Discovery Channel, wyświetla oszałamiający obraz nagłówka, który łączy się z treścią poniżej. To przydatna technika, która zachęca widza do dalszego czytania.

Eksperymentowanie z niekonwencjonalnymi układami

Wiele projektów wiadomości e-mail ma dość standardowy format: nagłówek u góry, treść w jednej kolumnie, z wezwaniami do działania u góry iu dołu. Ale nie ma reguły, która mówi, że projektanci muszą podążać za tym konkretnym wzorem.

Niekonwencjonalne układy to świetny sposób na przyciągnięcie uwagi czytelnika i zachęcenie go do zapoznania się z treścią. Istnieje wiele sposobów tworzenia nietypowych projektów. Jedną z popularnych metod jest użycie obrazów do tworzenia układów wiadomości e-mail, które niekoniecznie byłyby kompatybilne z wieloma platformami pocztowymi.

Niekonwencjonalne układy niekoniecznie muszą być oderwane od ściany. Ten, od Mailchimp, używa projektu dwukolumnowego z jedną kolumną zajętą ​​przez kolorowe bloki. To, co sprawia, że ​​zapada w pamięć, to fakt, że jest atrakcyjny wizualnie i nieoczekiwany.

Używanie obrazów pozwala na bardziej nieoczekiwane układy wiadomości e-mail, takie jak ten dla KLM. Projektanci muszą tylko pamiętać, że niektórzy klienci poczty e-mail nadal będą blokować automatyczne ładowanie obrazów, przez co konieczne jest wprowadzenie tekstu zastępczego, który nadal przekazuje sedno wiadomości.

Praca z czcionkami

Większość popularnych klientów poczty e-mail obsługuje czcionki internetowe, ale niestety nie wszystkie – Gmail jest najbardziej godnym uwagi wyjątkiem (chociaż Gmail obsługuje Roboto i Google Sans jako część interfejsu Gmaila). Jednak projektanci nadal mogą korzystać z czcionek internetowych, o ile pamiętają, że duża liczba klientów poczty e-mail będzie używać czcionek zastępczych.

Alternatywą do korzystania z czcionek internetowych jest oczywiście użycie obrazów zawierających czcionki. To właśnie robi wielu projektantów e-maili, zwłaszcza w nagłówkach, w których czcionki zastępcze prawdopodobnie nie pasują do siebie.

Ten biuletyn FabFitFun wykorzystuje zabawną czcionkę skryptową, aby zwrócić uwagę na treść, jednocześnie łącząc ją z bardzo czytelnym krojem pisma bezszeryfowego. Eksperymentowanie z kombinacjami czcionek w projektach wiadomości e-mail to świetny pomysł, który można nawet wykorzystać jako próbę przed zmianą krojów pisma w witrynie internetowej lub wykorzystaniem ich w innych markowych materiałach.

Sickbubble używa różnych czcionek w swoich projektach wiadomości e-mail, co może być trudne. Ale w tym przypadku, ponieważ rozdzielają każdą sekcję, to działa. Czcionka wyświetlacza w nagłówku jest bardzo kanciasta, podczas gdy główny tekst jest łatwy do odczytania bezszeryfowy. Czcionki odręczne w sekcji promocyjnej produktu działają, ponieważ są przesunięte w stosunku do treści wiadomości e-mail.

Zabawa z animacjami

Animacje dodają e-mailom dodatkowego wizualnego zainteresowania i od razu przyciągają uwagę czytelnika. Animowane pliki GIF są popularnym sposobem dodawania ruchu do wiadomości e-mail i są obsługiwane przez większość klientów poczty e-mail.

Projektanci powinni pamiętać o rozmiarach plików podczas osadzania jakichkolwiek animacji, ponieważ tak wiele osób czyta e-maile na urządzeniach mobilnych. Powinni również upewnić się, że animacje wspierają treść, a nie są tylko wypełniaczem.

Korzystanie z animowanych GIF-ów, aby wskazać cel lub lepiej zilustrować prezentowaną treść w zabawny sposób, jest fantastycznym dodatkiem do projektu e-maila, jak w tym przykładzie e-maila z Product Hunt.

The Hustle używa animowanego GIF-a w swoich e-mailach, aby zarówno zilustrować sens wiadomości, jak i dodać wizualnego zainteresowania do minimalistycznego projektu e-maila.

Wezwania do działania

Wezwanie do działania jest prawdopodobnie najważniejszą częścią prawie każdego e-maila wysyłanego przez firmę. Większość wiadomości e-mail jest wysyłanych w celu zachęcenia do podjęcia działań, niezależnie od tego, czy chodzi o przeczytanie artykułu, zakup produktu lub wykonanie innego zachowania.

Projektanci są dobrze przygotowani do zwracania szczególnej uwagi na projekt swoich wezwań do działania, a także do przeprowadzania na nich testów A/B, aby upewnić się, że są zoptymalizowane pod kątem wydajności.

Użycie jasnego koloru wezwania do działania, tak jak zrobił to Litmus, wyróżnia je spośród reszty treści. Projektanci powinni rozważyć eksperymentowanie z różnymi kolorami, aby sprawdzić, które z nich najlepiej sprawdzają się dla ich odbiorców, stosując testy A/B podczas wysyłania kampanii e-mailowych.

Użycie koloru, który całkowicie różni się od reszty treści e-maila w wezwaniu do działania, wyróżnia go. Ponieważ limonkowa zieleń w wiadomości e-mail Monitora kampanii jest podzielonym kolorem uzupełniającym do fioletu, który tworzy tło, wyróżnia się bez kolizji.

Zwróć uwagę na najlepsze praktyki projektowania wiadomości e-mail

Chociaż w projektowaniu wiadomości e-mail jest dużo miejsca na kreatywność i eksperymenty, projektanci muszą również pamiętać o najlepszych praktykach i ograniczeniach tego medium.

Jednym z najważniejszych kroków w projektowaniu wiadomości e-mail jest testowanie wiadomości e-mail na różnych platformach e-mail przed ich wysłaniem. Chociaż prawdopodobnie będą między nimi niewielkie różnice i zawsze znajdą się ludzie, którzy będą korzystać z mniej popularnych platform, które renderują projekty w inny sposób, mądrze jest upewnić się, że e-maile będą wyświetlane w akceptowalny sposób dla większości użytkowników.

Istnieje kilka usług testowania poczty e-mail, z których mogą skorzystać projektanci, aby zobaczyć, jak ich e-maile będą wyglądać na różnych platformach e-mail. Litmus jest jedną z najpopularniejszych, ale warto również sprawdzić inne opcje, takie jak Mailgun, Email on Acid, Mailtrap i Preview My Email, aby zobaczyć, która najlepiej odpowiada potrzebom każdego projektu.

Poza tym należy pamiętać o rozmiarach obrazów i wykorzystaniu przepustowości ze względu na liczbę e-maili otwieranych na urządzeniach mobilnych. Responsywne projekty są praktycznie koniecznością z tego samego powodu.

Najlepsze projekty wiadomości e-mail będą łatwe do odczytania na dowolnym urządzeniu i – co najważniejsze – zachęcą ich do kliknięcia wezwania do działania w wiadomości e-mail (lub wykonania w inny sposób żądanej czynności). Przestrzeganie tych najlepszych praktyk dotyczących projektowania wiadomości e-mail daje projektantom stron internetowych przewagę w tworzeniu wiadomości e-mail, które robią to skutecznie.

• • •

Dalsza lektura na blogu Toptal Design:

• Doświadczenie jest wszystkim — ostateczny przewodnik po UX
• Czy wszystkie trendy są tego warte? 5 najczęstszych błędów UX popełnianych przez projektantów
• UI vs. UX – Poznaj podstawowe różnice [Infografika]
• Zasady projektowania mobilnego UX i najlepsze praktyki
• Podstawowy przewodnik po użyteczności mobilnej