ΣΧΕΔΙΑΣΗ & ΑΞΙΟΛΟΓΗΣΗ ΕΚΠΑΙΔΕΥΤΙΚΟΥ ΛΟΓΙΣΜΙΚΟΥ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Θέματα Σχεδίασης Μέρος 5 ο Οργάνωση Στοιχείων Πολυμέσων

ΣΧΕΔΙΑΣΗ & ΑΞΙΟΛΟΓΗΣΗ ΕΚΠΑΙΔΕΥΤΙΚΟΥ ΛΟΓΙΣΜΙΚΟΥ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Ενότητες (1) Ευρετικοί Κανόνες για τη Χρήση & Οργάνωση στοιχείων Πολυμέσων (2) Αρχές Σχεδίασης Οθονών Πολυμέσων

ΣΧΕΔΙΑΣΗ & ΑΞΙΟΛΟΓΗΣΗ ΕΚΠΑΙΔΕΥΤΙΚΟΥ ΛΟΓΙΣΜΙΚΟΥ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Στοιχεία Πολυμέσων ΚΕΙΜΕΝΟ ΧΡΩΜΑ ΕΙΚΟΝΑ-ΓΡΑΦΙΚΑ ΗΧΟΣ ΣΧΕΔΙΟΚΙΝΗΣΗ VIDEO

ΣΧΕΔΙΑΣΗ & ΑΞΙΟΛΟΓΗΣΗ ΕΚΠΑΙΔΕΥΤΙΚΟΥ ΛΟΓΙΣΜΙΚΟΥ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Το πώς θα χειριστείτε το κείμενο εξαρτάται από τις ανάγκες του τελικού χρήστη και τους στόχους του εκπαιδευτικού λογισμικού Πχ. αλλιώς θα χειριστείτε και θα εμφανίσετε κείμενο στην οθόνη αν αναπτύσσετε: …λογισμικό για μικρά παιδιά, …κάποια εφαρμογή εκμάθησης εργαλείων λογισμικού με στόχο την πιστοποίηση,...λογισμικό για την τυπική εκπαίδευση (α/θμια, β/θμια) Χρήσεις Κειμένου Πληροφόρηση από την οθόνη της εφαρμογής Εκτύπωση σελίδας πληροφοριών Αντιγραφή (copy) πληροφοριών για μεταφορά τους σε επεξεργαστή κειμένου KEIMENO (1/4):

KEIMENO (2/4): Κείμενο στην Οθόνη Η/Υ: Πιο αργή ανάγνωση (28% σχετικά με το έντυπο) Χαμηλότερος ρυθμός κατανόησης Γενικά συστήνεται: Λιτή διατύπωση Συμπεριλάβετε τις απολύτως απαραίτητες πληροφορίες - Ως εάν επρόκειτο για περίληψη Καλή οργάνωση κειμένου στην οθόνη Διαίρεση του κειμένου: Μια πρόταση μπορεί να διαχωριστεί σε φράσεις ή ιδέες-πυρήνες Παρουσίαση σε μικρές ποσότητες: Όχι περισσότερο από λίγες (2-3) περιεκτικές παραγράφους ή φράσεις ανά οθόνη Περισσότερο κείμενο μπορεί να δοθεί:  (α) Είτε χωρίζοντας σε περιοχές την οθόνη  (β) Είτε με υπερτιθέμενα παράθυρα (πχ. που εμφανίζονται μέσω υπερσυνδέσμων με την ένδειξη «περισσότερα...»)  (γ) Είτε ως κείμενο προς εκτύπωση

KEIMENO (3/4) Εμφάνιση Κειμένου Όχι: περισσότερες από 2-3 γραμματοσειρές ανά οθόνη Όχι: Κείμενο που αναβοσβήνει (flashing) Εστίαση της προσοχής του χρήστη: μεταβάλλοντας το μέγεθος και είδος της γραμματοσειράς τονισμό Με τονισμό (highlight) λέξεων & φράσεων Με πλαίσια, βέλη, & απομόνωση κειμένου Καλύτερα διαβάζονται στην οθόνη οι γραμματοσειρές sans – serif Αυτή είναι γραμματοσειρά serif (Times New Roman) Αυτή είναι γραμματοσειρά sans-serif (Arial) Σαφήνεια ορολογίας Αποφύγετε τη διφορούμενη γλώσσα (πχ. την χρήση δύο διαφορετικών όρων για την ίδια έννοια)

