Πώς η σάρωση ματιών επηρεάζει την οπτική ιεραρχία στο UX Design
Ενώ οι χιλιετίες της τέχνης, από τα ελληνικά αγγεία έως τα ιταλικά παρεκκλήσια, έχουν διαμορφώσει την κατανόησή μας για την ομορφιά, η σχετικά πρόσφατη τεχνολογία πίσω από την παρακολούθηση των ματιών προσθέτει μια νέα δυναμική στο πώς αντιλαμβανόμαστε οπτικά τον κόσμο. Περισσότερο στο σημείο, αυτή η συναρπαστική νέα επιστήμη μας βοηθά να κατανοήσουμε καλύτερα - και να σχεδιάσουμε καλύτερα - ιστότοπους που είναι τόσο αποτελεσματικοί όσο και αισθητικοί.
Ο σχεδιασμός ιστοσελίδων (ως εικαστική τέχνη) ακολουθεί πολλούς από τους ίδιους κανόνες με τις πιο παραδοσιακές μορφές τέχνης. Σε αυτό το άρθρο θα περιγράψουμε εν συντομία τη σημασία της οπτικής οργάνωσης, στη συνέχεια θα εξηγήσουμε πώς τα ευρήματα της παρακολούθησης των ματιών μπορούν να βελτιώσουν τη διάταξη των διεπαφών ιστού.
Δημιουργία οπτικής οργάνωσης
Δεν αποτελεί έκπληξη το γεγονός ότι η εμφάνιση ενός ιστότοπου επηρεάζει την επιτυχία του, αλλά είναι σημαντικό να επισημάνουμε τους λόγους. Στο έγγραφό του Επικοινωνία με την οπτική ιεραρχία , Ο Luke Wroblewski, συγγραφέας και Ανώτερος Διευθυντής Σχεδίασης Προϊόντων στο Yahoo !, εξηγεί ότι η οπτική παρουσίαση μιας διεπαφής ιστού είναι απαραίτητη για:
Οδηγία
Ένα καλά σχεδιασμένο περιβάλλον εργασίας μπορεί να καθοδηγήσει τους χρήστες από τη μία δράση στην άλλη χωρίς να αισθάνεται επαχθής. Ανεξάρτητα από το τι σκέφτεστε για τις επιχειρηματικές πρακτικές τους, δεν υπάρχει καμία αμφιβολία ότι Uber είναι ένα παράδειγμα μιας απίστευτα ομαλής αλλά δομημένης ιστοσελίδας. Οι προτάσεις σχετικά με τις αξίες βρίσκονται στην κορυφή του κυλίνδρου, ακολουθούμενη από ένα διασκεδαστικό ρυθμιστικό για να μάθετε για διαφορετικές επιλογές αυτοκινήτου και να ολοκληρώσετε το λογικό επόμενο βήμα για την εύρεση βόλτων στην πόλη σας.
Επικοινωνία
Με την αντιστοίχιση με άλλα λόγια, αντίθετα με τις πληροφορίες, το UI μπορεί να σχηματίσει δεσμούς στο μυαλό του χρήστη, μεταδίδοντας μηνύματα χωρίς να λέει κάτι. Κοιτάξτε τη δημοφιλή ιστοσελίδα σχεδιασμού Abduzeedo : οι ευρείες κατηγορίες βρίσκονται στην κορυφή, εμφανίζεται το περιεχόμενο στη μέση και οι λεπτομερείς κατηγορίες στο υποσέλιδο.
Δημιουργία συναισθηματικών επιπτώσεων
Μην κάνετε το λάθος να σκέφτεστε ότι ο ιστότοπός σας είναι απλώς ένα μηχανοποιημένο εργαλείο. Οι ιστότοποι έχουν τη δυνατότητα να κάνουν συναισθηματικές συνδέσεις και, εάν δεν συμβαίνουν, οι επιθυμίες των ανταγωνιστών σας. Στην πραγματικότητα, οι άνθρωποι μπορεί να είναι πιο επιρρεπείς στο να συγχωρήσουν τις αδυναμίες της διεπαφής σας εάν παράγετε ένα θετικό συναισθηματική απάντηση . MailChimp είναι ένα τέλειο παράδειγμα ενός ιστότοπου με μια διεπαφή που είναι εύχρηστη, ευχάριστη και πραγματικά διασκεδαστική στη χρήση.
Το προβλέψιμο ανθρώπινο μάτι
Μερικές φορές, φαίνεται ότι τα μάτια σας έχουν τα μυαλά των δικών τους. Τα χρόνια της εξέλιξης μας έδωσαν τα ένστικτα για να εντοπίσουμε αντικείμενα και κινήσεις που θεωρούμε σημαντικές, είτε πρόκειται για σέξι βόλτα σε κάποιον από το δρόμο, είτε για ένα διασκεδαστικό γελοιογραφικό μέλι. Ενώ το σχετικό βάρος που βάζουμε σε αυτό που είναι σημαντικό μπορεί να διαφέρει από άνθρωπο σε άνθρωπο, το ένα σταθερό είναι οι μηχανισμοί στους οποίους συμπεριφέρονται. Σε μεγάλη κλίμακα, η πλειοψηφία των ανθρώπων ακολουθεί τις ίδιες τάσεις κατά την προβολή μιας ιστοσελίδας.
Από αυτές τις τάσεις, υπάρχουν δύο που θα συζητήσουμε λεπτομερώς. Σε ένα άρθρο σχετικά με τις οπτικές αρχές , Alex Bigman, Design Writer για το 99Designs, δείχνει πώς, για τους πολιτισμούς που διαβάζουν από αριστερά προς τα δεξιά, αυτά τα δύο μοτίβα είναι τα πιο συνηθισμένα - και πιο χρήσιμα - κατά το σχεδιασμό της διάταξης ενός δικτυακού τόπου.
Το πρώτο, το F-Pattern, χρησιμοποιείται κυρίως για κείμενο (αλλά μπορεί να προσαρμοστεί για άλλους σκοπούς). Το δεύτερο, το Z-Pattern, μπορεί να χρησιμοποιηθεί για οποιαδήποτε οπτική διάταξη. Θα εξηγήσουμε τα διαφορετικά υπέρ και τα κατά για καθένα από τα παρακάτω.
F-μοτίβο
Το F-Pattern είναι η τάση θέασης που εμφανίζεται σε σελίδες που είναι βαριά φορτωμένες με κείμενο, συνήθως blogs, πηγές ειδήσεων, άρθρα κλπ.
Όταν έρχονται αντιμέτωποι με ένα μπλοκ λέξεων, οι περισσότεροι αναγνώστες θα σαρώσουν πρώτα μια κατακόρυφη γραμμή κάτω από την αριστερή πλευρά του κειμένου, συνήθως αναζητούν λέξεις-κλειδιά ή σημεία ενδιαφέροντος στις αρχικές προτάσεις της παραγράφου. Τελικά ο αναγνώστης βρίσκει κάτι που τους αρέσει και αρχίζει να διαβάζει κανονικά, σχηματίζοντας οριζόντιες γραμμές. Το τελικό αποτέλεσμα είναι κάτι που μοιάζει με τα γράμματα F ή E.
Ο Jakob Nielson του ομίλου Nielson Norman διενήργησε μελέτη αναγνωσιμότητας με βάση 232 χρήστες που σαρώνουν χιλιάδες ιστότοπους. Από την έρευνά του κατέγραψε αυτό που πιστεύει ότι είναι τις πρακτικές συνέπειες του F-Pattern:
- Οι χρήστες θα διαβάζουν σπάνια κάθε λέξη του κειμένου σας.
- Οι δύο πρώτες παράγραφοι είναι οι πιο σημαντικές και πρέπει να περιέχουν το γάντζο σας.
- Ξεκινήστε τις παραγράφους, τους υποκεφάλους και τα κουκκίδες με τις δελεαστικές λέξεις-κλειδιά.
Όπως πάντα, η πιο αριστερή γωνία είναι η πιο σημαντική, καθώς ξεκινάνε όλες οι καλλιέργειες ανάγνωσης από αριστερά προς δεξιά. Ο χρήστης θα διαβάζει συνήθως οριζόντια στην κεφαλίδα, οπότε εδώ είναι ένα καλό μέρος για μια γραμμή πλοήγησης ή / και μια παρότρυνση για δράση. Στη συνέχεια, ο χρήστης σαρώνει κάθετα προς τα κάτω στην αριστερή πλευρά, μέχρι να συναντήσει περιεχόμενο που τα ενδιαφέρει. Τέλος, ο χρήστης τελειώνει στη δεξιά πλευρά της σελίδας, ένα εξαιρετικό μέρος με μια παρότρυνση για δράση ή διαφήμιση. Απλά μην αφήσετε την πλαϊνή μπάρα να συντρίψει το περιεχόμενο.
Αλλά το F-Pattern δεν είναι ένα πρότυπο - πραγματικά δεν είναι μια ακριβής πρακτική, αλλά περισσότερο από ένα χαλαρό οδηγό που συγκεντρώνεται από τις τάσεις της πλειοψηφίας των χρηστών. Λάβετε αυτό υπόψη, επειδή το F-Pattern χάνει την αποτελεσματικότητά του μετά τις κορυφαίες σειρές του F.
Το Kickstarter χρησιμοποιεί μια διάταξη καρτών για να παρουσιάσει έργα χαρακτηριστικών και να μην γίνει οπτικά βαρετή μετά τα πρώτα 500 pixels.
Αφ 'ετέρου, iZettle παίρνει μια πιο συμβατική προσέγγιση στο F-Pattern στην αρχική τους σελίδα. Ωστόσο, καταφέρνουν να αποφύγουν μια εκμαγνητική εμφάνιση, επικαλύπτοντας το πρωτότυπο αντίγραφο ("Μεγαλώστε την επιχείρησή σας με το iZettle") και την παρότρυνση για δράση σε μια μεγάλη εικόνα φόντου. Θα θεωρούσαμε αυτό το ελάχιστο όριο για την προσαρμογή αυτού του μοτίβου ανάγνωσης στη διάταξη της διασύνδεσης.
Z-μοτίβο
Επιπλέον, το Z-Pattern είναι το απλούστερο και πιο οικουμενικό μοτίβο, που χρησιμοποιείται ευρέως σε οποιαδήποτε ιστοσελίδα που βασίζεται στο κείμενο. Ο αναγνώστης πρώτα σαρώνει οριζόντια στην κορυφή, βγάζει κάτω και επιστρέφει στην αριστερή πλευρά και στη συνέχεια σαρώνει οριζόντια και πάλι στο κάτω μέρος.
Είναι σημαντικό να καταλάβουμε το ευέλικτο Z-Pattern , καθώς καλύπτει τις βασικές απαιτήσεις του ιστότοπου, όπως η ιεραρχία, η επωνυμία και οι προσκλήσεις για δράση. Η ομορφιά της είναι στην απλότητα της και μια ιδανική διάταξη για τοποθεσίες εστιασμένες γύρω από μια πρόσκληση για δράση. Ωστόσο, για πιο περίπλοκο ή υπερβολικό περιεχόμενο, το Z-Pattern μπορεί να είναι πολύ απλό.
Σκεφτείτε ότι το Z-Pattern είναι σωστό για τη σελίδα σας; Ακολουθούν ορισμένες βέλτιστες πρακτικές για τη βελτιστοποίηση των οφελών:
- Ιστορικό - Διατηρήστε το φόντο στο οποίο ανήκει: στο φόντο. Δεν θέλετε να αποσπάσετε την προσοχή από τον αναγνώστη σας.
- Σημείο # 1 - Ως σημείο εκκίνησης, αυτό είναι γενικά όπου θέλετε να τοποθετήσετε το λογότυπό σας.
- Σημείο # 2 - Ενώ η κύρια παρότρυνση για δράση θα πρέπει να έρθει αργότερα, εδώ είναι ένα καλό μέρος για μια δευτερεύουσα παρότρυνση για δράση, σημειώνοντας μια οριζόντια γραμμή πλοήγησης. (Ένα ωραίο ρυθμιστικό γραφικών ή εικόνας θα βοηθήσει να διαχωριστεί το επάνω και το κάτω μέρος της σελίδας, ενθαρρύνοντας τον αναγνώστη να παραμείνει στην προβλεπόμενη διαδρομή του Z-Pattern.)
- Σημείο # 3 - Αυτό είναι ένα ωραίο μέρος για να προσελκύσει την προσοχή για άλλους συνδέσμους, ή εναλλακτικά να οδηγήσει το βλέμμα του χρήστη προς τον τελικό στόχο: Σημείο # 4.
- Σημείο # 4 - Ως "γραμμή τερματισμού", αυτό είναι το ιδανικό μέρος για την κύρια πρόσκληση δράσης σας.
Το πρώτο πράγμα που θα θελήσετε να κάνετε είναι να δώσετε προτεραιότητα στα στοιχεία της σελίδας σας για τον εαυτό σας, ώστε να γνωρίζετε τα πιο σημαντικά και λιγότερο σημαντικά. Από εκεί, είναι απλά ένα απλό θέμα να τα διαθέσουμε στα κατάλληλα "καυτά σημεία".
Επιπλέον, το Z-Pattern μπορεί να επαναληφθεί και να επεκταθεί καθ 'όλη τη διάρκεια της σελίδας. Απλά ρίξτε μια ματιά στο πώς Evernote zig-zags προς τα κάτω μέσω κλήσεων προς δράση και σημεία πώλησης.
DropBox παίρνει μια οπτικά απλούστερη προσέγγιση σε αυτό το ζιγκ-ζαγκ μοτίβο κάνοντας μακριά με οποιεσδήποτε εικόνες φόντου. Αντ 'αυτού, ενσωματώνεται περισσότερη λειτουργικότητα στη διάταξη, δεδομένου ότι η παρότρυνση για δράση "Μάθετε περισσότερα" βοηθά να συνδέσετε κάθε τμήμα του μοτίβου εκκαθάρισης καθώς το μάτι σας φτάνει στη σελίδα. Αυτό βοηθά επίσης τους ενημερωμένους αναγνώστες να κάνουν κλικ στην επόμενη σχετική σελίδα χωρίς να χρειάζεται να διαβάσουν πρώτα όλα τα αντίγραφα.
Άποψη στην προνοητικότητα
Μεγάλη σχεδίαση διεπαφής θα πρέπει να είναι σαν ένα αόρατο χέρι που οδηγεί τους αναγνώστες μαζί με την ταχύτητα της σκέψης. Το σημαντικό πιάτο από τις τάσεις των F-Pattern και Z-Pattern είναι ότι μπορείτε να τοποθετήσετε το πιο σημαντικό σας περιεχόμενο, όπου ο αναγνώστης θα "σκοντάψει" αυτό φυσικά, σε αντίθεση με την προσπάθεια να τους αναγκάσει να τους κοιτάξει.
Η λεπτότητα είναι ένα μεγάλο πλεονέκτημα για οποιαδήποτε διάταξη σελίδας και αυτά τα μοτίβα μπορούν να κάνουν τη διαφορά ανάμεσα στο να υποδηλώνουν κάτι στον αναγνώστη σας και να το βγάζουν κάτω από το λαιμό τους.
Προτεινόμενη εικόνα, χρησιμοποιεί ανθρώπινη εικόνα μάτι μέσω Shutterstock.