-Ιδιαιτερότητες δικτυακών τόπων
-Πρακτικοί κανόνες διαδικτυακών τόπων
-Εργαλεία & μέθοδοι σχεδιασμού διαδικτυακών τόπων

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

Σχεδιασμός πρωτοτύπων

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

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

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

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

Εργαλεία και μέθοδοι σχεδιασμού διαδικτυακών τόπων

Οι αρχές σχεδιασμού ενός συστήματος είναι γενικά ίδιες είτε αναφερόμαστε σε ιστότοπους, είτε σε λογισμικό, είτε σε κάποιο άλλο σύστημα. Ωστόσο, όπως προαναφέρθηκε οι ιστοσελίδες έχουν μία ιδιαιτερότητα. Δεν είναι απλά πληροφοριακοί χώροι αλλά αποτελούν και ένα σύστημα στο οποίο ο χρήστης μπορεί να αλληλεπιδράσει με αυτό. Όμως προκύπτουν και κάποιοι περιορισμοί π.χ. κόστος, πόροι ή κάποια θέματα που χρήζουν ιδιαίτερης προσοχής όπως ο έλεγχος συμβατότητας με όλους τους φυλλομετρητές, σε όλες τις συσκευές (laptop, tablet, smartphone κ.λπ). Έχει βρεθεί πως για ένα διαδικτυακό τόπο είναι σημαντικό οι χρήστες να μπορούν να εντοπίσουν ανά πάσα στιγμή πού βρίσκονται, τι πληροφορίες υπάρχουν, και που μπορούν να μεταβούν (Αβούρης, 2015).

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

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

Ιδιαιτερότητες δικτυακών τόπων

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

Η κατανόηση των χρηστών και των στόχων τους αποτελεί μια απαιτητική αλλά ιδιαίτερα χρήσιμη διαδικασία για το σχεδιασμό ιστότοπων. Κάποια βήματα που μπορεί να βοηθήσουν το σχεδιαστή στην κατανόηση των χρηστών είναι η συλλογή πληροφοριών για αυτούς όπως η ηλικία, το φύλλο, η εθνικότητα, το επίπεδο γνώσεων κ.λπ. Οι χρήστες ενός συστήματος μπορεί να είναι αρκετά συγκεκριμένοι π.χ. ενδιαφερόμενοι για αγορά εξωτικών ζώων ή αρκετά διευρυμένοι π.χ. ενδιαφερόμενοι για την προβολή του καιρού. Για την εύρεση των στόχων μπορούν να διεξαχθούν συνεντεύξεις, μελέτες επίσημων κειμένων κ.λπ. (Αβούρης, 2015). Κάθε φορά πρέπει να γίνεται προσπάθεια να ληφθούν όσες περισσότερες πληροφορίες γίνεται. Για να γίνει αυτό μπορούν να ακολουθηθούν δύο τεχνικές ή και συνδυασμός αυτών. Οι άμεσες ερωτήσεις, π.χ. συνέντευξη ή η παρατήρηση των εργασιών των χρηστών με κάποιο καταγραφικό εργαλείο, π.χ. ημερολόγιο συμβάντων. Μια τελείως διαφορετική τεχνική θα ήταν η εμπλοκή του ίδιου του χρήστη την σχεδιαστική διαδικασία (συμμετοχικός σχεδιασμός). Πολλές φορές η εύρεση χρηστών κρίνεται δύσκολη ή ανέφικτη και συνεπώς πρέπει να ακολουθηθεί μία άλλη μέθοδος, αυτή της σκιαγράφησης των χρηστών, που πολλές φορές γίνεται με την τεχνική των “αντιπροσωπευτικών χρηστών” (personas). Τέλος, αν και μπορεί να θεωρηθεί αυτονόητο, δεν πρέπει ο σχεδιαστής να θεωρείται και χρήστης. Ο χρήστης δεν έχει τις ίδιες συμπεριφορές, στόχους και γνώσεις με τον σχεδιαστή και το αντίστροφο (Αβούρης, 2015).

Πρακτικοί κανόνες διαδικτυακών τόπων

