«Οπτική Σχεδίαση Στο Διαδίκτυο»

ΤΕΧΝΟΛΟΓΙΚΟ ΕΚΠΑΙΔΕΥΤΙΚΟ ΙΔΡΥΜΑ ΜΕΣΟΛΟΓΓΙΟΥ ΣΧΟΛΗ ΔΙΟΙΚΗΣΗΣ ΚΑΙ ΟΙΚΟΝΟΜΙΑΣ ΤΜΗΜΑ ΕΦΑΡΜΟΓΩΝ ΠΛΗΡΟΦΟΡΙΚΗΣ ΣΤΗ ΔΙΟΙΚΗΣΗ ΚΑΙ ΟΙΚΟΝΟΜΙΑ ΠΤΥΧΙΑΚΗ ΕΡΓΑΣΙΑ «Οπτική Σχεδίαση Στο Διαδίκτυο» Καραφωτιά Νικολίτσα Α.Μ.: 11050 Βέτσου Ευανθία Α.Μ.: 11232 Επιβλέπων καθηγητής Συρμακέσης Σπύρος ΙΟΥΝΙΟΣ

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

Δομή εργασίας Θέμα της πτυχιακής εργασίας είναι η Οπτική Σχεδίαση στο Διαδίκτυο. Η εργασία ακολουθεί την εξής δόμηση Το κεφάλαιο 1 παρέχει μία εισαγωγή στα στάδια σχεδιασμού. Το κεφάλαιο 2 αναλύει το χρώμα και την προσβασιμότητα σε διαφορετικούς υπολογιστές. Το κεφάλαιο 3 ασχολείται με την κατανόηση των στόχων των πελατών. Το κεφάλαιο 4 αναφέρεται στην προετοιμασία και οργάνωση των περιεχομένων. Το κεφάλαιο 5 αναλύει τις τεχνικές θεωρίες και τα είδη συνδέσεων. Το κεφάλαιο 6 κάνει μία αναφορά στις αρχές οπτικής οργάνωσης. Το κεφάλαιο 7 ασχολείται με το χρώμα και τον λειτουργικό χώρο. Το κεφάλαιο 8 αναλύει την ενότητα χρώμα και ελκυστικό σχέδιο. Το κεφάλαιο 9 αναφέρει την χρησιμότητα της προσωπικότητας σε κάθε ιστοσελίδα. Το κεφάλαιο 10 κάνει μία σύντομη αναφορά στα στοιχεία του web. 2

Πίνακας περιεχομένων ΠΕΡΙΛΗΨΗ... 7 ΤΑ ΣΤΑΔΙΑ ΣΧΕΔΙΑΣΜΟΥ... 9 1.1 ΕΙΣΑΓΩΓΗ...9 1.2 ΑΠΟΦΑΣΙΖΟΝΤΑΣ ΓΙΑ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ...9 1.3 ΓΝΩΡΙΖΟΝΤΑΣ ΤΙ ΝΑ ΠΕΙΤΕ...11 1.4 ΠΕΙΤΕ ΤΟ ΣΤΗΝ ΓΛΩΣΣΑ ΤΟΥ WEB...11 ΧΡΩΜΑ ΚΑΙ ΠΡΟΣΒΑΣΙΜΟΤΗΤΑ... 13 2.1 ΕΙΣΑΓΩΓΗ...13 2.2 ΧΡΩΜΑ ΚΑΙ ΤΕΧΝΟΛΟΓΙΑ...14 2.3 GAMMA...15 2.4 ΧΡΩΜΑΤΙΚΗ ΑΚΡΙΒΕΙΑ ΓΙΑ ΤΟ ΗΛΕΚΤΡΟΝΙΚΟ ΕΜΠΟΡΙΟ...17 2.5 ΠΡΟΣΙΤΑ ΧΡΩΜΑΤΑ ΔΙΑΔΙΚΤΥΟΥ...19 2.6 ΤΟ ΜΕΛΛΟΝ ΤΟΥ ΧΡΩΜΑΤΟΣ ΣΤΟΝ ΙΣΤΟ...28 2.7 ΧΡΩΜΑΤΙΚΗ ΠΡΟΣΒΑΣΙΜΟΤΗΤΑ ΚΑΙ ΟΡΑΣΗ...29 ΜΑΘΑΙΝΟΝΤΑΣ ΓΙΑ ΤΟΝ ΠΕΛΑΤΗ ΣΑΣ... 33 3.1 ΕΙΣΑΓΩΓΗ...33 3.2 ΚΑΤΑΛΑΒΑΙΝΟΝΤΑΣ ΤΟΥΣ ΣΤΟΧΟΥΣ ΤΟΥ ΠΕΛΑΤΗ ΣΑΣ...33 3.3 ΠΩΣ ΕΠΙΚΟΙΝΩΝΟΥΝ...36 3.4 ΠΡΟΣΔΙΟΡΙΖΟΝΤΑΣ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ...37 3.5 ΔΕΙΓΜΑ ΣΕΝΑΡΙΟΥ...38 3.6 ΣΧΕΔΙΑΖΟΝΤΑΣ ΓΙΑ ΠΟΙΚΙΛΙΑ...39 3.7 ΠΟΤΕ ΝΑ ΜΗΝ ΧΡΗΣΙΜΟΠΟΙΗΣΕΤΕ ΤΟ WEB...40 ΠΡΟΕΤΟΙΜΑΖΟΝΤΑΣ ΤΑ ΠΕΡΙΕΧΟΜΕΝΑ... 41 4.1 ΕΙΣΑΓΩΓΗ...41 4.2 ΟΡΓΑΝΩΝΟΝΤΑΣ ΤΟ SITE...41 4.3 ΤΑΚΤΟΠΟΙΗΣΤΕ ΤΙΣ ΠΛΗΡΟΦΟΡΙΕΣ ΣΑΣ...42 4.4 ΟΙ ΕΤΙΚΕΤΕΣ...45 4.5 ΟΡΓΑΝΩΝΟΝΤΑΣ ΜΕ ΔΙΑΙΡΕΣΗ...46 3

4.6 ΧΡΗΣΙΜΟΠΟΙΕΙΣΤΕ ΚΑΠΟΙΑ ΤΕΣΤ...48 4.7 ΠΛΟΗΓΩΝΤΑΣ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΣΑΣ...49 4.8 ΠΑΡΟΥΣΙΑΖΟΝΤΑΣ ΤΑ ΕΠΙΠΕΔΑ...51 4.9 ΘΕΤΟΝΤΑΣ ΤΗΝ ΠΛΟΗΓΗΣΗ ΣΑΣ ΣΕ ΠΛΑΙΣΙΟ...52 4.10 ΚΕΝΑ ΑΠΟΤΑΜΙΕΥΣΗΣ...56 4.11 BREADCRUMBS...57 4.12 ΒΡΙΣΚΟΝΤΑΣ ΤΗΝ ΠΡΟΣΩΠΙΚΟΤΗΤΑΣ ΣΑΣ...59 4.13 ΝΑ ΘΥΜΑΣΤΕ ΤΟΥΣ ΠΕΡΙΟΡΙΣΜΟΥΣ ΣΑΣ...62 4.14 Η ΧΑΡΗ ΤΗΣ ΔΙΑΒΑΘΜΙΣΗΣ...63 4.15 ΤΑΚΤΟΠΟΙΗΣΗ ΣΕ ΛΙΣΤΕΣ...64 4.16 ΠΡΟΓΡΑΜΜΑΤΙΖΟΝΤΑΣ ΤΗΝ ΠΡΟΟΔΟ ΣΑΣ...65 ΠΩΣ ΕΠΙΚΟΙΝΩΝΕΙΤΕ: ΤΑ ΤΡΙΑ ΛΕΞΙΚΑ ΧΡΗΣΗΣ ΤΟΥ WEB... 67 5.1 ΕΙΣΑΓΩΓΗ...67 5.2 ΤΕΧΝΙΚΑ, ΕΙΝΑΙ ΕΝΑ ΛΕΞΙΚΟ: ΤΕΧΝΙΚΕΣ ΘΕΩΡΙΕΣ...67 5.3 ΑΠΟΚΡΙΘΕΙΤΕ ΑΜΕΣΑ...68 5.4 ΔΙΝΟΝΤΑΣ ΠΡΟΣΟΧΗ...69 5.5 ΣΥΜΒΟΥΛΕΣ ΕΞΥΠΗΡΕΤΗΣΗΣ ΤΩΝ ΕΠΙΣΚΕΠΤΩΝ ΣΑΣ...70 5.6 ΕΝΩΝΟΝΤΑΣ ΤΟ WEB...72 5.7 ΤΟ ΔΙΚΟ ΣΑΣ ΥΠΟΣΤΕΓΟ ΕΡΓΑΛΕΙΩΝ ΜΗΧΑΝΗΣ ΑΝΑΖΗΤΗΣΗΣ...73 5.8 Η ΔΙΑΛΥΣΗ ΕΙΝΑΙ ΕΥΚΟΛΗ...74 5.9 ΠΑΡΑΔΕΙΓΜΑ ΠΑΡΑΘΥΡΑ ΧΩΡΙΣ BROWSER...75 5.10 ΜΗ ΣΤΑΘΕΡΕΣ ΑΛΛΗΛΕΠΙΔΡΑΣΕΙΣ...79 5.11 ΕΙΔΗ ΣΥΝΔΕΣΕΩΝ...80 5.12 ΣΗΜΑΤΟΔΟΤΩΝΤΑΣ ΤΗΝ ΔΙΑΔΡΟΜΗ...83 5.13 ΟΙ ΥΠΕΡΕΜΦΑΝΙΣΕΙΣ...86 5.14 ΕΠΙΣΚΕΠΤΟΜΕΝΕΣ ΚΑΙ ΜΗ ΕΠΙΣΚΕΠΤΟΜΕΝΕΣ ΣΥΝΔΕΣΕΙΣ...87 5.15 ΕΝΕΡΓΑ ΚΑΙ ΣΤΑΣΙΜΑ LINKS...87 5.16 ΣΥΝΑΡΜΟΛΟΓΩΝΤΑΣ ΤΗΝ ΣΕΛΙΔΑ...89 5.17 ΠΑΝΩ ΑΠ ΤΙΣ ΠΤΥΧΕΣ...91 5.18 ΠΡΟΣΒΑΣΙΜΟΤΗΤΑ...92 4

