Σχεδίαση Γραφικού Περιβάλλοντος Διεπαφής Χρήστη

Η Επικοινωνία Ανθρώπου Υπολογιστή (Human Computer Interaction – HCI) αποτελεί τον επιστημονικό τομέα που μελετά την αλληλεπίδραση των χρηστών με διαδραστικά συστήματα. Η σχεδίαση του γραφικού περιβάλλοντος (User Interface – UI) μιας εφαρμογής έχει άμεση σχέση με το να είναι ελκυστική στο χρήστη η διεπαφή με τα κατάλληλα χρώματα, κουμπιά, γραμματοσειρές αλλά και όλα εκείνα τα στοιχεία που έχουν σχέση με το την οπτική διαδικτυακή επικοινωνία. Το μάθημα εστιάζει στη σχεδιαστική έρευνα την καταγραφή αναφορών και την οπτική αξιολόγηση έτσι ώστε να δημιουργηθεί μια γραφική ιστορία που να προσφέρει και διαδραστικότητα στη χρήση της. Η έρευνα και η δημιουργία γραφικών σεναρίων για διαδικτυακούς τόπους και εφαρμογές με διαφορετικούς στόχους αποτελούν το πεδίο μελέτης του συγκεκριμένου μαθήματος. Τέλος, ειδική αναφορά θα πραγματοποιηθεί στις διεπαφές χρήσης των Μέσων Κοινωνικής Δικτύωσης και σε Τριδιάστατα Εικονικά Περιβάλλοντα.

Με την επιτυχή ολοκλήρωση του μαθήματος οι φοιτητές/τριες θα είναι σε θέση να γνωρίζουν:

• Τον τομέα της οπτικής διαδικτυακής επικοινωνίας
• Να σχεδιάζουν και δημιουργούν γραφικές διεπαφές χρήσης
• Να σχεδιάζουν το γραφικό περιβάλλον διαδικτυακών τόπων και εφαρμογών
• Να αξιολογούν το γραφικό περιβάλλον χρήστη σε επίπεδο διάδρασης και εμπειρίας
• Να συμμορφώνονται με υπάρχοντα πρότυπα, κανόνες και αρχές σχεδίασης γραφικών διεπαφών
• Να πραγματοποιούν ελέγχους ποιότητας και να εφαρμόζουν διαφορετικά μοντέλα ανάπτυξης
• Να ενσωματώνουν καινοτόμες πρακτικές και μεθόδους γραφικής αλληλεπίδρασης

Αναφορικά με το επίπεδο των μαθησιακών αποτελεσμάτων, σύμφωνα με το Πλαίσιο Προσόντων του Ευρωπαϊκού Χώρου Ανώτατης Εκπαίδευσης, οι φοιτητές/τριες μετά την ολοκλήρωση του μαθήματος κρίνεται ότι:

• Είναι σε θέση να χρησιμοποιούν τη γνώση και κατανόησή τους, και τις ικανότητές τους για επίλυση προβλημάτων σε εφαρμογές και στην επίλυση προβλημάτων, σε ένα νέο ή άγνωστο περιβάλλον, εντός ευρύτερου (ή διεπιστημονικού) πλαισίου, συναφούς προς το γνωστικό τους πεδίο.
• Είναι σε θέση να κοινοποιούν με σαφήνεια και καθαρότητα τα συμπεράσματά τους αλλά και τη γνώση και το σκεπτικό στο οποίο αυτά βασίζονται και λογικές παραδοχές στα οποία στηρίζονται, τόσο σε εξειδικευμένο όσο και σε μη εξειδικευμένο κοινό.
• Διαθέτουν τις απαραίτητες μαθησιακές δεξιότητες που τους επιτρέπουν να συνεχίσουν τις σπουδές τους με τρόπο σε μεγάλο βαθμό αυτοδύναμο ή και αυτόνομο.

Αναφορικά με τους περιγραφικούς δείκτες 6, 7 & 8 του Ευρωπαϊκού Πλαισίου Προσόντων Διά Βίου Μάθησης, οι φοιτητές/τριες μετά την ολοκλήρωση του μαθήματος κρίνεται ότι:

• Σε επίπεδο γνώσεων: διαθέτουν εξειδικευμένες γνώσεις, μερικές από τις οποίες είναι γνώσεις αιχμής στο πεδίο εργασίας ή σπουδής τους και που αποτελούν τη βάση για πρωτότυπη σκέψη. Διαθέτουν κριτική επίγνωση των ζητημάτων γνώσης στο πεδίο και στη διασύνδεσή του με διαφορετικά πεδία.
• Σε επίπεδο δεξιοτήτων: κατέχουν εξειδικευμένες δεξιότητες επίλυσης προβλημάτων στο πεδίο τους, οι οποίες απαιτούνται στην έρευνα ή/και στην καινοτομία προκειμένου να αναπτυχθούν νέες γνώσεις και διαδικασίες και να ενσωματωθούν γνώσεις από διαφορετικά πεδία.
• Σε επίπεδο ικανοτήτων: Μπορούν να διαχειρίζονται και μετασχηματίζουν περιβάλλοντα εργασίας ή σπουδής που είναι σύνθετα, απρόβλεπτα και απαιτούν νέες στρατηγικές προσεγγίσεις. Μπορούν επίσης να αναλαμβάνουν την ευθύνη για τη συνεισφορά στις επαγγελματικές γνώσεις και πρακτικές ή/και για την αξιολόγηση της στρατηγικής απόδοσης ομάδων.

Θεωρητικό Μέρος

• Αλληλεπίδραση Ανθρώπου – Υπολογιστή μέσω Διεπαφών
  Βασικός στόχος: Εισαγωγή βασικές θεματικές ενότητες της σχεδίασης γραφικών διεπαφών χρήστη και στην αλληλεπίδραση ανθρώπου-υπολογιστή, παρουσίαση και ο ρόλος των διαδραστικών συστημάτων και εισαγωγή στην έννοια της ευχρηστίας, ιστορική επισκόπηση των γραφικών διεπαφών και διεπιστημονικότητα του πεδίου
• Θεμελιώδεις Έννοιες στη Σχεδίαση Γραφικού Περιβάλλοντος Διεπαφής Χρήστη
  Βασικός στόχος: στόχοι της σχεδίασης γραφικών διεπαφών χρήστη, σημαντικά παραδείγματα και επιτεύγματα του πεδίου, νόμοι σχεδίασης και ευχρηστίας διαδραστικών συστημάτων, γενικές αρχές και καλές πρακτικές σχεδίασης
• Ανάπτυξη Διαδραστικών Συστημάτων
  Βασικός στόχος: μελέτη του κύκλου ζωής των διαδραστικών συστημάτων, στόχοι και μεθοδολογίες ανάπτυξης, σχεδιαστικά υποδείγματα, το μοντέλο της ανθρωποκεντρικής (χρηστοκεντρικής) ανάπτυξης
• Σχεδίαση Διαδραστικών Συστημάτων
  Βασικός στόχος: ανάλυση της σχεδιαστικής διαδικασίας, οδηγίες και πρότυπα σχεδίασης, εισαγωγή στις έννοιες των πρωτοτύπων, σεναρίων χρήσης και τις ομάδες χρηστών, ανάδραση και αποφυγή υπερπληροφόρησης, υποκειμενική και αντικειμενική αξιολόγηση διάδρασης και εμπειρίας, ποσοτικός και ποιοτικός έλεγχος λειτουργικότητας και μέτρηση επιδόσεων, γνωριμία με το γνωστικό περιδιάβασμα και συμβατότητα με κανόνες και υπάρχουσες συμβάσεις, θέματα ανατροφοδότησης, ηθικής και δεοντολογίας
• Τριδιάστατες Γραφικές Διεπαφές Χρήστη
  Βασικός στόχος: εισαγωγή στην διαδραστικές και εμβυθιστικές τεχνολογίες διάδρασης, ορισμοί, αρχές και έννοιες για τη σχεδίαση εικονικής/επαυξημένης/μικτής πραγματικότητας, έξυπνες διεπαφές για εικονικά περιβάλλοντα και εικονικούς κόσμους, καταλληλότητα και εφαρμογές χρήσης, λειτουργικά και πολυχρηστικά χαρακτηριστικά, εισαγωγή στην έννοια του ρεαλισμού, της φωτορεαλιστικής απόδοσης και των αναπαραστάσεων/ενσαρκώσεων χρήστη (avatars), αντίληψη και πολυπλοκότητα σχεδίασης και μέθοδοι αλληλεπίδρασης και διάδρασης
