Of Mice And Men

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

A glimce

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

Και το ποντίκι; Αυτό ήρθε σχετικά πρόσφατα στη ζωή μας και, δυστυχώς, ειδικά οι τελευταίες 3-4 γενιές το ξεχνάμε. Μοιάζει να μη θυμόμαστε καν πως ήταν πριν το ποντίκι. Το ποντίκι είναι απλώς ένα hack. Μια λύση που εμφανίστηκε για να καλύψει την ανάγκη της τεχνολογίας για μια συσκευή κατάδειξης στους υπολογιστές με GUI (graphic user interface / γραφικό περιβάλλον εργασίας) όπως το Mac OS ή τα Windows, μια εργασία στην οποία το πληκτρολόγιο δεν αρκούσε. Το ποντίκι ήταν μια καλή λύση (απουσία της τεχνολογίας για οθόνες αφής), μια βολική και φθηνή λύση που συνηθίσαμε όλοι μας, αλλά παρόλα αυτά εντελώς αφύσικη.

Όσο για τις οθόνες αφής δεν είναι και τόσο καινούργιες όσο ίσως πιστεύουμε. Το 1982 στην εκπομπή του BBC “Tomorrow’s World” παρουσιάστηκε ένας υπολογιστής αγνώστου μοντέλου με μια πρώιμη οθόνη αφής. Ένα χρόνο μετά η Hewlett-Packard εμφανίζει στην αγορά τον HP150, ο οποίος χρησιμοποιούσε ένα πλέγμα υπέρυθρων ακτίνων για να καταγράψει τις κινήσεις του χεριού. Το 1993, πολύ πριν το iPad, η Apple παρουσίασε το Newton, μια ηλεκτρονική ατζέντα χειρός με βασικές λειτουργίες και ασπρόμαυρη οθόνη αφής. Το 2000 η Microsoft είδε τις δυνατότητες των συσκευών tablet και προχώρησε σε μια ειδική έκδοση των Windows για tablet PC, τα οποία όμως ήταν ιδιαίτερα ακριβά.

Συνεχίζοντας την ιστορική αναδρομή, βλέπουμε ότι παλιότερα, ιδιαίτερα για τις “δημιουργικές υπηρεσίες”, υπήρχαν οι ειδικοί. Οι περισσότεροι άνθρωποι δεν “έφτιαχναν” πράγματα. Όταν χρειάζονταν φωτογραφίες ή ένα πίνακα, επαγγελματικές κάρτες, αφίσες για συναυλίες ή ακόμη και το βίντεο του γάμου τους, απευθύνονταν σε φωτογράφους, ζωγράφους, σκηνοθέτες γραφίστες κλπ.

Τα τελευταία χρόνια, η τεχνολογία έχει εξελιχθεί σε τέτοιο βαθμό που όλοι είναι κάτι. Μπορούν να φωτογραφίσουν, να ζωγραφίσουν, να σκηνοθετήσουν ακόμα και να σχεδιάσουν ό,τι θέλουμε. Ο καθένας μπορεί να γίνει (ή να νοιώσει σαν) μια Annie Leibovitz, ένας Stanley Kubrick, ένας Andy Warhol ή ένας Paul Rand. Δεν είναι τυχαίο το ότι το περιοδικό Time το 2007 έδωσε τον τίτλο Person of the Year σε Εσένα, στον καθένα μας, αναγνωρίζοντας τον έλεγχο που έχουν πλέον οι χρήστες, οι καθημερινοί άνθρωποι στην Εποχή της Πληροφορίας. Σήμερα, “όλοι” μπορούν να γίνουν stars. Ακόμα και για περισσότερα από 15 δευτερόλεπτα. Όλοι έχουν πλέον fans, followers, readers, subscribers, που κάνουν Like και προσθέτουν Views σε ό,τι ο καθένας ανεβάζει στο Δίκτυο. Ζούμε την εποχή του Παγκόσμιου Αυνανισμού. Η οποία όμως είναι και μια εποχή Ευκαιρίας. Τι μπορούμε να κάνουμε εμείς σαν web designers για τους χρήστες, αναγνώστες, φωτογράφους, δημιουργούς αυτής της εποχής; Μπορούμε να τους κάνουμε καλύτερους σ’αυτό που κάνουν. Πως;

Web Design

Ας θυμηθούμε πρώτα τον ορισμό του Paul Rand: «Το Design είναι η μέθοδος να συνδυάσεις τη Φόρμα με το Περιεχόμενο. Το Design, όπως και η Τέχνη, έχει πολλές έννοιες, δεν είναι κάτι απόλυτο. Το Design μπορεί να είναι Τέχνη. Το Design μπορεί να είναι Αισθητική. Το Design είναι τόσο απλό, που αυτό είναι που το κάνει τόσο περίπλοκο».

Το Web Design ακολούθησε μια ανάλογη πορεία με το Graphic Design και εξακολουθεί να εξελίσσεται διαρκώς. Αυτό που ξεκίνησε σαν χόμπι, έγινε trend και έχει φτάσει να θεωρείται ένα ιδιαίτερα σεβαστό και επικερδές επάγγελμα. Πλέον εμφανίζεται και ως “Digital Design” (ή “New Media Design”) καθώς έχει ξεπεράσει τα όρια του Web και περιλαμβάνει κάθε είδους οθόνη στην οποία υπάρχει το οποιοδήποτε περιβάλλον εργασίας.

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