ΑΡΧΕΣ ΟΠΤΙΚΗΣ ΟΡΓΑΝΩΣΗΣ... 94 6.1 ΕΙΣΑΓΩΓΗ...94 6.2 ΜΙΛΩΝΤΑΣ ΟΠΤΙΚΑ...94 6.3 ΟΜΑΔΟΠΟΙΩΝΤΑΣ ΤΙΣ ΠΛΗΡΟΦΟΡΙΕΣ...96 6.4 ΕΚΠΑΙΔΕΥΟΝΤΑΣ ΤΟ ΚΟΙΝΟ...98 6.5 ΜΙΚΡΑ ΠΟΛΛΑΠΛΑΣΙΑ...100 6.6 ΔΟΜΙΚΑ ΣΤΟΙΧΕΙΑ...102 6.7 ΧΤΙΖΟΝΤΑΣ ΜΙΑ ΙΕΡΑΡΧΙΑ...106 6.8 ΓΕΝΙΚΗ ΙΕΡΑΡΧΙΑ ΣΕΛΙΔΑΣ...111 6.9 ΔΥΟ ΜΟΝΟΠΑΤΙΑ ΣΤΗΝ ΙΔΙΑ ΙΣΤΟΣΕΛΙΔΑ...114 ΧΡΩΜΑ ΚΑΙ ΛΕΙΤΟΥΡΓΙΚΟΣ ΧΩΡΟΣ... 116 7.1 ΕΙΣΑΓΩΓΗ...116 7.2 ΠΕΡΙΗΓΗΣΗ...116 7.3 ΠΕΡΑΣΜΑ...119 7.4 ΧΡΩΜΑ ΚΑΙ ΚΑΤΕΥΘΥΝΣΗ...120 7.5 ΈΜΦΑΣΗ ΚΑΙ ΥΠΟΤΑΓΗ...121 7.6 ΧΡΩΜΑ ΚΑΙ ΠΡΟΣΟΧΗ...122 7.7 ΧΡΩΜΑ ΕΝΑΝΤΙΟΝ ΠΕΡΙΕΧΟΜΕΝΟΥ...123 7.8 ΧΑΡΑΚΤΗΡΙΣΤΙΚΑ ΔΡΑΣΗΣ ΤΟΥ ΧΡΩΜΑΤΟΣ...124 7.9 ΆΛΛΟΙ ΠΑΡΑΓΟΝΤΕΣ...125 7.10 ΠΑΡΑΔΕΙΓΜΑΤΑ ΤΗΣ ΔΡΑΣΗΣ ΤΟΥ ΧΡΩΜΑΤΟΣ...126 7.11 ΠΑΡΑΔΕΙΓΜΑΤΑ ΧΡΩΜΑΤΟΣ ΜΕΤΑΚΙΝΗΣΗΣ ΕΜΠΟΡΕΥΜΑΤΑ 127 7.12 ΑΓΟΡΑ...128 ΧΡΩΜΑ ΚΑΙ ΕΛΚΥΣΤΙΚΟ ΣΧΕΔΙΟ... 130 8.1 ΕΙΣΑΓΩΓΗ...130 8.2 ΧΡΩΜΑ ΚΑΙ ΟΠΤΙΚΑ ΑΠΟΤΕΛΕΣΜΑΤΑ...130 8.3 ΣΥΓΚΕΝΤΡΩΣΗ ΚΑΙ ΑΝΤΙΘΕΣΗ...131 8.4 AFTER-IMAGE (ΑΚΟΛΟΥΘΗ ΕΙΚΟΝΑ)...133 8.5 ΕΡΕΘΙΣΜΟΣ ΚΑΙ ΠΕΡΙΣΠΑΣΜΟΣ...135 8.6 ΟΠΤΙΚΗ ΆΝΕΣΗ...138 8.7 ΧΡΩΜΑ ΚΑΙ ΨΥΧΟΛΟΓΙΚΟΙ ΣΥΝΔΕΣΜΟΙ...141 5

8.8 ΟΔΗΓΙΕΣ ΓΙΑ ΤΗΝ ΕΠΙΛΟΓΗ ΣΥΜΒΟΛΙΚΩΝ ΧΡΩΜΑΤΩΝ...143 8.9 ΠΑΡΑΓΟΝΤΕΣ ΠΟΥ ΕΠΗΡΕΑΖΟΥΝ ΤΟ ΣΥΜΒΟΛΙΣΜΟ...147 8.10 ΧΡΩΜΑ ΚΑΙ ΑΡΜΟΝΙΚΟ ΣΧΕΔΙΟ...150 8.11 ΑΡΜΟΝΙΑ- ΑΝΤΙΘΕΣΗ ΧΡΩΜΑΤΙΚΩΝ ΣΧΕΔΙΩΝ...153 8.12 ΛΥΣΕΙΣ ΧΡΩΜΑΤΟΣ...163 ΔΗΜΙΟΥΡΓΕΙΣΤΕ ΠΡΟΣΩΠΙΚΟΤΗΤΑ... 165 9.1ΕΙΣΑΓΩΓΗ...165 9.2 ΤΙ ΕΙΝΑΙ Η ΠΡΟΣΩΠΙΚΟΤΗΤΑ...165 9.3 ΓΙΑΤΙ ΝΑ ΕΧΕΤΕ ΠΡΟΣΩΠΙΚΟΤΗΤΑ...168 9.4 Η ΔΥΝΑΜΗ ΤΗΣ ΠΡΟΣΩΠΙΚΟΤΗΤΑΣ...169 9.5 Η ΦΙΡΜΑ ONLINE...171 9.6 ΠΩΣ ΘΑ ΑΠΟΚΤΗΣΕΤΕ ΠΡΟΣΩΠΙΚΟΤΗΤΑ...174 9.7 ΧΡΗΣΙΜΟΠΟΙΩΝΤΑΣ ΧΡΩΜΑΤΑ...175 9.8 ΡΟΔΑ ΧΡΩΜΑΤΟΣ...178 9.9 ΘΕΡΜΟΚΡΑΣΙΕΣ ΧΡΩΜΑΤΩΝ...180 9.10 ΤΑΥΤΟΧΡΟΝΗ ΕΝΕΡΓΕΙΑ...182 9.11 ΚΑΝΟΝΕΣ ΧΡΩΜΑΤΩΝ...184 9.12 ΧΡΗΣΙΜΟΠΟΙΩΝΤΑΣ ΤΥΠΟΥΣ...188 9.13 ΧΡΗΣΙΜΟΠΟΙΩΝΤΑΣ ΑΛΛΗΛΕΠΙΔΡΑΣΕΙΣ...193 ΘΕΜΕΛΙΩΔΗ ΑΡΧΕΣ: ΤΑ ΣΤΟΙΧΕΙΑ ΤΟΥ WEB... 193 10.1 ΕΙΣΑΓΩΓΗ...193 10.2 ΔΟΥΛΕΥΟΝΤΑΣ ΤΑ ΣΤΟΙΧΕΙΑ...193 10.3 ΣΥΣΤΗΜΑΤΑ ΠΛΟΗΓΗΣΗΣ...195 ΒΙΒΛΙΟΓΡΑΦΙΑ... 199 6

Περίληψη Ένα επιτυχημένο κατάστημα έχει μια απλή φόρμουλα. Αρχικά, πρέπει να είναι προσιτό σε όλους. Πρέπει να είναι ελκυστικό και επισκέψιμο. Εσωτερικά, ο πελάτης πρέπει να μπορεί να κινηθεί άνετα μέσα στο κατάστημα και να βρίσκει αυτό που χρειάζεται. Πρέπει να μπορούν να εξετάζουν το εμπόρευμα και να λαμβάνουν πληροφορίες για αυτό. Τέλος, πρέπει να μπορούν να ολοκληρώνουν με επιτυχία μια αγορά. Για πρώτη φορά στην ιστορία, μια επίπεδη επιφάνεια προσποιείται ηλεκτρονικά ένα φυσικό κατάστημα τούβλων και ασβεστοκονιαμάτων (bricks and mortar). Παρά τους περιορισμούς αυτού του ψηφιακού μέσου σε εικόνες και κείμενο, εφαρμόζοντα οι ίδιες φόρμουλες για επιτυχία και όχι μόνο. Αντί για διπλωματούχους αρχιτέκτονες, σχεδιαστές εσωτερικού χώρου, λιανικούς διακοσμητές, συμβούλους φωτισμού και επαγγελματικό προσωπικό πώλησης, η ομάδα σχεδίασης Ιστού είναι υπεύθυνη για όλη την εργασία. Δημιουργούν μια διάταξη δυο διαστάσεων του μαγαζιού, τη γεμίζουν με εμπόρευμα, την εφοδιάζουν με μια ηλεκτρονική παράδοση πληροφοριών και εγκαθιστούν το απαραίτητο πρόγραμμα για περιήγηση και αγορά. Μια από τις μεγαλύτερες προκλήσεις του καταναλωτή διαδικτυακού εμπορίου αντισταθμίζει την αισθητήριο στέρηση. Τρεις από τις πέντε αισθήσεις είναι απούσες, οι άλλες δυο είναι περιορισμένες. Οι πελάτες πρέπει να στηρίζονται στις οπτικές πληροφορίες που παράγονται από εικόνες και κείμενα. Το πολύ γνωστό ρητό Μια εικόνα αξίζει όσο χίλιες λέξεις λαμβάνει νέα σημασία για το λόγω ότι μια ιστοσελίδα δεν είναι ένα άνετο μέσο για να διαβάζει κανείς μια μεγάλη ποσότητα κειμένων. Όταν τα γραφικά και το χρώμα χρησιμοποιούνται σωστά, μεταδίδουν την αξία του προϊόντος, δίνουν κίνητρο στον πελάτη να το αγοράσει και παρέχει μια θετική εμπειρία αγοράς. Εδώ βρίσκεται το κλειδί. Όπως ακριβώς ένα κατάστημα κατασκευάζεται από στερεό υλικό, το χρώμα είναι το βασικό κατασκευαστικό υλικό των δυσδιάστατων εικόνων καθώς και οι οπτικές εμπειρίες. Το χρώμα παίζει κεντρικό ρόλο στο βασικό σχέδιο μιας ιστοσελίδας και συγχρόνως παραδίδει δυναμικούς συνειρμούς και υποσυνείδητα μηνύματα. Σημαντικές στατιστικές αξίζει να αναφερθούν. Πρώτον, έρευνα αγοράς δείχνει πως πάνω από το 80% των οπτικών πληροφοριών σχετίζεται με το χρώμα. Με άλλα λόγια, ένα λειτουργικό χρώμα μεταβιβάζει πληροφορίες και/ή εφοδιάζει τον χρήστη με κάποια άλλα λειτουργικά οφέλη. Δεύτερον, ψυχολόγοι του μάρκετινγκ δηλώνουν πως μια διαρκής εντύπωση δημιουργείται μέσα σε 90 δευτερόλεπτα και πως το χρώμα μετράει κατά 60% στην αποδοχή ή την απόρριψη ενός αντικειμένου, ατόμου, τόπου η περίστασης. Γιατί οι χρωματικές εντυπώσεις είναι συγχρόνως γρήγορες και μακράς διάρκειας, η αποτελεσματική χρήση χρώματος είναι βασική για την επιτυχία του ηλεκτρονικού εμπορίου. Τα λάθος χρώματα μπορούν να είναι μεγάλο σφάλμα, αφού μπορούν να επηρεάσουν την αγορά κάθε αντικειμένου καθώς και την ιστοσελίδα ολόκληρη. Δυστυχώς, πολλοί άνθρωποι παρεξηγούν αυτές τις στατιστικές και πιστεύουν πως το σωστό χρώμα (ή χρώματα) θα δώσει αμέσως κίνητρο στον κόσμο να αγοράσει το προϊόν σε κάποιο φυσικό κατάστημα. Επίσης, πολλοί πιστεύουν πως το σωστό χρώμα είναι μια μαγική σφαίρα για την επιτυχία του ηλεκτρονικού εμπορίου. Η κατάσταση είναι πολύ πιο σύνθετη. Το χρώμα πρέπει να λειτουργεί επιτυχημένα σε πολλά επίπεδα συγχρόνως. Πρώτα, σε τεχνικό επίπεδο, τα χρώματα πρέπει να είναι τόσο ακριβή όσο η υπάρχουσα τεχνολογία 7

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

