Διεπαφή Ανθρώπου Μηχανής Human-Computer Interface. 1. Εισαγωγή. Τμήμα Βιομηχανικής Πληροφορικής

Transcript

1 Διεπαφή Ανθρώπου Μηχανής Human-Computer Interface 1. Εισαγωγή Τμήμα Βιομηχανικής Πληροφορικής

2 Καθημερινότητα

3 Καθημερινότητα

4 Καθημερινότητα

5 Καθημερινότητα

6 Καθημερινότητα

7 Μέλλον? Intel Video Multitouch Video

8 Τι είναι η Επικοινωνία Ανθρώπου Υπολογιστή Ορισμός «Ο επιστημονικός κλάδος που ασχολείται με τη σχεδίαση, αξιολόγηση και υλοποίηση αλληλεπιδραστικών υπολογιστικών συστημάτων που προορίζονται για ανθρώπινη χρήση και τη μελέτη των σημαντικών φαινομένων που την περιβάλλουν» (ACM SIGCHI, 1992)

9 Τι είναι HCI «Αναφέρεται στη σχεδίαση συστημάτων που υποστηρίζουν τους ανθρώπους ώστε να πραγματοποιούν τις εργασίες τους παραγωγικά και με ασφάλεια» «Η μελέτη των ανθρώπων, της τεχνολογίας των υπολογιστών και των τρόπων που αλληλοεπηρεάζονται»

10 Τι είναι HCI «Είναι η μελέτη της εμπειρίας που προκαλείται στο χρήστη από τεχνολογίες της πληροφορικής» «Είναι η σχεδίαση και αξιολόγηση της υπολογιστικών τεχνολογιών όπου ο στόχος τους βασίζεται στην εμπειρία του χρήστη».

11 Τι είναι HCI Πιο απλά Πως εξασφαλίζουμε πως ένας υπολογιστής βοηθά παρά δυσκολεύει την εργασία μας; Τι καθιστά μια διεπαφή καλή;

12 HUMAN-COMPUTER-INTERACTION Άνθρωπος Ένας μεμονωμένος χρήστης ή μια ομάδα ατόμων που δουλεύουν μαζί Ο τρόπος με τον οποίο το αισθητηριακό μας σύστημα (οπτικό, ακουστικό, κτλ) ανιχνεύει τις πληροφορίες του περιβάλλοντος Ο τρόπος με τον οποίο εκφραζόμαστε και εκδηλώνουμε συμπεριφορές Ατομικές διαφορές Πολιτισμικές διαφορές

