χεδιασμός Ιστοχώρων, χεδιασμός Γραφικών, Γνωστική Ψυχολογία

HTML
DOWNLOAD

Μέγεθος: px

Εμφάνιση ξεκινά από τη σελίδα:

Download "χεδιασμός Ιστοχώρων, χεδιασμός Γραφικών, Γνωστική Ψυχολογία"

Δράκων Κορωναίος
8 χρόνια πριν
Προβολές:

1 χεδιασμός Ιστοχώρων, χεδιασμός Γραφικών, Γνωστική Ψυχολογία

2 χεδιασμός Ιστοχώρων Η διαδικασία Προσδιορίστε και καθορίστε το σκοπό του ιστοχώρου σας Αναπτύξτε την έννοια και την ιδέα Αποφασίστε τη δομή της πληροφορίας ή τη δομή της περιήγησης στον ιστοχώρο χεδιάστε τη διεπαφή του ιστοχώρου Αναπτύξτε τον ιστοχώρο Αξιολογήστε (απ άκρο σ άκρο ολόκληρη τη διαδικασία)

3 Προσδιορίστε και καθορίστε το σκοπό του ιστοχώρου σας Ποιος είναι ο κύριος σκοπός και στόχος του ιστοχώρου? Πληροφορίες, υναλλαγές, Εμπόριο, Διασκέδαση κ.τ.λ. Ποιοι είναι οι χρήστες/κοινό στο οποίο απευθύνεται? Δημιουργείστε δημογραφικά προφίλ/πρόσωπα Σι θέλουν? Σι χρειάζονται? Ποια μορφή/ύφος πρέπει να έχει ο ιστοχώρος?

4 Αναπτύξτε την έννοια και την ιδέα Εννοιολογικός σχεδιασμός Κάντε ένα πρόχειρο σχέδιο για το σχεδιασμό και την αρχιτεκτονική του ιστοχώρου σε αφαιρετικό επίπεδο. Θα χρησιμοποιήσετε μεταφορές? Διεξάγετε μια ανάλυση εργασίας/στόχου για να βρείτε τα χρήσιμα χαρακτηριστικά. χεδιάστε ξανά! Λάβετε υπόψη τις διαστάσεις του ιστοχώρου. (1024*768, 800*600)

5 Αποφασίστε τη δομή της πληροφορίας / περιήγησης στον ιστοχώρο Εστιάστε: στο σχεδιασμό αποδοτικής περιήγησης, οργάνωσης και χαρακτηρισμού. Γραμμική Πλέγμα Ιεραρχία Ιστός

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

7 Γνωστική Ψυχολογία Βραχυπρόθεσμη μνήμη 7±2 μονάδες μνήμης Διαρκεί μερικά δευτερόλεπτα, ευαίσθητη στη διαταραχή «Ομαδική κατάτμηση» Μακροπρόθεσμη μνήμη Καμία απώλεια μνήμης Απαιτεί μάθηση Δύσκολο να ανακτήσει «διακριτά σημεία εκκίνησης» (triggers) Π.χ

8 Γνωστική Ψυχολογία Αρχές Γκεστάλτ Εγγύτητα τα αντικείμενα που βρίσκονται κοντά σχετίζονται x x x x x x x x x x x x x x x x x x x x x x x x Ομοιότητααντικείμενα με παρόμοιες ιδιότητες (χρώμα, σχήμα, κ.τ.λ.) σχετίζονται x o x o x x o x x o x o x o x x o x o x x o x o x

9 Γνωστική Ψυχολογία Αρχές Γκεστάλτ υνέχεια τα αντικείμενα κατά μήκος ενός κοινού μονοπατιού συγκροτούν μια ομάδα υμμετρία - τα αντικείμενα που περιβάλλονται από συμμετρικά περιγράμματα θεωρούνται ως συνεχή αντικείμενα

10 Γνωστική Ψυχολογία Διανοητικά μοντέλα Γιατί είναι αυτό σημαντικό? Διανοητικά Μοντέλα Οι άνθρωποι καθιερώνουν διανοητικά μοντέλα για το πώς λειτουργούν τα πράγματα, ή το πώς θα συμπεριφέρονταν σε μια ιδιαίτερη κατάσταση Ο ιστοχώρος πρέπει να καταλαβαίνει και να σέβεται τα «διανοητικά μοντέλα» του κοινού στο οποίο απευθύνεται προκειμένου να αποφευχθεί η σύγχυση

11 Γνωστική Ψυχολογία Διανοητικά μοντέλα As proposed by the project sponsor. As specified in the project request. As designed by the senior analyst. As produced by the programmers. As installed at the user's site. What the user wanted.

12 Διαθεσιμότητα Γνωστική Ψυχολογία Μια κατάσταση όπου τα αισθητήρια χαρακτηριστικά ενός αντικειμένου υπονοούν διαισθητικά τη λειτουργία και τη χρήση του. Ροή Η έννοια της ροής ορίζεται από τον Csikszentmihalyi (1990) ως «η ολιστική αίσθηση που έχουν οι άνθρωποι με τη συνολική συμμετοχή τους, μια βέλτιστη κατάσταση της συνείδησης που χαρακτηρίζεται από μια κατάσταση συγκέντρωσης τόσο εστιασμένης η οποία ισοδυναμεί με την απόλυτη απορρόφηση σε μια δραστηριότητα» (Csikszentmihalyi, 1990).

