ΕΠΛ 435: Αλληλεπίδραση Ανθρώπου Υπολογιστή

1. ΕΠΛ 435:Αλληλεπίδραση ΑνθρώπουΥπολογιστή Σχεδίαση διαδραστικών συστημάτων Πρωτοτυποποίηση

2. Μεθοδολογία LUCID (Logical User-Centred Interactive Design) • Φάση 1: Ανάπτυξη αρχικής ιδέας του συστήματος • Φάση 2. Ανάλυση αναγκών και απαιτήσεων • Φάση 3. Σχεδιασμός προϊόντος με πρότυπη βασική οθόνη • Φάση 4. Επαναληπτικός σχεδιασμός και βελτίωση πρωτοτύπου • Φάση 5. Ανάπτυξη συστήματος • Φάση 6. Υποστήριξη αρχικής λειτουργίας (από: www.cognetics.com)

3. scenariostask analysis guidelines principles precisespecification interviews ethnography what is there vs. what is wanted dialoguenotations evaluation heuristics architectures documentation help Εισαγωγή what iswanted analysis design implement and deploy prototype

4. Ερώτηση Δεν θα ήταν σημαντικό να ανακαλύψετε τι θέλουν οι χρήστες σας, πριν να ξεκινήσετε την επίπονη διαδικασία της συγγραφής του κώδικα; Η πρωτοτυποποίηση σε χαρτί σας επιτρέπει να κάνετε ακριβώς αυτό. Ενώ μπορεί να φανεί σε κάποιον αντιφατικό να δοκιμάσει μια διεπιφάνεια χρήσης χωρίς τη χρήση υπολογιστή, η προτυποποίηση σε χαρτί είναι μια ενδεδειγμένη μέθοδος η οποία σας επιτρέπει να έχετε τη μέγιστη ανάδραση από τους χρήστες σας με ελάχιστο κόστος ανάπτυξης.

5. Πρωτοτυποποίηση Σκοπός: μοντελοποίηση του τελικού συστήματος, καθιστώντας δυνατή την εξέταση των χαρακτηριστικών του, ακόμα και όταν αυτό δεν έχει ολοκληρωθεί. Πότε: σε οποιοδήποτε στάδιο της διαδικασίας ανάπτυξης. Είναι δυνατό να εφαρμοστεί μια επαναληπτική, εξελικτική προσέγγιση στην πρωτοτυποποίηση, ώστε να αναπτύσσονται πρωτότυπα με όλο και περισσότερη λειτουργικότητα και πιστότητα στο τελικό σύστημα.

6. Πρωτοτυποποίηση • Είναι λειτουργικά ημιτελής • Δεν καλύπτει ολόκληρο το σύστημα • Υστερεί σε επιδόσεις από το τελικό σύστημα • Eίναιγνωστά και ως “designmockup” (τεχνικά ομοιώματασχεδίασης) • Σε άλλα πεδία είναι ένα μοντέλο μικρής κλίμακας του τελικούπροιόντος: • Ένα αυτοκίνητο μινιατούρα • Μια πόλη από σπίτια, δρόμους, γέφυρες κτλ. Τα πρωτότυπα αποτελούν βασικά συστατικά στοιχεία της επαναληπτικήςσχεδίασης (iterative) που έχουν στόχο την ενεργοποίηση των χρηστών κατάτη διαδικασία σχεδίασης – ανάπτυξης του συστήματος.

7. Γιατί χρειαζόμαστε πρωτότυπα; • Για να πάρουμε πληροφορίες ανάδρασης (feedback) σχετικά με τη σχεδίασημας νωρίτερα • Κέρδος σε χρόνο και χρήμα • Οι χρήστες και άλλοι ενδιαφερόμενοι μπορούν ευκολότερα να δουν,κρατήσουν και να αλληλεπιδράσουν με ένα πρωτότυπο παρά με ένα κείμενο ήένα σχεδιάγραμμα. • Σταδιακή εξοικείωση με το σύστημα των χρηστών

