Ανάπτυξη Πρωτοτύπων
Περιεχόμενα Ορισμός μοντέλου πλοήγησης Επιλογή κυρίαρχης μεταφοράς Ορισμός βασικών οθονών Πρωτοτυποποίηση Τι είναι πρωτότυπο; Γιατί χρειαζόμαστε πρωτότυπα; Κατηγορίες πρωτοτύπων Χαμηλή πιστότητα Ενδιάμεση πιστότητα
Βιβλιογραφία Dix [2004]: Chapter 6, Preece [2002]: Chapter 8, User Centered Design and Prototyping, by S. Greenberg, Prototyping in HCI, by Dr. Philip Craiger
Εισαγωγή what is wanted interviews ethnography what is there vs. what is wanted scenarios task analysis analysis evaluation heuristics dialogue notations prototype guidelines principles design precise specification implement and deploy architectures documentation help
Σχεδιασμός με πρότυπη βασική οθόνη [ ] Ορισμός ειδικών στόχων ευχρηστίας σύμφωνα με τις ανάγκες των χρηστών [ ] Δημιουργία οδηγιών σχεδιασμού και οδηγού στυλ αλληλεπίδρασης [ ] Ορισμός ενός μοντέλου πλοήγησης και της κυρίαρχης μεταφοράς διεπιφάνειας [ ] Ορισμός της ομάδας των βασικών οθονών: εισαγωγική οθόνη, κεντρική οθόνη (home screen), βασικές οθόνες κύριων διεργασιών. [ ] Κατασκευή πρωτοτύπου των βασικών οθονών, χρησιμοποιώντας εργαλεία γρήγορης πρωτοτυποποίησης Για το πρωτότυπο, ζητείται η γνώμη των χρηστών και γίνονται οι πρώτες μετρήσεις ευχρηστίας
Ορισμός μοντέλου πλοήγησης Τα μοντέλα πλοήγησης απαντούν στο ερώτημα με ποιο τρόπο θα κινείται ο χρήστης ανάμεσα σε διαφορετικές οθόνες του συστήματος Από την πλευρά του σχεδιαστή το μοντέλο πλοήγησης λειτουργεί ως «Πίνακας Περιεχομένων» Για τον ορισμό του μοντέλου πλοήγησης πρέπει να διερευνηθούν οι επόμενες ερωτήσεις: Πόσο σημαντικό είναι ο χρήστης να ακολουθήσει μια συγκεκριμένη διαδρομή από οθόνες; Γραμμική πλοήγηση (κατάλληλο για αρχάριους και ευκαιριακούς χρήστες) Δενδροειδής ή ιεραρχική πλοήγηση (κατάλληλη για σύνθετες εργασίες που μπορούν να αναλυθούν σε αυτόνομες υποεργασίες) Χαοτική πλοήγηση (κατάλληλη για πεπειραμένους χρήστες με υψηλό βαθμό κατανόησης τόσο των εργασιών που επιτελούνται όσο και της ίδιας της διεπιφάνειας) Πόσο αυτόνομες είναι οι εργασίες που υποστηρίζονται από τη διεπιφάνεια Πόσο σημαντικό είναι ο χρήστης να γνωρίζει σε ποια από τις οθόνες τις διεπιφάνειας βρίσκεται; Χρήση ή όχι χάρτη προσανατολισμού (site map)
Επιλογή κυρίαρχης μεταφοράς Η κυρίαρχη μεταφορά έχει νόημα εφόσον έχει επιλεγεί το στυλ αλληλεπίδρασης απευθείας χειρισμός Αν έχει επιλεγεί στυλ αλληλεπίδρασης «φόρμες εισαγωγής στοιχείων» η «μενού επιλογών» η κυρίαρχη μεταφορά είναι προφανής: ορίζεται από το στυλ αλληλεπίδρασης Η επιλογή της κυρίαρχης μεταφοράς σε πολλές περιπτώσεις υποδεικνύεται από το αντίστοιχο φυσικό σύστημα: Διαδικτυακό τηλέφωνο => κυρίαρχη μεταφορά τηλεφωνική συσκευή Διαδικτυακό μάθημα => κυρίαρχη μεταφορά βιβλίο Προσομοιωτής πτήσεων => κυρίαρχη μεταφορά κονσόλα πλοήγησης αεροσκάφους Εντούτοις η επιλογή της κυρίαρχης μεταφοράς στην πλειονότητα των περιπτώσεων δεν είναι εύκολη: Επιλογή θέσεων στο θέατρο ή κινηματογράφο => Γραφική απεικόνιση της φυσικής διάταξης θέσεων Online ανθοπωλείο =>? (κατάλογος;) Online ενοικίαση DVD =>? (κατάλογος ή αναζήτηση;)
Ορισμός βασικών οθονών Οθόνη εισόδου Καλωσόρισμα χρήστη Ποιοι είμαστε Συνοπτική επεξήγηση συστήματος Ρυθμίσεις (γλώσσα επικοινωνίας, αλλαγή στοιχείων χρήστη, χρήση βοήθειας κλπ.) Σημαντικές ανακοινώσεις Εισήγηση επόμενης δράσης από το χρήστη Login Κεντρική οθόνη (home): Βασικό σημείο διακλάδωσης προς τις άλλες βασικές οθόνες (μέσω επιλογών προς αυτές) Επιστροφή σε αυτήν μετά από πάροδο συγκεκριμένου (ανενεργού) χρονικού διαστήματος Δυνατότητα επιστροφής σε αυτή από κάθε άλλη βασική οθόνη με μια μόνο επιλογή Βασικές οθόνες: Αντιπροσωπεύουν τις κύριες εργασίες που πρέπει να επιτελούνται από το σύστημα π.χ. αναζήτηση, περιδιάβασμα καταλόγου, πληροφορίες για τον χρήστη κλπ. Δεδομένης της ανθρωποκεντρικής σχεδίασης καλό είναι οι βασικές οθόνες να αντιπροσωπεύουν τις εργασίες που επιτελεί συχνά ο χρήστης και όχι εργασίες που έχουν να κάνουν με το σύστημα (π.χ. Ο χρήστης σπάνια θα χρησιμοποιήσει το ATM με βασικό στόχο την αλλαγή PIN)
Δομή Ποιά είναι η «φόρμα» του site Αριθμός σελίδων, βάθος, αριθμός συνδέσμων, πρόσβαση στις σελίδες
Τρόποι οργάνωσης πλέγμα σειριακή ιεραρχική
Παράδειγμα Table of Contents FAQ Entry Page Home Page Credits Exit Page Content Pages
Ένα ακόμα παράδειγμα 1 ης σελίδας Old Computing home page New Computing home page
Πρωτοτυποποίηση Πρωτοτυποποίηση ονομάζουμε την ανάπτυξη μιας εκδοχής του συστήματος η οποία: Είναι λειτουργικά ημιτελής Δεν καλύπτει ολόκληρο το σύστημα Υστερεί σε επιδόσεις από το τελικό σύστημα Τα πρωτότυπα είναι γνωστά και ως design mockup (τεχνικά ομοιώματα σχεδίασης) Σε άλλα πεδία πρωτότυπο είναι ένα μοντέλο μικρής κλίμακας του τελικού συστήματος: Ένα αυτοκίνητο μινιατούρα Μια πόλη από σπίτια, δρόμους, γέφυρες και αυτοκίνητα μινιατούρες Τα πρωτότυπα αποτελούν βασικά συστατικά στοιχεία της επαναληπτικής σχεδίασης (iterative) που έχουν στόχο την ενεργοποίηση των χρηστών κατά τη διαδικασία σχεδίασης ανάπτυξης του συστήματος.
Πρωτοτυποποίηση = > Τι είναι πρωτότυπο; Στη διαδραστική σχεδίαση ή στη σχεδίαση διεπιφανειών χρήστη το πρωτότυπο μπορεί να είναι (ανάμεσα σε άλλα): Μια σειρά από σκαριφήματα (sketches) Μια σειρά από σκηνές κινουμένων σχεδίων (a storyboard) Μια παρουσίαση Powerpoint Ένα video το οποίο προσομοιώνει τη χρήση του συστήματος Ένα κομμάτι από ξύλο! Μια σειρά από κάρτες Λογισμικό με περιορισμένη λειτουργικότητα
Πρωτοτυποποίηση = > Γιατί χρειαζόμαστε πρωτότυπα; Για να πάρουμε πληροφορίες ανάδρασης (feedback) σχετικά με τη σχεδίαση μας νωρίτερα Κέρδος σε χρόνο και χρήμα Οι χρήστες και άλλοι ενδιαφερόμενοι μπορούν ευκολότερα να δουν, κρατήσουν και να αλληλεπιδράσουν με ένα πρωτότυπο παρά με ένα κείμενο ή ένα σχεδιάγραμμα. Σταδιακή εξοικείωση με το σύστημα των χρηστών Επιτρέπουν την τον πειραματισμό με εναλλακτικές σχεδιάσεις Η αξιολόγηση εναλλακτικών σχεδιάσεων μέσω των πρωτοτύπων τους επιτρέπει την απόρριψη αρκετών από αυτές από τα αρχικά στάδια της σχεδίασης Διορθώνονται λάθη πριν την ανάπτυξη σε επίπεδο κώδικα ή υλικού Η χρήση πρωτοτύπων διατηρεί τη σχεδίαση ανθρωποκεντρική στην οποία η αξιολόγηση και η ανάδραση είναι κεφαλαιώδους σημασίας Επιτρέπουν στα μέλη της ομάδας σχεδιασμού να ομιλούν επάνω σε μια κοινή βάση
Πρωτοτυποποίηση = > Για ποια ζητήματα αναπτύσσουμε πρωτότυπα; Για τεχνικά θέματα Συστήματα βάσεων δεδομένων Λειτουργικό σύστημα και υλικό Εργαλεία ανάπτυξης Ροή πληροφοριών Σχεδίαση εργασιών / λειτουργιών Ροή (διαδοχή) εργασιών Σταδιακή εξοικείωση με το σύστημα των χρηστών Σχεδίαση οθονών, διαλόγου και εμφάνισης πληροφοριών Για επίλυση δύσκολων, επίμαχων και κρίσιμων σημείων όσον αφορά τη σχεδίαση
Πρωτοτυποποίηση = > Κατηγορίες πρωτοτύπων Με βάση την πιστότητα Χαμηλής πιστότητας (low fidelity) Ενδιάμεσης πιστότητας (medium fidelity) Yψηλής πιστότητας (high fidelity) Με βάση τις υποστηριζόμενες λειτουργίες Οριζόντια Κάθετα Με βάση τον τρόπο ενσωμάτωσης τους στο τελικό σύστημα Αναλώσιμα (throw-away) Αυξητικά (incremental) Εξελικτικά (evolutionary)
Πρωτοτυποποίηση = > Κατηγορίες πρωτοτύπων => Ενσωμάτωση στο τελικό σύστημα Αναλώσιμα (throw-away) Το πρωτότυπο έχει στόχο απλά να εκμαιεύσει την αντίδραση των χρηστών Το πρωτότυπο πρέπει να δημιουργείται γρήγορα και σχετικά ανέξοδα αλλιώς επιβαρύνεται το τελικό κόστος του συστήματος Αυξητικά (incremental) Το τελικό σύστημα αναπτύσσεται ως ένα σύνολο από ανεξάρτητα τμήματα (modules) Κάθε τμήμα πρωτοτυποποιείται, ελέγχεται και στη συνέχεια προστίθεται στο τελικό σύστημα Είναι χρήσιμη και αποτελεσματική μέθοδος όταν οι διάφορες εργασίες που υποστηρίζονατι από τη διεπιφάνεια είναι από τη φύση τους ανεξάρτητες μεταξύ τους (π.χ. το σύστημα taxisnet για διεκπεραίωση φορολογικών ζητημάτων) Εξελικτικά (evolutionary) Το πρωτότυπο βελτιώνεται σταδιακά έως ότου καταλήξει στο τελικό σύστημα Οι αλλαγές στη σχεδίαση προκύπτουν από την ανάλυση απαιτήσεων χρηστών και τα διάφορα στάδια αξιολόγησης
Πρωτοτυποποίηση = > Κατηγορίες πρωτοτύπων => Υποστηριζόμενες λειτουργίες Οριζόντια Προτυποποιείται ολόκληρη η διεπιφάνεια χωρίς στην ουσία να υπάρχει καμία λειτουργικότητα Δίνει την συνολική εικόνα της διεπιφάνειας και είναι πολύ σημαντική στο ανθρωποκεντρικό σχεδιασμό Κάθετα Περιλαμβάνουν σχεδόν πλήρη λειτουργικότητα για επιλεγμένες εργασίες / χαρακτηριστικά Τα χαρακτηριστικά που πρωτοτυποποιούνται με αυτό τον τρόπο είναι συνήθως κοινές λειτουργίες της διεπιφάνειας (π.χ. λειτουργίες σε σχέση με διαχείριση αρχείων: open, save, ) Εργασίες και σενάρια που σχετίζονται με τα παραπάνω χαρακτηριστικά μπορούν να ελεγχθούν εξονυχιστικά
Πρωτοτυποποίηση = > Κατηγορίες πρωτοτύπων => Οριζόντια και Κάθετα Πρωτότυπα Different Features Scenario Full System Functionality Vertical Nielsen, 1993 Horizontal
Πρωτοτυποποίηση = > Κατηγορίες πρωτοτύπων => Πιστότητα και πρωτοτυποποίηση Η πιστότητα (fidelity) αναφέρεται στο βαθμό λεπτομέρειας του πρωτοτύπου Υψηλή πιστότητα Τα πρωτότυπα ομοιάζουν με το τελικό σύστημα Είναι πλήρως διαδραστικά Ενδιάμεση πιστότητα Είναι κατασκευασμένα από κάποιο λογισμικό πρωτοτυποποίησης όπως Visual Basic, Smaltalk κλπ. ή από σχεδιαστικά πακέτα λογισμικού (Photoshop, Visio κλπ.) Είναι διαδραστικά όσον αφορά την διεπιφάνεια (πλοήγηση, διάλογοι, μηνύματα, βοήθεια) αλλά όχι όσον αφορά τη λειτουργικότητα Χαμηλή πιστότητα Είναι κατά βάση πρωτότυπα σε χαρτί με μειωμένη ή μηδενική διαδραστικότητα Στοχεύουν στην διερεύνηση εναλλακτικών σχεδιάσεων από τις αρχικές φάσεις σχεδίασης Υψηλή ή χαμηλή πιστότητα; Εξαρτάται
Πρωτοτυποποίηση = > Κατηγορίες πρωτοτύπων => Πιστότητα πρωτοτύπου και φάση σχεδίασης Σχεδίαση εναλλακτικών επιλογών Επιλογή μιας από τις διαφορετικές προσεγγίσεις Χονδροειδής καθορισμός διεπιφάνειας Αρχικές φάσεις σχεδίασης Low fidelity paper prototypes Περιδιάβασμα διεργασιών και σεναρίων και επανασχεδίαση Λεπτομερής καθορισμός διεπιφάνειας, σχεδίαση οθονών Ευριστική αξιολόγηση και επανασχεδίαση Αξιολόγηση ευχρηστίας και επανασχεδίαση Limited field testing Medium fidelity prototypes High fidelity prototypes Alpha/Beta tests Working systems Τελική φάση σχεδίασης
Πρωτοτυποποίηση = > Κατηγορίες πρωτοτύπων => Χαμηλή πιστότητα Χρησιμοποιούνται μέσα αναπαράστασης τα οποία είναι διαφορετικά από το τελικό μέσο που θα χρησιμοποιηθεί στο σύστημα: χαρτί, κάρτες, εκτύπωση οθονών συστήματος κλπ. Δημιουργούνται γρήγορα, κοστίζουν λίγο, αλλάζουν εύκολα και ενεργοποιούν τη φαντασία ως προς τη χρήση Στόχοι Συζήτηση και αξιολόγηση εναλλακτικών σχεδιάσεων Εκμαίευση αντιδράσεων χρηστών Εκμαίευση τροποποιήσεων / εισηγήσεων χρηστών Παραδείγματα: Σκαριφήματα (sketches of screens) Κάρτες (cardboard) Σειρά από σκηνές κινουμένων σχεδίων (storyboard)
Πρωτοτυποποίηση = > Κατηγορίες πρωτοτύπων => Χαμηλή πιστότητα => Σκαριφήματα Τα σκαριφήματα είναι μια σημαντική μέθοδος πρωτοτυποποίησης χαμηλής πιστότητας Αποτελούν σχέδια της εξωτερικής εμφάνισης της διεπιφάνειας ή οθονών του συστήματος Η τραχύτητα των σκαριφημάτων αναγκάζει τους χρήστες να επικεντρώνονται σε υψηλού επιπέδου έννοιες και όχι σε λεπτομέρειες Η καλλιτεχνική ικανότητα του σχεδιαστή δεν πρέπει να είναι πρόβλημα. Μπορούν να χρησιμοποιηθούν απλά σύμβολα Μειονέκτημα: Λόγω της περιορισμένης διαδραστικότητας αδυνατούν να συλλάβουν τη δυναμική των διαλόγων Computer Telephone Last Name: First Name: Phone: Place Call Help Control panel for pump 2 DANGER! coolant flow 0 % retardant 20% speed 100% Shut Down
Πρωτοτυποποίηση = > Κατηγορίες πρωτοτύπων => Χαμηλή πιστότητα => Σκαριφήματα (ΙΙ) Τα σκαριφήματα είναι αναλώσιμα πρωτότυπα και παράγονται μαζικά για αυτό συχνά είναι προτιμότερο να έχουμε παράλληλες σχεδιάσεις: Δύο ή τρία άτομα από την ομάδα σχεδίασης εργάζονται ανεξάρτητα για τη δημιουργία σκαριφημάτων με στόχο τη διερεύνηση εναλλακτικών επιλογών Η φάση αυτή της παράλληλης σχεδίασης μπορεί να διαρκέσει από μερικές ώρες έως το πολύ δύο ημέρες
Πρωτοτυποποίηση = > Κατηγορίες πρωτοτύπων => Χαμηλή πιστότητα => Storyboarding (I) Αποτελούν μια σειρά από αντιπροσωπευτικές οθόνες: Προέρχονται από τη λογική της σκηνοθεσίας στον κινηματογράφο Οι οθόνες αντιπροσωπεύουν σημαντικά χρονικά σημεία στην αλληλεπίδραση ανθρώπου -συστήματος Χρησιμοποιούνται για την οπτικοποίηση σεναρίων χρήσης με στόχο την αποσαφήνιση των: Διαδοχής υποεργασιών Ροής πληροφορίας Ενεργειών χρήστη Υπευθυνότητας συστήματος Χρησιμοποιούνται σχετικά νωρίς στη σχεδίαση και συνήθως αμέσως μετά την καταγραφή των βασικών εργασιών και την ανάπτυξη σεναρίων χρήσης
Initial screen Scan the stroller -> Change the color -> Place the order ->
Alternate path Scan the shirt -> Touch previous item -> Delete that item->
Πρωτοτυποποίηση = > Κατηγορίες πρωτοτύπων => Χαμηλή πιστότητα => Storyboard of a computer telephone Computer Telephone Last Name: First Name: Phone: Help-> 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: Establishing connection-> Place Call Help Return Place Call Help Computer Telephone Last Dialling... Name: Greenberg First Name: Phone: Cancel Call connected... Computer Telephone Last Connected Name: Greenberg First Name: Phone: Hang up Call completed... Computer Telephone Last Name: First Name: Phone: Place Call Help Place Call Help Place Call Help
Πρωτοτυποποίηση = > Κατηγορίες πρωτοτύπων => Χαμηλή πιστότητα => Κάρτες (Cardboard) Οι κάρτες χρησιμοποιούνται για να προσδώσουν διαδραστικότητα στα σκαριφήματα: Συνήθως έχουν μέγεθος 3 X 5 inches. Κάθε κάρτα αναπαριστά μια οθόνη Οι οθόνες παρουσιάζονται στο χρήστη ανάλογα με την επιλογή που έχει κάνει σε μια προηγούμενη οθόνη Χρησιμοποιούνται συχνά στη σχεδίαση διεπιφάνειας online συστημάτων Μια πολύ διαδεδομένη μεθοδολογία σχεδίασης με ενεργή συμμετοχή χρηστών (participatory design) χρησιμοποιεί τη λογική των καρτών: η PICTIVE
Πρωτοτυποποίηση = > Κατηγορίες πρωτοτύπων => Χαμηλή πιστότητα => Μεθοδολογία PICTIVE PICTIVE = Plastic Interface for Collaborative Technology InitiatiVEs Περιλαμβάνει ένα σύνολο από χάρτινα πρωτότυπα και αναλώσιμα υλικά γραφείου (post it notes, κόλλα, κλπ) Δίνει τη δυνατότητα συνεργασίας σε ανθρώπους από διαφορετικές γνωστικές περιοχές (σχεδιαστές, μηχανικούς, χρήστες κλπ.) Μεθοδολογία σχεδίασης με δυνατότητα επί τόπου αλλαγών (on the fly) Καταβάλλεται προσπάθεια εκτέλεσης σεναρίων Ακολουθία βημάτων ανάπτυξης πρωτοτύπων PICTIVE: Σχεδίαση => Εκτέλεση λειτουργιών από χρήστες => Συλλογή ανάδρασης => Τροποποίηση Σε πολλές περιπτώσεις η διαδικασία βιντεοσκοπείται για περαιτέρω ανάλυση: Plastic interface for collaborative technology initiatives through video exploration
Πρωτοτυποποίηση = > Κατηγορίες πρωτοτύπων => Χαμηλή πιστότητα => Μεθοδολογία PICTIVE (ΙΙ) Κάποια τμήματα της διαπροσωπείας μπορούν να ετοιμαστούν εκ των προτέρων buttons menu alert box combo box tabs list box entries
Πρωτοτυποποίηση = > Κατηγορίες πρωτοτύπων => Χαμηλή πιστότητα => Μεθοδολογία PICTIVE (ΙΙΙ) Post-It Notes Index Cards Colored Pens
Πρωτοτυποποίηση = > Κατηγορίες πρωτοτύπων => Χαμηλή πιστότητα => Μεθοδολογία PICTIVE (ΙV) File Edit Help New Open Save Save As Print Print Setup Exit Add User Username: Password: Status: Error Duplicate user Name! OK OK Cancel
Πρωτοτυποποίηση = > Κατηγορίες πρωτοτύπων => Χαμηλή πιστότητα => Μεθοδολογία PICTIVE (V)
Πρωτοτυποποίηση = > Κατηγορίες πρωτοτύπων => Ενδιάμεση πιστότητα Πρωτοτυποποίηση με χρήση υπολογιστή: Χρήση λογισμικού πρωτοτυποποίησης όπως Visual Basic, Smaltalk, Macromedia Director κλπ.) Χρήση σχεδιαστικών πακέτων λογισμικού (Photoshop, Visio, Flash κλπ.) Χρήση λογισμικού πρωτοτυποποίησης (π.χ. ToonBoom, Storyboard QuickPro, κλπ.) Είναι διαδραστικά όσον αφορά την διεπιφάνεια (πλοήγηση, διάλογοι, μηνύματα, βοήθεια) αλλά όχι όσον αφορά τη λειτουργικότητα Προσανατολισμός στον έλεγχο της διεπιφάνειας από τους τελικούς χρήστες Στόχοι Έλεγχος λεπτομέρειας (π.χ. υλοποίηση περιπτώσεων χρήσης) από τους χρήστες Δημιουργία διεπιφάνειας η οποία είναι πιο κοντά στο τελικό σύστημα Δυνατότητα οικοδόμησης τελικού συστήματος επί του πρωτοτύπου μέσω αυξητικής ή / και εξελικτικής σχεδίασης Κίνδυνοι Επικέντρωση χρηστών σε ασήμαντες λεπτομέρειες Δημιουργία ψευδαίσθησης πραγματικού συστήματος (τόσο στους χρήστες όσο και στους managers)
Πρωτοτυποποίηση = > Κατηγορίες πρωτοτύπων => Ενδιάμεση πιστότητα (ΙΙ) Παραδείγματα: Σχεδιαστικά πακέτα Ο μάγος του Οζ ( Wizard of Oz ) Προσομοιώσεις με κώδικα Λογισμικό καθορισμού της μορφής της διεπιφάνειας (layout)
Πρωτοτυποποίηση = > Κατηγορίες πρωτοτύπων => Ενδιάμεση πιστότητα => Σχεδιαστικά πακέτα Όπως τα σκαριφήματα αλλά οι οθόνες σχεδιάζονται με εργαλεία δημιουργίας γραφικών ώστε να δίνουν πιο σαφή εικόνα της διεπιφάνειας Πρακτικά εφαρμόζονται σε περιπτώσεις οριζόντιας πρωτοτυποποίησης η οποία καλύπτει όλη τη διεπιφάνεια αλλά δεν υποστηρίζει πρακτικά καμία λειτουργικότητα Δίνουν μειωμένη αίσθηση διαδραστικότητας Control panel for pump 2 Control panel for pump 2 coolant flow 45 % retardant 20% speed 100% next drawing (for shut down condition) DANGER! coolant flow 0 % retardant 20% speed 100% Shut Down Shut Down
Πρωτοτυποποίηση = > Κατηγορίες πρωτοτύπων => Ενδιάμεση πιστότητα => Ο Μάγος του Οζ Ο χρήστης νομίζει ότι αλληλεπιδρά με το σύστημα αλλά στη πραγματικότητα ο σχεδιαστής: Διερμηνεύει την είσοδο του χρήστη μέσω κάποιου αλγορίθμου Ελέγχει το σύστημα ώστε να δημιουργήσει την κατάλληλη έξοδο Η διεπιφάνεια μπορεί να είναι πραγματική ή εικονική πράγμα που οδηγεί στην περίπτωση αόρατου ή ορατού μάγου ( pay no attention to the man behind the curtain! ) User >Blurb blurb >Do this >Why?
Πρωτοτυποποίηση = > Κατηγορίες πρωτοτύπων => Ενδιάμεση πιστότητα => Ο Μάγος του Οζ (ΙΙ) Πολύ καλή μεθοδολογία για: Κατανόηση των προσδοκιών των χρηστών από το σύστημα Οραματισμό και έλεγχο καινοτόμων προϊόντων Πρόσθεση σύνθετων λειτουργιών (κάθετη πρωτοτυποποίηση) Μειονεκτήματα: Μεγάλο κόστος Δυσκολία υλοποίησης Καθυστέρηση στις απαντήσεις από τους σχεδιαστές σε σχέση με το πραγματικό σύστημα Δημιουργία υψηλών προσδοκιών από τους χρήστες Άλλο υπολογιστής άλλο άνθρωπος (υποσυνείδητες ενέργειες σχεδιαστή)
Πρωτοτυποποίηση = > Κατηγορίες πρωτοτύπων => Ενδιάμεση πιστότητα => Ο Μάγος του Οζ Παραδείγματα IBM: Speech to Text Μια γραμματέας είχε εκπαιδευτεί να εκτελεί ορισμένες λέξεις κλειδιά ως εντολές, να πληκτρολογεί το κείμενο και να χειρίζεται γραφικά αντικείμενα κατόπιν της προφορικής εντολής ή νοημάτων του χρήστη Intelligent Agents / Programming by demonstration Ένας άνθρωπος είχε εκπαιδευτεί να μιμείται ένα learning agent (μαθητευόμενο πράκτορα). Ο χρήστης παρέχει παραδείγματα για το πως εκτελούνται κάποιες εργασίες και ο υπολογιστής πρέπει να μάθει να τις εκτελεί μόνος του Η μεθοδολογία εφαρμόστηκε ώστε να αναγνωριστεί πως οι χρήστες καθορίζουν τις προς εκτέλεση εργασίες τους The Wizard
Πρωτοτυποποίηση = > Κατηγορίες πρωτοτύπων => Ενδιάμεση πιστότητα => Προσομοιώσεις με κώδικα (scripted simulations) Στην ουσία αποτελούν υλοποίηση των storyboards σε περιβάλλον υπολογιστή: Η επιλογή ενός πλήκτρου από τον χρήστη ενεργοποιεί μια νέα οθόνη (ή κάποια αλλαγή στην υφιστάμενη) Είναι πολύ καλά για έλεγχο σεναρίων και περιπτώσεων χρήσης και χρησιμοποιούνται κατά κόρον σε κάθετες προσομοιώσεις Εναλλακτική συμπεριφορά του συστήματος προσομοιάζεται με τη χρήση διαφορετικών scripts (μικρού τμήματος κώδικα) Ο χρήστης βλέπει το προσομοιωμένο σύστημα να συμπεριφέρεται όπως θα συμπεριφερόταν το πραγματικό Πολύ σημαντικό για τον έλεγχο διαλόγων, μηνυμάτων σφάλματος, και online βοήθειας
Πρωτοτυποποίηση = > Κατηγορίες πρωτοτύπων => Ενδιάμεση πιστότητα => Πρωτοτυποποίηση Layout Διεπιφάνειας Ανάπτυξη πρωτοτύπων μέσω εργαλείων τα οποία παρέχουν πληθώρα αντικείμένων που χρησιμοποιούνται στις διεπιφάνειες χρήστη (widgets): Πλήκτρα Μενού Εικονίδια Πλαίσια διαλόγου... Κλασσικό παράδειγμα η Visual Basic Περιορισμός από τα υπάρχοντα widgets Πολύ αποτελεσματικά για οριζόντια πρωτοτυποποίηση και πρωτοτυποποίηση διαδραστικών οθονών Κάθετη προτυποποποίηση προστίθεται με χρήση προγραμματισμού
Εργαλεία Digital Storyboarding Camtasia & Jing ToonBoom FrameForge 3D Microsoft Expression/Blend WordPress κι άλλα πολλά
Βιβλιογραφία Creations [1] http://www.storyboards-east.com/storybrd.htm, StoryBoard Ιστορίες [2] http://www.storyboardsinc.com/, Υλικό για StoryBoards [3] http://www.thestoryboardartist.com/site/home.html (StoryBoard Ιστορίες ενός δημιουργού) Χρήσιμες πληροφορίες [4] http://www.dicomics.com/storyboardschool/, πολύ ενδιαφέρουσα σελίδα με course για δημιουργία Storyboard και με χρήσιμα Links) [5] http://tlt.its.psu.edu/suggestions/research/storyboard.shtml (Planning for Learning) [6] http://ourworld.compuserve.com/homepages/adrian_mallon_multimedia/story.htm (Storyboarding Multimedia) [7] http://www.dependentfilms.net/files.html (Tools & Utilities for Filmakers) [8] http://www.sotherden.com/video101/storyboard.htm On-line tool για δημιουργία Storyboards [9] http://storyboard.altec.org/ (εργαλείο δημιουργίας Storyboards on-line με drag&drop τα elements!!) Διαθέσιμα Papers [10] http://ieeexplore.ieee.org/iel5/4161231/4144550/04161708.pdf (A Storyboard tool to Assist Concept of Operations Development) [11] http://liquidnarrative.csc.ncsu.edu/pubs/ace2005-3.pdf (Towards an intelligent storyboarding tool for 3D games) [12] http://www.teced.com/pdfs/upa2006_storyboards_a_dynamic_storytelling_tool.pdf, (StoryBoards: a dynamic Storytelling Tool) [13] http://www.aea11.k12.ia.us/tech/fair/storyboarding.pdf (Storyboardint- What is it? How you do it?) [14] http://www.charlesriver.com/resrcs/chapters/1584504153_1stchap.pdf (Story and StoryBoards) Movies [15] Sahara, http://www.milesteves.com/storyboards/sahara/sahara-04.php [16] Passion-Golgotha, http://www.milesteves.com/storyboards/passion/passion-golgotha-01.php [17] T3, http://www.milesteves.com/storyboards/t3/t3-strybrd-car-06.php