Motion στον ψηφιακό σχεδιασμό: κίνηση με σκοπό και μέτρο

Ο όρος motion περιγράφει τη σχεδιασμένη κίνηση στοιχείων σε μια οθόνη, σε κινούμενα γραφικά ή σε μια οπτικοακουστική παρουσίαση. Στην εμπειρία χρήστη, μια μετάβαση μπορεί να δείξει ότι άνοιξε ένα πλαίσιο, μετακινήθηκε ένα αντικείμενο ή ολοκληρώθηκε μια ενέργεια. Στην οπτική επικοινωνία, η κίνηση μπορεί να αναδείξει διαδοχικά μια πληροφορία. Δεν είναι όμως υποχρεωτικό στολίδι κάθε διεπαφής. Η βασική αρχή είναι ότι η κίνηση δικαιολογείται όταν βελτιώνει την κατανόηση, τον προσανατολισμό ή την αφήγηση και δεν παρεμβάλλεται ανάμεσα στον άνθρωπο και στον στόχο του.

Η λειτουργία προηγείται του εφέ

Πριν προσθέσετε μετάβαση, ορίστε ποια μεταβολή χρειάζεται να γίνει αντιληπτή. Ένα πτυσσόμενο μενού μπορεί να ανοίγει με ήπιο τρόπο για να δείχνει τη σχέση του με το κουμπί που το ενεργοποίησε. Μια μπάρα ολοκλήρωσης μπορεί να ενημερώνει για την πρόοδο μιας πραγματικής διαδικασίας. Αντίθετα, ένα μεγάλο διακοσμητικό στοιχείο που εμφανίζεται σε κάθε κύλιση ίσως καλύπτει την πληροφορία και διακόπτει τη συγκέντρωση.

Σχεδιάστε πρώτα τη στατική κατάσταση και την τελική κατάσταση. Αν αυτές δεν είναι κατανοητές από μόνες τους, η ενδιάμεση κίνηση δύσκολα θα τις διορθώσει. Για κάθε εφέ περιγράψτε την αιτία ενεργοποίησης, το ορατό αποτέλεσμα και την εναλλακτική εμπειρία όταν η κίνηση μειώνεται. Αυτό βοηθά τη σχεδιαστική και την τεχνική ομάδα να έχουν κοινό κριτήριο.

Διαφορετικοί τύποι κίνησης και εφαρμογές

Η λειτουργική μετάβαση υποστηρίζει μια ενέργεια, όπως το άνοιγμα ενός πίνακα. Η ανατροφοδότηση δείχνει αλλαγή κατάστασης, όπως ότι προστέθηκε ένα προϊόν σε λίστα. Η αφηγηματική κίνηση παρουσιάζει μια ιστορία ή μια αλληλουχία εξηγήσεων. Η διακοσμητική προσθέτει αίσθηση ζωντάνιας χωρίς απαραίτητα να μεταφέρει νέα πληροφορία. Οι κατηγορίες μπορούν να συνυπάρχουν, αλλά έχουν διαφορετικές προτεραιότητες.

Σε μια ιστοσελίδα υπηρεσίας, προτιμήστε τη σαφήνεια του μηνύματος από μια θεαματική εισαγωγή. Σε ένα εκπαιδευτικό διάγραμμα, μια επιλεγμένη κίνηση μπορεί να βοηθήσει να γίνει κατανοητή η σειρά των βημάτων. Σε εφαρμογή με συχνές επαναλαμβανόμενες εργασίες, οι μεγάλες μεταβάσεις μπορεί να επιβαρύνουν τον χρήστη. Δεν υπάρχει μία διάρκεια που να ταιριάζει παντού: αξιολογήστε την αίσθηση απόκρισης μέσα στο πραγματικό πλαίσιο.

Χρονισμός, κατεύθυνση και συνέχεια

Η κίνηση γίνεται πιο εύληπτη όταν η διαδρομή ενός στοιχείου συμβαδίζει με τη λογική του χώρου. Ένα πλαίσιο που ανοίγει από συγκεκριμένο κουμπί μπορεί να εμφανίζεται κοντά στην πηγή του αντί να προκύπτει από άσχετο σημείο της οθόνης. Η ταχύτητα και η επιτάχυνση αλλάζουν τον χαρακτήρα της μετάβασης. Η υπερβολικά αργή κίνηση καθυστερεί την εργασία, ενώ η απότομη μπορεί να μη δίνει αρκετό χρόνο για προσανατολισμό.

