Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

More Related Content

More from ISSEL

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

  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  Εισαγωγή τιμών βάρους Αποτέλεσμα χωρίς βάρη

Editor's Notes

  • Η εύρεση κυρίαρχων προτύπων βασίζεται στον τρόπο με τον οποίο η έννοια της άρτιας αισθητικής γίνεται αντιληπτή από τους τελικούς χρήστες (user - perceived aesthetics), γεγονός που αποτυπώνεται στη δημοφιλία

×