01 από 07
Τι είναι η Visual Flow;
Η οπτική ροή μεταφέρει το μάτι του θεατή μέσα από το έγγραφο με τέτοιο τρόπο ώστε όλα τα σημαντικά στοιχεία να επικρατούν, και τίποτα δεν παρεμποδίζει την όραση ή προκαλεί στο θεατή να χάσει την αίσθηση του κομματιού. Χρησιμοποιώντας προφανή στοιχεία ροής, όπως τα βέλη ή τους αριθμούς, είναι ο πιο κοινός τρόπος που χρησιμοποιούν οι σχεδιαστές ιστοσελίδων, αλλά υπάρχουν και άλλοι τύποι στοιχείων που μπορούν να χρησιμοποιηθούν και να χρησιμοποιηθούν εσφαλμένα για να κατευθύνουν τους αναγνώστες σας να κινούνται κατά μήκος μιας συγκεκριμένης διαδρομής. Τα βήματα αυτού του σεμιναρίου θα σας δείξουν παραδείγματα καλής και κακής ροής και θα σας βοηθήσουν να μάθετε το λεξιλόγιο της οπτικής ροής στο σχεδιασμό.
Η οπτική ροή μπορεί να επιτευχθεί με πολλούς τρόπους:
- Βέλη
- Διαδοχικές εικόνες ή στοιχεία κειμένου
- Προοπτική
- Διαβαθμίσεις
- Οι αλλαγές μεγέθους
- Καμπύλες
- Κίνηση σε εικόνες
- Πρόσωπα - ειδικά τα μάτια
Οι παρακάτω εικόνες θα σας δείξουν μερικά συνηθισμένα λάθη στη ροή σε ιστοσελίδες και πώς να τα διορθώσετε.
02 του 07
Δυτικές ροές κειμένου από αριστερά προς τα δεξιά
Αν μεγαλώσατε να διαβάζετε μια δυτική γλώσσα, συνηθίζετε να πιστεύετε ότι το κείμενο θα πρέπει να μετακινηθεί από αριστερά προς τα δεξιά. Έτσι, καθώς το μάτι μετακινείται σε μια γραμμή κειμένου, μετακινείται από αριστερά προς τα δεξιά.
Στην παραπάνω εικόνα, ο καταρράκτης ρέει από δεξιά προς τα αριστερά και το κείμενο τρέχει στον καταρράκτη. Δεδομένου ότι όλοι γνωρίζουμε ότι οι καταρράκτες πέφτουν, υπάρχει μια αποσύνδεση προς την κατεύθυνση της ροής του νερού με τη ροή του κειμένου. Το μάτι του θεατή κινείται προς λάθος κατεύθυνση για να διαβάσει το κείμενο.
03 του 07
Το κείμενό σας πρέπει να μεταφέρεται με τις εικόνες
Σε αυτή την περίπτωση, η εικόνα έχει αντιστραφεί, έτσι ώστε το κείμενο να ρέει στην ίδια κατεύθυνση με το νερό. Όλα τα στοιχεία οδηγούν το βλέμμα του θεατή κάτω με τη ροή του νερού και τη ροή του κειμένου.
04 του 07
Από αριστερά προς τα δεξιά εξισώνεται γρήγορα
Το άλογο σε αυτή τη φωτογραφία τρέχει από δεξιά προς τα αριστερά, αλλά το κείμενο είναι αγγλικά και έτσι από αριστερά προς τα δεξιά. Ο οπτικός αντίκτυπος των ιπποδρομιών σε μια κατεύθυνση επιβραδύνει το ρυθμό ολόκληρου του εγγράφου, διότι πηγαίνει σε διαφορετική κατεύθυνση από το κείμενο.
Στις δυτικές κουλτούρες, επειδή οι γλώσσες μας κινούνται από τα αριστερά προς τα δεξιά, έχουμε συσχετίσει μια οπτική κατεύθυνση από αριστερά προς τα δεξιά ως προς τα εμπρός και γρήγορα, ενώ η δεξιά προς τα αριστερά είναι πιο πίσω και αργή. Όταν δημιουργείτε μια διάταξη με μια έννοια ταχύτητας, θα πρέπει να θυμάστε αυτό - και να διατηρείτε τις εικόνες σας κινούμενες προς την ίδια κατεύθυνση με το κείμενο.
05 του 07
Μην αναγκάσετε το μάτι του θεατή να επιβραδύνει
Όταν το άλογο και το κείμενο ακολουθούν την ίδια κατεύθυνση, η σιωπηρή ταχύτητα αυξάνεται.
06 του 07
Παρακολουθήστε τα μάτια στις Φωτογραφίες Ιστού
Πολλές τοποθεσίες Web με φωτογραφίες κάνουν αυτό το λάθος - βάζουν μια φωτογραφία ενός προσώπου στη σελίδα και το άτομο κοιτάζει μακριά από το περιεχόμενο. Αυτό μπορεί ακόμη και να δει στο site του Σχεδιασμού στο Web.com στο παλιό σχέδιο.
Όπως μπορείτε να δείτε, η φωτογραφία μου βρίσκεται δίπλα σε κάποιο κείμενο. Αλλά κοιτάζω μακριά από αυτό το κείμενο, έχω σχεδόν την πλάτη μου γυρισμένη σε αυτό. Εάν είδατε τη γλώσσα του σώματος μεταξύ δύο ατόμων μιας ομάδας, θα ήταν εύκολο να υποθέσουμε ότι δεν μου αρέσει το άτομο που είμαι δίπλα (στην περίπτωση αυτή το μπλοκ κειμένου).
Πολλές μελέτες παρακολούθησης οφθαλμών έδειξαν ότι οι άνθρωποι βλέπουν πρόσωπα σε ιστοσελίδες. Και οι σχετικές μελέτες έχουν δείξει ότι όταν κοιτάζουμε εικόνες, οι άνθρωποι θα ακολουθήσουν ασυνείδητα τα μάτια για να δουν τι βλέπει η εικόνα. Εάν μια φωτογραφία στον ιστότοπό σας κοιτάζει από την άκρη του προγράμματος περιήγησης, εκεί θα εμφανίζονται οι πελάτες σας και στη συνέχεια θα πατήσετε το κουμπί "πίσω".
07 του 07
Τα μάτια σε οποιαδήποτε φωτογραφία πρέπει να αντιμετωπίζουν το περιεχόμενο
Στο νέο σχέδιο για About.com, η φωτογραφία είναι λίγο καλύτερη. Τώρα τα μάτια μου φαίνονται πιο μπροστά και υπάρχει μια ελαφριά υπόδειξη που κοιτάω προς τα αριστερά μου - όπου βρίσκεται το κείμενο.
Μία ακόμα καλύτερη φωτογραφία για αυτή τη θέση θα ήταν αυτή όπου οι ώμοι μου ήταν επίσης γωνιακοί προς το κείμενο. Αλλά αυτή είναι μια πολύ καλύτερη λύση από την πρώτη φωτογραφία. Και, για καταστάσεις όπου η εικόνα θα είναι δεξιά του περιεχομένου καθώς και της αριστεράς, αυτό θα μπορούσε να είναι ένας καλός συμβιβασμός.
Θυμηθείτε επίσης ότι, ενώ οι εικόνες των προσώπων των ανθρώπων προσελκύουν την μεγαλύτερη προσοχή, το ίδιο ισχύει και για τις φωτογραφίες των ζώων. Για παράδειγμα, σε αυτή τη διάταξη δείγματος, έχω τα σκυλιά μου κοιτάζοντας αριστερά, αλλά η εικόνα είναι σωστή. Έτσι κοιτάζουν από τη σελίδα. Αυτή η διάταξη θα βελτιωνόταν εάν άλλαξα τον προσανατολισμό των σκύλων έτσι ώστε να κοιτούν στο κέντρο της οθόνης.