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

2. Δομή Παρουσίασης
• Ορισμός του Προβλήματος
• Σκοπός της Διπλωματικής
• Βασικές Έννοιες
• Ανάλυση του συστήματος
• Αποτελέσματα – Συμπεράσματα
• Μελλοντικές Επεκτάσεις
Σχεδίαση και ανάπτυξη διαδικτυακής εφαρμογής με σκοπό την αξιολόγηση της Εμπειρίας Χρήστη (UX)
διαφορετικών τεχνικών αλληλεπίδρασης και σημασιολογικού περιεχομένου
2 / 284/11/2016

3. Ορισμός του Προβλήματος
• «User Experience
of On-Screen
Interaction
Techniques»
Επιστημονικό
άρθρο
• Τεχνικών
αλληλεπίδρασης
• Σημασιολογικού
περιεχομένου
Αξιολόγηση
Εμπειρίας Χρήστη • Σχεδίαση και
ανάπτυξη
διαδικτυακής
εφαρμογής
Διπλωματική
εργασία
Σχεδίαση και ανάπτυξη διαδικτυακής εφαρμογής με σκοπό την αξιολόγηση της Εμπειρίας Χρήστη (UX)
διαφορετικών τεχνικών αλληλεπίδρασης και σημασιολογικού περιεχομένου
3 / 284/11/2016

4. Δομή Παρουσίασης
• Ορισμός του Προβλήματος
• Στόχος της Διπλωματικής
• Βασικές Έννοιες
• Ανάλυση του συστήματος
• Αποτελέσματα – Συμπεράσματα
• Μελλοντικές Επεκτάσεις
Σχεδίαση και ανάπτυξη διαδικτυακής εφαρμογής με σκοπό την αξιολόγηση της Εμπειρίας Χρήστη (UX)
διαφορετικών τεχνικών αλληλεπίδρασης και σημασιολογικού περιεχομένου
4 / 284/11/2016

5. Στόχος της διπλωματικής είναι:
• η αξιολόγηση της Εμπειρίας Χρήστη έξι τεχνικών
αλληλεπίδρασης :
• Επιλογή (Click)
• Αιώρηση (Mouseover)
• Ολίσθηση (Slide)
• Σύρσιμο (Drag & Drop)
• Μεγέθυνση (Zoom)
• Περιστροφή (Flipping)
• η αξιολόγηση της επίδρασης του σημασιολογικού περιεχομένου
στην Εμπειρία Χρήστη
Σχεδίαση και ανάπτυξη διαδικτυακής εφαρμογής με σκοπό την αξιολόγηση της Εμπειρίας Χρήστη (UX)
διαφορετικών τεχνικών αλληλεπίδρασης και σημασιολογικού περιεχομένου
5 / 284/11/2016

6. Δομή Παρουσίασης
• Ορισμός του Προβλήματος
• Στόχος της Διπλωματικής
• Βασικές Έννοιες
• Ανάλυση του συστήματος
• Αποτελέσματα – Συμπεράσματα
• Μελλοντικές Επεκτάσεις
Σχεδίαση και ανάπτυξη διαδικτυακής εφαρμογής με σκοπό την αξιολόγηση της Εμπειρίας Χρήστη (UX)
διαφορετικών τεχνικών αλληλεπίδρασης και σημασιολογικού περιεχομένου
6 / 284/11/2016

7. Επικοινωνία Ανθρώπου-Υπολογιστή
• Δημιουργήθηκε κατά τη διάρκεια της δεκαετίας του ’70
• Στόχος της είναι να προάγει τη δημιουργία εύχρηστων, ασφαλών και
λειτουργικών συστημάτων
• Βασικότεροι τομείς ενασχόλησης:
• μεθοδολογίες σχεδίασης διεπαφών
• μεθόδοι υλοποίησης διεπαφών
• τεχνικές σύγκρισης και αξιολόγησης διεπαφών
• ανάπτυξη νέων διεπαφών και τεχνικών αλληλεπίδρασης
• ανάπτυξη περιγραφικών και προβλεπτικών μοντέλων και θεωριών αλληλεπίδρασης
Σχεδίαση και ανάπτυξη διαδικτυακής εφαρμογής με σκοπό την αξιολόγηση της Εμπειρίας Χρήστη (UX)
διαφορετικών τεχνικών αλληλεπίδρασης και σημασιολογικού περιεχομένου
7 / 284/11/2016

