ΑΛΛΗΛΕΠΙΔΡΑΣΗ ΑΝΘΡΩΠΟΥ - ΥΠΟΛΟΓΙΣΤΗ. Διδάσκων: Κωνσταντίνος Στεφανίδης

Transcript

1 ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ ΣΧΟΛΗ ΘΕΤΙΚΩΝ ΕΠΙΣΤΗΜΩΝ ΤΜΗΜΑ ΕΠΙΣΤΗΜΗΣ ΥΠΟΛΟΓΙΣΤΩΝ ΜΑΘΗΜΑ ΕΠΙΛΟΓΗΣ ΗΥ-464 ΑΛΛΗΛΕΠΙΔΡΑΣΗ ΑΝΘΡΩΠΟΥ - ΥΠΟΛΟΓΙΣΤΗ Διδάσκων: Κωνσταντίνος Στεφανίδης

2 Source: S. Weinschenk, P. Jamar, S. C. Yeo (1997) GUI design essentials Publisher: John Wiley & Sons, Inc. Διαφάνεια 2

3 Ο χρήστης και ο υπολογιστής επικοινωνούν μέσω της χρήσης διάφορων χειριστηρίων (controls) Η επιλογή ενός χειριστηρίου δεν είναι τόσο απλή όσο το να ακολουθεί κανείς μια συνταγή Η επιλογή του κατάλληλου χειριστηρίου απαιτεί από τον σχεδιαστή να συνδυάσει βιομηχανικά πρότυπα, εταιρικά πρότυπα, καθώς και τις ανάγκες του χρήστη Διαφάνεια 3

4 Κουμπιά εντολών (Command buttons) Κουμπιά επιλογής (Options buttons) Πλαίσια επιλογής (Check boxes) Πλαίσια κειμένου (Text boxes) Πλαίσια καταλόγου (List boxes) Πλαίσια καταλόγου πολλαπλής επιλογής (Multiple selection list boxes) Πίνακες και πλέγματα (Tables and grids) Περιστροφικά πλαίσια (Spin boxes) Μπάρες ολίσθησης (Sliders) Δενδρικές αναπαραστάσεις (Tree views) Διαφάνεια 4

5 Τα κουμπιά εντολών είναι ο βασικός τρόπος με τον οποίο οι χρήστες ενεργούν σε ένα παράθυρο διαλόγου Χρησιμοποιείτε τα κουμπιά εντολών για να υποδηλώσετε στους χρήστες τις κύριες ενέργειες ενός συγκεκριμένου διαλόγου Οι χρήστες θα πρέπει να έχουν τη δυνατότητα ρίχνοντας μια ματιά σε ένα παράθυρο διαλόγου να γνωρίζουν τι να κάνουν σε κάθε βήμα, βασισμένοι στα ονόματα και στη θέση των κουμπιών εντολών Διαφάνεια 5

6 Χρησιμοποιείτε τα κουμπιά εντολών μόνο για συχνές ή σημαντικές και άμεσες ενέργειες Χρησιμοποιείτε τα κουμπιά εντολών όταν οι χρήστες πρόκειται να πραγματοποιήσουν άμεσα μια ενέργεια η οποία είναι συχνή ή σημαντική Τα κουμπιά εντολών λειτουργούν ως υπενθύμιση για τις λειτουργίες που μπορούν και πρέπει να πραγματοποιηθούν Σε ένα παράθυρο θα πρέπει να χρησιμοποιούνται το πολύ έξι κουμπιά εντολών Οι λειτουργίες των κουμπιών εντολών μπορεί επίσης να εμφανίζονται σε μενού Αν μια ενέργεια δεν είναι συχνή ή κρίσιμη, τοποθετήστε την σε ένα μενού dropdown Διαφάνεια 6

7 Χρησιμοποιείτε κουμπιά εντολών μόνο για συχνές ή κρίσιμες άμεσες ενέργειες - παράδειγμα Διαφάνεια 7

8 Ονομάζετε τα κουμπιά με προσοχή Φροντίζετε το όνομα που δίνετε σε ένα κουμπί εντολής να είναι ξεκάθαρο, περιεκτικό και σύντομο Για παράδειγμα, χρησιμοποιείτε το όνομα «Ρυθμίσεις Εκτύπωσης» (Print Setup) και όχι «Περισσότερα» (More). Χρησιμοποιείτε ονομασίες πολλαπλών λέξεων όταν χρειάζεται για να δοθεί με σαφήνεια το νόημα ενός κουμπιού Για παράδειγμα, χρησιμοποιείτε «Εκτύπωση τρεχουσών παραγγελιών» και όχι «Τρέχουσες» Ωστόσο, να είστε σύντομοι και να παραλείπετε λέξεις που δεν είναι απαραίτητες Ακολουθείτε τους κανόνες κεφαλαιοποίησης τίτλων (book title capitalisation rules) Για κάθε κύρια λέξη, το πρώτο γράμμα πρέπει να είναι κεφαλαίο Διαφάνεια 8

