User-perceived quality evaluation of user interfaces in web applications through the identification of dominant design patterns

1. Ναρλής Ευστράτιος
ΑΕΜ 8205
Επιβλέποντες:
Αναπληρωτής Καθηγητής κ. Συμεωνίδης Αντρέας
Υποψήφιος Διδάκτορας κ. Παπαμιχαήλ Μιχάηλ
30/10/2018
Αξιολόγηση Ποιότητας διεπαφών χρήστη σε web
εφαρμογές μέσω εύρεσης κυρίαρχων προτύπων σχεδίασης
ΑΡΙΣΤΟΤΕΛΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΘΕΣΣΑΛΟΝΙΚΗΣ
ΤΜΗΜΑ ΗΛΕΚΤΡΟΛΟΓΩΝ ΜΗΧΑΝΙΚΩΝ & ΜΗΧΑΝΙΚΩΝ ΥΠΟΛΟΓΙΣΤΩΝ

2. Εισαγωγή
 1.8 δισεκατομμύρια
ιστοσελίδες
 Δεκάδες ιστοσελίδες που
προσφέρουν τις ίδιες
υπηρεσίες
Η κατάσταση σήμερα Πρόβλημα
 Πως μια διαδικτυακή
εφαρμογή θα ξεχωρίσει
από τις άλλες?
 Τι είναι αυτό που θα κάνει
τον χρήστη να την επιλέξει?

3. Προηγούμενες έρευνες
 Ο γραφικός σχεδιασμός μιας
ιστοσελίδας είναι ο κύριος
παράγοντας που κάνει τον χρήστη
να την επιλέξει
 Έχει γίνει προσπάθεια
μοντελοποίησης των γραφικών
διεπαφών βασισμένη σε γνώμες
χρηστών (ερωτηματολόγια)
 Σύστημα αξιολόγησης των
γραφικών διεπαφών μιας
ιστοσελίδας
 Προτάσεις για αλλαγή της
σχεδίασής τους
 Βασιζόμαστε στα πρότυπα
σχεδίασης των πιο δημοφιλή
σελίδων
Η δική μας λύση

4. Στόχος της διπλωματικής
 Εύρεση και εξαγωγή κυρίαρχων προτύπων σχεδίασης
ιστοσελίδων ανά θεματική κατηγορία
 Εκπαίδευση μοντέλου ώστε με βάση αυτά να είναι σε θέση να
βαθμολογούν μια ιστοσελίδα, να εντοπίζουν τα σημεία που η
σχεδίαση δεν είναι καλή και να κάνουν προτάσεις
τροποποίησής τους
 Μοντελοποίηση της αισθητικής που αντιλαμβάνεται o χρήστης
 Ποσοτικοποίηση της γενικής αισθητικής μιας ιστοσελίδας και τον
επιμέρους στοιχείων της με σύστημα αξιολόγησης

5. Σύστημα και μεθοδολογία
Datase
t
Υποσύστημα 1
Data Collector
Υποσύστημα 2
Data Analyzer
Υποσύστημα 3
Recommend-
evaluate
Μετρικές Κατανομές
μετρικών
URL
1. Dataset που περιέχει τα url των 5000 πιο δημοφιλή ιστοσελίδων και την κατηγορία
τους (shopping, news κτλ) εισάγεται στο υποσύστημα 1
2. To υποσύστημα 1 κάνοντας crawling στο dataset εξάγει τις μετρικές που εντοπίζει
για κάθενα όπως το πλάτος τον εικόνων, η θέση του logo, το μέγεθος γραμματοσειράς
κτλ.
3. Το υποσύστημα 2 δέχεται ως είσοδο της μετρικές και δίνει ως έξοδο τις κατανομές
αυτών
4. Το υποσύστημα 3 έχοντας ως είσοδο της κατανομές που προέκυψαν και ένα site προς
αξιολόγηση μας δίνει βαθμολογίες και κάνει προτάσεις για την βελτίωση του site

