KΕΦΑΛΑΙΟ ΣΧΕ ΙΑΣΜΟΣ ΙΕΠΑΦΗΣ ΧΡΗΣΤΗ

Transcript

1 KΕΦΑΛΑΙΟ 17 ΣΧΕ ΙΑΣΜΟΣ ΙΕΠΑΦΗΣ ΧΡΗΣΤΗ

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

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

4 ιε αφή Χρήστη Ο σχεδιασµός της διεπαφής χρήστη σε ένα σύστηµα αποτελεί ένα από τα βασικότερα στοιχεία που θα καθορίσουν την επιτυχία µιας εφαρµογής. Μια δύσχρηστη διεπαφή κάνει τον χρήστη να απορρίψει την εφαρµογή παρά το γεγονός ότι αυτή λειτουργεί σωστά. 4

5 Γραφική ιε αφή Χρήστη(GUI) Είναι το πιο καθιερωµένο µοντέλο διεπαφής Χρησιµοποιείτε σε όλα τα σύγχρονα υπολογιστικά συστήµατα Πλεονεκτήµατα 1. Ευκολία χρήσης και εκµάθησης 2. Πολλαπλές οθόνες(παράθυρα παράθυρα) για προβολή όσο το δυνατόν περισσότερων πληροφοριών 3. Γρήγορη και άµεση πρόσβαση σε όλες τις πληροφορίες στην οθόνη 5

6 Αρχές Σχεδίασης Για τον σχεδιασµό µιας διεπαφής πρέπει να ληφθούν υπόψη διάφοροι παράγοντες Ποίοι θα χρησιµο οιούν την εφαρµογή Ανθρώ ινες δυνατότητες Σκο ός της Εφαρµογής Ορολογίες ου θα χρησιµο οιηθούν Συνοχή ιε αφής - Συνοχή ιε αφής µε άλλα συστήµατα 6

7 Με την χρήση γραφικής διεπαφής χρήστη (GUI) αποφεύγονται πολλά λάθη αφού ο χρήστης δεν χρειάζεται να πληκτρολογεί πολλά δεδοµένα λόγω της χρήσης µενού και έτοιµων εντολών ( κουµπιά, λίστες κ.τ.λ). Παρόλα αυτά τα λάθη δεν µπορούν να αποφευχθούν πάντα. Έτσι χρειάζονται µηχανισµοί ανάκτησης : Ε ιβεβαίωση καταστροφικών ράξεων.χ ιαγραφής υνατότητα αναίρεσης εντολής- ράξης(undo) 7

8 Αλληλε ίδραση Χρήστη-Συστήµατος Ο σχεδιαστής µιας διεπαφής χρήστη πρέπει να αντιµετωπίσει 2 βασικές λειτουργίες του συστήµατος Πώς οι ληροφορίες θα µεταφέρονται α ό τον χρήση στο σύστηµα Πώς οι ληροφορίες θα αρουσιάζονται στον χρήστη α ό το σύστηµα 8

9 Άµεσος Χειρισµός Ο άµεσος χειρισµός προσφέρει στους χρήστες ένα µοντέλο του χώρου πληροφοριών τους. Αλληλεπιδρούν µε τις πληροφορίες αυτές µε άµεσες πράξεις όπως διαγραφή, αντικατάσταση, προσθήκη κ.τ.λ Παράδειγµα ενός τέτοιου µοντέλου είναι ο επεξεργαστής κειµένου. 9

10 Προτερήµατα των διεπαφών αµέσου χειρισµού : Οι χρήστες αισθάνονται ότι έχουν τον έλεγχο του υ ολογιστή Μικρός χρόνος εκµάθησης του συστήµατος Άµεση αρουσίαση α οτελεσµάτων για κάθε ράξη ου έγινε. Αυτό βοηθά στην άµεση διόρθωση λαθών 10

11 Ο σχεδιασµός διεπαφής άµεσου χειρισµού έχει κάποιες δυσκολίες : εν είναι άντοτε εύκολο να βρούµε µοντέλο ου να αντιστοιχεί στον ραγµατικό κόσµο για να σχεδιάσουµε µια διε αφή Λόγω του ότι οι χρήστες έχουν µεγάλο χώρο ληροφοριών είναι δύσκολο να εριηγηθούν σε αυτόν και να ξέρουν την θέση ου βρίσκονται Είναι ολύ λοκος ο ρογραµµατισµός τους και χρειάζονται ολλούς όρους του συστήµατος 11