Κεφάλαιο Τα στάδια σχεδιασμού 1 1.1 Εισαγωγή Το Web είναι ένα μέσο επικοινωνίας και επομένως όποτε επικοινωνείτε πρέπει να ξέρετε τι λέτε, σε ποιον και πως. Απαντώντας σε αυτές τις ερωτήσεις θα σας δώσουν μία διαδρομή να ακολουθήσετε σε ολόκληρη την διαδικασία σχεδιασμού του web. Εάν πάρετε λάθος δρόμο, μπορείτε να ελέγξετε την διαδρομή σας και να ξαναβρείτε την πορεία σας. 1.2 Αποφασίζοντας για το περιεχόμενο Κάποια στιγμή στην ζωή μας, μας έχουν μάθει να σκεφτόμαστε πριν μιλήσουμε. Παρόλο που αύτη η συμβουλή φαίνεται σωστή και εύκολη στη εφαρμογή της, η αλήθεια είναι ότι σπάνια την ακολουθούμε. Η επικοινωνία είναι τόσο φυσικό κομμάτι της ημερήσιας ρουτίνας μας που όταν θέλουμε κάτι να πούμε, κάνουμε ακριβώς αυτό: το λέμε. Η ομιλία έρχεται τόσο εύκολα που δεν χρειάζεται να σκεφτούμε πολύ για αυτό που θέλουμε να πούμε. Αυτή τη στιγμή, το να δημιουργήσετε μία σελίδα web είναι εύκολη εργασία για όποιους έχουν λίγο ελεύθερο χρόνο και προθυμία για να μάθουν. Αυτό έχει σαν αποτέλεσμα να μαζεύονται πολλές σελίδες Web όπως και οι προτάσεις: γρήγορα και χωρίς καθόλου σκέψη. Όλοι μας κάποτε έχουμε σκεφτεί πριν μιλήσουμε και πάλι όμως δεν μεταφέραμε σωστά το μήνυμα μας. Ίσως το πρόβλημα να ήταν ότι σκεφτόμασταν μόνο τις λέξεις που χρησιμοποιήσαμε. Στην καθημερινή επικοινωνία, οι λέξεις παίζουν μικρό ρόλο. Επικοινωνούμε με πολλούς μη λεκτικούς τρόπους: Με τη γλώσσα του σώματος, η οποία μας βοηθάει να δώσουμε σημασία στις λέξεις. Με τον τονισμό, ο οποίος μπορεί να κάνει την διαφορά σε μία τηλεφωνική επικοινωνία. Σε δωμάτια με on line συνομιλίες τα smiles που επίσης λέγονται emoticons δηλαδή εικονίδια με συναισθήματα, τα οποία προσπαθούν να εκφράσουν τις προθέσεις μας. Οι λέξεις από μόνες τους συχνά δεν είναι αρκετές. Οπτικά, ακουστικά και χρονικά σήματα προωθούν την κατανόηση και ερμηνεία για ότι λέγεται και συχνά ενισχύουν τις λέξεις με το σωστό νόημα. Όσα περισσότερα ξέρουμε για το πώς να παρέχουμε και να λαμβάνουμε σήματα τόσο καλύτερα επικοινωνούμε. 9

Πως επικοινωνούμε: Διαμέσου: Γλώσσας Χειρονομιών Εκφράσεις προσώπου Τονισμός Διάστημα Χρόνος Πολιτισμός Εικόνες Πράξεις Σιωπή Αδράνεια κ.α. Το Web έχει την δικιά του σειρά σημάτων: εικόνα, κείμενο, οργάνωση, κίνηση και ήχος. Όπως και στην λεκτική επικοινωνία, οι λέξεις είναι ένα μικρό κομμάτι της επικοινωνίας στο web. Για να δημιουργήσετε αποτελεσματικές ιστοσελίδες που μιλάνε στο κοινό, πρέπει να λάβετε υπ όψιν σας τους μη λεκτικούς τρόπους. Στο web όταν σκεφτόμαστε πριν μιλήσουμε, σημαίνει πολλά περισσότερα από το απλώς να κατανοούμε την λεκτική επικοινωνία. Σημαίνει ότι πρέπει να σκεφτόμαστε για το πώς η εικόνα, το κείμενο, η οργάνωση, η αλληλεπίδραση, η κίνηση και ο ήχος μπορούν να συνεργαστούν για να δημιουργήσουν πετυχημένες παρουσιάσεις. Αυτή η διαδικασία μπορεί να θεωρηθεί σαν μάθηση της γλώσσας του web. Επειδή το web είναι σχετικά καινούριο και οι σχεδιαστές αλλά και το κοινό είναι νέοι σ αυτή τη γλώσσα. Από την άλλη είμαστε εξοικειωμένοι με την λεκτική γλώσσα που μιλάμε κάθε μέρα. Έτσι είναι συχνά δυνατό για μας να καταλάβουμε τι εννοεί κάποιος άσχετα από το τι αυτός ή αυτή λέει. Αλλά στο web όχι μόνο μιλάμε μία νέα γλώσσα αλλά πολλές (εικόνα, αλληλεπίδραση και άλλα), έτσι δεν υπάρχει αποδεκτός τρόπος που μπορούμε να ερμηνεύσουμε το προτιθέμενο νόημα. Σαν αποτέλεσμα η παρανόηση εμφανίζεται σε τακτική βάση. Το πρόβλημα συχνά αυξάνεται, επειδή πολλοί συγγραφείς στο web απλώς αρχίζουν να μιλάνε αντί να σκέφτονται αυτό που θέλουν να πουν και πώς να το πουν σ αυτή τη μοναδική γλώσσα. Σκεπτόμενοι στο web σημαίνει να σκεφτόμαστε την οργάνωση και την αλληλεπίδραση του δικτύου web και το πώς παρουσιάζεται στο κοινό. Επειδή το web είναι οπτικά πλούσιο, η παρουσίαση του δικτύου πρέπει να επικοινωνεί με πολλούς μη λεκτικούς τρόπους. Όχι μόνο η γλώσσα που χρησιμοποιείτε χρειάζεται να είναι καθαρή και προσιτή, το ίδιο πρέπει να είναι και η οπτική γλώσσα. Τελικά το web είναι μέσο επικοινωνίας. Για αυτό ο αποτελεσματικός σχεδιασμός μιας ιστοσελίδας είναι ανάλογη με την αποτελεσματική επικοινωνία και μπορούμε να σκεφτούμε τα θέματα χρηστικότητας του web σαν επικοινωνιακά θέματα. 10

1.3 Γνωρίζοντας τι να πείτε Ανεξάρτητα από το μέσο επικοινωνίας υπάρχει πάντα ένα μήνυμα. Αλλά αληθινή επικοινωνία δεν μπορεί να υπάρξει. Όταν δεν σκεφτόμαστε το μήνυμα που στέλνουμε, μπορεί συχνά να βγει με λάθος τρόπο ή να ερμηνευτεί με έναν τρόπο που ο συγγραφέας ποτέ δεν σκόπευε. Με άλλα λόγια, μπορεί να χαθεί η σημασία που θα ήθελε να δώσει ο συγγραφέας. Όταν ο συγγραφέας σκέφτεται, οι πιθανότητες ότι ο παραλήπτης θα καταλάβει αυτό που ήθελε να περάσει ο συγγραφέας είναι σαφώς πολύ μεγαλύτερες. Όμως ακόμη και αν σκεφτόμαστε, συχνά δεν είναι αρκετό για να επικοινωνούμε αποτελεσματικά. Μερικές φορές η ίδια πρόταση μπορεί να ερμηνευτεί με δύο εντελώς διαφορετικούς τρόπους από δύο διαφορετικά άτομα. Ο καλύτερος τρόπος να εξηγήσετε κάτι στον Carl δεν είναι απαραίτητα κατανοητός στον Chris. Ο Carl ίσως είναι μαθηματικός και σκέφτεται με λογικό τρόπο. Ο Chris από την άλλη ίσως είναι θεραπευτής και αναλύει την πρόταση συναισθηματικά και μπορεί να βρίσκει κάτι τελείως διαφορετικό από την υπόθεση του Carl. Πως λοιπόν μπορείτε να επικοινωνείτε με επιτυχία; πώς μπορείτε να βεβαιωθείτε ότι και ο Chris και ο Carl λαμβάνουν το ίδιο μήνυμα και ότι είναι αυτό που πραγματικά σκόπευε να περάσει ο συγγραφέας; Η απάντηση δεν είναι τόσο περίπλοκη όσο νομίζετε. Το να σκεφτείτε το κύριο μήνυμα που χρειάζεται να περάσετε και το πώς θα το διατυπώσετε καλύτερα κάνει την δουλεία πιο σωστή. Βασικά πρέπει να είσαστε σίγουροι ότι είστε ενήμεροι για το ποιος λέει τι και σε ποιον. Σε επόμενο κεφάλαιο αναλύουμε την επιτυχής πληροφορία. 1.4 Πείτε το στην γλώσσα του web Όταν ανοίξετε μια ιστοσελίδα για πρώτη φορά, το πρώτο πράγμα που ίσως αναρωτηθείτε είναι: τι κοιτάζω; και τι σημαίνει; Κάθε ιστοσελίδα έχει μήνυμα είτε είναι διεθνές είτε όχι. Το μήνυμα επικοινωνεί μέσα από εικόνες, κείμενο, χρώμα, ήχους, κίνηση και άλλα και συναρμολογείτε από την άλλη πλευρά από εσάς, τον χρήστη. Εάν ο δημιουργός της ιστοσελίδας δεν έδωσε αρκετή σημασία για το site και επομένως για το μήνυμα της, ο επισκέπτης ίσως μπερδευτεί και φύγει γρήγορα από την συγκεκριμένη ιστοσελίδα. Εάν ο Carl, ο μαθηματικός, είναι το κοινό που απευθύνεστε, οι αριθμοί είναι ο πιο σωστός τρόπος επικοινωνίας, όμως ο θεραπευτής Chris ίσως να μην ξέρει να ερμηνεύσει την αριθμητική παρουσίαση. Με σκοπό το web site να είναι χρηστικό, πρέπει να είναι κατανοητό. Επομένως, η ιστοσελίδα χρειάζεται να επικοινωνεί αποτελεσματικά. Το μήνυμα που θέλετε να περάσετε μέσω της ιστοσελίδας χρειάζεται να ταιριάζει με το ερμηνευμένο μήνυμα του χρήστη. Με άλλα λόγια ο χρήστης πρέπει να μπορεί να ερμηνεύσει εύκολα την σημασία από το πώς ο συγγραφέας της ιστοσελίδας επέλεξε και οργάνωσε τα στοιχεία του site (εικόνα, κείμενο, κ.α.). Γι αυτό ο Chris και ο Carl ίσως βρουν άλλα sites πιο χρηστικά και πιο κατάλληλα για τις ανάγκες τους. Αλλά όταν και οι δύο είναι το κοινό σας πρέπει να βεβαιωθείτε ότι κανείς τους δεν μπερδεύεται. 11

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