ΚΕΙΜΕΝΟ (4/4) Κυλιόμενο κείμενο (scrolling text) Πλεονέκτημα: Λιγότερες οθόνες / Προσαρμογή στο μέγεθος (ανάλυση) της οθόνης Μειονεκτήματα: Αποπροσανατολίζει (οι χρήστες δεν βλέπουν όλες τις πληροφορίες) Εναλλακτικά: Σελιδοποίηση

ΣΧΕΔΙΑΣΗ & ΑΞΙΟΛΟΓΗΣΗ ΕΚΠΑΙΔΕΥΤΙΚΟΥ ΛΟΓΙΣΜΙΚΟΥ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ ΧΡΩΜΑ (1/2) Χρήση: σποραδική Όσο περισσότερο χρώμα τόσο μικρότερη αποτελεσματικότητα Βέλτιστη Χρήση: Ένα αυτοσυνεπές χρωματικό σύστημα σε όλη την έκταση της εφαρμογής για την παροχή υποδείξεων και τονισμών (highlights) Εστίαση προσοχής σε συγκεκριμένα σημεία

ΣΧΕΔΙΑΣΗ & ΑΞΙΟΛΟΓΗΣΗ ΕΚΠΑΙΔΕΥΤΙΚΟΥ ΛΟΓΙΣΜΙΚΟΥ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ ΧΡΩΜΑ (2/2) Γενικές οδηγίες: (α) 3-6 το πολύ χρώματα ανά οθόνη (β) Συνέπεια στην επιλογή και χρήση των χρωμάτων (γ) Φωτεινότερα χρώματα: για σημαντικότερες πληροφορίες (δ) Αντίθεση μεταξύ φόντου και χρώματος γραμματοσειράς: αυξάνει αναγνωσιμότητα Προτιμήστε: Κείμενο σκούρο σε ανοικτό φόντο (ε) Φόντο: ουδέτερο γκρι ή παστέλ (λιγότερο έντονο) (στ) Αποφύγετε: συνδυασμούς συμπληρωματικών χρωμάτων πχ. μπλέ/πορτοκαλί, κόκκινο/πράσινο, μωβ/κίτρινο (ζ) Χρησιμοποιήστε: κοινά αποδεκτά χρώματα για συγκεκριμένες ενέργειες πχ. κόκκινο για σταμάτημα, κίτρινο για προσοχή

ΣΧΕΔΙΑΣΗ & ΑΞΙΟΛΟΓΗΣΗ ΕΚΠΑΙΔΕΥΤΙΚΟΥ ΛΟΓΙΣΜΙΚΟΥ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ ΕΙΚΟΝΑ & ΓΡΑΦΙΚΑ (1/4) Πόσο βοηθούν στη μάθηση οι οπτικού τύπου πληροφορίες (εικόνες- γραφικά); Ερευνητικά δεδομένα:  Ο εγκέφαλος επεξεργάζεται μέσω δύο διαφορετικών «κυκλωμάτων» την λεκτική (verbal) και την οπτική (visual) πληροφορία  (Θεωρία Διπλής Κωδικοποίησης (Dual Coding Theory))  Η «οπτική» μνήμη φαίνεται να είναι πολύ μεγαλύτερη από την «λεκτική»  θυμόμαστε πολύ καλύτερα οπτικές παραστάσεις με νόημα παρά πληροφορίες διατυπωμένες με το λόγο  Η μνήμη της λεκτικής πληροφορίας ενισχύεται σημαντικά αν συνδυαστεί με σχετικές οπτικές αναπαραστάσεις (εικόνες)

ΣΧΕΔΙΑΣΗ & ΑΞΙΟΛΟΓΗΣΗ ΕΚΠΑΙΔΕΥΤΙΚΟΥ ΛΟΓΙΣΜΙΚΟΥ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ ΕΙΚΟΝΑ & ΓΡΑΦΙΚΑ (2/4) Γενική άποψη: Η ποιότητα της μάθησης που προσφέρει ένα εκπαιδευτικό λογισμικό μπορεί να ενισχυθεί σημαντικά από τη σύνδεση συσχετιζόμενων κειμένων και εικόνων-γραφικών Συνδυάστε κείμενο και εικόνες-γραφικά στις παρουσιάσεις πληροφορίας Συνοδεύστε τις εικόνες με σύντομους επεξηγηματικούς υπότιτλους Δύο είδη υπότιτλων:  Περιγραφικοί: ο υπότιτλος περιγράφει αυτό που δείχνει η εικόνα  Διδακτικοί: ο υπότιτλος επισημαίνει τα χαρακτηριστικά στοιχεία της εικόνας Έρευνα: Καλύτερα μαθησιακά αποτελέσματα (όποιο είδος υπότιτλου και αν χρησιμοποιηθεί)

