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.

Narlis Eystratios

69 views

Published on

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

Published in: Education
  • Be the first to comment

  • Be the first to like this

Narlis Eystratios

  1. 1. Ναρλής Ευστράτιος ΑΕΜ 8205 Επιβλέποντες: Αναπληρωτής Καθηγητής κ. Συμεωνίδης Αντρέας Υποψήφιος Διδάκτορας κ. Παπαμιχαήλ Μιχάηλ 30/10/2018 Αξιολόγηση Ποιότητας διεπαφών χρήστη σε web εφαρμογές μέσω εύρεσης κυρίαρχων προτύπων σχεδίασης ΑΡΙΣΤΟΤΕΛΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΘΕΣΣΑΛΟΝΙΚΗΣ ΤΜΗΜΑ ΗΛΕΚΤΡΟΛΟΓΩΝ ΜΗΧΑΝΙΚΩΝ & ΜΗΧΑΝΙΚΩΝ ΥΠΟΛΟΓΙΣΤΩΝ
  2. 2. Εισαγωγή  1.8 δισεκατομμύρια ιστοσελίδες  Δεκάδες ιστοσελίδες που προσφέρουν τις ίδιες υπηρεσίες Η κατάσταση σήμερα Πρόβλημα  Πως μια διαδικτυακή εφαρμογή θα ξεχωρίσει από τις άλλες?  Τι είναι αυτό που θα κάνει τον χρήστη να την επιλέξει?
  3. 3. Προηγούμενες έρευνες  Ο γραφικός σχεδιασμός μιας ιστοσελίδας είναι ο κύριος παράγοντας που κάνει τον χρήστη να την επιλέξει  Έχει γίνει προσπάθεια μοντελοποίησης των γραφικών διεπαφών βασισμένη σε γνώμες χρηστών (ερωτηματολόγια)  Σύστημα αξιολόγησης των γραφικών διεπαφών μιας ιστοσελίδας  Προτάσεις για αλλαγή της σχεδίασής τους  Βασιζόμαστε στα πρότυπα σχεδίασης των πιο δημοφιλή σελίδων Η δική μας λύση
  4. 4. Στόχος της διπλωματικής  Εύρεση και εξαγωγή κυρίαρχων προτύπων σχεδίασης ιστοσελίδων ανά θεματική κατηγορία  Εκπαίδευση μοντέλου ώστε με βάση αυτά να είναι σε θέση να βαθμολογούν μια ιστοσελίδα, να εντοπίζουν τα σημεία που η σχεδίαση δεν είναι καλή και να κάνουν προτάσεις τροποποίησής τους  Μοντελοποίηση της αισθητικής που αντιλαμβάνεται o χρήστης  Ποσοτικοποίηση της γενικής αισθητικής μιας ιστοσελίδας και τον επιμέρους στοιχείων της με σύστημα αξιολόγησης
  5. 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. 6. Το Dataset Datase t Υποσύστημα 1 Data Collector Υποσύστημα 2 Data Analyzer Υποσύστημα 3 Recommend- evaluate Μετρικές Κατανομές μετρικών • Αποτελείται από τα 5000 δημοφιλέστερα site συμφώνα με την alexa • Η κατάταξη ιδιαίτερα στα δημοφιλέστερα site είναι πολύ ακριβής • Τα πιο δημοφιλή sites χρησιμοποιούνται για την εξαγωγή προτύπων . Βάση αυτών προκύπτουν οι βαθμολογίες και οι προτάσεις του συστήματος.
  7. 7. Data Collector (1/3) Datase t Υποσύστημα 1 Data Collector Υποσύστημα 2 Data Analyzer Υποσύστημα 3 Recommend- evaluate Μετρικές Κατανομές μετρικών • Προσπέλαση των url του dataset • Χρήση του CasperJS για τον εντοπισμό και εξαγωγή των μετρικών  Browser χωρίς γραφικές απεικόνισεις  Μας δίνει την δυνατότητα να τρέξουμε javascript κώδικα σε ιστοσελίδες  Με την εκτέλεση συγκεκριμένων εντολών javascript είμαστε σε θέση να προσπελάσουμε όλα τα στοιχεία μιας ιστοσελίδας και να εντοπίσουμε τα αυτά που θέλουμε και τις μετρικές τους. CasperJS
  8. 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. 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. 10. Αποθήκευση μετρικών Datase t Υποσύστημα 1 Data Collector Υποσύστημα 2 Data Analyzer Υποσύστημα 3 Recommend- evaluate Μετρικές Κατανομές μετρικών
  11. 11. Data analyzer Datase t Υποσύστημα 1 Data Collector Υποσύστημα 2 Data Analyzer Υποσύστημα 3 Recommend- evaluate Μετρικές Κατανομές μετρικών  Δέχεται ως είσοδο τα δεδομένα των μετρικών  Εντοπίζει και αποκλείει παρακείμενες τιμές  Δημιουργεί και εξάγει τις κατανομές κάθε μετρικής Η κατανομή του πλάτους των εικόνων
  12. 12. Κατανομές μετρικών Datase t Υποσύστημα 1 Data Collector Υποσύστημα 2 Data Analyzer Υποσύστημα 3 Recommend- evaluate Μετρικές Κατανομές μετρικών
  13. 13. Recommend-evaluate (1/4) Datase t Υποσύστημα 1 Data Collector Υποσύστημα 2 Data Analyzer Υποσύστημα 3 Recommend- evaluate Μετρικές Κατανομές μετρικών • Δέχεται ως είσοδο ένα url από ένα site και την κατηγορία του • Με το casperJS προσπελάζει ένα ένα τα στοιχεία του site προς αξιολόγηση και εντοπίζει αυτά που μας ενδιαφέρουν και τις μετρικές τους. • Χρησιμοποιεί τις κατανομές που προέκυψαν από το προηγούμενο υποσύστημα και για κάθε μετρική εξάγει μια βαθμολογία URL
  14. 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. 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. 16. Recommend-evaluate (4/4) Datase t Υποσύστημα 1 Data Collector Υποσύστημα 2 Data Analyzer Υποσύστημα 3 Recommend- evaluate Μετρικές Κατανομές μετρικών URL
  17. 17. Πειράματα-Αποτελέσματα  Κατανομές βαθμολογίων από 120 τυχαία δημοφιλή site
  18. 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. 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. 20. Συμπεράσματα v Υπάρχουν κοινά πρότυπα σχεδίασης τα οποία είναι δυνατόν να εντοπιστούν στα πιο δημοφιλή site. v Είναι δυνατή η μοντελοποίηση της αισθητικής που αντιλαμβάνεται o χρήστης v Καθώς και η ποσοτικοποίηση της γενικής αισθητικής μιας ιστοσελίδας και τον επιμέρους στοιχείων της με σύστημα αξιολόγησης
  21. 21. Μελλοντικές επεκτάσεις • Επέκταση του συστήματος για mobile-tablet έκδοση ιστοσελίδων • Εισαγωγή βαρών στον υπολογισμό των βαθμολογιών • Εισαγωγή περισσότερων μετρικών • Μεγαλύτερο σύνολο δεδομένων • Δημιουργία web εφαρμογής
  22. 22. Ευχαριστίες Θα ήθελα να ευχαριστήσω τον κ. Ανδρέα Συμεωνίδη που μου εμπιστεύτηκε αυτή την διπλωματική εργασία και τον κ. Μιχαήλ Παπαμιχαήλ για την πολύτιμη βοήθεια και καθοδήγηση που μου προσέφερε.
  23. 23. Ευχαριστώ για την προσοχή σας!

×