Ποιες είναι οι αρχές Gestalt & πώς να τις εφαρμόσετε

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

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

Ο νόμος της ομοιότητας

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

Παράδειγμα της αρχής της ομοιότητας. Φωτογραφία του συγγραφέα.

Χρήση της ομοιότητας στο σχεδιασμό UX και UI

Δείτε επίσης: 12 εμπνευσμένες τάσεις γραφιστικής για το 2022

Ας φανταστούμε ότι η εταιρεία σας ανέπτυξε μια εφαρμογή με το όνομα "Il Mio Chef'' που χρησιμοποιείται από λάτρεις του ιταλικού φαγητού σε όλες τις ΗΠΑ και τον Καναδά (Θα το χρησιμοποιήσουμε για το υπόλοιπο του άρθρου). Μια πρόσφατη έκθεση που σας παρέδωσε ο ερευνητής UX σας αναφέρει ότι όταν πρόκειται για παραγγελία ιταλικού φαγητού, οι χρήστες ενδιαφέρονται κυρίως για το ποια εστιατόρια είναι τα πιο κοντινά σε αυτούς. Εξάλλου, όλοι θα θέλαμε να έχουμε το δικό μαςλαζάνια ή πίτσα που παραδίδονται όσο είναι ακόμα φρέσκα και ζεστά, έτσι δεν είναι;

Για να διευκολύνουμε τους χρήστες της εφαρμογής μας να δουν ποια εστιατόρια είναι τα πιο κοντινά σε αυτούς μπορούμε να χρησιμοποιήσουμε την αρχή της ομοιότητας τονίζοντας αυτά τα εστιατόρια στο UI. Στην παρακάτω εικόνα μπορείτε να δείτε πώς η επισήμανση αυτών των επιλογών με κίτρινο χρώμα (στα δεξιά) κάνει μεγάλη διαφορά τονίζοντας οπτικά τη διαφορά μεταξύ των πιο κοντινών εστιατορίων και αυτών που είναι πιο μακριά. Έτσι μπορείτε ναμπορούν να χρησιμοποιήσουν την αρχή της ομοιότητας για να βοηθήσουν τους χρήστες σας να βρουν γρήγορα αυτό που ψάχνουν.

Χρησιμοποιώντας την αρχή της ομοιότητας Gestalt. Εικόνα από τον συγγραφέα.

Ο νόμος της εγγύτητας

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

Εγγύτητα - παράδειγμα 1 - μια μεγάλη ομάδα. Εικόνα από τον συγγραφέα.

Εγγύτητα - παράδειγμα 2 - τρεις διαφορετικές ομάδες. Εικόνα από τον συγγραφέα.

Χρήση της εγγύτητας στο σχεδιασμό UX και UI

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

Αυτή τη φορά, ας φανταστούμε ότι είστε ένα στέλεχος που θέλει να δει πώς αποδίδει η εφαρμογή σας "Il Mio Chef". Θέλετε να δείτε τους KPIs που μετρούν τις οικονομικές επιδόσεις, τη δέσμευση των χρηστών και την ικανοποίηση. Στην αρχή, ο ειδικός σας στην οπτικοποίηση πληροφοριών δημιουργεί τον παρακάτω πίνακα οργάνων που κάνει εσάς και όλα τα άλλα στελέχη να χάνεστε στους αριθμούς και να κάνετε ακόμα περισσότερες ερωτήσεις. Μετά από ένα μήνα πολλοί από εσάςαπλά σταματήστε να χρησιμοποιείτε αυτό το ταμπλό συνολικά.

KPI dashboard - Il Mio Chef. Εικόνα από τον συγγραφέα.

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

Χρήση της αρχής Gestalt της εγγύτητας στο σχεδιασμό του ταμπλό. Εικόνα από τον συγγραφέα.

Ο νόμος της συνέχειας

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

Ένα παράδειγμα της αρχής της συνέχειας. Εικόνα από τον συγγραφέα.

Χρήση της συνέχειας στο σχεδιασμό UX και UI

Ο ερευνητής UX σας παρουσίασε μια νέα έκθεση που δείχνει ότι το κύριο κίνητρο για τους χρήστες να χρησιμοποιήσουν την εφαρμογή "Il Mio Chef" είναι η εξερεύνηση του φαγητού, αφού τους επιτρέπει πρόσβαση σε νέα εστιατόρια ιταλικής κουζίνας κάθε εβδομάδα. Κοιτάζετε τη μετρική που δείχνει πόσες φορές οι χρήστες κάνουν swipe στις επιλογές τους με τον τρέχοντα σχεδιασμό του UI στην παρακάτω εικόνα (αριστερή πλευρά) και βλέπετε ότι ποτέ δεν κάνουν swipe πάνω από δύο φορές στομέσο όρο για να δουν ποιες επιλογές είναι διαθέσιμες σε αυτούς.

Χρησιμοποιώντας την αρχή της συνέχειας (δεξιά πλευρά στην παρακάτω εικόνα) ο σχεδιαστής UX σας βοήθησε να αυξηθεί αυτός ο αριθμός σε περίπου 10 swipes κατά μέσο όρο. Πώς συνέβη αυτό; Κρύβοντας μέρος της εικόνας και τονίζοντας το γεγονός ότι πρέπει να κάνετε swipe αριστερά ή δεξιά για να δείτε τι υπάρχει εκεί μέσα, τα μάτια των χρηστών σας καθοδηγήθηκαν να δημιουργήσουν κυριολεκτικά την κίνηση "swipe" και είχαν μεγαλύτερο κίνητρο να εξερευνήσουν περισσότερα εστιατόρια καιΑυτό είναι κάτι που ο προηγούμενος σχεδιασμός δεν σας παρακινούσε καθόλου να το κάνετε, ακόμη και αν είστε ήδη εγγενώς παρακινημένοι να το κάνετε.

Χρήση της αρχής της συνέχειας Gestalt στο σχεδιασμό UX/UI. Εικόνα από τον συγγραφέα.

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

‍

Το εξώφυλλο περιλαμβάνει έργο τέχνης του Miklos Philips, επεξεργασμένο στο Vectornator.