8. Γιατί χρειαζόμαστε πρωτότυπα; • Επιτρέπουν τον πειραματισμό με εναλλακτικές σχεδιάσεις • Η αξιολόγηση εναλλακτικών σχεδιάσεων μέσω των πρωτοτύπων τους επιτρέπειτην απόρριψη αρκετών από αυτές από τα αρχικά στάδια της σχεδίασης • Διορθώνονται λάθη πριν την ανάπτυξη σε επίπεδο κώδικα ή υλικού • Η χρήση πρωτοτύπων διατηρεί τη σχεδίαση ανθρωποκεντρική στην οποία ηαξιολόγηση και η ανάδραση είναι κεφαλαιώδους σημασίας • Επιτρέπουν στα μέλη της ομάδας σχεδιασμού να ομιλούν επάνω σε μια κοινήβάση

9. Κατηγορίες πρωτοτύπων • Με βάση την πιστότητα • Χαμηλής πιστότητας (low fidelity) • Ενδιάμεσης πιστότητας (medium fidelity) • Yψηλής πιστότητας (high fidelity) • Με βάση τις υποστηριζόμενες λειτουργίες • Οριζόντια • Κάθετα • Με βάση τον τρόπο ενσωμάτωσης τους στο τελικόσύστημα • Αναλώσιμα (throw-away) • Αυξητικά (incremental) • Εξελικτικά (evolutionary)

10. Ενσωμάτωση στο τελικό σύστημα • Αναλώσιμα (throw-away) • Το πρωτότυπο έχει στόχο απλά να εκμαιεύσει την αντίδραση των χρηστών • Το πρωτότυπο πρέπει να δημιουργείται γρήγορα και σχετικά ανέξοδα αλλιώςεπιβαρύνεται το τελικό κόστος του συστήματος

11. Ενσωμάτωση στο τελικό σύστημα • Αυξητικά (incremental) • Το τελικό σύστημα αναπτύσσεται ως ένα σύνολο από ανεξάρτητατμήματα(modules) • Κάθε τμήμαπρωτοτυποποιείται, ελέγχεται και στη συνέχεια προστίθεται στοτελικό σύστημα

12. Ενσωμάτωση στο τελικό σύστημα • Εξελικτικά (evolutionary) • Το πρωτότυπο βελτιώνεται σταδιακά έως ότου καταλήξει στο τελικό σύστημα • Οι αλλαγές στη σχεδίαση προκύπτουν από την ανάλυση απαιτήσεων χρηστών καιτα διάφορα στάδια αξιολόγησης • Είναι χρήσιμη και αποτελεσματική μέθοδος όταν οι διάφορες εργασίες πουυποστηρίζονται από τη διεπιφάνεια είναι από τη φύση τους ανεξάρτητες μεταξύτους

13. Υποστηριζόμενες λειτουργίες • Οριζόντια • Πρωτοτυποποιείται ολόκληρη η διεπιφάνεια χωρίς στην ουσία ναυπάρχει καμία λειτουργικότητα • Δίνει την συνολική εικόνα της διεπιφάνειας και είναι πολύσημαντική στο ανθρωποκεντρικό σχεδιασμό • Κάθετα • Περιλαμβάνουν σχεδόν πλήρη λειτουργικότητα για επιλεγμένεςεργασίες / χαρακτηριστικά • Τα χαρακτηριστικά που πρωτοτυποποιούνται με αυτό τον τρόποείναι συνήθως κοινές λειτουργίες της διεπιφάνειας (π.χ.λειτουργίες σε σχέση με διαχείριση αρχείων: open, save, …) • Εργασίες και σενάρια που σχετίζονται με τα παραπάνωχαρακτηριστικά μπορούν να ελεγχθούν εξονυχιστικά

14. Οριζόντια και Κάθετα Πρωτότυπα (Συνδυασμός)