Είναι σαφές λοιπόν, ότι όταν σχεδιάζουμε, για παράδειγμα, μια ηλεκτρονική εφημερίδα, δεν σχεδιάζουμε μόνο το layout του περιεχομένου της, αλλά και την αλληλεπίδραση του χρήστη με αυτό, σε αντίθεση με το παραδοσιακό έντυπο μέσο όπου το “ξεφύλλισμα” είναι η μοναδική επιλογή “περιβάλλοντος”. Έτσι, δεν μιλάμε μόνο για την εμφάνιση, αλλά και για λειτουργία. Όπως είπε και ο Steve Jobs, «Design δεν είναι μόνο το πως μοιάζει και φαίνεται κάτι. Design είναι το πως λειτουργεί».

Σήμερα

Ας προχωρήσουμε όμως στις διαφορές, αρχικά από το γραφείο (desktop) στο τηλέφωνο (mobile). Από το σχεδιασμό ιστοσελίδων και ιστότοπων για προβολή στην οθόνη του υπολογιστή σε αυτούς για προβολή σε κινητά. Η βασική διαφορά, όπως εύκολα παρατηρεί κανείς, είναι το μέγεθος της οθόνης. Χρειάζεται αναθεώρηση της λογικής του σχεδιασμού ακόμα κι αν το γενικό art direction παραμείνει ίδιο.

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

Παράλληλα, πρέπει να υπολογίσει και τις ανάγκες του χρήστη, από ζητήματα επιθυμίας, όπως εύκολη και γρήγορη αναζήτηση), μέχρι ζητήματα “οικονομίας”, όπως ποιότητα και όγκος δεδομένων που μεταφέρονται στη συσκευή αφού το επιπλέον κόστος για σύνδεση Internet στο κινητό είναι ακόμα αρκετά υψηλό. Εξαιρετικό παράδειγμα προσαρμογής σχεδιασμού από το website στο mobile, διατηρώντας τον σχεδιασμό του εντύπου, είναι αυτό του Guardian.

Τις ίδιες κατηγορίες διαφόρων συναντάμε και στη μετάβαση στον καναπέ. Ο σχεδιασμός για ταμπλέτες (tablets) είναι σε αρκετά πρώιμο στάδιο και παρατηρείται μια συνεχής αλλαγή στη στρατηγική υιοθέτησης τους από διάφορες εταιρείες, αλλά και στην προσέγγιση του σχεδιασμού γι’αυτές από διάφορους designers.

Οι γενικοί κανόνες, όμως, παραμένουν, όπως και τα ίδια σημεία προσοχής. Όσον αφορά τις διαστάσεις της οθόνης η λογική είναι πιο κοντά σ’αυτή του desktop. Σε γενικές γραμμές διατηρούνται α) ο ίδιος κάνναβος (βλ. τις διάφορες προσεγγίσεις του 960px grid) ή β) το ίδιο ακριβώς design, μιας και ειδικά στην οριζόντια θέση μια ταμπλέτα προβάλει ένα τυπικό website με την ίδια ανάλυση που το κάνει και ένα laptop.

Παρά τις προφανείς διαφορές που έχουν αυτές οι δύο οθόνες (κινητό και ταμπλέτα) έχουν το κοινό χαρακτηριστικό του touchscreen που τους δίνει επιπλέον λειτουργίες, άρα και επιπλέον λύσεις και δυνατότητες στον designer για σχεδιασμό πιο ιδιαίτερων και “φυσικών” αλληλεπιδράσεων και περιβαλλόντων.

Μπορεί οι γενικές αρχές και λύσεις επιλογών (κουμπιά, μενού, scrolls κλπ.) να μένουν ίδια, ο τρόπος λειτουργίας και —κυρίως— εμφάνισης τους, αλλάζει αρκετά. Πρέπει ο σχεδιασμός να προσαρμοστεί στις διαστάσεις των δαχτύλων, στις συνθήκες περιβάλλοντος, στη στάση του χρήστη, στη χρήση της οθόνης από τον τελευταίο, στο γεγονός ότι κρατάει την οθόνη, αλλά και ότι παρεμβάλλουν ανάμεσα σ’αυτήν και τα μάτια του.. δάχτυλα, ίσως και όλο το χέρι. Επίσης, να έχει στο νου του ότι είναι πιο εύκολο να κάνεις “κλικ” (tap) και πιο δύσκολο το να πληκτρολογήσεις κάτι, ενώ αρχίζει να γίνεται “πρόκληση” ο σχεδιασμός σύνθετων επιλογών, μενού και λιστών.

Τέλος, ας μη ξεχνάμε ότι εκτός από τις δύο αυτές νέες οθόνες, έχουμε πολλές παλιότερες με touchscreen, όπως τα ATM, ενώ συνεχώς θα εμφανίζονται κι άλλες, όπως οι smart TV αλλά και οι πιο μελλοντικές virual οθόνες ή βιτρίνες καταστημάτων. Οι εξελίξεις δείχνουν ότι το χαρτί δεν θα πεθάνει αλλά θα αλλάξει χρήση, ενώ τα websites θα αλλάξουν κι αυτά πολύ καθώς η λογική των εφαρμογών (apps) μοιάζει να επικρατεί μελλοντικά. Σ’αυτά τα δεδομένα με κυριότερο τηνολοένα και αυξανόμενη εμφάνιση και χρήση οθονών, θα πρέπει να προσαρμοστούν και οι designers που θέλουν να ακολουθούν τις εξελίξεις. Touch will not change the world – it already did.

Σχόλια στο Twitter ή στο Google+

Το άρθρο γράφτηκε για το τεύχος #74 του περιοδικού +Design
Πλέον, τα πιο εκτενή κείμενα μπορείς να τα διαβάζεις και στο words.nassoskappa.com