Χρώμα και Προσβασιμότητα Κεφάλαιο 2 2.1 Εισαγωγή Τα καταστήματα Τούβλα και ασβεστοκονιάματα ( Bricks and mortar ) είναι κατασκευασμένα από διπλωματούχους αρχιτέκτονες και μηχανικούς που πρέπει να ακολουθούν τους κανονισμούς της πόλης, της πολιτείας και του έθνους. Ο συμβιβασμός με αυτά τα δεδομένα δεν εγγυάται μόνο ασφάλεια για το κτίριο και τους κατόχους του αλλά επίσης βεβαιώνει πως το κατάστημα είναι προσιτό σε όλους. Η φυσική προσβασιμότητα μπορεί να αποφασιστεί με έναν υψηλό βαθμό σιγουριάς όταν ένα κατάστημα είναι κατασκευασμένο από στερεά οικοδομικά υλικά. Οι διαστάσεις, καθαρά καθορισμένες σε ίντσες ή εκατοστά, μπορούν να διαμορφωθούν έτσι ώστε να ικανοποιούν κάθε απαίτηση. Σε αντίθεση, ένα ηλεκτρονικό κατάστημα υπάρχει στον απροσδιόριστο κόσμο παραγόμενο από υπολογιστές και διαδικτυακούς επεξεργαστές. Συνεπώς, υποθέτει πολλές διαφορετικές φυσικές διαστάσεις λόγω αρκετών παραγόντων που αλληλεπιδρούν ταυτόχρονα- το τεχνικό σύστημα του χρήστη, το μέγεθος και τις ικανότητες του μόνιτορ, τον επεξεργαστή του ίντερνετ, τις ρυθμίσεις που προτιμά ο χρήστης και τον κωδικό προγραμματισμού των διαδικτυακών Ιστού. Σύγκριση της ίδιας σελίδας Ιστού σε δυο διαφορετικού μεγέθους μόνιτορ. Τα φυσικά καταστήματα επίσης επωφελούνται από ένα περιβάλλον σταθερού χρώματος που είναι προσιτό σε όλους όσους έχουν κανονική όραση. Ο κατάλληλος φωτισμός εξασφαλίζει τους βαμμένους τοίχους, την κάλυψη του πατώματος, τα διακοσμητικά εξαρτήματα, και το βασικό εμπόρευμα, όπου υπάρχουν μέσα σε έναν φυσικό κόσμο χρωματικής σταθερότητας. 13

Σε αντίθεση, η διαδικτυακή αγορά πρέπει να αντιμετωπίσει σοβαρές τεχνολογικές προκλήσεις σε αυτόν τον τομέα. Τα χρώματα όλων των γραφικών, των φόντων, και των κειμένων αναπαράγονται ξανά από τον υπολογιστή και το μόνιτορ του πελάτη και μπορεί να μην καταλήγουν με αληθινή πιστότητα στα αυθεντικά χρώματα. Ο Ιστός δεν είναι μόνος σε αυτό το δίλημμα- υπάρχει επίσης ένας ευρύς βαθμός απόκλισης του χρώματος από TV σε TV. Στην πραγματικότητα, ραδιοφωνικοί επαγγελματίες αστειεύονται πως τα αρχικά NTSC (εθνική επιτροπή συστημάτων τηλεόρασης) σημαίνουν ποτέ το ίδιο χρώμα. Όποιος έχει ποτέ κοιτάξει μια σειρά από τηλεοράσεις σε ένα κατάστημα έχει διαπιστώσει από πρώτο χέρι αυτές τις παραλλαγές. Συγκρίνετε τον τόνο (χρωματικό) του δέρματος στην παρακάτω εικόνα. Η τηλεόραση έχει ένα ευδιάκριτο προτέρημα. Το Gamma (γάμα) είναι διορθωμένο στο σταθμό πριν τη μετάδοση. Το φορτίο που απομένει ακόμα στον θεατή είναι να ρυθμίσει το χρώμα, την αντίθεση και άλλες μεταβλητές. 2.2 Χρώμα και Τεχνολογία Η κατανόηση της βασικής τεχνολογίας του χρώματος που παράγεται από τον υπολογιστή είναι μια απαίτηση για το σχέδιο χρώματος στο ηλεκτρονικό εμπόριο. Εξετάζοντας αυτά τα θέματα εξασφαλίζεται πως τα χρώματα που χρησιμοποιούνται μέσα στην ιστοσελίδα είναι όσο το δυνατόν πιο ακριβή. Για αρχή, συγκρίνετε αυτά τα παραδείγματα χρωματικών μεταβολών στην ίδια ιστοσελίδα. Οι ιστοσελίδες διανέμουν εικόνες σε πολλούς υπολογιστές διαφόρων τύπων. 14

Το σύστημα υπολογιστών του κάθε χρήστη αποτελείται από διαφορετικά συστατικά και διαφορετικές διαμορφώσεις αυτών των συστατικών: το λειτουργικό σύστημα του χρήστη, οι κάρτες γραφικών και βίντεο ή η απουσία αυτών, το βάθος bit χρώματος, η διόρθωση του gamma, οι ικανότητες του μόνιτορ και οι χρησιμότητες. Οι χρωματικές μεταβολές προκαλούνται από αυτή την ποικιλία των αλληλένδετων συστατικών που πρέπει να λειτουργούν μαζί ταυτόχρονα. Δυστυχώς, είναι αδύνατον να απομονώσουμε ένα μόνο συστατικό και/ή να ορίσουμε μια γενική φόρμουλα που θα παραδίδει ακριβές χρώμα σε όλους τους πελάτες. Επομένως, αυτός ο τομέας καλύπτει τα τεχνικά θέματα των χρωμάτων που παράγονται από τον υπολογιστή και παρέχει εργαλεία για να δώσει όσο το δυνατόν πιο ακριβή χρώματα στο ηλεκτρονικό εμπόριο. Αν και το ανθρώπινο μάτι μπορεί να δει μόνο 10 εκατομμύρια χρώματα, δεν έχουν όλοι οι υπολογιστές μεγάλη ποικιλία χρωμάτων. Περίπου το 15% όλων των υπολογιστών περιορίζονται σε 256 χρώματα (8-bit). Οι νεότεροι υπολογιστές είναι εξοπλισμένοι με 64 χιλιάδες χρώματα (16-bit) και τα υψηλότερης ποιότητας συστήματα με 16.7 εκατομμύρια χρώματα (24-bit). Συγκρίνετε τα αποτελέσματα του βάθους των bit στις παρακάτω εικόνες. 16-bit χρώμα και πλήρως διορθωμένο Gamma χρειάζονται για να δείτε αυτές τις εικόνες με μεγαλύτερη ακρίβεια. 2.3 Gamma Το Gamma είναι το κλειδί για την πλήρη κατανόηση της πρωταρχικής πηγής των χρωματικών μεταβολών στο διαδίκτυο. Δυστυχώς, αυτός είναι ένας από τους πιο δύσκολους όρους του υπολογιστή για να καθορίσει κανείς- ακόμα και οι έμπειροι μηχανικοί υπολογιστών δυσκολεύονται να τον κατανοήσουν. Τα παρακάτω παρέχουν κάποια βασικά: 1. Το Gamma είναι μια ποιοτική μέτρηση, όπως τα gigabytes, τα megahertz, τα bandwidth. Οι μετρήσεις του υπολογιστή σε gamma κυμαίνονται από 1.0 έως 3.0. Το gamma σε ένα Macintosh είναι 1.8 ενώ σε έναν ηλεκτρονικό υπολογιστή μπορεί να κυμαίνεται από 2.2 έως 3.0. 15

2. Το Gamma είναι επίσης μια μαθηματική φόρμουλα. Εκφράζει μια σχέση μεταξύ των εισαγόμενων (input) και των εξαγόμενων (output). Στον εξοπλισμό των υπολογιστών, το gamma περιγράφει μια βασική σχέση μεταξύ του ηλεκτρισμού και του τι παράγεται στην οθόνη του μόνιτορ. Η σχέση αυτή επηρεάζει τη φωτεινότητα και τη σκοτεινότητα των χρωμάτων καθώς και την αντίθεση στους μεσαίους τόνους της εικόνας. 3. Η πιο σημαντική πλευρά του gamma, όσο αφορά τις εικόνες που παράγονται από τον υπολογιστή, είναι αν το πραγματικό gamma διορθώνεται εντελώς. Για παράδειγμα, σε έναν ηλεκτρονικό υπολογιστή ένα gamma των 2.5 μπορεί να αντιπροσωπεύει ένα πλήρως διορθωμένο ή λανθασμένο gamma. Οι ηλεκτρονικοί υπολογιστές δεν έχουν στη μητρική τους κάρτα ενσωματωμένη την διόρθωση υλικού. Επομένως, το gamma πρέπει να διορθώνεται πλήρως από την προσθήκη μιας κάρτας βίντεο ή γραφικών για την καλύτερη επίδειξη των πραγματικών χρωμάτων και για ένα καλό εύρος ανοιχτών, μεσαίων και σκούρων τόνων. Το λειτουργικό σύστημα Macintosh συμπεριλαμβάνει μια ενσωματωμένη κάρτα γραφικών που διορθώνει αυτόματα το gamma. Επίσης, δεν είναι απαραίτητο μια περίπτωση μιας μέτρησης gamma, όπως της 1.8, να είναι καλύτερη ή χειρότερη από μια άλλη. Αυτό που έχει σημασία είναι αν το gamma είναι πλήρως διορθωμένο. Διαφορετικοί υπολογιστές κάνουν διαφορετικά πράγματα και πολλά συστήματα έχουν διαφορετικές διαμορφώσεις των κρίσιμων στοιχείων. Το μόνιτορ παίζει έναν ρόλο κλειδί αλλά είναι ακόμα ένα κομμάτι μιας μεγάλης εικόνας. Συγκρίνετε τις διαφορές στις παρακάτω εικόνες. 16-bit χρώμα και πλήρως διορθωμένο Gamma χρειάζονται για να δεις αυτές τις εικόνες με μεγαλύτερη ακρίβεια. Τα χρώματα μπορεί να ποικίλλουν ανεξάρτητα από το gamma και το βάθος των bit. Αυτές οι παραλλαγές μπορεί να είναι μη γραμμικής φύσης. Για παράδειγμα, τα κόκκινα μπορεί να έχουν περισσότερο μπλε και τα πράσινα περισσότερο κίτρινο στην ίδια εικόνα. Τα οικονομικά μόνιτορ και ηλεκτρονικοί υπολογιστές που στερούνται κάρτα βίντεο και γραφικών είναι συχνά οι ένοχοι. 16

Πιθανές μεταβολές 6 ίδιων χρωμάτων 2.4 Χρωματική Ακρίβεια για το ηλεκτρονικό εμπόριο Παρά τις προκλήσεις που θέτουν οι σημερινές τεχνολογίες, οι σχεδιαστές του Ιστού μπορούν να υιοθετήσουν πολλές τεχνικές που θα παραδώσουν τον υψηλότερο βαθμό ακρίβειας του χρώματος, με άλλα λόγια, τα πιο προσιτά χρώματα. Ο βαθμός της χρωματικής ακρίβειας που απαιτείται για μια ιστοσελίδα ηλεκτρονικού εμπορίου εξαρτάται από το περιεχόμενο. Για παράδειγμα, το φαγητό, ο ρουχισμός, τα καλλυντικά και η επίπλωση του σπιτιού απαιτούν τον υψηλότερο βαθμό πιστότητας. Τα λογισμικά, οι υπολογιστές, τα βιβλία, τα ταξίδια και πολλές άλλες επαγγελματικές υπηρεσίες μπορεί να εξαρτώνται λιγότερο από την ακρίβεια του χρώματος, ωστόσο θα ωφεληθούν από τη βελτιστοποίηση του χρώματος. Οι σχεδιαστές του Ιστού μπορούν να μεγαλώσουν τη δυνατότητα πρόσβασης των χρωμάτων και να σταθεροποιήσουν την υποδομή όλων των ιστοσελίδων, ανεξάρτητα από το περιεχόμενο, εφαρμόζοντας τεχνικές που δημιουργούν πιο σταθερά και ελκυστικά χρώματα, καθώς και αρχεία μικρότερου μεγέθους. Οι σχεδιαστές μπορούν επίσης να λάβουν μέτρα για να προετοιμαστούν για τον μελλοντικό κόσμο του ηλεκτρονικού εμπορίου όταν οι εικόνες και οι μηχανές αναζήτησης θα μπορούν να μεταβιβάζουν πληροφορίες ακριβούς χρώματος. Αυτός ο τομέας παρουσιάζει τα εργαλεία και τις τεχνικές για τον έλεγχο του χρώματος. Ο υψηλότερος βαθμός ακρίβειας του χρώματος στο ηλεκτρονικό εμπόριο αρχίζει σε ένα συγκρότημα υπολογιστών που παράγει τα πιο ακριβή χρώματα. Εάν ένα σύστημα σχεδιαστή Ιστού δεν ανταποκρίνεται στα υψηλότερα πρότυπα, όλα τα άλλα είναι μάταια. Στον φυσικό κόσμο του εμπορικού σχεδίου, οι αρχιτέκτονες και οι εσωτερικοί σχεδιαστές πρέπει να έχουν τέλεια όραση χρώματος για να διαλέξουν τα χρώματα και τα υλικά για το κατάστημα. Στο ηλεκτρονικό εμπόριο το ίδιο ισχύει και για το άτομο και για τον εξοπλισμό. Οι σχεδιαστές Ιστού πρέπει να δουλεύουν σε συστήματα υπολογιστών που έχουν επαρκή διόρθωση του gamma και υψηλής ποιότητας μόνιτορ. Αν αυτός ο εξοπλισμός είναι ελαττωματικός, τότε σχεδιάζουν με ένα βαθμό αχρωματοψίας. Τα καταστροφικά αποτελέσματα επηρεάζουν κάθε τομέα της ιστοσελίδας. Μια απλή δοκιμή θα εντοπίσει τον εξοπλισμό που χρησιμοποιείται για την εξέταση αυτής της δημοσίευσης. Η εικόνα παρακάτω περιέχει 7 ασφαλή χρώματα για τον Ιστό. Κάθε ένα από αυτά τα χρώματα είναι ένα ξεχωριστό σκούρο χρώμα. Αν κάποιο από αυτά τα 17

χρώματα εμφανιστεί το ίδιο μαύρο με την μαύρη οριζόντια λωρίδα στην βάση, τότε το σύστημα των υπολογιστών χρειάζεται πλήρη διόρθωση του gamma και/ή καλύτερη ποιότητα μόνιτορ. Μια άλλη δοκιμή θα επιβεβαιώσει αν ο υπολογιστής μπορεί να παράγει ένα καθαρό άσπρο pixel (εικονοκύτταρο). Τοποθετήστε ένα λευκό χαρτί κάθετα σε ένα κενό λευκό έγγραφο πάνω στην οθόνη του υπολογιστή, όπως φαίνεται στην εικόνα παρακάτω. Αν η οθόνη εμφανίσει ανοιχτό γκρι ή κάποιο άλλο χλωμό χρώμα εκτός από άσπρο, τότε το σύστημα δεν μπορεί να δημιουργήσει ένα καθαρό άσπρο pixel. Πριν κάνετε οποιαδήποτε τελική κρίση, σιγουρευτείτε πως οι επιτροπές ελέγχου (control panels) τίθενται στο μέγιστο δυνατό. (Το σύστημα ή η κάρτα του βίντεο μπορεί να είναι προκαθορισμένα σε μια σειρά χαμηλότερου χρώματος.) Ρυθμίστε τους ελέγχους φωτεινότητας και έντασης στο μόνιτορ. Αν δεν γίνει λευκό, αυτό είναι ένα σίγουρο σημάδι πως το gamma χρειάζεται πλήρη διόρθωση, ή πως το μόνιτορ είναι ανεπαρκές, ή και πως τα δυο είναι ελαττωματικά. Ο σχεδιαστής Ιστού πρέπει να έχει συστατικά μέγιστης ποιότητας και επίσης θα πρέπει να εργάζεται με τέλεια ομοφωνία για να παραδώσει τα ακριβέστερα χρώματα. Ένα ικανό μόνιτορ θα βελτιώσει τα χρώματα σε έναν Windows ηλεκτρονικό υπολογιστή. Η ποιότητα του χρώματος θα είναι καλύτερη και πιο φωτεινή. Εντούτοις, ένα ποιοτικό μόνιτορ δε θα αντισταθμίσει τις ανεπάρκειες του gamma σε ένα λειτουργικό σύστημα των Windows. Απαιτείται μια κάρτα γραφικών ή βίντεο η οποία δουλεύει διαδοχικά με το λειτουργικό σύστημα και το μόνιτορ. Οι σχεδιαστές του Macintosh πρέπει να ελέγξουν την ποιότητα των μόνιτόρ τους. Παρά την ενσωματωμένη διόρθωση του gamma που έχει το Macintosh, ένα παλιότερο μόνιτορ ή ένα μόνιτορ χαμηλότερης ποιότητας έχει επιπτώσεις στην ακρίβεια του χρώματος. Όλοι οι σχεδιαστές θα πρέπει να γνωρίζουν πως οι μη-εκθαμβωτικές οθόνες επηρεάζουν το πώς βλέπουμε τα χρώματα. 18

Μόλις ο σχεδιαστής έχει τον υψηλότερης ποιότητας εξοπλισμό, το Adobe Gamma μπορεί να χρησιμοποιηθεί για να βαθμολογήσει το μόνιτορ. Αυτό το εργαλείο δημιουργεί ένα προφίλ, το οποίο χρησιμοποιείται περεταίρω για να ταιριάξει τα ιδιαίτερα χαρακτηριστικά του μόνιτορ. Μόλις παραχθεί, το προφίλ αυτό μπορεί να χρησιμοποιηθεί σε κάθε εφαρμογή που είναι ICC υποχωρητική. Στο λειτουργικό σύστημα Macintosh, αυτό το στοιχείο θα παρασχεθεί αυτόματα στο Apple Color sync ως ρύθμιση προεπιλογής του μόνιτορ. 2.5 Προσιτά Χρώματα Διαδικτύου Εφόσον έχει τοποθετηθεί ο καλύτερος εξοπλισμός, η επόμενη εργασία είναι να δημιουργηθούν χρώματα Ιστού που να είναι τεχνολογικά προσιτά σε όλους. Το εύρος των μεταβολών που μπορεί να υπάρχουν μέσα στις χρωματικές ικανότητες του υπολογιστικού συγκροτήματος ενός χρήστη, καθορίζει το βαθμό της όρασης του χρώματος. Για παράδειγμα, οι πελάτες γραφικών σχεδίων τυπικά διαθέτουν περίπλοκους υπολογιστές εξοπλισμένους με 24-bit χρώμα και πλήρως διορθωμένο gamma. Σε άμεση αντίθεση είναι η μειονότητα των χρηστών υπολογιστών στα 8-bit συστήματα. Όταν το gamma, το βάθος των bit και όλες οι άλλες μεταβολές έχουν ληφθεί υπόψη, ένα σημαντικό ποσοστό από τους μέσους πελάτες έχουν υπολογιστικά συστήματα με ποικίλους βαθμούς περιορισμών χρώματος. Άσχετα από τις χρωματικές ικανότητες των υπολογιστών των πελατών, το επιτυχημένο ηλεκτρονικό εμπόριο απαιτεί σταθερά χρώματα, κατάλληλες μορφές αρχείου και αρχεία ελάχιστου μεγέθους. Οι σχεδιαστές Ιστού μπορούν να χρησιμοποιήσουν cross-platform (διαγώνιες πλατφόρμες), web-safe (Ιστό- ασφαλείς) παλέτες, υβριδικές παλέτες, καθολικές μορφές αρχείου, εναλλακτικές (alt) ετικέτες, και τεχνολογίες βασισμένες σε υπολογιστή για να παράγουν όσο το δυνατόν πιο ακριβή χρώματα, άσχετα με το τι είδους εξοπλισμό χρησιμοποιούν οι χρήστες. Επιπλέον, αυτά τα βήματα εξασφαλίζουν και το πιο γρήγορο κατέβασμα (download) των εικόνων, παρέχοντας με αυτό τον τρόπο τη βέλτιστη δυνατότητα πρόσβασης σε όλους τους πελάτες ανεξάρτητα από το εύρος ζώνης. Ακολουθούν λεπτομερείς περιγραφές και εικόνες αυτών των βημάτων. 1. Web-safe colors (Ιστό- ασφαλή χρώματα) Υπάρχουν μόνο 216 χρώματα που είναι κοινά σε όλους τους υπολογιστές και τις μηχανές αναζήτησης. Αυτά τα χρώματα αναφέρονται συχνά ως web-safe (Ιστό- ασφαλή) ή ασφαλούς-επεξεργαστή παλέτα ένα κοινό σύνολο χρωμάτων που φανερώνεται σε όλους τους υπολογιστές. Οι σχεδιαστές θα έπρεπε να χρησιμοποιούν αυτά τα χρώματα για όλες τις εικόνες επίπεδου-χρώματος (flat-color illustrations), όπως ένα λογότυπο (logo) που αποτελείται από σχήματα ή περιοχές ενός μόνο χρώματος, καθώς και όλες τις προδιαγραφές HTML για το φόντο, το κείμενο και τα χρώματα συνδέσμων (link). Τα Ιστό-ασφαλή χρώματα δεν εγγυώνται τα ίδια χρώματα σε όλες τις μηχανές αλλά εξασφαλίζουν πως η παλέτα ταιριάζει τα βασικά χρώματα που είναι ενσωματωμένα στους υπολογιστές όλων των Windows και των Macintosh. Η χρήση αυτής της παλέτας επίσης 19