8. Εμπειρία Χρήστη – User Experience – UX
• Περιγράφει τις ποικίλες πτυχές της αλληλεπίδρασης
• Πολυδιάστατη σημασία - ανάλογα με το υπό ποια έννοια θα
προσεγγιστεί δίδεται βαρύτητα σε μια διαφορετική πτυχή της
εμπειρίας
• Ευχρηστία (Usability)
• Τομείς ανάπτυξης της Εμπειρίας Χρήστη:
• Φορητές ηλεκτρονικές συσκευές
• Υπηρεσίες κοινωνικής δικτύωσης
• Διεπαφές χρηστών
• Σχεδίαση Ιστοσελίδων
Σχεδίαση και ανάπτυξη διαδικτυακής εφαρμογής με σκοπό την αξιολόγηση της Εμπειρίας Χρήστη (UX)
διαφορετικών τεχνικών αλληλεπίδρασης και σημασιολογικού περιεχομένου
8 / 284/11/2016

9. Σημασιολογικός Ιστός
• Semantic Web / Web 3.0
• Δημιούργημα του Tim Berners-Lee, 2001
• Μεταδεδομένα που μπορούν να καταλάβουν και οι μηχανές αναζήτησης
• Σημασιολογικό Περιεχόμενο και Εμπειρία Χρήστη:
• Search engine optimization
• Indexing
• DΒpedia
Σχεδίαση και ανάπτυξη διαδικτυακής εφαρμογής με σκοπό την αξιολόγηση της Εμπειρίας Χρήστη (UX)
διαφορετικών τεχνικών αλληλεπίδρασης και σημασιολογικού περιεχομένου
9 / 284/11/2016

10. Δομή Παρουσίασης
• Ορισμός του Προβλήματος
• Στόχος της Διπλωματικής
• Βασικές Έννοιες
• Ανάλυση του συστήματος
• Αποτελέσματα – Συμπεράσματα
• Μελλοντικές Επεκτάσεις
Σχεδίαση και ανάπτυξη διαδικτυακής εφαρμογής με σκοπό την αξιολόγηση της Εμπειρίας Χρήστη (UX)
διαφορετικών τεχνικών αλληλεπίδρασης και σημασιολογικού περιεχομένου
10 / 284/11/2016

11. Περιγραφή του συστήματος
• 12 διαδικτυακές σελίδες:
• Αρχικά 6 με διαφορετική τεχνική αλληλεπίδραση
• Ακολούθως άλλες 6 ίδιες με προσθήκη σημασιολογικού περιεχομένου μέσω
Dbpedia Spotlight
• Ίδια θεματολογία – περιεχόμενο
• Ταυτόσημος σχεδιασμός
• https://interaction-techniques.herokuapp.com
Σχεδίαση και ανάπτυξη διαδικτυακής εφαρμογής με σκοπό την αξιολόγηση της Εμπειρίας Χρήστη (UX)
διαφορετικών τεχνικών αλληλεπίδρασης και σημασιολογικού περιεχομένου
11 / 284/11/2016

12. Δομή του συστήματος
4/11/2016
Σχεδίαση και ανάπτυξη διαδικτυακής εφαρμογής με σκοπό την αξιολόγηση της Εμπειρίας Χρήστη (UX)
διαφορετικών τεχνικών αλληλεπίδρασης και σημασιολογικού περιεχομένου
12 / 28

13. Περιεχόμενο των σελίδων
Σχεδίαση και ανάπτυξη διαδικτυακής εφαρμογής με σκοπό την αξιολόγηση της Εμπειρίας Χρήστη (UX)
διαφορετικών τεχνικών αλληλεπίδρασης και σημασιολογικού περιεχομένου
13 / 284/11/2016

14. Ερωτηματολόγιο
• 42 ερωτήσεις
• Κλίμακα 7 σημείων τύπου Likert με εύρος απαντήσεων μεταξύ
«διαφωνώ απόλυτα» και «συμφωνώ απόλυτα»
• Μεταβλητές:
• 1 Τροποποιητική Μεταβλητή:
• Δυναμική Χρήστη (Power Usage)
• 8 Εξαρτημένες Μεταβλητές:
• Αντιληπτή Διαδραστικότητα (Perceived Interactivity)
• Αξιολόγηση Διεπαφής (Interface assessment)
• Απορρόφηση (Absorption)
• Ανάκλησης μνήμης και αναγνωριστική μνήμη (Recall and Recognition Memory)
• Συμπεριφορά απέναντι στο περιεχόμενο (Attitudes toward content)
• Συμπεριφορά απέναντι στην ιστοσελίδα (Attitude toward website)
• Συμπεριφορική πρόθεση προς το περιεχόμενο (Behavioral intention toward content)
• Συμπεριφορική πρόθεση προς την ιστοσελίδα (Behavioral intention toward website)
Σχεδίαση και ανάπτυξη διαδικτυακής εφαρμογής με σκοπό την αξιολόγηση της Εμπειρίας Χρήστη (UX)
διαφορετικών τεχνικών αλληλεπίδρασης και σημασιολογικού περιεχομένου
14 / 284/11/2016