12 Ένα µοντέλο διεπαφής άµεσου χειρισµού είναι οι φόρµες. 12

13 Μοντέλα ιε αφών Για να υποστηρίξουµε την συνοχή µεταξύ των διεπαφών, χρησιµοποιούµε συνεκτικά µοντέλα διεπαφών ή µεταφορές διεπαφών από τον πραγµατικό κόσµο που είναι πιο κατανοητές στον χρήστη. Ε ιφάνεια εργασίας(desktop) Πίνακας Ελέγχου 13

14 Το µοντέλο της Επιφάνειας Εργασίας δεν µπορεί να χρησιµοποιηθεί για όλα τα συστήµατα Σε εφαρµογές επεξεργασίας κειµένου, βάσεων δεδοµένων κ.τ.λ προτείνετε η χρήση ενός πίνακα ρυθµίσεων που περιλαµβάνει εικονίδια. Τα εικονίδια είναι η γραφική αναπαράσταση εντολών της εφαρµογής. 14

15 Πίνακας Ελέγχου Ε εξεργαστή Σχεδίου 15

16 Συστήµατα Μενού Σε µια διεπαφή χρήστη µε µενού, οι χρήστες διαλέγουν µία επιλογή για να εκτελέσουν κάποια εντολή. Αυτό γίνετε είτε µε κάποιο πλήκτρο συντόµευσης είτε µε κάποια συσκευή π.χ ποντίκι 16

17 Πλεονεκτήµατα χρήσης µενού : Οι χρήστες δεν χρειάζονται να γνωρίζουν εντολές Ελαχιστο οίηση ληκτρολόγησης α ό τον χρήστη Μερικά λάθη α ό τον χρήστη α οφεύγονται υνατότητα χρήσης βοήθειας σε σχέση µε το εριεχόµενο 17

18 Μειονεκτήµατα χρήσης µενού : Αν υ άρχουν ολλές ε ιλογές, ρέ ει να χρησιµο οιήσουµε κά οια δοµή για το µενού Οι έµ ειροι χρήστες θεωρούν τα µενού ιο αργά α ό την γλώσσα εντολών Πράξεις ου χρησιµο οιούν λογικούς συνδέσµους «και» «ή» είναι ολύ δύσκολο να αντι ροσω ευθούν µε µενού 18

19 ΕΙ Η ΜΕΝΟΥ Pull Down 1. Ο χρήστης γνωρίζει άντοτε την θέση τους 2. Προβλέψιµο το α οτέλεσµα όταν τα ατήσεις 3. Καταλαµβάνουν χώρο αρόλο ου κά οιες ε ιλογές σ άνια χρησιµο οιούνται Pop-Up 1. Το εριεχόµενο τους είναι ανάλογο µε την οντότητα ου συνοδεύουν 2. Ο χρήστης «ξαφνιάζετε» 3. Ο αρχάριος χρήστης δεν µ ορεί άντα να γνωρίζει την θέση τους 19

20 οµή Μεγάλων Μενού Μενού που ξετυλίγονται Ιεραρχικά µενού Μενού που αναπτύσσονται Μενού συσχετισµένα µε πίνακα ελέγχου 20

21 Μενού ου ξετυλίγονται Times Helvetica Palatino Bookface Frutiger Gothic Symbol 9 Point 10 Point 12 Point 14 Point 18 Point 24 Point 36 Point 48 Point Plain Bold Italic Underline Shadow 21

22 ιε αφή µε γραµµή Εντολών Η χρήση της γραµµής εντολών είναι η πρώτη µορφή διεπαφής χρήστη. Χρησιµοποιήθηκε λόγω του χαµηλού κόστους που χρειάζεται για να αναπτυχθεί και τον περιορισµένων υπολογιστικών πόρων. 22

23 Πλεονεκτήµατα-Μειονεκτήµατα διε αφής µε γραµµή εντολών : 1. Ανάπτυξη τεχνικών για επεξεργασία γλώσσας 2. Οι χρήστες χρειάζεται να µάθουν µια γλώσσα εντολών πολύ σύνθετη 3. Πολύ σύνθετες εντολές µπορούν να κατασκευαστούν συνδυάζοντας µεµονωµένες εντολές 4. Τα λάθη είναι αναπόφευκτα 5. Λιτή διεπαφή 6. Η αλληλεπίδραση µε τον χρήστη γίνετε µόνο µέσο του πληκτρολογίου και πολύ σπάνια µέσο ποντικιού 23

