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

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

WEB DESIGN Ο σχεδιασμός στο Web Design

Ράβδος Εργαλείων, σχεδόν τα ίδια εργαλεία και εικονίδια υπάρχουν όπως στα άλλα προγράμματα που έχετε μάθει μέχρι σήμερα.

Τα κύρια χαρακτηριστικά που καθιστούν τον δικτυακό κόµβο «καλή πρακτική», σε σχέση µε τις επιλεγµένες περιοχές είναι:

Σχεδίαση Διαφανειών. Πρακτικός Οδηγός. Μιχαηλίδη Αφροδίτη

ΠΡΟΓΡΑΜΜΑΤΙΣΜΟΣ Η/Υ. Ενότητα: Εισαγωγή ΚΥΡΟΠΟΥΛΟΣ ΚΩΝΣΤΑΝΤΙΝΟΣ. Τμήμα Διοίκηση Επιχειρήσεων (Κοζάνη)

Αυτοµατιµός Γραφείου. Τµήµα Διοίκησης Επιχειρήσεων ΑΤΕΙ- Δυτικής Ελλάδας Μεσολόγγι Δρ. Α. Στεφανή Διάλεξη 2η

Αλλαγή της εμφάνισης κειμένου: μέγεθος γραμματοσειράς, είδος γραμματοσειράς

Περιεχόμενα. Γαβαλάς Δαμιανός

Στυλ Μάθησης και PowerPoint Μία νέα και συναρπαστική προσέγγιση. Της Ole Lauridsen, Aarhus School of Business, Πανεπιστήμιο Aarhus, Δανία

Στυλ Μάθησης και PowerPoint Μία νέα και συναρπαστική προσέγγιση. Της Ole Lauridsen, Aarhus School of Business, Πανεπιστήμιο Aarhus, Δανία

