Mówią, że diabeł tkwi w szczegółach, ale nie jest to prawdą, jeśli chodzi o wrażenia użytkownika.

Dobra mikrointerekcja powinna ułatwić lub upiększyć żmudne zadanie w bardzo subtelny sposób-zła mikrointerekcja może zrujnować twoje wrażenia ze strony internetowej lub produktu. Nawet jeśli są “mikro”, nie oznacza to, że mikrointerakcje nie mogą mieć dużego wpływu na sposób, w jaki użytkownicy wchodzą w interakcję z Twoją witryną.

Mikrointerkcja odnosi się do każdej małej interakcji użytkownika z produktem. Na przykład wyłączenie alarmu w telefonie, a następnie przesunięcie (lub użycie odcisku kciuka), aby go odblokować, to dwie oddzielne mikrointerakcje.

Zwykle mikrointerkcje mają na celu pouczenie lub wyjaśnienie czegoś lub pomoc użytkownikom w wykonaniu działania lub zadania. Mikrointerkcje są po to, aby bezproblemowo integrować się z doświadczeniem użytkownika i je ulepszać—są po to, aby je uprościć.

Już omówiliśmy podstawy mikrointerakcji w poprzednim poście, ale teraz nadszedł czas, aby wprowadzić je w życie. Poniżej znajduje się kilka rodzajów przykładów mikrointerakcji i sposobów ich osiągnięcia w witrynie WordPress.

Wczytywanie tekstu lub ikon

Fajnie jest naciskać przyciski, zarówno w prawdziwym życiu, jak i w Internecie (chyba że przypadkowo nacisnąłeś przycisk Wyślij na niedokończonej wiadomości e-mail!). Zaimplementowanie interesującego efektu na formularzu lub przyciskach CTA może mieć duży wpływ na sposób interakcji użytkowników z Twoją witryną. Najlepsze jest to, że efekty hover nie muszą być zbyt skomplikowane.

Wtyczki formularzy, takie jak FORMULARZ KONTAKTOWY od WPForms, mają wbudowane ustawienia, które można łatwo dostosować, aby wyświetlić tekst ładowania, gdy ktoś wyśle formularz. Wszystko, co musisz zrobić, to uzyskać dostęp do ustawień i wprowadzić tekst, który ma być wyświetlany w formularzu podczas przetwarzania.

WP Forms submit button

Wynikająca z tego mikrointerkcja jest prosta.

WP Forms microinteraction

Chociaż nie wydaje się to dużo, ważne jest po prostu poinformowanie użytkowników o tym, że ich wiadomość jest w trakcie wysyłania. Jeśli użytkownik wybierze przycisk i nic się nie stanie, a załadowanie strony z podziękowaniem zajmie trochę czasu, może zacząć gorączkowo klikać przycisk Wyślij lub, co gorsza, odchodzić od strony. Mikro-interakcja przetwarzania jest miłym akcentem.

Istnieje kilka wtyczek jQuery, które pozwalają dodać bardziej złożone ikony ładowania do przycisków. Zarówno Button Loader, jak i Ladda oferują obszerną bibliotekę przycisków ładowania, które możesz dodać do swojej witryny WordPress.

Poniżej znajduje się krótki przykład użycia przycisku Ladda.

Po pobraniu i przesłaniu zarówno ladda./ min.js oraz obrót./ min.js pliki do WordPressa, zrób to samo z ladda./ min.css plik, który zawiera wszystkie przyciski.

Upewnij się, że ladda-button klasa jest przypisana do przycisku Ladda, a etykieta przycisku ma ladda-label klasy przypisane do niego. HTML związany z pojedynczym przyciskiem Łada (w tym przypadku przycisk, który rozszerzy się w prawo) wygląda mniej więcej tak:

Ładowanie gist raewrites / b748ed76e7081fbb861048ccf0404678

Na bind( ) metoda jQuery może być stosowana do formularzy, które przesyłają wpisy na serwer i skutkują przeładowaniem strony.

Ładowanie gist raewrites / 7e26b912270b98166b43c3794c72677d

Daje to następujący przycisk, który pozwala użytkownikom wiedzieć, że ich formularz jest przetwarzany!

Submit button with jQuery

Dodawanie podpowiedzi do formularzy

Podpowiedzi są świetne. Nie tylko dostarczają użytkownikom trochę dodatkowych informacji, ale ich animowanie sprawia, że użytkownik szybko nie zapomni o świetnej mikrointerakcji.

Możesz dodać fajną podpowiedź do tekstu ręcznie, używając odrobiny CSS lub instalując łatwe w użyciu wtyczki, takie jak Simple Tooltip lub WordPress Tooltip.

Ciekawym sposobem na poprawę komfortu użytkowania jest dodawanie podpowiedzi do formularzy, pól lub określonych ikon w witrynie. Magic Tooltips to świetna wtyczka do tego, jeśli używasz formularza kontaktowego 7 lub formularzy grawitacyjnych.

Możesz również użyć Tooltipster, który pozwala dostosować podpowiedzi w formularzach. Po pobraniu wszystkich plików, załadowaniu skryptów i aktywowaniu Tooltipstera możesz zacząć robić całkiem fajne rzeczy.

Jeśli możesz edytować pola formularza, możesz dołączyć klasę tooltip (class= "tooltip"), a następnie użyć title= "tooltip text". Jeśli jednak nie możesz edytować pól formularza, możesz wybrać identyfikator pola formularza. Na przykład, jeśli podasz pole imię i nazwisko id = " customernameID“, możesz dodać następujący skrypt do swojego tooltipster-Skrypty.js plik:

