Θεωρία gestalt και σχεδιασμός ιστοσελίδων
Πως εφαρμόζονται οι αρχές της θεωρίας Gestalt στον σχεδιασμό ιστοσελίδας;
Σε αυτό το άρθρο θα ρίξουμε μια κοντινή ματιά στις σχεδιαστικές αρχές της θεωρίας Gestalt και πως αυτές μπορούν να εφαρμοστούν ώστε η ιστοσελίδα σας να είναι φιλική στην πλοήγηση από τον χρήστη.
Όταν επισκέπτεστε μια ιστοσελίδα για πρώτη φορά, πόση ώρα σας παίρνει για να καταλάβετε τι ακριβώς κοιτάτε; Καταλαβαίνετε αυτόματα, σωστά; Στην πραγματικότητα, εάν επισκεφτείτε μια ιστοσελίδα που σας αναγκάζει να σταματήσετε για να σκεφτείτε τι ακριβώς αυτή αφορά μάλλον δεν θα παραμείνετε για πολλή ώρα σ’ αυτή την ιστοσελίδα.
Ένας από τους λόγους που εξηγεί γιατί επιτυχημένα websites μοιάζουν «άκοπα» στην περιήγηση είναι γιατί ο βασικός τους σχεδιασμός βασίζεται στις αρχές της θεωρίας Gestalt (gestalt στα γερμανικά σημαίνει σχήμα).
Αυτές οι σχεδιαστικές αρχές μας βοηθούν να κατανοήσουμε πως οι χρήστες προσλαμβάνουν αυτό που βλέπουν σε μια οθόνη. Πιο συγκεκριμένα, πως το μυαλό τους είναι ικανό να απλοποιήσει το σύνθετο και να δώσει τάξη στο χάος.
Τι είναι οι αρχές Gestalt;
Οι αρχές Gestalt είναι ένα σύνολο από κανόνες που περιγράφουν πως το ανθρώπινο μυαλό μεταφράζει όσα βλέπουν τα μάτια. Αυτές μεταξύ άλλων περιλαμβάνουν:
- Κλείσιμο
- Συνέχεια
- Εστιακό Σημείο
- Κοινή περιοχή
- Εγγύτητα
- Ομοιότητα
- Συμμετρία
- Ενοποιημένη Συνδεσιμότητα
Οι θεωρίες αυτές γεννήθηκαν τη δεκαετία του 1920 από μια ομάδα Γερμανών ψυχολόγων που ήθελαν να καταλάβουν πως οι άνθρωποι βγάζουν νόημα από αυτό που βλέπουν, ακόμα και αν αυτό είναι σύνθετο και χαοτικό. Κατέληξαν σε μια συλλογή από κανόνες που εξηγούσαν τη φυσική και αναμενόμενη και αναμενόμενη ανάγκη για:
- Αναγνώριση μοτίβων.
- Ομαδοποίηση στοιχείων.
- Απλοποίηση του σύνθετου.
Η θεωρία gestalt αργότερα προσαρμόστηκε από τους σχεδιαστές. Είναι πάντα παρούσα στις αποφάσεις των web designers πάνω στη δουλειά τους, είτε το κάνουν συνειδητά είτε όχι.
Εάν ρίξετε μια ματιά στην κεφαλίδα του https://www.sealsdivingcenter.gr/, για παράδειγμα, θα δείτε κάποιες από τις αρχές της Gestalt εν δράσει:
Η θεωρία gestalt ορίζεται από κάποιες αρχές που επιτρέπουν στους επισκέπτες να δουν αυτήν την κεφαλίδα χωρίς να κατακλύζονται από τις πληροφορίες που περιέχει.
Για αρχή, κατανοούν ενστικτωδώς ότι τα κενά χωρίζουν διαφορετικά στοιχεία της κεφαλίδας (η αρχή της εγγύτητας). Κατανοούν επίσης ότι το βελάκι στο μενού υποδηλώνει ότι πρόκειται για δύο διαφορετικούς τύπους συνδέσμων — συγκεκριμένα, συνδέσμους ανώτατου επιπέδου έναντι δευτερευόντων συνδέσμων (η αρχή της κοινής περιοχής).
Δεν υπάρχει λόγος για τους επισκέπτες αυτού του ιστότοπου να προβληματιστούν για όσα βλέπουν ή για να βρουν αυτό που ψάχνουν.
Οι 5 αρχές της θεωρίας Gestalt που θα κάνουν τις ιστοσελίδες σας ευκολότερες στη χρήση
Διαβάστε πιο αναλυτικά για τις πιο χρήσιμες και πιο χρησιμοποιημένες αρχές της θεωρίας Gestalt μαζί με κάποια παραδείγματα που επιδεικνύουν πως να τις χρησιμοποιήσετε στο σχεδιασμό ιστοσελίδων:
-
Εγγύτητα
Η αρχή της εγγύτητας δηλώνει ότι τα στοιχεία που είναι πολύ κοντινά μεταξύ τους εκλαμβάνονται σαν μέρη μια κοινής ομάδας. Ο κενός χώρος είναι το μέσο που χρησιμοποιούμε ώστε οι επισκέπτες να καταλάβουν τις διαφορές μεταξύ των στοιχείων και να μην ενταχθούν λανθασμένα σε μια ομάδα που δεν ανοίγουν.
Η αρχή αυτή κάνει ευκολότερη για τους επισκέπτες την πρόσληψη του περιεχομένου μιας σελίδας. Αντί να προσπαθούν να καταλάβουν που αρχίζουν και που τελειώνουν οι ενότητες, η ύπαρξη κενών τους επιτρέπει να καταλάβουν τις διαφορές χωρίς να χρειάζεται αυτές να διαχωρίζονται από γραμμές για παράδειγμα.
Δείτε για παράδειγμα ένα screenshot από τη σελίδα δημιουργίας ιστοσελίδων της Dreamweaver.Gr:
Τα άφθονα λευκά κενά μεταξύ των σημείων καθορίζουν πού βρίσκονται τα όριά τους. Επιπλέον, η εγγύτητα του εικονιδίου κάθε υποενότητας και οι ξεκάθαροι τίτλοι βοηθούν τους επισκέπτες να επικεντρωθούν σε μία υποενότητα τη φορά.
-
Κοινή περιοχή
Η αρχή της κοινής περιοχής δηλώνει ότι τα στοιχεία που περικλείονται στον ίδιο χώρο αποτελούν μέρος της ίδιας ομάδας. Είναι παρόμοιο με την αρχή της εγγύτητας, αλλά εδώ χρησιμοποιούνται ορατά περιγράμματα αντί για λευκό διάστημα για να δημιουργήσετε τη σχέση μεταξύ των στοιχείων. Οι ξεκάθαρα κοινές περιοχές υπαγορεύονται από περιγράμματα.
Για παράδειγμα, μια ιστοσελίδα που χρησιμοποίησε περιγράμματα είναι η σελίδα για κατασκευή ηλεκτρονικού φαρμακείου της Dreamweaver.Gr
-
Ενοποιημένη συνδεσιμότητα
Η αρχή της ενοποιημένης συνδεσιμότητας δηλώνει ότι τα στοιχεία θεωρούνται μέρος της ίδιας μονάδας όταν είναι φυσικά συνδεδεμένα μεταξύ τους. Για να επιτευχθεί αυτό το αποτέλεσμα στο σχεδιασμό ιστοσελίδων, είναι σύνηθες να χρησιμοποιούνται γραμμές για τη σύνδεση ορισμένων στοιχείων μεταξύ τους.
Δεν είναι ότι οι επισκέπτες δεν θα μπορούν να βγάλουν αυτό το συμπέρασμα από μόνοι τους — ειδικά εάν τα διαφορετικά στοιχεία έχουν σχεδιαστεί χρησιμοποιώντας το ίδιο στυλ ετικέτας κεφαλίδας ή είναι οριζόντια ή κατακόρυφα στοιχισμένα. Ωστόσο, μπορεί σε κάποια projects αυτό να πρέπει να γίνει πιο ξεκάθαρο. Μπορείτε επίσης να χρησιμοποιήσετε γραμμές σαν σχεδιαστικά στοιχεία, όπως στην εικόνα παρακάτω, για να κάνετε μια δήλωση σχετικά με τη συνδεσιμότητα των αντικειμένων.
Υπάρχει μια κυκλική γραμμή στο φόντο που αγγίζει τις διάφορες φωτογραφίες. Επιπλέον, υπάρχουν διάφορες γραμμές — που αποτελούνται από μικρούς κύκλους ή σύμβολα πρόσθεσης — σε όλη τη σελίδα που κάνουν συνδέσεις μεταξύ διαφορετικών στοιχείων και ενοτήτων.
Όλες αυτές οι γραμμές υποδηλώνουν πως ό,τι φαίνεται εδώ είναι μέρος της δουλειάς του ίδιου φωτογράφου.
-
Συνέχεια
Η αρχή της συνέχειας δηλώνει ότι τα αντικείμενα που ακολουθούν την ίδια διαδρομή θεωρούνται ότι ανήκουν στην ίδια ομάδα που κινούνται προς την ίδια κατεύθυνση. Οπότε είναι παρόμοια με την αρχή της συνδεσιμότητας, αλλά εδώ δεν υπάρχουν ορατές γραμμές.
Όταν αυτή η αρχή εφαρμόζεται, δεν ενοποιεί απλώς μια ομάδα στοιχείων. Τους δίνει επίσης την αίσθηση ότι κινούνται (ακόμα κι αν δεν είναι κινούμενα). Αυτό επιτρέπει στους σχεδιαστές να είναι δημιουργικοί στον τρόπο με τον οποίο κατευθύνουν την προσοχή των επισκεπτών σε ορισμένα μέρη ενός ιστότοπου.
Μπορείτε να χρησιμοποιήσετε κάθε είδους γραφικό στοιχείο για να δημιουργήσετε οπτικά μια διαδρομή σε μια σελίδα, π.χ βέλη, ίχνη από ανθρώπινα βήματα, πατουσάκια ζώων κ.τ.λ. και να οποία να οδηγούν στο σημείο που θέλετε να υποδείξετε στον επισκέπτη. Ακόμα και αν αυτά αποτελούν στατικά στοιχεία του σχεδιασμού σας τα μάτια και το μυαλό αυτόματα θέλουν να τα ακολουθήσουν
-
Ομοιότητα
Η αρχή της ομοιότητας δηλώνει πως το μυαλό μας συσχετίζει στοιχεία που έχουν τα ίδια χαρακτηριστικά μεταξύ τους. Τα στοιχεία αυτά δεν χρειάζεται να είναι 100% πανομοιότυπα. Το μόνο που χρειάζεται είναι ένα κοινό διακριτό χαρακτηριστικό — όπως το χρώμα, το σχήμα ή η κίνηση που κάνουν.
Όταν με σταθερότητα εφαρμόζετε ένα μοναδικό και αναγνωρίσιμο στυλ σε συγκεκριμένα στοιχεία της ιστοσελίδας σας, αυξάνεται η διαδραστικότητα των χρηστών με αυτά. Ένα καλό παράδειγμα πάνω σε αυτό αφορά το σχεδιασμό κουμπιών.
Τα call to action κουμπιά δεν φτιάχνονται πάντα ίδια. Γι’ αυτό κάποιοι web designers τους δίνουν διαφορετική εμφάνιση μέσα στην ίδια ιστοσελίδα.
Ας δούμε λίγο αυτή την αρχή της ομοιότητας στην ιστοσελίδα Υπηρεσίες dpo της Dreamweaver.Gr
Το πρώτο κουμπί είναι φωτεινό πορτοκαλί με άσπρο κείμενο. Ο συνδυασμός αυτός απευθείας τραβάει την προσοχή στο κουμπί και στη σχετική με αυτό ενέργεια. Όταν οι επισκέπτες ξανασυναντήσουν αυτό το συνδυασμό μέσα στην ιστοσελίδα, θα ξέρουν πως πρέπει να του δώσουν προσοχή.
Το δευτερεύον κουμπί, από την άλλη μεριά, έχει έναν πολύ ουδέτερο σχεδιασμό, τον σχεδιασμό του κουμπιού – φάντασμα. Αν και έχει έντονο σε χρώμα περίγραμμα, αλλά είναι εσωτερικό διάφανο, ξεχωρίζει πάνω στην εικόνα. Ωστόσο, δεν «φωνάζει» για προσοχή.
Για να κλείσουμε
Οι αρχές της Gestalt στον σχεδιασμό ιστοσελίδων δεν αφορούν το πως θα γίνει μια ιστοσελίδα όμορφη. Αυτό είναι σημαντικό, αλλά έχουμε άλλους σχεδιαστικούς κανόνες και τάσεις για να μας βοηθήσουν σε αυτό.
Οι αρχές αυτές αφορούν πως να κάνουμε μια ιστοσελίδα να βγάζει νόημα. Με άλλα λόγια πως να σχεδιάζουμε ιστοσελίδες εύχρηστες και χρήσιμες για όλους τους επισκέπτες μας.
Καταλαβαίνοντας πως ο εγκέφαλος εκλαμβάνει αυτό που βλέπει το μάτι, θα μπορέσετε να εφαρμόσετε αποτελεσματικά αυτές τις αρχές σε ό,τι και αν σχεδιάζετε. Σαν αποτέλεσμα θα διαπιστώσετε ότι οι επισκέπτες της ιστοσελίδας που σχεδιάσατε μπορούν απροβλημάτιστα να κινηθούν μέσα στο περιεχόμενο σας χωρίς να αγχωθούν στο τέλος.