Εξετάστε αν διαφορετικές μεταβάσεις χρησιμοποιούν συμβατή λογική. Όταν ένα στοιχείο μετακινείται δεξιά για την επόμενη ενότητα και ένα άλλο αριστερά για την ίδια σημασία, δημιουργούνται αντιφατικά σήματα. Η συνοχή δεν απαιτεί να κινούνται όλα. Η ακινησία είναι συχνά η σωστή επιλογή για τίτλους, βασικές οδηγίες και πληροφορίες που χρειάζονται συγκέντρωση.

Προσβασιμότητα και περιορισμός μη αναγκαίας κίνησης

Οι Οδηγίες Προσβασιμότητας Περιεχομένου Ιστού, WCAG (Web Content Accessibility Guidelines), περιλαμβάνουν στο κριτήριο 2.3.3 του επιπέδου AAA τη δυνατότητα απενεργοποίησης κίνησης που ενεργοποιείται από αλληλεπίδραση όταν δεν είναι ουσιώδης. Κάποιοι άνθρωποι ενοχλούνται από μεγάλες μετακινήσεις, εφέ βάθους ή παρατεταμένη κίνηση κατά την κύλιση. Γι' αυτό ο σχεδιασμός χρειάζεται επιλογή ή αυτόματη προσαρμογή σε μειωμένη κίνηση, χωρίς να χάνεται βασικό περιεχόμενο.

Στον ιστό υπάρχει η ρύθμιση CSS (Διαδοχικά Φύλλα Στυλ, Cascading Style Sheets) prefers-reduced-motion, η οποία επιτρέπει στην εφαρμογή να λαμβάνει υπόψη την προτίμηση της συσκευής για περιορισμό μη απαραίτητων κινούμενων εφέ. Η εναλλακτική λύση μπορεί να εμφανίζει αμέσως την τελική κατάσταση ή να αντικαθιστά μια έντονη μετακίνηση με ηπιότερη αλλαγή. Η πληροφορία και η δυνατότητα χειρισμού πρέπει να παραμένουν διαθέσιμες.

Από την ιδέα στο πρωτότυπο

Περιγράψτε κάθε σκηνή με τρία στοιχεία: τι υπάρχει πριν, τι αλλάζει και τι γνωρίζει ο χρήστης μετά. Έπειτα φτιάξτε ένα απλό πρωτότυπο με πραγματικά μηνύματα. Δοκιμάστε όχι μόνο τη φυσιολογική ακολουθία, αλλά και τη γρήγορη διαδοχή ενεργειών: τι συμβαίνει αν κάποιος ανοίξει και κλείσει αμέσως το ίδιο μενού; Οι κινήσεις πρέπει να μη συσσωρεύονται και να μην αφήνουν στοιχεία σε λανθασμένη κατάσταση.

Αν το έργο αφορά βίντεο παρουσίασης, δώστε έμφαση στη χρονική ακολουθία των βασικών ιδεών, στην καθαρή απεικόνιση δεδομένων και στη συμβατότητα με ήχο ή υπότιτλους. Η αφηγηματική χρήση έχει άλλους ρυθμούς από την αλληλεπίδραση ενός κουμπιού. Η τεχνική ομάδα χρειάζεται προδιαγραφές συμπεριφοράς και όχι μόνο ένα βίντεο αναφοράς που δεν εξηγεί εναλλακτικές καταστάσεις.

Επιδόσεις και τεχνικοί περιορισμοί

Μια κίνηση που δείχνει ομαλή στον ισχυρό υπολογιστή του σχεδιαστή μπορεί να καθυστερεί σε πιο περιορισμένη συσκευή. Ελέγξτε συχνότητα ενημέρωσης, χρόνο απόκρισης, κύλιση και φόρτωση περιεχομένου. Μη χρησιμοποιείτε κινούμενο υλικό για να κρύβετε τεχνική καθυστέρηση χωρίς πραγματική ενημέρωση. Ο χρήστης χρειάζεται ειλικρινή ένδειξη της κατάστασης της εργασίας, όχι απλώς απασχολημένη οθόνη.

