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.

Bagia Rousopoulou

155 views

Published on

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

Published in: Education
  • Be the first to comment

  • Be the first to like this

Bagia Rousopoulou

  1. 1. Αυτοματοποιημένη αξιολόγηση της ευχρηστίας διαδικτυακών εφαρμογών μέσω της εύρεσης κυρίαρχων προτύπων σχεδίασης διεπαφών χρήστη Ρουσοπούλου Βάγια Υπο την επίβλεψη του επίκουρου καθηγητή κ. Συμεωνίδη Ανδρέα και του υποψήφιου διδάκτορα κ. Παπαμιχαήλ Μιχάλη Αριστοτέλειο Πανεπιστήμιο Θεσσαλονίκης Τμήμα Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Μάρτιος 2017
  2. 2. Περιεχόμενα 1. Εισαγωγή 2. Στόχος της Διπλωματικής 3. Σύστημα και Μεθοδολογία 4. Αποτελέσματα και Συμπεράσματα 5. Μελλοντικές Επεκτάσεις 2
  3. 3. 1. Εισαγωγή 2. Στόχος της Διπλωματικής 3. Σύστημα και Μεθοδολογία 4. Αποτελέσματα και Συμπεράσματα 5. Μελλοντικές Επεκτάσεις Περιεχόμενα 3
  4. 4. Κατάσταση Σήμερα  Αυξανόμενος αριθμός διαδικτυακών εφαρμογών  Μεγάλος αριθμός χρηστών του διαδικτύου 4 Πηγή: http://www.internetlivestats.com/
  5. 5. Το πρόβλημα Δημιουργείται ανάγκη  Αξιολόγησης ιστοσελίδων  Μοντελοποίησης χαρακτηριστικών διεπαφών  Βελτίωσης εμπειρίας χρηστών 5 Πώς ξεχωρίζει μια διαδικτυακή εφαρμογή ανάμεσα σε τόσες άλλες;
  6. 6. 1. Εισαγωγή 2. Στόχος της Διπλωματικής 3. Σύστημα και Μεθοδολογία 4. Αποτελέσματα και Συμπεράσματα 5. Μελλοντικές Επεκτάσεις Περιεχόμενα 6
  7. 7. Στόχος της Διπλωματικής 7 • Μοντελοποίηση ευχρηστίας και αισθητικής ιστοσελίδων, όπως γίνονται αντιληπτά από τους χρήστες User perceived usability and aesthetics • Αυτοματοποιημένη αξιολόγηση διεπαφών • Με τη χρήση μετρικών ποιότητας Automated user interface evaluation • Εξαγωγή προτύπων σχεδίασης • Για επαναχρησιμοποίηση σε μορφή κανόνων Rule based evaluation
  8. 8. Περιεχόμενα 1. Εισαγωγή 2. Στόχος της Διπλωματικής 3. Σύστημα και Μεθοδολογία 4. Αποτελέσματα και Συμπεράσματα 5. Μελλοντικές Επεκτάσεις 8
  9. 9. Μεθοδολογία Συλλογή Δημοφιλών Ιστοσελίδων Συγκέντρωση Μετρικών Εξαγωγή Προτύπων Σχεδίασης Εύρεση Επιμέρους Στοιχείων- Elements Ανάλυση Μετρικών 9
  10. 10. Συλλογή Δημοφιλών Ιστοσελίδων Δημοφιλείς ιστοσελίδες: • Προτίμηση απο τους χρήστες • Ποιοτικά χαρακτηριστικά Βασική Παραδοχή: Σελίδες που περιέχουν δεδομένα κατάταξης ιστοσελίδων 10 Συλλογή 100 δημοφιλών ιστοσελίδων
  11. 11. Επιμέρους Στοιχεία- Elements Button Image Menu List Header Footer Link Search Field Input Field Signin Form Signup Form 11
  12. 12. • Size Metrics – width, height, aspect-ratio • Appearance Metrics – background-color, border, padding, display • Content-style Metrics – font-size, font-weight, font-family, text-align, text-decoration, line-height • Position Metrics – margin Μετρικές Επιμέρους Στοιχείων 12
  13. 13. Αρχιτεκτονική Συστήματος 13
  14. 14. Υποσύστημα Trainer 14 Metric Retriever Metric Analyzer Rule Engine
  15. 15. Metric Retriever 15 lxml
  16. 16. Αναγνώριση Element 16  Αναπαράσταση HTML σε δενδρική δομή  Προσπέλαση δένδρου από πάνω προς τα κάτω  Αναζήτηση λέξης-κλειδί σε κάθε κόμβο  tag, class, id  Αποθήκευση στοιχείου και προγόνων
  17. 17. Πίνακας Αναγνώρισης Element 17
  18. 18. Εξαγωγή Μετρικών 18 CasperJS  Δημιουργία εικονικού browser  Εκτέλεση ερωτημάτων jQuery  Εισαγωγή αναγνωριστικών στοιχείων element (tag, class, id)  Αντιστοίχιση τιμών σε μετρικές
  19. 19. Ανάλυση Μετρικών 19 Προεπεξεργασία Δεδομένων  Επεξεργασία τιμών μετρικών  Δημιουργία ενός Dataset για κάθε τύπο Element Ομαδοποίηση (Clustering)  Αλγόριθμος διαχωρισμού K-means Εξαγωγή Προτύπων Σχεδίασης  Εύρεση ομάδων με το μεγαλύτερο πληθυσμό  Δημιουργία διαγράμματος κατάταξης των τιμών σε ομάδες  Έλεγχος διαγράμματος πυκνότητας  Εξαγωγή κυρίαρχου προτύπου
  20. 20. Rule Engine 20 input output Γενικά: Σύνολο κανόνων Αντικείμενα Έλεγχος Έξοδος Συγκεκριμένα: Σύνολο προτύπων σχεδίασης Στοιχεία ιστοσελίδας Έλεγχος Μηνύματα με ειδοποιήσεις
  21. 21. Υποσύστημα Evaluator 21 Metric Retriever Rule Engine Evaluation ResultsInput
  22. 22. Περιεχόμενα 1. Εισαγωγή 2. Στόχος της Διπλωματικής 3. Σύστημα και Μεθοδολογία 4. Αποτελέσματα και Συμπεράσματα 5. Μελλοντικές Επεκτάσεις 22
  23. 23. Type of Element Number of Instances Button 468 Image 254 Header 89 Footer 93 Input Field 196 Search Field 371 List 445 Menu 997 Link 1848 Signin Form 38 Signup Form 38 Σύνολο στοιχείων που αναγνωρίστηκαν 23
  24. 24. 24 Buttons: Size metrics Clusters Instances 0 10.66 % 1 0.85 % 2 0.21 % 3 8.10 % 4 0.43 % 5 79.74 % Design Pattern: 10%<width<60% height<20%
  25. 25. 25 Headers: font-size Clusters Instances 0 97.75 % 1 2.25 % Design Pattern: 9 < font-size < 24
  26. 26. 26 Σύνολο προτύπων σχεδίασης Element Number of extracted design patterns Buttons 13 Images 7 Links 8 Headers 10 Footers 10 Input Fields 10 Search Fields 10 Lists 11 Menus 11 Signin Forms 6 Signup Forms 6
  27. 27. 27 Μορφή προτύπων σχεδίασης Metric Image Pattern height Έως 40% του ύψους της ιστοσελίδας. width Έως 60% του πλάτους της ιστοσελίδας. margins 0px margins margin-left = margin-right margins margin-top = margin-bottom padding padding-left/right/top/bottom = 0px font-size Στο διάστημα (10,25).
  28. 28. 28 Παρουσίαση Rule Engine Evaluation Results: Webpage: http://getbootstrap.com/
  29. 29. Συμπεράσματα 29  Ο τρόπος με τον οποίο γίνεται αντιληπτή η ευχρηστία και η αισθητική από τους τελικούς χρήστες μοντελοποιείται.  Υπάρχουν διακριτά πρότυπα σχεδίασης διεπαφών, τα οποία χρησιμοποιούνται από γραφικές διεπαφές δημοφιλών διαδικτυακών εφαρμογών.  Το σύστημα παρέχει στοχευμένες παρατηρήσεις αναφορικά με τη σχεδίαση επιμέρους στοιχείων διεπαφών.  Το σύστημα αποτελεί βοηθητικό οδηγό για τη σχεδίαση διεπαφών διαδικτυακών εφαρμογών.
  30. 30. Περιεχόμενα 1. Εισαγωγή 2. Στόχος της Διπλωματικής 3. Σύστημα και Μεθοδολογία 4. Αποτελέσματα και Συμπεράσματα 5. Μελλοντικές Επεκτάσεις 30
  31. 31. Μελλοντικές Επεκτάσεις  Υλοποίηση συστήματος για mobile εκδόσεις ιστοσελίδων.  Χρήση κατηγοριοποιημένων ιστοσελίδων  Πρόσθήκη επιπλέον μετρικών  Εξαγωγή συνδυαστικών αποτελεσμάτων 31
  32. 32. Ρουσοπούλου Βάγια vagiarous@gmail.com Ευχαριστώ για την προσοχή σας!

×