A methodology and tool for assessing web aesthetics

1. ΑΡΙΣΤΟΤΕΛΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΘΕΣΣΑΛΟΝΙΚΗΣ
ΤΜΗΜΑ ΗΛΕΚΤΡΟΛΟΓΩΝ ΜΗΧΑΝΙΚΩΝ ΚΑΙ
ΜΗΧΑΝΙΚΩΝ ΥΠΟΛΟΓΙΣΤΩΝ
ISSE
L
Κατανόηση της αισθητικής ιστοσελίδων με βαθιά μάθηση
Εκπόνηση:
Αλέξανδρος Δελητζάς
ΑΕΜ 8448
Επιβλέποντες:
Αναπ. Καθηγητής Ανδρέας Συμεωνίδης
Δρ. Κυριάκος Χατζηδημητρίου
Μάρτιος 2020

2. Κίνητρο
• Σημασία αισθητικής ιστοσελίδων
Halo effect

3. Κίνητρο
• Επιτάχυνση διαδικασίας σχεδιασμού
• Αύξηση αποτελεσματικότητας
Prototype
User feedback
Design
UI Design Cycle

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

5. Rating-based vs Comparison-based αξιολόγηση

6. Rating-based σύνολο
δεδομένων
• 398 ιστοσελίδες
• 441,478 αξιολογήσεις στην κλίμακα 1-9
• 18,448 συμμετέχοντες από 43 χώρες

7. Comparison-based σύνολο δεδομένων
Επιλογή
ιστοσελίδων
Λήψη
screenshots
Συλλογή
συγκρίσεων
από χρήστες
Εξαγωγή
ranking από
τις συγκρίσεις

8. Web Crawler

9. Comparison-based σύνολο δεδομένων
Επιλογή
ιστοσελίδων
Λήψη
screenshots
Συλλογή
συγκρίσεων
από χρήστες
Εξαγωγή
ranking από
τις συγκρίσεις

10. Εφαρμογή συλλογής
δεδομένων

12. Εφαρμογή συλλογής δεδομένων
• 32 συγκρίσεις ανά session
• Έλεγχος συνέπειας στις απαντήσεις του χρήστη
• Συνολικός αριθμός ιστοσελίδων: 100
• Συνολικός αριθμός συγκρίσεων που
συλλέχθηκαν: 5,094

13. Comparison-based σύνολο δεδομένων
Επιλογή
ιστοσελίδων
Λήψη
screenshots
Συλλογή
συγκρίσεων
από χρήστες
Εξαγωγή
ranking από
τις συγκρίσεις

14. Εξαγωγή ranking από συγκρίσεις
Δεδομένα
συγκρίσεων από
τους χρήστες
Μοντέλο
Bradley-Terry
Απόδοση σκορ
Κανονικοποίηση
σκορ στην
κλίμακα 1-10

15. Εξαγωγή ranking από συγκρίσεις
Σκορ 1/10 Σκορ 5.5/10 Σκορ 10/10
Παραδείγματα:
Επίπεδο αισθητικής

16. Κατασκευή μοντέλων βαθιάς μάθησης
Μοντέλα
Rating-based
Προσέγγιση 1
Προσέγγιση 2
Προσέγγιση 3
Comparison-
based
Προσέγγιση 1

17. Rating-based μοντέλα – 1η Προσέγγιση
• Χρήση μέσου όρου των αξιολογήσεων
• Χρήση AlexNet αρχιτεκτονικής
• Μεταφορά γνώσης από Flickr Style dataset (80K φωτογραφίες για
image style recognition)

18. Rating-based μοντέλα – 2η προσέγγιση
• Χρήση όλης της κατανομής των σκορ
• Χρήση MobileNet αρχιτεκτονικής
• Μεταφορά γνώσης από AVA dataset (250K φωτογραφίες για
aesthetic visual analysis)

19. Rating-based μοντέλα – 2η προσέγγιση
Εκτίμηση της κατανομής
των σκορ
Σκορ αισθητικής =
αναμενόμενη τιμή
της κατανομής

20. Rating-based μοντέλα – 3η Προσέγγιση
• Χρήση όλων των ζευγών (ιστοσελίδα, αξιολόγηση χρήστη)
• Χρήση AlexNet αρχιτεκτονικής
• Μεταφορά γνώσης από Flickr Style dataset (80K φωτογραφίες για
image style recognition)