15. Πιστότητα και πρωτοτυποποίηση Η πιστότητα (fidelity) αναφέρεται στο βαθμό λεπτομέρειας του πρωτοτύπου • Υψηλή πιστότητα • Τα πρωτότυπα ομοιάζουν με το τελικό σύστημα • Είναι πλήρως διαδραστικά • Ενδιάμεση πιστότητα • Είναι κατασκευασμένα από κάποιο λογισμικό πρωτοτυποποίησης όπως VisualBasic, Smaltalk κλπ. ή από σχεδιαστικά πακέτα λογισμικού (Photoshop, Visio κλπ.) • Είναι διαδραστικά όσον αφορά την διεπιφάνεια (πλοήγηση, διάλογοι, μηνύματα, βοήθεια) αλλά όχι όσον αφορά τη λειτουργικότητα

16. Πιστότητα και πρωτοτυποποίηση • Χαμηλή πιστότητα • Είναι κατά βάση πρωτότυπα σε χαρτί με μειωμένη ή μηδενική διαδραστικότητα • Στοχεύουν στην διερεύνηση εναλλακτικών σχεδιάσεων από τις αρχικές φάσεις σχεδίασης • Υψηλή ή χαμηλή πιστότητα; • Εξαρτάται … Τμήμα Πληροφορικής

17. Χαμηλή πιστότητα • Χρησιμοποιούνται μέσα αναπαράστασης τα οποία είναι διαφορετικά από το τελικό μέσο που θα χρησιμοποιηθεί στο σύστημα: χαρτί, κάρτες, εκτύπωση οθονών συστήματος κλπ. • Δημιουργούνται γρήγορα, κοστίζουν λίγο, αλλάζουν εύκολα και ενεργοποιούν τη φαντασία ως προς τη χρήση • Στόχοι • Συζήτηση και αξιολόγηση εναλλακτικών σχεδιάσεων • Εκμαίευση αντιδράσεων χρηστών • Εκμαίευση τροποποιήσεων / εισηγήσεων χρηστών • Παραδείγματα: • Σκαριφήματα (sketchesofscreens) • Κάρτες (cardboard) • Σειρά από σκηνές κινουμένων σχεδίων (storyboard)

18. Πρωτοτυποποίηση σε χαρτί

19. Διαδικασία εφαρμογής Πρέπει πρώτα να έχετε καταγράψει με σαφήνεια τις απαιτήσεις των χρηστών (συνήθως αναπαρίστανται με usecasediagrams που μάθατε στο μάθημα της τεχνολογίας λογισμικού) που θέλουν να ολοκληρώσουν μέσα από το σύστημα. Στη συνέχεια, φτιάχνεται στιγμιότυπα οθονών σκιαγραφώντας σχέδια που σχετίζονται με όλες τις πτυχές τις αλληλεπίδρασης όπως μενού, παράθυρα διαλόγου, σελίδες, popup μηνυμάτων, κλπ. που απαιτούνται για να την ολοκλήρωση κάθε στόχου του χρήστη.

20. Διαδικασία εφαρμογής (2) Στη συνέχεια ελέγχουμε την χρηστικότητα των σχεδίων μας στα πλαίσια πειραματικής διάταξης στην οποία ένας ή δύο προγραμματιστές παίζουν το ρόλο του "υπολογιστή", προσομοιώνοντας την λειτουργία του συστήματος, αντικαθιστώντας κομμάτια των σχεδίων ανάλογα με τις επιλογές του χρήστη. Οι χρήστες (που πρέπει να είναι αντιπροσωπευτικοί) εκτελούν συγκεκριμένες εργασίας αλληλεπιδρώντας άμεσα με το πρωτότυπο - "κλικ" αγγίζοντας το κουμπιά στο πρωτότυπο ή συνδέσμους και "τύπος" γράφοντας τα στοιχεία τους σε πεδία επεξεργασίας του πρωτοτύπου του. (Χρησιμοποιώντας μια διαφάνεια ή αφαιρούμενη ταινία μπορούμε να χρησιμοποιούμε τα πρωτότυπα με πολλαπλούς χρήστες μιας και αποφεύγουμε την εγγραφή πάνω του.)