ΣΧΕΔΙΑΣΗ & ΑΞΙΟΛΟΓΗΣΗ ΕΚΠΑΙΔΕΥΤΙΚΟΥ ΛΟΓΙΣΜΙΚΟΥ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ ΕΙΚΟΝΑ & ΓΡΑΦΙΚΑ (3/4) Παρουσιάστε οπτικοποιημένο υλικό που σχετίζεται με το κείμενο Εικόνα και κείμενο να παρουσιάζονται δίπλα στην οθόνη και να είναι φανερή η σχέση τους Αυξάνεται η κατανόηση Γραφικά σε εργαλεία πλοήγησης ενισχύουν κατανόηση σε μενού επιλογών και σε εικονίδια πλοήγησης: πχ. αριστερό – δεξιό βέλος Αποφύγετε τη χρήση γραφικών ή εικόνων ως διακόσμηση ή ευχάριστα εφέ: διαταράσσουν την εκπαιδευτική ροή

ΣΧΕΔΙΑΣΗ & ΑΞΙΟΛΟΓΗΣΗ ΕΚΠΑΙΔΕΥΤΙΚΟΥ ΛΟΓΙΣΜΙΚΟΥ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ ΕΙΚΟΝΑ & ΓΡΑΦΙΚΑ (4/4) Παρουσιάστε εικόνες & γραφικά σε συνεκτικότητα με το υπόλοιπο μήνυμα Αποφύγετε υπερβολικές λεπτομέρειες ή ρεαλισμό (υπερφορτώνουν μνήμη) Αν είναι απαραίτητες οι λεπτομέρειες σκεφθείτε τη δυνατότητα παρουσίασης βαθμιαία πολυπλοκότερων εικόνων (ή γραφικών)

ΣΧΕΔΙΑΣΗ & ΑΞΙΟΛΟΓΗΣΗ ΕΚΠΑΙΔΕΥΤΙΚΟΥ ΛΟΓΙΣΜΙΚΟΥ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ ΣΧΕΔΙΟΚΙΝΗΣΗ (animation) (1/2) Σχεδιοκίνηση (animation): Για την παρουσίαση δυναμικών φαινομένων & διαδικασιών Αποτελεί κίνητρο εστίασης της προσοχής – δημιουργεί εντυπώσεις Προσφέρει οφέλη όπως: αύξηση του ενδιαφέροντος των εκπαιδευόμενων έμφαση σημαντικών πληροφοριών σε δυναμικές διαδικασίες Όμως: Δεν φαίνεται να αποτελεί από μόνη της στοιχείο που ενισχύει σημαντικά τη μάθηση σε σχέση με τα στατικά γραφικά Προτείνεται να συνοδεύεται από κατάλληλες δραστηριότητες επεξεργασίας της πληροφορίας (πχ. ερωτήσεις) που παρουσιάζει η σχεδιοκίνηση

ΣΧΕΔΙΑΣΗ & ΑΞΙΟΛΟΓΗΣΗ ΕΚΠΑΙΔΕΥΤΙΚΟΥ ΛΟΓΙΣΜΙΚΟΥ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ ΣΧΕΔΙΟΚΙΝΗΣΗ (animation) (2/2) Παρουσιάστε τη σχεδιοκίνηση σε συνδυασμό με αφήγηση (dual coding) Δώστε τη δυνατότητα παύσης, συνέχειας & επανάληψης (της αφήγησης) και ακόμη της ταχύτητας παρουσίασης

ΣΧΕΔΙΑΣΗ & ΑΞΙΟΛΟΓΗΣΗ ΕΚΠΑΙΔΕΥΤΙΚΟΥ ΛΟΓΙΣΜΙΚΟΥ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ ΗΧΟΣ (1/3) Κείμενο & Αφήγηση: Ίδιος κώδικας: γλώσσα Διαφορετική modality (τροπικότητα) Διάκριση τύπων: «Οπτικός» «Ακουστικός» «Ενδιάμεσος» Δυνατότητες: Αφήγηση (narration, voice-overs) Σύντομο σχόλιο Ηχητικό ερέθισμα (audio cues) Μουσική υπόκρουση