24 Πολλα λές ιε αφές Χρήστη Γραφική ιεπαφή Χρήστη ιεπαφή Γλώσσας Εντολών ιαχειριστής Γραφικής ιεπαφής Χρήστη Μεταφραστής Γλώσσας Εντολών ΣΥΣΤΗΜΑ ΕΦΑΡΜΟΓΗΣ ΛΟΓΙΣΜΙΚΟΥ 24

25 Παρουσίαση Πληροφοριών Όλα τα συστήµατα αλληλεπίδρασης πρέπει να έχουν κάποιον τρόπο να παρουσιάζουν τις πληροφορίες στον χρήστη. Για την σωστή επιλογή του τρόπου παρουσίασης των πληροφοριών πρέπει ο σχεδιαστής να γνωρίζει το υπόβαθρο που έχουν οι χρήστες στους οποίους θα παρουσιαστούν. 25

26 Παράγοντες που πρέπει να ληφθούν υπόψη του σχεδιαστή για το πως θα παρουσιάζονται οι πληροφορίες : Ο χρήστης ενδιαφέρεται για ακριβείς ληροφορίες ή για την σχέση µεταξύ διαφορετικών τιµών των δεδοµένων Πόσο γρήγορα αλλάζουν οι τιµές των ληροφοριών Ο χρήστης θα ρέ ει να κάνει κά οια ράξη όταν αλλάζουν Οι ληροφορίες; Ο χρήστης χρειάζεται να αλληλε ιδρά µε τις ληροφορίες Που αρουσιάζονται µέσο κά οιας διε αφής άµεσου χειρισµού Είδος των ληροφοριών ου θα αρουσιάζονται 26

27 Παρουσίαση Πληροφοριών µε κείµενο και Γραµµές ΙΑΝ ΦΕΒ ΜΑΡ ΑΠΡ ΜΑΙ ΙΟΥΝ Series

28 Αναλογική VS. Ψηφιακή Παρουσίαση Ψηφιακή Παρουσίαση Καταλαµβάνει λίγο χώρο στην οθόνη Μπορούν να παρουσιαστούν ακριβής τιµές Αναλογική Παρουσίαση Μπορούν να παρουσιαστούν σχετικές τιµές Ευκολότερο να εντοπιστούν συγκεκριµένες τιµές των δεδοµένων Ευκολότερο να πάρουµε µια πρώτη ιδέα των τιµών των δεδοµένων µας 28

29 υναµική αρουσίαση Πληροφοριών Dial with needle Pie chart Thermometer Horizontal bar 29

30 Παρουσίαση Σχετικών Τιµών Pressure Temperature

31 Α εικόνιση εδοµένων Χρησιµοποιείτε για απεικόνιση µικρού όγκου δεδοµένων Παραδείγµατα : 1. Πληροφορίες Καιρού 2. Τηλεφωνικά Κέντρα 3. Μοντέλο µορίου 31

32 Χρήση Χρώµατος Το χρώµα χρησιµοποιείτε για να τραβήξει την προσοχή του χρήστη σε σηµαντικά δεδοµένα και για διαχωρισµό των δεδοµένων έτσι ώστε να γίνονται κατανοητά από τον χρήστη. Αν δεν χρησιµοποιηθεί σωστά τότε αντί να βοηθά κάνει την εφαρµογή δύσχρηστη. 32

33 Συχνά Λάθη που γίνονται από την χρήση χρώµατος στην διεπαφή χρήστη : Το χρώµα χρησιµο οιείτε για να µετάδοση µηνυµάτων στον χρήστη.ο καθένας αντιλαµβάνεται τα διάφορα Χρώµατα ανάλογα µε τα βιώµατα του. Ε ίσης µεγάλο µέρος του ληθυσµού αντιµετω ίζει ρόβληµα αχρωµατοψίας άρα Υ άρχει δυσκολία στην σωστή κατανόηση του χρώµατος Τα χρώµατα ρέ ει να χρησιµο οιούνται µε τέτοιο τρό ο έτσι ώστε να υ άρχει συνοχή µεταξύ τους 33