15. Επιλογή – Χωρίς Σημασιολογικό Περιεχόμενο
Σχεδίαση και ανάπτυξη διαδικτυακής εφαρμογής με σκοπό την αξιολόγηση της Εμπειρίας Χρήστη (UX)
διαφορετικών τεχνικών αλληλεπίδρασης και σημασιολογικού περιεχομένου
15 / 284/11/2016

16. Αιώρηση – Με Σημασιολογικό Περιεχόμενο
Σχεδίαση και ανάπτυξη διαδικτυακής εφαρμογής με σκοπό την αξιολόγηση της Εμπειρίας Χρήστη (UX)
διαφορετικών τεχνικών αλληλεπίδρασης και σημασιολογικού περιεχομένου
16 / 284/11/2016

17. Περιστροφή – Χωρίς Σημασιολογικό Περιεχόμενο
Σχεδίαση και ανάπτυξη διαδικτυακής εφαρμογής με σκοπό την αξιολόγηση της Εμπειρίας Χρήστη (UX)
διαφορετικών τεχνικών αλληλεπίδρασης και σημασιολογικού περιεχομένου
17 / 284/11/2016

18. Δομή Παρουσίασης
• Ορισμός του Προβλήματος
• Στόχος της Διπλωματικής
• Βασικές Έννοιες
• Ανάλυση του συστήματος
• Αποτελέσματα – Συμπεράσματα
• Μελλοντικές Επεκτάσεις
Σχεδίαση και ανάπτυξη διαδικτυακής εφαρμογής με σκοπό την αξιολόγηση της Εμπειρίας Χρήστη (UX)
διαφορετικών τεχνικών αλληλεπίδρασης και σημασιολογικού περιεχομένου
18 / 284/11/2016

19. Μεθοδολογία έρευνας
• Στόχος η αξιολόγηση της Εμπειρίας Χρήστη:
• 6 Τεχνικών Αλληλεπίδρασης
• Σημασιολογικού Περιεχομένου
• 293 συμμετέχοντες
• Τυχαία δρομολόγηση των χρηστών στις σελίδες
• Ανάλυση σε MATLAB με General Linear Model – GLM
Σχεδίαση και ανάπτυξη διαδικτυακής εφαρμογής με σκοπό την αξιολόγηση της Εμπειρίας Χρήστη (UX)
διαφορετικών τεχνικών αλληλεπίδρασης και σημασιολογικού περιεχομένου
19 / 284/11/2016

20. Αποτελέσματα
Σχεδίαση και ανάπτυξη διαδικτυακής εφαρμογής με σκοπό την αξιολόγηση της Εμπειρίας Χρήστη (UX)
διαφορετικών τεχνικών αλληλεπίδρασης και σημασιολογικού περιεχομένου
20 / 284/11/2016
Ανάλυση της μεταβλητής «Αξιολόγηση Διεπαφής» των τεχνικών αλληλεπίδρασης

21. Αποτελέσματα (2)
Σχεδίαση και ανάπτυξη διαδικτυακής εφαρμογής με σκοπό την αξιολόγηση της Εμπειρίας Χρήστη (UX)
διαφορετικών τεχνικών αλληλεπίδρασης και σημασιολογικού περιεχομένου
21 / 284/11/2016
Ανάλυση της μεταβλητής «Αναγνωριστική μνήμη εικόνων» των τεχνικών αλληλεπίδρασης

22. Αποτελέσματα (3)
Σχεδίαση και ανάπτυξη διαδικτυακής εφαρμογής με σκοπό την αξιολόγηση της Εμπειρίας Χρήστη (UX)
διαφορετικών τεχνικών αλληλεπίδρασης και σημασιολογικού περιεχομένου
22 / 284/11/2016
Συγκριτική ανάλυση της χρήσης σημασιολογικού περιεχομένου στην ΑντιληπτήΔιαδραστικότητα
των τεχνικών αλληλεπίδρασης «Επιλογή» και «Περιστροφή»

