4 τρόποι χρήσης λειτουργικού animation στο σχεδιασμό UI
Μόλις μια δεκαετία πριν, οι διεπαφές χρηστών που χρησιμοποιούσαν κινούμενα σχέδια αποφεύγονταν, συσχετίζονταν συνήθως με αναδυόμενα παράθυρα και αναβοσβήνει διαφημίσεις, αλλά αυτό άλλαξε. Σήμερα οι λεπτομέρειες της σχεδίασης αλληλεπιδράσεων και της κίνησης κάνουν μια θεμελιώδη διαφορά στις σύγχρονες ιστοσελίδες και στις σύγχρονες εφαρμογές. Αυτή η αλλαγή νοοτροπίας εκφράζεται σαφώς στη δήλωση του Zurb:
Δεν σχεδιάζουμε πλέον μόνο στατικές οθόνες. Σχεδιάζουμε τον τρόπο με τον οποίο ο χρήστης παίρνει από αυτές τις οθόνες για να προβάλει πραγματικά περιεχόμενο.
Αν θέλουμε να σχεδιάσουμε καλύτερα ψηφιακά προϊόντα, τότε πρέπει να αγκαλιάσουμε από την αρχή την αλληλεπίδραση μεταξύ της εφαρμογής και των ιστοτόπων.
Γιατί λειτουργεί το Animation
Η κίνηση, από τη φύση της, έχει το υψηλότερο επίπεδο προβολής σε μια διεπαφή χρήστη. Ούτε η αντιγραφή κειμένου ούτε οι στατικές εικόνες μπορούν να ανταγωνιστούν την κίνηση. Τα μάτια μας είναι στερεωμένα για να δώσουν προσοχή στα κινούμενα αντικείμενα - είναι σχεδόν αντανακλαστικό. Μπορούμε να επωφεληθούμε από αυτό με αυτό το λειτουργικό animation.
Τι είναι η λειτουργική κινούμενη εικόνα;
Η λειτουργική κινούμενη εικόνα είναι μια λεπτή κινούμενη εικόνα ενσωματωμένη στο περιβάλλον εργασίας χρήστη ως μέρος της λειτουργικότητας αυτού του σχεδίου. Έχει πολύ σαφείς και λογικούς σκοπούς:
- Μειώστε το γνωστικό φορτίο
- Αποτρέψτε την τύφλωση της αλλαγής
- Καθιέρωση καλύτερης ανάκλησης στις χωρικές σχέσεις
Σε μια ανθρωποκεντρική προσέγγιση σχεδιασμού, όπου ο χρήστης είναι η πρωταρχική εστίαση, μια διεπαφή χρήστη πρέπει να είναι διαισθητική, ευαίσθητη και ανθρώπινη. Η λειτουργική κινούμενη εικόνα σας βοηθά να επιτύχετε αυτούς τους στόχους.
Πώς η λειτουργική κίνηση βελτιώνει το UX
Η εμπειρία και η εντύπωση μιας εφαρμογής ή ιστότοπου διαμορφώνονται από ένα συνδυασμό παραγόντων, με αλληλεπίδραση που διαδραματίζει θεμελιώδη ρόλο. Η προσθήκη κίνησης στο σχεδιασμό μας μπορεί να είναι νόημα και λειτουργική, όταν βρούμε τις σωστές συνθήκες. Η καλά μελετημένη και δοκιμασμένη λειτουργική κινούμενη εικόνα έχει τη δυνατότητα να εκπληρώσει πολλαπλές λειτουργίες όπως:
1. Οπτική ανατροφοδότηση
Ο καλός σχεδιασμός αλληλεπίδρασης παρέχει πληροφορίες. Η ανατροφοδότηση αναγνωρίζει ότι το σύστημα έχει λάβει μια ενέργεια χρήστη και επιδεικνύει το αποτέλεσμα της αλληλεπίδρασης είτε ήταν επιτυχημένο είτε όχι. Η κίνηση σε αυτή την ομάδα πρέπει να είναι πολύ λεπτή και πρέπει να σχεδιάζεται με ευαισθησία.
Ανατροφοδότηση κουμπιού
Στην πραγματική ζωή, τα κουμπιά ανταποκρίνονται στην αλληλεπίδραση μας και έτσι περιμένουμε τα πράγματα να λειτουργήσουν. Προκειμένου να είναι προβλέψιμη για τον χρήστη, η ψηφιακή διεπαφή πρέπει να ενεργεί με τον ίδιο τρόπο.
Πηγή: Jaron Pulver
Οπτικοποιήστε το αποτέλεσμα μιας ενέργειας
Ακολουθώντας την αρχή δείχνουν, μην πείτε , μπορείτε να χρησιμοποιήσετε κινούμενα σχόλια για να επισημάνετε ότι κάτι πήγε στραβά. Για παράδειγμα, κινούμενο οπτικό κούνημα σε εσφαλμένη καταχώρηση κωδικού πρόσβασης. Είναι σαν το κούνημα του κεφαλιού σαν να λέγατε "όχι, προσπαθήστε ξανά". Ο χρήστης παρατηρεί την κινούμενη εικόνα και καταλαβαίνει αμέσως την τρέχουσα κατάσταση.
Μπορείτε επίσης να ενισχύσετε τις ενέργειες που εκτελεί ένας χρήστης. Στο παρακάτω παράδειγμα, όταν ο χρήστης κάνει κλικ στην επιλογή "Υποβολή", εμφανίζεται σύντομα ένας περιστρεφόμενος δείκτης πριν εμφανιστεί η κατάσταση επιτυχίας στην εφαρμογή. Η κινούμενη εικόνα επισημαίνει ότι ο χρήστης αισθάνεται ότι η διαδικασία ολοκληρώθηκε με επιτυχία.
Image Credit: Κόλιν Γκάρβεν
2. Αμβλύνσεις των κρατικών αλλαγών
Άλλα καλά μέρη για να προσθέσετε κινούμενα σχέδια στο σχεδιασμό είναι σε στιγμές αλλαγής. Οι κρατικές αλλαγές στο περιβάλλον χρήστη, ειδικά στο διαδίκτυο, συχνά συνεπάγονται σκληρές περικοπές που μπορεί να τους δυσκολέψουν να ακολουθήσουν. Τίποτα δεν αισθάνεται πιο αφύσικο παρά ξαφνική αλλαγή. Οι απότομες αλλαγές σε μια διεπαφή είναι δύσκολο να επεξεργαστούν οι χρήστες. Αυτές οι στιγμές αλλαγής θα πρέπει να μαλακώνονται με την προσθήκη κάποιου κινούμενου animation στο UI.
Δημιουργία συνδέσεων
Οι κινούμενες μεταβάσεις θα πρέπει να δρουν ως ενδιάμεσοι μεταξύ των διαφορετικών καταστάσεων του περιβάλλοντος χρήστη, βοηθώντας τους χρήστες να κατανοήσουν τι συμβαίνει όταν αλλάζει η κατάσταση της οθόνης. Ο χρήστης ακολουθεί απλά την κίνηση και καταλαβαίνει πώς σχετίζονται οι δύο καταστάσεις UI.
Πιστωτικές κάρτες: Anish Chandran
Λειτουργεί επίσης καλά για τη σύνδεση των προβολών μικρογραφιών και λεπτομερειών:
Η κάρτα κινείται από την αρχική της θέση σε μια θέση στο modal, καθιστώντας σαφές ότι είναι το ίδιο αντικείμενο, ακριβώς με περισσότερες λεπτομέρειες.
Πιστωτικές κάρτες: Charles Patterson
Καλέστε την προσοχή στις αλλαγές
Η κινούμενη εικόνα μπορεί να βοηθήσει το μάτι να δει από πού προέρχεται ένα νέο αντικείμενο από την αποκάλυψή του ή από το πού πηγαίνει ένα κρυφό αντικείμενο και μπορεί να βρεθεί και πάλι. Μπορούμε να το χρησιμοποιήσουμε για να δώσουμε προσοχή στις αλλαγές που αποκρύπτουν ή αποκαλύπτουν πληροφορίες, όπως το άνοιγμα των συρταριών του περιεχομένου. Στο παρακάτω παράδειγμα, οι κύριες διαφάνειες πλοήγησης είναι εκτός λειτουργίας όταν κάνετε κλικ στο εικονίδιο χάμπουργκερ. Αυτή η κίνηση σάς ενημερώνει ότι το κύριο μενού δεν έχει εξαφανιστεί.
Πιστωτικές κάρτες: Tamas Kojo
3. Ορατότητα της Κατάστασης του Συστήματος
Ως ένα από τα πρωτότυπα των 10 heuristics της Jakob Nielsen για χρηστικότητα, η ορατότητα της κατάστασης του συστήματος παραμένει μεταξύ των σημαντικότερων αρχών στο σχεδιασμό διεπαφής χρήστη. Για τους χρήστες, είναι πολύ σημαντικό να γνωρίζουμε και να κατανοούμε το τρέχον περιβάλλον τους στο σύστημα ανά πάσα στιγμή.
Δείκτες προόδου
Οι διαδικασίες μεταφόρτωσης και λήψης δεδομένων είναι μεγάλες ευκαιρίες για μια λειτουργική κινούμενη εικόνα. Οι κινούμενες γραμμές φόρτωσης θέτουν μια προσδοκία για το πόσο γρήγορα θα γίνει η επεξεργασία της ενέργειας. Η κίνηση μπορεί να είναι χρήσιμη σε περίπτωση βλαβών. Ακόμη και μια μη ευχάριστη ειδοποίηση, όπως μια αποτυχία λήψης δεδομένων, πρέπει να παραδοθεί με ωραίο τρόπο.
Πιστωτικές κάρτες: xjw
Τραβήξτε για ανανέωση
Ο χρόνος αναμονής ενός χρήστη ξεκινά τη στιγμή που ξεκινούν μια ενέργεια και η χειρότερη περίπτωση είναι όταν δεν έχουν καμία ένδειξη ότι το σύστημα το έχει λάβει. Η αντίδραση έλξης για ανανέωση πρέπει να έχει άμεση αντίδραση . Είναι σημαντικό να δώσετε κάποια οπτική ανατροφοδότηση αμέσως μετά τη λήψη του αιτήματος από το χρήστη για να υποδείξει ότι η διαδικασία έχει ξεκινήσει. Η κινούμενη εικόνα θα σας βοηθήσει με αυτό.
Πιστωτικές κάρτες: Τόνι Μπάμπελ
4. Επεξηγηματική κίνηση
Μερικές φορές οι χρήστες χρειάζονται λίγο επιπλέον βοήθεια για να κατανοήσουν τη ροή των χρηστών ή τον τρόπο αλληλεπίδρασης με ορισμένα στοιχεία διεπαφής. Αυτό ισχύει ιδιαίτερα για διεπαφές χρηστών που περιέχουν νέες ή άγνωστες λειτουργίες ή αλληλεπιδράσεις για τον χρήστη.
Επί του σκάφους
Ο χρήστης επί του σκάφους απαιτεί ένα άψογο UX και οι κινούμενες εικόνες σε μια ροή onboarding έχουν τεράστιο αντίκτυπο στον τρόπο με τον οποίο οι χρήστες για πρώτη φορά θα ασχοληθούν με μια εφαρμογή. Η ζωγραφική σας δίνει απεριόριστη ελευθερία να μεταφέρετε οτιδήποτε, ανεξάρτητα από το πόσο περίπλοκο ή πόσο στεγνό είναι το θέμα, με ένα διασκεδαστικό τρόπο.
Πιστωτικές κάρτες: Αναστασία Ανδριτσούκ
Οπτικές υποδείξεις
Η κινούμενη εικόνα μπορεί να προσφέρει κάποιες χρήσιμες οπτικές ενδείξεις. Επεξηγηματική κινούμενη εικόνα εμφανίζεται συνήθως όταν μια σελίδα ανοίγει για πρώτη φορά και η κινούμενη εικόνα δείχνει πώς πρέπει να χρησιμοποιηθούν ορισμένα στοιχεία της σελίδας. Αυτός ο τύπος κινούμενων σχεδίων μπορεί να βρεθεί σε παιχνίδια τα οποία συχνά αντιμετωπίζουν πολύ καλά την προοδευτική αποκάλυψη, αποκαλύπτοντας τη μηχανική παιχνιδιών καθώς προχωράτε περισσότερο σε ένα παιχνίδι. Αυτές οι υποδείξεις ενεργοποιούνται μόνο όταν ο χρήστης φτάσει στο κατάλληλο σημείο της εμπειρίας του.
συμπέρασμα
Η κινούμενη εικόνα είναι ισχυρό εργαλείο όταν χρησιμοποιείται με εκλεπτυσμένους τρόπους.
Πρέπει να αγκαλιάσουμε την κίνηση από την αρχή και να την θεωρήσουμε ως φυσικό μέρος του σχεδιασμού μας, διότι ο σχεδιασμός είναι κάτι περισσότερο από μια οπτική παρουσίαση. Όπως είπε ο Steve Jobs για το σχεδιασμό: Δεν είναι μόνο αυτό που μοιάζει και αισθάνεται σαν. Ο σχεδιασμός είναι ο τρόπος με τον οποίο λειτουργεί.