9 Ονομάζετε τα κουμπιά με συνέπεια Επιλέγετε συγκεκριμένες ονομασίες για ορισμένες λειτουργίες και χρησιμοποιείτε τις ίδιες παντού στην ίδια εφαρμογή καθώς και από τη μια εφαρμογή στην άλλη Για παράδειγμα, χρησιμοποιείτε «Λίστα» για να εμφανίσετε ένα πίνακα επιλογών, αντί κάποιες φορές «Λίστα» και κάποιες φορές «Αναζήτηση» Διαφάνεια 9

10 Χρησιμοποιείτε βιομηχανικά πρότυπα για ονομασίες Μερικές ονομασίες έχουν γίνει πρότυπα στις γραφικές διεπαφές. Χρησιμοποιείτε αυτά τα πρότυπα, όταν πραγματοποιείτε τις παρακάτω λειτουργίες: Όνομα Ενέργεια Συντόμευση Πληκτρολογίου OK Πραγματοποιεί τις αλλαγές και κλείνει το παράθυρο Enter Cancel Δεν πραγματοποιεί αλλαγές και κλείνει το παράθυρο Escape Close Κλείνει το παράθυρο όταν δεν μπορούν να γίνουν αλλαγές C Reset Επαναφέρει τις προεπιλογές, αφήνει το παράθυρο ανοικτό R Apply Πραγματοποιεί αλλαγές, αφήνει το παράθυρο ανοικτό A Help Ανοίγει τη βοήθεια H Διαφάνεια 10

11 Σκεφτείτε να αντικαταστήσετε το κουμπί OK με ένα συγκεκριμένο όρο Αν το κουμπί OK έχει ως αποτέλεσμα μια συγκεκριμένη λειτουργία, όπως εκτύπωση ή διαγραφή, εξετάστε τη χρήση του συγκεκριμένου όρου αντί του γενικότερου OK Διαφάνεια 11

12 Τα κουμπιά πρέπει να έχουν μεταξύ τους σχετικό μέγεθος (1/2) Αν το μήκος του κειμένου για μια σειρά κουμπιών σε ένα παράθυρο διαλόγου είναι παρόμοιο, κάντε όλα τα κουμπιά στο παράθυρο να έχουν το μέγεθος του μεγαλύτερου κουμπιού Διαφάνεια 12

13 Τα κουμπιά πρέπει να έχουν μεταξύ τους σχετικό μέγεθος (2/2) Αν το κείμενο για μια σειρά κουμπιών εντολών σε ένα παράθυρο διαλόγου διαφέρει, χρησιμοποιείτε δύο μεγέθη κουμπιών Ένα για το μικρότερο κείμενο και ένα για το μεγαλύτερο Αυτό σας επιτρέπει να έχετε τα μεγέθη κουμπιών που χρειάζεστε, αποφεύγοντας τα πολλά διαφορετικά μεγέθη Μη χρησιμοποιείτε περισσότερα από δύο μεγέθη κουμπιών σε ένα παράθυρο διαλόγου Διαφάνεια 13

14 Διαχωρίζετε τα κουμπιά από το υπόλοιπο παράθυρο διαλόγου (1/2) Χρησιμοποιείτε κενό διάστημα για να ξεχωρίσετε τα κουμπιά που αφορούν ολόκληρο το παράθυρο διαλόγου Διαφάνεια 14

15 Διαχωρίζετε τα κουμπιά από το υπόλοιπο παράθυρο διαλόγου (2/2) Τα κουμπιά δεν πρέπει να συνωστίζονται με τα υπόλοιπα χειριστήρια (controls) ενός παραθύρου διαλόγου Διαφάνεια 15

16 Ομαδοποιείτε τα κουμπιά Αν έχετε περισσότερα από τρία κουμπιά χρησιμοποιείτε κενό χώρο για να τα ομαδοποιείτε Ομαδοποιείτε τα κουμπιά ώστε να προσδιορίζετε: Κουμπιά με παρόμοιες λειτουργίες Κουμπιά για έξοδο από το παράθυρο (OK, Cancel) Ενέργειες διαγραφής (Delete) Διαφάνεια 16

17 Τοποθετείτε τα κουμπιά με συνέπεια Χρησιμοποιείτε μια από τις παρακάτω θέσεις για τα κουμπιά: Πάνω δεξιά στο παράθυρο Κάτω δεξιά στο παράθυρο Μην τοποθετείτε τα κουμπιά και στις δύο θέσεις σε ένα παράθυρο Διαφάνεια 17