13 HUMAN-COMPUTER-INTERACTION Υπολογιστής Οποιαδήποτε τεχνολογία από PDA και προσωπικούς υπολογιστές μέχρι μεγάλου μεγέθους υπολογιστικά συστήματα και συστήματα εικονικής πραγματικότητας Embedded systems (μικροελεγκτές, οικιακές συσκευές κτλ. Φορητές συσκευές (PDAs, κινητά) Συστήματα εικονικής πραγματικότητας (Immersive Vr, simulators) Δικτυωμένες ομάδες υπολογιστών (clusters, intranets, internet) Ολοκληρωμένα συστήματα (game consoles, ATMs, DVD players κτλ)

14 HUMAN-COMPUTER-INTERACTION Αλληλεπίδραση Παρά τις καταφανείς διαφορές, η HCI προσπαθεί να διασφαλίσει ότι θα επικοινωνήσουν (αλληλεπιδράσουν) μεταξύ τους με επιτυχία

15 Επικοινωνία Ανθρώπου Υπολογιστή

16 Ο άνθρωπος

17 Ο υπολογιστής

18 Η αλληλεπίδραση

19 Η σχεδίαση

20 Επικοινωνία Ανθρώπου Υπολογιστή

21 Επικοινωνία Ανθρώπου Υπολογιστή

22 Ορισμοί Διεπιφάνεια χρήστη (User Interface) Το σύνολο των στοιχείων του υπολογιστικού συστήματος με τα οποία ο χρήστης έρχεται σε επαφή και αλληλεπιδρά συσκευές εισόδου-εξόδου: πληκτρολόγιο, οθόνη, κ.τ.λ. γραφικά αντικείμενα, ήχοι εντολές και χειρισμοί που ο χρήστης ενός συστήματος μπορεί να εκτελέσει η οργάνωση της ακολουθίας των ενεργειών του χρήστη και των ανταποκρίσεων του συστήματος (διάλογος χρήσης) Διαδραστικά Υπολογιστικά Συστήματα (Interactive Systems) συστήματα που αλληλεπιδρούν σε μεγάλο βαθμό με τους χρήστες τους Επικοινωνία Ανθρώπου-Υπολογιστή -ΕΑΥ (Human-Computer Interaction, HCI) Η επιστήμη που έχει σαν αντικείμενο τη μελέτη, το σχεδιασμό, την ανάπτυξη και την αξιολόγηση διαδραστικών συστημάτων (διεπιφανειών) Ανθρωπο-κεντρικός σχεδιασμός (User-centered design) Η εμπλοκή σε μεγάλο βαθμό των χρηστών κατά τη σχεδίαση και ανάπτυξη συστημάτων λογισμικού

23 Σχεδίαση

24 Ο στόχος Ο στόχος της HCI είναι να προάγει τη δημιουργία εύχρηστων, ασφαλών και λειτουργικών συστημάτων. Για να το πετύχει αυτό, οι σχεδιαστές πρέπει Να κατανοούν τους παράγοντες που καθορίζουν πως τα άτομα χρησιμοποιούν τη τεχνολογία Να επιδιώκουν αποδοτική, αποτελεσματική και ασφαλή αλληλεπίδραση Να βάζουν πρώτα τους ανθρώπους!

25 Διαδικασία ανάπτυξης διεπαφών

26 Διαδικασία ανάπτυξης διεπαφών Ανάλυση εργασιών Άμεση προτυποποίηση Αξιολόγηση Επανάληψη

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

28 Διαδικασία ανάπτυξης διεπαφών Άμεση προτυποποίηση Δημιούργησε ένα mock-up Τεχνικές χαμηλής πιστότητας Σκίτσα Κολάζ Διαδραστικά εργαλεία προτυποποίησης HTML, Flash, Javascript Εργαλεία ανάπτυξης διεπαφών Visual studio, NetBeans κτλ.

29 Διαδικασία ανάπτυξης διεπαφών Αξιολόγηση Τεστ με πραγματικούς πελάτες Ανάπτυξη μοντέλων Χαμηλού κόστους τεχνικές Αξιολόγηση ειδικών Περιδιάβασμα Υψηλό κόστος Ελεγχόμενες μελέτες ευχρηστίας

30 Διαδικασία ανάπτυξης διεπαφών

31 Διαθεματικές ομάδες Στην πραγματικότητα, οι ομάδες σχεδιασμού διεπαφών αποτελούνται από πολλά άτομα με διαφορετικά υπόβαθρα Διαφορετικές προοπτικές και τρόποι εξέτασης και συζήτησης ζητημάτων Κέρδη Περισσότερες ιδέες Μειονεκτήματα Δύσκολη επικοινωνία Δύσκολη επίτευξη συνεννόησης Δύσκολη λήψη αποφάσεων

32 Διεπιστημονικές ομάδες Επιστήμη των Υπολογιστών Ανάπτυξη της τεχνολογίας Ψυχολογία και Γνωστική επιστήμη Μελέτη των γνωστικών, αντιληπτικών και συναισθηματικών δεξιοτήτων των χρηστών Εργονομία Μελέτη των φυσιολογικών δεξιοτήτων και περιορισμών των χρηστών Κοινωνιολογία Κοινωνικές και οργανωσιακές δομές ως ως το ευρύτερο πλαίσιο της αλληλεπίδρασης Γλωσσολογία Διεπαφές επικοινωνίας με φυσική γλώσσα

33 Συσχέτιση με διαφορετικά γνωστικά αντικείμενα

34 34 Γιατί όμως ΕΑΥ Επικοινωνία Ανθρώπου Υπολογιστή - Τμήμα Βιομηχανικής Πληροφορικής - ΤΕΙ Καβάλας

35 Γιατί μελετάμε την EAY;

36 Γιατί μελετάμε την EAY; Είναι εξαιρετικά σημαντικό τμήμα των «πραγματικών» προγραμμάτων λογισμικού Σχεδόν 50% Κακές διεπαφές κοστίζουν Χρήματα (5% αύξηση σε ικανοποίηση => 85% αύξηση κερδών Ζωές Είναι δύσκολο να αναπτυχθούν καλές διεπαφές

37 Γιατί μελετάμε την EAY; Είναι εξαιρετικά σημαντικό τμήμα των «πραγματικών» προγραμμάτων λογισμικού Σχεδόν 50% Κακές διεπαφές κοστίζουν Χρήματα (5% αύξηση σε ικανοποίηση => 85% αύξηση κερδών Ζωές Είναι δύσκολο να αναπτυχθούν καλές διεπαφές

38 Γιατί μελετάμε την EAY; Η επικοινωνία ανθρώπου υπολογιστή συμβάλλει αποφασιστικά ιδιαίτερα σε περιπτώσεις συστημάτων που ελέγχουν κρίσιμες λειτουργίες Βιομηχανία Ιατρική Μεταφορές

39 Γιατί μελετάμε την EAY; Πυρηνικό ατύχημα (Three Mile Island) Μια ενδεικτική λυχνία υποδείκνυε εσφαλμένα ότι είχε κλείσει μια βαλβίδα Μια κρίσιμη ένδειξη στον πίνακα ελέγχουν κρυβόταν από μια πινακίδα Το σύστημα συναγερμών παρείχε ηχητικές και οπτικές ενδείξεις για 1500 συμβάντα που δε μπορούσαν να ακυρωθούν το καθένα ξεχωριστά Με συνέπεια Το σύστημα να μην υποδεικνύει την αιτία του σφάλματος και να παρέχει υπερπληροφόρηση

40 Γιατί μελετάμε την EAY; Αεροπορικό ατύχημα (Am.Airlines) Καθώς πλησίαζε το αεροδρόμιο Rozo στη Κολομβία Ο πιλότος υπερπήδησε κάποιες από τις διαδικασίες προσέγγισης Έγραψε R και το σύστημα συμπλήρωσε το υπόλοιπο όνομα του αεροδρομίου προσγείωσης σε Romeo Ο αυτόματος πιλότος εκτέλεσε στροφή σε χαμηλό ύψος για το αεροδρόμιο Romeo 9 δευτερόλεπτα αργότερα το αεροπλάνο κατέπεσε

41 Αλλά και πιο απλά παραδείγματα... Η αλληλεπίδραση με ένα φωτοτυπικό

42 Αλλά και πιο απλά παραδείγματα... Η αλληλεπίδραση με μια καφετιέρα

43 Αλλά και πιο απλά παραδείγματα... Η αλληλεπίδραση με ένα ασανσέρ

44 Καλός και κακός σχεδιασμός Η αλληλεπίδραση με τηλεχειριστήρια

45 Ένα παράδειγμα... Η αλληλεπίδραση με MP3-players

46 Πρωτότυπες συσκευές Augmented Document Editing Blowing Interface E-book reader Home input device

47 Ιστορία της EAY

48 Παρελθόν Vannevar Bush, 1945 As We May Think

49 Παρελθόν - MEMEX

50 Παρελθόν - MEMEX Η πρώτη σύλληψη για το υπερκείμενο και το WWW Μια συσκευή που αποθηκεύει όλες τις πληροφορίες που χρησιμοποιεί κάθε άνθρωπος (προσωπικά βιβλία, σημειώσεις, αλληλογραφία κτλ.) Όλες οι πληροφορίες ανακτώνται ακαριαία μέσω δεικτοδότησης, λέξεων κλειδιά, αναφορών,... Τα άτομα μπορούν να επισημειώσουν το κείμενο ή να δημιουργήσουν περιφερειακές σημειώσεις και σχόλια Μπορούν να δημιουργήσουν αλυσίδες συνδέσμων Το σύστημα λειτουργεί ως εξωτερική μνήμη mmmm mmmm mmm mm mmmm mmm mmmm mmmm mmm mm mmmm mmm mmm m mmm m mmm mm mmm m mmm mmm m mmm m mmm mm mmm m mmm

51 From IBM Archives. Eniac (1943)

52 From Harvard University Cruft Photo Laboratory. Mark I (1944)- tape readers

53 IBM SSEC (1948) From IBM Archives.

54 1954-RAND s vision of the future 54 From ImageShack web site // ; original source unknown

55 J.C.R. Licklider (1960) Πρώτη περιγραφή man-computer symbiosis (συμβίωση ανθρώπου μηχανής) The hope is that, in not too many years, human brains and computing machines will be coupled together very tightly and that the resulting partnership will think as no human brain has ever thought and process data in a way not approached by the information-handling machines we know today.

56 J.C.R. Licklider (1960) Δημιούργησε λίστα στόχων που θεωρούσε ως προϋπόθεση για τη συμβίωση ανθρώπου-μηχανής Άμεσοι στόχοι: Διαμοιρασμός χρόνου υπολογιστών μεταξύ πολλών χρηστών Δημιουργία συμβολικών μορφών επικοινωνίας Προγραμματισμός και αλληλεπίδραση πραγματικού χρόνου Αποθήκευση και ανάκληση πληροφοριών large scale information storage and retrieval

57 J.C.R. Licklider (1960) Ενδιάμεσοι στόχοι: Διευκόλυνση της συνεργασίας στη σχεδίαση και στο προγραμματισμό μεγάλων συστημάτων Συνδυασμός αναγνώρισης φωνής, αναγνώρισης γραφής Μακροπρόθεσμοι στόχοι: Κατανόηση φυσικής γλώσσας Αναγνώριση φυσικής γλώωσας Ευριστικός προγραμματισμός

58 From IBM Archives. Stretch (1961)

59 Ivan Sutherland s SketchPad-1963 PhD Περίπλοκο σχεδιαστικό πρόγραμμα που εισήγαγε τις περισσότερες από τις ιδέες που χρησιμοποιούμε ακόμη και σήμερα Ιεραρχικές δομές Αντικειμενοστραφής προγραμματισμός Περιορισμοί Εικονίδια Αντιγραφή Τεχνικές εισόδου Σύστημα συντεταγμένων Αναδρομικές λειτουργίες From

60 Ivan Sutherland s SketchPad-1963 PhD Βίντεο

61 Ivan Sutherland s SketchPad-1963 PhD

62 History of HCI The First Mouse (1964)

63 AFIP Conference, Επεξεργασία κειμένου Σύγχρονη επεξεργασία κειμένου Επεξεργασία περιγράμματος Υπερμέσα Είσοδος/Έξοδος Ποντίκι και πληκτρολόγιο Οθόνες υψηλής ανάλυσης Πολλαπλά παράθυρα Ειδικά σχεδιασμένη επίπλωση Διαμοιραζόμενη εργασία Διαμοιραζόμενα αρχεία και προσωπικές σημειώσεις Ηλεκτρονικά μηνύματα Διοαμοιραζόμενες οθόνες με πολλαπλούς δείκτες audio/video conferencing Ιδέες για ένα Internet Αξιολόγηση χρηστών/εκπαίδευση

64 Ο προσωπικός υπολογιστής Alan Kay (1969) Dynabook vision και πρωτότυπο ενός φορητού υπολογιστή

65 Ο προσωπικός υπολογιστής Ted Nelson 1974: Computer Lib/Dream Machines Βιβλίο που περιέγραφε τι μπορούν να κάνουν οι υπολογιστές σε προσωπική χρήση (και όχι για επιχειρηματική)

66 Ο προσωπικός υπολογιστής Xerox PARC, μέσα- 70s Alto computer, Τοπικός επεξεργαστής, bit-mapped οθόνη, ποντίκι Σύγχρονη διεπαφή γραφικών Επεξεργασία κειμένου και σχεδίων, ηλεκτρονική αλληλογραφία παράθυρα, μενού, μπάρες κύλισης, επιλογές ποντικιού, κτλ. Τοπικό δίκτυο Μπορούσε να κάνει χρήση κοινόχρηστων πόρων

67 Ο προσωπικός υπολογιστής

68 Ο προσωπικός υπολογιστής

69 Ο προσωπικός υπολογιστής

70 Xerox Star-1981 Ο πρώτος εμπορικός προσωπικός υπολογιστής για «επαγγελματίες» Πρώτη ολοκληρωμένη διεπαφή Επιφάνεια εργασίας WYSIWYG Υψηλός βαθμός συνέπειας και απλότητας

71 Xerox Star-1981 Πρώτο σύστημα που βασίστηκε σε usability engineering Εκτεταμένα πρωτότυπα και ανάλυση χρήσης Ανάλυση ευχρηστίας με πραγματικούς χρήστες Κυκλικός επαναπροσδιορισμός προδιαγραφών Εμπορική αποτυχία Κόστος ($15,000) IBM μόλις είχε ανακοινώσει ένα προσωπικό υπολογιστή πολύ χαμηλότερου κόστους Περιορισμένη λειτουργικότητα Δεν υποστήριζε φύλλα επεξεργασίας δεδομένων Κλειστή αρχιτεκτονική Φαινόταν ως αργός Αλλά ήταν γρήγορος! Επίμονη εφαρμογή της αρχή του άμεσου χειρισμού (direct manipulation)

72 Apple Lisa (1983) Πολλές ιδέες από το STAR Ο πρόγονος των Macintosh, Αρκετά φθηνότερο ($10,000) Επίσης εμπορική αποτυχία

73 Apple Macintosh (1984) Παλιές ιδέες καλά υλοποιημένες! πέτυχε γιατί: Επιθετική τιμολογιακή πολιτική ($2500) Βελτίωσε τα λάθη του Lisa, πιο ώριμη εκδοχή Η αγορά πιο έτοιμη Εργαλείο για την ανάπτυξη λογισμικού από τρίτους Συνεπείς διεπαφές μεταξύ εφαρμογών Εξαιρετικά γραφικά και αντίστοιχο λογισμικό για την επεξεργασία τους

74 Personal Digital Assistants (1990+)

75 Mobile Devices (1990+)

76 Τι έρχεται στο μέλλον; Έξυπνα δωμάτια, αυτοκίνητα και σπίτια Υπολογιστές που φοριούνται Διεπαφές πολλαπλών καναλιών Διεπαφές οπουδήποτε

77 Περισσότερα Howard Rheingold Tools for Thought History of interactive breakthroughs

78 78 Από την έρευνα στην αγορά Επικοινωνία Ανθρώπου Υπολογιστή - Τμήμα Βιομηχανικής Πληροφορικής - ΤΕΙ Καβάλας

79 Brad A. Myers. "A Brief History of Human Computer Interaction Technology." ACM interactions. Vol. 5, no. 2, March, pp

80 1963 SketchPad (Ivan Sutherland) 1970s Alto (Xerox PARC) 1975 Icons (David Canfield Smith) 1977 Dynabook (Alan Kay) 1981 Xerox Star 1982 Apple Lisa 1982 Direct Manipulation (Shneiderman) 1984 Apple Macintosh 1985 Windows Tangible UIs (Fitzmaurice)

81 1965 Englebart, English (SRI) 1970s Xerox PARC 1981 Xerox Star 1982 Apple Lisa 1984 Apple Macintosh

82 1968 Tiled: NLS (Englebart et al) 1969 Overlapping: Alan Kay s thesis 1974 SmallTalk (Alan Kay) 1974 EMACS (MIT) 1981 Xerox Star 1982 Apple Lisa 1984 Apple Macintosh 1984 X-Windows 1985 Windows Windows 95

83 1962 Word Processor (Englebart, SRI) 1965 TVEdit (Stanford) 1967 Hypertext Editing System w/ Lightpen (Brown) 1968 NLS w/ Mouse (Englebart, SRI) 1974 EMACS (MIT) 1974 Bravo w/ WYSIWYG (Lampson, Simonyi, Xerox PARC) 1981 Xerox Star 1982 Apple Lisa (LisaWrite) 1984 Apple Macintosh (MacWrite)

84 1945 Vannevar Bush 1965 NLS (Englebart, SRI) 1967 Hypertext Editing System (van Dam, Nelson, Brown) 1983 Hyperties (Shneiderman) 1988 Hypercard (Apple) 1989 World Wide Web (Berners-Lee, CERN) 1992 Mosaic Web Browser (NCSA) 1994 Netscape Navigator

85 1962 RAND Tablet Pen-Based Input 1963 SketchPad (Ivan Sutherland) 1964 GRAIL recognizer (RAND) 1970s CAD 1983 Myron Krueger 1992 Apple Newton 1993 Unistrokes (Goldberg, PARC) 1997 Palm Pilot

86 Το μάθημα Syllabus

87 Στην επόμενη διάλεξη Ο άνθρωπος Ψυχολογία Φυσιολογία