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

1. Αυτοματοποιημένη αξιολόγηση της ευχρηστίας διαδικτυακών εφαρμογών
μέσω της εύρεσης κυρίαρχων προτύπων σχεδίασης διεπαφών χρήστη
Ρουσοπούλου Βάγια
Υπο την επίβλεψη του επίκουρου καθηγητή κ. Συμεωνίδη Ανδρέα
και του υποψήφιου διδάκτορα κ. Παπαμιχαήλ Μιχάλη
Αριστοτέλειο Πανεπιστήμιο Θεσσαλονίκης
Τμήμα Ηλεκτρολόγων Μηχανικών και
Μηχανικών Υπολογιστών
Μάρτιος 2017

2. Περιεχόμενα
1. Εισαγωγή
2. Στόχος της Διπλωματικής
3. Σύστημα και Μεθοδολογία
4. Αποτελέσματα και Συμπεράσματα
5. Μελλοντικές Επεκτάσεις
2

3. 1. Εισαγωγή
2. Στόχος της Διπλωματικής
3. Σύστημα και Μεθοδολογία
4. Αποτελέσματα και Συμπεράσματα
5. Μελλοντικές Επεκτάσεις
Περιεχόμενα
3

4. Κατάσταση Σήμερα
 Αυξανόμενος αριθμός διαδικτυακών εφαρμογών
 Μεγάλος αριθμός χρηστών του διαδικτύου
4
Πηγή: http://www.internetlivestats.com/

5. Το πρόβλημα
Δημιουργείται ανάγκη
 Αξιολόγησης ιστοσελίδων
 Μοντελοποίησης χαρακτηριστικών διεπαφών
 Βελτίωσης εμπειρίας χρηστών
5
Πώς ξεχωρίζει μια διαδικτυακή εφαρμογή
ανάμεσα σε τόσες άλλες;

6. 1. Εισαγωγή
2. Στόχος της Διπλωματικής
3. Σύστημα και Μεθοδολογία
4. Αποτελέσματα και Συμπεράσματα
5. Μελλοντικές Επεκτάσεις
Περιεχόμενα
6

7. Στόχος της Διπλωματικής
7
• Μοντελοποίηση ευχρηστίας και αισθητικής ιστοσελίδων,
όπως γίνονται αντιληπτά από τους χρήστες
User perceived usability and aesthetics
• Αυτοματοποιημένη αξιολόγηση διεπαφών
• Με τη χρήση μετρικών ποιότητας
Automated user interface evaluation
• Εξαγωγή προτύπων σχεδίασης
• Για επαναχρησιμοποίηση σε μορφή κανόνων
Rule based evaluation

8. Περιεχόμενα
1. Εισαγωγή
2. Στόχος της Διπλωματικής
3. Σύστημα και Μεθοδολογία
4. Αποτελέσματα και Συμπεράσματα
5. Μελλοντικές Επεκτάσεις
8

9. Μεθοδολογία
Συλλογή Δημοφιλών Ιστοσελίδων
Συγκέντρωση Μετρικών
Εξαγωγή Προτύπων Σχεδίασης
Εύρεση Επιμέρους Στοιχείων- Elements
Ανάλυση Μετρικών
9

10. Συλλογή Δημοφιλών Ιστοσελίδων
Δημοφιλείς ιστοσελίδες:
• Προτίμηση απο τους χρήστες
• Ποιοτικά χαρακτηριστικά
Βασική Παραδοχή:
Σελίδες που περιέχουν δεδομένα κατάταξης ιστοσελίδων
10
Συλλογή 100 δημοφιλών ιστοσελίδων

11. Επιμέρους Στοιχεία- Elements
Button
Image
Menu
List
Header
Footer
Link
Search Field
Input Field
Signin Form
Signup Form
11

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

14. Υποσύστημα Trainer
14
Metric Retriever
Metric Analyzer Rule Engine

15. Metric Retriever
15
lxml

16. Αναγνώριση Element
16
 Αναπαράσταση HTML σε δενδρική δομή
 Προσπέλαση δένδρου από πάνω προς τα κάτω
 Αναζήτηση λέξης-κλειδί σε κάθε κόμβο
 tag, class, id
 Αποθήκευση στοιχείου και προγόνων

17. Πίνακας Αναγνώρισης Element
17

18. Εξαγωγή Μετρικών
18
CasperJS
 Δημιουργία εικονικού browser
 Εκτέλεση ερωτημάτων jQuery
 Εισαγωγή αναγνωριστικών στοιχείων element (tag, class, id)
 Αντιστοίχιση τιμών σε μετρικές

19. Ανάλυση Μετρικών
19
Προεπεξεργασία Δεδομένων
 Επεξεργασία τιμών μετρικών
 Δημιουργία ενός Dataset για κάθε τύπο Element
Ομαδοποίηση (Clustering)
 Αλγόριθμος διαχωρισμού K-means
Εξαγωγή Προτύπων Σχεδίασης
 Εύρεση ομάδων με το μεγαλύτερο πληθυσμό
 Δημιουργία διαγράμματος κατάταξης των τιμών σε
ομάδες
 Έλεγχος διαγράμματος πυκνότητας
 Εξαγωγή κυρίαρχου προτύπου

20. Rule Engine
20
input output
Γενικά:
Σύνολο κανόνων
Αντικείμενα
Έλεγχος
Έξοδος
Συγκεκριμένα:
Σύνολο προτύπων σχεδίασης
Στοιχεία ιστοσελίδας
Έλεγχος
Μηνύματα με ειδοποιήσεις

21. Υποσύστημα Evaluator
21
Metric Retriever Rule Engine
Evaluation
ResultsInput

22. Περιεχόμενα
1. Εισαγωγή
2. Στόχος της Διπλωματικής
3. Σύστημα και Μεθοδολογία
4. Αποτελέσματα και Συμπεράσματα
5. Μελλοντικές Επεκτάσεις
22

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
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
Headers: font-size
Clusters Instances
0 97.75 %
1 2.25 %
Design Pattern: 9 < font-size < 24

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
Μορφή προτύπων σχεδίασης
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
Παρουσίαση Rule Engine
Evaluation Results:
Webpage: http://getbootstrap.com/

29. Συμπεράσματα
29
 Ο τρόπος με τον οποίο γίνεται αντιληπτή η ευχρηστία και η
αισθητική από τους τελικούς χρήστες μοντελοποιείται.
 Υπάρχουν διακριτά πρότυπα σχεδίασης διεπαφών, τα οποία
χρησιμοποιούνται από γραφικές διεπαφές δημοφιλών
διαδικτυακών εφαρμογών.
 Το σύστημα παρέχει στοχευμένες παρατηρήσεις αναφορικά με
τη σχεδίαση επιμέρους στοιχείων διεπαφών.
 Το σύστημα αποτελεί βοηθητικό οδηγό για τη σχεδίαση
διεπαφών διαδικτυακών εφαρμογών.

30. Περιεχόμενα
1. Εισαγωγή
2. Στόχος της Διπλωματικής
3. Σύστημα και Μεθοδολογία
4. Αποτελέσματα και Συμπεράσματα
5. Μελλοντικές Επεκτάσεις
30

31. Μελλοντικές Επεκτάσεις
 Υλοποίηση συστήματος για mobile εκδόσεις ιστοσελίδων.
 Χρήση κατηγοριοποιημένων ιστοσελίδων
 Πρόσθήκη επιπλέον μετρικών
 Εξαγωγή συνδυαστικών αποτελεσμάτων
31

32. Ρουσοπούλου Βάγια
vagiarous@gmail.com
Ευχαριστώ για την
προσοχή σας!