Ανάπτυξη πρωτοτύπου διεπαφής Τι είναι τα πρωτότυπα Μικρής κλίμακας αναπαραστάσεις μιας κατασκευής εν χρησιμοποιούνται μόνο στην Πληροφορική! 1
Γιατί χρησιμοποιούνται Για λόγους αξιολόγησης μιας διεπαφής Για λόγους επικοινωνίας μεταξύ μελών μιας σχεδιαστικής ομάδας Για έλεγχο προκαταρκτικών ιδεών Τα πρωτότυπα εγείρουν ενδιαφέρον και σχολιασμό Για να καταγράψουμε μια άποψη Για να απαντήσουμε σχεδιαστικά ερωτήματα Τι ενδείκνυται να αναπτυχθεί ως πρωτότυπο Οτιδήποτε που τίθεται υπό κριτική ή αμφισβήτηση τίθεται υπό κριτική ή αμφισβήτηση είναι δύσκολο ή δαπανηρό στην κατασκευή του πρέπει να συμφωνηθεί πριν αρχίσει η κατασκευή του 2
Prototyping Αρχικό στάδιο σχεδιασμού Επεξεργασία εναλλακτικών ιδεών (Brainstorming) Επιλογή ιδέας Πρότυπο στυλ αλληλεπίδρασης Περιδιάβασμα & επανασχεδιασμός Πρωτότυπα χαμηλής πιστότητας (Low fidelity prototypes) Έλεγχος διεπαφής, σχεδιασμός αντικειμένων Αξιολόγηση και επανασχεδιασμός Αξιολόγηση ευχρηστίας και πειραματικός έλεγχος Πρωτότυπα μεσαίας πιστότητας (Medium fidelity prototypes) Πρωτότυπα υψηλής πιστότητας (High fidelity prototypes) Τελικός έλεγχος πεδίου (Field testing) Αρχικές / προχωρημένες δοκιμές (Alpha/Beta tests) Προχωρημένο στάδιο σχεδιασμού Τελικό σύστημα (Working system) Πιστότητα Αναφέρεται στο επίπεδο λεπτομέρειας ενός πρωτοτύπου ρ Από πρωτότυπα χαμηλής πιστότητας...σε πρωτότυπα υψηλής πιστότητας Πρωτότυπο υψηλής πιστότητας Πρωτότυπα πλησιάζουν στο τελικό προϊόν Πρωτότυπο χαμηλής πιστότητας Ελλιπείς αναπαραστάσεις του τελικού προϊόντος 3
Καθορισμός λειτουργικότητας Τι μέρος του συστήματος θα καλύψει το πρωτότυπο; Βασικές προσεγγίσεις Κάθετα πρωτότυπα (vertical prototypes) Οριζόντια πρωτότυπα (horizontal prototypes) Κάθετα πρωτότυπα Περιλαμβάνουν υλοποίηση της λειτουργικότητα ενός ή μερικών μρ τμημάτων του συστήματος Ολόκληρο το σύστημα Κατακόρυφο πρωτότυπο Χρησιμεύουν όταν υπάρχει κοινή αποδοχή για κάποιο μέρος του συστήματος το οποίο και υλοποιείται από το πρωτότυπο 4
Παράδειγμα κάθετων πρωτοτύπων Λειτουργία που μελετάται Οριζόντια πρωτότυπα Περιλαμβάνουν όλα ή τα περισσότερα τμήματα του συστήματος Όχι κατά ανάγκη υλοποίηση της λειτουργικότητάς τους Ολόκληρο το σύστημα Οριζόντιο πρωτότυπο Χρησιμεύουν για προσομοίωση αλλά όχι για την εκτέλεση πραγματικής εργασίας 5
Παράδειγμα οριζόντιου πρωτοτύπου Logo ιαφήμιση ιαφήμιση Home Βοήθεια Login/Signout Ψάξε Ευρετήριο Τι γίνεται Το χωριό Γειτονιές Κοινότητες Επικοινωνία Συνεργασία Συναλλαγές Καλωσήρθες Στέφανε. Υπάρχουν νέα μηνύματα Τα μηνύματα μου Ηπαρέαμου Επείγοντα Τα νέα της ημέρας Μουσική Τηλεόραση Κινηματογράφοι Θέατρο Τοπικά νέα Φαρμακεία Χώροι συζήτησης Θρησκεία Calendar Φωτογραφία της ημέρας full calendar date date date date date date date date date date date date date... Holiday editorial holiday editorial holiday editorial holiday editorial holiday editorial holiday Holiday editorial holiday editorial holiday editorial holiday editorial holiday Βοήθεια Που θα βρω.. Που θα αγοράσω... Agent photo learn more about us investor relations advertise with us privacy policy job opportunities contact us terms of service Πρωτότυπα χαμηλής πιστότητας Οπτική αναπαράσταση, εξιστόρηση γεγονότων, PICTIVE, εργαλεία 6
Μέθοδοι ανάπτυξης πρωτοτύπων χαμηλής πιστότητας Οπτική αναπαράσταση (συνήθως σε χαρτί) βασικής σχεδιαστικής ιδέας Εξιστόρηση γεγονότων (storyboards) PICTIVE - Plastic Interface for Collaborative Technology Initiatives through Video Exploration Οπτική αναπαράσταση στο χαρτί Σκοπός Να κωδικοποιήσει αρχικές εναλλακτικές ιδέες Να συλλέξει προκαταρκτικά σχόλια των τελικών χρηστών Να υποβοηθήσει τους χρήστες να υποδείξουν πιθανές βελτιώσεις Πλεονέκτημα Γρήγορη και φθηνή μέθοδος Πλοήγηση πρώτου επιπέδου Πλοήγηση δεύτερου επιπέδου 7
Παράδειγμα Οπτική αναπαράσταση ενός on-screen keyboard 8
Form paper prototype Nielsen Norman Group http://www.nngroup.com/reports/prototyping/video_stills.html Tab-based paper prototype 9
Paper prototype and interaction Kiosk mock-up: testing hardware interface 10
Εξιστόρηση γεγονότων Προέρχεται από τον κινηματογράφο και χρησιμεύει στην απόδοση της ιδέας ενός επεισοδίου ή σκηνής (scene) Εμπεριέχει στιγμιότυπα της διεπαφής (snapshots of the interface) σε συγκεκριμένα κομβικά σημεία Οι χρήστες μπορούν εύκολα να κατανοήσουν την ακολουθία ή κατεύθυνση του διαλόγου Παράδειγμα Mary is doing her shopping in the retail store. She wants to buy product A. When she picks up the product from the shelf, a promotion message appears on the next screen. RFID Reade r Mary purchased also the proposed product and leaves the store happy with the offer she got. + For example she has to decide about the type of the in-store event. The system provides her with statistics, evaluation reports and recommendations. Shelf sales: 34 Stand sales: 2 Vs. B B B B B B A A A Finally, Lucy designs the campaign that she believes will create more sales and when the promotion starts she monitors closely in real-time whether this is a success B B B B B B B B B B B B B A A A A A A A You have picked-up a product A! Lucy, on the supplier s side receives the sales data and decides that it is about time to start a new promotion for product A. She has a number of decisions to make, but the system provides her with the necessary info. She also has to decide about the specific locations in the store to use based on their performance and cost. Location 2 Rating: 4 Cost: 200 Lucy is happy since she managed the promotions successfully and in an efficient way. + + Buy also product B and get a 50% discount on product A!!! Store A Shelf sales: 34 Stand sales: 2 Location 1 Rating: 8 Cost: 900 Store A Shelf sales: 24 Stand sales: 90 THE END Λεπτομερές storyboard 11
PICTIVE Pictive (Plastic Interface for Collaborative Technology Initiatives through Video Exploration) Το σχέδιο αποτελείται από πολλαπλά επίπεδα αυτοκόλλητων σημειώσεων και πλαστικών επιφανειών Επιφάνειες διαφορετικού μεγέθους αντιπροσωπεύουν εικονίδιο, μενού, παράθυρα και άλλα διαδραστικά αντικείμενα. Αλληλεπίδραση = χειρισμός σημειώσεων Απόψεις των χρηστών και των σχεδιαστών αποδίδονται με την μετακίνηση σημειώσεων και πλαστικών επιφανειών Η διαδικασία βιντεοσκοπείται για μετέπειτα ανάλυση Τμήματα της μεθόδου PICTIVE Είναι δυνατό να κατασκευαστούν εκ των προτέρων τμήματα της διεπαφής σε χαρτί ή πλαστικές μετακινούμενες επιφάνειες. Τα παρακάτω θα μπορούσαν να αποτελέσουν εργαλεία εφαρμογής της μεθόδου για ανάπτυξη WIMP διεπαφής buttons menu alert box combo box list box tabs entries 12
Υπολογιστικά εργαλεία ανάπτυξης πρωτοτύπων DENIM: Designing Web Sites by Sketching http://dub.washington.edu:2007/denim/ Πώς λειτουργεί το DENIM (video) 13
Pidoco Πρωτότυπα μεσαίας πιστότητας Με την χρήση ηλεκτρονικού υπολογιστή 14
Πρότυπα μεσαίας πιστότητας Συνήθως βασίζονται στη χρήση Η-Υ Aπεικονίζουν ζ μερικά μρ αλλά όχι όλα τα χαρακτηριστικά του συστήματος υπό ανάπτυξη Προσελκύουν το ενδιαφέρον των τελικών χρηστών Στόχοι Να περιγράψει ένα λεπτομερές αλλά περιορισμένο σενάριο που θα εκτελέσει ο χρήστης Να οριοθετήσει μια πορεία ανάπτυξης (από μεμονωμένα πρωτότυπα προς ένα λειτουργικό σύστημα) Να προσφέρει προκαταρκτικό σχολιασμό και αξιολόγηση Πρότυπα μεσαίας πιστότητας Προϋποθέτουν πρωτότυπο χαμηλής ποιότητας 15
Χρήση των πρωτοτύπων μεσαίας πιστότητας Προσεγγίσεις για την ενσωμάτωση πρωτοτύπων και τελικού συστήματος Αχρηστία (Throw-away) Το πρωτότυπο εξυπηρετεί μόνο το σχολιασμό από τελικούς χρήστες και δεν χρησιμεύει στη διαδικασία ανάπτυξης Κατασκευή τέτοιων πρωτοτύπων πρέπει να είναι γρήγορη και ανέξοδη Αυξητική προσέγγιση (incremental approach) Το τελικό σύστημα κατασκευάζεται τμηματικά και το κάθε τμήμα του είναι ξεχωριστό Στη περίπτωση αυτή το κάθε τμήμα του συστήματος εξελίσσεται από πρωτότυπο σε τελικό στάδιο και στη συνέχει ενσωματώνεται στο τελικό σύστημα Εξελικτική προσέγγιση (evolutionary approach) Το πρωτότυπο εξελίσσεται σταδιακά προκειμένου να ενσωματώσει τις προτεινόμενες αλλαγές και αυτό συνεχίζεται έως ότου φθάσει να είναι το τελικό σύστημα Τρόποι ανάπτυξης πρωτοτύπων μεσαίας πιστότητας Χρήση σχεδιαστικών πακέτων (Painting/drawing packages) Προσομοίωση Εργαλεία κατασκευής διεπαφής 16
Σχεδιαστικά πακέτα Σχεδιασμός κάθε στιγμιότυπου στον υπολογιστή Το πρωτότυπο μπορεί να αλλάξει ευκολότερα όταν αποθηκεύεται στον υπολογιστή από ότι στο χαρτί Συνήθως χρησιμεύει για την απόδοση οριζόντιων πρωτοτύπων εν αποδίδεται οδδε α η αισθητική ασθη ή( (feel) της διεπαφής Προσομοίωση Κωδικοποίηση στιγμιότυπου σε υπολογιστή Χρήση ειδικών εργαλείων (media tools) Μεταφορά από στιγμιότυπα σε στιγμιότυπο με απλά μέσα (mouse click) ίνει την εντύπωση πραγματικού συστήματος Χρησιμεύει για την απόδοση απλών οριζόντιων ή κάθετων πρωτοτύπων 17
Σήμερα είναι Κυριακή, 29 Οκτωβρίου 2006 Καιτούλα, καλωσόρισες στην μεγάλη μας καρτοπαρέα! Βρίσκεσαι στο επίπεδο 1 Δημιουργία νέας κάρτας κάρτες έχουν δημιουργηθεί κάρταέχεισταλείμεe-mail κινούμενες εικόνες ξεκλειδώθηκαν ήχος ξεκλειδώθηκε Δημιουργία νέας κάρτας Οι κάρτες μου Οδηγίες Ρυθμίσεις Έξοδος Δημιούργησε την κάρτα σου επιλογή σχήματος εισαγωγή εικόνας εισαγωγή κειμένου εισαγωγή ήχου πρόσοψη ακύρωση τελευταίας ενέργειας εισαγωγή κινούμενης εικόνας αποθήκευση αποστολή με e-mail εκτύπωση βοήθεια επιστροφή στην αρχή 18
Interface builders Εργαλεία που επιτρέπουν στο σχεδιαστή να οργανώσει τα αντικείμενα μιας διεπαφής Υπάρχουν πάρα πολλά για διαφορετικές πλατφόρμες Όλες οι οπτικές γλώσσες προσφέρουν εργαλεία κατασκευής οπτικών διεπαφών Τρόποι χρήση - Interface builders Τρόποι χρήσεις (modes) Κατασκευαστικό - Αλλαγή των αντικειμένων και των γνωρισμάτων τους Έλεγχος - Τα αντικείμενα συμπεριφέρονται ως σε πραγματικές συνθήκες χρήσης 19
Τρόποι χρήση - Interface builders Κατασκευαστικό (mode) Τρόποι χρήση - Interface builders Έλεγχος - Ενδείκνυται για την απόδοση του look & feel μιας διεπαφής look & feel μιας διεπαφής Java Design 20
Πρωτότυπα υψηλής πιστότητας Στόχος Η προσομοίωση του τελικού συστήματος Έχουν συνήθως προηγηθεί πρωτότυπα χαμηλής και μεσαίας πιστότητας Απαιτούν λειτουργικότητα προκειμένου ο χρήστης να μπορεί να κάνει χρήσιμα πράγματα με το πρωτότυπο 21
Προηγμένα εργαλεία ανάπτυξης Εργαλεία λογισμικού που προσφέρουν αυτοματοποιημένη υποστήριξη της διαδικασίας ανάπτυξης μιας διεπαφής Χρησιμοποιούνται για την γρήγορη ανάπτυξη πρωτοτύπων εν είναι αναγκαστικά σύνθετα στη χρήση τους UI Toolkit Βιβλιοθήκη υλοποιημένων τεχνικών αλληλεπίδρασης (interaction techniques) Αντικείμενα + διαδραστική συμπεριφορά τους Συνήθως υιοθετούν αντικειμενοστραφή μεθοδολογία Παραδείγματα X Windows: X Toolkit & Motif M i t h M T lb M A Macintosh: Mac Toolbox, MacApp Windows: Windows Developers Toolkit Java: Swing 22
Πως λειτουργεί ένα GUI toolkit Ο χρήστης εκτελεί ενέργειες αλληλεπίδρασης Οι ενέργειες αυτές διοχετεύονται στην εφαρμογή H εφαρμογή αντιδρά, π.χ με το να ανανεώνει (update) τη διεπαφή στη μονάδα εξόδου Το ιεραρχικό μοντέλο αντικειμένων 55 23
Tο ιεραρχικό μοντέλο αντικειμένων Με την εξέλιξη των γραφικών διεπαφών (GUIs) έχει επικρατήσει η ιεραρχική δόμηση της διεπαφής Αντικείμενο συμπερίληψης 56 Top-level container Το αντικείμενο που είναι ο «πατέρας» όλων των υπολοίπων αντικειμένων που συνιστούν την διεπαφή Χαρακτηρίζει όλη την διεπαφή όσο αφορά την αλληγορία (μεταφορά) που υλοποιείται Windows, book, room, κλπ Συνήθως είναι μοναδικό Έχει ιδιαίτερα γνωρίσματα 57 24
Window Μπορεί να είναι top-level αντικείμενο Ένα top-level αντικείμενο πρέπει να δηλώνεται 58 Γνωρίσματα top-level αντικειμένου Scroll bar Οριζόντια Κατακόρυφη Minimize, maximize 59 25
Παράμετροι που δηλώνονται προαιρετικά 60 Φιλοξενία άλλων αντικειμένων Ένα top-level αντικείμενο μπορεί να φιλοξενήσει ειδικές κατηγορίες αντικειμένων όπως menu bars και toolbars Προσοχή Δεν είναι όλα τα windows top-level 61 26
Σχεδιαστικό περίγραμμα Τι είναι ένα περίγραμμα Είναι ένα αφηρημένο σκαρίφημα της διεπαφής ημιουργείται από διαφορετικά μρη μέρη και στιλ αλληλεπίδρασης Στιλ πλοήγησης Στιλ εισαγωγής δεδομένων Στιλ παρουσίασης δεδομένων Αναπτύσσεται για να αποτελέσει την βάση σχεδίασης των διεπαφών μιας εφαρμογής, έτσι ώστε να χαρακτηρίζονται από Ομοιογένεια Συνέπεια Λογική ακολουθία πράξεων 27
Περίγραμμα Κεντρικό μενού πλοήγησης Login Αναγνωριστικό επιχείρησης Τελευταία νέα Επιμέρους μενού πλοήγησης Περιοχή παρουσίασης πληροφορίας ιαφημίσεις Συνιστώσες Μη λειτουργικού χαρακτήρα δεν αφορούν λειτουργικότητα του συστήματος Λειτουργικού χαρακτήρα αφορούν λειτουργίες του συστήματος 28
Συνιστώσες μη λειτουργικού χαρακτήρα Αναγνωριστικό επιχείρησης ιαφημιστικά Συνιστώσες λειτουργικού χαρακτήρα Παραδείγματα Κύρια και επιμέρους πλοήγηση Λειτουργικότητα άμεσα συνδεδεμένη με την εφαρμογή προερχόμενη από το διάγραμμα περιπτώσεων χρήσης Λειτουργικότητα γενικότερου ενδιαφέροντος Ενημέρωση, Νέα Περιήγηση (αναζήτηση) Λειτουργικότητα ειδικών χρήσεων συνθηκών Εξουσιοδότηση Login διάλογος 29
Περίγραμμα & ιεραρχία αντικειμένων Από ένα ιεραρχικό μοντέλο συμπερίληψης αντικειμένων ενθυλάκωση διαφορετικών τύπων container Σύνθεση τεχνικών & περιγράμματα Περίγραμμα και αντίστοιχη ιστοσελίδα 30
Παράδειγμα: FTP Περίγραμμα FTP 31
Acrobat Περίγραμμα Acrobat 32
Nero Άλλες χρήσεις: Περίγραμμα πλοήγησης και σενάριο αλλ/σης 33
Εναλλακτικό περίγραμμα πλοήγησης Welcome Login Order form Coupon form Summary Confirmation Thank you 34