Σχεδίαση και ανάπτυξη συστήματος αξιολόγησης της αισθητικής διαδικτυακών εφαρμογών μέσω ανάλυσης
της δομής
ΑΡΙΣΤΟΤΕΛΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΘΕΣΣΑΛΟΝΙΚΗΣΤΜΗΜΑ ΗΛΕΚΤΡΟΛΟΓΩΝ ΜΗΧΑΝΙΚΩΝ & ΜΗΧΑΝΙΚΩΝ
ΥΠΟΛΟΓΙΣΤΩΝΕΡΓΑΣΤΗΡΙΟ ΕΥΦΥΩΝ ΣΥΣΤΗΜΑΤΩΝ ΚΑΙ ΤΕΧΝΟΛΟΓΙΑΣ ΛΟΓΙΣΜΙΚΟΥ
Συσούρκα ΣοφίαΑΕΜ 7779
Επιβλέποντες:Επίκουρος Καθηγητής κ. Συμεωνίδης ΑνδρέαςΥποψήφιος Διδάκτωρ κ. Παπαμιχαήλ Μιχαήλ
03/05/2023
Περιεχόμενα
Εισαγωγή Σκοπός της διπλωματικής Γνώσεις που αποκτήθηκαν Μεθοδολογία Πειράματα – Αποτελέσματα Συμπεράσματα – Μελλοντική εργασία
23 Μαΐου 2023
Πάνω από 1 δισεκατομμύριο ιστοσελίδες σήμερα Ποιος ο βέλτιστος τρόπος σχεδίασης; Υπάρχουν καθιερωμένα πρότυπα που εξασφαλίζουν
επιτυχημένη σχεδίαση;
Εισαγωγή
Οι χρήστες αξιολογούν μία ιστοσελίδα κυρίως με βάση τον αισθητικό σχεδιασμό της γραφικής διεπαφής
Υλοποίηση συστήματος αξιολόγησης του αισθητικού σχεδιασμού
3 Μαΐου 2023 3
4
Σκοπός της διπλωματικής
Αισθητική όπως γίνεται αντιληπτή από τον χρήστη Ποσοτικοποίηση της αισθητικής μέσω μετρικών στατικής
ανάλυσης
Εύρεση κυρίαρχων προτύπων σχεδίασης με αναφορά στην αντίληψη του τελικού χρήστη
Εύρεση προτύπων σχεδίασης με βάση το θεματικό περιεχόμενο
Εκπαίδευση μοντέλων ώστε να αναγνωρίζουν τα πρότυπα σχεδίασης
5
Σχεδιασμός και ανάπτυξη συστήματος αξιολόγησης του αισθητικού σχεδιασμού των ιστοσελίδων
Συλλογή δεδομένων από ιστοσελίδες Μοντελοποίηση αισθητικής με χρήση μετρικών Ανάλυση δεδομένων Κατασκευή μοντέλου αξιολόγησης με βάση το θεματικό
περιεχόμενο των ιστοσελίδων
Γνώσεις που αποκτήθηκαν
3 Μαΐου 2023
6
• Data Collector
scraped data
• Metric Calculator
metrics• Data
Analyzer
processed metrics
• Webpage UI Evaluator
evaluation report
Μεθοδολογία - Το σύστημα που υλοποιήθηκε
Επιλογή του dataset
Συλλογή δεδομένων
Υπολογισμός μετρικών
αισθητικής
Ανάλυση τιμών
μετρικών
Κατασκευή μοντέλου
πρόβλεψης
3 Μαΐου 2023
7
Data Collector
•Εισαγωγή των urls των ιστοσελίδων του dataset
•Συλλογή δεδομένων
•Αποθήκευση αποτελεσμάτων
Browser navigation scripting & testing utility
3 Μαΐου 2023
3 θεματικές κατηγορίες (news, e-shopping, search engines)
25 δημοφιλείς ιστοσελίδες για κάθε κατηγορία
8
Data Collector
Συλλογή δεδομένων ανά επίπεδο βάθους του HTML δέντρου
Web scraping
Δεδομένα συλλέγονται για κάθε «αντικείμενο» του δέντρου, δηλαδή για κάθε html tag
Ενδιαφερόμαστε για ορατά αντικείμενα
3 Μαΐου 2023
9
Data Collector
Παραγόμενα δεδομένα: Κέντρα αντικειμένων Σημεία στοίχισης Διαχωρισμός οθόνης σε τμήματα (top, bottom, left, right) Διαχωρισμός οθόνης σε τεταρτημόρια (upper-left, upper-right, lower-left, lower-right)
3 Μαΐου 2023
Άμεσα συλλεγόμενα δεδομένα: Διαστάσεις πλαισίου (frame) και διάταξης (layout) Συντεταγμένες αντικειμένων (πλάτος, ύψος, εμβαδόν)
Απόρριψη αντικειμένων: εκτός πλαισίου (frame) με tags όπως br, meta, script, noscript μη ορατά ή με μηδενικές διαστάσεις
10
Data Collector
3 Μαΐου 2023
JSON format
11
Metric Calculator
•Ανάγνωση αποτελεσμάτων του Data Collector
•Υπολογισμός μετρικών αισθητικής
•Αποθήκευση αποτελεσμάτων
3 Μαΐου 2023
12
Metric Calculator
Density Equilibrium Balance Regularity Homogeneity Simplicity Alignment Grouping Proportion Cohesion Symmetry Rhythm
Τιμές στο διάστημα [0,1]
Ποσοστό κάλυψης της οθόνης από αντικείμενα
Λογική τοποθέτηση των αντικειμένων, χωρίς περίπλοκες διατάξεις
3 Μαΐου 2023
13
Metric Calculator
3 Μαΐου 2023
14
Data Analyzer
•Ανάγνωση αποτελεσμάτων του Metric Calculator
•Χειροκίνητη προ-επεξεργασία συνόλου δεδομένων
•Ανάλυση του συνόλου δεδομένων
•Αποθήκευση αποτελεσμάτων
3 Μαΐου 2023
Διαγραφή μετρικής Equilibrium Επεξεργασία τιμών Διαγραφή μη χρήσιμων επιπέδων (όμοιες / παρόμοιες τιμές) Εξισορρόπηση αριθμού επιπέδων (23 επίπεδα)
Συσχέτιση μετρικών (συνολικό dataset, μεταξύ επιπέδων, μεταξύ θεματικών κατηγοριών
Εύρος τιμών μετρικών
153 Μαΐου 2023
Data Analyzer
16
Webpage UI Evaluator
•Ανάγνωση αποτελεσμάτων του Data Analyzer
•Αυτοματοποιημένη προ-επεξεργασία συνόλου δεδομένων
•Επιλογή κατάλληλων επιπέδων μέσω τεχνικών ομαδοποίησης
•Κατασκευή μοντέλου πρόβλεψης για κάθε επίπεδο μέσω τεχνικών ταξινόμησης
•Κατασκευή συνδυαστικού μοντέλου αξιολόγησης
3 Μαΐου 2023
173 Μαΐου 2023
Επιλογή κατάλληλων επιπέδων
Αλγόριθμοι Ομαδοποίησης: Kmeans Agglomerative Hierarchical DBSCAN
Καθορισμός κέντρων ομάδων ώστε να ελαχιστοποιείται το κριτήριο
Εμφωλευμένες ομάδες με bottom-up προσέγγισηΔιακρίνει ζώνες υψηλής και
χαμηλής πυκνότητας
Αυτοματοποιημένη προ-επεξεργασία: Συμπλήρωση ελλιπών τιμών Αφαίρεση εξωκείμενων τιμών ανά επίπεδο (10% των δειγμάτων) Κλιμακοποίηση και κανονικοποίηση Τυχαία αναδιάταξη των δεδομένων
Στόχος Βέλτιστος διαχωρισμός ιστοσελίδων διαφορετικών θεματικών κατηγοριών
183 Μαΐου 2023
Κατασκευή μοντέλου πρόβλεψης για κάθε επίπεδο
Αλγόριθμοι Ταξινόμησης: Decision Tree K Nearest Neighbors
Διαχωρισμός του συνόλου δεδομένων εκπαίδευσης σε υποσύνολα ανάλογα με την τιμή των γνωρισμάτων
Χρήση των συνόλων δεδομένων των επιπέδων που επιλέχθηκαν μέσω της ομαδοποίησης
Ταξινόμηση με βάση την πλειοψηφία
193 Μαΐου 2023
Κατασκευή συνδυαστικού μοντέλου αξιολόγησης
Επιβεβαίωση θεματικής κατηγορίας ποιοτικός σχεδιασμόςΛανθασμένη πρόβλεψη ο σχεδιασμός επιδέχεται βελτιώσεις
Διαδικασία αξιολόγησης: Δημιουργία συνόλου δεδομένων Υπολογισμός πιθανοτήτων κατάταξης στις 3 θεματικές κατηγορίες Συνυπολογισμός τιμών βάρους Εύρεση μέσης πιθανότητας κατάταξης σε κάθε κατηγορία Κατάταξη στην κατηγορία με τη μέγιστη πιθανότητα
Σύγκριση με τα πρότυπα σχεδιασμού δημοφιλών ιστοσελίδων!
203 Μαΐου 2023
Πειράματα – ΑποτελέσματαΑνάλυση δεδομένων
Συσχέτιση μετρικών συνολικού dataset
Rhythm – Symmetry Alignment – Regularity
213 Μαΐου 2023
Ανάλυση δεδομένων
Κύριο εύρος τιμών
Alignment – Layer 6
0.65 – 0.8
Cohesion – Layer 1
0.55 – 0.7
Simplicity – Layer 8
Έως 0.1
Συνήθεις τιμές = πρότυπο σχεδίασης
223 Μαΐου 2023
Πειράματα εύρεσης κατάλληλωνεπιπέδων
Παράμετρος
Τιμήπαραμέτρ
ουn_clusters 3
init kmeans++
max_iter 300
n_init 10 Βέλτιστα επίπεδα: 0, 7, 9, 10, 12
Kmeans Agglomerative Hierarchical
DBSCAN X
Παράμετρος
Τιμήπαραμέτρ
ουn_clusters 3
linkageWard,
Average, Complete
233 Μαΐου 2023
Kmeans – επίπεδο 10
243 Μαΐου 2023
Agglomerative Hierarchical – επίπεδο 10 (complete linkage)
253 Μαΐου 2023
Πειράματα κατασκευής μοντέλων πρόβλεψης
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 21News 0.87 0.87 0.87 0.87 23Search engine 0.95 0.86 0.9 0.86 22Average/Total 0.85 0.85 0.85 0.85 66
Παράμετρος
Τιμήπαραμέτρ
ουk 4
algorithm brutemetric manhattan
KNN - LAYER 10
Class Precision Recall F1-Score Accuracy Αριθμός δειγμάτων
E-shopping 0.77 0.81 0.79 0.81 21News 0.91 0.87 0.89 0.87 23Search engine 0.86 0.86 0.86 0.86 22Average/ Total 0.85 0.85 0.85 0.85 66
263 Μαΐου 2023
Πειράματα κατασκευής μοντέλων πρόβλεψης
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 23News 0.86 0.75 0.8 0.75 24Search engine 0.94 0.8 0.86 0.8 20Average/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 23News 0.77 0.71 0.74 0.71 24Search engine 0.94 0.75 0.83 0.75 20Average/Total 0.76 0.73 0.74 0.73 67
273 Μαΐου 2023
Εφαρμογή του μοντέλου αξιολόγησης
6 ιστοσελίδες για κάθε θεματική κατηγορία
Class Precision Recall F1-Score AccuracySearch engine 0.8 0.67 0.73 0.67
Layer E-shopping News Search engine0 0.6 0.8 0.77 0.9 0.6 0.99 0.8 0.8 110 1 1 112 1 0.8 0.6
Class Precision Recall F1-Score AccuracySearch engine 0.83 0.83 0.83 0.83
Εισαγωγή τιμών βάρους
Αποτέλεσμα χωρίς βάρη
283 Μαΐου 2023
Συμπεράσματα – Μελλοντική εργασία
Επιτυχής μοντελοποίηση της αισθητικής Συλλογή απαραίτητων δεδομένων Αυτοματοποιημένη αξιολόγηση αισθητικής Γενικά πρότυπα σχεδίασης Διαφοροποίηση προτύπων σχεδίασης με βάση το θεματικό περιεχόμενο
Δυνατότητα «ανάγνωσης» περισσότερων ιστοσελίδων Βελτίωση μαθηματικών εκφράσεων των μετρικών Προσθήκη περισσότερων μετρικών Προσθήκη περισσότερων θεματικών κατηγοριών Μεγαλύτερο σύνολων δεδομένων
Βελτιώσεις
293 Μαΐου 2023
Ευχαριστίες
Θα ήθελα να ευχαριστήσω τους επιβλέποντες της διπλωματικής μου εργασίας, κ. Ανδρέα Συμεωνίδη και κ. Μιχαήλ Παπαμιχαήλ για τη βοήθεια και την καθοδήγηση που μου προσέφεραν
30
Ευχαριστώ για την προσοχή σας!
Ερωτήσεις;
3 Μαΐου 2023
31
News Global Rank Category RankNytimes.com 92 2Foxnews.com 236 10Wsj.com 450 17Reuters.com 518 18Latimes.com 771 24
E-ShopsAmazon.com 8 1Ebay.com 31 2Walmart.com 120 5Etsy.com 188 8Newegg.com 549 18
Search EnginesGoogle.com 1 1Search.yahoo.com 5 2Uk.ask.com 75 4Duckduckgo.com 542 5Wolframalpha.com 2359 6
Dataset
3 Μαΐου 2023
Παράγοντες κατάταξης των ιστοσελίδων στο Alexa.com (για το τελευταίο 3μηνο): Μέσος αριθμός ημερήσιων επισκεπτών Αριθμός προβολών (pageviews)
32
Παράδειγμα «κακού» επιπέδου
3 Μαΐου 2023
Kmeans – επίπεδο 2
333 Μαΐου 2023
Σύγκριση επιπέδωνεπ
ίπεδ
ο 10
επίπ
εδο 2
343 Μαΐου 2023
Εφαρμογή του μοντέλου αξιολόγησης
6 ιστοσελίδες για κάθε θεματική κατηγορία
Class Precision Recall F1-Score AccuracyNews 0.5 0.5 0.5 0.5
Layer E-shopping News Search engine0 0.6 0.8 0.77 0.9 0.6 0.99 0.8 0.8 110 1 1 112 1 0.8 0.6
Class Precision Recall F1-Score AccuracyNews 0.6 0.5 0.55 0.5
Εισαγωγή τιμών βάρους
Αποτέλεσμα χωρίς βάρη
353 Μαΐου 2023
Εφαρμογή του μοντέλου αξιολόγησης
6 ιστοσελίδες για κάθε θεματική κατηγορία
Class Precision Recall F1-Score AccuracyE-shopping 0.43 0.5 0.46 0.5
Layer E-shopping News Search engine0 0.6 0.8 0.77 0.9 0.6 0.99 0.8 0.8 110 1 1 112 1 0.8 0.6
Class Precision Recall F1-Score AccuracyE-shopping 0.43 0.5 0.46 0.5
Εισαγωγή τιμών βάρους
Αποτέλεσμα χωρίς βάρη