Σχεδιασμός Διεπαφής με τον Χρήστη

Παρουσίαση με θέμα: "Σχεδιασμός Διεπαφής με τον Χρήστη"— Μεταγράφημα παρουσίασης:

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

2 Στόχοι Να εισαγάγουμε γενικές αρχές για τον σχεδιασμό της διεπαφής με τον χρήστη Να περιγράψουμε απευθείας διαχείριση των διεπαφών Να παραουσιάσουμε παράγοντες που πρέπει να λαμβάνονται υπόψη στην παρουσίαση της πληροφορίας Να περιγράψουμε την υποστήριξη για τον χρήστη που απαιτείται να συμπεριληφθεί στην διεπαφή με τον χρήστη Να εισαγάγουμε χαρακτηριστικά χρηστικότητας και προσεγγίσεις συστημάτων για την αξιολόγηση συστήματος

3 Θέματα Κανόνες σχεδιασμού Αλληλεπίδραση χρήστη - συστήματος
Παρουσίαση πληροφορίας Καθοδήγηση χρήστη Αξιολόγηση διεπαφής με τον χρήστη

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

5 Γραφική Διεπαφή με τον Χρήστη
Διεπαφή με τον χρήστη που βασίζεται στα windows, παρουσίαση με εικόνες οντοτήτων, pull-down ή pop-up menus και εργαλεία δείκτες. Διεπαφές που ονομαζόταν WIMP interfaces - αναφέρονται τώρα ως GUIs. Η πρότυπη μορφή διεπαφής για σταθμούς εργασίας και προσωπικούς υπολογιστές

6 Χαρακτηριστικά GUI

7 Πλεονεκτήματα GUI Είναι εύκολη η εκμάθησή τους και χρήση τους.
Χρήστες χωρίς εμπειρία μαθαίνουν εύκολα την χρήση τους Ο χρήστης μπορεί να αλλάξει από διεργασία σε διεργασία και να αλληλεπιδράσει με διαφορετικές εφαρμογές Η πληροφορία παραμένει ορατή στο παράθυρο Γρήγορη, πλήρους οθόνης αλληλεπίδραση είναι δυνατή με άμεση πρόσβαση οπουδήποτε στην οθόνη

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

9 Κανόνες Σχεδιασμού Διεπαφής με τον Χρήστη

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

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

12 Λειτουργικότητα Χρήστη - Συστήματος
Δύο προβλήματα εμφανίζονται στον σχεδιασμό διαλογικών συστημάτων Πως παρέχεται πληροφορία από τον χρήστη στο σύστημα; Πως παρουσιάζεται η πληροφορία από το σύστημα στον χρήστη; Η διαλειτουργικότητα με τον χρήστη και η παρουσίαση της πληροφορίας πρέπει να ολοκληρώνεται μέσω ενός συμβατού πλαισίου όπως metaphor διεπαφής

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

14 Διεπαφή Βασισμένη σε Φόρμα

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

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

17 Μοντέλα διεπαφής Desktop metaphor. Control panel metaphor.
Είναι ένα είδος γραφείου με εικόνες που αναπαριστούν αρχεία, συρτάρια, κ.α.. Control panel metaphor. Το μοντέλο είναι κέντρο ελέγχου υλικού με οντότητες που περιλαμβάνουν Κουμπιά. Διακόπτες Μενού Φώτα Οθόνες Χάρακες

18 Διεπαφή Κέντρου Ελέγχου

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

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

21 Προβλήματα με Συστήματα με Μενού
Πράξεις που αφορούν λογικό σύνδεσμο (and) ή λογικό ή (or) είναι δύσκολο να αναπαρασταθούν Τα συστήματα μενού αφορούν μικρό αριθμό επιλογών. Εάν υπάρχουν πολλές επιλογές τότε πρέπει να υπάρχει δυνατότητα δόμησης μενού Οι έμπειροι χρήστες βρίσκουν τα μενού πιο αργά από τις γλώσσες εντολών

22 Δόμηση Μενού Κυλιόμενα Μενού Ιεραρχικά Μενού Μενού που ακολουθούν
Όταν δεν εμφανίζεται μία επιλογή, το μενού μπορεί να κυληθεί. Δεν είναι πρακτικό για πολλές επιλογές Ιεραρχικά Μενού Τα μενού οργανώνονται σε ιεραρχία. Η επιλογή ενός μενού οδηγεί στην επιλογή ενός υπό - μενού Μενού που ακολουθούν Επιλογή μενού προκαλεί την εμφάνιση ενός άλλου μενού Συσχετιζόμενες μονάδες ελέγχου Όταν επιλέγεται ένα αντικείμενο του μενού εμφανίζεται μονάδα ελέγχου που προσφέρει περισσότερες επιλογές