λύνει το πρόβλημα για την μειοψηφία των 8-bit συστημάτων που μπορούν να επιδείξουν μόνο 256 χρώματα στην οθόνη. Σε αυτή την περίπτωση, αν ένα χρώμα υπάρχει εκτός της παλέτας, το χρώμα αυτό μπορεί να αλλάξει σε ένα άλλο προφανώς διαφορετικό χρώμα, ή ο υπολογιστής μπορεί να προσπαθήσει να μιμηθεί το χρώμα μπαλώνοντας μαζί τα μικροσκοπικά σημεία των χρωμάτων. Αυτό απεικονίζεται παρακάτω. Ένας σημαντικός διαχωρισμός πρέπει να γίνει: ένα μη ασφαλές χρώμα είναι αυτό που ο σχεδιαστής επιλέγει βασισμένος μόνο στην εμφάνιση. Σε μερικές περιπτώσεις, οι σχεδιαστές μπορεί να αναφέρονται σε μια CMYK φόρμουλα, ή ένα swatch χρώματος, ή να χρησιμοποιούν έναν συλλέκτη χρώματος για να βρουν ένα συγκεκριμένο χρώμα. Όταν το χρησιμοποιούν σαν κείμενο, σύνδεσμο ή χρώμα φόντου σε μια ιστοσελίδα, το χρώμα αυτό δεν είναι τόσο σταθερό όσο ένα Ιστό-ασφαλές χρώμα σε οποιοδήποτε σύστημα. Σε υπολογιστικά συστήματα των 8-bit, τα μη ασφαλή χρώματα μπορεί να επηρεάσουν αρνητικά την ακρίβεια των χρωμάτων και την ικανότητα ευανάγνωσης του κειμένου. Συγκρίνετε τις διαφορές στις παρακάτω εικόνες. Όταν το ίδιο μη ασφαλή μπλε χρησιμοποιείτε σαν background σε μία ιστοσελίδα, αυτό είναι το αποτέλεσμα: 20

Τα υπολογιστικά συστήματα των 8-bit μπορούν να δώσουν μη ασφαλή χρώματα τόσο στιγματισμένα ώστε το κείμενο να μην μπορεί να διαβαστεί. Γενικά, σπάνια μπορεί τα παραγόμενα μη ασφαλή χρώματα να είναι ασταθή και μπορεί να ποικίλλουν από υπολογιστή σε υπολογιστή. Γι αυτό, η αληθινή προσιτότητα απαιτεί να χρησιμοποιούνται Ιστό-ασφαλή χρώματα για κείμενα και προδιαγραφές χρώματος φόντου. Τα 216 χρώματα της ασφαλούς παλέτας για το web 2. Συνδυασμός Ιστό-ασφαλών χρωμάτων Είναι πιθανόν να φτιάξεις πάνω από 10 εκατομμύρια άλλους συνδυασμούς ανακατεύοντας δυο ή τρία Ιστό-ασφαλή χρώματα. Αυτά τα υβριδικά χρώματα μπορούν να παραχθούν με μαθηματικό τρόπο συνδυάζοντας και διαιρώντας τις RGB φόρμουλες ή με γρήγορη και εύκολη ενσωμάτωση εργαλείων, όπως είναι το Boxtop Software s ColorSafe ενσωματωμένο για το Photoshop. Τύποι αρχείων. Οι δύο πιο διαδεδομένοι τύποι αρχείων γραφικών στο web είναι ο GIF και ο JPEG και ο καθένας τους χειρίζεται το χρώμα με πολύ διαφορετικό τρόπο. Το μεν GIF (Graphics Interchange Format) είναι κατάλληλο για γραμμικά σχέδια και καθαρά 21

χρώματα, ενώ το JPEG (Joint Photographic Expert Group) για φωτογραφίες και γενικά εικόνες συνεχούς τόνου. Ανεξάρτητα από τα χαρακτηριστικά του υπολογιστή κάθε χρήστη, τα αρχεία τύπου GIF περιορίζονται εξ ορισμού στα 256 χρώματα (κωδικοποιούν κάθε χρώμα με 8 bit) και συμπιέζονται αυτόματα μόλις αποθηκευτούν. Το JPEG αντίθετα αναπαριστά με ρεαλιστικό τρόπο το χρώμα στα γραφικά και χρησιμοποιεί την πλήρη γκάμα των RGB χρωμάτων. Τα αρχεία αυτού του τύπου συχνά αναφέρονται σαν εικόνες 24-bit (κάθε pixel μπορεί να έχει σαν χρώμα οποιαδήποτε από τις 16.777.216 δυνατές τιμές). Το παρακάτω σχέδιο της σκακιέρας σε αυτούς τους συνδυασμούς είναι αξιοπρόσεχτο μόνο με μεγέθυνση. Σε αυτή την ελεγχόμενη κατάσταση, το ουδέτερο (dithering) είναι περιορισμένο σε δυο ή τρία Ιστό-ασφαλή χρώματα. Αυτό επιτυγχάνει τα επιθυμητά αποτελέσματα, δημιουργεί ένα σταθερό χρώμα και δεν έχει επιπτώσεις στην αναγνωσιμότητα του κειμένου. Από την άλλη μεριά, τυχαία παραγόμενα ουδέτερα χρώματα, όπως παρουσιάζονται στις προηγούμενες σελίδες, μπορεί να αποτελούνται από ντουζίνες χρωματιστών στιγμάτων και μπορεί να προκαλέσουν δυσμενή αποτελέσματα. Τα χρώματα στη γραμμή σχεδίων υπόκεινται στην ίδια αστάθεια και ουδέτερες επιδράσεις όταν χρησιμοποιούνται μη-ασφαλή χρώματα. Συγκρίνετε τα παρακάτω παραδείγματα. 1.αυθεντική γραφική εικόνα πριν μετατραπεί σε gif. 2.εικόνα που έχει μετατραπεί σε gif με μη-ασφαλή χρώματα (σύστημα RGB) 3.εικόνα που έχει μετατραπεί σε gif με Ιστό-ασφαλή χρώματα Στο δεύτερο παράδειγμα, τα χρώματα είναι πιο κοντά στα αυθεντικά αλλά οι ουδέτερες επιδράσεις είναι μη επιθυμητές και μπορεί να υπάρχουν σε όλες τις οπτικές συνθήκες (από 8 έως 24 bit). Στο τρίτο παράδειγμα, το χρώμα της κιθάρας είναι ελαφρώς μετατοπισμένο. Αυτά τα ζωηρά, καθαρά χρώματα σταθεροποιούνται για την εξέταση του ιστού. 22

Περιληπτικά, όλα τα στερεά χρώματα και οι γραμμή σχεδιάσεων πρέπει πρώτα να μετατραπούν σε παλέτα 216 Ιστό-ασφαλών χρωμάτων. Οι πιο τελευταίες γραφικές εφαρμογές ή συνδέσεις, ή συνδυασμός και των δυο, θα εκτελέσουν αυτή τη μετατροπή σε κλάσματα του δευτερολέπτου. Αφοσιωμένα εργαλεία μετατροπής σε gif, επιτρέπουν στον σχεδιαστή να κάνει ουδέτερες και μη-ουδέτερες επιλογές για τα καλύτερα αποτελέσματα στις γραφικές εικόνες, ειδικά για τη γραμμή τέχνης με ταξινομημένα χρώματα. Συγκρίνετε τις πιο απαλές επιδράσεις των ουδέτερων χρωμάτων με την επίπεδη επίδραση των μη-ουδέτερων χρωμάτων στους παρακάτω χάρτες. Μια άλλη αποδεκτή μορφή ουδετερότητας ισχύει στα ζωηρά-κινούμενα gifs. Εφόσον τα jpegs δεν μπορούν μέχρι τώρα να γίνουν ζωντανά-με κίνηση, τα ουδέτερα gifs προσεγγίζουν τα συνεχή αποτελέσματα τόνου στην εικόνα. Δυστυχώς, τα μεγέθη των αρχείων είναι μεγάλα και οι εικόνες υστερούν στην ποιότητα μιας αληθινής φωτογραφικής jpeg εικόνας. 3. Μορφές αρχείων για ακρίβεια χρωμάτων Μετατρέποντας τις εικόνες στη σωστή μορφή αρχείων, όχι μόνο παράγονται τα καλύτερα δυνατά χρώματα και εικόνες αλλά επίσης, μικραίνει το μέγεθος των αρχείων και μειώνεται ο χρόνος για το κατέβασμα. Οι δυο τύποι αρχείων που χρησιμοποιούνται πιο συχνά είναι οι GIFκαι JPEG όπως αναφέραμε και παραπάνω. Το GIF (γραφικό σχήμα ανταλλαγής) είναι το πιο κατάλληλο για τη γραμμή τέχνης και τα στερεά χρώματα. Η JPEG (κοινή φωτογραφική ομάδα εμπειρογνωμόνων ) μορφή είναι η πιο κατάλληλη για φωτογραφικές και άλλων συνεχών τόνων εικόνες στον Ιστό. 23

