1 Σχεδιασμός της διεπαφής μιας πολυμεσικής εφαρμογής

Τι είναι διεπαφή Διεπιφάνεια, διασύνδεση Επικοινωνία λογισμικού με τους χρήστες Επιτρέπει την εκτέλεση λειτουργιών στην εφαρμογή 2/16

Είναι σημαντική; Οι χρήστες συνήθως αξιολογούν τα συστήματα με βάση την διεπαφή τους Φτωχά σχεδιασμένη διεπαφή μπορεί να προκαλέσει καταστροφικά λάθη από την πλευρά του χρήστη Φτωχά σχεδιασμένη διεπαφή είναι βασικός λόγος για μη χρησιμοποίηση ενός συστήματος Ο σχεδιασμός της διεπαφής συνήθως αφορά το γραφικό σχεδιασμό Είναι το αντίστοιχο της εργονομίας στα μηχανήματα 3/16

Σημασία διεπαφής Άμεση αφομοίωση τεχνολογικών εξελίξεων (π.χ. iphone) Χρήστες χωρίς εμπειρία και ειδικές γνώσεις Χρήστες με διαφορετικές ανάγκες Αύξηση παραγωγικότητας Ασφάλεια χρήσης 4/16

Πλεονεκτήματα του γραφικού περιβάλλοντος (GUI) Είναι εύκολη η εκμάθησή και χρήση τους, δεν απαιτείται εμπειρία χρήστη Γρήγορη, πλήρους οθόνης αλληλεπίδραση είναι δυνατή με άμεση πρόσβαση οπουδήποτε στην οθόνη 5/16

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

Κανόνες σχεδιασμού Ο σχεδιασμός UI πρέπει να λαμβάνει υπόψη τις ανάγκες, την εμπειρία και τις δυνατότητες των χρηστών Οι χρήστες πρέπει να συμμετέχουν στην διαδικασία σχεδιασμού στη φάση της ανάλυσης σχεδιασμού Υπάρχουν παράγοντες όπως το μέγεθος οθόνης τους οποίους οι σχεδιαστές πρέπει να λαμβάνουν υπόψη. 7/16

Κανόνες σχεδιασμού Η διεπαφή πρέπει να είναι προσανατολισμένη στον χρήστη παρά στον υπολογιστή Για παράδειγμα ένα σύστημα γραφείου πρέπει να χρησιμοποιεί όρους όπως γράμματα, αρχεία, φάκελοι από καταλόγους αρχείων, δείκτες αρχείων, κ.α. Το σύστημα πρέπει να εμφανίζει κατάλληλο επίπεδο συμβατότητας και ομοιογένειας Οι εντολές και τα μενού πρέπει να έχουν την ίδια μορφή 8/16

Κανόνες σχεδιασμού Το σύστημα δεν πρέπει να εκπλήσσει τον χρήστη Εάν μία εντολή λειτουργεί με γνωστό τρόπο, ο χρήστης θα πρέπει να μπορεί να προβλέψει την λειτουργία συγκρίσιμων εντολών Το σύστημα πρέπει να παρέχει ανοχή σε λάθη χρήστη και να του επιτρέπει να ανακάμπτει από αυτά Δυνατότητα undo, επιβεβαίωση λειτουργιών καταστροφής, κ.α. Πρέπει να παρέχονται οδηγίες στον χρήστη Συστήματα Help, on-line εγχειρίδια, κ.α. 9/16

Κανόνες σχεδιασμού Οι σχεδιαστικές επιλογές της διεπαφής πρέπει να περνάνε όσο το δυνατόν περισσότερο απαρατήρητες και να είναι φυσικές σε σχέση με τη θεματολογία Η διάταξη των αντικειμένων πρέπει να ακολουθεί τη διαδικασία εργασίας του χρήστη Ο χρήστης πρέπει να γνωρίζει που βρίσκεται, τι μπορεί να κάνει και πώς να προχωρήσει Η μορφή των οθονών πρέπει να είναι ενιαία 10/16

Παράδειγμα 11/16

Εστίαση προσοχής Η σημαντική πληροφορία πρέπει να τοποθετείται σε εμφανή θέση Λιγότερο σημαντικές πληροφορίες τοποθετούνται σε λιγότερο εμφανείς θέσεις αλλά σταθερές Πληροφορία που σπανίως χρειάζεται, εμφανίζεται κατόπιν αιτήματος 12/16

Εμφάνιση χρωμάτων Το χρώμα δίνει μία επιπλέον διάσταση στην διεπαφή και βοηθά τον χρήστη να καταλάβει σύνθετες δομές πληροφορίας Μπορεί να χρησιμοποιηθεί για την υπογράμμιση εξεχόντων γεγονότων Συνήθη λάθη στην χρήση χρώματος στον σχεδιασμό διεπαφής περιλαμβάνουν: Χρήση χρώματος ως μέσου επικοινωνίας Υπερβολική χρήση χρώματος 13/16

Αναγνωσιμότητα Παράγοντες που επηρεάζουν την αναγνωσιμότητα: Ποσότητα κειμένου Βαθμός συγκέντρωσης Αριθμός λέξεων ανά γραμμή Αντίθεση χρωμάτων Μήκος γραμμής, γραμματοσειρά και διαστήματα χαρακτήρων 14/16

Αναγνωσιμότητα Κανόνες σχεδιασμού: Λέξεις με κεφαλαία 20% πιο δυσανάγνωστες Η απόσταση των γραμμών πρέπει να είναι τουλάχιστον το 50% του ύψους των γραμμάτων Μέγιστος αριθμός λέξεων ανά γραμμή: 15 Βέλτιστο μέγεθος παραγράφου: 4 γραμμές 15/16

Αναγνωσιμότητα 16/16