Εργαστήριο Δομημένος Προγραμματισμός (C#) Τμήμα Μηχανολογίας Νικόλαος Ζ. Ζάχαρης Καθηγητής Εφαρμογών

Τί να κάνω για καλές Παρουσιάσεις PowerPoint. Πώς θα αποφεύγω τις κακές διαφάνειες

Τα κύρια χαρακτηριστικά που καθιστούν τον δικτυακό κόµβο «καλή πρακτική», σε σχέση µε τις επιλεγµένες περιοχές είναι:

ΤΕΧΝΟΛΟΓΙΑ ΛΟΓΙΣΜΙΚΟΥ Ι

ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ. Κειμενογράφος WORD

Έκδοση: 1.0. με το. Ασημίνα

ΟΔΗΓΙΕΣ ΛΟΓΙΣΜΙΚΟΥ CLASSBOOK (διαδραστικού ClassBoard)

Ανάπτυξη & Σχεδίαση Λογισμικού (ΗΥ420)

Οδηγίες για αξιολόγηση στο πλαίσιο ομότιμης συνεργατικής μάθησης

Υπηρεσία Ιστοτόπου - Ιστολογίου

Κανόνες Γκεστάλτ. Για την οργάνωση της Όρασης (και άλλων αισθήσεων)

Αύξηση της αναγνωρισιµότητας µίας πράσινης επιχείρησης Υποενότητα 2

ADVERTISEMENT GUIDELINES DESIGN 2017

Μέρος Α : Σύντομη εισαγωγή στο σχεδιασμό διεπιφανειών

Εισαγωγή στο Libre Office. Bάιος Κολοφωτιάς Επιστημονικός Συνεργάτης Sweng Lab A.Π.Θ

Σπουδές CAD, Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P. με Σύστημα διδασκαλίας facetoface

Οδηγίες Χρήσης Πλατφόρμας Ασύγχρονης Τηλεκπαίδευσης (Moodle) του Τμήματος ΔΕΤ

Νέες Τεχνολογίες και Καλλιτεχνική Δημιουργία

ΤΕΙ ΔΥΤΙΚΗΣ ΕΛΛΑΔΑΣ ΔΙΟΙΚΗΣΗ ΕΡΓΩΝ ΠΛΗΡΟΦΟΡΙΚΗΣ

Οι περιπτώσεις χρήσης

Έλεγχος του εγγράφου και της διάταξης εμφάνισης περιθώρια, μέγεθος γραμματοσειράς, μορφοποίησης και ορθογραφία

Βασικές Έννοιες Web Εφαρμογών

«DIGITAL STORY TELLING» PROJECT

Υπολογιστικής Σκέψης

Παράρτημα1: Φύλλο ανάθεσης εργασίας πολυμέσων

Άνοια στην Τρίτη ηλικία:

Κριτήρια πρόβλεψης. της ποιότητας εκπαιδευτικού λογισμικού : αξιολόγηση της μάθησης σε συνδυασμό με την ευχρηστία

Ανοικτά Ακαδημαϊκά Μαθήματα στο Οικονομικό Πανεπιστήμιο Αθηνών Προσβασιμότητα

Ermis Design. Κατηγορία: Digital Design. Τίτλος Συμμετοχής: wind.gr Corporate Website Redesign. Προϊόν/Υπηρεσία ( Brand Name): WIND

Παιδαγωγικό εργαστήριο Σχεδιάζοντας ένα χάρτη εννοιών για τον Εθνικό Δρυμό Σουνίου

ΑΥΘΕΝΤΙΚΗ ΑΞΙΟΛΟΓΗΣΗ ΣΤΗΝ ΕΚΠΑΙΔΕΥΤΙΚΗ ΔΙΑΔΙΚΑΣΙΑ. Κατερίνα Κασιμάτη Επίκ. Καθηγήτρια, Γενικό Τμήμα Παιδαγωγικών Μαθημάτων Α.Σ.ΠΑΙ.Τ.Ε.

Περιεχόμενα. 1 Υποδείγματα αλληλεπίδρασης, αρχές & μοτίβα σχεδίασης Περίληψη... 19

ΕΚΠΑΙΔΕΥΤΙΚΟ ΠΡΟΓΡΑΜΜΑ: «ΦΥΣΗ, ΤΕΧΝΗ ΚΑΙ ΜΑΘΗΜΑΤΙΚΑ:

Τρόποι εξάσκησης της μνήμης και μέθοδοι καλυτέρευσης

ΣΥΝΟΨΗ ΜΑΘΗΜΑΤΟΣ ΕΒΔΟΜΑΔΑ 3 ΟΡΙΖΟΝΤΙΑ ΑΛΜΑΤΑ ΘΕΟΔΩΡΟΥ ΜΗΚΟΣ- ΤΡΟΠΟΙ ΕΥΡΕΣΗΣ ΤΗΣ ΦΟΡΑΣ

ΕΑΠ-ΓΤΠ61/Α2. Παππά Θεοδώρα 9/12/2007

Παράλληλη Επεξεργασία Κεφάλαιο 7 ο Αρχιτεκτονική Συστημάτων Κατανεμημένης Μνήμης

ΕΘΝΙΚΟ & ΚΑΠΟΔΙΣΤΡΙΑΚΟ ΠΑΝ/ΜΙΟ ΑΘΗΝΩΝ ΤΜΗΜΑ

Σημεία ελέγχου για μια επιτυχημένη παρουσίαση slideshow

java.awt Font Γραµµατοσειρές Color Χρώµατα

Εγχειρίδιο Χρήσης-Οδηγός Εκπαίδευσης Χρηστών. - Δήμος Δέλτα - Αριστοτέλειο Πανεπιστήμιο Θεσσαλονίκης

Αξιολόγηση Ιστοσελίδων. Εργασία. Χαράλαμπος Κουτσουρελάκης

Εγχειρίδιο του πίνακα χαρακτήρων

Α. ΔΙΑΓΡΑΜΜΑ ΔΙΑΣΠΟΡΑΣ Απεικόνιση της σχέσης(θετική, αρνητική, απροσδιόριστη) δύο μεταβλητών. Παραδείγματα σχέσεων. Παράδειγμα

Θεωρίες Μάθησης και Εκπαιδευτικό Λογισμικό

Δημιουργώντας γραφικά στο περιβάλλον 3Ds Max χρησιμοποιώντας βασικά εργαλεία

Οδηγός χρήσης της εφαρμογής Self Service Password

Ει ναι τα Windows που γνωρι ζετε, αλλα καλυ τερα

Ενημέρωση σε Windows 8.1 από τα Windows 8

ΠΡΟΤΕΙΝΟΜΕΝΟ ΔΙΑΓΩΝΙΣΜΑ ΑΡΧΕΣ ΟΡΓΑΝΩΣΗΣ ΚΑΙ ΔΙΟΙΚΗΣΗΣ ΕΠΙΧΕΙΡΗΣΕΩΝ ΚΑΙ ΥΠΗΡΕΣΙΩΝ ΟΜΑΔΑ Α ΕΡΩΤΗΣΕΙΣ ΣΩΣΤΟΥ-ΛΑΘΟΥΣ

Σχεδίαση και Ανάπτυξη Ιστότοπων

Έγγραφο Περιγραφής Απαιτήσεων Λογισμικού

Προγραμματισμός Διαδικτύου

ΟΔΗΓΙΕΣ ΓΙΑ ΔΗΛΩΣΗ ΣΥΜΜΕΤΟΧΗΣ

Παρουσίαση: Ανθρωποκεντρικός σχεδιασμός πολυμέσων ΜΙΚΡΟΠΟΥΛΟΥ ΕΥΓΕΝΙΑ ΓΤΠ61

5 Ψυχολόγοι Προτείνουν Τις 5 Πιο Αποτελεσματικές Τεχνικές Μάθησης

Πανεπιστήµιο Θεσσαλίας

Πολυτονικό πληκτρολόγιο Πολυτονικές Γραμματοσειρές


εοντολογία και εφαρμογή ψυχομετρικών τεστ στην online εποχή: Το παράδειγμα ενός συστήματος αξιολόγησης 360

ΑΛΛΗΛΕΠΙΔΡΑΣΗ ΑΝΘΡΩΠΟΥ - ΥΠΟΛΟΓΙΣΤΗ. Διδάσκων: Κωνσταντίνος Στεφανίδης

Διδακτική των Φυσικών Επιστημών Ενότητα 2: Βασικό Εννοιολογικό Πλαίσιο

Access 2. Φτιάχνοντας μια DB, πίνακες και εισαγωγή εξωτερικών δεδομένων

ΔΗΜΙΟΥΡΓΙΑ ΚΑΙ ΠΑΡΑΓΩΓΗ ΔΙΑΦΗΜΙΣΗΣ

ΤΕΧΝΟΛΟΓΙΑ ΛΟΓΙΣΜΙΚΟΥ Ι

Ερευνητική Εργασία (Project)

Παρουσιάσεις με Αντίκτυπο (High Impact Presentations) Χαρίκλεια Τσαλαπάτα 11/10/2017

Περι-γράφοντας... κλωνάρια

Ermis Branded Entertainment & Content

ΣΚΟΠΟΣ ΜΑΘΗΣΙΑΚΗΣ ΕΝΟΤΗΤΑΣ 2

Οδηγίες για τη Ανάπτυξη Ανοικτών Ψηφιακών Μαθημάτων

5.2. PrivaSee. Miguela Fernandes, Πορτογαλία. Ιδιωτικότητα, το πολυτιμότερο από τα υπάρχοντά μου. Εύκολο Μέτριο Δύσκολο

Αλληλεπίδραση Ανθρώπου- Υπολογιστή & Ευχρηστία. Ενότητα 7: Κανόνες Σχεδίασης Σαπρίκης Ευάγγελος Τμήμα Διοίκησης Επιχειρήσεων (Γρεβενά)

Ανοιχτά Ακαδημαϊκά Μαθήματα στο ΠΑΜΑΚ

Ενότητα εκπαίδευσης και κατάρτισης για τις δεξιότητες ηγεσίας

05 Ανάλυση Απαιτήσεων

Τεχνολογία Δικτύων Επικοινωνιών (Ενότητα Πρωτόκολλα και Αρχιτεκτονική Δικτύου)

Εφαρμογές Πληροφορικής στην Τοπογραφία 7η Ενότητα Μονάδες, εντολές Text, List, μετρήσεις, μετασχηματισμοί και άσκηση χάραξης

Avatar: avatars avatar

ΑΝΤΙΚΕΙΜΕΝΟΣΤΡΕΦΗΣ ΑΝΑΛΥΣΗ Διαγράμματα Συνεργασίας. Ιωάννης Σταμέλος Βάιος Κολοφωτιάς Πληροφορική

Οδηγίες για τη Χρήση του Google Drive

ΚΑΤΑΣΚΕΥΗ ΠΙΝΑΚΩΝ ΚΑΙ ΣΧΗΜΑΤΩΝ ΣΤΟ ΔΟΚΙΜΙΟ ΕΡΕΥΝΗΤΙΚΗΣ ΕΡΓΑΣΙΑΣ: Μερικές χρήσιμες(;) υποδείξεις. Βασίλης Παυλόπουλος

ΠΑΡΟΥΣΙΑΣΗ ΣΤΑΤΙΣΤΙΚΩΝ ΔΕΔΟΜΕΝΩΝ

Σχεδίαση τομών Συνήθη σφάλματα και Παραδείγματα. Πότε;

Ολοκληρωμένα Συστήματα Επικοινωνίας

Εγχειρίδιο Συμμετοχής σε Ψηφοφορία για την ανάδειξη Διευθυντή Σχολής ΤΕΙ ΑΘΗΝΑΣ 2014

Πληροφοριακά Συστήματα Διοίκησης Ενότητα 8: Διαγράμματα Δραστηριοτήτων

6. Διαχείριση Έργου. Έκδοση των φοιτητών

Βασικές Αρχές Σχεδιασµού Συστήµατος ιεπιφάνειας - Πλοήγηση

Transcript:

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

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

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

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

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

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

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

Γνωστική Ψυχολογία Αρχές Γκεστάλτ Εγγύτητα τα αντικείμενα που βρίσκονται κοντά σχετίζονται 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

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

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

Γνωστική Ψυχολογία Διανοητικά μοντέλα 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.

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

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

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

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

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

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

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

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

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

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

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

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

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