13 Γνωστική Ψυχολογία - Ροή

14 Γνωστική Ψυχολογία ένα εργαλείο σχεδίασης

15 Γνωστική Ψυχολογία ένα εργαλείο σχεδίασης

16 Γνωστική Ψυχολογία ένα εργαλείο σχεδίασης

17 χεδιασμός Γραφικών Ο χεδιασμός Γραφικών είναι Επικοινωνία! Άμεση (Ση βιώνεις) Έμμεση (ου μιλάει κάποιος για αυτή) Πώς κάνεις ένα χρήστη να αλληλεπιδρά? Με την Επικοινωνία! Μήνυμα σε μορφή κειμένου, Διάγραμμα

18 χεδιασμός Γραφικών ειρά Fibonacci 1,1,2,3,5,8,13,21 1:2, 2:3, 3:5, 5:8, 8:13, 13:21, 21:34 Οποιοσδήποτε αριθμός στη σειρά όταν διαιρείται με τον επόμενό του δίνει σαν αποτέλεσμα περίπου Όταν διαιρείται με τον προηγούμενο το αποτέλεσμα είναι περίπου = Η χρυσή τομή

19 χεδιασμός Γραφικών Η χρυσή τομή «Ο κανόνας των τρίτων»

20 χεδιασμός Γραφικών - Συπογραφία και αναγνωσιμότητα Γραμματοσειρές Sanserif Verdana Arial Γραμματοσειρές Serif Georgia Times New Roman Σο μέγεθος της γραμματοσειράς σε μια ιστοσελίδα θα πρέπει να είναι περίπου px για απλό κείμενο. Μια γραμμή κειμένου δεν πρέπει να ξεπερνάει το μέγεθος 45.

21 χεδιασμός Γραφικών - Συπογραφία και αναγνωσιμότητα Θυμηθείτε ότι η γραμματοσειρά μεταφέρει ένα μήνυμα! LOVE HATE

22 υμβουλές για το σχεδιασμό ιστοσελίδων Η περιήγηση θα πρέπει να: Είναι εύκολη να τη μάθει κάποιος. Είναι συνεπής σε όλο τον ιστοχώρο. Παρέχει ανατροφοδότηση (feedback). Χρησιμοποιεί το μικρότερο αριθμό συνδέσμων για να φθάσει στον επόμενο προορισμό. Χρησιμοποιεί σαφείς και διαισθητικές επιγραφές. Τποστηρίζει τις εργασίες των χρηστών. Έχει κάθε σύνδεσμο ευδιάκριτο από τους άλλους συνδέσμους. Ομαδοποιεί την περιήγηση σε λογικές μονάδες. Αποφεύγει να κάνει το χρήστη να περιηγηθεί πολύ ή να χρειαστεί να πατήσει κουμπιά προκειμένου να φτάσει στη σημαντική πληροφορία. Μην απενεργοποιεί το κουμπί «πίσω» του φυλλομετρητή.

23 υμβουλές για το σχεδιασμό ιστοσελίδων Χρησιμοποιείστε ίχνη περιήγησης Βιβλία > Θέματα > Τπολογιστές > χεδιασμός Ιστοχώρων Κέντρο + περιεχόμενο Παρουσιάστε τα σημαντικότερα στοιχεία στο σημείο εστίασης σε πλήρες μέγεθος και λεπτομέρεια και επιδείξτε την περιοχή γύρω από το σημείο εστίασης (το περιεχόμενο) για να βοηθήσετε να γίνει κατανοητό το πώς η σημαντική πληροφορία σχετίζεται με όλα τα δεδομένα.

24 υμβουλές για το σχεδιασμό ιστοσελίδων Χρησιμοποιείστε τους κανόνες Γκεστάλτ για να ομαδοποιήσετε και να οργανώσετε το περιεχόμενο και τα αντικείμενα. Χρησιμοποιείστε λογικές φόρμες για να καθοδηγήσετε το χρήστη Να είστε συνεπής στο σχεδιασμό Όταν σχεδιάζετε για ανάλυση 800*600, σχεδιάστε την ιστοσελίδα σε ανάλυση 760*420. Όταν σχεδιάζετε για ανάλυση 1024*768, σχεδιάστε την ιστοσελίδα σε ανάλυση 955*600.

Σχετικά έγγραφα

Δημιουργία μοντέλου αισθητικών κριτηρίων για αποτελεσματικό οπτικό σχεδιασμό εκπαιδευτικών ιστότοπων

Δημιουργία μοντέλου αισθητικών κριτηρίων για αποτελεσματικό οπτικό σχεδιασμό εκπαιδευτικών ιστότοπων 8 ο Πανελλήνιο Συνέδριο των Εκπαιδευτικών για τις ΤΠΕ «Αξιοποίηση των Τεχνολογιών της Πληροφορίας και της Επικοινωνίας στη Διδακτική Πράξη» Σύρος, 26-28 Ιουνίου 2015 ΥΠΟ ΤΗΝ ΑΙΓΙΔΑ ΤΟΥ ΥΠΟΥΡΓΕΙΟΥ ΠΟΛΙΤΙΣΜΟΥ,