Ładowanie gist raewrites / 93c9d69632e54646ac30b40211e49a8f

Daje to następujący wynik:

Tooltip form

Sekret przydatnych podpowiedzi polega na tym, aby nie przesadzić. Dodawanie podpowiedzi do wszystkiego może naprawdę denerwować niektórych odwiedzających. Ważne jest, aby pamiętać, że mniej znaczy więcej, jeśli chodzi o mikrointerakcje.

Hover Interaction

Istnieje wiele sposobów dodawania efektów najazdu do przycisków, ale aby te efekty były znaczącą mikrointerkcją, musi istnieć rym lub powód. Skuteczna mikrointerkcja zapewnia użytkownikowi dodatkowy wgląd w to, co się stanie, jeśli kliknie przycisk.

Dostępnych jest wiele wtyczek, które pozwolą Ci bezproblemowo zintegrować efekty najechania na przyciski. Niektóre z nich to:

  • Microthemer Lite
  • Animuj To!
  • Niesamowite Efekty Hover Plugin

Możesz również przygotować zabawną mikrointeraccję za pomocą prostego CSS. Chcesz, aby po najechaniu kursorem na przycisk pojawił się inny tekst? Nie ma sprawy!

Pracuję z tematem Twenty Sixteen, ale chciałem dołączyć własny przycisk. Dodałem więc Niestandardowy CSS, aby utworzyć Czarny Przycisk, dla którego kursor zmieniłby kolor na biały z czarnym tekstem. Dodałem kawałek niestandardowego CSS w dodatkowej sekcji CSS w WordPress Customizer.

Najpierw zaprojektowałem mój podstawowy czarny przycisk:

Ładowanie gist raewrites / 4b24a95a59fc48eb05010b0830da5937

Następnie zastosowałem efekt najechania-zmianę koloru, a także zmianę, która nastąpiłaby między tekstem początkowym a tekstem najechania.

Ładowanie gist raewrites/1d6af8d76db159ed1ab68c043bbfbfcb

Zapisałem swoje zmiany, a następnie zastosowałem następujący kod HTML na stronie, na której chciałem, aby pojawił się przycisk.

Wczytywanie gist raewrites/2d71a92f3096039e46b4ecbf3a22e1ce

Voila! Znowu to samo.:

Możesz użyć tego prostego CSS do pracy ze wszystkimi rodzajami przycisków na swojej stronie; jednak dołączanie działań lub hiperłączy do przycisków jest samouczkiem na inny czas.

Mikrointerakcje Mediów Społecznościowych

Jeśli jesteś zwolennikiem szczegółów (które prawdopodobnie jesteś, jeśli czytasz ten post), zauważysz, że po podświetleniu fragmentu tekstu tego artykułu, który właśnie czytasz, dzieje się tak:

Twitter example

 

Po wybraniu ikony Twittera zostaniesz przekierowany na swoje konto na Twitterze, aby tweetować to, co właśnie podświetlono. Całkiem nieźle, prawda?

Istnieje wiele sposobów na dodanie tego typu mikrointerakcji do swojej witryny. Możesz wypróbować wtyczkę, taką jak Highlight and Share lub Quotable lub…możesz wypróbować naszą! Udostępniliśmy tutaj przewodnik krok po kroku, w jaki sposób można osiągnąć tę wspaniałą mikrointerwencję.

Jeśli nie jesteś duży na Twitterze, możesz spróbować dodać zabawne mikrointerakcje dla innych stron społecznościowych, takich jak Facebook. Wtyczka FB cytat pozwala udostępniać wyróżniony tekst na Facebooku w ten sam sposób, w jaki robi to nasza wtyczka Twitter.

Mikrointerpretacje

Jeśli pragniesz czegoś w tym samym duchu, co mikrointerakcje mediów społecznościowych (ale nie do końca!), nie martw się-mamy Cię.

Dodawanie konfigurowalnych polubień do postów WordPress to świetna zabawa, mała mikro interakcja, która pozwala czytelnikom i odwiedzającym naprawdę … dobrze, interact z Tobą.

Likes example

Dwie ciekawe wtyczki, które pozwalają na to są ZillaLikes i polecam to. Obie wtyczki pomagają dodawać jak serca lub polecać ikony do postów WordPress.

Po zainstalowaniu ZillaLikes możesz dodać [zilla_likes] shortcode na swoich stronach lub postach lub dodaj następujący kod PHP, aby dodać licznik podobny do plików szablonów.

Ładowanie gist raewrites / f250b14bcb96f97a59d1493d2a0078d4

Zawsze miło jest mieć element, z którym masz do czynienia na bieżąco, zachowujący się w ciekawy sposób. Nawet jeśli “ciekawy sposób”jest tylko małą animacją, znacznie poprawia wrażenia użytkownika z witryny.

Wrapping Up

Mikrointerakcje są po to, aby ułatwić życie użytkownikowi. Ważne jest, aby nie dać się ponieść zbyt wielu sztucznym mikro interakcjom, które mogą zakłócać, a nie instruować. Twoje mikrointerakcje powinny ułatwiać działania i zadania, a jednocześnie bezproblemowo integrować się z ogólnym projektem witryny—nigdy nie powinny być głównym celem.

Jak wykorzystałeś mikrointerakcje na swojej stronie? Podziel się swoimi ulubionymi przykładami mikrointerakcji w komentarzach poniżej!

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…