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

Παρουσίαση με θέμα: "ΕΠΛ 435: Αλληλεπίδραση Ανθρώπου Υπολογιστή"— Μεταγράφημα παρουσίασης:

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

2 Μεθοδολογία LUCID (Logical User-Centred Interactive Design)
Φάση 1: Ανάπτυξη αρχικής ιδέας του συστήματος Φάση 2. Ανάλυση αναγκών και απαιτήσεων Φάση 3. Σχεδιασμός προϊόντος με πρότυπη βασική οθόνη Φάση 4. Επαναληπτικός σχεδιασμός και βελτίωση πρωτοτύπου Φάση 5. Ανάπτυξη συστήματος Φάση 6. Υποστήριξη αρχικής λειτουργίας (από: Methodologia anapti3ies diadrastikon sistimaton Lamvanei iposin sovara to xristi Stirizete sto e3elektiko montelo sxediasis

3 Εισαγωγή scenarios task analysis what is wanted guidelines principles
design implement and deploy prototype interviews ethnography what is there vs. guidelines principles dialogue notations precise specification architectures documentation help evaluation heuristics scenarios task analysis . Edo tha sinexisoume gia sto sxediasmo .. Prepei na livthoun apofaseis ... Opos: stil allilepidrasis, ktl

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

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

6 Πρωτοτυποποίηση Είναι λειτουργικά ημιτελής Δεν καλύπτει ολόκληρο το σύστημα Υστερεί σε επιδόσεις από το τελικό σύστημα Eίναι γνωστά και ως “design mockup” (τεχνικά ομοιώματα σχεδίασης) Σε άλλα πεδία είναι ένα μοντέλο μικρής κλίμακας του τελικού προιόντος: Ένα αυτοκίνητο μινιατούρα Μια πόλη από σπίτια, δρόμους, γέφυρες κτλ. Τα πρωτότυπα αποτελούν βασικά συστατικά στοιχεία της επαναληπτικής σχεδίασης (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) αναφέρεται στο βαθμό λεπτομέρειας του πρωτοτύπου Υψηλή πιστότητα Τα πρωτότυπα ομοιάζουν με το τελικό σύστημα Είναι πλήρως διαδραστικά Ενδιάμεση πιστότητα Είναι κατασκευασμένα από κάποιο λογισμικό πρωτοτυποποίησης όπως Visual Basic, Smaltalk κλπ. ή από σχεδιαστικά πακέτα λογισμικού (Photoshop, Visio κλπ.) Είναι διαδραστικά όσον αφορά την διεπιφάνεια (πλοήγηση, διάλογοι, μηνύματα, βοήθεια) αλλά όχι όσον αφορά τη λειτουργικότητα

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

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

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

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

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

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

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

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

24 Πρωτότυπα από χαρτί Paper prototype of typical forms-filling screen
a tabs-based design source:

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 Limited field testing Alpha/Beta tests High fidelity prototypes Working systems Τελική φάση σχεδίασης

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

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

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

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

31 Ενδιάμεση πιστότητα Πρωτοτυποποίηση με χρήση υπολογιστή:
Χρήση λογισμικού πρωτοτυποποίησης όπως Visual Basic, 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 Ο Μάγος του Οζ – Παραδείγματα
Intelligent Agents / Programming by demonstration Ένας άνθρωπος είχε εκπαιδευτεί να μιμείται ένα “learning agent” (μαθητευόμενο πράκτορα). Ο χρήστης παρέχει παραδείγματα για το πως εκτελούνται κάποιες εργασίες και ο υπολογιστής πρέπει να μάθει να τις εκτελεί μόνος του Η μεθοδολογία εφαρμόστηκε ώστε να αναγνωριστεί πως οι χρήστες καθορίζουν τις προς εκτέλεση εργασίες τους The Wizard

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) Μέχρι την Παρασκευή να στείλετε τα ονόματα των ατόμων που θα περιλαμβάνονται στην ομάδα για την εργασία στις διευθύνσεις: KAI Επιπλέον υλικό: Five paper prototyping tips: Storyboarding 20/09/2013 Τμήμα Πληροφορικής