# Οπτικός σχεδιασμός

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

## Χρώμα

Το χρώμα είναι ένα εξαιρετικό εργαλείο για τη μεταφορά πληροφοριών σε μία διεπαφή χρήστη. Για παράδειγμα, μπορεί να χρησιμοποιηθεί για:

- ενίσχυση της εμφάνισης και της αίσθησης μίας επιφάνειας εργασίας βελτιώνοντας ένα θέμα

- τονισμό μίας δυναμικής ειδοποίησης σε μία εφαρμογή διαχείρισης συστήματος

- έμφαση ενός στοιχείου σε μία μεγάλη λίστα για να επισπεύδει τη σάρωση

- προσθήκη λεπτομερειών αισθητικής ευχαρίστησης σε ένα εικονίδιο

Όμως, το χρώμα θα πρέπει πάντα να θεωρείται ως μια χρήσιμη προσθήκη στον σχεδιασμό σας, όχι ως μια ανάγκη. Ποτέ να μην εξαρτάστε μόνο από τα χρώματα για την προβολή σημαντικών πληροφοριών και να θυμάστε ότι εάν τα χρώματα δεν μπορούν να κατανοηθούν σωστά (για παράδειγμα, ο χρήστης έχει ένα σύστημα 8 δυαδικών, ή έχει αχρωματοψία), η εφαρμογή σας πρέπει να είναι ακόμα αξιοποιήσιμη.

### Παλέτα

Η παλέτα 32 χρωμάτων έχει αναπτυχθεί για την επιφάνεια εργασίας GNOME. Η παλέτα μπορεί να φορτωθεί από http://developer.gnome.org/projects/gup/images/ximian-palette. Για να την χρησιμοποιήσετε στο GIMP, αποθηκεύστε τη στον φάκελο `~/.gimp_1.2/palettes` και επανεκκινήστε το GIMP. Μια μοναδική χρησιμοποιούμενη παλέτα με συνέχεια βοηθά να δώσει την ενιαία εμφάνιση και αίσθηση στην επιφάνεια εργασίας, ενώ ελαχιστοποιούνται οι οπτικές αποσπάσεις. Εάν χρειάζεστε ένα χρώμα που είναι πιο σκοτεινό ή πιο φωτεινό από τα χρώματα σε αυτήν τη βασική παλέτα (π.χ., για εξομάλυνση), επιλέξτε ένα χρώμα πολύ κοντά στην απόχρωση που χρειάζεστε, έπειτα κάντε το πιο σκοτεινό ή πιο φωτεινό όπως απαιτείται.

Η βασική παλέτα 32-χρωμάτων του GNOME

Η βασική παλέτα χρωμάτων 32 δυαδικών

Τιμές RGB και δεκαεξαδικές για τη βασική παλέτα

Χρώμα | Περιγραφή | RGB | Δεκαεξαδικό | Χρώμα | Περιγραφή | RGB | Δεκαεξαδικό
--- | --- | --- | --- | --- | --- | --- | ---
| Βασικό 3Δ έντονο | 234 232 227 | #EAE8E3 |  | Βασικό 3Δ μεσαίο | 186 181 171 | #BAB5AB
| Βασικό 3Δ σκούρο | 128 125 116 | #807D74 |  | 3Δ σκιά | 86 82 72 | #565248
| Έντονο πράσινο | 197 210 200 | #C5D2C8 |  | Μεσαίο πράσινο | 131 166 127 | #83A67F
| Σκούρο πράσινο | 93 117 85 | #5D7555 |  | Πράσινη σκιά | 68 86 50 | #445632
| Έντονο κόκκινο | 224 182 175 | #E0B6AF |  | Μεσαίο κόκκινο | 193 102 90 | #C1665A
| Σκούρο κόκκινο | 136 70 49 | #884631 |  | Κόκκινη σκιά | 102 56 34 | #663822
| Έντονο πορφυρό | 173 167 200 | #ADA7C8 |  | Μεσαίο πορφυρό | 136 127 163 | #887FA3
| Σκούρο πορφυρό | 98 91 129 | #625B81 |  | Πορφυρή σκιά | 73 64 102 | #494066
| Έντονο γαλάζιο | 157 184 210 | #9DB8D2 |  | Μεσαίο γαλάζιο | 117 144 174 | #7590AE
| Σκούρο γαλάζιο | 75 105 131 | #4B6983 |  | Γαλάζια σκιά | 49 78 108 | #314E6C
| Δέρμα προσώπου έντονο | 239 224 205 | #EFE0CD |  | Δέρμα προσώπου μεσαίο | 224 195 158 | #E0C39E
| Δέρμα προσώπου σκούρο | 179 145 105 | #B39169 |  | Δέρμα προσώπου με σκιά | 130 102 71 | #826647
| Έντονο κόκκινο | 223 66 30 | #DF421E |  | Έντονο σκούρο κόκκινο | 153 0 0 | #990000
| Έντονο κίτρινο | 238 214 128 | #EED680 |  | Έντονο σκούρο κίτρινο | 209 148 12 | #D1940C
| Έντονο πράσινο | 70 160 70 | #46A046 |  | Έντονο σκούρο πράσινο | 38 199 38 | #267726
| Άσπρο | 255 255 255 | #ffffff |  | Μαύρο | 0 0 0 | #000000

