W artykule:
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.
Wynikająca z tego mikrointerkcja jest prosta.
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:
Na bind( ) metoda jQuery może być stosowana do formularzy, które przesyłają wpisy na serwer i skutkują przeładowaniem strony.
Daje to następujący przycisk, który pozwala użytkownikom wiedzieć, że ich formularz jest przetwarzany!
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:
Daje to następujący wynik:
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:
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.
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.
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:
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ą.
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.
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.
Tagi:
