IEEE Student Branch
                               Computer Chapter




Εισαγωγή στην Αλληλεπίδραση
Ανθρώπου-Υπολογιστή και εφαρμογές
Νίκος Αβούρης   [ Πάτρα 16.02.2012 ]
Αλληλεπίδραση
  Ανθρώπου-Υπολογιστή
  Επιστημονική περιοχή με αντικείμενο
  τη μελέτη της αλληλεπίδρασης των
  χρηστών με υπολογιστικά συστήματα,
  με ιδιαίτερη εστίαση στη σχεδίαση,
  ανάπτυξη και αξιολόγηση
  διαδραστικών συστημάτων
  (interactive computer systems)
  [ACM SIGCHI 1992].
2/44                           http://hci.ece.upatras.gr
Αλληλεπίδραση με πολλή
        τεχνολογία
3/44                       http://hci.ece.upatras.gr
Αλληλεπίδραση χωρίς τεχνολογία

   Multi-touch
   floors




                                       multi-touch floor video

4/44   http://www.designlaunches.com                   http://hci.ece.upatras.gr
Λόγοι που αξίζει η μελέτη..
l Σημασία Περιστοιχιζόμαστε όλο και
  περισσότερο από διαδραστικές τεχνολογίες
  (το διαδίκτυο, κινητά κλπ).
l Κοινωνικοί λόγοι Σχεδιάζοντας πιο
  εύχρηστους υπολογιστές επιτελούμε
  κοινωνική προσφορά, σώζουμε ζωές,
  χρόνο, περιουσίες
l Απαίτηση για δεξιότητες ειδικού ευχρηστίας
  και προσβασιμότητας από την αγορά
  εργασίας
5/44                                http://hci.ece.upatras.gr
Μια περιοχή σε διαρκή εξέλιξη
l   Δεκαετία 70: πρώτα διαδραστικά υπολογιστικά
    συστήματα (PC)
l   … σήμερα: ανάπτυξη υλικού και λογισμικού
    υπολογιστών οθόνες υψηλής ανάλυσης,
    επεξεργαστές και ειδικές μνήμες αποθήκευσης
    γραφικής πληροφορίας, εξελίξεις στην ανάπτυξη
    και υλοποίηση αλγορίθμων γραφικής απεικόνισης ,
    ανάπτυξη νέων συσκευών αλληλεπίδρασης (VR)
    διαδίκτυο και πανταχού παρών υπολογιστής
    (ubiquitous computing)

6/44                                      http://hci.ece.upatras.gr
η προϊστορία των υπολογιστών …

  Οι χρήστες ήταν εξειδικευμένοι




7/44                               http://hci.ece.upatras.gr
Σήμερα:
χρήστες: όλοι
σχεδόν οι
πολίτες




       Adam Greenfield, “Everyware: The Dawning Age of Ubiquitous Computing”
8/44   http://www.darkgovernment.com/news/tag/privacy/page/3/#ixzz1Ep1gAH41http://hci.ece.upatras.gr
Μελέτη του ανθρώπου ως
  επεξεργαστή πληροφορίας


                                                 Αισθητήρια αντίληψη
                                                 Γνώση
                                                 Μνήμη
                                                 Μάθηση
                                                 Αυτοματισμοί
                                                 Προσοχή
                                                 Νοητικά Μαντέλα


       http://msdn.microsoft.com/en-us/magazine/ee335698.aspx
9/44                                                            http://hci.ece.upatras.gr
Σχεδίαση διαδραστικών
  συστημάτων
   Από interface
   design …
   σε interaction
   design
   … σε user
   experience design

10/44                     http://hci.ece.upatras.gr
Ανθρωπο-κεντρική
   σχεδίαση
                           Design
   Prototype


                   Η ανθρώπινη
                   δραστηριότητα
                    στο κέντρο
                    μελέτης μας

                Evaluate
11/44                          http://hci.ece.upatras.gr
Παράδειγμα ανάλυσης αλληλεπίδρασης
        για σχεδίαση διαδραστικής τεχνολογίας




12/44                                    http://hci.ece.upatras.gr
Νοητικά μοντέλα/ σχεδίαση




    Νοητικό Μοντέλο                         Νοητικό Μοντέλο
    Χρήστη                                  Σχεδιαστή




                      Διεπιφάνεια χρήστη/
                      Εργαλεία
13/44                                          http://hci.ece.upatras.gr
Νοητικό Μοντέλο
        Συσκευής ΑΤΜ




14/44                     http://hci.ece.upatras.gr
Usability = Ευχρηστία
   H Ευχρηστία { (η) ουσ. το
   γνώρισμα του εύ-χρηστου, αυτού
   που μπορεί εύκολα να
   χρησιμοποιηθεί } παράμετρος
   ποιότητας ενός διαδραστικού
   συστήματος.

15/44                        http://hci.ece.upatras.gr
ISO 9241-11 Guidance on Usability

    H δυνατότητα ενός προϊόντος που
    χρησιμοποιείται από καθορισμένους
    χρήστες με καθορισμένους στόχους,
    υπό καθορισμένες συνθήκες χρήσης να
    είναι αποτελεσματικό (effectiveness),
    αποδοτικό (efficiency) και να παρέχει
    υποκειμενική ικανοποίηση (satisfaction)
    στους χρήστες του
16/44                              http://hci.ece.upatras.gr
Usability model

                                         personal
                                       environment

        goals
                                          user

                                                                 user
                                                             satisfaction
                                             interaction
                          physical           tasks             output:
                         environment
                                                            effectiveness
          social and
                                                              efficiency
        organisational
         environment                    product

                                        technical
                                       environment




17/44                                                      http://hci.ece.upatras.gr
Τεχνολογία Ευχρηστίας: Πρότυπα
    l   ISO 13407 Human-Centered Design
        Process for Interactive Systems
    l   ISO TR 18529
        Human-centred lifecycle processes
        descriptions
    l   ANSI/NCITS 354 / ISO 25062 Common
        Industry Format usability tests




18/44     http://www.upassoc.org/      http://hci.ece.upatras.gr
Usability body of knowledge
  http://www.usabilitybok.org/




19/44                            http://hci.ece.upatras.gr
Usability guidelines




20/44                   http://hci.ece.upatras.gr
Usability planner
  usabilityplanner.org




21/44                    http://hci.ece.upatras.gr
HUMAN FACTORS (ο ανθρώπινος παράγων)

    π.χ.Guidelines ( Nielsen)
   1.   Αποφυγή περιττών και σύνθετων στοιχείων.
   2.   Χρήση κατανοητής προς τους χρήστες γλώσσας.
   3.   Ελαχιστοποίηση μνημονικού φορτίου χρήστη.
   4.    Συνέπεια σε ολόκληρη την διεπιφάνεια.
   5.   Παροχή ανάδρασης.
   6.   Εύκολες και σαφείς έξοδοι διαφυγής.
   7.   Παροχή συντομεύσεων προς πεπειραμένους
        χρήστες.
   8.   Σχεδιασμός για αποτροπή σφαλμάτων χρήστη
   9.   Επαρκής υποστήριξη - Βοήθεια και Εγχειρίδια

22/44                                        http://hci.ece.upatras.gr
από HUMAN FACTORS
   to HUMAN ACTORS
   Η εμπειρία χρήσης πρέπει να παρέχει:
    Χαρακτηριστικά
      •Ικανοποίηση
       – Βελτίωση Εμπειρίας Χρήστη
      •Ευχαρίστηση
      •Διασκέδαση
      •Υποστήριξη
    Μικρότερος                   Μικρότερος χρόνος
    χρόνος                       ολοκλήρωσης
      •Κίνητρα                   εργασίας
    αναμονής
      •Αισθητική ικανοποίηση
      •Υποστήριξη για δημιουργικότητα
     Αμεσότητα                  Βελτίωση
     χειρισμών
      •Να ανταμείβει την προσπάθεια εύρους
                                χρήσης
                                ζώνης
      •Συναισθηματική πληρότητα
23/44                                      http://hci.ece.upatras.gr
& εφαρμογές
    Παραδείγματα αποτελεσμάτων του HCI Group




24/44                                 http://hci.ece.upatras.gr
HCI Group Πανεπιστήμιου Πατρών:
 15 χρόνια ιστορία




25/44                          http://hci.ece.upatras.gr
Υποδομή του Εργαστηρίου
        Usability Lab: Monitoring and logging
        behavioral patterns


                        Eyetracker




26/44                                http://hci.ece.upatras.gr
Παραδείγματα αποτελεσμάτων
        (α) InfoScent: Hyperlinks Evaluator

    For a given user goal and user profile the
     semantic appropriateness of hyperlinks
     is evaluated and the most probable
     user trail predicted in order to identify
     navigability/findability flaws
    Based on Information Foraging Theory
     (Pirolli & Card, 1997) Latent Semantic
     Analysis (Landauer & Dumais, 1997)

27/44                                                   27
                                       http://hci.ece.upatras.gr
InfoScent Evaluator
          (Katsanos et al. 2011)




28/44                   http://hci.ece.upatras.gr
InfoScent Evaluator –
               Computing Scent




29/44                 http://hci.ece.upatras.gr
(β) AutoCardSorter
        Information Architecture Support

  Given a description of the pages of a
   web site
  The AutoCardSorter runs an automated
   analysis: calculates the semantic
   similarity among all the pages,
  Clustering algorithms applied to group
   together semantically similar pages
30/44                              http://hci.ece.upatras.gr
(γ) ActivityLens: Ανάλυση δεδομένων
        πεδίου (Fiotakis et al.)




31/44                              http://hci.ece.upatras.gr
(δ) Web Accessibility tool
        Web site evaluation against WCAG v1.0 guidelines
        using IBM Rational Policy Tester




32/44                                                http://hci.ece.upatras.gr
(ε) SolomosMuseum
        Mobile Application: Guide and Games




33/44                             http://hci.ece.upatras.gr
(ζ) MuseumScrabble
        Ομαδικό παιχνίδι σύνδεσης αντικειμένων
        με έννοιες (Sintoris et al. 2011)




34/44                                http://hci.ece.upatras.gr
MuseumScrabble:
   σύνδεση μεταξύ εκθεμάτων




35/44                     http://hci.ece.upatras.gr
(η) Multi-touch
        surface project




36/44              http://hci.ece.upatras.gr
(θ) Synergo on
                tablets




37/44             http://hci.ece.upatras.gr
(ι) Design and Usability Evaluation
     of web portals

                                 SERIES Seismic Engineering
                                     Research Infrastructure




    ORCHESTRA: research on
    computer-based in
    silico methods for
    evaluating the toxicity of
    chemicals
38/44                                           http://hci.ece.upatras.gr
museumsolomos.gr

    QALIBRA




                ModellingSpace.net




 comode.com
39/44                     http://hci.ece.upatras.gr
(κ) Invisible City παιχνίδι πόλης
  με διαμόρφωση περιέχομένου από τους
  παίχτες:
                              [Sintoris et al. 2011 ]




  The game is a succession of phases where
     l   players debate, argue and vote
40/44l Carry out individual missions          http://hci.ece.upatras.gr
Invisible city - Rebels vs Spies:




                         Content for missions is
                         contributed through a web
                         site (e.g. a school teacher
                         can design a specific version
                         of the game for a school
                         party)
41/44                                         http://hci.ece.upatras.gr
Τρόποι αλληλεπίδρασης
            με χωροσήμανση
            QR codes
                Γ= πρόσβαση στην
                ιστοσελίδα με σχετικές
                πληροφορίες




A= σάρωση
κωδικού

                        Β= αναγνώριση
42/44                   κωδικού (πχ URI)
                                  http://hci.ece.upatras.gr
Social media and user
   experience
    l   intersocial




