Sysourka Sofia

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

2. Περιεχόμενα
 Εισαγωγή
 Σκοπός της διπλωματικής
 Γνώσεις που αποκτήθηκαν
 Μεθοδολογία
 Πειράματα – Αποτελέσματα
 Συμπεράσματα – Μελλοντική εργασία
2Μάρτιος 17

3.  Πάνω από 1 δισεκατομμύριο ιστοσελίδες σήμερα
 Ποιος ο βέλτιστος τρόπος σχεδίασης;
 Υπάρχουν καθιερωμένα πρότυπα που εξασφαλίζουν
επιτυχημένη σχεδίαση;
Εισαγωγή
 Οι χρήστες αξιολογούν μία
ιστοσελίδα κυρίως με βάση
τον αισθητικό σχεδιασμό της
γραφικής διεπαφής
Υλοποίηση συστήματος
αξιολόγησης του
αισθητικού σχεδιασμού
Μάρτιος 17 3

4. 4
Σκοπός της διπλωματικής
 Αισθητική όπως γίνεται αντιληπτή από τον χρήστη
 Ποσοτικοποίηση της αισθητικής μέσω μετρικών στατικής
ανάλυσης
 Εύρεση κυρίαρχων προτύπων σχεδίασης με αναφορά στην
αντίληψη του τελικού χρήστη
 Εύρεση προτύπων σχεδίασης με βάση το θεματικό περιεχόμενο
 Εκπαίδευση μοντέλων ώστε να αναγνωρίζουν τα πρότυπα
σχεδίασης

5. 5
 Σχεδιασμός και ανάπτυξη συστήματος αξιολόγησης του
αισθητικού σχεδιασμού των ιστοσελίδων
 Συλλογή δεδομένων από ιστοσελίδες
 Μοντελοποίηση αισθητικής με χρήση μετρικών
 Ανάλυση δεδομένων
 Κατασκευή μοντέλου αξιολόγησης με βάση το θεματικό
περιεχόμενο των ιστοσελίδων
Γνώσεις που αποκτήθηκαν
Μάρτιος 17

6. 6
• Data
Collector
scraped data
• Metric
Calculator
metrics
• Data
Analyzer
processed
metrics
• Webpage
UI
Evaluator
evaluation
report
Μεθοδολογία - Το σύστημα που
υλοποιήθηκε
Επιλογή του
dataset
Συλλογή
δεδομένων
Υπολογισμός
μετρικών
αισθητικής
Ανάλυση
τιμών
μετρικών
Κατασκευή
μοντέλου
πρόβλεψης
Μάρτιος 17

7. 7
Data Collector
• Εισαγωγή των urls των ιστοσελίδων του dataset
• Συλλογή δεδομένων
• Αποθήκευση αποτελεσμάτων
Browser navigation
scripting & testing
utility
Μάρτιος 17
 3 θεματικές κατηγορίες
(news, e-shopping, search
engines)
 25 δημοφιλείς ιστοσελίδες
για κάθε κατηγορία

8. 8
Data Collector
 Συλλογή δεδομένων
ανά επίπεδο βάθους
του HTML δέντρου
Web scraping
Δεδομένα
συλλέγονται για κάθε
«αντικείμενο» του
δέντρου, δηλαδή για
κάθε html tag
Ενδιαφερόμαστε για
ορατά αντικείμενα
Μάρτιος 17

9. 9
Data Collector
Παραγόμενα δεδομένα:
 Κέντρα αντικειμένων
 Σημεία στοίχισης
 Διαχωρισμός οθόνης σε τμήματα (top, bottom, left, right)
 Διαχωρισμός οθόνης σε τεταρτημόρια (upper-left, upper-right, lower-left,
lower-right)
Μάρτιος 17
Άμεσα συλλεγόμενα δεδομένα:
 Διαστάσεις πλαισίου (frame) και διάταξης (layout)
 Συντεταγμένες αντικειμένων (πλάτος, ύψος, εμβαδόν)
Απόρριψη αντικειμένων:
 εκτός πλαισίου (frame)
 με tags όπως br, meta, script, noscript
 μη ορατά ή με μηδενικές διαστάσεις