21. Πότε και γιατί εφαρμόζεται η πρωτοτυποποίηση σε χαρτί (1/2); Ορολογία: Καταλαβαίνουν οι χρήστες σας τους όρους και την ορολογία που έχετε επιλέξει; Υπάρχουν βασικά έννοιες που παρερμηνεύονται ή δεν είναι κατανοητές από τους χρήστες σας; Πλοήγηση / ροή αλληλεπίδρασης: Υπάρχει κάποια αλληλουχία ή σειρά βημάτων που απαιτούνται για την ολοκλήρωση μιας εργασίας και δεν είναι κατανοητή από τους χρήστες; Μήπως οι χρήστες μου πλοηγούνται ανεξέλεγκτα για την ολοκλήρωση μιας εργασίας;

22. Πότε και γιατί εφαρμόζεται η πρωτοτυποποίηση σε χαρτί (2/2); Περιεχόμενο: Παρέχεται στους χρήστες τις απαιτούμενες πληροφορίες με σκοπό να μπορέσουν να ολοκληρώσουν τις διεργασίες τους; Μήπως υπάρχουν περαιτέρω πληροφορίες που δεν χρειάζονται στον χρήστη και του αποσπούν την προσοχή; Λειτουργικότητα: Υπάρχουν λειτουργικότητες που απουσιάζουν από την σχεδίασή σας, ή μήπως υπάρχουν λειτουργικότητες που δεν τις χρειάζονται οι χρήστες σας.

23. Πότε δεν ενδύκνυται Η πρωτοτυποποίηση σε χαρτί δεν ενδείκνυται για τις παρακάτω διερευνητικού τύπου περιστάσεις: αρτιότητα υλοποίησης, χρόνο απόκρισης λογισμικού, χρήση scrollbars, αισθητική εμφάνιση (visualdesign & aesthetics).

24. Πρωτότυπα από χαρτί Paper prototype of typical forms-filling screen Paper prototype of a tabs-based design source: http://www.nngroup.com/reports/prototyping/video_stills.html

25. Πρωτότυπα από χαρτί User test of a high-fidelity paper prototype of a homepage Testing hardware user interfaces: mockup of a kiosk

26. Σχεδίαση εναλλακτικών επιλογών Επιλογή μιας από τις διαφορετικές προσεγγίσεις Χονδροειδής καθορισμός διεπιφάνειας Low fidelity paper prototypes Περιδιάβασμα διεργασιών και σεναρίων και επανασχεδίασηΛεπτομερής καθορισμός διεπιφάνειας, σχεδίαση οθονών Ευρετική αξιολόγηση και επανασχεδίασηΑξιολόγηση ευχρηστίας και επανασχεδίαση Medium fidelity prototypes High fidelity prototypes Working systems Limited field testing Alpha/Beta tests Πιστότητα πρωτοτύπου και φάση σχεδίασης Αρχικές φάσεις σχεδίασης Τελική φάση σχεδίασης

27. Storyboarding (I) • Αποτελούν μια σειρά από αντιπροσωπευτικές οθόνες: • Προέρχονται από τη λογική της σκηνοθεσίας στον κινηματογράφο • Οι οθόνες αντιπροσωπεύουν σημαντικά χρονικά σημεία στην αλληλεπίδραση ανθρώπου -συστήματος • Χρησιμοποιούνται για την οπτικοποίηση σεναρίων χρήσης με στόχο την αποσαφήνιση των: • Διαδοχής υποεργασιών • Ροής πληροφορίας • Ενεργειών χρήστη • Χρησιμοποιούνται σχετικά νωρίς στη σχεδίαση και συνήθως αμέσως μετά την καταγραφή των βασικών εργασιών και την ανάπτυξη σεναρίων χρήσης

28. Help Screen Computer Telephone Computer Telephone You can enter either the Call by person's name or their Establishing Last Name: Last Name: Greenberg Help-> Computer Telephone name-> number. Then hit the connection-> First Name: First Name: place button to call them Phone: Phone: Last Name: First Name: Place Call Help Place Call Help Return Phone: Place Call Help Computer Telephone Computer Telephone Call Call Dialling.... Connected Last Name: Greenberg Last Name: Greenberg connected... completed... First Name: First Name: Cancel Hang up Phone: Phone: Place Call Help Place Call Help Storyboard of a computer telephone