18 Καθορίζετε τη θέση ανάλογα με τη χρήση του παραθύρου (1/3) Επιλέγετε είτε μια κατακόρυφη είτε μια οριζόντια σχεδίαση για ένα συγκεκριμένο παράθυρο, και τοποθετείτε τα κουμπιά έτσι ώστε να ταιριάζουν με τη σχεδίαση Η οριζόντια σχεδίαση πρέπει να έχει τα κουμπιά πάνω δεξιά Διαφάνεια 18

19 Καθορίζετε τη θέση ανάλογα με τη χρήση του παραθύρου (2/3) Η κατακόρυφη σχεδίαση πρέπει να έχει τα κουμπιά κάτω Διαφάνεια 19

20 Καθορίζετε τη θέση ανάλογα με τη χρήση του παραθύρου (3/3) Η ομαδοποίηση και η παρουσίαση των δεδομένων στο παράθυρο καθορίζει ποια σχεδίαση να χρησιμοποιήσετε Το μήκος και το πλήθος των κουμπιών αποτελούν επίσης καθοριστικούς παράγοντες Αν έχετε μακροσκελή ονόματα κουμπιών ή πολλά κουμπιά, μπορεί να θέλετε να χρησιμοποιήσετε οριζόντια σχεδίαση με τα κουμπιά πάνω δεξιά Μπορείτε να πραγματοποιήσετε αυτές τις αποφάσεις ανά παράθυρο (window) ή ανά πλαίσιο διαλόγου (dialog box) Η σχεδίαση ροής του παραθύρου δεν απαιτείται να είναι η ίδια σε όλα τα παράθυρα ή τα πλαίσια διαλόγου Διαφάνεια 20

21 Τοποθετείτε κουμπιά περιορισμένων ενεργειών όπου χρειάζεται Αν ένα κουμπί εντολής αφορά μόνο ένα τμήμα ενός παραθύρου διαλόγου, τοποθετείστε το κουμπί εκεί που χρειάζεται Π.χ., στην εικόνα που ακολουθεί το κουμπί Search έχει τοποθετηθεί στο πλαίσιο που θα χρησιμοποιηθεί Διαφάνεια 21

22 Τοποθετείτε τα κουμπιά με συνέπεια Οποτεδήποτε είναι δυνατόν, τοποθετείτε τα κουμπιά με την ακόλουθη σειρά: 1. Καταφατικά κουμπιά για έξοδο από το παράθυρο (OK) 2. Κουμπιά ακύρωσης για έξοδο από το παράθυρο (Cancel) 3. Μοναδικά κουμπιά για το παράθυρο Η σειρά είναι ίδια για διάταξη κάτω ή δεξιά Διαφάνεια 22

23 Χρησιμοποιείτε αποσιωπητικά (...) για να υποδείξετε ότι χρειάζεται είσοδος δεδομένων Αν απαιτούνται επιπλέον δεδομένα για να ολοκληρωθεί η λειτουργία ενός κουμπιού, χρησιμοποιείτε αποσιωπητικά (...) μετά το όνομα του κουμπιού (βλ. κουμπί Details ) Διαφάνεια 23

24 Γκριζάρετε τα μη διαθέσιμα κουμπιά Χρησιμοποιείτε το γκρι χρώμα για να δείξετε ότι η ενέργεια ενός κουμπιού δεν είναι διαθέσιμη Για παράδειγμα, ορισμένες ενέργειες μπορεί να μην είναι διαθέσιμες προκειμένου να αποτρέψουν μια ενέργεια του χρήστη μέχρι να πραγματοποιηθεί κάποιο άλλο απαραίτητο βήμα Το γκριζάρισμα υποδηλώνει ότι υπάρχει μια ενέργεια που μπορεί να πραγματοποιήσει ο χρήστης για να κάνει το κουμπί διαθέσιμο Αν στην πραγματικότητα δεν υπάρχει ενέργεια με την οποία ο χρήστης μπορεί να αλλάξει την κατάσταση του κουμπιού (το κουμπί δε θα είναι ποτέ χρησιμοποιήσιμο), τότε μην συμπεριλάβετε το κουμπί στο συγκεκριμένο παράθυρο Διαφάνεια 24

25 Μην ορίζετε ως προεπιλογές κουμπιά διαγραφής Επιλέξτε ένα κουμπί του παραθύρου ως προεπιλεγμένο Αν ο χρήστης πατήσει το Enter το κουμπί ενεργοποιείται Ορίζετε ως προεπιλεγμένη την πιο συνηθισμένη ή σημαντική ενέργεια στο παράθυρο Για παράδειγμα «Εκτύπωση» στο παράθυρο εκτύπωσης Μην ορίζετε ως προεπιλογή ένα κουμπί διαγραφής, ακόμα και αν πρόκειται για την πιο συνηθισμένη ή σημαντική ενέργεια στο παράθυρο Διαφάνεια 25