10. 10
Data Collector
Μάρτιος 17
JSON format

11. 11
Metric Calculator
• Ανάγνωση αποτελεσμάτων του Data Collector
• Υπολογισμός μετρικών αισθητικής
• Αποθήκευση αποτελεσμάτων
Μάρτιος 17

12. 12
Metric Calculator
 Density
 Equilibrium
 Balance
 Regularity
 Homogeneity
 Simplicity
 Alignment
 Grouping
 Proportion
 Cohesion
 Symmetry
 Rhythm
Τιμές στο διάστημα [0,1]
Ποσοστό κάλυψης της οθόνης από
αντικείμενα
Λογική τοποθέτηση των αντικειμένων,
χωρίς περίπλοκες διατάξεις
Μάρτιος 17

13. 13
Metric Calculator
Μάρτιος 17

14. 14
Data Analyzer
• Ανάγνωση αποτελεσμάτων του Metric Calculator
• Χειροκίνητη προ-επεξεργασία συνόλου δεδομένων
• Ανάλυση του συνόλου δεδομένων
• Αποθήκευση αποτελεσμάτων
Μάρτιος 17
 Διαγραφή μετρικής Equilibrium
 Επεξεργασία τιμών
 Διαγραφή μη χρήσιμων επιπέδων (όμοιες / παρόμοιες τιμές)
 Εξισορρόπηση αριθμού επιπέδων (23 επίπεδα)
 Συσχέτιση μετρικών (συνολικό dataset, μεταξύ επιπέδων, μεταξύ θεματικών
κατηγοριών
 Εύρος τιμών μετρικών

15. 15Μάρτιος 17
Data Analyzer

16. 16
Webpage UI Evaluator
• Ανάγνωση αποτελεσμάτων του Data Analyzer
• Αυτοματοποιημένη προ-επεξεργασία συνόλου δεδομένων
• Επιλογή κατάλληλων επιπέδων μέσω τεχνικών ομαδοποίησης
• Κατασκευή μοντέλου πρόβλεψης για κάθε επίπεδο μέσω
τεχνικών ταξινόμησης
• Κατασκευή συνδυαστικού μοντέλου αξιολόγησης
Μάρτιος 17

17. 17Μάρτιος 17
Επιλογή κατάλληλων επιπέδων
Αλγόριθμοι Ομαδοποίησης:
 Kmeans
 Agglomerative Hierarchical
 DBSCAN
Καθορισμός κέντρων ομάδων
ώστε να ελαχιστοποιείται το
κριτήριο
Εμφωλευμένες ομάδες με
bottom-up προσέγγισηΔιακρίνει ζώνες υψηλής και
χαμηλής πυκνότητας
Αυτοματοποιημένη προ-επεξεργασία:
 Συμπλήρωση ελλιπών τιμών
 Αφαίρεση εξωκείμενων τιμών ανά επίπεδο (10% των δειγμάτων)
 Κλιμακοποίηση και κανονικοποίηση
 Τυχαία αναδιάταξη των δεδομένων
Στόχος Βέλτιστος διαχωρισμός
ιστοσελίδων διαφορετικών θεματικών
κατηγοριών

18. 18Μάρτιος 17
Κατασκευή μοντέλου πρόβλεψης
για κάθε επίπεδο
Αλγόριθμοι Ταξινόμησης:
 Decision Tree
 K Nearest Neighbors
Διαχωρισμός του συνόλου
δεδομένων εκπαίδευσης σε
υποσύνολα ανάλογα με την τιμή
των γνωρισμάτων
 Χρήση των συνόλων δεδομένων των
επιπέδων που επιλέχθηκαν μέσω της
ομαδοποίησης
Ταξινόμηση με βάση
την πλειοψηφία

19. 19Μάρτιος 17
Κατασκευή συνδυαστικού μοντέλου
αξιολόγησης
Επιβεβαίωση θεματικής κατηγορίας ποιοτικός σχεδιασμός
Λανθασμένη πρόβλεψη ο σχεδιασμός επιδέχεται βελτιώσεις
Διαδικασία αξιολόγησης:
 Δημιουργία συνόλου δεδομένων
 Υπολογισμός πιθανοτήτων κατάταξης στις 3 θεματικές κατηγορίες
 Συνυπολογισμός τιμών βάρους
 Εύρεση μέσης πιθανότητας κατάταξης σε κάθε κατηγορία
 Κατάταξη στην κατηγορία με τη μέγιστη πιθανότητα
Σύγκριση με τα πρότυπα σχεδιασμού δημοφιλών ιστοσελίδων!

20. 20Μάρτιος 17
Πειράματα – Αποτελέσματα
Ανάλυση δεδομένων
 Συσχέτιση μετρικών
συνολικού dataset
 Rhythm – Symmetry
 Alignment – Regularity

21. 21Μάρτιος 17
Ανάλυση δεδομένων
Κύριο εύρος τιμών
Alignment –
Layer 6
0.65 – 0.8
Cohesion –
Layer 1
0.55 – 0.7
Simplicity –
Layer 8
Έως 0.1
 Συνήθεις τιμές =
πρότυπο σχεδίασης

22. 22Μάρτιος 17
Πειράματα εύρεσης κατάλληλων
επιπέδων
Παράμετρος
Τιμή
παραμέτρου
n_clusters 3
init kmeans++
max_iter 300
n_init 10
Βέλτιστα επίπεδα: 0, 7, 9, 10, 12
 Kmeans  Agglomerative Hierarchical
 DBSCAN
Παράμετρος
Τιμή
παραμέτρου
n_clusters 3
linkage
Ward,
Average,
Complete

23. 23Μάρτιος 17
 Kmeans – επίπεδο 10

24. 24Μάρτιος 17
 Agglomerative Hierarchical – επίπεδο 10
(complete linkage)

25. 25Μάρτιος 17
Πειράματα κατασκευής μοντέλων
πρόβλεψης
10-fold cross-validation
Επίπεδο 10
Παράμετρος
Τιμή
παραμέτρου
criterion gini
min_samples
_leaf
2
DECISION TREE - LAYER 10
Class Precision Recall F1-Score Accuracy
Αριθμός
Δειγμάτων
E-shopping 0.74 0.81 0.77 0.81 21
News 0.87 0.87 0.87 0.87 23
Search engine 0.95 0.86 0.9 0.86 22
Average/Total 0.85 0.85 0.85 0.85 66
Παράμετρος
Τιμή
παραμέτρου
k 4
algorithm brute
metric manhattan
KNN - LAYER 10
Class Precision Recall F1-Score Accuracy
Αριθμός
δειγμάτων
E-shopping 0.77 0.81 0.79 0.81 21
News 0.91 0.87 0.89 0.87 23
Search engine 0.86 0.86 0.86 0.86 22
Average/ Total 0.85 0.85 0.85 0.85 66

26. 26Μάρτιος 17
Πειράματα κατασκευής μοντέλων
πρόβλεψης
10-fold cross-validation
Επίπεδο 7
Παράμετρος
Τιμή
παραμέτρου
criterion entropy
min_samples
_leaf
2
DECISION TREE - LAYER 7
Class Precision Recall F1-Score Accuracy
Αριθμός
Δειγμάτων
E-shopping 0.66 0.83 0.73 0.83 23
News 0.86 0.75 0.8 0.75 24
Search engine 0.94 0.8 0.86 0.8 20
Average/Total 0.81 0.79 0.8 0.79 67
Παράμετρος
Τιμή
παραμέτρου
k 4
algorithm brute
metric euclidean
KNN - LAYER 7
Class Precision Recall F1-Score Accuracy
Αριθμός
Δειγμάτων
E-shopping 0.59 0.74 0.65 0.74 23
News 0.77 0.71 0.74 0.71 24
Search engine 0.94 0.75 0.83 0.75 20
Average/Total 0.76 0.73 0.74 0.73 67

27. 27Μάρτιος 17
Εφαρμογή του μοντέλου αξιολόγησης
 6 ιστοσελίδες για κάθε θεματική κατηγορία
Class Precision Recall F1-Score Accuracy
Search engine 0.8 0.67 0.73 0.67
Layer E-shopping News Search engine
0 0.6 0.8 0.7
7 0.9 0.6 0.9
9 0.8 0.8 1
10 1 1 1
12 1 0.8 0.6
Class Precision Recall F1-Score Accuracy
Search engine 0.83 0.83 0.83 0.83
 Εισαγωγή τιμών
βάρους
Αποτέλεσμα χωρίς
βάρη

28. 28Μάρτιος 17
Συμπεράσματα – Μελλοντική εργασία
 Επιτυχής μοντελοποίηση της αισθητικής
 Συλλογή απαραίτητων δεδομένων
 Αυτοματοποιημένη αξιολόγηση αισθητικής
 Γενικά πρότυπα σχεδίασης
 Διαφοροποίηση προτύπων σχεδίασης με βάση το θεματικό περιεχόμενο
 Δυνατότητα «ανάγνωσης» περισσότερων ιστοσελίδων
 Βελτίωση μαθηματικών εκφράσεων των μετρικών
 Προσθήκη περισσότερων μετρικών
 Προσθήκη περισσότερων θεματικών κατηγοριών
 Μεγαλύτερο σύνολων δεδομένων
Βελτιώσεις

29. 29Μάρτιος 17
Ευχαριστίες
Θα ήθελα να ευχαριστήσω τους επιβλέποντες της
διπλωματικής μου εργασίας, κ. Ανδρέα Συμεωνίδη
και κ. Μιχαήλ Παπαμιχαήλ για τη βοήθεια και την
καθοδήγηση που μου προσέφεραν

30. 30
Ευχαριστώ για την
προσοχή σας!
Ερωτήσεις;
Μάρτιος 17

31. 31
News Global Rank Category Rank
Nytimes.com 92 2
Foxnews.com 236 10
Wsj.com 450 17
Reuters.com 518 18
Latimes.com 771 24
E-Shops
Amazon.com 8 1
Ebay.com 31 2
Walmart.com 120 5
Etsy.com 188 8
Newegg.com 549 18
Search Engines
Google.com 1 1
Search.yahoo.com 5 2
Uk.ask.com 75 4
Duckduckgo.com 542 5
Wolframalpha.com 2359 6
Dataset
Μάρτιος 17
Παράγοντες κατάταξης των
ιστοσελίδων στο Alexa.com
(για το τελευταίο 3μηνο):
 Μέσος αριθμός ημερήσιων
επισκεπτών
 Αριθμός προβολών
(pageviews)

32. 32
Παράδειγμα «κακού» επιπέδου
Μάρτιος 17
Kmeans –
επίπεδο 2

33. 33Μάρτιος 17
Σύγκριση επιπέδων

34. 34Μάρτιος 17
Εφαρμογή του μοντέλου αξιολόγησης
 6 ιστοσελίδες για κάθε θεματική κατηγορία
Class Precision Recall F1-Score Accuracy
News 0.5 0.5 0.5 0.5
Layer E-shopping News Search engine
0 0.6 0.8 0.7
7 0.9 0.6 0.9
9 0.8 0.8 1
10 1 1 1
12 1 0.8 0.6
Class Precision Recall F1-Score Accuracy
News 0.6 0.5 0.55 0.5
 Εισαγωγή τιμών
βάρους
Αποτέλεσμα χωρίς
βάρη

35. 35Μάρτιος 17
Εφαρμογή του μοντέλου αξιολόγησης
 6 ιστοσελίδες για κάθε θεματική κατηγορία
Class Precision Recall F1-Score Accuracy
E-shopping 0.43 0.5 0.46 0.5
Layer E-shopping News Search engine
0 0.6 0.8 0.7
7 0.9 0.6 0.9
9 0.8 0.8 1
10 1 1 1
12 1 0.8 0.6
Class Precision Recall F1-Score Accuracy
E-shopping 0.43 0.5 0.46 0.5
 Εισαγωγή τιμών
βάρους
Αποτέλεσμα χωρίς
βάρη