• Γραφικό Περιβάλλον Χρήστη για Κοινωνικά Δίκτυα
  Βασικός στόχος: εισαγωγή στις θεμελιώδεις έννοιες διάδρασης σε εφαρμογές κοινωνικών δικτύων, χαρακτηριστικά των μέσων κοινωνικής δικτύωσης, το μοντέλο σχεδιασμού κοινωνικής αλληλεπίδρασης (social interaction design), κρίσιμα σημεία και προκλήσεις στη σχεδιαστική διαδικασία και λύσεις/προτάσεις
• Εναλλακτικές και Καινοτόμες Γραφικές Διεπαφές Χρήστη
  Βασικός στόχος: εισαγωγή στις πολυαπτικές διεπαφές, σχεδιαστική μεθοδολογία στοχευμένη σε οθόνες αφής και χειρονομίες (gestures), μέθοδοι και εργαλεία σχεδίασης και ανάπτυξης με αντιστασιακή, χωρητική και οπτική αναγνώριση, προσαρμοστικότητα και εξατομίκευση περιεχομένου, προσβασιμότητα και σχεδιαστικές προκλήσεις, ο ρόλος της τεχνητής νοημοσύνης και της μηχανικής μάθησης

Εργαστηριακό Μέρος

• Έρευνα Ανταγωνισμού και Κοινού-Στόχου
  Βασικός στόχος: βιβλιογραφική ανασκόπηση, μελέτη σε πλατφόρμες αξιολόγησης και ανατροφοδότησης, μεθοδολογίες crowd sourcing, χρήση τεχνολογιών αναλυτικής και εργαλείων στατιστικής οπτικοποίησης χρήσης
• Επικοινωνία με τον Πελάτη/Καταναλωτή
  Βασικός στόχος: Μελέτη συμβολαίων και δημιουργία αναφορών προόδου, χρονοπρογραμματισμός και οικονομικός σχεδιασμός διαδικασίας ανάπτυξης, δημιουργία personas και σεναρίων χρήσης και αξιολόγησης
• Παραγωγή Πρωτοτύπων Χαμηλής Πιστότητας (Low Fidelity)
  Βασικός στόχος: διαδικασίες σχεδίασης πρωτοτύπων χαμηλής πιστότητας, ο ρόλος των σχεδιαγραμμάτων (wireframes) και καλές πρακτικές σχεδίασης, γνωριμία με λογισμικά και διαδικτυακές πλατφόρμες σχεδίασης, διασύνδεση με εξωτερικά αποθετήρια γραφικών στοιχείων διάδρασης χρήστη, σχεδιασμός γραφικού περιβάλλοντος χρήστη για κινητές συσκευές και διαδικτυακές εφαρμογές, παρουσίαση και ανάπτυξη στο Pencil Project
• Παραγωγή Πρωτοτύπων Υψηλής Πιστότητας (High Fidelity)
  Βασικός στόχος: γνωριμία με λογισμικά και διαδικτυακές πλατφόρμες σχεδίασης πρωτοτύπων υψηλής πιστότητας, σχεδιασμός γραφικού περιβάλλοντος χρήστη για κινητές συσκευές και διαδικτυακές εφαρμογές, διασύνδεση με εξωτερικά αποθετήρια γραφικών στοιχείων διάδρασης χρήστη, εξαγωγή σε διαδραστικά αυτοτελή πρωτότυπα και διαδιακτυακές εκτελέσιμες εφαρμογές, παρουσίαση και ανάπτυξη στο Adobe Xd
• Σχεδιασμός Γραφικής Διεπαφής Χρήστη σε Ιστοτόπους
  Βασικός στόχος: τεχνολογίες και πλατφόρμες πρωτοτυποποίησης, γνωριμία με υπάρχοντα συστήματα διαχείρισης περιεχομένου (CMS), εγκατάσταση και παραμετροποίηση θεμάτων (templates/themes) και πρόσθετων (plug-in/add-on), ενσωμάτωση analytics, οπτική διαδικτυακή επικοινωνία, παρουσίαση και ανάπτυξη στο Google Sites και στο Wordpress