34 Κανόνες για σωστή χρήση χρώµατος Περιορισµός των χρωµάτων ου θα χρησιµο οιηθούν Αλλαγή χρώµατος όταν υ άρχει αλλαγή στην κατάσταση του συστήµατος Χρησιµο οίηση χρώµατος για υ οστήριξη της δουλειάς του χρήστη Χρησιµο οίηση συγκεκριµένου χρώµατος για ίδια µηνύµατα Προσοχή στους συνδυασµούς χρωµάτων 34

35 Καθοδήγηση Χρήστη Οι εφαρµογές πρέπει να προσφέρουν στον χρήστη ένα σύστηµα βοήθειας. Η παροχή βοήθειας στον χρήστη καλύπτει 3 περιοχές : 1. Μηνύµατα που εµφανίζονται µετά από πράξη του χρήστη 2. Το σύστηµα βοήθειας 3. Η τεκµηρίωση που προσφέρεται µε το σύστηµα 35

36 Ολοκληρωµένο σύστηµα βοήθειας και µηνυµάτων ΕΦΑΡΜΟΓΗ ΙΕΠΑΦΗ ΒΟΗΘΕΙΑΣ ΣΥΣΤΗΜΑ ΠΑΡΟΥΣΙΑΣΗΣ ΜΗΝΥΜΑΤΩΝ ΣΥΣΤΗΜΑ ΜΗΝΥΜΑΤΩΝ ΛΑΘΟΥΣ ΠΛΑΙΣΙΟ ΒΟΗΘΕΙΑΣ ΚΕΙΜΕΝΑ ΜΗΝΥΜΑΤΩΝ ΛΑΘΟΥΣ 36

37 Μηνύµατα Λάθους Το πρώτο πρόβληµα που θα αντιµετωπίσει ένας αρχάριος χρήστης είναι τα µηνύµατα λάθους Σχεδίαση των Μηνυµάτων : Τα µηνύµατα λάθους ρέ ει να είναι κατατο ιστικά, ευγενικά και δηµιουργικά Να λαµβάνουν υ όψη το υ όβαθρο του χρήστη του συστήµατος 37

38 Παραδείγµατα σχεδιασµού 38

39 Σχεδιασµός Συστήµατος Βοήθειας Το σύστηµα βοήθειας µιας εφαρµογής πρέπει να δίνει την δυνατότητα στον χρήστη να εισέρχεται σε αυτό από οποιοδήποτε σηµείο. Να µπορεί να βρει εξηγήσεις για µηνύµατα λάθους και εντολές 39

40 Σηµεία Εισόδου στο Σύστηµα Βοήθειας ΕΙΣΟ ΟΣ ΑΠΟ ΤΗΝ ΚΟΡΥΦΗ ΕΙΣΟ ΟΣ ΑΠΟ ΕΦΑΡΜΟΓΗ ΕΙΣΟ ΟΣ ΑΠΟ ΣΥΣΤΗΜΑ ΜΗΝΥΜΤΩΝ ΛΑΘΟΥΣ 40

41 Ένα σύστηµα βοήθειας πρέπει να δίνει τις ακόλουθες δυνατότητες στον χρήστη : Να βλέ ει το οία θέµατα έχει διαβάσει ( ιστορικό βοήθειας) Α ό την τρέχουσα σελίδα να µεταβαίνει σε κά οια άλλη Να δείχνει στον χρήστη το ου βρίσκετε στο σύστηµα Κά οια σύγχρονα συστήµατα αρέχουν δυνατότητες υ ερ-µέσων και υ ερ-κειµένου 41

42 Τεκµηρίωση Χρήστη Το σύστηµα εκτός από τις δυνατότητες που παρέχει στον τελικό χρήστη για βοήθεια, πρέπει να συνοδεύετε και από γραπτή τεκµηρίωση για όλες τις λειτουργίες του αλλά και την εγκατάσταση του. Η τεκµηρίωση του απευθύνετε σε όλους τους χρήστες ανάλογα µε την εµπειρία τους. 42