26 Κουμπιά εντολών (Command buttons) Κουμπιά επιλογής (Options buttons) Πλαίσια επιλογής (Check boxes) Πλαίσια κειμένου (Text boxes) Πλαίσια καταλόγου (List boxes) Πλαίσια καταλόγου πολλαπλής επιλογής (Multiple selection list boxes) Πίνακες και πλέγματα (Tables and grids) Περιστροφικά πλαίσια (Spin boxes) Μπάρες ολίσθησης (Sliders) Δενδρικές αναπαραστάσεις (Tree views)

27 Τα κουμπιά επιλογής, επίσης γνωστά ως radio buttons, αντικαθιστούν πολλές ενέργειες εισαγωγής δεδομένων Χρησιμοποιείτε κουμπιά επιλογής για μια μοναδική επιλογή Χρησιμοποιείτε κουμπιά επιλογής όταν οι χρήστες πρέπει να διαλέξουν μια επιλογή από ένα σύνολο αμοιβαία αποκλειόμενων επιλογών Για παράδειγμα, για να επιλέξουν μια περίοδο πληρωμής, σε μια εφαρμογή για τη διαχείριση προσωπικού Δίνετε περιγραφικά ονόματα στα κουμπιά επιλογής Επιλέξτε ένα ξεκάθαρο και περιγραφικό όνομα για κάθε κουμπί επιλογής Για παράδειγμα, «Αποστολή Περιγραφής Μαθήματος» αντί για «Μάθημα» Διαφάνεια 27

28 Ομαδοποιείτε τα κουμπιά επιλογής και δίνετε στην ομάδα ένα όνομα Τοποθετείτε τα κουμπιά επιλογής μαζί σε μια ομάδα Χρησιμοποιείτε ένα πλαίσιο για να δείξετε την ομάδα Χρησιμοποιείτε ένα περιγραφικό όνομα για όλη την ομάδα Διαφάνεια 28

29 Στοιχίζετε τα κουμπιά επιλογής κατακόρυφα Αν έχετε στη διάθεσή σας τον απαραίτητο χώρο, στοιχίζετε τα κουμπιά επιλογής κατακόρυφα παρά οριζόντια προκειμένου να διευκολύνετε τη γρήγορη ανάγνωση (scanning) των επιλογών Διαφάνεια 29

30 Περιορίζετε τα κουμπιά επιλογής σε έξι ή λιγότερα Αν έχετε περισσότερες επιλογές, σκεφτείτε εναλλακτικά τη χρήση ενός πλαισίου καταλόγου Επιλέξτε μια ταξινόμηση Αποφασίστε την καλύτερη ταξινόμηση για τα κουμπιά επιλογής Ορισμένες μέθοδοι ταξινόμησης είναι: Βάσει συχνότητας- οι πιο συχνά χρησιμοποιούμενες επιλογές στην κορυφή Βάσει εργασίας αν υπάρχει κάποια συνηθισμένη σειρά με την οποία πραγματοποιούνται τμήματα μιας εργασίας Βάσει λογικής αν υπάρχει μια λογική σειρά, για παράδειγμα μια λίστα ημερομηνιών Αλφαβητικά χρησιμοποιείτε αλφαβητική ταξινόμηση μόνο αν τα ονόματα ταιριάζουν με τον τρόπο με τον οποίο σκέφτονται οι χρήστες για τα αντικείμενα Διαφάνεια 30

31 Αποφεύγετε κουμπιά δυαδικής επιλογής Αν οι χρήστες χρειάζεται να πραγματοποιήσουν επιλογές τύπου ναι / όχι ή ανοικτό/κλειστό, χρησιμοποιείτε ένα πλαίσιο επιλογής αντί για κουμπιά επιλογής Ωστόσο, χρησιμοποιείτε δύο κουμπιά επιλογής, για διακριτές, αμοιβαία αποκλειόμενες επιλογές, όπως για παράδειγμα, αρσενικό / θηλυκό Διαφάνεια 31

33 Τα πλαίσια επιλογής αντικαθιστούν κάποιες ενέργειες εισαγωγής δεδομένων και παρέχουν ένα γρήγορο τρόπο για την πραγματοποίηση πολλαπλών επιλογών Χρησιμοποιείτε πλαίσια επιλογής για περισσότερες από μια επιλογές Χρησιμοποιείτε πλαίσια επιλογής όταν οι χρήστες μπορούν να πραγματοποιήσουν μια ή περισσότερες επιλογές Χρησιμοποιείτε πλαίσια επιλογής για διακόπτες Χρησιμοποιείτε πλαίσια επιλογής ως διακόπτες για την ενεργοποίηση ή απενεργοποίηση ενός χαρακτηριστικού Μπορείτε να έχετε μόνο ένα πλαίσιο επιλογής Διαφάνεια 33

