Projektowanie skoncentrowanych interfejsów dla lepszego zaangażowania użytkowników

Zaangażowanie użytkownika jest trudną metryką, którą można osiągnąć na różne sposoby dla różnych projektów. Większość projektantów myśli o berło kiedy mówią o interaktywności, ale zawartość strony może również zachęcać do interakcji z użytkownikiem. Dla lepszego zaangażowania użytkowników ważne jest pisać angażujące treści, i przedstaw tę treść w chwytliwym projekcie.

Znacznie łatwiej powiedzieć niż zrobić, ale jeśli nauczysz się pewnych podstaw, nie będziesz miał problemu z tworzeniem skoncentrowany interfejs użytkownika ze świetną zawartością dla twoich projektów.

W tym poście pokażę ci, jak zwiększyć interakcja z użytkownikiem i zaangażowanie treści na interfejsach internetowych. Są to dwa najczęstsze sposoby angażowania gościa i jeśli możesz zoptymalizować doświadczenie nie będziesz mieć problemu ze zwiększeniem tego lukratywnego czasu na metrykę strony.

Przechwyć nowość

Koncepcja nowość definiuje wydarzenie lub rzecz, która jest na ogół nowa, często bardzo nowa i unikalna na podstawie kontekstu. Nowe wydarzenia zwróć naszą uwagę, ponieważ oni wyróżniać się. Dotyczy to również projektowania interfejsów z nowością reprezentującą elementy, które wydają się zeskocz ze strony.

Niedawno znalazłem świetny post omawiający znaczenie nowości, jeśli chodzi o zaangażowanie. Użytkownicy wydają się dążą do nowatorskich doświadczeń, interfejsów i elementów interfejsu użytkownika ponieważ są różne. Jedyny fakt, że jest inaczej zaprojektowany, często zwraca na siebie uwagę.

Jednym z typowych przykładów jest przycisk wezwania do działania znajdujący się na większości stron docelowych. Możesz także budować nowości zdjęcia tła, ilustracje lub zrzuty ekranu aplikacji, jak na stronie docelowej Uber for Business.

Ta strona ma przycisk wezwania do działania, ale moja uwaga natychmiast idzie na zrzuty ekranu. Animują się po pierwszym załadowaniu, więc to się łączy nowość projektowania z ruchem przyciągnąć uwagę.

Alternatywą byłoby użycie GiftRocket ilustrowane ikony jako linki zagłębić się w stronę.

Oba te przykłady wykorzystać nowość na swoją korzyść. Nie zawsze możesz wciągać ludzi dalej, ale zobaczysz lepsze wyniki, jeśli przyciągniesz ich uwagę na poziomie wewnętrznym pierwszy.

Projekt jest pierwsza rzecz goście widzą, a ty musisz przyciągnąć ich uwagę w ciągu kilku sekund zachęcać do dalszego zaangażowania.

Skimmable Typography

Badania wykazały, że większość użytkowników zeskanuj stronę internetową zamiast czytać to słowo w słowo. Prawdopodobnie będziesz chciał przyciągnąć ludzi do czytania twoich treści, ale możesz zrobić tylko tyle.

Najlepszą alternatywą jest tworzenie zawartość skimmowana z nagłówkami, pogrubionym tekstem i obrazkami ilustrującymi to, co próbujesz powiedzieć. Mogę przynajmniej myśleć trzy potężne techniki pisania możesz wykorzystać w treści do zwiększyć czytelność:

1. Podziel zawartość z wyraźnymi napisami
2. Przerwij akapity aby je zmniejszyć
3. Używaj list wypunktowanych szybciej dzielić się swoimi punktami

Celem jest utrzymanie czytelników w dół strony za pomocą wszelkich niezbędnych środków. Zachowując małą zawartość w kawałkach wielkości zgryzu będziesz miał dużo łatwiejszy czas, aby przyciągnąć uwagę i poprowadzić ludzi dalej na stronę.