29. Σκαριφήματα • Τα σκαριφήματα είναι μια σημαντική μέθοδος πρωτοτυποποίησης χαμηλής πιστότητας • Αποτελούν σχέδια της εξωτερικής εμφάνισης της διεπιφάνειας ή οθονών του συστήματος • Η τραχύτητα των σκαριφημάτων αναγκάζει τους χρήστες να επικεντρώνονται σε υψηλού επιπέδου έννοιες και όχι σε λεπτομέρειες • Η καλλιτεχνική ικανότητα του σχεδιαστή δεν πρέπει να είναι πρόβλημα. Μπορούν να χρησιμοποιηθούν απλά σύμβολα • Μειονέκτημα: • Λόγω της περιορισμένης διαδραστικότητας αδυνατούν να συλλάβουν τη δυναμική των διαλόγων

30. Σκαριφήματα (ΙΙ) • Τα σκαριφήματα είναι αναλώσιμα πρωτότυπα και παράγονται μαζικά για αυτό συχνά είναι προτιμότερο να έχουμε παράλληλες σχεδιάσεις: • Δύο ή τρία άτομα από την ομάδα σχεδίασης εργάζονται ανεξάρτητα για τη δημιουργία σκαριφημάτων με στόχο τη διερεύνηση εναλλακτικών επιλογών • Η φάση αυτή της παράλληλης σχεδίασης μπορεί να διαρκέσει από μερικές ώρες έως το πολύ δύο ημέρες

31. Ενδιάμεση πιστότητα • Πρωτοτυποποίηση με χρήση υπολογιστή: • Χρήση λογισμικού πρωτοτυποποίησης όπως VisualBasic, Smaltalk, Macromedia Director κλπ.) • Χρήση σχεδιαστικών πακέτων λογισμικού (Photoshop, Visio κλπ.) • Χρήση λογισμικού προσομοίωσης (π.χ. Simulink, Toolbook, Spice, FPGA κλπ.) • Είναι διαδραστικά όσον αφορά την διεπιφάνεια (πλοήγηση, διάλογοι, μηνύματα, βοήθεια) αλλά όχι όσον αφορά τη λειτουργικότητα • Προσανατολισμός στον έλεγχο της διεπιφάνειας από τους τελικούς χρήστες

32. Ενδιάμεση πιστότητα • Στόχοι • Έλεγχος λεπτομέρειας (π.χ. υλοποίηση περιπτώσεων χρήσης) από τους χρήστες • Δημιουργία διεπιφάνειας η οποία είναι πιο κοντά στο τελικό σύστημα • Δυνατότητα οικοδόμησης τελικού συστήματος επί του πρωτοτύπου μέσω αυξητικής ή / και εξελικτικής σχεδίασης • Κίνδυνοι • Επικέντρωση χρηστών σε ασήμαντες λεπτομέρειες • Δημιουργία ψευδαίσθησης πραγματικού συστήματος (τόσο στους χρήστες όσο και στους managers)

33. Ενδιάμεση πιστότητα (ΙΙ) • Παραδείγματα: • Σχεδιαστικά πακέτα • Ο μάγος του Οζ (‘Wizard of Oz’) • Προσομοιώσεις με κώδικα • Λογισμικό καθορισμού της μορφής της διεπιφάνειας (layout)

34. Σχεδιαστικά πακέτα • Οι οθόνες σχεδιάζονται με εργαλεία δημιουργίας γραφικών ώστε να δίνουν πιο σαφή εικόνα της διεπιφάνειας • Πρακτικά εφαρμόζονται σε περιπτώσεις οριζόντιας πρωτοτυποποίησης η οποία καλύπτει όλη τη διεπιφάνεια αλλά δεν υποστηρίζει πρακτικά καμία λειτουργικότητα • Δίνουν μειωμένη αίσθηση διαδραστικότητας

