Jak prowadzić UX z interaktywnym opowiadaniem
Niektóre historie po prostu nie mogą być w pełni przekazane za pomocą statycznych obrazów. W takich przypadkach pomocne może okazać się bezpośrednie zaangażowanie użytkownika w historię.
W tym podsumowaniu projektu szczególną uwagę zwróciliśmy na interaktywne opowiadanie historii: sposób, w jaki strony internetowe mogą przyciągnąć Cię do swojego świata i przekazać wiadomość dzięki dynamicznej i interaktywnej technologii oraz funkcjom projektowania.
Wystarczy spojrzeć na poniższe przykłady i przekonać się, w jaki sposób ich wykorzystanie interaktywnej interaktywności zmusza Cię jako użytkownika do kontynuowania przewijania lub podejmowania określonych działań.
El Monstruo: pokonanie potwora za pomocą tekstu
El Monstruo jest partnerstwem pomiędzy UNICEF i ING Direct w celu promowania darowizn na rzecz szkół w krajach rozwijających się. Strona przenosi Cię w animowaną podróż do życia grupy dzieci w wieku szkolnym - których ściga od szkoły potworny potwór. Gdy El Monstruo goni cię w przepaść klifu, wchodzi interaktywna opowieść.
Na ekranie pojawia się opcja przekazania 1,20 EUR dzieciom szkolnym (np. UNICEF) za pośrednictwem wiadomości SMS. Jeśli zdecydujesz się przekazać darowiznę, animacja będzie kontynuowana ze szczęśliwym zakończeniem - jeśli nie, dobrze ...
Potwór jest prostą metaforą przedstawiającą przeszkody, jakie wiele dzieci w wieku szkolnym zmaga się z uzyskaniem wykształcenia, a włączenie gościa do serwisu w ten sposób zapewnia mu natychmiastową nagrodę za ich hojność. Używa interaktywnego projektu w sposób, który naprawdę dociera do poczucia empatii ludzi.
Niewolnictwo ślad: wykonaj następujące kroki
Ilu niewolników pracuje dla ciebie? To proste pytanie, które jest początkiem podróży przez łańcuch dostaw i pracy przymusowej we współczesnym świecie. Slavery Footprint opowiada o tym, jak można wspierać niewolnictwo, nawet bez zakupów bezpośrednio od firm, które wykorzystują sweatshops. Wyjaśniają ten łańcuch pracy za pomocą interaktywnych, przewijanych infografik.
Ale zamiast wyjaśniać ten proces w teorii, Slavery Footprints przeprowadza szybką ankietę, która oblicza, jak bardzo polegasz na pracy niewolniczej, opartej na czynnikach, takich jak jedzenie, które spożywasz, nieruchomość, w której mieszkasz i kraj, z którego pochodzisz.
Slavery Footprint to nie tylko opowieść o współczesnym stanie niewolniczej pracy - używa interaktywnego projektu, analizy danych i pomiarów, aby wprowadzić Cię w historię jako czynnik przyczyniający się. To fantastyczny sposób, aby dotrzeć do każdego odwiedzającego witrynę na poziomie indywidualnym.
Elastyczny: SEO haves and have nots
Giętki jest agencją marketingu cyfrowego, która pomaga przedsiębiorstwom osiągnąć lepszy wynik w Google dzięki optymalizacji pod kątem wyszukiwarek. Wynika z tego, że ich strony wyjaśniające SEO powinny być możliwie jak najbardziej angażujące dla potencjalnych klientów.
Dzięki inteligentnemu wykorzystaniu podświetlanych, gorących punktów, które odwiedzający mogą kliknąć, aby ujawnić kluczowe informacje o niektórych aspektach obrazów strony i infografikach, strona zaprasza odwiedzających do głębszego wkroczenia w świat SEO. Jest animacja SVG, która zapewnia dynamiczną dynamikę strony i przesuwający pasek nad niektórymi obrazami, co pozwala spojrzeć na kod HTML za zoptymalizowaną stroną.
Objaśnienie początków
Pierwsze rzeczy pierwsze: Inception IS to świetny film. Ale jest też mylące jak diabli . na szczęście ta strona internetowa przeprowadzi Cię przez fabułę dzięki prostemu, interaktywnemu opowiadaniu. Witryna koloruje kod każdego klawisza, a podczas przewijania strony warstwy snów w snach są reprezentowane jeden na drugim.
Wyskakujące okienka z napisami, objaśniające każdy poziom, w którym znajdują się wymarzone postacie i inne niezbędne informacje. Jest to bardzo prosty przykład interaktywnego opowiadania - witryna pozwala poruszać się po fabule we własnym tempie. Co tak naprawdę pomaga w przypadku filmu tak mylącego jak Inception!
Coin: jedna karta, która rządzi wszystkimi
Czy twój portfel pęka w szwach z kartami kredytowymi? Moneta to pojedyncza karta, na którą możesz przesłać i zapisać wszystkie swoje karty kredytowe. Wystarczy przewinąć zapisane karty, wybrać jedną, a następnie przesunąć, włożyć tap-n-go tak, jak przy każdej innej karcie.
Całe rozumowanie produktu polega na połączeniu wszystkich twoich kart w jedno dogodne miejsce - i jest to prosta wiadomość, która jest przedstawiona wizualnie w jeszcze prostszy sposób. Gdy przewijasz stronę w dół, bałagan z kartami układa się razem i przekształca w Moneta. To schludne, minimalistyczne opowiadanie i bardzo przekonujące.
Bellroy: schudnij talię swojego portfela
Chociaż jesteśmy na temat odchudzania w portfelu, warto rozważyć wygaszenie samego portfela , a nie tylko jego zawartości. Portfele Bellroy są specjalnie zaprojektowane, aby zajmować mniej miejsca, nawet jeśli są wypełnione taką samą ilością kart, jak inne portfele.
Aby to pokazać, strona internetowa Bellroy zapewnia odwiedzającym witrynę skalę ruchomą - od zera do dziesiątki - i oferuje porównanie między Bellroy i ich konkurentami. Oprócz garstki innych fantastycznych interaktywnych animacji, strona Bellroya wnosi trochę zaangażowania gości w to, co zwykle jest bardzo nudną demonstracją Us vs. The Competitors.
Babel the King: pada deszcz kotów
Babel the King to interaktywna historia dostępna w sklepach iTunes. Łącząc tekst, dźwięk, animację i elementy interaktywne, gra przenosi dzieci w wieku 2-8 lat do cudownego świata Babel, kota, który jest zazdrosny o chmury i spędza całe dnie próbując je zdenerwować.
Strona z historią / grą oferuje smak tego, co jest dostępne w pobranym pliku. Kiedy przewijasz stronę, Babel wpada przez niebo wzdłuż ciebie i owiec wędruje bezważnie po chmurach.
Strona internetowa jest pełna ruchu i życia i oferuje świetne studium przypadku, które naprawdę synchronizuje twoją stronę z produktem, który sprzedajesz.
Podróż Bon: Akita pokazuje nam, jak dane podróżują po kuli ziemskiej
Wiadomość e-mail może się wydawać dość natychmiastowa, ale w jaki sposób jest ona przesyłana z komputera jednej osoby do drugiej? Serwis wsparcia IT Akita opracowała podróż krok po kroku wyjaśnić, jak dane podróżują po całym świecie.
Witryna umożliwia przewijanie w poziomie w czasie podróży e-mailem, przenosząc komputer z linii telefonicznej na centralę telefoniczną do centrum danych i wiele więcej! Jest to łatwe, interaktywne wyjaśnienie danych ruchów, które przechodzą na całym świecie.
Ben The Bodyguard
Ben The Bodyguard to aplikacja na iPhone'a, która pomaga szyfrować i chronić prywatne informacje na urządzeniu. Oznakowanie aplikacji koncentruje się wokół postaci "Bena", ochroniarza, który nie ma sobie równych, by chronić ludzi.
Gdy przewijasz stronę, Ben idzie w dół ciemną (i podejrzanie wyglądającą) ulicą, wyjaśniając niebezpieczeństwa, że twoja prywatna informacja wpadnie w niepowołane ręce. To wspaniałe opowiadanie historii, z prostym założeniem (prywatna aplikacja uosobiona jako ochroniarz) z interaktywnym przewijaniem w celu dostarczenia aplikacji.
Nissan Note
Aby sprzedać swój nowy model samochodu, Notatka Nissana Nissan zastosował animację przewijania, przypominającą staroświecką klapkę. Zamiast uruchamiać wideo, witryna wyświetla siatkę paneli wyświetlających obrazy, które zmieniają się nieznacznie podczas przewijania w dół.
W efekcie odwiedzający stronę mogą stworzyć film we własnym tempie. To interaktywna opowieść o cechach samochodu i rodzinie podróżującej po okolicy do miasta. Baw się dobrze i zobacz, co myślisz!
Every Last Drop: ciekawa opowieść o marnotrawstwie wody
Strona internetowa zabierze Cię przez cały dzień korzystania z wody, od wody używanej pod prysznicem po całkowitą ilość wody zużywanej do produkcji odzieży i jedzenia. Jest to prosta, przewijana historia, która zabierze Cię w pouczającą podróż w kosmos!
Przy tak dużej ilości wody zużywanej w ciągu jednego dnia historia kończy się na przejmującej uwadze, że ponad miliard ludzi nie ma codziennego dostępu do czystej wody pitnej. Korzystanie z interaktywnego opowiadania w celu dostarczenia potężnego przekazu, jest doskonałym przykładem tego, czego może nas nauczyć dobry projekt.
The Boat: wstrząsająca opowieść o ucieczce i schronieniu
Opowiadanie Nam Le'a, " The Boat" zostało przekształcone w interaktywna powieść graficzna w sbs.com.au , rzucając cię w świat rozklekotanej łodzi walczącej z pełną siłą oceanu, kiedy ucieka przed okropnościami wojny w Wietnamie.
Wykorzystanie tekstu, projektu dźwiękowego, ilustracji i animacji jest świadectwem tego, co może osiągnąć interaktywne opowiadanie historii. Niezapomniana chwila polega na tym, że tekst i ilustracje są wrzucane w górę iw dół strony, a postacie w nich zawarte robią to samo podczas podróży oceanicznej.
Wciągająca i emocjonalna, ta opowieść o przeżyciu musi być po prostu doświadczona.