34 Ονομάζετε τα πλαίσια επιλογής περιγραφικά Επιλέγετε μια ξεκάθαρη, περιγραφική ονομασία την οποία οι χρήστες θα κατανοούν για κάθε πλαίσιο επιλογής Για παράδειγμα, χρησιμοποιείτε «Εκτύπωση Αντίστροφης Φοράς», και όχι «Αντίστροφα» Ομαδοποιείτε τα πλαίσια επιλογής και ονομάστε ανάλογα τις ομάδες Τοποθετείτε τα πλαίσια επιλογής μαζί σε μια ομάδα Χρησιμοποιείτε ένα πλαίσιο για να δείξετε την ομάδα Χρησιμοποιείτε ένα περιγραφικό όνομα για όλη την ομάδα Διαφάνεια 34

35 Στοιχίζετε τα πλαίσια επιλογής κατακόρυφα Στοιχίζετε τα πλαίσια επιλογής κατακόρυφα, παρά οριζόντια, προκειμένου να διευκολύνετε τη γρήγορη ανάγνωση (scanning) των επιλογών Διαφάνεια 35

36 Περιορίζετε τα πλαίσια επιλογής σε δέκα ή λιγότερα Αν έχετε περισσότερες επιλογές, μπορείτε να χρησιμοποιείτε ένα πλαίσιο καταλόγου πολλαπλών επιλογών Επιλέξτε μια ταξινόμηση Αποφασίστε την καλύτερη ταξινόμηση για τα πλαίσια επιλογής Ορισμένες μέθοδοι ταξινόμησης: Βάσει συχνότητας- οι πιο συχνά χρησιμοποιούμενες επιλογές στην κορυφή Βάσει εργασίας αν υπάρχει κάποια συνηθισμένη σειρά με την οποία πραγματοποιούνται τμήματα μιας εργασίας Βάσει λογικής αν υπάρχει μια λογική σειρά, για παράδειγμα μια λίστα ημερομηνιών Αλφαβητικά χρησιμοποιείτε αλφαβητική ταξινόμηση μόνο αν τα ονόματα ταιριάζουν με τον τρόπο με τον οποίο σκέφτονται οι χρήστες για τα αντικείμενα Διαφάνεια 36

37 Μη χρησιμοποιείτε πλαίσια επιλογής: «Επιλογή όλων» ή «Απενεργοποίηση όλων» Αν πιστεύετε ότι οι χρήστες θα επιθυμούν να επιλέγουν όλα τα πλαίσια επιλογής ενός συνόλου, ή να τα απενεργοποιούν όλα, αντί για πλαίσια επιλογής να χρησιμοποιήστε ένα πλαίσιο καταλόγου πολλαπλών επιλογών (multiple selection list box) με κουμπιά «Επιλογή όλων» και «Απενεργοποίηση όλων» Διαφάνεια 37

39 Τα πλαίσια κειμένου είναι ο κύριος τρόπος για να πληκτρολογούν δεδομένα οι χρήστες Χρησιμοποιείτε ένα περίγραμμα για να υποδηλώσετε ότι ο χρήστης μπορεί να εισάγει ή να αλλάξει δεδομένα Χρησιμοποιείτε ένα πλαίσιο κειμένου με περίγραμμα για να δηλώσετε ότι ο χρήστης μπορεί να εισάγει ή να επεξεργαστεί δεδομένα Παρουσιάζετε χωρίς πλαίσιο δεδομένα τα οποία είναι μόνο για ανάγνωση Αν τα δεδομένα είναι μόνο για παρουσίαση και δεν μπορούν να τροποποιηθούν ή να προστεθούν νέα, μην τοποθετείτε πλαίσιο γύρω από αυτά Διαφάνεια 39

40 Γκριζάρετε προσωρινά προστατευόμενα πεδία Αν ένα συγκεκριμένο πλαίσιο κειμένου είναι προσωρινά προστατευόμενο, γκριζάρετε το πλαίσιο και το όνομα (label), για να δηλώσετε ότι η εισαγωγή ή τροποποίηση δεδομένων δεν είναι δυνατή τη συγκεκριμένη στιγμή Παράδειγμα πεδίου στο οποίο τα δεδομένα μπορούν να τροποποιηθούν Παράδειγμα πεδίου στο οποίο τα δεδομένα δεν μπορούν να τροποποιηθούν Διαφάνεια 40

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