Όπου είναι δυνατό, περιορίστε τις άσκοπες επαναζωγραφίσεις μεγάλων επιφανειών και ελέγξτε ότι η κίνηση σταματά όταν δεν έχει νόημα να συνεχίζεται. Σκεφτείτε επίσης το βάρος των αρχείων, την κατανάλωση πόρων και την επίδραση στην πρόσβαση με χαμηλότερη ταχύτητα σύνδεσης. Η ποιότητα δεν κρίνεται μόνο από το τελικό οπτικό αποτέλεσμα αλλά και από το αν η διεπαφή παραμένει πρόθυμη να ανταποκριθεί.

Πίνακας επιλογής ανά περίπτωση

Ο πίνακας χρησιμεύει πριν εγκριθεί οποιαδήποτε υλοποίηση. Αν δεν μπορείτε να γράψετε με σαφήνεια τι εξυπηρετεί μια μετάβαση, δοκιμάστε πρώτα την έκδοση χωρίς κίνηση. Ο χρόνος και η προσοχή του επισκέπτη είναι περιορισμένοι πόροι.

Πώς ελέγχουμε τη χρησιμότητα

Δώστε σε χρήστες μια συγκεκριμένη εργασία και παρατηρήστε αν η κίνηση τους βοηθά να καταλάβουν τι συνέβη. Μην αρκείστε στην ερώτηση «σας αρέσει;». Ελέγξτε λάθη, καθυστερήσεις, αποπροσανατολισμό και ανάγκη επανάληψης της ίδιας ενέργειας. Συγκρίνετε και την έκδοση μειωμένης κίνησης, ώστε να γνωρίζετε αν έχει διατηρήσει τη λειτουργική πληροφορία.

Προσέξτε τη συνέπεια με τα υπόλοιπα στοιχεία της οπτικής γλώσσας. Μια σοβαρή υπηρεσία δεν χρειάζεται υποχρεωτικά εντυπωσιακές εισαγωγές. Η δημιουργία ιστοσελίδας για επαγγελματία κινούμενων γραφικών μπορεί να αναδεικνύει τεχνικές, αλλά η πραγματική εφαρμογή πρέπει να προσαρμόζεται στον χρήστη της. Καλύτερος δείκτης είναι η ολοκλήρωση της εργασίας χωρίς σύγχυση.

Συχνές ερωτήσεις

Χρειάζεται κάθε ιστοσελίδα κινούμενα στοιχεία;

Όχι. Η στατική παρουσίαση είναι συχνά επαρκής. Η κίνηση πρέπει να δικαιολογείται από αναγνωρίσιμο λειτουργικό ή αφηγηματικό όφελος.

Ποια είναι η διαφορά από το βίντεο;

Η κίνηση διεπαφής συνδέεται με καταστάσεις και ενέργειες του χρήστη. Το βίντεο είναι συνήθως χρονικά οργανωμένη παρουσίαση που παρακολουθείται ως περιεχόμενο.

Τι σημαίνει μειωμένη κίνηση;

Είναι η δυνατότητα να περιορίζονται ή να αντικαθίστανται μη ουσιώδη εφέ, διατηρώντας την ίδια πληροφορία και τις ίδιες ενέργειες.

Πότε μια μετάβαση γίνεται ενοχλητική;

Όταν καθυστερεί επαναλαμβανόμενες εργασίες, κρύβει περιεχόμενο, αποσπά την προσοχή ή προκαλεί δυσφορία. Η παρατήρηση πραγματικής χρήσης είναι απαραίτητη.

Τι παραδίδουμε στους προγραμματιστές;

Περιγραφή αφετηρίας και τελικής κατάστασης, τρόπου ενεργοποίησης, οπτικής διαδρομής, εναλλακτικής μειωμένης κίνησης και χειρισμού γρήγορων διαδοχικών ενεργειών.

Ο τελικός κανόνας

Η πρακτική εφαρμογή του motion αξίζει όταν ο άνθρωπος καταλαβαίνει καλύτερα τι αλλάζει και παραμένει κυρίαρχος της αλληλεπίδρασης. Το αποτέλεσμα πρέπει να είναι λειτουργικό και χωρίς το εφέ, αλλιώς το εφέ καλύπτει ένα βαθύτερο πρόβλημα.