21. Κατασκευή μοντέλων βαθιάς μάθησης
Μοντέλα
Rating-based
Προσέγγιση 1
Προσέγγιση 2
Προσέγγιση 3
Comparison-
based
Προσέγγιση 1

22. Comparison-based μοντέλο
• Χρήση του Bradley-Terry rating
• Χρήση AlexNet αρχιτεκτονικής
• Μεταφορά γνώσης από 1η rating-based προσέγγιση

23. Αξιολόγηση μοντέλων
Rating-based Comparison-based
• Leave-one-out cross validation
• 100 δείγματα
• Διαχωρισμός σε σύνολο εκπαίδευσης και
σύνολο ελέγχου
 Σύνολο εκπαίδευσης: 300 δείγματα (75.4%)
 Σύνολο ελέγχου: 98 δείγματα (24.6%)
Μετρικές: Συντελεστής συσχέτισης Pearson (PCC) , RMSE

24. Αποτελέσματα – Rating-based μοντέλα
Μοντέλο 1ης προσέγγισης PCC RMSE
Χωρίς χρήση μεταφοράς
γνώσης
0.47 [0.30, 0.61] 0.850
Με χρήση μεταφοράς γνώσης
από Flickr Style
0.78 [0.69, 0.85] 0.616
Μοντέλο 2ης προσέγγισης PCC RMSE
Μεταφορά γνώσης από
ImageNet
0.71 [0.60, 0.80] 0.694
Μεταφορά γνώσης από AVA 0.76 [0.66, 0.83] 0.662
Συνεισφορά μεταφοράς γνώσης
Μεταφορά γνώσης από σύνολα
δεδομένων σχετικών με
αισθητική φωτογραφιών
Σύνολα δεδομένων για μεταφορά γνώσης:
• Flickr Style (Image Style Recognition)
• AVA (Aesthetic Visual Analysis)
• ImageNet (Object Recognition)

25. Αποτελέσματα – Rating-based μοντέλα
Μοντέλο PCC RMSE
Accuracy
(2 classes)
Πρώτη Προσέγγιση 0.78 [0.69, 0.85] 0.616 88.78 %
Δεύτερη Προσέγγιση 0.76 [0.66, 0.83] 0.662 84.69 %
Τρίτη Προσέγγιση 0.78 [0.68, 0.85] 0.628 83.67 %

26. Παραδείγματα
αξιολόγησης

27. Αποτελέσματα – Comparison-based μοντέλα
Μοντέλο PCC RMSE
Μεταφορά γνώσης από 1η
rating-based προσέγγιση
0.70 [0.58, 0.79] 1.353

28. Παραδείγματα
αξιολόγησης

29. Σύγκριση συμπεριφοράς μοντέλων
• Μελέτη συμπεριφοράς σε 24 ιστοσελίδες
• Διαχωρισμός ιστοσελίδων σε 3 κλιμακούμενα επίπεδα αισθητικής
Παραδείγματα των 3 επιπέδων αισθητικής:
Χαμηλό Μεσαίο Υψηλό
Rating-based model: 4.53 / 10
Comparison-based model: 3.67 / 10
Rating-based model: 4.65 / 10
Comparison-based model: 6.52 / 10
Rating-based model: 6.60 / 10
Comparison-based model: 8.53 / 10

30. Σύγκριση συμπεριφοράς μοντέλων
Μοντέλο Εύρος εκτιμήσεων
Rating-based [2.80, 6.87]
Comparison-based [2.56, 8.53]
Πιο αντιπροσωπευτική
χρήση της κλίμακας
από το comparison-
based μοντέλο

31. Εφαρμογή αξιολόγησης ιστοσελίδων

33. Ευχαριστίες
Ευχαριστώ θερμά:
• Τον Αναπληρωτή Καθηγητή Ανδρέα Συμεωνίδη
• Τον Δρ. Κυριάκο Χατζηδημητρίου
• Τους ανώνυμους εθελοντές που συμμετείχαν στη συλλογή δεδομένων

34. Σας ευχαριστώ για την προσοχή σας 
Ερωτήσεις;