43/44                 http://hci.ece.upatras.gr
[περισσότερα]

  l hci.ece.upatras.gr
        –   Student projects
  l Μαθήματα:
        – Προγραμματισμός Διαδικτύου (9ο εξ.)
        – Επικοινωνία Ανθρώπου-Μηχανής &
          Σχεδίαση Διαδραστικών Συστημάτων
          (10ο εξ.)

44/44                                   http://hci.ece.upatras.gr

"Introduction to Human-Computer Interaction" and Applications ",Prof..N.Avouris

  • 1.
    IEEE Student Branch Computer Chapter Εισαγωγή στην Αλληλεπίδραση Ανθρώπου-Υπολογιστή και εφαρμογές Νίκος Αβούρης [ Πάτρα 16.02.2012 ]
  • 2.
    Αλληλεπίδραση Ανθρώπου-Υπολογιστή Επιστημονική περιοχή με αντικείμενο τη μελέτη της αλληλεπίδρασης των χρηστών με υπολογιστικά συστήματα, με ιδιαίτερη εστίαση στη σχεδίαση, ανάπτυξη και αξιολόγηση διαδραστικών συστημάτων (interactive computer systems) [ACM SIGCHI 1992]. 2/44 http://hci.ece.upatras.gr
  • 3.
    Αλληλεπίδραση με πολλή τεχνολογία 3/44 http://hci.ece.upatras.gr
  • 4.
    Αλληλεπίδραση χωρίς τεχνολογία Multi-touch floors multi-touch floor video 4/44 http://www.designlaunches.com http://hci.ece.upatras.gr
  • 5.
    Λόγοι που αξίζειη μελέτη.. l Σημασία Περιστοιχιζόμαστε όλο και περισσότερο από διαδραστικές τεχνολογίες (το διαδίκτυο, κινητά κλπ). l Κοινωνικοί λόγοι Σχεδιάζοντας πιο εύχρηστους υπολογιστές επιτελούμε κοινωνική προσφορά, σώζουμε ζωές, χρόνο, περιουσίες l Απαίτηση για δεξιότητες ειδικού ευχρηστίας και προσβασιμότητας από την αγορά εργασίας 5/44 http://hci.ece.upatras.gr
  • 6.
    Μια περιοχή σεδιαρκή εξέλιξη l Δεκαετία 70: πρώτα διαδραστικά υπολογιστικά συστήματα (PC) l … σήμερα: ανάπτυξη υλικού και λογισμικού υπολογιστών οθόνες υψηλής ανάλυσης, επεξεργαστές και ειδικές μνήμες αποθήκευσης γραφικής πληροφορίας, εξελίξεις στην ανάπτυξη και υλοποίηση αλγορίθμων γραφικής απεικόνισης , ανάπτυξη νέων συσκευών αλληλεπίδρασης (VR) διαδίκτυο και πανταχού παρών υπολογιστής (ubiquitous computing) 6/44 http://hci.ece.upatras.gr
  • 7.
    η προϊστορία τωνυπολογιστών … Οι χρήστες ήταν εξειδικευμένοι 7/44 http://hci.ece.upatras.gr
  • 8.
    Σήμερα: χρήστες: όλοι σχεδόν οι πολίτες Adam Greenfield, “Everyware: The Dawning Age of Ubiquitous Computing” 8/44 http://www.darkgovernment.com/news/tag/privacy/page/3/#ixzz1Ep1gAH41http://hci.ece.upatras.gr
  • 9.
    Μελέτη του ανθρώπουως επεξεργαστή πληροφορίας Αισθητήρια αντίληψη Γνώση Μνήμη Μάθηση Αυτοματισμοί Προσοχή Νοητικά Μαντέλα http://msdn.microsoft.com/en-us/magazine/ee335698.aspx 9/44 http://hci.ece.upatras.gr
  • 10.
    Σχεδίαση διαδραστικών συστημάτων Από interface design … σε interaction design … σε user experience design 10/44 http://hci.ece.upatras.gr
  • 11.
    Ανθρωπο-κεντρική σχεδίαση Design Prototype Η ανθρώπινη δραστηριότητα στο κέντρο μελέτης μας Evaluate 11/44 http://hci.ece.upatras.gr
  • 12.
    Παράδειγμα ανάλυσης αλληλεπίδρασης για σχεδίαση διαδραστικής τεχνολογίας 12/44 http://hci.ece.upatras.gr
  • 13.
    Νοητικά μοντέλα/ σχεδίαση Νοητικό Μοντέλο Νοητικό Μοντέλο Χρήστη Σχεδιαστή Διεπιφάνεια χρήστη/ Εργαλεία 13/44 http://hci.ece.upatras.gr
  • 14.
    Νοητικό Μοντέλο Συσκευής ΑΤΜ 14/44 http://hci.ece.upatras.gr
  • 15.
    Usability = Ευχρηστία H Ευχρηστία { (η) ουσ. το γνώρισμα του εύ-χρηστου, αυτού που μπορεί εύκολα να χρησιμοποιηθεί } παράμετρος ποιότητας ενός διαδραστικού συστήματος. 15/44 http://hci.ece.upatras.gr
  • 16.
    ISO 9241-11 Guidanceon Usability H δυνατότητα ενός προϊόντος που χρησιμοποιείται από καθορισμένους χρήστες με καθορισμένους στόχους, υπό καθορισμένες συνθήκες χρήσης να είναι αποτελεσματικό (effectiveness), αποδοτικό (efficiency) και να παρέχει υποκειμενική ικανοποίηση (satisfaction) στους χρήστες του 16/44 http://hci.ece.upatras.gr
  • 17.
    Usability model personal environment goals user user satisfaction interaction physical tasks output: environment effectiveness social and efficiency organisational environment product technical environment 17/44 http://hci.ece.upatras.gr
  • 18.
    Τεχνολογία Ευχρηστίας: Πρότυπα l ISO 13407 Human-Centered Design Process for Interactive Systems l ISO TR 18529 Human-centred lifecycle processes descriptions l ANSI/NCITS 354 / ISO 25062 Common Industry Format usability tests 18/44 http://www.upassoc.org/ http://hci.ece.upatras.gr
  • 19.
    Usability body ofknowledge http://www.usabilitybok.org/ 19/44 http://hci.ece.upatras.gr
  • 20.
    Usability guidelines 20/44 http://hci.ece.upatras.gr
  • 21.
    Usability planner usabilityplanner.org 21/44 http://hci.ece.upatras.gr
  • 22.
    HUMAN FACTORS (οανθρώπινος παράγων) π.χ.Guidelines ( Nielsen) 1. Αποφυγή περιττών και σύνθετων στοιχείων. 2. Χρήση κατανοητής προς τους χρήστες γλώσσας. 3. Ελαχιστοποίηση μνημονικού φορτίου χρήστη. 4. Συνέπεια σε ολόκληρη την διεπιφάνεια. 5. Παροχή ανάδρασης. 6. Εύκολες και σαφείς έξοδοι διαφυγής. 7. Παροχή συντομεύσεων προς πεπειραμένους χρήστες. 8. Σχεδιασμός για αποτροπή σφαλμάτων χρήστη 9. Επαρκής υποστήριξη - Βοήθεια και Εγχειρίδια 22/44 http://hci.ece.upatras.gr
  • 23.
    από HUMAN FACTORS to HUMAN ACTORS Η εμπειρία χρήσης πρέπει να παρέχει: Χαρακτηριστικά •Ικανοποίηση – Βελτίωση Εμπειρίας Χρήστη •Ευχαρίστηση •Διασκέδαση •Υποστήριξη Μικρότερος Μικρότερος χρόνος χρόνος ολοκλήρωσης •Κίνητρα εργασίας αναμονής •Αισθητική ικανοποίηση •Υποστήριξη για δημιουργικότητα Αμεσότητα Βελτίωση χειρισμών •Να ανταμείβει την προσπάθεια εύρους χρήσης ζώνης •Συναισθηματική πληρότητα 23/44 http://hci.ece.upatras.gr
  • 24.
    & εφαρμογές Παραδείγματα αποτελεσμάτων του HCI Group 24/44 http://hci.ece.upatras.gr
  • 25.
    HCI Group ΠανεπιστήμιουΠατρών: 15 χρόνια ιστορία 25/44 http://hci.ece.upatras.gr
  • 26.
    Υποδομή του Εργαστηρίου Usability Lab: Monitoring and logging behavioral patterns Eyetracker 26/44 http://hci.ece.upatras.gr
  • 27.
    Παραδείγματα αποτελεσμάτων (α) InfoScent: Hyperlinks Evaluator For a given user goal and user profile the semantic appropriateness of hyperlinks is evaluated and the most probable user trail predicted in order to identify navigability/findability flaws Based on Information Foraging Theory (Pirolli & Card, 1997) Latent Semantic Analysis (Landauer & Dumais, 1997) 27/44 27 http://hci.ece.upatras.gr
  • 28.
    InfoScent Evaluator (Katsanos et al. 2011) 28/44 http://hci.ece.upatras.gr
  • 29.
    InfoScent Evaluator – Computing Scent 29/44 http://hci.ece.upatras.gr
  • 30.
    (β) AutoCardSorter Information Architecture Support Given a description of the pages of a web site The AutoCardSorter runs an automated analysis: calculates the semantic similarity among all the pages, Clustering algorithms applied to group together semantically similar pages 30/44 http://hci.ece.upatras.gr
  • 31.
    (γ) ActivityLens: Ανάλυσηδεδομένων πεδίου (Fiotakis et al.) 31/44 http://hci.ece.upatras.gr
  • 32.
    (δ) Web Accessibilitytool Web site evaluation against WCAG v1.0 guidelines using IBM Rational Policy Tester 32/44 http://hci.ece.upatras.gr
  • 33.
    (ε) SolomosMuseum Mobile Application: Guide and Games 33/44 http://hci.ece.upatras.gr
  • 34.
    (ζ) MuseumScrabble Ομαδικό παιχνίδι σύνδεσης αντικειμένων με έννοιες (Sintoris et al. 2011) 34/44 http://hci.ece.upatras.gr
  • 35.
    MuseumScrabble: σύνδεση μεταξύ εκθεμάτων 35/44 http://hci.ece.upatras.gr
  • 36.
    (η) Multi-touch surface project 36/44 http://hci.ece.upatras.gr
  • 37.
    (θ) Synergo on tablets 37/44 http://hci.ece.upatras.gr
  • 38.
    (ι) Design andUsability Evaluation of web portals SERIES Seismic Engineering Research Infrastructure ORCHESTRA: research on computer-based in silico methods for evaluating the toxicity of chemicals 38/44 http://hci.ece.upatras.gr
  • 39.
    museumsolomos.gr QALIBRA ModellingSpace.net comode.com 39/44 http://hci.ece.upatras.gr
  • 40.
    (κ) Invisible Cityπαιχνίδι πόλης με διαμόρφωση περιέχομένου από τους παίχτες: [Sintoris et al. 2011 ] The game is a succession of phases where l players debate, argue and vote 40/44l Carry out individual missions http://hci.ece.upatras.gr
  • 41.
    Invisible city -Rebels vs Spies: Content for missions is contributed through a web site (e.g. a school teacher can design a specific version of the game for a school party) 41/44 http://hci.ece.upatras.gr
  • 42.
    Τρόποι αλληλεπίδρασης με χωροσήμανση QR codes Γ= πρόσβαση στην ιστοσελίδα με σχετικές πληροφορίες A= σάρωση κωδικού Β= αναγνώριση 42/44 κωδικού (πχ URI) http://hci.ece.upatras.gr
  • 43.
    Social media anduser experience l intersocial 43/44 http://hci.ece.upatras.gr
  • 44.
    [περισσότερα] lhci.ece.upatras.gr – Student projects l Μαθήματα: – Προγραμματισμός Διαδικτύου (9ο εξ.) – Επικοινωνία Ανθρώπου-Μηχανής & Σχεδίαση Διαδραστικών Συστημάτων (10ο εξ.) 44/44 http://hci.ece.upatras.gr