42 Στοιχίζετε τα πλαίσια κειμένου Στοιχίζετε αριστερά τα πλαίσια κειμένου, για να ελαχιστοποιήσετε το πλήθος των διαφορετικών περιγραμμάτων Περιορίστε το πλήθος των ξεχωριστών περιγραμμάτων σε δύο Διαφάνεια 42

43 Ομαδοποιείτε τα πλαίσια κειμένου Αν έχετε πλαίσια κειμένου που όλα αναφέρονται σε σχετική πληροφορία, ομαδοποιήστε τα σε ένα πλαίσιο και ονομάστε ανάλογα την ομάδα Ονομάζετε όλα τα πλαίσια κειμένου Δώστε μια περιγραφική ονομασία σε κάθε πλαίσιο κειμένου Αποφεύγετε τα ακρωνύμια ή τις συντομογραφίες, εκτός και αν είστε σίγουροι ότι όλοι οι χρήστες θα τα κατανοήσουν Μπορείτε να χρησιμοποιείτε ονομασίες πολλαπλών λέξεων για τα πλαίσια κειμένου, αρκεί να είναι συνοπτικές Χρησιμοποιήστε κεφαλαία για το πρώτο γράμμα της αρχικής λέξης μιας ονομασίας Τοποθετείτε τις ετικέτες ονομασίας (labels) στα αριστερά Τοποθετείτε τις ετικέτες ονομασίας για πλαίσια κειμένου στα αριστερά του πλαισίου Αποφεύγετε να τοποθετείτε τις ετικέτες πάνω από τα πλαίσια κειμένου Διαφάνεια 43

44 Στοιχίζετε τις ετικέτες ονομασίας των πλαισίων κειμένου αριστερά Μην τις στοιχίζετε δεξιά Οι ετικέτες οι οποίες έχουν δεξιά στοίχιση δημιουργούν στα αριστερά ένα μη ομαλό περιθώριο, το οποίο είναι δύσκολο να «σκαναριστεί» στα γρήγορα Διαφάνεια 44

45 Τοποθετείτε άνω-κάτω τελεία μετά από την ετικέτα ονομασίας (label) ενός πλαισίου κειμένου Τοποθετείτε άνω-κάτω τελεία μετά από την ετικέτα ενός πλαισίου κειμένου για να γίνεται διαχωρισμός μεταξύ της ονομασίας και των δεδομένων που ακολουθούν Μη χρησιμοποιείτε άνω-κάτω τελεία μετά από την ετικέτα ονομασίας πλαισίων ομάδων (group frame) ή επικεφαλίδων στηλών (column headings) Διαφάνεια 45

47 Τα πλαίσια καταλόγου είναι η εναλλακτική λύση για τις μεγάλες λίστες κουμπιών επιλογής Είναι επίσης μια εναλλακτική μέθοδος εισαγωγής δεδομένων και εξασφαλίζουν την ακεραιότητα των δεδομένων Χρησιμοποιείτε πλαίσια καταλόγου για μεγάλους καταλόγους Χρησιμοποιείτε πλαίσια καταλόγου αντί για κουμπιά επιλογής όταν έχετε πολλές επιλογές Όταν έχετε περισσότερα από έξι κουμπιά επιλογής χρησιμοποιείτε ένα πλαίσιο καταλόγου απλής επιλογής Διαφάνεια 47

48 Χρησιμοποιείτε πλαίσια καταλόγου για δυναμικά δεδομένα Αν τα δεδομένα είναι πιθανόν να μεταβάλλονται με την πάροδο του χρόνου, χρησιμοποιείτε ένα πλαίσιο καταλόγου αντί για κουμπιά επιλογής ή πλαίσια επιλογής Είναι ευκολότερο να αλλάξετε τις επιλογές που παρουσιάζονται σε ένα πλαίσιο καταλόγου Παρουσιάζετε από τρία έως οκτώ αντικείμενα κάθε φορά Παρουσιάζετε τουλάχιστον τρία, αλλά όχι περισσότερα από οκτώ αντικείμενα σε ένα πλαίσιο καταλόγου κάθε φορά Αν έχετε περισσότερα αντικείμενα, χρησιμοποιήστε μια μπάρα ολίσθησης για να δείξετε τα υπόλοιπα αντικείμενα Δείτε επίσης τις οδηγίες για πτυσσόμενα (drop-down) πλαίσια καταλόγου Διαφάνεια 48

49 Ονομάζετε κάθε πλαίσιο καταλόγου Επιλέξτε ένα όνομα για ολόκληρο το πλαίσιο καταλόγου, έτσι ώστε να περιγράφει τα αντικείμενα μέσα στο πλαίσιο Για παράδειγμα «Διαθέσιμοι Εκτυπωτές» Τοποθετείτε το όνομα στην κορυφή του καταλόγου, στοιχισμένο αριστερά, και με άνω-κάτω τελεία στο τέλος Διαφάνεια 49

