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

Το λογότυπο του ιστότοπου αντικαθιστά το μενού αρχικής σελίδας

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

Η πόλη Waren (Müritz) στη Βόρεια Γερμανία, όπου έδρα της εταιρίας μας, αποφάσισε να παρέχει στο χρήστη ένα εικονίδιο σπιτιού ως ένδειξη για την επιστροφή στην αρχική σελίδα. Υπάρχουν πιθανώς δύο λόγοι για τη χρήση του εδώ: Καταρχάς, πέρα από το λογότυπο, τοποθετήθηκε και ένα άλλο λογότυπο, με αποτέλεσμα η προθυμία για κλικ στο λογότυπο να μειωθεί. Δεύτερον, μπορεί να θεωρηθεί ότι οι χρήστες αυτού του ιστότοπου είναι λιγότερο εξοικειωμένοι με το διαδίκτυο. Με ειλικρίνεια, το εικονίδιο του σπιτιού βελτιώνει ελάχιστα την εμπειρία χρήστη, γιατί σε αυτόν τον ιστότοπο υπάρχουν πολλές εμφανείς ελλείψεις ως προς την αρχιτεκτονική πληροφοριών, τη διεπαφή χρήστη και την προσβασιμότητα (θεωρητικά οι αντιθέσεις στην ανάγνωση των συνδέσμων και των κειμένων). Έτσι, ο ιστότοπος της πόλης Waren (Müritz) παραμένει ένα αρνητικό παράδειγμα.

Αντιδραστικό λογότυπο: Προσαρμογή του λογότυπου βάσει της ανάλυσης της συσκευής

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

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

Ένα θετικό παράδειγμα παρέχει η εταιρεία Victorinox από την Ελβετία. Στην πρώτη προβολή, ο χρήστης βλέπει το μεγάλο εικονίδιο. Μοναδικό αρνητικό σημείο: Το λογότυπο είναι ενσωματωμένο ως αρχείο PNG αντί για SVG.

Κατά την κύλιση, προβάλλεται μόνο το στοιχείο εικόνας. Στο παρασκήνιο φαίνεται ένα βουνό, το οποίο υπογραμμίζει την ελβετική καταγωγή. Έτσι, στην πρώτη προβολή είναι σημαντική η δημιουργία της μάρκας. Ο χρήστης πρέπει να καταλάβει. Βρίσκεστε στον κατάλληλο τόπο για το Victorinox. Αν κυλήσει ο χρήστης προς τα κάτω, τα περιεχόμενα γίνονται σημαντικά. Το λογότυπο μειώνεται στην προβολή και παρέχει περισσότερο χώρο στα κύρια περιεχόμενα. Η πλοήγηση παραμένει πάνω, κάτι που είναι πολύ λογικό από την άποψη της χρηστικότητας.

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

Κάπως λιγότερο βέλτιστη είναι η λύση που έχει υιοθετήσει η Τράπεζα Commerzbank στον ιστότοπό της. Το λογότυπο τοποθετείται με το όνομα της εταιρείας και ως SVG, κάτι που είναι καλά λυμένο. Ωστόσο, ανταγωνίζεται

Ενδιαφέρον γίνεται όταν δούμε τα παραδείγματα στην κινητή εκδοχή.

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

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

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

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

Η μορφή αρχείου του λογότυπου της ιστοσελίδας

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

1. ενσωματώσεις το λογότυπο στην σωστή ανάλυση (με οδηγίες για ύψος και πλάτος). Συχνά, τα λογότυπα ενσωματώνονται σε πολύ υψηλή ανάλυση και μετά μειώνονται για την προβολή.
2. ενσωματώσεις το λογότυπο σε μορφή διανύσματος SVG αντί για PNG ή JPG.

Χρήση του λογότυπου της ιστοσελίδας ως Favicon

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

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

Αν ψάχνεις για μια εταιρεία που δίνει έμφαση στα ανταποκρινόμενα λογότυπα, μπορείς να επικοινωνήσεις μαζί μας. Εμείς στην 4eck Media είμαστε επαγγελματίες στην εμπειρία χρήστη.

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