6. Το Dataset
Datase
t
Υποσύστημα 1
Data Collector
Υποσύστημα 2
Data Analyzer
Υποσύστημα 3
Recommend-
evaluate
Μετρικές Κατανομές
μετρικών
• Αποτελείται από τα 5000
δημοφιλέστερα site συμφώνα με την
alexa
• Η κατάταξη ιδιαίτερα στα
δημοφιλέστερα site είναι πολύ ακριβής
• Τα πιο δημοφιλή sites
χρησιμοποιούνται για την εξαγωγή
προτύπων . Βάση αυτών προκύπτουν οι
βαθμολογίες και οι προτάσεις του
συστήματος.

7. Data Collector (1/3)
Datase
t
Υποσύστημα 1
Data Collector
Υποσύστημα 2
Data Analyzer
Υποσύστημα 3
Recommend-
evaluate
Μετρικές Κατανομές
μετρικών
• Προσπέλαση των url
του dataset
• Χρήση του CasperJS
για τον εντοπισμό και
εξαγωγή των μετρικών
 Browser χωρίς γραφικές απεικόνισεις
 Μας δίνει την δυνατότητα να τρέξουμε
javascript κώδικα σε ιστοσελίδες
 Με την εκτέλεση συγκεκριμένων
εντολών javascript είμαστε σε θέση
να προσπελάσουμε όλα τα στοιχεία
μιας ιστοσελίδας και να εντοπίσουμε
τα αυτά που θέλουμε και τις μετρικές
τους.
CasperJS

8. Data Collector (2/3)
Datase
t
Υποσύστημα 1
Data Collector
Υποσύστημα 2
Data Analyzer
Υποσύστημα 3
Recommend-
evaluate
Μετρικές Κατανομές
μετρικών
Στοιχείο Tag ID Class
IMG IMG
BUTTON BUTTON btn,button btn,button
NAVIGATION PANEL UL nav nav
LIST UL
LOGO IMG
ANCHOR A
HEADER header header
FOOTER footer footer
SIGNIN FORM FORM login, signin login, signin
SIGNUP FORM FORM signup, register signup, register
INPUT INPUT
SLIDE slide slide
SEARCH FIELD INPUT search search
LOGO IMG

9. Data Collector (3/3)
Datase
t
Υποσύστημα 1
Data Collector
Υποσύστημα 2
Data Analyzer
Υποσύστημα 3
Recommend-
evaluate
Μετρικές Κατανομές
μετρικών
Image Logo Button List Navigation panel Anchor
width width top width height font-size
height height left height font-weight
aspect-ratio aspect-ratio padding-left Font-size legth
top padding-top color
left width width
height
aspect-ratio
Footer Search field Header Input Slide
height left height font-size height
columns top width top
Number of links font-size height left
Number of
images
width top aspect-ratio
height left width
aspect ratio

10. Αποθήκευση μετρικών
Datase
t
Υποσύστημα 1
Data Collector
Υποσύστημα 2
Data Analyzer
Υποσύστημα 3
Recommend-
evaluate
Μετρικές Κατανομές
μετρικών

11. Data analyzer
Datase
t
Υποσύστημα 1
Data Collector
Υποσύστημα 2
Data Analyzer
Υποσύστημα 3
Recommend-
evaluate
Μετρικές Κατανομές
μετρικών
 Δέχεται ως είσοδο
τα δεδομένα των
μετρικών
 Εντοπίζει και
αποκλείει
παρακείμενες τιμές
 Δημιουργεί και
εξάγει τις κατανομές
κάθε μετρικής
Η κατανομή του πλάτους των εικόνων

12. Κατανομές μετρικών
Datase
t
Υποσύστημα 1
Data Collector
Υποσύστημα 2
Data Analyzer
Υποσύστημα 3
Recommend-
evaluate
Μετρικές Κατανομές
μετρικών

13. Recommend-evaluate (1/4)
Datase
t
Υποσύστημα 1
Data Collector
Υποσύστημα 2
Data Analyzer
Υποσύστημα 3
Recommend-
evaluate
Μετρικές Κατανομές
μετρικών
• Δέχεται ως είσοδο ένα url από ένα site και την
κατηγορία του
• Με το casperJS προσπελάζει ένα ένα τα στοιχεία του
site προς αξιολόγηση και εντοπίζει αυτά που μας
ενδιαφέρουν και τις μετρικές τους.
• Χρησιμοποιεί τις κατανομές που προέκυψαν από το
προηγούμενο υποσύστημα και για κάθε μετρική εξάγει
μια βαθμολογία
URL