ΣΧΕΔΙΑΣΗ & ΑΞΙΟΛΟΓΗΣΗ ΕΚΠΑΙΔΕΥΤΙΚΟΥ ΛΟΓΙΣΜΙΚΟΥ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ ΉΧΟΣ (2/3) Αφήγηση: διευκολύνει όσους δυσκολεύονται στην ανάγνωση (αναλφάβητους, μικρά παιδιά) ταιριάζει στους «ακουστικούς» τύπους Διευκολύνει κάθε χρήστη Έρευνα: οι σπουδαστές βρίσκουν ευκολότερο να ολοκληρώσουν τα μαθήματα που κάνουν εκτεταμένη χρήση ήχου για την παρουσίαση πληροφοριών (εξοικειωμένοι με αυτή τη μορφή διδασκαλίας).

ΣΧΕΔΙΑΣΗ & ΑΞΙΟΛΟΓΗΣΗ ΕΚΠΑΙΔΕΥΤΙΚΟΥ ΛΟΓΙΣΜΙΚΟΥ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ ΉΧΟΣ (3/3) ΥΠΟΔΕΙΞΕΙΣ: Χρησιμοποιήστε λόγο για: Να τραβήξετε την προσοχή Να δώσετε σημαντικές οδηγίες Για υποστήριξη διπλής κωδικοποίησης επεξήγηση σύνθετων γραφικών ή εικόνων που παρουσιάζονται στην οθόνη Όταν το ακροατήριό σας έχει περιορισμένες ικανότητες ανάγνωσης Λειτουργικότητα: Δώστε έλεγχο στο χρήστη ώστε να μπορεί να σταματά και να εκκινεί τον ήχο οποιαδήποτε στιγμή θελήσει. Εναλλάξτε αντρικές & γυναικείες φωνές για ποικιλία και διατήρηση της προσοχής του ακροατηρίου.

VIDEO Το video μπορεί να ελκύει, να διασκεδάζει, να παρακινεί, να εστιάζει την προσοχή Ακόμη: να αναπτύσσει συναισθήματα & να ευνοεί προδιαθέσεις μέσω δραματοποιημένων παρουσιάσεων Χρήση: Για επίδειξη διαδικασιών/δραστηριοτήτων Παρουσίαση πρακτικών θεμάτων που δημιουργούν αίσθηση «αυθεντικότητας» Λειτουργικότητα Σύντομες παρουσιάσεις video Προσοχή στο υψηλό κόστος Παρέχετε ειδικά χειριστήρια video & διατηρείτε ενεργά τα γενικά χειριστήρια του προγράμματος

ΣΧΕΔΙΑΣΗ & ΑΞΙΟΛΟΓΗΣΗ ΕΚΠΑΙΔΕΥΤΙΚΟΥ ΛΟΓΙΣΜΙΚΟΥ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Αρχές Οργάνωσης στοιχείων Πολυμέσων ή πώς να παρουσιάζετε συνδυασμένα εικόνες και κείμενο στην οθόνη του υπολογιστή

ΣΧΕΔΙΑΣΗ & ΑΞΙΟΛΟΓΗΣΗ ΕΚΠΑΙΔΕΥΤΙΚΟΥ ΛΟΓΙΣΜΙΚΟΥ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Αρχή Πολυμέσων Η παρουσίαση αλληλοϋποστηριζόμενων κειμένων και εικόνων βελτιώνει τις συνθήκες μάθησης Τι σημαίνει «αλληλοϋποστηριζόμενα»: Εικόνες που «οπτικοποιούν» τα κείμενα Κείμενο και Εικόνες που είναι σχετικά το ένα με το άλλο δηλ. παρουσιάζουν σχετική πληροφορία Χρήση οπτικών στοιχείων (πχ. ενδεικτικά βέλη, bullets, αρίθμηση κλπ.) στη διεπαφή χρήστη που υποδεικνύουν τη σχέση μεταξύ κειμένου & εικόνας

