Εταιρεία Περιφερειακής Ανάπτυξης και Ψυχικής Υγείας
Website Building
Μπαίνοντας στο σπίτι ενός ανθρώπου περνάς ένα σημαντικό κατώφλι της γνωριμίας σου μαζί του. Είναι ο προσωπικός χώρος του, το καταφύγιο του, το μέρος της γης που φιλοξενεί τον αληθινό κόσμο του. Το οριοθετημένο σημείο της γης εντός του οποίου μπορεί να θέτει τους προσωπικούς του κανόνες.
Το να στήνεις μια ιστοσελίδα μοιάζει με το χτίσιμο ενός σπιτιού. Ξεκινώντας από τα θεμέλια μέχρι την διακόσμηση των μικρών λεπτομερειών στους τοίχους του.
Digital αρχιτέκτονες;
Κάθε οίκημα για να είναι σταθερό χρειάζεται γερά θεμέλια. Μπορεί λοιπόν να μιλάμε μεταφορικά για ένα website building όμως στην πραγματικότητα υπάρχουν σοβαρές ομοιότητες.
Ποια είναι η εταιρεία Περιφερειακής Ανάπτυξης & Ψυχικής Υγείας;
Η ΕΠΑΨΥ είναι ένας από τους μεγαλύτερους μη κερδοσκοπικούς οργανισμούς υπηρεσιών ψυχικής υγείας στην Ελλάδα.
Ο σχεδιασμός της νέας ιστοσελίδας της ΕΠΑΨΥ αποτελεί ένα από τα πιο πρόσφατα και σημαντικά έργα της ομάδας μας.
Βασικός στόχος μας ήταν η δημιουργία μιας ιστοσελίδας στο επίκεντρο της οποίας θα βρίσκεται η ανθρώπινη επικοινωνία και η ενημέρωση του κοινού για την πολύπλευρη ταυτότητα (δράσεις, προγράμματα, podcasts, επιστημονική εργασία) της ΕΠΑΨΥ, καθώς και η μεγάλη προσοχή στην υποστήριξη του κοινού (δωρεές, εθελοντισμός, χορηγίες).
Πρώτο βήμα λοιπόν για εμάς ήταν να κατανοήσουμε τις ανάγκες του χρήστη.
Πριν ξεκινήσουμε τη διαδικασία του σχεδιασμού, η κατανόηση του τι πραγματικά αντιπροσωπεύει η ΕΠΑΨΥ ήταν ένα πολύ σημαντικό πρώτο βήμα.
Η ομάδα μας ξεκίνησε την διαδικασία παίρνοντας συνέντευξη από τον Ιδρυτή και τον Πρόεδρο της ΕΠΑΨΥ ώστε να έχουμε μια κατευθυντήρια γραμμή και αίσθηση του τι θέλουμε να πετύχουμε δημιουργώντας τον ιστότοπο αυτό. Επιπλέον συγκεντρώσαμε σχόλια αλλά και συνεντεύξεις άλλων ενδιαφερομένων.
Μελετήσαμε τις σύντομες ενημερώσεις που μας έδωσαν οι ενδιαφερόμενοι και ερευνήσαμε στην συνέχεια αντίστοιχους ιστότοπους ψυχικής υγείας ή παρόμοιων οργανισμών.
Σχεδιασμός
Το μενού αποτέλεσε ένα από τα σημαντικότερα μέρη στη διαδικασία του σχεδιασμού. Με τις αρχικές οδηγίες, τα σχόλια που λάβαμε από τους ενδιαφερόμενους και τα δεδομένα που συγκεντρώσαμε δημιουργήσαμε μια πρώτη έκδοση του χάρτη ιστοτόπου.
Τα πρώτα «χάρτινα καλώδια» μπήκαν στη πρωτη μορφή τους στο χαρτί.
Σχεδιασμός Low-Fidelity Wireframes
Η δημιουργία των ψηφιακών wireframes στο Figma και συγκεκριμένα του πρωτοτύπου χαμηλής πιστότητας για επιτραπέζιους υπολογιστές ήταν το επόμενο βήμα των Visual & User Experience Designers της ομάδας. Και κάπως έτσι οι πρώτες σελίδες που σχεδιάστηκαν ήταν: η Αρχική σελίδα, η Σχετικά με εμάς, η Σελίδα Επικοινωνίας και μια σελίδα άρθρου. Οι τοποθετήσεις των κουμπιών, η οργάνωση των σελίδων ήταν θέματα τα οποία συζητήθηκαν από όλα τα μέλη της ομάδας, θέτοντας στο τραπέζι γνώμες ιδέες και σχόλια για το καλύτερο δυνατό πρώτο αποτέλεσμα.
Usability test – Δοκιμή Χρηστικότητας
Επόμενο σημαντικό μεθοδικό βήμα, είναι φυσικά το τεστ ευχρηστίας. Συγκεκριμένα, 12 γυναίκες και 12 άνδρες ηλικίας 27-65 ετών, από διαφορετικά υπόβαθρα, συμμετείχαν διαδικτυακά σε μια μελέτη χρηστικότητας, όπου τους ζητήθηκε να περιηγηθούν στον ιστότοπο, να απαντήσουν σε ερωτήσεις και να ακολουθήσουν τα σενάρια που είχαμε δημιουργήσει και να σχολιάσουν την εμπειρία τους σε κάθε στάδιο. Τα κύρια σημεία πόνου (pain points) που ανακαλύφθηκαν κατά τη μελέτη χρηστικότητας ήταν το μενού και η φόρμα επικοινωνίας.
High-fidelity Wireframes
Έπειτα η ομάδα μας προχώρησε στη δημιουργία υψηλής πιστότητας wireframes. Τα χρώματα που επιλέχθηκαν για το πρωτότυπο ήταν από την παλέτα χρωμάτων του λογότυπου EPAPSY. Το μπλε γενικά χρησιμοποιείται για ιστότοπους που σχετίζονται με την υγεία και αντιπροσωπεύει την αξιοπιστία και την τάξη, κάτι που ήταν σημαντικό για τα ενδιαφερόμενα μέρη. Οι φωτογραφίες που χρησιμοποιήθηκαν για το πρωτότυπο είχαν θέμα τα χέρια, καθώς η ΕΠΑΨΥ δεν απλώς ένας οργανισμός, είναι ένα χέρι βοήθειας σε θέματα ψυχικής υγείας για ένα μεγάλο μέρος του πληθυσμού της χώρας μας. Κι αφού σας πήραμε λίγο μαζί μας στο ταξίδι του σχεδιασμού ενός website, είναι ήρθε η ώρα να μιλήσουμε για τα στοιχεία που χαρακτηρίζουν το τελικό αποτέλεσμα πιο συγκεκριμένα. Μιλάμε λοιπόν για έναν Website Ίσο & Δίκαιο προς όλους “Equal for All”, τηρώντας πιστά τις αρχές τις προσβασιμότητας. Σχεδιάσαμε και αναπτύξαμε το epapsy.gr βήμα-βήμα έτσι ώστε να είναι περιεκτικό και προσβάσιμο σε όλους τους χρήστες που θα το αναζητήσουν. Θα λέγαμε λοιπόν πως οι πυλώνες πάνω στους οποίους οικοδομήσαμε αυτό το διαδικτυακό οίκημα είναι τρεις: Προσβασιμότητα/Αccessibility (Ισότητα-Δικαιοσύνη) Ενσυναίσθηση/Empathy (UX UI) Λειτουργικότητα
Προσβασιμότητα/ Accessibility
Το κεφάλαιο «Προσβασιμότητα» είναι πολύ σημαντικό για την ομάδα μας, έτσι προσπαθήσαμε να την ενσωματώσουμε χρησιμοποιώντας καθαρό κείμενο, σωστή δομή και επαρκή χρωματική αντίθεση. Πρόκειται για μια κρίσιμη πτυχή του σύγχρονου σχεδιασμού ιστοσελίδων η οποία διασφαλίζει ότι οι ιστότοποι μπορούν να χρησιμοποιηθούν από ανάπηρους ανθρώπους, με οπτικές, ακουστικές, κινητικές και γνωστικές βλάβες. Βασικοί κανόνες διαμόρφωσής του είναι η Ισότητα και η Δικαιοσύνη.
Το website της ΕΠΑΨΥ διαμορφώθηκε έτσι ώστε να τηρεί τα guidelines κααι όλοι οι επισκέπτες αλλά και πιο συγκεκριμένα οι ανάπηροι άνθρωποι, να μπορούν να περιηγηθούν με ευκολία, χωρίς εμπόδια. Και αυτό σημαίνει ότι μπορεί να χρησιμοποιηθεί ισότιμα. Η προσβασιμότητα μπορεί να κάνει ένα website να διαφοροποιηθεί από τα υπόλοιπα, ενώ παράλληλα δίνει τη δυνατότητα σε έναν ευρύτερο αριθμό επισκεπτών να ανακαλύψει τις υπηρεσίες του. Κανόνες προσβασιμότητας που τηρούνται στο epapsy.gr: Τα χρώματα τηρούν τους κανόνες του Web Content Accecibility Guidelines (ειδικές αποχρώσεις pantone –πολύ κοντά στις αποχρώσεις της ΕΠΑΨΥ, που επιτρέπουν σε κάποιον που έχει προβλήματα όρασης να διαβάσει το site χωρίς την χρήση του βοηθητικού εργαλείου (γαλάζιο – μπλε σκούρο – υπόλευκο).
Tο contrast μεταξύ των χρωμάτων των κειμένων και του background, όπου για να είναι τα κείμενα ορατά και από άτομα με περιορισμένη όραση πρέπει να είναι επιτυχημένα τα tests αντίθεσης μεταξύ τους, σύμφωνα με τα Web Content Accessibility Guidelines. Αποφυγή animations που στόχο έχουν τον εντυπωσιασμό, για τη προστασία ανθρώπων που πάσχουν από επιληψία ή ψυχικές διαταραχές. Accessibility tool με ένα εύρος εργαλείων που επιτρέπουν την ανάγνωση σε άτομα με οπτικές βλάβες. Τα άτομα με περιορισμένη κινητικότητα χρησιμοποιούν assistive technology tools όπως για παράδειγμα screen readers. Επιπλέον, πρέπει να υπάρχει alt-text σε όλες τις φωτογραφίες με το κατάλληλο λεκτικό για το τι απεικονίζεται σε αυτές, έτσι ώστε οι crawlers της Google να γνωρίζουν το αντικείμενο της εκάστοτε φωτογραφίας.
Φωνητική αναζήτηση και μάλιστα στα Ελληνικά, την οποία αναπτύξαμε μέσω ανάπτυξης προγραμματιστικού κώδικα για αποκλειστική εφαρμογή από το site της ΕΠΑΨΥ. Αυτό επιτρέπει στα άτομα με κινητικές βλάβες να αναζητούν εύκολα αυτό που ψάχνουν. Ο αριθμός των βελτιώσεων ενός website αναφορικά με το accessibility μπορεί να είναι πολύ μεγάλος και να εκτείνεται από την εύκολη και γρήγορη προσθήκη ενός widget που να βοηθάει χρήστες με τα προβλήματα που αναφέρθηκαν παραπάνω.
UI-UX Μελέτη
Ενσυναίσθηση/Empathy: Σχεδιάσαμε ένα site εύχρηστο & προσβάσιμο.
Επειδή ο καθένας μας έχει biases ως χρήστης που μπορεί να προέρχονται από το περιβάλλον μας, από την εκπαίδευσής μας, διενεργήθηκε UI – UX μελέτη – δηλαδή μελέτη της εμπειρίας του χρήστη στο site. Βασικό στοιχείο για το UX είναι η ενσυναίσθηση που μας βάζει στη θέση του άλλου και αυτό επιτυγχάνεται με τα usability tests. Test του σχεδιασμένου σε low fidelity website στο κοινό. Από αυτό προέκυψαν data, από τα οποία τα περισσότερα αποτυπώθηκαν στο high fidelity και τελικά υλοποιήθηκαν μέσω κώδικα σε site.
Λειτουργικότητα: Ουσιαστικά, η λειτουργικότητα επιτυγχάνεται όταν πληρούνται τα δύο προηγούμενα χαρακτηριστικά. Το σημαντικότερο είναι να μπορεί κανείς να πει για ένα website ότι είναι λειτουργικό-βοηθητικό και όχι δαιδαλώδες. Λειτουργικότητα σημαίνει οικονομία χρόνου και μεγάλο εύρος αποδοχής. Θυμάστε όταν πολλές φορές μας ζητούσαν στο πανεπιστήμιο να εξηγήσουμε την τάδε θεωρία με απλό τρόπο ώστε να το καταλάβει ένας άνθρωπος που δεν γνωρίζει πολλά για αυτό το θέμα; Κάπως έτσι ένα λειτουργικό website οφείλει να καταφέρνει να “απαντάει” σε μεγάλο εύρος κοινού. Να μπορεί να εξηγεί στα κλικ του με ευκρίνεια και απλότητα ποιος είναι ο ιδιοκτήτης του- τι θέλει να πει-έτσι ώστε όταν τελειώνει η επίσκεψη στο website να έχει κατανοήσει ξεκάθαρα τι είναι η ΕΠΑΨΥ.
Το project ΕΠΑΨΥ, μας έφερε για μια ακόμη φορά αντιμέτωπους με προκλήσεις όπως το να έχουμε διαρκώς ανοιχτούς ορίζοντες, να αναγνωρίσουμε τις προκαταλήψεις που πρέπει να αποφεύγουμε και να εστιάζουμε στις νέες ιδέες που αποτελούν έμπνευση από εμάς. Η διαρκής εξέλιξη του digital κόσμου δεν μπορεί να αφήνει ανεπηρέαστη και την εσωτερική εξέλιξή μας ως μονάδες που συνθέτουν μια ομάδα η οποία καλείται και καταφέρνει τελικά να μένει aligned προς τις απαιτήσεις των καιρών.