14. Recommend-evaluate (2/4)
Datase
t
Υποσύστημα 1
Data Collector
Υποσύστημα 2
Data Analyzer
Υποσύστημα 3
Recommend-
evaluate
Μετρικές Κατανομές
μετρικών
50 100 150 200 250 300 350
2000
1500
1000
Αριθμόςεικόνων
Ύψος εικόνας (pixel)
1100
125
 Εικόνα ύψους 125
pixel
 H βαθμολογία της
εικόνας ως προς το
ύψος προκύπτει ως
1100/(1800-100) =
0.64
Παράδειγμα

15. Recommend-evaluate (3/4)
Datase
t
Υποσύστημα 1
Data Collector
Υποσύστημα 2
Data Analyzer
Υποσύστημα 3
Recommend-
evaluate
Μετρικές Κατανομές
μετρικών
URL
0.5 > Βαθμολογία > 0.3 Συνιστάτε λίγο να γίνει αλλαγή
(SLIGHLY)
0.3>Βαθμολογία >0.2 Προτείνεται να γίνει αλλαγή
Βαθμολογία < 0.2 Προτείνεται ισχυρά να γίνει
αλλαγή (STRONGLY)
Παράδειγμα

16. Recommend-evaluate (4/4)
Datase
t
Υποσύστημα 1
Data Collector
Υποσύστημα 2
Data Analyzer
Υποσύστημα 3
Recommend-
evaluate
Μετρικές Κατανομές
μετρικών
URL

17. Πειράματα-Αποτελέσματα
 Κατανομές βαθμολογίων από 120 τυχαία δημοφιλή site

18. Πειράματα-Αποτελέσματα
IMG 0.98
LOGO 0.95
COLOR 1.0
ANCHOR 0.97
Γραφικά (Μέσος όρος) 0.98
LIST 0.84
INPUT 0.48
BUTTON 0.84
SEARCH FIELD 0.87
HEADER 1.0
FOOTER 0.72
Δομή (μέσος όρος) 0.78
Δομή 0.78
Γραφικά 0.98
Γενική Βαθμολογία
(Μέσος όρος)
0.88

19. Πειράματα-Αποτελέσματα
1. element_16 metric img_widths is higher than usual. It is STRONGLY recommended to reduce it.
2. element_12 metric button_width is higher than usual. It is recommended to reduce it.
3. element_17 metric button_width is higher than usual. It is SLIGHTLY recommended to reduce it.
4. element_43 metric input_width is higher than usual. It is STRONGLY recommended to reduce it.
5. element_44 metric input_width is higher than usual. It is STRONGLY recommended to reduce it

20. Συμπεράσματα
v Υπάρχουν κοινά πρότυπα σχεδίασης τα οποία είναι
δυνατόν να εντοπιστούν στα πιο δημοφιλή site.
v Είναι δυνατή η μοντελοποίηση της αισθητικής που
αντιλαμβάνεται o χρήστης
v Καθώς και η ποσοτικοποίηση της γενικής αισθητικής
μιας ιστοσελίδας και τον επιμέρους στοιχείων της με
σύστημα αξιολόγησης

21. Μελλοντικές επεκτάσεις
• Επέκταση του συστήματος για mobile-tablet έκδοση
ιστοσελίδων
• Εισαγωγή βαρών στον υπολογισμό των βαθμολογιών
• Εισαγωγή περισσότερων μετρικών
• Μεγαλύτερο σύνολο δεδομένων
• Δημιουργία web εφαρμογής

22. Ευχαριστίες
Θα ήθελα να ευχαριστήσω τον κ. Ανδρέα Συμεωνίδη
που μου εμπιστεύτηκε αυτή την διπλωματική εργασία
και τον κ. Μιχαήλ Παπαμιχαήλ για την πολύτιμη
βοήθεια και καθοδήγηση που μου προσέφερε.

23. Ευχαριστώ για την
προσοχή σας!