ΣΧΕΔΙΑΣΗ & ΑΞΙΟΛΟΓΗΣΗ ΕΚΠΑΙΔΕΥΤΙΚΟΥ ΛΟΓΙΣΜΙΚΟΥ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Συνεκτικότητα (coherence) Παρουσιάζουμε: Κείμενο & Εικόνες που περιέχουν τις βασικές πληροφορίες που είναι απόλυτα σχετικές με το στόχο της μάθησης στη συγκεκριμένη οθόνη Αποφεύγουμε: Τις πρόσθετες δευτερεύουσες πληροφορίες Δυσχεραίνουν τη μάθηση

ΣΧΕΔΙΑΣΗ & ΑΞΙΟΛΟΓΗΣΗ ΕΚΠΑΙΔΕΥΤΙΚΟΥ ΛΟΓΙΣΜΙΚΟΥ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Γειτνίαση (contiguity) Στο χώρο: Παρουσιάζουμε τις σχετικές πληροφορίες (λέξεις & εικόνες) κοντά μεταξύ τους στην οθόνη ώστε να διευκολύνεται η σύνδεση μεταξύ τους Στο χρόνο: Παρουσιάζουμε τις σχετικές πληροφορίες (λέξεις & εικόνες) ταυτόχρονα στην οθόνη Συνδέουμε– συσχετίζουμε: Χρησιμοποιήστε σχεδιαστικά «τεχνάσματα» ώστε να βοηθήσετε το χρήστη να καταλάβει ποιες πληροφορίες (λέξεις & εικόνες) «συνδέονται» μεταξύ τους

ΣΧΕΔΙΑΣΗ & ΑΞΙΟΛΟΓΗΣΗ ΕΚΠΑΙΔΕΥΤΙΚΟΥ ΛΟΓΙΣΜΙΚΟΥ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Τροπικότητα (modality) Συνδυάζουμε κατάλληλα τις τροπικότητες Ακουστική & Οπτική Έτσι υποστηρίζετε τον χρήστη να επεξεργαστεί την πληροφορία μέσω διπλής κωδικοποίησης Εφαρμόστε αυτή την αρχή όταν πρόκειται να: Εξηγηθούν σύνθετα γραφικά στην οθόνη Παρουσιαστούν κινούμενα γραφικά (animation) Παράδειγμα Συνδυάστε σχεδιοκίνηση με αφήγηση … και όχι σχεδιοκίνηση με γραπτά μηνύματα στην οθόνη

ΣΧΕΔΙΑΣΗ & ΑΞΙΟΛΟΓΗΣΗ ΕΚΠΑΙΔΕΥΤΙΚΟΥ ΛΟΓΙΣΜΙΚΟΥ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Πλεονασμός (Redundancy) Η παρουσίαση της πληροφορίας με πλεονασματικό τρόπο δεν είναι οπωσδήποτε και η καλύτερη παρουσίαση Μην υπερφορτώνετε το οπτικό κανάλι Η παρουσίαση σύνθετης εικόνας (ή γραφικού ή σχεδιοκίνησης) με ταυτόχρονη αφήγηση και ταυτόχρονη παρουσίαση της αφήγησης με μορφή γραπτού κειμένου στην οθόνη ΔΕΝ ενθαρρύνεται

ΣΧΕΔΙΑΣΗ & ΑΞΙΟΛΟΓΗΣΗ ΕΚΠΑΙΔΕΥΤΙΚΟΥ ΛΟΓΙΣΜΙΚΟΥ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Προσωπικό στυλ παρουσίασης (personalization) Παρουσιάστε την πληροφορία με φιλικό προσωπικό λόγο κείμενο ή αφήγηση σε πρώτο ή δεύτερο πρόσωπο … και όχι τυπική απρόσωπη παρουσίαση (τρίτο πρόσωπο) Χρησιμοποιήστε στη διεπαφή φιλικούς χαρακτήρες (agents, πράκτορες) για παρουσίαση των πληροφοριών Παρακινούν τους χρήστες αποτελεσματικότερα στο να προσέξουν και να επεξεργαστούν την πληροφορία

ΣΧΕΔΙΑΣΗ & ΑΞΙΟΛΟΓΗΣΗ ΕΚΠΑΙΔΕΥΤΙΚΟΥ ΛΟΓΙΣΜΙΚΟΥ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Σύνοψη Αρχές οργάνωσης στοιχείων πολυμέσων Πολυμέσα Συνεκτικότητα Γειτνίαση Τροπικότητα Πλεονασμός Προσωπικό στυλ