23. Αποτελέσματα (4)
Σχεδίαση και ανάπτυξη διαδικτυακής εφαρμογής με σκοπό την αξιολόγηση της Εμπειρίας Χρήστη (UX)
διαφορετικών τεχνικών αλληλεπίδρασης και σημασιολογικού περιεχομένου
23 / 284/11/2016
Συγκριτική ανάλυση της χρήσης σημασιολογικού περιεχομένου στην αναγνωριστική μνήμη εικόνων

24. Συμπεράσματα της αξιολόγησης των τεχνικών
αλληλεπίδρασης
• Οι τεχνικές «Αιώρηση» και «Επιλογή» παρουσίασαν μια καμπύλη
εκμάθησης ανάλογα με την Δυναμική Χρήστη
• Η τεχνική της «Ολίσθησης» παρουσίασε τα υψηλότερα
αποτελέσματα στις μεταβλητές που αφορούν ανάκληση
περιεχομένου της ιστοσελίδας
• Η τεχνική της «Μεγέθυνσης» παρουσίασε τα αρνητικότερα
αποτελέσματα συγκριτικά με τις υπόλοιπες τεχνικές
• Επιλογή της τεχνικής αλληλεπίδρασης ανάλογα με τους στόχους
του συστήματος
Σχεδίαση και ανάπτυξη διαδικτυακής εφαρμογής με σκοπό την αξιολόγηση της Εμπειρίας Χρήστη (UX)
διαφορετικών τεχνικών αλληλεπίδρασης και σημασιολογικού περιεχομένου
24 / 284/11/2016

25. Συμπεράσματα της αξιολόγησης του
σημασιολογικού περιεχομένου
• Η τεχνική της «Ολίσθησης» παρουσίασε την μεγαλύτερη
βελτίωση της Εμπειρίας Χρήστη με την προσθήκη
σημασιολογικού περιεχομένου
• Η τεχνική «Σύρσιμο» φάνηκε να επηρεάζεται αρνητικά, κυρίως
στους μη δυναμικούς χρήστες, από την ύπαρξη σημασιολογικού
περιεχομένου.
• Οι δυναμικοί χρήστες προτίμησαν τις σελίδες με σημασιολογικό
περιεχόμενο στην τεχνική της «Περιστροφής»
• Παρατηρήθηκε βελτίωση της συνολικής Εμπειρίας Χρήστη με τη
προσθήκη σημασιολογικού περιεχομένου για τις περισσότερες
τεχνικές αλληλεπίδρασης
4/11/2016
Σχεδίαση και ανάπτυξη διαδικτυακής εφαρμογής με σκοπό την αξιολόγηση της Εμπειρίας Χρήστη (UX)
διαφορετικών τεχνικών αλληλεπίδρασης και σημασιολογικού περιεχομένου
25 / 28

26. Δομή Παρουσίασης
• Ορισμός του Προβλήματος
• Στόχος της Διπλωματικής
• Βασικές Έννοιες
• Ανάλυση του συστήματος
• Αποτελέσματα – Συμπεράσματα
• Μελλοντικές Επεκτάσεις
Σχεδίαση και ανάπτυξη διαδικτυακής εφαρμογής με σκοπό την αξιολόγηση της Εμπειρίας Χρήστη (UX)
διαφορετικών τεχνικών αλληλεπίδρασης και σημασιολογικού περιεχομένου
26 / 284/11/2016

27. Μελλοντικές Επεκτάσεις
Σχεδίαση και ανάπτυξη διαδικτυακής εφαρμογής με σκοπό την αξιολόγηση της Εμπειρίας Χρήστη (UX)
διαφορετικών τεχνικών αλληλεπίδρασης και σημασιολογικού περιεχομένου
27 / 284/11/2016
Επέκταση της έρευνας με σκοπό την βελτίωση της Εμπειρίας
Χρήστη σε:
• Συσκευές με οθόνη αφής
• Συσκευές Εικονικής Πραγματικότητας (VR)
• Ηλεκτρονικά Παιχνίδια

28. Ευχαριστώ πολύ για την προσοχή σας!
Ερωτήσεις ;
Σχεδίαση και ανάπτυξη διαδικτυακής εφαρμογής με σκοπό την αξιολόγηση της Εμπειρίας Χρήστη (UX)
διαφορετικών τεχνικών αλληλεπίδρασης και σημασιολογικού περιεχομένου
28 / 284/11/2016