Ανεξάρτητα από το υπολογιστικό σύστημα του χρήστη, τα αρχεία gif περιορίζονται σε 256 χρώματα (8 bits) και συμπιέζονται αυτόματα όταν σώζονται. Μειώνοντας το βάθος bit σε 6 ή 4, θα μειωθεί και ο αριθμός των χρωμάτων καθώς και το μέγεθος. Σύγκρινε τα αρχεία μορφής gif και jpeg και τα μεγέθη των αρχείων στις παρακάτω εικόνες. GIF-4K Οι gif εικόνες περιέχουν 256 χρώματα. Το αποτέλεσμα είναι μια στερεή περιοχή χρώματος. Άλλα παρόμοια χρώματα μπορούν να χρησιμοποιηθούν για να επιδιορθώσουν αυτά τα χρώματα. Η μεγέθυνση της ελιάς δείχνει το περιορισμένο εύρος των χρωμάτων που παράγονται όταν μια εικόνα μετατρέπεται σε γραμμικά σχέδια. JPEG-15K Οι jpegs εικόνες μπορεί να αποτελούνται από περισσότερα από 16 εκατομμύρια χρώματα. Η μεγέθυνση της ελιάς δείχνει καθαρά το πλατύ εύρος των πράσινων χρωμάτων που παράγονται όταν η εικόνα μετατρέπεται σε μορφή jpeg. Η μορφή jpeg αρχείων μπορεί να δημιουργήσει τα ζωηρά, στερεά χρώματα που απαιτούνται από τα γραμμικά σχέδια. Το JPEG είναι ένα αληθινού χρώματος γραφικό που επωφελείται από την πλήρη κλίμακα των RGB χρωμάτων. Αναφέρεται ως μια εικόνα 24-bit- κάθε pixel της εικόνας μπορεί να είναι ένα από τα 16.777.216 πιθανά χρώματα (2 bits στην 24 η δύναμη). Επομένως, 24

είναι αληθινό με την έννοια πως μπορεί να περιέχει το πιο πλατύ εύρος χρωμάτων που είναι δυνατόν. Η διαδικασία συμπίεσης αναλύει την εικόνα για να δει πόσο συχνά κάθε χρώμα χρησιμοποιείται. Τα χρώματα τα οποία δεν χρησιμοποιούνται συχνά αλλάζουν στο επόμενο πιο κοντινό χρώμα που παρουσιάζεται πιο συχνά στην εικόνα. Αφοσιωμένα εργαλεία, όπως το Photoshop 5.0 και το Boxtop Software s ProJpeg plug-in, επιτρέπουν στο σχεδιαστή να επιλέξει την ποιότητα της συμπίεσης και το μικρότερο δυνατόν μέγεθος αρχείου. Συγκρίνετε αυτά τα παραδείγματα των φωτογραφιών σε μορφές αρχείων gif και jpeg. Η εικόνα jpeg περιέχει εκατομμύρια χρωμάτων. Προσέξτε πώς το GIF επιδιορθώνει μαζί έναν περιορισμένο αριθμό χρωμάτων από την γκάμα των 256 χρωμάτων που διαθέτει, για να μιμηθεί μια πλήρη επίδραση χρώματος. Οι GIF εικόνες υστερούν στη συνεχόμενη επίδραση του τόνου των jpegs. Οι μεγεθύνσεις των ελιών δείχνουν τις διαφορές. 4. Συμβατότητα χρωμάτων και μορφές αρχείων Η τοποθεσία μιας jpeg πάνω από ένα φόντο στερεού χρώματος σε μια ιστοσελίδα, μπορεί να έχει απρόσμενες επιδράσεις. Ακόμα και αν ο φόντος του jpeg φαίνεται να είναι το ίδιο χρώμα με το φόντο της ιστοσελίδας, το τελικό αποτέλεσμα μπορεί να είναι αρκετά διαφορετικό σε όλα τα υπολογιστικά συστήματα. Οι επιδράσεις των jpeg γραφικών πάνω σε μπλε φόντο μια ιστοσελίδας, απεικονίζονται παρακάτω. Το αυθεντικό γραφικό του αρχείου μορφής jpeg. 25

Το ίδιο γραφικό πάνω σε μπλε φόντο. Το φόντο της εικόνας που γράφει blue jpeg είναι ελαφρώς διαφορετικό μπλε από αυτό του μπλε φόντου. Η μορφή jpeg επιλέγει εκατομμύρια χρώματα για να φτιάξει ένα μόνο χρώμα. Το στερεό φόντο της ιστοσελίδας χρησιμοποιεί ένα μόνο χρώμα. Οι επιδράσεις ενός γραφικού πάνω σε ένα μπλε φόντο ιστοσελίδας, απεικονίζονται παρακάτω. Συγκρίνετε αυτές τις επιδράσεις με αυτές παραπάνω. Το αυθεντικό γραφικό του αρχείου μορφής jpeg. Το ίδιο γραφικό πάνω σε μπλε φόντο. Το φόντο της εικόνας που γράφει blue jpeg είναι το ίδιο μπλε με αυτό του μπλε φόντου. Και τα δυο είναι το ίδιο ακριβώς Ιστό-ασφαλές χρώμα. Μια γραμμή τέχνης ή ακόμα και ένα κείμενο με λίγη σκιά, θα πρέπει να δημιουργηθούν στον ίδιο φόντο το οποίο τελικά θα τοποθετηθεί από πάνω. Στη συνέχεια, θα πρέπει να μετατραπεί σε μια Ιστό-ασφαλή παλέτα σωσμένη ως gif. Φωτογραφικές εικόνες μορφής jpeg μπορούν να προκαλέσουν και απρόσμενα αποτελέσματα. Για παράδειγμα, μπορεί να υπάρξει ένα πρόβλημα με μια φωτογραφία που περιέχει μαύρο φόντο τοποθετημένη πάνω σε μια ιστοσελίδα μαύρου φόντου. Εφόσον, το αρχείο μορφής JPEG δημιουργεί ένα πιο πλατύ εύρος χρωμάτων μέσω οποιουδήποτε στερεού χρώματος, οι φωτογραφίες θα πρέπει να είναι πλαισιωμένες από μια γραμμή ενός 26

πόντου ή κάποιας άλλης τεχνικής πριν αποθηκευτεί ως jpeg. Μόλις πλαισιωθεί, οι χρωματικές διαφορές μεταξύ της εικόνας και του φόντου της σελίδας δε θα είναι εμφανείς. 5. Προεπισκόπηση Κάνοντας προεπισκόπηση στις εικόνες σε μια πλατιά ποικιλία άλλων πλατφορμών και επεξεργαστών είναι το καλύτερο εργαλείο για την κατανόηση και την πρόβλεψη των χρωματικών παραλλαγών. Δεν υπάρχει καλύτερη τεχνική παρά αναπτύσσοντας μια ικανότητα διάκρισης του πώς ορισμένα χρώματα μπορούν να μεταβληθούν υπό πολυάριθμες συνθήκες. Επιπλέον, ο σχεδιαστής θα πρέπει να κατασκευάσει ένα ανεκτίμητο λεξιλόγιο των χρωματικών αποχρώσεων. Για παράδειγμα, ξέροντας πως το σκούρο μπλε μπορεί να φαίνεται μαύρο στο 25% όλων των υπολογιστών, θα βοηθήσει τους σχεδιαστές να πάρουν διορθωτικά μέτρα. Εκτός από την προεπισκόπηση πραγματικού χρόνου, υπάρχουν αρκετά εργαλεία που επιδεικνύουν τις αντιθέσεις του gamma στις εικόνες του Ιστού. Η συσκευή Knoll πίνακας ελέγχου gamma είναι ένα εργαλείο προεπισκόπησης του gamma διαθέσιμο για την Macintosh. Οι σχεδιαστές και στις δυο πλατφόρμες μπορούν να εκμεταλλευτούν πλήρως το Adobe Gamma, μια συσκευή προεπισκόπησης διαθέσιμη στο Photoshop 5.0 και πάνω. Αλλάζοντας τις ρυθμίσεις του gamma, οι διαφορές είναι εμφανείς. Σαν κανόνας, αν οι εικόνες φαίνονται καλά με κλίμακα του gamma από 1.8-2.2, θα είναι δεκτές και από τη Macintosh και τις πλατφόρμες των Windows. Άλλα εργαλεία προεπισκόπησης περιλαμβάνουν το Adobe s Image Ready Browser Dither που σας επιτρέπει να βλέπετε τα γραφικά σας όπως εμφανίζονται σε συστήματα 8- bit. 6. Εναλλακτικές ετικέτες (alt tags) για τις πληροφορίες χρώματος Οι εναλλακτικές ετικέτες αυξάνουν τη δυνατότητα πρόσβασης των χρωμάτων στους πελάτες που μπορεί να έχουν περιορισμούς χρωμάτων στο υπολογιστικό τους σύστημα. Για παράδειγμα, περιγράφοντας το χρώμα ως ανοιχτό κόκκινο ντομάτας θα προσθέσει τις απαραίτητες πληροφορίες. Η αγγλική γλώσσα δεν παρέχει ένα ακριβές χρωματικό λεξιλόγιο. Ενώ η Ελληνική γλώσσα έχει πάνω από 100 συγκεκριμένους όρους για το λευκό. Πολύ λίγα άτομα που μιλούν αγγλικά μπορούν να ορίσουν και να συμφωνήσουν στη διαφορά που υπάρχει ανάμεσα στο κοκάλινο (bone) λευκό, το παλαιό (antique) λευκό, (champagne) σαμπανιζέ λευκό και το ξεθωριασμένο λευκό (off-white). Σαν κανόνας, τα φυσικά υλικά όπως τα φυτά και τα μεταλλεύματα παρέχουν οριστικούς όρους χρωμάτων. Κολλώντας στους πιο συχνά χρησιμοποιούμενους χρωματικούς όρους όπως το ανοιχτό και το σκούρο, το φωτεινό και το μουντό, είναι επίσης ασφαλές, για παράδειγμα, ανοιχτό μουντό μπλε. Να μην χρησιμοποιείτε χωρίς νόημα ποιητικούς όρους όπως το Ριβιέρα μπλε. Επιπλέον, περιγραφικές λέξεις οι οποίες είναι ασυνήθιστες σε ορισμένες χώρες, όπως το κίτρινο σχολικού λεωφορείου θα πρέπει να αποφεύγονται. 27

