Σταματήστε να είναι τετράγωνο
Ως επαγγελματίας σχεδιαστής, γνωρίζετε (και συμβάλλετε ενδεχομένως) στην αυξημένη χρήση κύκλων σε όλα τα στοιχεία σχεδιασμού.
Από τα στοιχεία διακόσμησης στο σπίτι, όπως καθρέφτες στρογγυλής καρφίτσας και εκτυπώσεις σε εργαλεία χειρός στο κατάστημα υλικού, οι κύκλοι είναι παντού. Οι κύκλοι έχουν ακόμη μεταφερθεί στους ιστοτόπους μας, εμφανίζονται σε κεφαλίδες, μενού και μερικές φορές χτυπάνε στο κέντρο της σελίδας.
Μερικές ιστοσελίδες σχεδίασης έχουν δημιουργήσει ακόμη και blog posts, συμπεριλαμβανομένων των εξαιρετικών screenshots της δημιουργικής χρήσης κύκλων στο web design. Ωστόσο, λίγα έχουν ειπωθεί για την ψυχολογία πίσω από τη χρήση κύκλων στο σχεδιασμό ή πώς η απάντηση του χρήστη σε κύκλους μπορεί να ενσωματωθεί αποτελεσματικά στο αυξανόμενο φαινόμενο της χρήσης κινητών τηλεφώνων.
Γνωρίζουμε ότι μας αρέσουν οι κύκλοι, αλλά γιατί; Και πώς μπορεί ένας σχεδιαστής ιστοσελίδων να χρησιμοποιήσει τους καλύτερους κύκλους για να βελτιστοποιήσει την εμπειρία του χρήστη σε ανταποκρινόμενο σχεδιασμό;
Οι κύκλοι και ο εγκέφαλος
Γνώση και αντίληψη
Οι κύκλοι απευθύνονται στους ανθρώπους επειδή είναι ευκολότερο να κατανοηθούν από τα σχήματα και τα αντικείμενα με σκληρές γραμμές.
Το μάτι προσελκύει τους κύκλους και τις πληροφορίες που περιέχονται μέσα, και είναι γρηγορότερο και ευκολότερο για τον επεξεργαστή του εγκεφάλου από ό, τι τα τετράγωνα και τα ορθογώνια.
Ο Ελβετός μαθηματικός και φυσικός Jurg Nonni, συγγραφέας της οπτικής αντίληψης, δείχνει ότι η αφαίρεση των άκρων μας επιτρέπει να αντιλαμβανόμαστε ταχύτερα ένα αντικείμενο. Σύμφωνα με τον Nonni, "Ένα ορθογώνιο με αιχμηρές άκρες έχει πράγματι μια λίγο πιο γνωστική ορατή προσπάθεια από ό, τι για παράδειγμα μία έλλειψη του ίδιου μεγέθους. Το μάτι μας είναι ακόμα πιο γρήγορο κατά την εγγραφή ενός κύκλου. Οι άκρες περιλαμβάνουν πρόσθετα εργαλεία εικόνας νευρώνων. Συνεπώς, η διαδικασία επιβραδύνεται. "
Γνωστές και ευχάριστες καμπύλες
Εκτός από τη γνωστική ικανότητα του εγκεφάλου να επεξεργάζεται κύκλους πιο γρήγορα από ό, τι μπορεί να επεξεργάζεται τετράγωνα και ορθογώνια, επεξεργαζόμαστε οικείες πληροφορίες και αντικείμενα γρηγορότερα από αυτά που δεν αναγνωρίζουμε.
Όλοι αναγνωρίζουν κύκλους και οι άνθρωποι μαθαίνουν να συνδέουν σχήματα με συγκεκριμένες ενέργειες και αποτελέσματα, όπως το σύμβολο "STOP" του κόκκινου οκταγώνου. Σύμφωνα με τις κατευθυντήριες γραμμές OS X της ανθρώπινης διεπαφής της Apple, "οι άνθρωποι μαθαίνουν να συσχετίζουν ορισμένες συμπεριφορές με συγκεκριμένα στοιχεία που βασίζονται στην εμφάνισή τους. Για παράδειγμα, οι άνθρωποι αναγνωρίζουν τα κουμπιά με το στρογγυλεμένο σχήμα τους. "
Μια αποτελεσματική χρήση των κύκλων στα εικονικά στοιχεία μενού Azonmedia Της υπηρεσίας.
Αντιμετωπίζουμε κύκλους, οβάλ και αντικείμενα στρογγυλεμένων άκρων με πολλούς ζεστούς και μη απειλητικούς τρόπους σε διαφορετικούς πολιτισμούς και περιβάλλοντα. Τα σύννεφα, τα αυγά, ο ήλιος και η σελήνη στη φύση εμφανίζονται στρογγυλεμένα στο γυμνό μάτι. Τα πρόσωπα χαμόγελα, κέικ, πίτες, καμπύλες φιγούρες είναι ευχάριστες για τις αισθήσεις.
Οι εγκέφαλοί μας ανταποκρίνονται καλά σε κύκλους και καμπύλες, ενώ αντιλαμβάνονται σκληρά αντικείμενα ως πιο σκληρά, πιο καθορισμένα και με πιθανότητα να αποτελούν απειλή.
Οι κύκλοι και η εμπειρία του χρήστη
Οι κύκλοι είναι αποτελεσματικοί στον σχεδιασμό ιστοσελίδων για ακριβώς αυτούς τους λόγους.
Οι χρήστες του Διαδικτύου είναι εμφανώς ανυπόμονοι και επειδή οι κύκλοι γίνονται πιο εύκολα αντιληπτοί και κατανοητοί, χρειάζονται λιγότερο χρόνο για να επεξεργαστούν τις πληροφορίες που αντιπροσωπεύουν.
Οι χρήστες κινητής τηλεφωνίας είναι ακόμα πιο ανυπόμονοι. Είναι επίσης απασχολημένοι, συχνά σε κίνηση, πολλαπλών εργασιών και χρησιμοποιώντας δείκτη ή αντίχειρα για να περιηγηθείτε στη φορητή συσκευή τους. Θέλουν τις πληροφορίες τους ΤΩΡΑ. Οι κύκλοι βοηθούν τους χρήστες κινητής τηλεφωνίας να εντοπίζουν αποτελεσματικότερα τις πληροφορίες που αναζητούν.
Κύκλοι και αντίχειρες
Ένας άλλος κύκλος κύκλων είναι ευεργετικός σε ένα κινητό πρώτο και ανταποκρινόμενο περιβάλλον σχεδιασμού είναι η καταλληλότητά τους ως στοιχεία στις διεπαφές αφής.
Δεδομένου ότι τα smartphone με οθόνη αφής και οι χρήστες δισκίων αγγίζουν με το δάχτυλό σας, ολισθαίνουν ή απομακρύνονται προς τις πληροφορίες που αναζητούν, είναι λογικό να χρησιμοποιείτε κύκλους για να κατευθύνετε τον χρήστη. Όχι μόνο μιμούνται το σχήμα των δακτύλων, συνδέουμε κύκλους και στρογγυλεμένες άκρες με κουμπιά και οι εγκέφαλοί μας επεξεργάζονται γρήγορα τις απαιτούμενες ενέργειες.
Web developer Ο Oliver James Gosling
Όταν ενσωματώνετε κύκλους σε μια διεπαφή κινητής τηλεφωνίας αφής, σχεδιάστε τη στη μικρότερη οθόνη. Το κείμενο ή οι εικόνες μέσα στον κύκλο πρέπει να διαβάζονται εύκολα και το μέγεθος πρέπει να παραμένει τουλάχιστον το μέγεθος ενός δακτύλου ή 44 pixels.
Κύκλοι και χώρος οθόνης
Τα καλά νέα σχετικά με τη χρήση κύκλων σε ανταποκρινόμενο σχεδιασμό είναι ότι το CSS3 απλοποιεί σε μεγάλο βαθμό τις απαιτήσεις κωδικοποίησης.
Τα κακά νέα είναι ότι οι κύκλοι καταλαμβάνουν πολλά ακίνητα και έχουν ως αποτέλεσμα πιο ανοιχτή περιοχή οθόνης.
Καθώς ο χώρος οθόνης σε smartphones και tablet μπορεί να είναι αρκετά μικρός, πώς μπορείτε να εισαγάγετε κύκλους χωρίς να ανησυχείτε για το γεγονός ότι είναι τόσο μικροί που είναι αδύνατο να διαβάσετε, να πατήσετε ή να κάνετε κλικ;
Μια απλή κινητή διασύνδεση
Συμβάλλει στη διατήρηση της απλής διασύνδεσης του κινητού σας. Καθώς το μάτι έλκεται προς τον κύκλο ούτως ή άλλως, δεν υπάρχει λόγος να γεμίσει το υπόλοιπο της οθόνης με περιεχόμενο που ο χρήστης θα χάσει.
Αν δεν αποτελούν μέρος της επικεφαλίδας ή του λογότυπου, διατηρήστε τη χρήση του κύκλου σε τουλάχιστον ένα ή δύο σε κάθε σελίδα. Δοκιμάστε να χρησιμοποιήσετε ένα κουμπί κυκλικής αναζήτησης ή χρησιμοποιήστε ένα για την παρότρυνση για δράση, όπως "καλέστε εδώ" ή "εγγραφείτε εδώ".
Σχέδιο βαρύτητας χρησιμοποιεί κύκλους και χρώμα για να προσελκύσει το μάτι στο λογότυπο, το χαρτοφυλάκιο και το κείμενο στην αρχική σελίδα.
Φόντα και κουμπιά κοινής χρήσης
Όπως συμβαίνει με οποιοδήποτε στοιχείο σχεδιασμού, η χρήση κύκλων πρέπει να ταιριάζει με το περιεχόμενο, το προϊόν ή την υπηρεσία, το στυλ και το branding του ιστότοπου. Θα πρέπει να βελτιώσει την εμπειρία του χρήστη και να απλοποιήσει τη διεπαφή.
Εάν η χρήση παρότρυνσης για δράση δεν είναι κατάλληλη για τον ιστότοπο ή εάν τα στοιχεία πλοήγησης και μενού απλά δεν λειτουργούν μέσα σε έναν κύκλο, εξετάστε το ενδεχόμενο να ενσωματώσετε έναν κύκλο στο παρασκήνιο. Χρησιμοποιήστε ένα μεγαλύτερο κύκλο στο παρασκήνιο για να τραβήξετε το μάτι στο πιο σημαντικό κομμάτι του περιεχομένου της σελίδας (ημιδιαφανές πίσω από το κείμενο).
Θυμηθείτε, το περιεχόμενο είναι αυτό που ο χρήστης του κινητού είναι εδώ για πρώτη φορά. Ενθαρρύνετε τη συμμετοχή των χρηστών επιλέγοντας γύρω από τα κουμπιά κοινής χρήσης κοινωνικών μέσων αντί για τις ορθογώνιες επιλογές.
Εγκύκλιοι εικονιδίων σε ανταποκρινόμενο σχεδιασμό
Ένας από τους πιο δημοφιλείς τρόπους ενσωμάτωσης κύκλων σε ιστότοπους είναι τα εικονίδια σε ένα μενού. Αυτό ταιριάζει με το σχεδιασμό που ανταποκρίνεται καλά, καθώς αντικαθιστά μακρύ και / ή συγκεχυμένο κείμενο με μια απλούστερη εικόνα.
Buza χρησιμοποιεί κύκλους για να συμπληρώσει το κάθετο μενού του κινητού.
Ένα κυκλικό εικονίδιο απαιτεί λιγότερο χώρο, επιτρέποντας περισσότερο χώρο για περιεχόμενο. Φαίνεται καλό και ο χρήστης επεξεργάζεται γρήγορα αυτό που αντιπροσωπεύει.
Οβάλ ή στρογγυλεμένα ορθογώνια
Ίσως δεν είστε έτοιμοι να τυλίξετε τα χέρια σας γύρω από ένα μεγάλο παλιό κύκλο. Είναι εντάξει. Αλλά μην κολλήσετε με σκληρές άκρες.
Προσθέστε μερικά στρογγυλεμένα ορθογώνια ή ωοειδές στην προσαρμοσμένη εργαλειοθήκη σχεδιασμού. Οι λειασμένες γωνίες θα διευκολύνουν την εστίαση στο περιεχόμενο μέσα στις καμπύλες, αντί να τραβήξετε την προσοχή σας στις εξωτερικές άκρες.
Τελική λέξη
Ενώ οι σχεδιαστές ιστοσελίδων μπορούν να περάσουν ώρες αγωνιώνοντας πάνω από τα πλεονεκτήματα των κύκλων ή των ορθογώνων με στρογγυλά άκρα έναντι των αιχμηρών άκρων, όταν πρόκειται για την ευχαρίστηση του χρήστη με το κινητό σχέδιο, είναι όλα σχετικά με το περιεχόμενο. Ο χρήστης θέλει ένα ενδιαφέρον και χρήσιμο περιεχόμενο που παρουσιάζεται σε ένα απλό και εύκολο στη χρήση περιβάλλον. Όλα τα υπόλοιπα είναι δευτερεύοντα.
Παρόλο που η ευέλικτη σχεδίαση ιστοσελίδων επιδιώκει να ανταποκριθεί στο περιβάλλον, θα πρέπει επίσης να ανταποκρίνεται στις ανάγκες του χρήστη. Οι χρήστες αναγνωρίζουν το γνωστό σχήμα του κύκλου, το αντιλαμβάνονται γρήγορα και μπορούν να εντοπίσουν εύκολα το σημείο με δυνατότητα κλικ στην οθόνη. Χρησιμοποιήστε έναν απλό κύκλο στο επόμενο σχεδιαστικό έργο σας. Οι χρήστες σας θα σας ευχαριστήσουν για αυτό.
Χρησιμοποιείτε κύκλους για τα προεκτάσεις σας; Παίζετε με ασφάλεια με λεπτές στρογγυλεμένες ορθογώνιες παραλλαγές; Ενημερώστε μας στα σχόλια παρακάτω.
Προτεινόμενη εικόνα / μικρογραφία, εικόνα κύκλων μέσω Shutterstock