Μια από τις πρακτικές που έχει βρεθεί ότι βοηθούν το χρήστη είναι η ύπαρξη μηχανής αναζήτησης. Ειδικά αν η ιστοσελίδα είναι μεγάλη και έχει μεγάλο όγκο περιεχομένων τότε η “αναζήτηση” δεν θα πρέπει να λείπει. Ακόμα ένα σημαντικό στοιχείο είναι η ταχύτητα φόρτωσης της σελίδας. Σύμφωνα με έρευνες, ένας χρήστης περιμένει κατά μέσο όρο δέκα δευτερόλεπτα για την φόρτωσή της ενώ ιδανικά θα πρέπει να φορτώνει σε λιγότερο από ένα δευτερόλεπτο. Για να επιτευχθεί η γρήγορη φόρτωση της σελίδας θα πρέπει να χρησιμοποιείται και η κατάλληλη τεχνολογία και συνεπώς να μην χρειάζεται οι χρήστες να κατεβάσουν διάφορα λογισμικά για να προβάλουν το περιεχόμενο της σελίδας. Μία ακόμα καλή πρακτική είναι το να μην έχει μεγάλο μήκος η ιστοσελίδα, αφού ο χρήστης δεν είναι πάντα σίγουρο ότι θα την κυλήσει μέχρι το τέλος της. Εξίσου σημαντικό είναι να υπάρχει τόσο σχεδιαστική απλότητα όσο και σαφήνεια ως προς το περιεχόμενο. Ένα από τα μέσα που μπορεί να βοηθήσει στην επίτευξη αυτού του στόχου είναι η ομοιομορφία. Για παράδειγμα, κάποιες κοινές και γνωστές διαδικασίες δεν θα πρέπει να αλλάζουν, όπως το ctrl+c, ctrl+v που χρησιμοποιείται παντού το ίδιο, μια φράση σε μπλε χρώμα που υποδηλώνει υπερσύνδεσμο (Αβούρης, 2015). Κάποιοι ακόμα φυσικοί κανόνες που είναι θεμιτό να τηρούνται και αφορούν τη δομή του περιεχομένου είναι ότι οι πληροφορίες πρέπει να ομαδοποιούνται. Αν αυτές οι πληροφορίες είναι σε πολλές γραμμές με μεγάλο μήκος τότε να αλλάζει το χρώμα των σειρών ώστε να είναι ευκολότερο να διαβαστούν και επιπλέον ανάμεσα στις πληροφορίες καλό είναι να υπάρχει λευκό κενό. Το κείμενο (για τις περισσότερες γλώσσες) να στοιχίζεται στα αριστερά ενώ οι αριθμοί στα δεξιά (Αβούρης, 2015). Η αρχική σελίδα (home page) θα πρέπει να είναι ιδιαίτερα εύχρηστη και κατανοητή, αφού πολλές φορές ο χρήστης θα περιηγηθεί μόνο σε αυτήν για να κρίνει αν θα συνεχίσει και με τις υπόλοιπες πληροφορίες που μπορεί να του προσφέρει. Συνεπώς ο τίτλος της αρχικής σελίδας πρέπει να συνοψίζει το περιεχόμενο της. Ο τίτλος όσο και οι υπερσύνδεσμοι πρέπει να έχουν σαφήνεια, λιτότητα και περιεκτικότητα. Για μεγάλες ιστοσελίδες προτείνεται επίσης να υπάρχει μία λίστα με τις πιο πρόσφατες ή και τις πιο σημαντικές αναρτήσεις. Τέλος, θα πρέπει να αποφεύγονται τα πολλά γραφικά, εικόνες, ήχοι τα οποία δεν προσδίδουν κάτι σε αυτή (Αβούρης, 2015).

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

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

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

Αναφορές

• Αβούρης, Ν., Κατσάνος, Χρ., Τσέλιος, Ν., Μουστάκας, Κ. (2015). Εισαγωγή στην Αλληλεπίδραση Ανθρώπου-Υπολογιστή. Αθήνα: ΣΕΑΒ
• Ακουμιανάκης, Δρ. Δ. (2010). Διεπαφή Χρήστη-Υπολογιστή Μια σύγχρονη προσέγγιση. Αθήνα: Κλειδάριθμος
• Κουτσαμπάσης, Π. (2011). Αλληλεπίδραση Ανθρώπου-Υπολογιστή Αρχές Μέθοδοι και Παραδείγματα. Αθήνα: Κλειδάριθμος

Σημείωση:

Το παραπάνω άρθρο αποτελεί μέρος της Διπλωματικής Εργασίας, Επικοινωνία ανθρώπου-υπολογιστή: Σχεδιασμός, Υλοποίηση και Αξιολόγηση για την Εκπαίδευση Προπτυχιακών Φοιτητών/τριών σε Εργαλεία και Τεχνικές που Αφορούν την Εμπειρία Χρήστη (User Experience Design) σε Διαδικτυακούς Τόπους και Εφαρμογές. Σχολή Εφαρμοσμένων Τεχνών και Βιώσιμου Σχεδιασμού, τμήμα Γραφικές Τέχνες - Πολυμέσα.

👋 Hello, I'm Eleftheria, Community Manager at Hashnode, developer, public speaker, and chocolate lover.

🥰 If you liked this post please share.

🍩 Would you care about buying me a coffee? You can do it here but If you can't that's ok too!

🙏 It would be nice to subscribe to my Youtube channel. It’s free and it helps to create more content.

🌈 Youtube | Codepen | GitHub | Twitter | Site | Instagram | LinkedIn