### Απόχρωση, φωτεινότητα, αντίθεση

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

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

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

Πώς φαίνεται η γη για έναν χρήστη με κανονική χρωματική όραση (αριστερά), δευτερανωπία (μέση) και τριτανωπία (δεξιά). (Εικόνες από http://www.vischeck.com).

Φωτογραφία της γης όπως ένας χρήστης με κανονική όραση θα την έβλεπε | Φωτογραφία της γης όπως ένας χρήστης με αχρωματοψία κόκκινου-πράσινου θα την έβλεπε | Φωτογραφία της γης όπως ένας χρήστης με αχρωματοψία γαλάζιου-κίτρινου θα την έβλεπε

Άλλοι χρήστες έχουν περισσότερα προβλήματα με τα επίπεδα αντίθεσης παρά με την απόχρωση στην οθόνη τους. Μερικοί χρήστες απαιτούν ένα υψηλό επίπεδο αντίθεσης μεταξύ χρωμάτων παρασκηνίου και προσκηνίου, όπως μαύρο σε λευκό, λευκό σε μαύρο, ή κάποιο άλλο συνδυασμό υψηλής αντίθεσης. Άλλοι μπορεί να δοκιμάσουν δυσφορία εκτός και χρησιμοποιούν ρυθμίσεις χαμηλής αντίθεσης, όπως γκρίζο κείμενο σε ένα πιο φωτεινό παρασκήνιο γκρίζου.

Μπορείτε να συναντήσετε αυτές τις ανάγκες βεβαιώνοντας ότι η εφαρμογή σας υποστηρίζει τα προσβάσιμα θέματα GNOME (που βρίσκονται στο άρθρωμα θεμάτων gnome σε cvs), που περικλείει θέματα υψηλής και χαμηλής αντίθεσης και θέματα μεγάλης γραμματοσειράς. Αυτό σημαίνει ότι πρέπει να εφοδιάσετε με προεπιλεγμένα και μεγάλα μεγέθη υψηλής, χαμηλής και κανονικής αντίθεσης για τα σύνολα των εικονιδίων με την εφαρμογή σας.

Κατευθυντήριες γραμμές

- Χρησιμοποιήστε την χρωματική παλέτα GNOME. Εάν χρειάζεστε μια πιο σκοτεινή ή πιο φωτεινή σκιά, αρχίστε από ένα από τα χρώματα από την παλέτα και σκοτεινιάστε ή ανοίξτε όσο χρειάζεται.

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

- Βεβαιωθείτε ότι η εφαρμογή σας δεν εξαρτάται από ένα συγκεκριμένο θέμα. Δοκιμάστε το με διαφορετικά θέματα, ειδικά με θέματα πρόσβασης υψηλής και χαμηλής αντίθεσης, που χρησιμοποιούν λιγότερα χρώματα, για να βεβαιωθείτε ότι η εφαρμογή σέβεται τις ρυθμίσεις. Για παράδειγμα, όλο το κείμενο πρέπει να εμφανίζεται στο χρώμα προσκηνίου πάνω στο συγκεκριμένο χρώμα παρασκηνίου για το επιλεγμένο θέμα.

- Επιλέξτε προσεκτικά τα χρώματα. Όταν χρειάζεται να αναγνωρίζονται διαφορετικά, επιλέξτε τα φωτεινά από πορτοκαλί, κίτρινο, πράσινο ή γαλαζοπράσινο και τα σκοτεινά από γαλάζιο, ιώδες, πορφυρό ή κόκκινο καθώς τα περισσότερα άτομα που επηρεάζονται από αχρωματοψία βλέπουν ήδη γαλάζιο, ιώδες, πορφυρό και κόκκινο πιο σκοτεινά από το κανονικό.

## Διάταξη παραθύρων

### Γενικά

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

Μια καθαρή διάταξη είναι βασική για δημιουργία ομαλής οπτικής ροής της πληροφορίας στον χρήστη. Αυτή η ενότητα περιγράφει την κατάλληλη τοποθέτηση συστατικού και διακένου στις εφαρμογές GNOME. Τα κύρια εξεταζόμενα συστατικά είναι ετικέτες, εικονίδια, ραδιοπλήκτρα και πλαίσια ελέγχου, πεδία κειμένου, κουμπιά εντολών και πτυσσόμενα μενού.

### Διάλογοι

Όταν ένας χρήστης σαρώνει έναν σύνθετο διάλογο προτιμήσεων που αποτελείται από πολλές ετικέτες και αντίστοιχα πλαίσια ελέγχου, πεδία κειμένου και πτυσσόμενα σύνθετα πλαίσια, είναι εύκολο να δείτε πώς μπορεί γρήγορα να εμποδιστεί από φτωχή διάταξη στον οπτικό σχεδιασμό. Για πληροφορίες διευθέτησης ειδοποιήσεων, δείτε

Βελτιωμένη διάταξη παραθύρων

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

Στο , ο διάλογος στα αριστερά παρουσιάζει ετικέτες που δεν είναι στοιχισμένες αριστερά. Δεν δίνεται ένα κατάλληλο στήριγμα στο μάτι του χρήστη για να σαρώσει τον διάλογο γρήγορα.

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

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

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

Προδιαγραφές διάταξης

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

Κατευθυντήριες γραμμές

- Αφήστε ένα περίγραμμα 12 εικονοστοιχείων μεταξύ της άκρης του παραθύρου και των πλησιέστερων ελέγχων.

- Αφήστε ένα οριζόντιο κενό 12 εικονοστοιχείων μεταξύ ενός ελέγχου και της ετικέτας του. (Το κενό μπορεί να είναι μεγαλύτερο για άλλους ελέγχους στην ίδια ομάδα, λόγω των διαφορών στα μήκη των ετικετών.)

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

- Δώστε πλήκτρα πρόσβασης σε όλους τους επεξεργάσιμους ελέγχους. Βεβαιωθείτε ότι η χρήση του πλήκτρου πρόσβασης εστιάζει στον συσχετισμένο του έλεγχο.

### Διάστιχο και στοίχιση

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

Κατευθυντήριες γραμμές

- Ως ένας βασικός πρόχειρος κανόνας, αφήστε χώρο μεταξύ των συστατικών της διεπαφής χρήστη σε βήματα των 6 εικονοστοιχείων, αυξάνοντας καθώς η σχέση μεταξύ σχετικών στοιχείων γίνεται πιο μακρινή. Για παράδειγμα, μεταξύ ετικετών εικονιδίου και συσχετισμένων γραφικών μέσα σε ένα εικονίδιο, 6 εικονοστοιχεία είναι αρκετά. Μεταξύ ετικετών και συσχετισμένων συστατικών, αφήστε 12 οριζόντια εικονοστοιχεία. Για κάθετο διάκενο μεταξύ ομάδων συστατικών, 18 εικονοστοιχεία είναι αρκετά. Μια γενική συμπλήρωση 12 εικονοστοιχείων συνιστάται μεταξύ των περιεχομένων ενός παραθύρου διαλόγου και των περιγραμμάτων παραθύρου.

- Διαιρέστε μεγάλες λίστες επιλογών σε μικρότερες ομάδες. Για λίστες μικρότερες από περίπου οκτώ στοιχεία, χρησιμοποιήστε ραδιοπλήκτρα ή πλαίσια ελέγχου. Για μεγαλύτερες λίστες, χρησιμοποιήστε έναν έλεγχο λίστας ή πτυσσόμενη λίστα.

- Δοκιμάστε να κρατήσετε τα στοιχεία του ίδιου τύπου αριστερά στοιχισμένα μεταξύ τους. Για παράδειγμα, στους , οι τίτλοι ομάδας (γενικά και ενέργειες) είναι αριστερά στοιχισμένοι και μεταξύ τους.

- Βάλτε εσοχή 12 εικονοστοιχείων στα μέλη ομάδας εσοχής για να δείξουν ιεραρχία και σχέση.

- Ελαχιστοποιήστε τον αριθμό των σημείων στοίχισης στο παράθυρό σας. Ένα σημείο ευθυγράμμισης είναι μια φανταστική κάθετη ή οριζόντια γραμμή μέσα από το παράθυρό σας που ακουμπά την άκρη μιας ή περισσότερων ετικετών ή ελέγχων στο παράθυρο.

- Η δεξιά στοίχιση μέσα στις ομάδες του γενικού παραθύρου (όπως δείχνει η γραμμή με ετικέτα "στοίχιση" στο είναι ευχάριστη στο μάτι, αλλά όχι βασική.

- Τακτοποιήστε τα συστατικά από αριστερά προς τα δεξιά, από πάνω προς τα κάτω. Γενικά, το πρώτο στοιχείο που ο χρήστης πρέπει να αντιμετωπίσει είναι στα επάνω αριστερά και το τελευταίο στα κάτω δεξιά. Να θυμόσαστε ότι όταν τοπικοποιείτε για μη δυτικά τοπικά, οι διεπαφές μπορεί να αντιστραφούν έτσι ώστε να διαβάζονται από δεξιά προς τα αριστερά.

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

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

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

- Βεβαιωθείτε ότι φωτεινές και σκοτεινές περιοχές καθώς και διάκενο είναι εξίσου κατανεμημένα γύρω από το παράθυρο. Να θυμόσαστε ότι κάθε έλεγχος ή ομάδα ελέγχων στο παράθυρο σας έχει ένα οπτικό "βάρος", ανάλογα με το συνολικό του μέγεθος, χρώμα και πόσο κενό χώρο περιλαμβάνει. Πιο σκοτεινές, μεγαλύτερες περιοχές είναι "πιο βαριές", ενώ πιο χλομές, μικρότερες περιοχές είναι "ελαφριές".

- Μην σχεδιάζετε παράθυρα που είναι μεγαλύτερα από 50% στο μήκος σε μια διάσταση από ότι στην άλλη. Τα άτομα είναι πιο άνετα κοιτώντας σε παράθυρα και διαλόγους των οποίων οι διαστάσεις παραμένουν μέσα στον χρυσό κανόνα (περίπου 1,6 έως 1), ένας λόγος που καλλιτέχνες και αρχιτέκτονες χρησιμοποιούν για να δημιουργήσουν αισθητικά ευχάριστους πίνακες και κατασκευές για χιλιάδες χρόνια.

## Ετικέτες κειμένου

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

### Διάστιχο και στοίχιση

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

Στοίχιση και διάστιχο για διαφορετικά στοιχεία κειμένου

Στοιχείο | Τοποθέτηση | Παράδειγμα
--- | --- | ---
Μεγάλα εικονίδια (περιηγητής ιστού) | Κεντραρισμένο οριζόντια και κάτω από το μεγάλο εικονίδιο (6 εικονοστοιχεία, αν είναι απαραίτητη η προδιαγραφή) | Μεγάλο εικονίδιο με ετικέτα κειμένου κεντραρισμένη από κάτω
Μικρά εικονίδια (εργαλειοθήκη) | Κεντραρισμένο κάθετα και στα δεξιά των μικρών εικονιδίων (6 εικονοστοιχεία, αν είναι απαραίτητη η προδιαγραφή) | Μικρό εικονίδιο με ετικέτα κειμένου στα δεξιά
Ετικέτα ελέγχου λίστας | 6 εικονοστοιχεία από πάνω και στοιχισμένο οριζόντια αριστερά με έλεγχο λίστας ή 12 εικονοστοιχεία στα αριστερά και στοιχισμένο πάνω οριζόντια με έλεγχο λίστας | Έλεγχος λίστας με ετικέτα κειμένου οριζόντια στοιχισμένη από πάνω
Ραδιοπλήκτρο και ετικέτες πλαισίου ελέγχου | 6 εικονοστοιχεία στα δεξιά και στοιχισμένο κάθετα στο κέντρο με ραδιοπλήκτρο | Ραδιοπλήκτρο με ετικέτα κειμένου στα δεξιά του
Ετικέτες πεδίου κειμένου | 6 εικονοστοιχεία στα αριστερά και στοιχισμένο κάθετα στο κέντρο με τον έλεγχο του πεδίου κειμένου | Πλαίσιο κειμένου με ετικέτα κειμένου στα αριστερά του
Ετικέτες κουμπιών | 12 εικονοστοιχεία συμπλήρωσης σε κάθε πλευρά κεντραρισμένου κειμένου (και οποιουδήποτε συνοδευτικού γραφικού). Εάν εμφανιστεί σε μια ομάδα κουμπιών, η μακρύτερη ετικέτα κουμπιού ορίζει το μέγεθος του κουμπιού, κεντράρετε όλες τις άλλες ετικέτες κουμπιού και τα συνοδευτικά γραφικά σε κουμπιά ίδιου μεγέθους | Κουμπιά με κεντραρισμένο κείμενο
Άλλες ετικέτες στοιχείων (π.χ. πλαίσια με βέλη, πεδία κειμένου | 12 εικονοστοιχεία μεταξύ της μακρύτερης ετικέτας κειμένου και του συσχετισμένου συστατικού της, όλες οι άλλες ετικέτες κειμένου στην ομαδοποίηση του συστατικού στοιχίζονται αριστερά με την μακρύτερη ετικέτα. Όλες οι κάθετα κεντραρισμένες ετικέτες στοιχίζονται με τα συσχετισμένα συστατικά | Πτυσσόμενη λίστα με ετικέτα στα αριστερά του

Κατευθυντήριες γραμμές

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

- Βεβαιωθείτε ότι μια ετικέτα με μνημονική συσχετίζεται με τον έλεγχο που ονομάζει.

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

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

- Να είστε συνεπής με τη χρήση ετικετών και σημασιολογίας. Για παράδειγμα, εάν χρησιμοποιείτε την ίδια ετικέτα σε διαφορετικά παράθυρα, θα βοηθήσει εάν σημαίνει το ίδιο πράγμα και στα δυο παράθυρα. Επίσης, μην χρησιμοποιείτε ετικέτες που γράφονται διαφορετικά αλλά ακούγονται το ίδιο, π.χ., "χήρα" και "χείρα", καθώς αυτό θα μπορούσε να μπερδέψει τους χρήστες που βασίζονται σε αναγνώστες οθόνης.

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

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

- Μην χρησιμοποιείτε περισσότερες από δύο ή τρεις διαφορετικές γραμματοσειρές και μεγέθη στην εφαρμογή σας και επιλέξτε οπτικά διακριτές παρά παρόμοιες γραμματοσειρές σε ένα παράθυρο. Υπερβολικά μεγέθη και τεχνοτροπίες γραμματοσειρών θα κάνουν τη διεπαφή να φαίνεται άτακτη και αντιεπαγγελματική και θα είναι πιο δύσκολο να διαβαστεί. Γενικά, χρησιμοποιείτε πάντα γραμματοσειρές από το τρέχον θέμα και ορίστε σχετικά αντί για απόλυτα μεγέθη.

- Μην χρησιμοποιείτε γραφικά παρασκήνια ή "υδατογραφήματα" πίσω από το κείμενο, άλλα από αυτά που ορίστηκαν από το επιλεγμένο θέμα του χρήστη. Αυτά ανακατεύονται με την αντίθεση μεταξύ του κειμένου και του παρασκηνίου του. Αυτό μπορεί να δυσκολέψει χρήστες με οπτικές εξασθενίσεις, που θα επιλέγουν κανονικά θέματα που χρησιμοποιούν πάντα απλά παρασκήνια.

### Κεφαλαιοποίηση

Δύο τεχνοτροπίες κεφαλαιοποίησης χρησιμοποιούνται στα στοιχεία διεπαφής χρήστη στο GNOME:

Κεφαλαιοποίηση επικεφαλίδας

  Κεφαλαιοποιήστε όλες τις λέξεις στο στοιχείο, με τις ακόλουθες εξαιρέσεις:

  - Άρθρα: ένας, ενός, έναν, ένα, μία, μιας, ο, η, το, του, της, τον, την.

  - Σύνδεσμοι: και, αλλά, για, όχι, έτσι, ακόμα ...

  - Προθέσεις τριών ή λιγότερων γραμμάτων: στο, για, από, σε, προς ...

Κεφαλαιοποίηση πρότασης

  Κεφαλαίο στο πρώτο γράμμα της πρώτης λέξης και σε κάθε άλλη λέξη που κανονικά είναι με κεφαλαίο στις προτάσεις, όπως ονόματα εφαρμογών.

Ο ακόλουθος πίνακας υποδεικνύει τον τύπο κεφαλαιοποίησης που θα χρησιμοποιείται για κάθε τύπο στοιχείου διεπαφής χρήστη.

Οδηγίες τύπων κεφαλαιοποίησης για στοιχεία διεπαφής χρήστη

Στοιχείο | Τύπος
--- | ---
Ετικέτες πεδίων ελέγχου | Πρόταση
Ετικέτες για κουμπιά εντολών | Επικεφαλίδα
Ετικέτες για επικεφαλίδες στηλών | Επικεφαλίδα
Ετικέτες για αντικείμενα του παρασκηνίου της επιφάνειας εργασίας | Επικεφαλίδα
Μηνύματα διαλόγου | Πρόταση
Ετικέτες πεδίων εκπίπτοντος συνδυασμού | Πρόταση
Ετικέτες πτυσσόμενου πεδίου λίστας | Πρόταση
Ετικέτες πεδίων | Πρόταση
Ονόματα αρχείων | Πρόταση
Γραφικό ισοδύναμο κειμένου: για παράδειγμα, κείμενο Alt σε όλες τις ιστοσελίδες | Πρόταση
Ετικέτες πεδίων ή πλαισίων ομάδας | Επικεφαλίδα
Στοιχεία στα πτυσσόμενα σύνθετα πλαίσια, στα πτυσσόμενα πεδία λίστας και στα πεδία λίστας | Πρόταση
Ετικέτες πεδίων λίστας | Πρόταση
Στοιχεία μενού | Επικεφαλίδα
Στοιχεία μενού σε εφαρμογές | Επικεφαλίδα
Τίτλοι μενού σε εφαρμογές | Επικεφαλίδα
Ετικέτες ραδιοπλήκτρων | Πρόταση
Ετικέτες ολισθητή | Πρόταση
Ετικέτες πλαισίου με βέλη | Πρόταση
Τίτλοι για ενότητες καρτελών | Επικεφαλίδα
Ετικέτες πλαισίων κειμένου | Πρόταση
Ετικέτες γραμμών τίτλου | Επικεφαλίδα
Ετικέτες κουμπιών εργαλειοθήκης | Επικεφαλίδα
Συμβουλές οθόνης | Πρόταση
Τίτλοι ιστοσελίδων και στοιχεία περιήγησης | Επικεφαλίδα

Οδηγίες κεφαλαιοποίησης σε άλλες γλώσσες

Άλλες γλώσσες πέρα από τα αγγλικά μπορεί να έχουν διαφορετικούς κανόνες για την κεφαλαιοποίηση. Για παράδειγμα, τα σουηδικά δεν υπάρχει η έννοια κεφαλαιοποίηση κεφαλίδας. Επικοινωνήστε με το έργο μετάφρασης του GNOME εάν αμφιβάλετε για το πώς κεφαλοποιούνται οι ετικέτες σε μια συγκεκριμένη γλώσσα.

## Γραμματοσειρές

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

Μην αναμειγνύετε περισσότερα από δύο ή τρία μεγέθη γραμματοσειρών και τεχνοτροπιών (υπογραμμισμένα, έντονα, πλάγια) σε ένα παράθυρο, καθώς αυτό θα φαίνεται αντιεπαγγελματικό και αποσπά τον χρήστη από την μεταφερόμενη πληροφορία.

Δώστε εναλλακτικές λύσεις σε WYSIWYG, όπου είναι δυνατό. Μερικοί χρήστες μπορεί να χρειάζεται να τυπώσουν κείμενο σε μια μικρή γραμματοσειρά, αλλά να το επεξεργαστούν σε μια μεγαλύτερη γραμματοσειρά οθόνης, για παράδειγμα. Δυνατές λύσεις περιλαμβάνουν εμφάνιση όλου του κειμένου στην ίδια γραμματοσειρά και μέγεθος (αμφότερα επιλεγμένα από τον χρήστη)· μια επιλογή "αναδίπλωσης στο παράθυρο" που επιτρέπει την ανάγνωση όλου του κειμένου σε ένα παράθυρο χωρίς οριζόντια κύλιση· προβολή μονής στήλης που εμφανίζει τα περιεχόμενα του παραθύρου σε μια μονή στήλη ακόμα κι αν θα τυπωθούν σε πολλές στήλες· και μια προβολή μόνο κειμένου, όπου τα γραφικά εμφανίζονται ως δεσμευτικά θέσεων ή περιγραφές κειμένου.