23 Μενού που Ακολουθούν

24 Διεπαφές Εντολών Ο χρήστης δίνει εντολές στο σύστημα, π.χ. UNIX
Υλοποιούνται με την χρήση απλών τερματικών Είναι εύκολες στην επεξεργασία με χρήση μεταγλωττιστών Εντολές αυθαίρετης πολυπλοκότητας μπορούν να δημιουργηθούν με συνδυασμό εντολών Μπορεί να δημιουργηθούν διεπαφές που απαιτούν ελάχιστη πληκτρολόγηση

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

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

27 Πολλαπλές Διεπαφές με τον Χρήστη

28 Παρουσίαση Πληροφορίας
Στατική Πληροφορία Εισάγεται στην αρχή μίας συνόδου επικοινωνίας. Δεν αλλάζει κατά την διάρκεια της συνόδου Είναι αριθμητική ή κείμενο Δυναμική Πληροφορία Αλλάζει κατά την διάρκεια της συνόδου και οι αλλαγές δίνονται στον χρήστη

29 Παράγοντες Εμφάνισης Πληροφορίας
Ο χρήστης ενδιαφέρεται σε ακριβή πληροφορία ή σχέσεις δεδομένων; Ποσό γρήγορα οι τιμές της πληροφορίας αλλάζουν; Πρέπει η αλλαγή να εμφανίζεται αμέσως; Πρέπει ο χρήστης να κάνει κάτι ως αντίδραση σε μία αλλαγή; Υπάρχει απευθείας χειρισμός της διεπαφής; Είναι η πληροφορία κείμενο ή αριθμητική; Είναι οι σχετικές τιμές σημαντικές;

30 Παρουσίαση Πληροφορίας

31 Όψεις με Γραφικά και Κείμενο

32 Αναλογική / Ψηφιακή Παρουσίαση
Συμπαγής - απαιτεί λίγο χώρο στην οθόνη Παρουσιάζονται ακριβείς τιμές Αναλογική Παρουσίαση Εύκολο να΄έχουμε άμεση αίσθηση μίας τιμής Είναι δυνατή η παρουσίαση σχε4τικών τιμών Εύκολο να δούμε τιμές δεδομένων που δεν είναι μέσα στα όρια

33 Εμφάνιση Δυναμικής Πληροφορίας

34 Εμφάνιση Σχετικών Τιμών

35 Επισήμανση Κειμένου

36 Οπτικοποίηση Δεδομένων
Αφορά τεχνικές για παρουσίαση μεγάλων ποσών πληροφορίας Η οπτικοποίηση παρέχει σχέσεις μεταξύ οντοτήτων και τάσεις στα δεδομένα Πιθανές οπτικοποιήσεις δεδομένων είναι: Πληροφορία καιρού που έχει συλλεχθεί από διαφορετικά σημεία Η κατάσταση του δικτύου τηλεφώνων Μοντέλο για την παρουσίαση ενός μορίου σε τρεις διαστάσεις

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

38 Οδηγίες για Χρήση Χρώματος
Μην χρησιμοποιείτε πολλά χρώματα Κάντε χρήση κωδικοποίησης χρωμάτων για την υποστήριξη διαδικασιών χρήσης Να επιτρέπετε στους χρήστες να ελέγχουν την κωδικοποίηση χρωμάτων Σχεδιάστε για μονόχρωμο και ύστερα βάλτε χρώμα Χρησιμοποιείτε με συμβατότητα την κωδικοποίηση χρωμάτων Να αποφεύγονται ζεύγη χρωμάτων τα οποία μπορούν να συμπίπτουν Χρησιμοποιείστε αλλαγή χρώματος για να φανεί αλλαγή κατάστασης

39 Οδηγίες για Χρήστες Οι οδηγίες για τους χρήστες ολοκληρώνονται με την διεπαφή για να βοηθήσουν τους χρήστες όταν χρειάζονται την πληροφορία για το σύστημα ή κάνουν κάποιο λάθος Οι οδηγίες περιλαμβάνουν: Μηνύματα συστήματος, συμπεριλαμβανομένων μηνυμάτων λαθών Εγχειρίδια On-line βοήθεια Το σύστημα βοήθειας και μηνυμάτων μπορεί να ολοκληρωθεί

40 Σύστημα Βοήθειας και Μηνυμάτων