Sprawdź blog Quick Sprout, aby zobaczyć przykład tego stylu pisania. Treść jest napisana przez Neila Patela i często pisze bardzo długie treści, ale on rozbija akapity na 1-3 zdania każdy.

Jeśli masz odpowiednie nagłówki, I użyć obrazy / punkty w całej treści ludzie będą coraz bardziej czytać i czytać. Pamiętaj też zwiększ ilość białych znaków między akapitami. Marginesy i obicia obie odgrywają ogromną rolę w projektowaniu i czytelności układu.

Zaprojektuj tekst tak, aby był w rzeczywistości fajnie czytać. Nudna kopia nie zwabie, ale żadna z nich nie będzie zabawna kopia, która jest zbyt mała lub brakuje kontrastu.

Obrazy przyciągające wzrok

Ostatnie studium przypadku Backlinko sugeruje te strony z co najmniej jednym obrazem ogólnie ranga wyższa niż strony bez obrazów. To jest świetne z perspektywy SEO.

Ale co z zaangażowaniem użytkownika? Jeśli możesz zachować ten jeden obraz nad fałdą lub blisko szczytu przyciągnie uwagę odwiedzających, zanim się odbiją. Pamiętaj, że nowe elementy strony mają tendencję do przyciągania.

Gdy na stronie pojawi się obraz (lub wiele obrazów), będzie on przeplatany przełamać monotonię nudnych bloków tekstu. Użytkownicy mogą odpocząć od czytania docenić obraz lub nawiązać połączenie między obrazem a treścią pisaną. Ale tak jak w przypadku większości technik projektowania, jakość jest bardziej wartościowa niż ilość.

Studium przypadku Moz wykazało, że wysokiej jakości obrazy mają tendencję zatrzymaj gości na stronie o wiele dłużej. Z drugiej strony obrazy o niskiej jakości nie działa również aw niektórych przypadkach powodowali odwiedzającym odbijać się szybciej niż bez obrazów. Powinieneś spróbować dołączyć przynajmniej jeden obraz istotne dla treści i to zapewnia wartość dla czytelnika.

TechCrunch robi to za pomocą polecanych obrazów w swoich artykułach, w których często znajdziesz polecane zdjęcie nad fałdą.

WordPress ułatwia dodawanie wyróżnionych obrazów dzięki funkcji miniatury postów. Możesz ustawić odrębne zdjęcie dla każdego wpisywanego posta i wymusić ich pojawienie się na górze strony. Jest to doskonały sposób, aby dać odwiedzającym możliwość zobaczenia o co chodzi w treści, i wzrastać CTR dla pokrewnych widgetów post, które zawierają również miniaturkę postu.

Kontrastujące elementy strony

Jeśli chcesz zwrócić uwagę na jeden konkretny obszar na stronie asymetria jest twoim najlepszym przyjacielem. Kontrast napędza twardy klin między określonymi obszarami projektu lub określonymi blokami treści.

Gość jest naturalnie ravitate w kierunku kontrastu ponieważ jest inny. Duże zestawienia kolorów, rozmiarów lub białych znaków przyciągają wzrok, ponieważ łamie formę wszystkiego innego w układzie.

Moim ulubionym przykładem kontrastowych elementów strony jest prawdopodobnie strona główna Sketch. Znaleziono dużo kontrastów pomiędzy dwoma przyciskami wezwania do działania, jeden do pobrania wersji próbnej Sketcha i drugi do zakupu kopii.

Przycisk zakupu używa pełnego koloru tła dużo jaśniejszy niż inne kolory w nagłówku. Tekst przycisku jest również jaśniejszy w porównaniu z przyciskiem bezpłatnej wersji próbnej. Prowadzi to użytkowników do przycisku Kup teraz wyłącznie z bodźców wzrokowych.

Zauważysz podobna technika na stronie głównej Optin Monster. Ten nagłówek ma tylko jeden przycisk oznaczony Get OptinMonster Now. Jest to jasnozielony przycisk na niebieskim tle, bez widocznych innych zielonych elementów.