50 Χρησιμοποιείτε φίλτρα για μεγάλες λίστες Αν υπάρχουν περισσότερα από 40 αντικείμενα σε ένα κατάλογο, παρέχετε έναν τρόπο για να μπορούν οι χρήστες να εφαρμόζουν φίλτρα στον κατάλογο και να περιορίζουν τον αριθμό των επιλογών από τις οποίες πρέπει να διαλέξουν Διαφάνεια 50

51 Χρησιμοποιείτε πτυσσόμενα (drop-down) πλαίσια καταλόγου για να εξοικονομείτε χώρο Τα πτυσσόμενα πλαίσια καταλόγου σας επιτρέπουν να εξοικονομείτε χώρο Χρησιμοποιείτε πτυσσόμενα πλαίσια καταλόγου αν οι περισσότεροι χρήστες θα επιλέξουν το πρώτο αντικείμενο Ωστόσο, τα πλαίσια καταλόγου κρύβουν από τους χρήστες όλες τις επιλογές εκτός από την πρώτη Οι χρήστες πρέπει να πραγματοποιήσουν ένα επιπλέον βήμα για να δουν τα υπόλοιπα περιεχόμενα του καταλόγου Μη χρησιμοποιείτε πτυσσόμενα πλαίσια καταλόγου αν είναι σημαντικό οι χρήστες να μπορούν διαρκώς να βλέπουν όλες τις διαθέσιμες επιλογές Διαφάνεια 51

52 Χρησιμοποιείτε ένα συνδυαστικό πλαίσιο καταλόγου (combination list box) για να επιτρέπετε στους χρήστες να πληκτρολογούν μια επιλογή Ένα συνδυαστικό πλαίσιο καταλόγου δίνει στο χρήστη τη δυνατότητα να επιλέξει μια επιλογή πληκτρολογώντας την ή επιλέγοντας την από τον κατάλογο Χρησιμοποιείτε συνδυαστικά πλαίσια καταλόγου όταν οι περισσότεροι χρήστες γνωρίζουν τι θέλουν και προτιμούν απλά να το πληκτρολογούν Ένα συνδυαστικό πλαίσιο καταλόγου είναι επίσης χρήσιμο όταν ο κατάλογος είναι μεγάλος και οι χρήστες έχουν τη δυνατότητα να μεταβαίνουν σε αντικείμενα του καταλόγου πληκτρολογώντας ένα ή περισσότερα γράμματα Μην επιτρέπετε στους χρήστες να προσθέτουν αντικείμενα σε ένα κατάλογο χρησιμοποιώντας ένα συνδυαστικό πλαίσιο καταλόγου Διαφάνεια 52

54 Τα πλαίσια καταλόγου πολλαπλής επιλογής είναι μια εναλλακτική λύση για τις μακροσκελείς λίστες πλαισίων επιλογής Ωστόσο, τα πλαίσια καταλόγου πολλαπλής επιλογής μπορεί να είναι δύσκολα στη χρήση Χρησιμοποιείτε ένα πλαίσιο καταλόγου πολλαπλής επιλογής αντί για πλαίσια επιλογής Εξετάστε τη χρήση πλαισίων καταλόγου πολλαπλής επιλογής αντί για πλαίσια επιλογής αν έχετε περισσότερες από δέκα επιλογές ή είναι πιθανό να αλλάξει ο κατάλογός σας Διαφάνεια 54

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

56 Εξετάστε το ενδεχόμενο χρήσης ενός πλαισίου σύνοψης επιλογών Αν χρησιμοποιείτε ένα πλαίσιο καταλόγου πολλαπλής επιλογής με μπάρα ολίσθησης, σκεφτείτε να χρησιμοποιήσετε ένα επιπλέον πλαίσιο με τη σύνοψη των επιλεγμένων αντικειμένων Έτσι, ο χρήστης δε χρειάζεται να μετακινείται διαρκώς πάνω και κάτω στη λίστα για να δει τι έχει επιλέξει Διαφάνεια 56

57 Εξετάστε τη χρήση κουμπιών «Επιλογής όλων» και «Απενεργοποίησης όλων» Αν έχετε ένα σύνολο επιλογών και προβλέπετε ότι οι χρήστες θα επιθυμούν να τα επιλέγουν όλα ή κανένα, εξετάστε το ενδεχόμενο να χρησιμοποιήσετε ένα πλαίσιο καταλόγου πολλαπλής επιλογής με κουμπιά «Επιλογή όλων» και «Απενεργοποίηση όλων» αντί για πλαίσια επιλογής Διαφάνεια 57