Αλληλεπίδραση Μπορεί να γίνει με πολλούς τρόπους: Εντολές, Μενού, Φυσική γλώσσα, Φόρμες, Γραφικό περιβάλλον, Εικονική πραγματικότητα Παλιότερα γινόταν με εντολές σήμερα με εικονίδια και σύμβολα που χειρίζεται ο χρήστης 17/16

Απευθείας χειρισμός Απευθείας χειρισμός είναι όταν η διεπαφή παρουσιάζεται στον χρήστη με μοντέλο του πληροφοριακού χώρου που μπορεί να αλλάξει με απευθείας δράση, π.χ. ονόματα αλλάζουν με πληκτρολόγηση νέου ονόματος πάνω σε αυτά Η διεπαφή φόρμας είναι ένα απλό παράδειγμα απευθείας χειρισμού Η GUI's παρέχει απευθείας χειρισμό, π.χ. κάποια αρχεία μπορούν να διαγραφούν με μετακίνηση εικόνας σε ένα καλάθι αχρήστων 18/16

Παράδειγμα 19/16

Πλεονεκτήματα απευθείας χειρισμού Χρήστες θέλουν να ελέγχουν τον υπολογιστή τους και όχι να ελέγχονται Ο χρόνος εκμάθησης των χρηστών είναι πολύ μικρός Οι χρήστες έχουν άμεση ανάδραση από τις πράξεις τους και τα λάθη μπορούν εύκολα να βρεθούν και να διορθωθούν 20/16

Μειονεκτήματα απευθείας χειρισμού Η διαμόρφωση ενός μοντέλου πληροφορίας μπορεί να γίνει δύσκολη Με δεδομένο ότι ο χώρος της πληροφορίας είναι μεγάλος, τι εργαλεία θα πρέπει να τους δοθούν για την πλοήγηση τους στον χώρο; Οι διεπαφές απευθείας χειρισμού καθιστούν πολύπλοκο τον προγραμματισμό διεπαφών και έχουν μεγάλες απαιτήσεις από το σύστημα Η έννοια των συμβόλων διαφέρει με το πολιτισμικό υπόβαθρο 21/16

Μενού Οι χρήστες επιλέγουν από ένα κατάλογο δυνατοτήτων που παρουσιάζονται σε αυτούς από το σύστημα Η επιλογή μπορεί να γίνει με το ποντίκι ή με τα βέλη ή με την εκτύπωση κάποιου ονόματος Συνήθως χρησιμοποιούνται εύκολα για χρήση τερματικά όπως touchscreens 22/16

Πλεονεκτήματα των Συστημάτων με Μενού Οι χρήστες δεν χρειάζεται να θυμούνται ονόματα εντολών και πάντα τους δίνεται η δυνατότητα να έχουν λίστα των εντολών Απαιτείται ελάχιστη εργασία εκ μέρους τους Τα λάθη των χρηστών παγιδεύονται στην διεπαφή Παρέχεται βοήθεια με την επιλογή του τρέχοντος μενού 23/16

Προβλήματα με Συστήματα με Μενού Τα συστήματα μενού αφορούν μικρό αριθμό επιλογών. Εάν υπάρχουν πολλές επιλογές τότε πρέπει να υπάρχει δυνατότητα δόμησης μενού Οι έμπειροι χρήστες βρίσκουν τα μενού πιο αργά από τις γλώσσες εντολών 24/16

Γλώσσες Εντολών Προτιμώνται από πεπειραμένους χρήστες διότι επιτρέπουν γρηγορότερη αλληλεπίδραση με τον χρήστη Δεν είναι κατάλληλες για άπειρους χρήστες Προσφέρονται ως εναλλακτικές σε εντολές μενού. Συνήθως υπάρχουν και τα δύο ταυτόχρονα 25/16

Φυσική Γλώσσα Διατύπωση από το χρήστη των χειρισμών στη γλώσσα του μέσω κειμένου ή ομιλίας Πλεονέκτημα: προσομοίωση ανθρώπινης επικοινωνίας Μειονεκτήματα: ασάφειες, περιττολογίες, τεχνικές δυσκολίες, δημιουργεί προσδοκίες Εφαρμογές: αναζήτηση, παροχή πληροφοριών, επικοινωνία με απομακρυσμένο σύστημα μέσω τηλεφώνου 26/16

Ανάδραση Γνωστοποίηση της κατάστασης του συστήματος Παραδείγματα: καθυστέρηση εκτύπωσης, επιλογή αντικειμένου, ολοκλήρωση εργασίας, σφάλματα, πρόοδος εργασίας, Προστασία από επικίνδυνες ενέργειες: αναίρεση, προειδοποίηση Η κατάχρηση προστασίας οδηγεί το χρήστη να αγνοεί τα μηνύματα προειδοποίησης (π.χ. Windows) 27/16

Παράδειγμα 28/16

Βοήθεια Πρέπει να παρέχεται συνεχώς Πρέπει να είναι πολλών επιπέδων Εύκολη πρόσβαση Δεν πρέπει να είναι απλά ένα on-line εγχειρίδιο Τα δυναμικά χαρακτηριστικά της οθόνης μπορούν να βελτιώσουν την παρουσίαση της πληροφορίας 29/16

Χρυσοί κανόνες Ομοιομορφία και συνέπεια Σύντομοι χειρισμοί (π.χ. λιγότερα κλικ) Συνεχής ανάδραση Πρόβλεψη για σφάλματα χρήσης Δυνατότητα αναίρεσης Ο χρήστης να νιώθει ότι ελέγχει την εφαρμογή 30/16

Βιβλιογραφία SGL-C104/423/2835,10768/ SGL-C104/423/2835,10768/ _4/lecture_notes.htm 31/16