10 zabawnych sposobów wykorzystania elementu zaskoczenia w projekcie witryny

Wiedziałeś, że Rick Astley ‘s” Never Gonna Give you Up ” skończył 30 lat w tym roku? Nawet jeśli ta nazwa nie brzmi znajomo, istnieje duże prawdopodobieństwo, że przypadkowo spotkałeś się z teledyskiem do niego w pewnym momencie, dzięki rickrollowi.

[youtube https://www.youtube.com/watch?v=dQw4w9WgXcQ?rel=0&w=560&h=315]

A może jesteś bardziej zaznajomiony z labirynt gry prank z około 10 lat temu? Znasz ten, o którym mówię: siedzisz w pracy, twój przyjaciel nalega, że musisz wypróbować fajną grę, a potem każą Ci grać, mimo że skrzynka odbiorcza żądań klientów czeka na ciebie. (Przy okazji, to jest całkowicie hipotetyczna sytuacja, a nie taka, która mi się przytrafiła.)

Następnie, gdy ostrożnie przechodzisz przez labirynt, myśląc, że masz zamiar pobić wynik swojej przyjaciółki, Lindy Blair z Egzorcysta wyskakuje i krzyczy zbyt głośno na Ciebie z komputera w pracy.

[youtube https://www.youtube.com/watch?v=0WjDrQ0IhBw?rel=0&w=560&h=315]

Rickrolling i Jump-scare figle nie mogą być już najmodniejsze memy. Jednak oba są świetnymi przykładami tego, jak wykorzystać element zaskoczenia, aby zaskoczyć, szokować i mam nadzieję zaimponować publiczności.

Jako programista stron internetowych wiesz, że minimalizm rządzi (tak jak powinien). Moim zdaniem to strategiczne wykorzystanie białej przestrzeni przeplatanej treścią stanowi doskonałą okazję do zaskoczenia odwiedzających czymś nieoczekiwanym. Nie mówię, że musisz rickroll swoich gości lub całkowicie przestraszyć ich z filmu skoku przestraszyć. Istnieje wiele innych sposobów, aby dać im trochę potrząsnąć i obudzić ich z wycieczki, którą spodziewają się otrzymać za pośrednictwem Twojej witryny.

W dzisiejszym podsumowaniu omówię sposoby 10, które możesz dodać element zaskoczenia do swojej witryny WordPress, a także dołączę kilka fajnych przykładów tego, jak inni zrobili to dla własnych celów.

10 sposobów na wykorzystanie elementu zaskoczenia w WordPress

Spójrzmy prawdzie w oczy. Odwiedzający wiedzą, czego mogą się spodziewać w dzisiejszych czasach pod względem strony internetowej. Duży projekt nagłówka. Hamburger menu na komórkę. Kontakt i o stronach. Może widżet referencje.

Nie ma nic ekscytującego w spotkaniu z przewidywalnym doświadczeniem strony internetowej. Ale nie ma w tym absolutnie nic złego. Odwiedzający doceniają spójność i przewidywalność. Ale czy nie byłoby fajnie zwabić ich z tym oczekiwaniem, a następnie móc zaskoczyć ich losowym elementem, który sprawia, że myślą: “Cóż, to było naprawdę inne/zabawne/niesamowite”?

Istnieje wiele sposobów wykorzystania elementu zaskoczenia w projektowaniu stron internetowych. Zbyt wiele z nich byłoby oczywiście złym posunięciem pod względem UX, ale znalezienie właściwej wskazówki (i takiej, która dobrze współgra z tożsamością Twojej marki) może zwiększyć zainteresowanie odwiedzających o więcej niż kilka wycięć.

Oto kilka pomysłów:

1. Dołącz ukrytą wiadomość do swoich projektów

Ciągle jestem zaskoczony, jak wiele firm ukrywa obrazy w swoich logo. FedEx arrow i Amazon A-to-Z są prawdopodobnie najbardziej znanymi tego przykładami.

Element of Surprise - Amazon logo
Logo Amazon od A do Z “smile”

Jeśli jesteś w punkcie, w którym projektujesz stronę internetową, jednak prawdopodobnie jest za późno, aby cokolwiek zrobić z dodaniem ukrytej wiadomości w swoim logo. Dopóki nie nadejdzie czas na zmianę marki, zastanów się, jak możesz wprowadzić ukrytą wiadomość lub obraz związany z marką do projektów, zdjęć, maskotek, a nawet tekstu.

2. Osłodź ofertę w popup lub hello bar

W przypadku firm e-commerce istnieje wiele możliwości rozdania czegoś za darmo lub po obniżonej cenie. Ale, jak wiesz, nie będzie to miało większego wpływu (ani różnicy na wyniki finansowe), jeśli rzucisz te oferty na każdą osobę, gdy tylko wejdzie na Twoją stronę.

Dlatego mamy idealnie dopasowane pop-upy, a także dyskretne bary hello, aby obsłużyć te słodziki. PinkBlush korzysta z obu opcji w nadziei na przyciągnięcie odwiedzających w obu lokalizacjach oferujących specjalne oferty.

Element of Surprise - PinkBlush
PinkBlush wykorzystuje zaskakujące rabaty.

3. Dodaj humorystyczny akcent do swojego BIOSu

Strona o stronie internetowej może stać się bardzo sucha, bardzo szybko. To niczyja wina. Większość ludzi skłania się ku biografii w stylu “Jestem Dave i piszę kod na życie”, która jest wystarczająco dobra. Jest zwięzły i dokładny i nie zmusza odwiedzających do przeczytania akapitu Dave ‘ a-długiego opisu o tym, jak udał się do Rutgers, przeniósł się do Kolorado, ale potem zdecydował, że wschodnie wybrzeże jest najlepszym wybrzeżem (ponieważ jest).

Niezależnie od tego, czy Twoim celem jest, aby ludzie rzeczywiście czytali bios Twojego zespołu, czy nie, ta strona jest niesamowitym miejscem do zaprezentowania zabawnej strony ludzi, którzy za nią stoją. Weźmy na przykład to, co robi Wistia. Wpisz słowo “taniec”, a zobaczysz tę zabawną animację dla siebie.

Przed:

Element of Surprise - Wistia Before
Zespół wistii przed wpisaniem komendy “taniec”.

Po:

Element of Surprise - Wistia After
Zespół wistii po wpisaniu polecenia “taniec”.

4. Tworzenie nietradycyjnego efektu przewijania

Każdy wie, jak wygląda statyczny Projekt strony internetowej i powiedziałbym, że większość ludzi zna teraz przewijanie paralaksy. Jeśli więc jesteś fanem ruchów wywołanych przewijaniem, jest to świetna zabawa.

Jeden z moich ulubionych pochodzi z Made by Few. Jeśli przewiniesz stronę główną w dół, możesz pomyśleć, że to tylko tradycyjna statyczna strona internetowa, ale wtedy UPS! Twoja mysz lub palec przypadkowo wpada w szał i zauważysz, że tłum ludzi kołysze się tam iz powrotem i dookoła, tak jak ty.

Element of Surprise - Made by Few
Zrobione przez kołyszący się tłum.

5. Zdobądź poparcie celebrytów

Jeśli myślisz, że nie ma możliwości, aby ktoś taki jak Britney Spears poparł Cię jako swojego dewelopera WordPress z wyboru, to prawdopodobnie masz rację. Nie oznacza to jednak, że ty lub twoi klienci nie natkniecie się kiedyś na naprawdę fajną okazję poparcia dla celebrytów lub influencerów.

BBC reprzeniesiony na kilka przykładów tego, jak małe firmy były w stanie wykorzystać reklamy wielkich firm, aby pomóc rozwijać swoje firmy, co prawdopodobnie zszokowało odwiedzających ich witrynę tak samo, jak ludzi prowadzących te firmy. Oto film akcji, który Bronson nakręcił na bożonarodzeniowe kroki w zamian za darmowy posiłek i czas w ich kuchni:

[youtube https://www.youtube.com/watch?v=vHjWVoUZ9pA?rel=0&w=560&h=315]

6. Dodaj trochę rozrywki

Grywalizacja nigdzie nie idzie w projektowaniu stron internetowych, zwłaszcza, że siła nabywcza millenialsów wzrasta, a generacja Z przenosi się do klasy konsumenckiej. Tak więc, jeśli przegapiłeś raport WPMU DEV na temat dodawania gamifikacji do swojej witryny WordPress po raz pierwszy, sprawdź to teraz.

Możesz też czerpać inspirację z losowej, aktywowanej spacją gry dinozaury, w którą możesz grać za każdym razem, gdy stracisz połączenie z Internetem:

Element of Surprise - Google dinosaur game
Kto nie chciałby, aby Internet upadł bardziej tylko po to, aby zagrać jeszcze raz?

7. Daj swoim wezwaniom do działania nieoczekiwaną animację

Mów o przewidywalnym doświadczeniu. Wiesz, że odwiedzający w końcu dotrą do wezwań do działania i formularzy kontaktowych Twojej witryny. I wiesz, że wielu z nich będzie skłonnych do nawrócenia, nawet jeśli nie dodasz odrobiny czegoś nieoczekiwanego do doświadczenia.

A jeśli tak? Czy nie byłby to świetny sposób, aby zatrzymać ich i zastanawiać się, jakie inne niespodzianki masz dla nich w zanadrzu?

ReadMe dodał ten rodzaj animacji “niespodzianka” do swoich formularzy kontaktowych i jest to całkiem cholernie fajne.

Ich maskotka Sowa wskazuje palcem na każde z pól wejściowych, gdy wypełniasz je na stronie rejestracji.

Element of Surprise - ReadMe Registration
Sowa ReadMe pokazuje, nad którymi polami pracujesz.

Sowa staje się trochę bezczelna na stronie logowania, gdy zamyka oczy podczas wpisywania hasła.

Element of Surprise - ReadMe Password
Sowa ReadMe nie będzie podglądać podczas wpisywania hasła.

8. Ukryj coś w kodzie źródłowym

Jako programista stron internetowych wiesz, że kluczem do budowania stron internetowych, które działają dobrze, jest pisanie czystego kodu. Dlatego często korzystasz z wcześniej napisanych bibliotek CSS i JavaScript, aby usprawnić proces oraz upewnij się, że dodajesz zakodowane funkcje i funkcje, które działają.

Ale ile to dla Ciebie zabawy? Oczywiście, Twoi odwiedzający będą czerpać korzyści z Twoich pięknie zakodowanych witryn, ale w zasadzie jest to dla ciebie ta sama stara rzecz, dzień w dzień.

Tak więc, dla tej sugestii, myślę, że jest to dobra okazja, aby wyrwać się z koleiny i wrzucić trochę zabawy do kodu źródłowego swoich stron internetowych. Może nie trzeba tego robić na każdej stronie i może to być tylko dla ciebie, ale nadal jest to zabawny sposób na dodanie czegoś zaskakującego, co może odkryć i docenić tylko kilka innych osób myślących technologicznie.

Coca-Cola to robi:

ise-Coca-Cola-kod źródłowy.png ” alt=” Element of Surprise – Coca-Cola source code”width=” 1050″height =” 469 ” />wiadomość o tajnym kodzie źródłowym Coca-Coli.

Podobnie jak PayPal:

Element of Surprise - PayPal source code
Wiadomość z tajnym kodem źródłowym PayPal.

Tak jak Kanye West:

Element of Surprise - Kanye West source code
Tajny kod źródłowy Kanye Westa.

9. Ukryj coś na widoku

Jeśli podoba Ci się pomysł tych cyfrowych pisanek, ale chcesz coś, czym możesz podzielić się z odwiedzającymi na stronie, zobacz, co zrobił Kickstarter:

Element of Surprise - Kickstarter Scissors
Czy kiedykolwiek zauważyłeś pisankę Kickstartera?

Jeśli przewiniesz stronę na dół, zobaczysz ikonę nożyczek w lewym dolnym rogu. Kliknij na niego, aż pojawi się wiadomość niespodzianka:

Element of Surprise - Kickstarter Contact Form
Kickstarter zdecydowanie znalazł unikalny sposób na pozyskanie nowych subskrybentów.

Jeśli o tym pomyślisz, jest to całkiem sprytny sposób na użycie pisanki na swojej stronie. Oczywiście, może to być wyłącznie dla celów rozrywkowych, ale Kickstarter zrobił wielką ujawnienie … formularz kontaktowy? Tak, jest to Formularz kontaktowy i prawdopodobnie taki, na który Wiele osób jest chętnych zapisać się ze względu na wyjątkowy sposób, w jaki został im dostarczony.

Jak powiedziała Laura Filton z Hubspot:

“Mam wrażenie, że pisanki są częścią osobowości “dewelopera”. Są to bardzo inteligentni ludzie, którzy uwielbiają rozwiązywać zagadki, a zawiłości ich pracy nie są w pełni doceniane przez większość klientów korzystających z ich produktu. Więc ukrywając pisankę, mogą nagrodzić klientów, którzy podejmują tę dodatkową inicjatywę, aby naprawdę zagłębić się i docenić oprogramowanie—i to, co się dzieje w jego tworzeniu.”

10. Wrzuć coś przypadkowego do cholery

Ten ostatni właśnie niedawno odkryłem i szczerze mówiąc nadal jestem tym zaskoczony, ponieważ ile czasu spędzam w asanie każdego dnia. Jednak teraz, kiedy Wiem, że tam jest, Jestem za to bardzo wdzięczny. To taka pozornie nieistotna niespodzianka i nie przyczynia się do poprawy moich doświadczeń w korzystaniu z aplikacji produktywności, ale sprawia, że jestem tak śmiesznie szczęśliwy.

Oto, co zrobiła Asana:

Przejdź do ustawień mojego profilu. Kliknij na karcie hacki i przełącz na karcie + B hack.

Element of Surprise - Asana Tab+B
Nie ignoruj asany tab + B hack.

Przeładuj asanę, aby zastosować zmiany… a następnie naciśnij Tab + B tyle razy, ile chcesz.

Element of Surprise - Asana tabbies
Czy niespodzianka asany jest konieczna? Nie. Czy to jest absolutnie cudowne? Tak.

Nawet jeśli nie jesteś fanem kotów, nie możesz pomóc, ale chichotać z ton nowy tabby (get it: Tab-B / tabby), który pojawia się na ekranie z każdym wykonaniem Tab+B.

Wrapping Up

Szczerze mówiąc, nie każdy pomysł na biznes będzie niezwykle innowacyjny lub intrygujący, a mimo to wciąż istnieje zapotrzebowanie na te usługi lub produkty. Tylko dlatego, że projektujesz witrynę WordPress dla księgowego lub dla butelek z wodą dla psów, nie oznacza, że całe doświadczenie na miejscu musi być tak waniliowe, jak stojący za tym biznes.

To powiedziawszy, świetnym sposobem na dodanie odrobiny motywacji do swojej witryny WordPress jest tchnięcie w nią elementu zaskoczenia. Oczywiście musi to być istotne w kontekście. To, co działało dla powyższych marek, może nie działać dla ciebie, więc poświęć trochę czasu, aby dowiedzieć się, które elementy w Twojej witrynie byłyby idealne do zabawy.

Pamiętaj: nigdy nie chcesz frustrować, dezorientować lub denerwować odwiedzających. Dodanie elementu zaskoczenia tylko dla czynnika wstrząsu może całkowicie obalić, więc użyj tego elementu mądrze i pomyśl o tym, jak może to pozytywnie wpłynąć na ich wrażenia.

Tagi: