Βασικές αρχές σχεδιασμού δικτυακών τόπων

Νικόλαος Τσέλιος

Τμήμα Επιστημών της

Εκπαίδευσης και της Αγωγής στην Προσχολική Ηλικία

tselios.weebly.com

Twitter @nitse1

Σχεδιασμός δικτυακών

τόπων Δικτυακός τόπος: Ένα σύνολο από συσχετιζόμενες ιστοσελίδες

με συγκεκριμένη δόμηση περιεχομένου

O αποτελεσματικός σχεδιασμός ενός δικτυακού τόπου εξαρτάται από 2 παράγοντες: Σχεδιασμό σε επίπεδο δομής δικτυακού τόπου/

○ Κυρίαρχη έννοια η ευχρηστία (usability)

Σχεδιασμό σε επίπεδο σελίδας /○ Πρακτικά ο σχεδιασμός όλων των σελίδων θα πρέπει να είναι ο ίδιος!

○ Εισέρχεται και το ζήτημα της αισθητικής (aesthetics- visual attractiveness)

Πλάνο δημιουργίας δικτυακού τόπου

(1/2)1. Χρήστες, Βασικά στοιχεία. Αποφασίστε σε ποιους απευθύνεται και τι

θέλετε να περιλαμβάνει ο δικτυακός τόπος. Ποιους στόχους θα υποστηρίζει;

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

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

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

του φυσικού σχεδιασμού

○ Λάβετε υπόψη σας το μέγεθος των κειμένων που πρόκειται να ενσωματωθούν ως απλές ιστοσελίδες

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

Πλάνο δημιουργίας δικτυακού τόπου

(2/2)5. Υλοποίηση. Με τη βοήθεια ενός εργαλείου δημιουργίας ιστοσελίδων

αναπτύξτε τις σελίδες του ιστοτόπου σας

προτείνεται το weebly σε 2-3 ώρες μπορείτε να έχετε ένα λειτουργικό site 5-10 σελίδων

6. Έλεγχος-Αξιολόγηση. Ελέγξτε τη λειτουργία του ιστοτόπου σας αναλυτικά με ένα φυλλομετρητή διαδικτύου (προτείνονται Chrome, Firefox)

Και σε διαφορετικές αναλύσεις (1024x768, 1366x768, 1920x1080, 2560x1440)

Και με διαφορετικές συσκευές (PC, Tablet, Smartphone, WebTV..)

Επαναλαμβάνουμε τα βήματα 5 και 6 μέχρι να φτάσουμε στο επιθυμητό αποτέλεσμα

7. Δημοσιεύστε τον ιστότοπό σας στο Διαδίκτυο

8. Διαφημίστε τον ιστότοπό σας όπου κρίνετε απαραίτητο (π.χ στο Facebook, Twitter, σε forum, ιστολόγια κλπ)

Δόμηση δικτυακού τόπου

5

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

δικτυακό τόπο είναι η πληροφορία

Πρακτικά αναφερόμαστε στην κατηγοριοποίηση της πληροφορίας

Κατηγοριοποίηση: ○ Παρέχοντας πληροφοριακά μονοπάτια (με

υπερσυνδέσμους / hyperlinks)

○ Το πρόβλημα είναι ότι οι συσχετίσεις είναι εγγενώς υποκειμενικές

Παράδειγμα δόμησης

6

Οργανώστε σημασιολογικά τις παρακάτω λέξεις σε κατηγορίες:

refrigerator socks bureau living room dictionary kitchen milk bookshelf bedroom

Δυνατότητες

κατηγοριοποίησηςAlphabetically

bedroom

bookshelf

refrigerator

bureau

dictionary

kitchen

living room

milk

socks

By Size

Large

kitchen

living room

bedroom

Medium

refrigerator

bureau

bookshelf

Small

socks

dictionary

milk

By Room

Kitchen stuff

refrigerator

milk

Living Room stuff

dictionary

bookshelf

Bedroom stuff

socks

bureau

By hierarchical location

Kitchen

refrigerator

milk

Living Room

bookshelf

dictionary

Bedroom

bureau

socks

Source: Fleming, J, Web Navigation, 1998

Οργανωτική δομή-

Ιεραρχία Οι σελίδες οργανώνονται σε μια

δενδροειδή σχέση

Οι περισσότεροι δικτυακοί τόποι

χαρακτηρίζονται από μια ιεραρχία

Γραμμική οργάνωση Σελίδες σε μια ακολουθία

Οδηγοί, έλεγχοι πληρωμών και κωδικών, κλπ

Ακτινωτή

Από μια κεντρική σελίδα υπάρχει ακτινωτή

διασύνδεση με τις επιμέρους σελίδες.

Προέκταση της γραμμικής

Πλέγμα Web

Πολλές σελίδες αλληλοσυνδέονται χωρίς επίπεδα ή

ακολουθία

Κάθε σελίδα υπόκειται στην ακτινωτή δομή-hub and

spoke

πχ Facebook

Σχεδιασμός ιεραρχίας

Προσπαθούμε να ισορροπήσουμε μεταξύ πλάτους και

βάθους

Οι χρήστες δεν θέλουν να ‘κατεβαίνουν’ σε μεγάλο

βάθος για να βρουν ένα αντικείμενο, ούτε να διαβάζουν

πολλές επιλογές.

Το ερώτημα είναι, ποιά είναι η σωστή ισορροπία;

πλάτος

βάθος

Η επιτυχία εδράζεται στο πόσο καλά αντανακλά τις προσδοκίες των χρηστών

Δομή δικτυακού τόπου

Πηγή: Nielsen, J. (1999) , “Designing Web Usability: The Practice of

Simplicity,” http://www.nngroup.com/books/designing-web-usability

Credits to: Nielsen, J.

Στατιστική απεικόνιση συμπεριφοράς

χρηστών σε ένα δικτυακό τόπο

Οι χρήστες εισέρχονται σε ένα δικτυακό τόπο

Αναζητούν πληροφορία μέχρι το προσδοκώμενο όφελος να πέσει κάτω από ένα όριο (threshold)

Στη συντριπτική πλειοψηφία εκφράζεται στα log files με λίγα κλικ

H μορφή της καμπύλης καθορίζει το βαθμό προσκόλλησης (stickiness) ενός δικτυακού τόπου

Huberman, B. A., Pirolli, P. L., Pitkow, J. E., & Lukose, R. M. (1998). Strong

regularities in world wide web surfing. Science, 280(5360), 95-97.

Συμβάσεις πλοήγησης

Global

Loc

al

Global

Local

Glob

al

Local

Ανάποδο-L Οριζόντιο Εμφωλιασμένο κάθετο

Τυπική χωροταξία των στοιχείων πλοήγησης

Kalbach, Designing Web Navigation (O’Reilly, 2007)

• Λόγω της υπερβολικής πληροφορίας, το δίκτυο μπορεί να ειδωθεί ως

σύστημα πλοήγησης και ανάκτησης πληροφορίας

• Συνεπώς το σύστημα πλοήγησης βοηθά τους χρήστες να αντιληφθούν τη

δομή και την οργάνωση της πληροφορίας

• Ανά πάσα στιγμή πρέπει να βοηθά τρία ερωτήματα:

• Που είμαι;

• logo, σχετική αναφορά δομής

• Πού ήμουν;

• Δεν υποστηρίζεται επαρκώς, μόνο back, ιστορία φυλλομέτρησης,

αλλαγή χρώματος συνδέσμου που έχω επισκεφτεί.

• Που μπορώ να πάω;

• Σύστημα πλοήγησης

Δομή δικτυακού τόπου

Λάθη;

Κόστος μη καταληπτής πληροφοριακής

‘μυρωδιάς’

Έστω δικτυακός τόπος με βάθος

d=10 και 10 διακλαδώσεις ανά

επίπεδο

Για ένα υποθετικό p=0

λανθασμένων επιλογών για να

φτάσω σε μια πληροφορία στο

τελευταίο link θα επισκεφτώ 10

σελίδες

Εως και p<0,1 το κόστος μένει

χαμηλό. Από εκεί και πέρα

εκθετική αύξηση

Pirolli, P. (2007). Information Foraging Theory: Adaptive Interaction with

Information, Oxford, UK:Oxford University Press.

Άλλες συμπεριφορές

πλοήγησης Ταχύτητα πλοήγησης*

25% όλων των σελίδων απεικονίζονται για λιγότερο από 4 δευτερόλεπτα

52% για λιγότερο από 10 δευτερόλεπτα

○ “οι χρήστες φαίνεται να κοιτούν πολύ γρήγορα το σύνολο της πληροφορίας, πριν εκτελέσουν την επόμενη ενέργειά τους.”

Συνέπειες για το σχεδιασμό και την αντίληψή μας για την ευχρηστία;

19

* Weinreich et al, “Off the Beaten Tracks: Exploring Three Aspects of Web Navigation”, IW3C2 2006

Ταχύτητα πλοήγησης- χρόνος

παραμονής

Weinreich et al, “Off the Beaten Tracks: Exploring Three Aspects of Web Navigation”, IW3C2 2006

Ενδεικτική μορφή φυσικού

σχεδιασμού

http://www.schools.ac.cy/protypa_istoselidon.html

Στοιχεία δικτυακού τόπου Κεντρική σελίδα

Σελίδα με νέα (κάποια από αυτά μπορούν να υπάρχουν στην κεντρική σελίδα)

Σελίδα με βιβλιογραφία

Σελίδα με συχνές ερωτήσεις

Δυνατότητα αναζήτησης

Σελίδα με πληροφορίες για επικοινωνία

Διαμορφωμένα μηνύματα λαθών

Μενού, χάρτης δικτυακού τόπου

Γραφικά

Χαρακτηριστικά των χρησιμοποιούμενων γραφικών Ανάλογα με τις χρησιμοποιούμενες αναλύσεις

Κατάλληλη ευκρίνεια

Κατάλληλο ‘κόψιμο’ των γραφικών ώστε να απεικονίζουν τη χρήσιμη πληροφορίας

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

Κατάλληλος τύπος (png, gif, jpg), όχι bmp

Προσβασιμότητα (χρήση ALT tags για περιγραφή)

Καλύτερα

thumbnails Thumbnails

Αναπαριστούν εικόνες που είναι πολύ μεγάλες σε όγκο πληροφορίας

για να καταβιβαστούν απευθείας

Τεχνική

Σμίκρυνση (scaling) ή λωριδοποίηση (cropping) δεν είναι άμεσα

αποτελεσματικές πάντα (γιατί ;)

Πηγή: Nielsen, J. (1999) , “Designing Web Usability: The Practice of

Simplicity,” http://www.nngroup.com/books/designing-web-usability

Credits to: Nielsen, J.

Μικρογραφία με επαύξηση συνάφειας

(1/2) Πρώτα λωριδοποίηση και ακολούθως σμίκρυνση

π.χ., για thumbnail που είναι στο10% του πραγματικού

○ Λωριδοποίηση στο 32%

○ Μετά σμίκρυνση στο 32%

○ .32 * .32 = .10 του πραγματικού

Βέλτιστη ισορροπία λεπτομέρειας και πληροφορίας

εικόνας

Πηγή: Nielsen, J. (1999) , “Designing Web Usability: The Practice of

Simplicity,” http://www.nngroup.com/books/designing-web-usability

Credits to: Nielsen, J.

Μικρογραφία με επαύξηση συνάφειας

(2/2) Πρώτα λωριδοποίηση και ακολούθως σμίκρυνση

π.χ., για thumbnail που είναι στο10% του πραγματικού

○ Λωριδοποίηση στο 32%

○ Μετά σμίκρυνση στο 32%

○ .32 * .32 = .10 του πραγματικού

Βέλτιστη ισορροπία λεπτομέρειας και

πληροφορίας εικόνας

Πηγή: Nielsen, J. (1999) , “Designing Web Usability: The Practice of

Simplicity,” http://www.nngroup.com/books/designing-web-usability

Credits to: Nielsen, J.

Σχεδιασμός σελίδας

Οπτική ιεραρχία

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

Κατάλληλες γραμματοσειρές και μεγέθη (1 γραμματοσειρά)

Συνέπεια και συνέχεια (ενιαίο ύφος σε όλες τις σελίδες)

Πλάτος σελίδας / Μήκος σελίδας

Κατάλληλη διάταξη στο χώρο για καλύτερη παρουσίαση πληροφορίας

Χρήση κατανοητών τίτλων και περιγραφών υπερσυνδέσμων

Συμβατότητα με όλους τους φυλλομετρητές

Old Computinghome page

New Computinghome page

Παράδειγμα

Κριτήρια αξιολόγηση δ.τ.

σχολείουΑ. Διαφάνεια-Σαφήνεια-Συντηρησιμότητα

1. Υπάρχει εισαγωγικό σημείωμα στο οποίο να δηλώνονται με σαφήνεια οι στόχοι του δ.τ;

2. Υπάρχει συνέπεια των στόχων του δ.τ. με το περιεχόμενο;

3. Ο δ.τ. διαθέτει τρόπο επικοινωνίας (email, φόρμα επικοινωνίας) με τους υπεύθυνους διαχειριστές;

4. Αναφέρονται τίτλος σχολείου, ταχυδρομικά στοιχεία και στοιχεία επικοινωνίας του σχολείου (τηλ., φαξ κλπ.);

5. Οι συνδέσεις που παραπέμπουν σε άλλες ιστοσελίδες είναι: α) οργανωμένες σε ενότητες;

β) είναι σχετικές με την εκπαίδευση η τον πολιτισμό γενικότερα;

6. Το υλικό ανανεώνεται και ενημερώνεται τακτικά;

7. Δηλώνεται η τελευταία ενημέρωση του δικτυακού τόπου;

8. Περιλαμβάνεται πίνακας με τις τελευταίες προσθήκες περιεχομένου;

Κριτήρια αξιολόγηση δ.τ.

σχολείουΒ. Οργάνωση περιεχομένου

1. Σε ποιο βαθμό καλύπτεται/ονται επαρκώς το/τα θέμα/τα που αναπτύσσονται;

2. Περιέχει πληροφορίες και υλικό από δραστηριότητες , επισκέψεις και εργασίες των μαθητών ή/και των εκπαιδευτικών;

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

4. Είναι το περιεχόμενο απαλλαγμένο από εθνικά, φυλετικά ή άλλα στερεότυπα;

5. Αποφεύγονται τα γραμματικά ή συντακτικά λάθη;

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

7. Υπάρχουν πληροφορίες για την περιοχή και το ευρύτερο σχολικό περιβάλλον;

8. Προστατεύονται επαρκώς τα προσωπικά δεδομένα εκπαιδευτικών και μαθητών που εκτίθενται στο δικτυακό τόπο;

9. Διαθέτει ο λειτουργίες για την επικοινωνία μεταξύ των επισκεπτών (forum, chat ή blog) και κυρίως μεταξύ των μαθητών;

Κριτήρια αξιολόγηση δ.τ.

σχολείουΓ. Ευχρηστία (πλοήγηση / απεικόνιση / τεχνικά ζητήματα)

1. Είναι εύκολη για τον οποιοδήποτε χρήστη η πλοήγηση στις σελίδες;

2. Είναι ευκρινής και κατανοητή η οργάνωση του υλικού;

3. Όλοι οι δεσμοί είναι ενεργοί;

4. Οι σύνδεσμοι υπερκειμένου συνοδεύονται από περιγραφικούς τίτλους;

5. Η γραμματοσειρά που έχει επιλεγεί είναι ευκρινής;

6. Είναι η παρουσίαση ευχάριστη, ενδιαφέρουσα, σωστά δομημένη;

7. Παρέχονται μηχανισμοί που διευκολύνουν την πλοήγηση των χρηστών. Π.χ.: χάρτης δικτυακού τόπου, πίνακας περιεχομένων;

Κριτήρια αξιολόγηση δ.τ.

σχολείουΓ. Ευχρηστία (πλοήγηση / απεικόνιση / τεχνικά ζητήματα)

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

9. Η αρχική σελίδα του ιστοτόπου είναι διαθέσιμη από κάθε άλλη εσωτερική σελίδα του;

10. Οι σελίδες, που απαιτούν κύλιση περιέχουν ένα σύνδεσμο "Επιστροφή στην κορυφή";

11. Παρέχεται μηχανισμός αναζήτησης του υλικού μέσα στο δικτυακό τόπο;

12. Έχουν επιλεγεί σωστοί χρωματισμοί στις γραμματοσειρές, το φόντο και τα άλλα γραφικά στοιχεία των ιστοσελίδων;

13. Ο χρόνος εμφάνισης της παρουσίασης είναι ικανοποιητικός (δεν απαιτείται πολύς χρόνος για να κατέβουν οι σελίδες);

14. Δεν απαιτείται η χρήση εξειδικευμένου λογισμικού για να περιηγηθεί ο χρήστης στο δικτυακό τόπο

http://naousa08.ekped.gr/wp-content/uploads/2007/12/kritiria-web-awards-naousa08.doc

Krug: έλεγχος κορμού

Κοτάξτε μια σελίδα και προσπαθήστε να απαντήσετε:

Τι δικτυακός τόπος είναι αυτός; (ταυτότητα)

Σε ποια σελίδα βρίσκομαι; (όνομα σελίδας)

Ποια είναι τα βασικά τμήματα του δικτυακού τόπου;

Ποιες είναι οι επιλογές σε αυτό το επίπεδο (τοπικό επίπεδο);

Πόσο απέχω από το στόχο μου;

Πως μπορώ να ψάξω;

Δυϊσμός διαδικτύου: Software

interface + hypertext system

Οπτική απεικόνιση κειμένου, αντικείμενα σελίδας και πλοήγησης

Hypertext system

“look and feel”, διάταξη αντικειμένων, φυσικός σχεδιασμός

Software interface

Σχεδίαση αντικειμένων για υποβοήθηση της αλληλεπίδρασης με τις λειτουργίες

Σχεδίαση αντικειμένων για ευκολία μετάβασης στο πληροφοριακό χώρο

Σχεδίαση ροής εφαρμογής σύμφωνα με ανάλυση εργασιών

Καταγραφή απαιτούμενων λειτουργιών για την υποστήριξη του χρήστη

Ανάγκες χρήστη (εξωτερικές): Μέσω εθνογραφίας, έρευνες χρήσης κλπ

Δόμηση πληροφορίας για εύρεσή της με απρόσκοπτο τρόπο

Καταγραφή απαιτήσεων περιεχομένου

Στόχοι δικτυακού τόπου (εσωτερικοί): Επιχειρηματικοί, επικοινωνιακοί κλπ.

Information oriented –Παροχή περιεχομένου

Task oriented-Εκτέλεση εργασιών Πηγή: Jesse James Garrett, The Elements of User Experience, 2000,

http://www.jjg.net/elements/pdf/elements.pdf

Διαμόρφωση σχεδιασμού

Περιεχόμενο

Πλαίσιο χρήσης

Χρήστες

Τύπος/είδος περιεχομένου,

υπάρχουσα (επιθυμητή) δομή

περιεχομένου, μεταδεδομένα

(περιγραφή δεδομένων)

Οργανωτικοί στόχοι,

εργασιακές πρακτικές,

χρηματοδότηση, κουλτούρα,

τεχνολογίες, ανθρώπινοι

πόροι

Ομάδες χρηστών, εργασίες,

ανάγκες, εμπειρία, μέθοδοι

αναζήτησης πληροφορίας,

κατάλληλη ορολογία

Έρευνα για πλάτος-βάθος Breadth vs

Depth

Source: Zaphris & Mtei, "Depth vs Breadth in the Arrangement of Web Links," 1997

User's

Ranking

of

DifficultyAverage

access time

Mean #

of Errors

2x6, Breadth=2, Depth=6

4x3, Breadth=4, Depth=3

8x2, Breadth=8, Depth=2

4x1, 16x1 1st page Breadth=4, 2nd page=16

16x1, 4x1 1st page Breadth=16, 2nd page=4

Τι θα πρέπει να

αποφεύγουμε;

Μεγάλοι χρόνοι φόρτωσης

σελίδας 10 δευτερόλεπτα

Έχει αποδειχθεί σε πειράματα ψυχολογίας. Σε αντίθετη περίπτωση μη χάνεται ο ειρμός και το ενδιαφέρον

15 είναι οριακά αποδεκτά Οι χρήστες έχουν μάθει να περιμένουν Αλλά για σελίδες που έχουν μεγάλο ενδιαφέρον

Πρόβλημα ακόμα και σε μεγάλους επιχειρηματικούς δικτυακούς τόπους

Ο Παγκόσμιος Ιστός δεν γίνεται απαραίτητα ταχύτερος

Ξεπερασμένη πληροφορία

Χρειάζεται ένας ‘κηπουρός΄ που θα ανά-ταξινομεί το χρήσιμο υλικό και θα

συντηρεί τη τάξη στη πληροφορία

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

Σύνδεσμοι στο χρήσιμο υλικό ανανέωση συνδέσμων προς το νέο υλικό

Διαγραφή συνδέσμων προς το λιγότερο χρήσιμο

Μη στάνταρ χρώματα

υπερσυνδέσμων Σύνδεσμοι

Σε σελίδες που δεν έχουμε επισκεφτεί blue Όταν έχουμε πάει purple/red

Δεν θα πρέπει να καταστρέφεται αυτή η σύμβαση Από τα λίγα στάνταρ Η συνέπεια βοηθά στη γρήγορη εκμάθηση

○ Μην χρησιμοποείτε αλλού τα χρώματα αυτά!

Τι πρόβλημα υπάρχει με αυτή τη σύμβαση;

Έλλειψη στοιχείων πλοήγησης Οι χρήστες δεν ξέρουν πολλά για το δικτυακό τόπο

Πάντα δυσκολεύονται να βρουν τη χρήσιμη πληροφορία

Να δίνεται ισχυρή αίσθηση της δομής

Να επικοινωνείται σωστά η δομή Χάρτη δικτυακού τόπου (site map)

○ Για να ξέρουν που να πάνε οι χρήστες

Εργαλεία αναζήτησης

○ Για πολλούς ο πιο χρήσιμος τρόπος

Μεγάλες κυλιόμενες σελίδες

Μόνο 10% των χρηστών επιχειρούν κύλιση πέρα από το πάνω μέρος της σελίδας

Το κρίσιμο περιεχόμενο πρέπει να είναι στο πάνω μέρος

Σε πολύ ενδιαφέρον περιεχόμενο επιτρέπεται εξαίρεση Οι ενδιαφερόμενοι θα το διαβάσουν

Καλό να είναι συνοπτικό και πάλι

Λάθη;

Λάθη;

Ορφανές σελίδες

Όλες οι σελίδες πρέπει να φαίνεται που ανήκουν Οι χρήστες συχνά δεν επισκέπτονται πρώτα τη

κεντρική σελίδα

Κάθε σελίδα πρέπει να έχει Σύνδεσμο στην αρχική σελίδα

Ένδειξη για το που ανήκουν σε σχέση με τη δομή του πληροφοριακού χώρου

Breadcrumbs (Κεντρική->Κατηγορία->Σελίδα)

Λάθη;

Περίπλοκα URLs Εξακολουθεί να είναι πιο ‘φιλικό΄ προς τη μηχανή

http://www.contra.gr/Column.aspx?ColID=9&ExtraID=1149 Οι χρήστες προσπαθούν να το αποκωδικοποιήσουν

Για να αντιληφθούν τη δομή ενός του δικτυακό τόπου

Τα URL θα πρέπει να είναι κατανοητά Θα πρέπει να δίνουν πληροφορία για τη δομή

Μερικές φορές πρέπει να το γράψουμε το URL->○ Πεζά γράμματα, σύντομα χωρίς ειδικούς χαρακτήρες π.χ. ~

Κινούμενα γραφικά (Animations)

Όχι συνεχώς κινούμενα γραφικά και κείμενο

Επηρεάζει τη περιφερειακή όραση και το γνωστικό μηχανισμό της προσοχής