Kolor, rozmiar i kształt przyciągają uwagę, ponieważ to kontrastuje ze wszystkim innym w nagłówku. Bezpośrednio obok przycisku znajduje się mały link tekstowy do podglądu wideo. To prawdopodobnie świetny film i zasługuje na uwagę, ale nie tak bardzo, jak przycisk CTA próbny / rejestracyjny.

W przypadku bloga możesz mieć różne kwalifikacje do zaangażowania użytkownika. Jednym wspólnym wyborem jest a formularz rejestracji newslettera jak na przykład w Aeolidii.

Jeśli przewiniesz do dołu zawartości, zauważysz fantazyjne pudełko shmancy zaprojektowany tylko do formularza newslettera. Wyróżnia się od reszty strony za pomocą niepowtarzalny kolor tła, zabawna typografia i urocza ikona King Triton.

Najlepszym sposobem projektowania z kontrastem jest studiowanie przykładów i po prostu eksperymentowanie. Zobacz, co działa, a co nie metryki śledzenia z testami A / B. Jeśli szukasz więcej przykładów, sprawdź ten zapis Codrops pełen porad i ekranów na żywo asymetrycznych stron internetowych.

Zachęcaj do interakcji z użytkownikiem

Jest tak wiele sposobów na zainteresowanie odwiedzających witryną, ale najczęściej jest to zmusić ich do robienia rzeczy. Dotyczy to zarówno blogów statycznych, jak i dynamicznych serwisów społecznościowych. Nie ma w tym celu żadnych uniwersalnych sztuczek. Możesz zrobić wszystko, aby użytkownicy mogli czuć się zaangażowanym w stronę.

W strona statyczna, możesz dodać wiele powiązane linki do czytania więcej lub włącz pokazy slajdów. Możesz również dodaj formularze komentarze użytkowników lub biuletyn e-mail.

Jeśli chodzi o dynamiczne interfejsy, celem witryny jest zazwyczaj zachęcanie użytkowników do zaangażowania. Największą przeszkodą jest nauczanie użytkowników jak działa strona i jak właściwie współpracować z interfejsem.

Zapoznaj się z tym postem KissMetrics opowiadającym o technikach zaangażowania użytkowników. Jedną z najlepszych strategii, jaką znalazłem, jest zaprojektuj wycieczkę z przewodnikiem co prowadzi użytkowników przez każda z podstawowych funkcji.

Pomyśl o tym, jak myląca będzie perspektywa Twittera dla nowego użytkownika. Jeśli nie śledzą nikogo i nie mają żadnych zwolenników, dlaczego mieliby ćwierkać?

The “Postępuj zgodnie z sugestiami” pole podczas rejestracji pomaga nowym użytkownikom zapoznaj się z działaniem Twittera. Ta funkcja zapewnia nowe użytkownikom zacznij angażować z platformą i do eksperymentować z funkcjami takie jak poniżej, tweety i prywatne wiadomości.

Poza wycieczką z przewodnikiem również chcesz uczynić interfejs prostszym. Najważniejsze cechy powinny być 1-2 kliknięcia dalej z pulpitu użytkownika lub strony głównej. Intuicyjne interfejsy potrzebuję wyjaśnienia, i prostota przyciąga uwagę znacznie szybciej.

Dzięki zrozumieniu wszystkich tych technik będziesz mieć łatwiejszy interfejs do budowania czasu rozwiązywać problemy użytkowników, i zachęcaj nowych użytkowników do dołączenia. Jeśli szukasz więcej Wskazówki dotyczące zaangażowania w projekt UX sprawdź te powiązane posty:

• Taktyka dołączania użytkownika, aby zwiększyć zaangażowanie (thinkapps.com)
• Lekcja stopniowego zaangażowania (uxbooth.com)
• Nie zakładaj, że nowi użytkownicy chcą dowiedzieć się, jak korzystać z produktu (uxdesign.cc)