Σχεδίαση και ανάπτυξη συστήματος αξιολόγησης της αισθητικής διαδικτυακών εφαρμογών μέσω ανάλυσης

της δομής

ΑΡΙΣΤΟΤΕΛΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΘΕΣΣΑΛΟΝΙΚΗΣΤΜΗΜΑ ΗΛΕΚΤΡΟΛΟΓΩΝ ΜΗΧΑΝΙΚΩΝ & ΜΗΧΑΝΙΚΩΝ

ΥΠΟΛΟΓΙΣΤΩΝΕΡΓΑΣΤΗΡΙΟ ΕΥΦΥΩΝ ΣΥΣΤΗΜΑΤΩΝ ΚΑΙ ΤΕΧΝΟΛΟΓΙΑΣ ΛΟΓΙΣΜΙΚΟΥ

Συσούρκα ΣοφίαΑΕΜ 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

Εισαγωγή τιμών βάρους

Αποτέλεσμα χωρίς βάρη