○ όχι animation, κινούμενο κείμενο κλπ

Δώστε ησυχία στους χρήστες ώστε να διαβάσουν το κείμενο!

<BLINK> είναι καταστροφικό!

Λάθη;

Υπερβολική χρήση τεχνολογίας

Μην προσπαθείτε να παρασύρετε έτσι χρήστες

Θα αρέσει στους ‘νερντ’ αλλά όχι στους χρήστες που

ενδιαφέρονται για το περιεχόμενο

Αν κολλήσει το σύστημα τους

Δεν θα επιστρέψουν πάλι στη σελίδα σας!

Ευχρηστία: Ορισμός “Ευχρηστία: ο βαθμός στον οποίο ένα σύστημα μπορεί να

χρησιμοποιηθεί από συγκεκριμένους χρήστες για να επιτύχουν συγκεκριμένους σκοπούς με αποτελεσματικότητα, αποδοτικότητα και υποκειμενική ικανοποίηση, σε δοθέν πλαίσιο χρήσης.” [ISO 9241]

Πηγή: Usability engineering. By Simpson, J., from the cover

of IEEE Computer, March 1992

Παράγοντες που καθορίζουν

την ευχρηστία ενός δικτυακού

τόπου Ο χρόνος απόκρισης (μεταφόρτωση σελίδας) για ένα δικτυακό

τόπο/σελίδα ○ rule of thumb: αν χρειαστεί πάνω από 10 δευτερόλεπτα ο χρήστης έχει

φύγει

Η δόμηση ενός δικτυακού τόπου ○ μπορώ να βρω εύκολα αυτό που ψάχνω;

Το σύστημα πλοήγησης που χρησιμοποιείται για ένα δικτυακό τόπο○ οι σύνδεσμοι και το μενού πλοήγησης έχουν κατάλληλες και

κατανοητές περιγραφές;

Το περιεχόμενο ενός δικτυακού τόπου○ Είναι επίκαιρο;

○ Υποστηρίζει τους πληροφοριακούς στόχους του χρήστη;

○ Παρέχεται με κατάλληλη και κατανοητή γλώσσα;

Στοιχεία ευχρηστίας1. Ευκολία εκμάθησης: για αρχάριους χρήστες2. Αποδοτικότητα: ρυθμός εκτέλεσης εργασιών για

πεπειραμένους χρήστες3. Διατηρησιμότητα ικανότητας χρήσης: ευκολία στην

περιστασιακή χρήση4. Αριθμός λαθών: συχνότητα απλών και σοβαρών

σφαλμάτων5. Υποκειμενική ικανοποίηση: Ευχαρίστηση χρήσης

λόγω αίσθησης προόδου στο στόχο μας

Δομή δικτυακού τόπου

Είναι η διαδικασία δόμησης της πληροφορίας του web site σε επιμέρους σελίδες με τρόπο που να υποστηρίζει τους στόχους και τη πλοήγηση των χρηστών

Λόγοι• Φτωχή δόμηση=φτωχή ευχρηστία ανεξαρτήτως του συστήματος πλοήγησης• Η δόμηση πληροφορίας διαφέρει από το απλό χαρτί• Οι χρήστες δεν θέλουν να διατρέχουν μεγάλες σελίδες για να βρουν αυτό που θέλουν• Για να υποστηρίξουν τη μελλοντική ανάπτυξη του δικτυακού τόπου

Δεν θα πρέπει να απεικονίζει τη δομή μιας εταιρίας αλλά τους στόχους των χρηστών

Οδηγός για δημιουργία

ιστοσελίδων σχολείων Από Υπ. Παιδείας Κύπρου, διαθέσιμος στο

http://www.sch.gr/96-announces/2175-2012-01-09-10-17-34

Βοηθήματα στo

http://www.schools.ac.cy/istoselides_voithimata.html

Παράδειγμα

http://nip-lemesos7-lem.schools.ac.cy/

Κριτήρια αξιολόγησης

http://naousa08.ekped.gr/wp-content/uploads/2007/12/kritiria-web-awards-naousa08.doc