43 Η τεκµηρίωση αποτελείτε από 5 έγγραφα : Περιγραφή λειτουργιών Σύντοµη εριγραφή των δυνατοτήτων του συστήµατος Εισαγωγικό Εγχειρίδιο Παρουσιάζει µια άτυ η εισαγωγή για το σύστηµα Εγχειρίδιο Αναφοράς στο σύστηµα Λε τοµερής αρουσίαση δυνατοτήτων του συστήµατος Εγχειρίδιο εγκατάστασης συστήµατος Περιγράφει το ώς θα γίνει η εγκατάσταση του συστήµατος Εγχειρίδιο διαχείρισης συστήµατος Περιγράφει την διαχείριση του συστήµατος 43

44 44 Είδη Είδη εγγράφων εγγράφων για για υ οστήριξη υ οστήριξη χρήστη χρήστη ΠΕΡΙΓΡΑΦΗ ΥΠΗΡΕΣΙΩΝ ΠΕΡΙΓΡΑΦΗ ΥΠΗΡΕΣΙΩΝ ΕΓΚΑΤΑΣΤΑΣΗ ΣΥΣΤΗΜΑΤΟΣ ΕΓΚΑΤΑΣΤΑΣΗ ΣΥΣΤΗΜΑΤΟΣ ΠΩΣ ΝΑ ΞΕΚΙΝΗΣΩ ΠΩΣ ΝΑ ΞΕΚΙΝΗΣΩ ΠΕΡΙΓΡΑΦΗ ΛΕΙΤΟΥΡΓΙΩΝ ΠΕΡΙΓΡΑΦΗ ΛΕΙΤΟΥΡΓΙΩΝ ΛΕΙΤΟΥΡΓΙΑ ΣΥΝΤΗΡΗΣΗ ΛΕΙΤΟΥΡΓΙΑ ΣΥΝΤΗΡΗΣΗ ΠΕΡΙΓΡΑΦΗ ΛΕΙΤΟΥΡΓΙΩΝ ΠΕΡΙΓΡΑΦΗ ΛΕΙΤΟΥΡΓΙΩΝ ΕΓΓΡΑΦΟ ΕΓΚΑΤΑΣΤΑΣΗΣ ΕΓΓΡΑΦΟ ΕΓΚΑΤΑΣΤΑΣΗΣ ΕΙΣΑΓΩΓΙΚΟ ΕΓΓΡΑΦΟ ΕΙΣΑΓΩΓΙΚΟ ΕΓΓΡΑΦΟ ΕΓΓΡΑΦΟ ΑΝΑΦΟΡΑΣ ΕΓΓΡΑΦΟ ΑΝΑΦΟΡΑΣ Ο ΗΓΟΣ ΙΑΧΕΙΡΙΣΗΣ Ο ΗΓΟΣ ΙΑΧΕΙΡΙΣΗΣ ΑΞΙΟΛΟΓΗΤΕΣ ΣΥΣΤΗΜΑΤΟΣ ΑΞΙΟΛΟΓΗΤΕΣ ΣΥΣΤΗΜΑΤΟΣ ΙΑΧΕΙΡΙΣΤΕΣ ΣΥΣΤΗΜΑΤΟΣ ΙΑΧΕΙΡΙΣΤΕΣ ΣΥΣΤΗΜΑΤΟΣ ΑΡΧΑΡΙΟΙ ΧΡΗΣΤΕΣ ΑΡΧΑΡΙΟΙ ΧΡΗΣΤΕΣ ΕΜΠΕΙΡΟΙ ΧΡΗΣΤΕΣ ΕΜΠΕΙΡΟΙ ΧΡΗΣΤΕΣ ΙΑΧΕΙΡΙΣΤΕΣ ΣΥΣΤΗΜΑΤΟΣ ΙΑΧΕΙΡΙΣΤΕΣ ΣΥΣΤΗΜΑΤΟΣ

45 Αξιολόγηση ιε αφής Χρήστη Η αξιολόγηση µιας διεπαφής γίνετε χρησιµοποιώντας κάποιες παραµέτρους : Ευκολία εκµάθησης Ταχύτητα λειτουργίας Ανεκτικότητα σε λάθη χρήστη υνατότητα ανάκτησης α ό λάθη Προσαρµοστικότητα 45

46 Τρόποι Αξιολόγησης : Ερωτηµατολόγια Παρακολούθηση των χρηστών εν ώρα δουλειάς Μαγνητοσκο ηµένα στιγµιότυ α α ό χρήση του συστήµατος Ενσωµάτωση κώδικα στο σύστηµα ου ελέγχει οιες λειτουργίες χρησιµο οιούνται ερισσότερο 46