35. Ο Μάγος του Οζ • Ο χρήστης νομίζει ότι αλληλεπιδρά με το σύστημα αλλά στη πραγματικότητα ο σχεδιαστής: • Διερμηνεύει την είσοδο του χρήστη μέσω κάποιου αλγορίθμου • Ελέγχει το σύστημα ώστε να δημιουργήσει την κατάλληλη έξοδο • Η διεπιφάνεια μπορεί να πραγματική ή εικονική πράγμα που οδηγεί στην περίπτωση αόρατου ή ορατού μάγου (“pay no attention to the man behind the curtain!”) User >Blurb blurb >Do this >Why?

36. Ο Μάγος του Οζ (ΙΙ) • Πολύ καλή μεθοδολογία για: • Κατανόηση των προσδοκιών των χρηστών από το σύστημα • Οραματισμό και έλεγχο καινοτόμων προϊόντων • Πρόσθεση σύνθετων λειτουργιών (κάθετη πρωτοτυποποίηση) • Μειονεκτήματα: • Μεγάλο κόστος • Δυσκολία υλοποίησης • Καθυστέρηση στις απαντήσεις από τους σχεδιαστές σε σχέση με το πραγματικό σύστημα • Δημιουργία υψηλών προσδοκιών από τους χρήστες • Άλλο υπολογιστής άλλο άνθρωπος (υποσυνείδητες ενέργειες σχεδιαστή)

37. The Wizard Ο Μάγος του Οζ – Παραδείγματα • Intelligent Agents / Programming by demonstration • Ένας άνθρωπος είχε εκπαιδευτεί να μιμείται ένα “learning agent” (μαθητευόμενο πράκτορα). Ο χρήστης παρέχει παραδείγματα για το πως εκτελούνται κάποιες εργασίες και ο υπολογιστής πρέπει να μάθει να τις εκτελεί μόνος του • Η μεθοδολογία εφαρμόστηκε ώστε να αναγνωριστεί πως οι χρήστες καθορίζουν τις προς εκτέλεση εργασίες τους

38. Προσομοιώσεις με κώδικα (scripted simulations) • Στην ουσία αποτελούν υλοποίηση των storyboards σε περιβάλλον υπολογιστή: • Η επιλογή ενός πλήκτρου από τον χρήστη ενεργοποιεί μια νέα οθόνη (ή κάποια αλλαγή στην υφιστάμενη) • Είναι πολύ καλά για έλεγχο σεναρίων και περιπτώσεων χρήσης και χρησιμοποιούνται κατά κόρον σε κάθετες προσομοιώσεις • Εναλλακτική συμπεριφορά του συστήματος προσομοιάζεται με τη χρήση διαφορετικών scripts (μικρού τμήματος κώδικα) • Ο χρήστης βλέπει το προσομοιωμένο σύστημα να συμπεριφέρεται όπως θα συμπεριφερόταν το πραγματικό • Πολύ σημαντικό για τον έλεγχο διαλόγων, μηνυμάτων σφάλματος, και online βοήθειας

39. Καλό βράδυ • Βασισμένο στα κεφάλαια 5 και 6 του βιβλίου Alan Dix et al. Human Computer Interaction και Κεφάλαιο 8 του βιβλίου: Jennifer Preece, Yvonne Rogers, Helen Sharp, Interaction Design: Beyond Human-Computer Interaction, John Wiley & Sons, Second Edition, 2007 • Μην ξεχάσετε την Άσκηση 2 (καταληκτική ημ. 27/9/13) • Μέχρι την Παρασκευή να στείλετε τα ονόματα των ατόμων που θα περιλαμβάνονται στην ομάδα για την εργασία στις διευθύνσεις: stellak@cs.ucy.ac.cyKAIbelk@cs.ucy.ac.cy • Επιπλέον υλικό: • Five paper prototyping tips: http://www.uie.com/articles/prototyping_tips/ • Storyboardinghttp://acomp.stanford.edu/tutorials/storyboarding Τμήμα Πληροφορικής