Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Σχεδίαση και ανάπτυξη συστήματος αξιολόγησης της
αισθητικής διαδικτυακών εφαρμογών μέσω ανάλυσης
της δομής
ΑΡΙΣΤΟΤΕΛΕΙΟ ΠΑ...
Περιεχόμενα
 Εισαγωγή
 Σκοπός της διπλωματικής
 Γνώσεις που αποκτήθηκαν
 Μεθοδολογία
 Πειράματα – Αποτελέσματα
 Συμπ...
 Πάνω από 1 δισεκατομμύριο ιστοσελίδες σήμερα
 Ποιος ο βέλτιστος τρόπος σχεδίασης;
 Υπάρχουν καθιερωμένα πρότυπα που εξ...
4
Σκοπός της διπλωματικής
 Αισθητική όπως γίνεται αντιληπτή από τον χρήστη
 Ποσοτικοποίηση της αισθητικής μέσω μετρικών ...
5
 Σχεδιασμός και ανάπτυξη συστήματος αξιολόγησης του
αισθητικού σχεδιασμού των ιστοσελίδων
 Συλλογή δεδομένων από ιστοσ...
6
• Data
Collector
scraped data
• Metric
Calculator
metrics
• Data
Analyzer
processed
metrics
• Webpage
UI
Evaluator
evalu...
7
Data Collector
• Εισαγωγή των urls των ιστοσελίδων του dataset
• Συλλογή δεδομένων
• Αποθήκευση αποτελεσμάτων
Browser na...
8
Data Collector
 Συλλογή δεδομένων