41 Σχεδιασμός Μηνυμάτων Λαθών
Ο σχεδιασμός μηνυμάτων λάθους είναι σημαντικός. Φτωχός σχεδιασμός οδηγεί σε απόρριψη του συστήματος από τον χρήστη Τα μηνύματα πρέπει να είναι ευγενικά, σύντομα, συνεπή και δημιουργικά Το υπόβαθρο των χρηστών και η εμπειρία τους είναι σημαντικός παράγοντας στον σχεδιασμό μηνυμάτων

42 Παράγοντες Σχεδιασμού στα Μηνύματα

43 Μία νοσοκόμα εισάγει ένα όνομα

44 Καλές και Κακές Αποκρίσεις σε Λάθη

45 Σχεδιασμός Συστήματος Βοήθειας
Βοήθεια? σημαίνει «βοήθεια - χρειάζομαι πληροφορίες» Βοήθεια! Σημαίνει «Βοήθεια - έχω πρόβλημα» Και τα δύο πρέπει να ληφθούν υπόψη στον σχεδιασμό του συστήματος βοήθειας Απαιτούνται διαφορετικές δυνατότητες στο σύστημα βοήθειας

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

47 Χρήση Συστήματος Βοήθειας
Πρέπει να υπάρχουν πολλαπλά σημεία εισόδου ώστε να μπορεί ο χρήστης να παίρνει βοήθεια από διαφορετικά σημεία Είναι πολύτιμο να ξέρει ο χρήστης σε ποιο σημείο της βοήθειας βρίσκεται Πρέπει να υπάρχει δυνατότητα πλοήγησης του χρήστη στο σύστημα βοήθειας

48 Σημεία Εισαγωγής σε ένα Σύστημα Βοήθειας

49 Παράθυρα σε Σύστημα Βοήθειας

50 Τεκμηρίωση για τον Χρήστη
Μαζί με on-line πληροφορία, πρέπει πάντα να υπάρχει πληροφορία με την μορφή εγχειριδίου Η τεκμηρίωση πρέπει να σχεδιάζεται για ποικιλία χρηστών από έμπειρους έως τελείως άπειρους Επιπλέον των εγχειριδίων πρέπει να υπάρχει και άλλη τεκμηρίωσης, για παράδειγμα κάρτα γρήγορης αναφοράς

51 Τύποι Εγχειριδίων Χρηστών

52 Τύποι Εγχειριδίων Συναρτησιακή περιγραφή Εισαγωγικό εγχειρίδιο
Περιληπτική περιγραφή σχετικά με το τι κάνει το σύστημα Εισαγωγικό εγχειρίδιο Παρέχει άτυπη εισαγωγή στο σύστημα Εγχειρίδιο αναφοράς του συστήματος Περιγράφει όλες τις δυνατότητες του συστήματος σε λεπτομέρεια Εγχειρίδιο εγκατάστασης συστήματος Περιγράφει τον τρόπο εγκατάστασης του συστήματος Εγχειρίδιο διαχειριστή συστήματος Περιγράφει πως διαχειριζόμαστε το σύστημα όταν είναι σε χρήση

53 Αξιολόγηση Διεπαφής με τον Χρήστη
Πρέπει να γίνεται αξιολόγηση για να εκτιμηθεί η καταλληλότητα Πλήρης αξιολόγηση είναι πολύ ακριβή και μη πρακτική για ορισμένα συστήματα Ιδανικά, μία διεπαφή πρέπει να αξιολογείται σε σχέση με την εξειδίκευση χρηστικότητας. Όμως σπάνια παράγεται τέτοια προδιαγραφή

54 Χαρακτηριστικά Χρηστικότητας

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

56 Σημαντικά Σημεία Ο σχεδιασμός διεπαφής πρέπει να επικεντρώνεται στον χρήστη. Πρέπει να είναι λογικός και να βοηθά τον χρήστη να ανακτά από λάθη Τα συστήματα μενού είναι καλά για περιστασιακούς χρήστες Οθόνες με γραφικά χρησιμοποιούνται για την παρουσίαση τάσεων και τιμών κατά προσέγγιση. Όταν απαιτείται ακρίβεια απαιτείται ψηφιακή αναπαράσταση Το χρώμα πρέπει να χρησιμοποιείται προσεκτικά

57 Σημαντικά Σημεία Τα συστήματα πρέπει να παρέχουν βοήθεια on-line . Αυτή πρέπει να περιλαμβάνει τα εξής: «βοήθεια - υπάρχει πρόβλημα» και «βοήθεια - χρειάζομαι πληροφορία» Τα μηνύματα λαθών πρέπει να είναι θετικά αντί για αρνητικά Πρέπει να υπάρχουν διαφορετικοί τύποι τεκμηρίωσης Ιδανικά, μία διεπαφή με τον χρήστη πρέπει να αξιολογείται με βάση μία προδιαγραφή χρηστικότητας