Πώς να Drive UX με Interactive Storytelling
Ορισμένες ιστορίες απλά δεν μπορούν να μεταφερθούν πλήρως μέσω στατικών εικόνων. Σε αυτές τις περιπτώσεις, μπορεί να είναι χρήσιμο να υπολογίσετε έναν τρόπο άμεσης συμμετοχής του χρήστη στην ιστορία.
Σε αυτή τη ροή του σχεδιασμού, έχουμε ρίξει μια ιδιαίτερη ματιά στη διαδραστική αφήγηση: ο τρόπος με τον οποίο οι ιστότοποι μπορούν να σας τραβήξουν στον κόσμο τους και να παραδώσουν το μήνυμά τους μέσω της δυναμικής δυναμικής και διαδραστικής τεχνολογίας και σχεδιαστικών χαρακτηριστικών.
Απλά ρίξτε μια ματιά στα παρακάτω παραδείγματα και δοκιμάστε πώς η χρήση της οπτικής διαδραστικότητας τους αναγκάζει ως χρήστη να συνεχίσει την κύλιση ή να λάβει μια συγκεκριμένη ενέργεια.
El Monstruo: καταστρέφει το τέρας με ένα κείμενο
El Monstruo είναι μια συνεργασία μεταξύ της UNICEF και της ING Direct για την προώθηση των δωρεών σε σχολεία στις αναπτυσσόμενες χώρες. Ο ιστότοπος θα σας οδηγήσει σε ένα ζωντανό ταξίδι στη ζωή μιας ομάδας μαθητών - οι οποίοι εκδιώχθηκαν μακριά από το σχολείο τους από ένα άγριο τέρας. Καθώς το El Monstruo σας κυνηγάει στο γκρεμό ενός γκρεμού, μπαίνει η διαδραστική αφήγηση.
Μια επιλογή για δωρεά € 1,20 στους μαθητές (π.χ. UNICEF) μέσω SMS εμφανίζεται στην οθόνη. Αν επιλέξετε να δωρίσετε, η κινούμενη εικόνα συνεχίζεται με ένα ευτυχές τέλος - αν όχι, καλά ...
Το τέρας είναι μια απλή μεταφορά που αντιπροσωπεύει τα εμπόδια που πολλοί μαθητές αντιμετωπίζουν να πάρουν την εκπαίδευσή τους, και με τη συμμετοχή του επισκέπτη της τοποθεσίας με αυτόν τον τρόπο τους δίνει μια πιο άμεση ανταμοιβή για τη γενναιοδωρία τους. Χρησιμοποιεί διαδραστικό σχεδιασμό με τρόπο που πραγματικά φτάνει στην αίσθηση της συμπάθειας των ανθρώπων.
Αποτύπωμα δουλείας: ακολουθήστε τα βήματα
Πόσοι δούλοι εργάζονται για σας; Είναι αυτή η απλή ερώτηση που είναι η αρχή ενός ταξιδιού μέσω της αλυσίδας προσφοράς και της καταναγκαστικής εργασίας στον σύγχρονο κόσμο. Το Slavery Footprint σας περιγράφει πώς θα μπορούσατε να υποστηρίζετε τη δουλεία, ακόμα και χωρίς να αγοράζετε απευθείας από εταιρείες που χρησιμοποιούν sweatshops. Εξηγούν αυτή την αλυσίδα εργασίας μέσω διαδραστικών ενημερωτικών φυλλαδίων.
Αλλά αντί να εξηγήσουμε αυτή τη διαδικασία θεωρητικά, τα Slavery Footprints τρέχουν μια γρήγορη έρευνα που υπολογίζει πόσο βασίζεστε στην εργασία των σκλάβων, με βάση παράγοντες όπως το φαγητό που τρώτε, το ακίνητο στο οποίο ζείτε και τη χώρα από την οποία βρίσκεστε.
Το Scratch Footprint δεν σας λέει απλώς μια ιστορία για τη σύγχρονη κατάσταση της δουλεμικής εργασίας - χρησιμοποιούν το διαδραστικό σχεδιασμό, την ανάλυση δεδομένων και την τοπογραφία για να σας φέρουν στην ιστορία ως παράγοντα που συμβάλλει. Είναι ένας φανταστικός τρόπος να προσεγγίσετε κάθε επισκέπτη του ιστότοπου σε ατομικό επίπεδο.
Supple: Το SEO έχει και δεν έχει
Ευλύγιστος είναι ένα πρακτορείο ψηφιακού μάρκετινγκ που βοηθά τις επιχειρήσεις να κατατάσσονται καλύτερα στο Google μέσω της βελτιστοποίησης μηχανών αναζήτησης. Συνεπώς, η σελίδα τους που εξηγεί το SEO πρέπει να είναι όσο το δυνατόν πιο δυναμική για τους δυνητικούς πελάτες.
Μέσω της έξυπνης χρήσης των φωτιζόμενων ζεστών σημείων, τα οποία οι επισκέπτες μπορούν να κάνουν κλικ για να αποκαλύψουν βασικές πληροφορίες σχετικά με ορισμένες πτυχές των εικόνων και των ενημερωτικών δεδομένων της σελίδας, ο ιστότοπος καλεί τους επισκέπτες να σκάψουν λίγο βαθύτερα στον κόσμο του SEO. Υπάρχει animation SVG για να δώσει τη σελίδα δυναμική ζωντάνια και μια συρόμενη μπάρα πάνω σε μερικές εικόνες που σας επιτρέπουν να ρίξετε μια ματιά στο HTML πίσω από έναν βελτιστοποιημένο ιστότοπο.
Αρχή Επεξήγηση
Πρώτα πράγματα πρώτα: Η αρχή είναι μια μεγάλη ταινία. Αλλά είναι επίσης συγχέοντας ως κόλαση . Ευτυχώς αυτόν τον ιστότοπο σας περπατά μέσα από το οικόπεδο με απλή, διαδραστική αφήγηση. Το site-χρώμα-κωδικοποιεί κάθε βασικό χαρακτήρα, και καθώς κάνετε κύλιση προς τα κάτω τη σελίδα, τα στρώματα των ονείρων μέσα στα όνειρα αντιπροσωπεύονται το ένα πάνω στο άλλο.
Τα pop-up λεζάντες, εξηγώντας κάθε επίπεδο, των οποίων οι χαρακτήρες των ονείρων είναι και άλλες απαραίτητες πληροφορίες. Αυτό είναι ένα πολύ απλό παράδειγμα διαλογικής αφήγησης - ο ιστότοπος σάς επιτρέπει να προχωρήσετε στην ιστορία με το δικό σας ρυθμό. Που πραγματικά, πραγματικά βοηθά με μια ταινία ως σύγχυση, όπως η αρχή!
Νομίσματα: μία κάρτα για να τις κυβερνήσεις
Είναι το πορτοφόλι σας γεμάτο από ραφές με πιστωτικές κάρτες; Κέρμα είναι μια ενιαία κάρτα που μπορείτε να ανεβάσετε και να αποθηκεύσετε όλες τις πιστωτικές κάρτες σας. Απλώς μετακινηθείτε στις αποθηκευμένες κάρτες, επιλέξτε ένα και, στη συνέχεια, σύρετε το δάχτυλό σας, εισάγετε το tap-n-go όπως θα κάνατε με οποιαδήποτε άλλη κάρτα.
Ολόκληρος ο συλλογισμός πίσω από το προϊόν είναι η τήξη όλων των καρτών σας σε ένα βολικό μέρος - και αυτό είναι ένα απλό μήνυμα που εκπροσωπείται οπτικά με ακόμη πιο απλό τρόπο. Καθώς κάνετε κύλιση προς τα κάτω στη σελίδα, ένα χάος καρτών στοιβάζονται μαζί και μετατρέπονται σε Coin. Είναι καθαρή, μινιμαλιστική αφήγηση και πολύ πειστική.
Bellroy: λεπτή γραμμή μέσης του πορτοφολιού
Ενώ είμαστε σχετικά με το θέμα του πορτοφολιού-αδυνατίσματος, μπορεί να θέλετε να εξετάσετε το αδυνάτισμα το ίδιο το πορτοφόλι και όχι μόνο το περιεχόμενό του. Bellroy πορτοφόλια έχουν σχεδιαστεί ειδικά για να καταλαμβάνουν λιγότερο χώρο, ακόμη και όταν είναι γεμάτοι με το ίδιο ποσό καρτών όπως και άλλα πορτοφόλια.
Για να το δείξει αυτό, ο ιστότοπος Bellroy δίνει στους επισκέπτες του ιστότοπους μια ολισθαίνουσα κλίμακα - από μηδέν έως δέκα - προσφέροντας μια παράλληλη σύγκριση μεταξύ του Bellroy και των ανταγωνιστών του. Μαζί με μια χούφτα άλλων φανταστικών διαδραστικών κινούμενων εικόνων, ο ιστότοπος του Bellroy φέρνει λίγη συμμετοχή του επισκέπτη σε αυτό που είναι συνήθως μια πολύ βαρετή διαδήλωση εναντίον των ανταγωνιστών.
Βαβέλ βασιλιάς: βρέχει γάτες
Βαβέλ βασιλιά είναι μια διαδραστική ιστορία διαθέσιμη μέσω των καταστημάτων iTunes. Συνδυάζοντας κείμενο, ήχο, κινούμενα σχέδια και διαδραστικά στοιχεία, το παιχνίδι παίρνει παιδιά ηλικίας 2-8 ετών στον θαυμάσιο κόσμο της Βαβέλ, μια γάτα που ζηλεύει τα σύννεφα και ξοδεύει τις ημέρες του προσπαθώντας να τους ενοχλήσει.
Ο ιστότοπος για την ιστορία / το παιχνίδι προσφέρει μια γεύση από αυτό που είναι διαθέσιμο από τη λήψη. Καθώς μετακινείτε προς τα κάτω τη σελίδα, η Babel πέφτει στον ουρανό δίπλα σας και το πρόβατο περνάει βαρύτατα στα σύννεφα.
Ο δικτυακός τόπος είναι γεμάτος κίνηση και ζωή και προσφέρει μια σπουδαία μελέτη περίπτωσης στην πραγματική συγχρονισμό της ιστοσελίδας σας με το προϊόν που πουλάτε.
Ταξίδι Bon: Η Akita μας δείχνει πώς τα δεδομένα ταξιδεύουν σε όλο τον κόσμο
Ένα μήνυμα ηλεκτρονικού ταχυδρομείου μπορεί να αισθάνεται σαν να στέλνεται αρκετά ακαριαία, αλλά πώς παίρνει πραγματικά από τον υπολογιστή ενός ατόμου στο άλλο; Η υπηρεσία υποστήριξης πληροφορικής Akita έχει αναπτύξει ένα βήμα προς βήμα για να εξηγήσει πώς τα δεδομένα ταξιδεύουν σε όλο τον κόσμο.
Ο ιστότοπος σας επιτρέπει να μετακινηθείτε οριζόντια μέσα από το ταξίδι ενός μηνύματος ηλεκτρονικού ταχυδρομείου, μεταφέροντάς σας από υπολογιστή σε τηλεφωνική γραμμή σε τηλεφωνικό κέντρο σε κέντρο δεδομένων και πολλά άλλα! Είναι μια αβίαστη, διαδραστική εξήγηση των δεδομένων των κινήσεων που περνά για να ταξιδέψουν σε ολόκληρο τον κόσμο.
Μπεν ο σωματοφύλακας
Μπεν ο σωματοφύλακας είναι μια εφαρμογή για το iPhone που σας βοηθά να κρυπτογραφήσετε και να προστατεύσετε ιδιωτικές πληροφορίες στη συσκευή σας. Το branding της εφαρμογής επικεντρώνεται στον χαρακτήρα του "Ben", ενός σωματοφύλακα με μια ασυναγώνιστη εμπειρία για την προστασία των ανθρώπων.
Καθώς μετακινηθείτε στη σελίδα, ο Ben περπατάει κάτω από έναν σκοτεινό δρόμο, καθώς εξηγεί τους κινδύνους που αφήνουν τα προσωπικά σας στοιχεία να πέσουν σε λάθος χέρια. Είναι μεγάλη αφήγηση, με μια απλή προϋπόθεση (μια εφαρμογή προστασίας προσωπικών δεδομένων προσωποποιημένη ως σωματοφύλακας) με διαδραστική κύλιση για την παράδοση του βήματος της εφαρμογής.
Nissan Σημείωση
Για να πουλήσουν το νέο μοντέλο αυτοκινήτων τους, τη σημείωση Nissan , Η Nissan χρησιμοποίησε κινούμενα σχέδια, που θυμίζουν παλιομοδίτικο βιβλίο. Αντί να προβάλλετε βίντεο, ο ιστότοπος εμφανίζει ένα πλέγμα από πίνακες που εμφανίζουν εικόνες που αλλάζουν ελαφρώς κατά την κύλιση προς τα κάτω.
Το αποτέλεσμα είναι ότι οι επισκέπτες της τοποθεσίας μπορούν να δημιουργήσουν μια ταινία με το δικό τους ρυθμό. Είναι μια διαδραστική ιστορία για τα χαρακτηριστικά του αυτοκινήτου και μια οικογένεια που ταξιδεύει στην ύπαιθρο προς την πόλη. Έχετε ένα παιχνίδι γύρω από αυτό και δείτε τι σκέφτεστε!
Κάθε Τελευταία Σταγόνα: μια ιστορία διαρροής νερού
Η ιστοσελίδα θα σας οδηγήσει σε μια μέρα χρήσης νερού, από το νερό που χρησιμοποιείτε στο ντους στο συνολικό νερό που χρησιμοποιείται για την παραγωγή των ρούχων και των τροφίμων σας. Πρόκειται για μια απλή, κυλιόμενη ιστορία που σας μεταφέρει σε ένα πληροφοριακό ταξίδι μέχρι το διάστημα!
Με τόση ποσότητα νερού που χρησιμοποιήθηκε σε μια μέρα, η ιστορία τελειώνει με μια αξιοσημείωτη σημείωση ότι πάνω από ένα δισεκατομμύριο άνθρωποι δεν έχουν καθημερινή πρόσβαση σε καθαρό πόσιμο νερό. Χρησιμοποιώντας τη διαδραστική αφήγηση για να παραδώσει ένα ισχυρό μήνυμα, είναι ένα καλό παράδειγμα του τι καλό σχέδιο μπορεί να μας διδάξει.
Το Σκάφος: μια ιστορία της στεγάδας και του καταφυγίου
Η βραβευμένη σύντομη ιστορία του Nam Le συλλέγει το σκάφος έχει μετατραπεί σε ένα διαδραστικό γραφικό πρωτότυπο στο sbs.com.au , σας ρίχνει στον κόσμο ενός καμαρωτού σκάφους που αγωνίζεται με την πλήρη δύναμη του ωκεανού καθώς ξεφεύγει από τη φρίκη του πολέμου του Βιετνάμ.
Χρησιμοποιώντας το κείμενο, τον σχεδιασμό ήχου, την απεικόνιση και την κίνηση, είναι μια απόδειξη για το τι μπορεί να επιτύχει η διαδραστική αφήγηση. Μια αξέχαστη στιγμή περιλαμβάνει το κείμενο και τα ίδια τα εικονογραφήματα που ρίχνονται πάνω και κάτω από τη σελίδα καθώς οι χαρακτήρες που απεικονίζονται σε αυτά κάνουν το ίδιο σε ένα θαλάσσιο ταξίδι.
Βίαιη και συναισθηματική, αυτή η ιστορία της επιβίωσης απλά πρέπει να βιωθεί.