Bagia Rousopoulou

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

Ρουσοπούλου ΒάγιαΥπο την επίβλεψη του επίκουρου καθηγητή κ. Συμεωνίδη

Ανδρέα

και του υποψήφιου διδάκτορα κ. Παπαμιχαήλ Μιχάλη

Αριστοτέλειο Πανεπιστήμιο Θεσσαλονίκης Τμήμα Ηλεκτρολόγων Μηχανικών και

Μηχανικών Υπολογιστών

Μάρτιος 2017

Περιεχόμενα

1. Εισαγωγή

2. Στόχος της Διπλωματικής

3. Σύστημα και Μεθοδολογία

4. Αποτελέσματα και Συμπεράσματα

5. Μελλοντικές Επεκτάσεις

2

1. Εισαγωγή






3

Κατάσταση Σήμερα

Αυξανόμενος αριθμός διαδικτυακών εφαρμογών

Μεγάλος αριθμός χρηστών του διαδικτύου

4Πηγή: http://www.internetlivestats.com/

Το πρόβλημα

Δημιουργείται ανάγκη Αξιολόγησης ιστοσελίδων Μοντελοποίησης χαρακτηριστικών διεπαφών Βελτίωσης εμπειρίας χρηστών

5

Πώς ξεχωρίζει μια διαδικτυακή εφαρμογή ανάμεσα σε τόσες άλλες;

1. Εισαγωγή






6

Στόχος της Διπλωματικής

7

• Μοντελοποίηση ευχρηστίας και αισθητικής ιστοσελίδων, όπως γίνονται αντιληπτά από τους χρήστες

User perceived usability and aesthetics• Αυτοματοποιημένη αξιολόγηση

διεπαφών• Με τη χρήση μετρικών ποιότηταςAutomated user interface evaluation• Εξαγωγή προτύπων σχεδίασης• Για επαναχρησιμοποίηση σε μορφή

κανόνωνRule based evaluation


1. Εισαγωγή





8

Μεθοδολογία

Συλλογή Δημοφιλών Ιστοσελίδων

Συγκέντρωση Μετρικών

Εξαγωγή Προτύπων Σχεδίασης

Εύρεση Επιμέρους Στοιχείων- Elements

Ανάλυση Μετρικών

9

Συλλογή Δημοφιλών Ιστοσελίδων

Δημοφιλείς ιστοσελίδες:• Προτίμηση απο τους χρήστες• Ποιοτικά χαρακτηριστικά

Βασική Παραδοχή:

Σελίδες που περιέχουν δεδομένα κατάταξης ιστοσελίδων

10

Συλλογή 100 δημοφιλών ιστοσελίδων

Επιμέρους Στοιχεία- Elements

ButtonImageMenuList

HeaderFooterLinkSearch Field

Input FieldSignin FormSignup Form

11

• 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

Υποσύστημα Trainer

14

Metric Retriever Metric Analyzer Rule Engine

Metric Retriever

15

lxml

Αναγνώριση Element

16

Αναπαράσταση HTML σε δενδρική δομή

Προσπέλαση δένδρου από πάνω προς τα κάτω

Αναζήτηση λέξης-κλειδί σε κάθε κόμβο

tag, class, id

Αποθήκευση στοιχείου και προγόνων

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

17

Εξαγωγή Μετρικών

18

CasperJS

Δημιουργία εικονικού browser

Εκτέλεση ερωτημάτων jQuery

Εισαγωγή αναγνωριστικών στοιχείων element (tag, class, id)

Αντιστοίχιση τιμών σε μετρικές

Ανάλυση Μετρικών

19

Προεπεξεργασία Δεδομένων Επεξεργασία τιμών μετρικών Δημιουργία ενός Dataset για κάθε τύπο

ElementΟμαδοποίηση (Clustering) Αλγόριθμος διαχωρισμού K-

meansΕξαγωγή Προτύπων Σχεδίασης Εύρεση ομάδων με το μεγαλύτερο πληθυσμό Δημιουργία διαγράμματος κατάταξης των τιμών σε

ομάδες Έλεγχος διαγράμματος πυκνότητας Εξαγωγή κυρίαρχου προτύπου

Rule Engine

20

input output

Γενικά:Σύνολο κανόνων ΑντικείμεναΈλεγχοςΈξοδος

Συγκεκριμένα:Σύνολο προτύπων σχεδίασηςΣτοιχεία ιστοσελίδαςΈλεγχοςΜηνύματα με ειδοποιήσεις

Υποσύστημα Evaluator

21

Metric Retriever Rule EngineEvaluation

ResultsInput


1. Εισαγωγή





22

Type of Element Number of InstancesButton 468Image 254Header 89Footer 93Input Field 196Search Field 371List 445Menu 997Link 1848Signin Form 38Signup Form 38

Σύνολο στοιχείων που αναγνωρίστηκαν

23

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

Headers: font-size

Clusters

Instances

0 97.75 %1 2.25 %

Design Pattern: 9 < font-size < 24

26

Σύνολο προτύπων σχεδίασης

Element Number of extracted design

patterns Buttons 13Images 7Links 8Headers 10Footers 10Input Fields 10Search Fields 10Lists 11Menus 11Signin Forms 6Signup Forms 6

27

Μορφή προτύπων σχεδίασης

Metric Image Patternheight Έως 40% του ύψους της ιστοσελίδας.width Έως 60% του πλάτους της ιστοσελίδας.margins 0pxmargins margin-left = margin-rightmargins margin-top = margin-bottompadding padding-left/right/top/bottom = 0pxfont-size Στο διάστημα (10,25).

28

Παρουσίαση Rule Engine Evaluation Results:

Webpage: http://getbootstrap.com/

Συμπεράσματα

29

Ο τρόπος με τον οποίο γίνεται αντιληπτή η ευχρηστία και η αισθητική από τους τελικούς χρήστες μοντελοποιείται.

Υπάρχουν διακριτά πρότυπα σχεδίασης διεπαφών, τα οποία χρησιμοποιούνται από γραφικές διεπαφές δημοφιλών διαδικτυακών εφαρμογών.

Το σύστημα παρέχει στοχευμένες παρατηρήσεις αναφορικά με τη σχεδίαση επιμέρους στοιχείων διεπαφών.

Το σύστημα αποτελεί βοηθητικό οδηγό για τη σχεδίαση διεπαφών διαδικτυακών εφαρμογών.


1. Εισαγωγή





30

Μελλοντικές Επεκτάσεις

Υλοποίηση συστήματος για mobile εκδόσεις

ιστοσελίδων.

Χρήση κατηγοριοποιημένων ιστοσελίδων

Πρόσθήκη επιπλέον μετρικών

Εξαγωγή συνδυαστικών αποτελεσμάτων

31

Ρουσοπούλου Βάγια[email protected]

Ευχαριστώ για την προσοχή

σας!

Education

Bagia Rousopoulou