ανά επίπεδο βάθους
του HTML δέντρου
Web scraping
Δεδομένα
συλλέγονται για κάθε
«αντ...
9
Data Collector
Παραγόμενα δεδομένα:
 Κέντρα αντικειμένων
 Σημεία στοίχισης
 Διαχωρισμός οθόνης σε τμήματα (top, botto...
10
Data Collector
Μάρτιος 17
JSON format
11
Metric Calculator
• Ανάγνωση αποτελεσμάτων του Data Collector
• Υπολογισμός μετρικών αισθητικής
• Αποθήκευση αποτελεσμά...
12
Metric Calculator
 Density
 Equilibrium
 Balance
 Regularity
 Homogeneity
 Simplicity
 Alignment
 Grouping
 Pr...
13
Metric Calculator
Μάρτιος 17
14
Data Analyzer
• Ανάγνωση αποτελεσμάτων του Metric Calculator
• Χειροκίνητη προ-επεξεργασία συνόλου δεδομένων
• Ανάλυση ...
15Μάρτιος 17
Data Analyzer
16
Webpage UI Evaluator
• Ανάγνωση αποτελεσμάτων του Data Analyzer
• Αυτοματοποιημένη προ-επεξεργασία συνόλου δεδομένων
• ...
17Μάρτιος 17
Επιλογή κατάλληλων επιπέδων
Αλγόριθμοι Ομαδοποίησης:
 Kmeans
 Agglomerative Hierarchical
 DBSCAN
Καθορισμό...
18Μάρτιος 17
Κατασκευή μοντέλου πρόβλεψης
για κάθε επίπεδο
Αλγόριθμοι Ταξινόμησης:
 Decision Tree
 K Nearest Neighbors
Δ...
19Μάρτιος 17
Κατασκευή συνδυαστικού μοντέλου
αξιολόγησης
Επιβεβαίωση θεματικής κατηγορίας ποιοτικός σχεδιασμός
Λανθασμένη ...
20Μάρτιος 17
Πειράματα – Αποτελέσματα
Ανάλυση δεδομένων
 Συσχέτιση μετρικών
συνολικού dataset
 Rhythm – Symmetry
 Align...
21Μάρτιος 17
Ανάλυση δεδομένων
Κύριο εύρος τιμών
Alignment –
Layer 6
0.65 – 0.8
Cohesion –
Layer 1
0.55 – 0.7
Simplicity –...
22Μάρτιος 17
Πειράματα εύρεσης κατάλληλων
επιπέδων
Παράμετρος
Τιμή
παραμέτρου
n_clusters 3
init kmeans++
max_iter 300
n_in...
23Μάρτιος 17
 Kmeans – επίπεδο 10
24Μάρτιος 17
 Agglomerative Hierarchical – επίπεδο 10
(complete linkage)
25Μάρτιος 17
Πειράματα κατασκευής μοντέλων
πρόβλεψης
10-fold cross-validation
Επίπεδο 10
Παράμετρος
Τιμή
παραμέτρου
criter...
26Μάρτιος 17
Πειράματα κατασκευής μοντέλων
πρόβλεψης
10-fold cross-validation
Επίπεδο 7
Παράμετρος
Τιμή
παραμέτρου
criteri...
27Μάρτιος 17
Εφαρμογή του μοντέλου αξιολόγησης
 6 ιστοσελίδες για κάθε θεματική κατηγορία
Class Precision Recall F1-Score...
28Μάρτιος 17
Συμπεράσματα – Μελλοντική εργασία
 Επιτυχής μοντελοποίηση της αισθητικής
 Συλλογή απαραίτητων δεδομένων
 Α...
29Μάρτιος 17
Ευχαριστίες
Θα ήθελα να ευχαριστήσω τους επιβλέποντες της
διπλωματικής μου εργασίας, κ. Ανδρέα Συμεωνίδη
και ...
30
Ευχαριστώ για την
προσοχή σας!
Ερωτήσεις;
Μάρτιος 17
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...
32
Παράδειγμα «κακού» επιπέδου
Μάρτιος 17
Kmeans –
επίπεδο 2
33Μάρτιος 17
Σύγκριση επιπέδων
34Μάρτιος 17
Εφαρμογή του μοντέλου αξιολόγησης
 6 ιστοσελίδες για κάθε θεματική κατηγορία
Class Precision Recall F1-Score...
35Μάρτιος 17
Εφαρμογή του μοντέλου αξιολόγησης
 6 ιστοσελίδες για κάθε θεματική κατηγορία
Class Precision Recall F1-Score...
Upcoming SlideShare
Loading in …5
×

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

212 views

Published on

Sysourka Sofia

Published in: Education
  • Be the first to comment

  • Be the first to like this

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

  1. 1. Σχεδίαση και ανάπτυξη συστήματος αξιολόγησης της αισθητικής διαδικτυακών εφαρμογών μέσω ανάλυσης της δομής ΑΡΙΣΤΟΤΕΛΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΘΕΣΣΑΛΟΝΙΚΗΣ ΤΜΗΜΑ ΗΛΕΚΤΡΟΛΟΓΩΝ ΜΗΧΑΝΙΚΩΝ & ΜΗΧΑΝΙΚΩΝ ΥΠΟΛΟΓΙΣΤΩΝ ΕΡΓΑΣΤΗΡΙΟ ΕΥΦΥΩΝ ΣΥΣΤΗΜΑΤΩΝ ΚΑΙ ΤΕΧΝΟΛΟΓΙΑΣ ΛΟΓΙΣΜΙΚΟΥ Συσούρκα Σοφία ΑΕΜ 7779 Επιβλέποντες: Επίκουρος Καθηγητής κ. Συμεωνίδης Ανδρέας Υποψήφιος Διδάκτωρ κ. Παπαμιχαήλ Μιχαήλ 22/3/2017
  2. 2. Περιεχόμενα  Εισαγωγή  Σκοπός της διπλωματικής  Γνώσεις που αποκτήθηκαν  Μεθοδολογία  Πειράματα – Αποτελέσματα  Συμπεράσματα – Μελλοντική εργασία 2Μάρτιος 17
  3. 3.  Πάνω από 1 δισεκατομμύριο ιστοσελίδες σήμερα  Ποιος ο βέλτιστος τρόπος σχεδίασης;  Υπάρχουν καθιερωμένα πρότυπα που εξασφαλίζουν επιτυχημένη σχεδίαση; Εισαγωγή  Οι χρήστες αξιολογούν μία ιστοσελίδα κυρίως με βάση τον αισθητικό σχεδιασμό της γραφικής διεπαφής Υλοποίηση συστήματος αξιολόγησης του αισθητικού σχεδιασμού Μάρτιος 17 3
  4. 4. 4 Σκοπός της διπλωματικής  Αισθητική όπως γίνεται αντιληπτή από τον χρήστη  Ποσοτικοποίηση της αισθητικής μέσω μετρικών στατικής ανάλυσης  Εύρεση κυρίαρχων προτύπων σχεδίασης με αναφορά στην αντίληψη του τελικού χρήστη  Εύρεση προτύπων σχεδίασης με βάση το θεματικό περιεχόμενο  Εκπαίδευση μοντέλων ώστε να αναγνωρίζουν τα πρότυπα σχεδίασης
  5. 5. 5  Σχεδιασμός και ανάπτυξη συστήματος αξιολόγησης του αισθητικού σχεδιασμού των ιστοσελίδων  Συλλογή δεδομένων από ιστοσελίδες  Μοντελοποίηση αισθητικής με χρήση μετρικών  Ανάλυση δεδομένων  Κατασκευή μοντέλου αξιολόγησης με βάση το θεματικό περιεχόμενο των ιστοσελίδων Γνώσεις που αποκτήθηκαν Μάρτιος 17
  6. 6. 6 • Data Collector scraped data • Metric Calculator metrics • Data Analyzer processed metrics • Webpage UI Evaluator evaluation report Μεθοδολογία - Το σύστημα που υλοποιήθηκε Επιλογή του dataset Συλλογή δεδομένων Υπολογισμός μετρικών αισθητικής Ανάλυση τιμών μετρικών Κατασκευή μοντέλου πρόβλεψης Μάρτιος 17
  7. 7. 7 Data Collector • Εισαγωγή των urls των ιστοσελίδων του dataset • Συλλογή δεδομένων • Αποθήκευση αποτελεσμάτων Browser navigation scripting & testing utility Μάρτιος 17  3 θεματικές κατηγορίες (news, e-shopping, search engines)  25 δημοφιλείς ιστοσελίδες για κάθε κατηγορία
  8. 8. 8 Data Collector  Συλλογή δεδομένων ανά επίπεδο βάθους του HTML δέντρου Web scraping Δεδομένα συλλέγονται για κάθε «αντικείμενο» του δέντρου, δηλαδή για κάθε html tag Ενδιαφερόμαστε για ορατά αντικείμενα Μάρτιος 17
  9. 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. 10 Data Collector Μάρτιος 17 JSON format
  11. 11. 11 Metric Calculator • Ανάγνωση αποτελεσμάτων του Data Collector • Υπολογισμός μετρικών αισθητικής • Αποθήκευση αποτελεσμάτων Μάρτιος 17
  12. 12. 12 Metric Calculator  Density  Equilibrium  Balance  Regularity  Homogeneity  Simplicity  Alignment  Grouping  Proportion  Cohesion  Symmetry  Rhythm Τιμές στο διάστημα [0,1] Ποσοστό κάλυψης της οθόνης από αντικείμενα Λογική τοποθέτηση των αντικειμένων, χωρίς περίπλοκες διατάξεις Μάρτιος 17
  13. 13. 13 Metric Calculator Μάρτιος 17
  14. 14. 14 Data Analyzer • Ανάγνωση αποτελεσμάτων του Metric Calculator • Χειροκίνητη προ-επεξεργασία συνόλου δεδομένων • Ανάλυση του συνόλου δεδομένων • Αποθήκευση αποτελεσμάτων Μάρτιος 17  Διαγραφή μετρικής Equilibrium  Επεξεργασία τιμών  Διαγραφή μη χρήσιμων επιπέδων (όμοιες / παρόμοιες τιμές)  Εξισορρόπηση αριθμού επιπέδων (23 επίπεδα)  Συσχέτιση μετρικών (συνολικό dataset, μεταξύ επιπέδων, μεταξύ θεματικών κατηγοριών  Εύρος τιμών μετρικών
  15. 15. 15Μάρτιος 17 Data Analyzer
  16. 16. 16 Webpage UI Evaluator • Ανάγνωση αποτελεσμάτων του Data Analyzer • Αυτοματοποιημένη προ-επεξεργασία συνόλου δεδομένων • Επιλογή κατάλληλων επιπέδων μέσω τεχνικών ομαδοποίησης • Κατασκευή μοντέλου πρόβλεψης για κάθε επίπεδο μέσω τεχνικών ταξινόμησης • Κατασκευή συνδυαστικού μοντέλου αξιολόγησης Μάρτιος 17
  17. 17. 17Μάρτιος 17 Επιλογή κατάλληλων επιπέδων Αλγόριθμοι Ομαδοποίησης:  Kmeans  Agglomerative Hierarchical  DBSCAN Καθορισμός κέντρων ομάδων ώστε να ελαχιστοποιείται το κριτήριο Εμφωλευμένες ομάδες με bottom-up προσέγγισηΔιακρίνει ζώνες υψηλής και χαμηλής πυκνότητας Αυτοματοποιημένη προ-επεξεργασία:  Συμπλήρωση ελλιπών τιμών  Αφαίρεση εξωκείμενων τιμών ανά επίπεδο (10% των δειγμάτων)  Κλιμακοποίηση και κανονικοποίηση  Τυχαία αναδιάταξη των δεδομένων Στόχος Βέλτιστος διαχωρισμός ιστοσελίδων διαφορετικών θεματικών κατηγοριών
  18. 18. 18Μάρτιος 17 Κατασκευή μοντέλου πρόβλεψης για κάθε επίπεδο Αλγόριθμοι Ταξινόμησης:  Decision Tree  K Nearest Neighbors Διαχωρισμός του συνόλου δεδομένων εκπαίδευσης σε υποσύνολα ανάλογα με την τιμή των γνωρισμάτων  Χρήση των συνόλων δεδομένων των επιπέδων που επιλέχθηκαν μέσω της ομαδοποίησης Ταξινόμηση με βάση την πλειοψηφία
  19. 19. 19Μάρτιος 17 Κατασκευή συνδυαστικού μοντέλου αξιολόγησης Επιβεβαίωση θεματικής κατηγορίας ποιοτικός σχεδιασμός Λανθασμένη πρόβλεψη ο σχεδιασμός επιδέχεται βελτιώσεις Διαδικασία αξιολόγησης:  Δημιουργία συνόλου δεδομένων  Υπολογισμός πιθανοτήτων κατάταξης στις 3 θεματικές κατηγορίες  Συνυπολογισμός τιμών βάρους  Εύρεση μέσης πιθανότητας κατάταξης σε κάθε κατηγορία  Κατάταξη στην κατηγορία με τη μέγιστη πιθανότητα Σύγκριση με τα πρότυπα σχεδιασμού δημοφιλών ιστοσελίδων!
  20. 20. 20Μάρτιος 17 Πειράματα – Αποτελέσματα Ανάλυση δεδομένων  Συσχέτιση μετρικών συνολικού dataset  Rhythm – Symmetry  Alignment – Regularity
  21. 21. 21Μάρτιος 17 Ανάλυση δεδομένων Κύριο εύρος τιμών Alignment – Layer 6 0.65 – 0.8 Cohesion – Layer 1 0.55 – 0.7 Simplicity – Layer 8 Έως 0.1  Συνήθεις τιμές = πρότυπο σχεδίασης
  22. 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. 23Μάρτιος 17  Kmeans – επίπεδο 10
  24. 24. 24Μάρτιος 17  Agglomerative Hierarchical – επίπεδο 10 (complete linkage)
  25. 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. 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. 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. 28Μάρτιος 17 Συμπεράσματα – Μελλοντική εργασία  Επιτυχής μοντελοποίηση της αισθητικής  Συλλογή απαραίτητων δεδομένων  Αυτοματοποιημένη αξιολόγηση αισθητικής  Γενικά πρότυπα σχεδίασης  Διαφοροποίηση προτύπων σχεδίασης με βάση το θεματικό περιεχόμενο  Δυνατότητα «ανάγνωσης» περισσότερων ιστοσελίδων  Βελτίωση μαθηματικών εκφράσεων των μετρικών  Προσθήκη περισσότερων μετρικών  Προσθήκη περισσότερων θεματικών κατηγοριών  Μεγαλύτερο σύνολων δεδομένων Βελτιώσεις
  29. 29. 29Μάρτιος 17 Ευχαριστίες Θα ήθελα να ευχαριστήσω τους επιβλέποντες της διπλωματικής μου εργασίας, κ. Ανδρέα Συμεωνίδη και κ. Μιχαήλ Παπαμιχαήλ για τη βοήθεια και την καθοδήγηση που μου προσέφεραν
  30. 30. 30 Ευχαριστώ για την προσοχή σας! Ερωτήσεις; Μάρτιος 17
  31. 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. 32 Παράδειγμα «κακού» επιπέδου Μάρτιος 17 Kmeans – επίπεδο 2
  33. 33. 33Μάρτιος 17 Σύγκριση επιπέδων
  34. 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. 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  Εισαγωγή τιμών βάρους Αποτέλεσμα χωρίς βάρη

×