7. Τεχνολογία βασισμένη σε υπολογιστή Αν και οι συνδέσεις κατεβάσματος και άλλα βήματα που καταναλώνουν χρόνο δεν πρέπει να χρειάζονται σε ένα κατάστημα, μερικές φορές ο πελάτης μπορεί να είναι πρόθυμος να θυσιάσει λίγο χρόνο στην ακρίβεια των χρωμάτων. Εφόσον προσφέρεται σαν επιλογή, οι ιστοσελίδες ηλεκτρονικού εμπορίου μπορεί να επωφεληθούν από αυτά τα εργαλεία. Για παράδειγμα, το True Internet Colors (αληθινά χρώματα διαδικτύου) είναι μια βασισμένη στον υπολογιστή τεχνολογία από την www.sonnetech.com που παρέχει μια μοναδική τρίλεπτη βαθμολόγηση, βασισμένη σε υπολογιστή για τους επισκέπτες της ιστοσελίδας. Αυτό δημιουργεί ένα μοντέλο στον κεντρικό υπολογιστή που παραδίδει ακρίβεια των χρωμάτων σε εικόνες gif και jpeg στους επεξεργαστές των χρηστών. Οι υπεύθυνοι θα έπρεπε να εξερευνήσουν αυτές τις αναδυόμενες τεχνολογίες. 2.6 Το Μέλλον του Χρώματος στον Ιστό Προς το παρόν, το λογισμικό μηχανών αναζήτησης Ιστού δεν μπορεί να εκτελέσει το gamma και τη χρωματική διόρθωση με εξαίρεση μερικές μεμονωμένες περιπτώσεις. Στο μελλοντικό κόσμο του ηλεκτρονικού εμπορίου και οι γραφικοί φάκελοι και οι μηχανές αναζήτησης θα αντισταθμίζουν αυτές τις διαφορές. Όταν αυτή η λειτουργία αναπτυχθεί πλήρως, η μηχανή αναζήτησης θα είναι ικανή να ρυθμίσει το gamma του χρήστη. Ιδανικά, αν το σύστημα κάθε πελάτη είχε ένα ακριβές προφίλ του μόνιτορ, θα μπορούσε σχετικά εύκολα να παραδώσει και να μεταφέρει μια εικόνα Ιστού χρώματος RGB στο χώρο με ένα συνημμένο προφίλ (σχεδιάγραμμα). Οι σημερινές εκδόσεις των υπολογιστικών συστημάτων των Windows και της Macintosh διαθέτουν διοικητικές ικανότητες χρώματος η Macintosh χρησιμοποιεί τα ColorSync System και τα Windows, ICM. Παρά τις ικανότητες των περισσότερων συστημάτων στο να κατανοούν ενσωματωμένα προφίλ χρώματος, οι μηχανές αναζήτησης δεν υποστηρίζουν ένα ομοιόμορφο διαγώνιας πλατφόρμας πρότυπο για την ανάγνωση αυτού του στοιχείου και τη ρύθμιση της εικόνας αναλόγως. Ωστόσο, οι σχεδιαστές Ιστού μπορούν να επιλέξουν να σχεδιάσουν για το μέλλον ενσωματώνοντας τα κατάλληλα προφίλ στα γραφικά. Αυτή η περιγραφή της συμπεριφοράς του χρώματος είναι γνωστή ως ICC (International Color Consortium) (διεθνής κοινοπραξία χρώματος) Profile. Λογισμικά γραφικών, όπως το Photoshop, είναι πλήρως ικανά να συμπεριλάβουν αυτά τα προφίλ σήμερα. Μια πλήρης περιγραφή των RGB ρυθμίσεων μπορείτε να βρείτε στο www.adobe.com. Συνοπτικά, ο σχεδιαστής επιλέγει το χώρο εργασίας από την εμφανιζόμενη RGB λίστα στο παράθυρο διαλόγου της εγκατάστασης του RGB. Όλες οι επιλογές, εκτός από το Monitor RGB, είναι εξαρτώμενες από συσκευές, έτσι οι τιμές τους για το λευκό σημείο, το gamma και η αξία είναι γνωστές και βιομηχανικά τυποποιημένες. Ο χώρος του RGB χρώματος έχει προκαλέσει ιδιαίτερη συζήτηση. Μερικοί λένε κρατήστε τα πάντα στην RGB και το χρώμα θα είναι αρκετά καλό για τον καταναλωτή. Στην πραγματικότητα, δεν είχε ποτέ σχεδιαστεί ως λύση για την ακρίβεια του χρώματος στον Ιστό. Επιπλέον, η RGB είναι ένας περιορισμένος χώρος χρώματος που αντιπροσωπεύει τον μέσο όρο των PC μόνιτορ ένα VGA μόνιτορ των 300$ είναι το καλύτερο. Τα σημερινά μόνιτορ προσφέρουν πολύ καλύτερες ικανότητες. Ο σχεδιαστής Ιστού πρέπει να αποφασίσει 28

αν οι εικόνες πρέπει να περιλαμβάνουν προφίλ με το χαμηλότερο κοινό παρανομαστή ή για ένα ευρύτερο χώρο χρώματος. Ο βαθμός της ακρίβειας του χρώματος που απαιτείται από το εμπόρευμα και ο συγκεκριμένος φορέας θα καθορίσει την τελική επιλογή. Νέες και βελτιωμένες μορφές αρχείων θα παραδώσουν επίσης χρωματική ακρίβεια στο μέλλον. Εκτός από την παραδοσιακή μορφή JPEG, μια νέα γραφική μορφή αρχείου, η JPEG 2000, είναι προς το παρόν υπό ανάπτυξη και θα δώσει καλύτερες εικόνες, θα παρέχει περισσότερες επιλογές συμπίεσης και θα επιτρέψει πλήρη ICC προφίλ χρώματος. Επίσης, η μορφή αρχείου PNG (Portable Network Graphics) (φορητή γραφική παράσταση δικτύων) είναι μια από τις πιο υποσχόμενες, αξιόπιστες και δοκιμασμένες στο χρόνο λύσεις. Τα γραφικά που δημιουργούνται ως PNG (pronounced ping) (έντονος μεταλλικός θόρυβος), αποθηκεύουν gamma και στοιχεία χρωματικότητας για βελτιωμένο ταίριασμα χρωμάτων και θα δουλεύουν σε υπολογιστικά συστήματα. Παρά το γεγονός ότι αυτή η μορφή αρχείου υπάρχει από το 1995 και υποστηρίζεται από τα περισσότερα εργαλεία γραφικής ανάπτυξης, η PNG δεν υποστηρίζεται από τις πιο συχνά χρησιμοποιούμενες μηχανές αναζήτησης και προς το παρόν εξαρτάται από μια σύνδεση. Η υποστήριξη κεντρικών υπολογιστών Ιστού είναι επίσης εκκρεμής. Μερικά άλλα εργαλεία διαχείρισης χρώματος, συμπεριλαμβάνοντας τις τεχνολογίες που βασίζονται σε υπολογιστή, είναι ακόμα υπό ανάπτυξη. Όπως περιγράψαμε προηγουμένως, αυτά μπορεί να είναι μια επιλογή των πελατών που είναι πολύ αφοσιωμένοι στο κατάστημα και το εμπόριο. Ως προετοιμασία για τον μελλοντικό κόσμο της ακρίβειας του χρώματος στο ηλεκτρονικό εμπόριο, οι σχεδιαστές θα έπρεπε να σώζουν υψηλής ποιότητας εκδόσεις των εικόνων Ιστού σε μια ασυμπίεστη, χωρίς απώλειες μορφή (όπως Adobe Photoshop, PSD ή TIFF). Όταν τα νέα εργαλεία είναι διαθέσιμα, αυτοί οι γραφικοί φάκελοι μπορούν να επαναρυθμιστούν χωρίς απώλεια της ποιότητας της εικόνας. 2.7 Χρωματική Προσβασιμότητα και Όραση Δεν είναι όλοι οι επισκέπτες δημιουργημένοι ίσοι. Πιθανοί πελάτες φτάνουν με ποικίλους βαθμούς όρασης χρώματος. Εκτός από τις παραγόμενες από τον υπολογιστή μεταβολές χρώματος, περισσότερο από το 30% από τους επισκέπτες μιας ιστοσελίδας μπορεί να έχει κάποια μορφή φυσικής οπτικής δυσλειτουργίας. Αυτό το γκρουπ συμπεριλαμβάνει τον πληθυσμό που έχει αχρωματοψία και τους ηλικιωμένους. Εκτός από τον στόχο της ιστοσελίδας στο κοινό, οι σχεδιαστές πρέπει να γνωρίζουν αυτές τις μεταβλητές και να σχεδιάζουν ανάλογα. Αυτός ο τομέας παρουσιάζει καθοδηγήσεις για την προσβασιμότητα του χρώματος. Αχρωματοψία Ένας στους δώδεκα επισκέπτες μιας ιστοσελίδας έχει αχρωματοψία- το 8% των αντρών και το 0.5% των γυναικών έχουν μια μορφή αχρωματοψίας. Είναι σημαντικό να καταλάβουμε πως το μάτι που έχει αχρωματοψία είναι αναίσθητο σε ένα συγκεκριμένο εύρος χρώματος και βλέπει διαφορετικά χρώματα από τα κανονικά, δεν είναι ανικανότητα να βλέπεις καθόλου χρώμα. Η έλλειψη αντίληψης του κόκκινου-πράσινου είναι η πιο κοινά αναγνωρισμένη μορφή αχρωματοψίας. 29

Αν και υπάρχουν πολλές μορφές αχρωματοψίας και πολλές παραλλαγές- οι παρακάτω οδηγίες αναφέρονται στις πιο συχνές περιπτώσεις. Μη ασφαλή χρώματα 1.κόκκινο 2.πράσινο Μη ασφαλείς συνδυασμοί χρωμάτων 1. Κόκκινο και πράσινο είναι ο χειρότερος συνδυασμός. Και τα δυο χρώματα μπορεί να φαίνονται γκρι. Κάποιος που έχει αχρωματοψία μπορεί να δει: 2. Γκρι πάνω σε κόκκινο ή πράσινο είναι υπερβολικά δύσκολο να διαβαστεί για τους ίδιους λόγους. 3. Τα χρώματα σε κείμενο σύνδεσμο πάνω σε χρωματιστό φόντο μπορεί να μην είναι ορατά. Το χρώμα μπορεί να μην είναι μια υπόδειξη που μπορεί να δει ένας με αχρωματοψία. Εφόσον η υπογράμμιση κάτω από το κείμενο-σύνδεσμος μπορεί να είναι η μόνη υπόδειξη, δεν θα πρέπει να χρησιμοποιηθούν φύλλα με σχέδιο που θα το μετακινήσουν. Το ίδιο μπορεί να εφαρμοστεί και σε rollovers με μεταβλητό χρώμα. Το μάτι που έχει αχρωματοψία δε θα δει την αλλαγή του χρώματος και δε θα ξέρει πως μπορείς να κάνεις κλικ πάνω στο σύνδεσμο. 4. Χρωματιστό κείμενο πάνω σε κάθε φόντο με μίξη χρωμάτων μπορεί να είναι δύσκολο να το ξεχωρίσει κανείς. 30