Utility Navigation Πώς επηρεάζει το σχεδιασμό της εμπειρίας χρήστη

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

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

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

Πώς επηρεάζει η πλοήγηση Utility UX

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

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

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

Τα 4 κορυφαία στοιχεία μενού στοχεύουν τους 4 κύριους ανθρώπους που επισκέπτονται συνήθως τον ιστότοπο της AirBnB: άτομα που ενδιαφέρονται να γίνουν οικοδεσπότες (“Γίνετε οικοδεσπότης”), οι άνθρωποι που θέλουν να λύσουν ένα πρόβλημα που έλαβε χώρα κατά τη χρήση της υπηρεσίας (“Βοήθεια”), οι νέοι και οι χρήστες που επιστρέφουν (“Εγγραφείτε” και “Σύνδεση”). Η αρχική σελίδα της AirBnB με γνώμονα τη χρησιμότητα περιλαμβάνει επίσης μια γρήγορη μπάρα αναζήτησης που είναι ένα κρίσιμο εργαλείο σε έναν ιστότοπο ενοικίασης καταλυμάτων.

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

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

Υπάρχουν 3 στοιχεία πλοήγησης χρησιμότητας που μπορεί να θέλουν οι επισκέπτες να χρησιμοποιήσουν ολόκληρο τον ιστότοπο. Αυτά είναι έξυπνα συμπεριλαμβανόμενα στη σταθερή επάνω μπάρα (εργαλείο αναζήτησης, “Συνδεθείτε”, και “Εγγραφείτε”), αλλά οι χρήστες δεν χρειάζεται να σκεφτούν επιλογές που σχετίζονται με μεμονωμένες αναρτήσεις όπως “Λίστα ανάγνωσης” κατά την περιήγηση στην αρχική σελίδα ή σε μία από τις σελίδες της κατηγορίας.

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

Εάν ρίξετε μια ματιά στο παρακάτω στιγμιότυπο οθόνης, μπορείτε να δείτε ότι οι The New York Times ενημερώνουν τους χρήστες σχετικά με τη διαθεσιμότητα 3 διαφορετικών εκδόσεων: Αμερικανός, Διεθνές, και κινέζικα, και τους επιτρέπει επίσης γρήγορα εναλλαγή μεταξύ των τριών. Αυτό το εξαιρετικό παράδειγμα έξυπνης πλοήγησης χρησιμότητας δείχνει στους χρήστες λιγότερο προφανείς επιλογές που κατά πάσα πιθανότητα δεν θα βρίσκουν μόνοι τους, με έναν μη παρεμποδιστικό και κομψό τρόπο.

Βρείτε την καλύτερη θέση

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

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

Όπως μπορείτε να δείτε παρακάτω, το Reuters έχει τοποθετήσει τα περισσότερα από τα εργαλεία χρησιμότητάς του σε αυτές τις δύο τυπικές περιοχές, στην επάνω δεξιά γωνία της τοποθεσίας, και στο κάτω μέρος του υποσέλιδου κάτω από την πλοήγηση με βάση το περιεχόμενο. Η μοναδική λύση εδώ είναι το σταθερό επιπλέον υποσέλιδο με 2 στοιχεία χρησιμότητας που οι σχεδιαστές θεωρούσαν ότι είναι οι πιο σημαντικοί: “Είσοδος ή εγγραφή” και “Τελευταία από το σύρμα μου”.

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

Δημιουργήστε μια λογική δομή

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

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

Είναι έξυπνο γιατί, χάρη στις οπτικές ενδείξεις, όπως το καλάθι αγορών ή το εικονίδιο αναζήτησης, οι πελάτες μπορούν να αποφασίσουν να αναβοσβήνουν ένα μάτι ποια ομάδα θέλουν να χρησιμοποιήσουν και από εκεί και πέρα ​​μπορούν να αγνοήσουν τα άλλα δύο. Υπάρχει μόνο μία ομάδα (“Του λογαριασμού σας”, “Δοκιμάστε την Prime”, “Καλάθι”, και “Λίστα επιθυμιών”) που έχει υπομενού που είναι επίσης λογικά δομημένα και οι διαφορετικές ομάδες υπομενού διαιρούνται με διακριτικούς αλλά ορατούς διαχωριστές για να βοηθήσουν τους χρήστες να βρουν γρήγορα αυτό που θέλουν.

Δημιουργήστε έναν αποτελεσματικό οπτικό σχεδιασμό

Ο οπτικός σχεδιασμός της αποτελεσματικής πλοήγησης χρησιμότητας πρέπει να ακολουθεί τη διάσημη αρχή KISS (Keep It Simple, Stupid). Συνιστάται να παρέχετε εικονίδια με ετικέτες κειμένου, να κάνετε ελέγχους να μοιάζουν με στοιχεία ελέγχου και να υπογραμμίζετε οπτικά τις πιο σημαντικές ενέργειες. Μπορεί επίσης να είναι καλή ιδέα να διακρίνετε τη χρήση πλοήγησης βάσει χρησιμότητας και περιεχομένου χρησιμοποιώντας ένα ελαφρώς διαφορετικό σχέδιο.

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

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

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