58 Κουμπιά εντολών (Command buttons) Κουμπιά επιλογής (Options buttons) Πλαίσια επιλογής (Check boxes) Πλαίσια κειμένου (Text boxes) Πλαίσια καταλόγου (List boxes) Πλαίσια καταλόγου πολλαπλής επιλογής (Multiple selection list boxes) Πίνακες (Tables) Περιστροφικά πλαίσια (Spin boxes) Μπάρες ολίσθησης (Sliders) Δενδρικές αναπαραστάσεις (Tree views) Διαφάνεια 58

59 Οι πίνακες επιτρέπουν στους χρήστες να εισάγουν ή να βλέπουν περισσότερη πληροφορία ταυτόχρονα Χρησιμοποιείτε πίνακες για συγκρίσεις μεταξύ δεδομένων Παρουσιάστε ένα πίνακα αν οι χρήστες χρειάζεται να συγκρίνουν δύο ή τρία στοιχεία και δεν μπορείτε να προβλέψετε εκ των προτέρων ποια χρειάζονται Διαφάνεια 59

60 Ονομάζετε τις στήλες Επιλέγετε ονόματα για τις στήλες, έτσι ώστε να αντικατοπτρίζουν με ακρίβεια τα δεδομένα Όταν είναι απαραίτητο, ονομάζετε τις γραμμές Αν οι γραμμές περιέχουν διαφορετικά δεδομένα, ονομάζετε κάθε γραμμή Στοιχίζετε αριστερά τις ετικέτες ονομάτων Στοιχίζετε αριστερά τις ετικέτες ονομάτων στήλης και γραμμής Μη χρησιμοποιείτε άνω-κάτω τελεία μετά από το όνομα Διαφάνεια 60

62 Τα πλαίσια αυτά παρέχουν στους χρήστες έναν εναλλακτικό τρόπο εισαγωγής δεδομένων Χρησιμοποιείτε τα για περιορισμένα, προβλέψιμα κυκλικά δεδομένα Χρησιμοποιείτε περιστροφικά πλαίσια για να πραγματοποιείτε κυκλική μετάβαση στις πιθανές επιλογές, όταν οι επιλογές είναι λιγότερες από δέκα, και η σειρά τους είναι προβλέψιμη (όπως για παράδειγμα οι ημέρες της εβδομάδας). Συνδυάζετε τα πλαίσια αυτά σε συνδυασμό με πλαίσια κειμένου έτσι ώστε οι χρήστες να μπορούν να πληκτρολογούν την τιμή που επιθυμούν επιπρόσθετα με τη δυνατότητα να μεταβαίνουν κυκλικά σε όλες τις επιλογές Διαφάνεια 62

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

65 Χρησιμοποιείτε μπάρες ολίσθησης για μεγάλο εύρος τιμών Μη χρησιμοποιείτε μπάρες ολίσθησης για λιγότερες από δέκα επιλογές δεδομένων Για μικρό εύρος τιμών, επιλέξτε κάποιο άλλο χειριστήριο, για παράδειγμα ένα περιστροφικό πλαίσιο ή ένα πλαίσιο κειμένου για είσοδο δεδομένων Εμφανίζετε τα αποτελέσματα Εμφανίζετε την πραγματική τιμή των δεδομένων που αναπαριστά η θέση της μπάρας Επιτρέπετε εισαγωγή δεδομένων Αν οι χρήστες γνωρίζουν την ακριβή τιμή, παρέχετε τους τη δυνατότητα να πληκτρολογήσουν την τιμή αντί να χρησιμοποιούν τη μπάρα ολίσθησης Επιτρέπετε τη χρήση βελών (arrows) για μικρές αυξήσεις Χρησιμοποιείτε βέλη σε κάθε πλευρά της μπάρας για μικρές τροποποιήσεις όταν οι χρήστες έχουν πλησιάσει την τιμή που επιθυμούν Διαφάνεια 65

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

68 Παράδειγμα δενδρικής αναπαράστασης Διαφάνεια 68

69 Χρησιμοποιείτε τις δενδρικές αναπαραστάσεις για πιο προχωρημένους χρήστες Πολλοί χρήστες δεν είναι εξοικειωμένοι με τις δενδρικές αναπαραστάσεις Η δενδρική αναπαράσταση μπορεί να είναι δύσχρηστη αν οι χρήστες δεν κατανοούν τις συσχετίσεις μεταξύ των αντικειμένων και μπορεί να μην κατανοήσουν τη λειτουργία της ανάπτυξης και σύμπτυξης Μη χρησιμοποιείτε δενδρικές αναπαραστάσεις για να αντικαταστήστε καταλόγους, αρχικές σελίδες (home basis), ή σημεία εκκίνησης (launch pads) Είναι χρήσιμες μόνο ως χειριστήριο αναζήτησης και επιλογής Διαφάνεια 69

70 Διαφάνεια 70