• Σχεδιασμός Τριδιάστατων Διεπαφών
  Βασικός στόχος: γνωριμία με λογισμικά σχεδίασης και προγραμματισμού διεπαφών σε τριδιάστατα και εικονικά περιβάλλοντα, μελέτη της αλληλεπίδρασης με γραφικά 3Δ στοιχεία, διασύνδεση με εξωτερικές πηγές και ανάκτηση περιεχομένου, παρουσίαση και 3Δ μοντελοποίηση γραφικών στοιχειών διεπαφής (η περίπτωση του Autodesk 3ds Max), φωτορεαλιστική απόδοση γραφικών και διασύνδεση με εξωτερικά αποθετήρια, προσθήκη και ενσωμάτωση ενσαρκώσεων χρήστη (avatars) σε προοπτικές πρώτου και τρίτου προσώπου, παρουσίαση και προγραμματισμός της γραφικής διεπαφής (η περίπτωση της Unity 3D)
• Αξιολόγηση Γραφικών Διεπαφών Χρήστη
  Βασικός στόχος: γνωριμία με μεθοδολογίες αξιολόγησης μέσω στατιστικών αναλύσεων, σεναρίων χρήσης, συνεντεύξεων και ερωτηματολογίων, σύνθεση κριτηρίων και μετρικών, ποσοτικοποίηση αποτελεσμάτων, οπτικοποίηση δεδομένων

• Shneiderman, B., Plaisant, C., Cohen, M. S., Jacobs, S., Elmqvist, N., & Diakopoulos, N. (2016). Designing the user interface: strategies for effective human-computer interaction. Pearson.
• Benyon, D. (2019). Designing user experience. Pearson.
• MacDonald, D. (2019). Practical UI Patterns for Design Systems: Fast-Track Interaction Design for a Seamless User Experience. Apress.
• Preece, J., Rogers, Y., Sharp, H. (2015), Interaction Design: Beyond Human-computer Interaction, 4th Ed., J. Wiley & Sons.
• Beyer, H. & Hortzblatt, K. (1999) Contextual Design, Morgan- Kaufmann, NY.
• Dix, A., Finlay, J., Abowd, G., & Beale, R. (2004). Human-Computer Interaction (3rd.). Prentice Hall
• Garrett, J.J. (2003) The Elements of User Experience, New Riders, New York.
• Nielsen, J. (1993). Usability Engineering. San Fransisco: Morgan Kaufmann.
• Norman, D. A. (1988). The Design of Everyday Things. Massachusetts, Cambridge: MIT Press.
• Snyder, C. (2003). Paper Prototyping. Morgan Kauffman.
• Tullis, T., & Albert, B. (2008). Measuring the User Experience: Collecting Analysing and Presenting Usability Metrics. Morgan Kaufmann.
• Saffer, D. (2007) Designing for Interaction, New Riders, Berkeley, CA.
• Tidwell, J. (2006). Designing Interfaces: Patterns for Effective Interaction Design. O'Reilly.
• Burdea, G. C., & Coiffet, P. (2003). Virtual reality technology (2nd ed.). New Brunswick, NJ: Wiley-IEEE Press
• Kortum, P. (2008) HCI Beyond the GUI, Elsevier.
• Εισαγωγή στην Αλληλεπίδραση Ανθρώπου-Υπολογιστή. Αβούρης, Ν., Κατσάνος, Χ., Τσέλιος, Ν., & Μουστάκας, Κ. (2015).

• Χρήση Zoom για τηλεδιαλέξεις
• Χρήση Trello για συντονισμό των εργασιών και την επικοινωνία με τους φοιτητές/τριες
• Χρήση Pencil Project για σχεδιασμό πρωτοτύπων σε επίπεδο wireframes
• Χρήση Adobe Xd για σχεδίαση πρωτοτύπων υψηλής πιστότητας και λεπτομέρειας
• Χρήση εφαρμογών γραφείου (word, power point) για τη συγγραφή εργασιών, παρουσιάσεων και αναφορών προόδου
• Χρήση CMS tools για τη σχεδίαση διαδικτυακών εφαρμογών και ιστοτόπων
• Χρήση Unity 3D για τη σχεδίαση γραφικών διεπαφών τριδιάστατης απεικόνισης
• Χρήση του Ίντερνετ και φυλλομετρητών για αναζήτηση βιβλιογραφίας
• Χρήση Open E-class για ασύγχρονη εκπαίδευση και επικοινωνία
• Χρήση Webmail για ηλεκτρονική αλληλογραφία

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

• Γραπτές εργασίες
• Εργαστηριακές ασκήσεις ανάπτυξης
• Έκθεση / αναφορά

Γλώσσα: ελληνική/αγγλική Μέθοδοι εξέτασης: παρουσίαση και προφορική εξέταση, κατάθεση αναφορών προόδου, σύνταξη έκθεσης πεπραγμένων