Θεωρία Gestalt και σχεδιασμός ιστοσελίδων

1. Οι κανόνες Gestalt 1. Ομοιότητα 2. Εγγύτητα 3. Συμμετρία 4. Καλή Συνέχεια 5. Κοινή Μοίρα 6. Κλείσιμο

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

2. Γιατί χρησιμοποιούμε τη θεωρία Gestalt για το σχεδιασμό ιστοσελίδων; 1. Χρηστικότητα: χρησιμοποιούμε κενό χώρο για την αποτελεσματική διάκριση μεταξύ των στοιχείων. 2. Εύκολα ανιχνεύσιμα σχέδια. 3. Προσβασιμότητα: ευκολότερο για όσους έχουν προβλήματα όρασης να κατανοήσουν μια σελίδα.

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

3. Ομαδοποίηση Παράδειγμα μιας ιστοσελίδας που χρησιμοποιεί διάφορους κανόνες Gestalt

3. Ομαδοποίηση Ομοιότητα/Εγγύτητα/Συμ

3. Ομαδοποίηση Εγγύτητα/Ομοιότητα/ Καλή Συνέχεια

3. Ομαδοποίηση Εγγύτητα/Καλή Συνέχεια

3. Ομαδοποίηση: δηλώνοντας το προφανές

3. Ομαδοποίηση: δηλώνοντας το προφανές Άμεσα προφανές ποια λέξη αντιστοιχεί σε κάθε κουμπί επιλογής.

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

4. Το τεστ της θαμπάδας Ένας τρόπος για να σκεφτούμε τη λειτουργία των κανόνων Gestalt είναι ότι παρέχουν «χαμηλής συχνότητας» πληροφορία που βοηθά τους ανθρώπους να οργανώσουν μια ιστοσελίδα πριν ακόμα ο αναγνώστης επεξεργαστεί την «υψηλής συχνότητας» πληροφορία από το ίδιο το κείμενο και τις λεπτομέρειες των γραφικών στην ιστοσελίδα. Μπορείτε να δείξετε το παραπάνω θολώνοντας ένα στιγμιότυπο από μια ιστοσελίδα. (Από τη σελίδα του Jim Levin: http://tepserver.ucsd.edu/~jlevin/gp/blurred/index.html)

4. Το τεστ της θαμπάδας Είναι εύκολη η διαφοροποίηση των διαφορετικών στοιχείων σε ομάδες χωρίς να δούμε το περιεχόμενο με λεπτομέρεια

4. Το τεστ της θαμπάδας Ένα άλλο παράδειγμα με μια ιστοσελίδα που πιθανώς δεν έχει ξαναδεί (σε αντίθεση με το Amazon).

4. Το τεστ της θαμπάδας Αντίθετα, αυτή η σελίδα δεν έχει σχεδόν καθόλου πληροφορία χαμηλής συχνότητας

4. Το τεστ της θαμπάδας Επομένως, εάν μια σελίδα δεν είναι εύκολα κατανοητή όταν είναι θολή (ή όταν στραβώνετε τα μάτια σας) μάλλον δεν είναι καλά σχεδιασμένη.

5. Webpagesthatsuck.com Webpagesthatsuck.com ο τίτλος είναι αρκετά αυτονόητος! Όλες σχεδόν οι ιστοσελίδες που αναφέρονται στο Webpagesthatsuck.com ότι έχουν κακή πλοήγηση / μπερδεμένη διάταξη δεν ακολουθούν τους κανόνες Gestalt

5. Webpagesthatsuck.com Παράδειγμα 1 http://www.legalinfosysinc.c

5. Webpagesthatsuck.com Παράδειγμα 1 http://www.legalinfosysinc.c Όχι και πολύ σαφέστερα! Τι συμβαίνει;

5. Webpagesthatsuck.com Παράδειγμα 2 http://www.squareneck.com

6. Σχεδιάζοντας με Gestalt «Μια οπτική παρουσίαση της πληροφορίας που δε λαμβάνει υπόψη το πώς οι αναγνώστες επεξεργάζονται την οπτική πληροφορία και το πώς αλληλεπιδρά η αντίληψη των αναγνωστών με τα σχήματα, μπορεί να οδηγήσει σε σύγχυση και έλλειψη ενότητας» Από το Elements of Ethos in Web Design, V. Michele Damron, David Gillette, Dan Jones http://tc.eserver.org/13290.html

6. Σχεδιάζοντας με Gestalt Δεν είναι απαραίτητα σημαντικό να γνωρίζει κανείς τους κανόνες Gestalt όταν σχεδιάζει ιστοσελίδες (ή οτιδήποτε άλλο) Αρκετά συχνά, όταν ο σχεδιασμός δείχνει «σωστός» ενσωματώνει πολλά από τα στοιχεία της θεωρίας Gestalt

6. Σχεδιάζοντας με Gestalt... Ωστόσο αξίζει τον κόπο να έχει κανείς στο μυαλό του τους κανόνες Gestalt!

7. Αναφορές Σε περίπτωση που σας ενδιαφέρει: http://tepserver.ucsd.edu/~jlevin/gp/ http://www.digitalweb.com/articles/principles_of_design http://www.webpagesthatsuck.com