Εισαγωγή στην προβληματική του σχεδιασμού δικτυακών τόπων

1. Βασικές αρχές σχεδιασμού δικτυακών
τόπων
Νικόλαος Τσέλιος
Τμήμα Επιστημών της
Εκπαίδευσης και της Αγωγής στην Προσχολική Ηλικία
tselios.weebly.com
Twitter @nitse1

2. Σχεδιασμός δικτυακών
τόπων
 Δικτυακός τόπος: Ένα σύνολο από συσχετιζόμενες ιστοσελίδες
με συγκεκριμένη δόμηση περιεχομένου
 O αποτελεσματικός σχεδιασμός ενός δικτυακού τόπου εξαρτάται
από 2 παράγοντες:
 Σχεδιασμό σε επίπεδο δομής δικτυακού τόπου/
○ Κυρίαρχη έννοια η ευχρηστία (usability)
 Σχεδιασμό σε επίπεδο σελίδας /
○ Πρακτικά ο σχεδιασμός όλων των σελίδων θα πρέπει να είναι ο ίδιος!
○ Εισέρχεται και το ζήτημα της αισθητικής (aesthetics- visual
attractiveness)

3. Πλάνο δημιουργίας δικτυακού τόπου
(1/2)
1. Χρήστες, Βασικά στοιχεία. Αποφασίστε σε ποιους απευθύνεται και τι
θέλετε να περιλαμβάνει ο δικτυακός τόπος. Ποιους στόχους θα υποστηρίζει;
2. Περιεχόμενο. Συγκεντρώστε σε ηλεκτρονική μορφή τις πληροφορίες που
θα συμπεριλάβετε στο δικτυακό τόπο
 αρχεία κειμένων, εικόνες, λίστες εξωτερικών συνδέσμων, καθώς και τη λίστα των πηγών σας για καθεμία από αυτές
3. Δομή. Ανάλογα με το μέγεθος που υπολογίζετε να έχει ο δικτυακός τόπος,
αποφασίστε ποια θα είναι η δομή του και οι τρόποι πλοήγησης σε αυτόν
4. Χάρτης πλοήγησης και σχέδιο σελίδας. Δημιουργήστε στο χαρτί ένα
σκαρίφημα με
 το χάρτη πλοήγησης του δικτυακού τόπου καθώς και
 του φυσικού σχεδιασμού
○ Λάβετε υπόψη σας το μέγεθος των κειμένων που πρόκειται να ενσωματωθούν ως απλές ιστοσελίδες
○ Αν απαιτείται, δημιουργήστε για καθένα απ' αυτά περισσότερες από μία, αντί να υποχρεώνετε το
χρήστη να διαβάζει μακροσκελείς σελίδες

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. Δόμηση δικτυακού τόπου
5
 Ο τρόπος δόμησης της πληροφορίας επηρεάζει
σημαντικά την ευχρηστία
 Η δόμηση είναι σημαντική καθώς το ζητούμενο σε ένα
δικτυακό τόπο είναι η πληροφορία
 Πρακτικά αναφερόμαστε στην κατηγοριοποίηση της
πληροφορίας
 Κατηγοριοποίηση:
○ Παρέχοντας πληροφοριακά μονοπάτια (με
υπερσυνδέσμους / hyperlinks)
○ Το πρόβλημα είναι ότι οι συσχετίσεις είναι εγγενώς
υποκειμενικές

6. Παράδειγμα δόμησης
6
 Οργανώστε σημασιολογικά τις παρακάτω λέξεις σε
κατηγορίες:
 refrigerator
 socks
 bureau
 living room
 dictionary
 kitchen
 milk
 bookshelf
 bedroom

7. Δυνατότητες
κατηγοριοποίησης
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

8. Οργανωτική δομή-
Ιεραρχία
 Οι σελίδες οργανώνονται σε μια
δενδροειδή σχέση
 Οι περισσότεροι δικτυακοί τόποι
χαρακτηρίζονται από μια ιεραρχία

9. Γραμμική οργάνωση
 Σελίδες σε μια ακολουθία
 Οδηγοί, έλεγχοι πληρωμών και κωδικών, κλπ

10. Ακτινωτή
 Από μια κεντρική σελίδα υπάρχει ακτινωτή
διασύνδεση με τις επιμέρους σελίδες.
 Προέκταση της γραμμικής

11. Πλέγμα Web
 Πολλές σελίδες αλληλοσυνδέονται χωρίς επίπεδα ή
ακολουθία
 Κάθε σελίδα υπόκειται στην ακτινωτή δομή-hub and
spoke
 πχ Facebook

12. Σχεδιασμός ιεραρχίας
 Προσπαθούμε να ισορροπήσουμε μεταξύ πλάτους και
βάθους
 Οι χρήστες δεν θέλουν να ‘κατεβαίνουν’ σε μεγάλο
βάθος για να βρουν ένα αντικείμενο, ούτε να διαβάζουν
πολλές επιλογές.
 Το ερώτημα είναι, ποιά είναι η σωστή ισορροπία;
πλάτος
βάθος

13. Η επιτυχία εδράζεται στο πόσο καλά αντανακλά τις προσδοκίες
των χρηστών
Δομή δικτυακού τόπου
Πηγή: Nielsen, J. (1999) , “Designing Web Usability: The Practice of
Simplicity,” http://www.nngroup.com/books/designing-web-usability
Credits to: Nielsen, J.

14. Στατιστική απεικόνιση συμπεριφοράς
χρηστών σε ένα δικτυακό τόπο
 Οι χρήστες εισέρχονται σε ένα δικτυακό τόπο
 Αναζητούν πληροφορία μέχρι το προσδοκώμενο όφελος να πέσει κάτω από ένα όριο
(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.

15. Συμβάσεις πλοήγησης
Global
Loc
al
Global
Local
Glob
al
Local
Ανάποδο-L Οριζόντιο Εμφωλιασμένο κάθετο
Τυπική χωροταξία των στοιχείων πλοήγησης
Kalbach, Designing Web Navigation (O’Reilly, 2007)

16. • Λόγω της υπερβολικής πληροφορίας, το δίκτυο μπορεί να ειδωθεί ως
σύστημα πλοήγησης και ανάκτησης πληροφορίας
• Συνεπώς το σύστημα πλοήγησης βοηθά τους χρήστες να αντιληφθούν τη
δομή και την οργάνωση της πληροφορίας
• Ανά πάσα στιγμή πρέπει να βοηθά τρία ερωτήματα:
• Που είμαι;
• logo, σχετική αναφορά δομής
• Πού ήμουν;
• Δεν υποστηρίζεται επαρκώς, μόνο back, ιστορία φυλλομέτρησης,
αλλαγή χρώματος συνδέσμου που έχω επισκεφτεί.
• Που μπορώ να πάω;
• Σύστημα πλοήγησης
Δομή δικτυακού τόπου

17. Λάθη;

18. Κόστος μη καταληπτής πληροφοριακής
‘μυρωδιάς’
 Έστω δικτυακός τόπος με βάθος
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.

19. Άλλες συμπεριφορές
πλοήγησης
 Ταχύτητα πλοήγησης*
 25% όλων των σελίδων απεικονίζονται για λιγότερο
από 4 δευτερόλεπτα
 52% για λιγότερο από 10 δευτερόλεπτα
○ “οι χρήστες φαίνεται να κοιτούν πολύ γρήγορα το
σύνολο της πληροφορίας, πριν εκτελέσουν την
επόμενη ενέργειά τους.”
 Συνέπειες για το σχεδιασμό και την αντίληψή μας για
την ευχρηστία;
19
* Weinreich et al, “Off the Beaten Tracks: Exploring Three Aspects of Web Navigation”, IW3C2 2006

20. Ταχύτητα πλοήγησης- χρόνος
παραμονής
Weinreich et al, “Off the Beaten Tracks: Exploring Three Aspects of Web Navigation”, IW3C2 2006

21. Ενδεικτική μορφή φυσικού
σχεδιασμού
 http://www.schools.ac.cy/protypa_istoselidon.html

22. Στοιχεία δικτυακού τόπου
 Κεντρική σελίδα
 Σελίδα με νέα (κάποια από αυτά μπορούν να υπάρχουν στην
κεντρική σελίδα)
 Σελίδα με βιβλιογραφία
 Σελίδα με συχνές ερωτήσεις
 Δυνατότητα αναζήτησης
 Σελίδα με πληροφορίες για επικοινωνία
 Διαμορφωμένα μηνύματα λαθών
 Μενού, χάρτης δικτυακού τόπου

23. Γραφικά
 Χαρακτηριστικά των χρησιμοποιούμενων γραφικών
 Ανάλογα με τις χρησιμοποιούμενες αναλύσεις
 Κατάλληλη ευκρίνεια
 Κατάλληλο ‘κόψιμο’ των γραφικών ώστε να απεικονίζουν τη
χρήσιμη πληροφορίας
 Κατάλληλο μέγεθος ώστε να μην επιβαρύνουν σημαντικά το
χρόνο φόρτωσης μιας ιστοσελίδας
 Κατάλληλος τύπος (png, gif, jpg), όχι bmp
 Προσβασιμότητα (χρήση ALT tags για περιγραφή)

24. Καλύτερα
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.

25. Μικρογραφία με επαύξηση συνάφειας
(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.

26. Μικρογραφία με επαύξηση συνάφειας
(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.

27. Σχεδιασμός σελίδας
 Οπτική ιεραρχία
 Χρήση λευκών χώρων για κατάλληλη ομαδοποίηση
πληροφορίας
 Κατάλληλες γραμματοσειρές και μεγέθη (1 γραμματοσειρά)
 Συνέπεια και συνέχεια (ενιαίο ύφος σε όλες τις σελίδες)
 Πλάτος σελίδας / Μήκος σελίδας
 Κατάλληλη διάταξη στο χώρο για καλύτερη παρουσίαση
πληροφορίας
 Χρήση κατανοητών τίτλων και περιγραφών υπερσυνδέσμων
 Συμβατότητα με όλους τους φυλλομετρητές

28. Old Computing
home page
New Computing
home page
Παράδειγμα

29. Κριτήρια αξιολόγηση δ.τ.
σχολείουΑ. Διαφάνεια-Σαφήνεια-Συντηρησιμότητα
1. Υπάρχει εισαγωγικό σημείωμα στο οποίο να δηλώνονται με σαφήνεια οι στόχοι
του δ.τ;
2. Υπάρχει συνέπεια των στόχων του δ.τ. με το περιεχόμενο;
3. Ο δ.τ. διαθέτει τρόπο επικοινωνίας (email, φόρμα επικοινωνίας) με τους
υπεύθυνους διαχειριστές;
4. Αναφέρονται τίτλος σχολείου, ταχυδρομικά στοιχεία και στοιχεία επικοινωνίας του
σχολείου (τηλ., φαξ κλπ.);
5. Οι συνδέσεις που παραπέμπουν σε άλλες ιστοσελίδες είναι:
α) οργανωμένες σε ενότητες;
β) είναι σχετικές με την εκπαίδευση η τον πολιτισμό γενικότερα;
6. Το υλικό ανανεώνεται και ενημερώνεται τακτικά;
7. Δηλώνεται η τελευταία ενημέρωση του δικτυακού τόπου;
8. Περιλαμβάνεται πίνακας με τις τελευταίες προσθήκες περιεχομένου;

30. Κριτήρια αξιολόγηση δ.τ.
σχολείουΒ. Οργάνωση περιεχομένου
1. Σε ποιο βαθμό καλύπτεται/ονται επαρκώς το/τα θέμα/τα που αναπτύσσονται;
2. Περιέχει πληροφορίες και υλικό από δραστηριότητες , επισκέψεις και εργασίες των μαθητών
ή/και των εκπαιδευτικών;
3. Υπάρχει τεκμηρίωση για τις θέσεις που διατυπώνονται και το υλικό που παρέχεται (πηγές,
πρωτογενές υλικό, παραπομπές, βιβλιογραφικές αναφορές) σε σχέση με το επίπεδο των
μαθητών;
4. Είναι το περιεχόμενο απαλλαγμένο από εθνικά, φυλετικά ή άλλα στερεότυπα;
5. Αποφεύγονται τα γραμματικά ή συντακτικά λάθη;
6. Είναι κατάλληλη η γλώσσα που χρησιμοποιείται για το θέμα, την ηλικία και το γνωστικό
επίπεδο των χρηστών στους οποίους απευθύνεται;
7. Υπάρχουν πληροφορίες για την περιοχή και το ευρύτερο σχολικό περιβάλλον;
8. Προστατεύονται επαρκώς τα προσωπικά δεδομένα εκπαιδευτικών και μαθητών που
εκτίθενται στο δικτυακό τόπο;
9. Διαθέτει ο λειτουργίες για την επικοινωνία μεταξύ των επισκεπτών (forum, chat ή blog) και
κυρίως μεταξύ των μαθητών;

31. Κριτήρια αξιολόγηση δ.τ.
σχολείου
Γ. Ευχρηστία (πλοήγηση / απεικόνιση / τεχνικά ζητήματα)
1. Είναι εύκολη για τον οποιοδήποτε χρήστη η πλοήγηση στις σελίδες;
2. Είναι ευκρινής και κατανοητή η οργάνωση του υλικού;
3. Όλοι οι δεσμοί είναι ενεργοί;
4. Οι σύνδεσμοι υπερκειμένου συνοδεύονται από περιγραφικούς
τίτλους;
5. Η γραμματοσειρά που έχει επιλεγεί είναι ευκρινής;
6. Είναι η παρουσίαση ευχάριστη, ενδιαφέρουσα, σωστά δομημένη;
7. Παρέχονται μηχανισμοί που διευκολύνουν την πλοήγηση των
χρηστών. Π.χ.: χάρτης δικτυακού τόπου, πίνακας περιεχομένων;

32. Κριτήρια αξιολόγηση δ.τ.
σχολείουΓ. Ευχρηστία (πλοήγηση / απεικόνιση / τεχνικά ζητήματα)
8. Οι βασικοί σύνδεσμοι του δικτυακού τόπου βρίσκονται σε ένα σταθερό μέρος
ξεχωριστά από το καθαρό περιεχόμενο και είναι ορατοί στην οθόνη του
υπολογιστή χωρίς να απαιτείται κύλιση;
9. Η αρχική σελίδα του ιστοτόπου είναι διαθέσιμη από κάθε άλλη εσωτερική σελίδα
του;
10. Οι σελίδες, που απαιτούν κύλιση περιέχουν ένα σύνδεσμο "Επιστροφή στην
κορυφή";
11. Παρέχεται μηχανισμός αναζήτησης του υλικού μέσα στο δικτυακό τόπο;
12. Έχουν επιλεγεί σωστοί χρωματισμοί στις γραμματοσειρές, το φόντο και τα άλλα
γραφικά στοιχεία των ιστοσελίδων;
13. Ο χρόνος εμφάνισης της παρουσίασης είναι ικανοποιητικός (δεν απαιτείται πολύς
χρόνος για να κατέβουν οι σελίδες);
14. Δεν απαιτείται η χρήση εξειδικευμένου λογισμικού για να περιηγηθεί ο χρήστης
στο δικτυακό τόπο
http://naousa08.ekped.gr/wp-content/uploads/2007/12/kritiria-web-awards-naousa08.doc

33. Krug: έλεγχος κορμού
 Κοτάξτε μια σελίδα και προσπαθήστε να απαντήσετε:
 Τι δικτυακός τόπος είναι αυτός; (ταυτότητα)
 Σε ποια σελίδα βρίσκομαι; (όνομα σελίδας)
 Ποια είναι τα βασικά τμήματα του δικτυακού τόπου;
 Ποιες είναι οι επιλογές σε αυτό το επίπεδο (τοπικό επίπεδο);
 Πόσο απέχω από το στόχο μου;
 Πως μπορώ να ψάξω;

34. Δυϊσμός διαδικτύου: 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

35. Διαμόρφωση σχεδιασμού
Περιεχόμενο
Πλαίσιο χρήσης
Χρήστες
Τύπος/είδος περιεχομένου,
υπάρχουσα (επιθυμητή) δομή
περιεχομένου, μεταδεδομένα
(περιγραφή δεδομένων)
Οργανωτικοί στόχοι,
εργασιακές πρακτικές,
χρηματοδότηση, κουλτούρα,
τεχνολογίες, ανθρώπινοι
πόροι
Ομάδες χρηστών, εργασίες,
ανάγκες, εμπειρία, μέθοδοι
αναζήτησης πληροφορίας,
κατάλληλη ορολογία

36. Έρευνα για πλάτος-βάθος Breadth vs
Depth
Source: Zaphris & Mtei, "Depth vs Breadth in the Arrangement of Web Links," 1997
User's
Ranking
of
Difficulty
Average
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

37. Τι θα πρέπει να
αποφεύγουμε;

38. Μεγάλοι χρόνοι φόρτωσης
σελίδας
 10 δευτερόλεπτα
 Έχει αποδειχθεί σε πειράματα ψυχολογίας. Σε αντίθετη
περίπτωση μη χάνεται ο ειρμός και το ενδιαφέρον
 15 είναι οριακά αποδεκτά
 Οι χρήστες έχουν μάθει να περιμένουν
 Αλλά για σελίδες που έχουν μεγάλο ενδιαφέρον
 Πρόβλημα ακόμα και σε μεγάλους επιχειρηματικούς
δικτυακούς τόπους
 Ο Παγκόσμιος Ιστός δεν γίνεται απαραίτητα
ταχύτερος

39. Ξεπερασμένη πληροφορία
 Χρειάζεται ένας ‘κηπουρός΄
 που θα ανά-ταξινομεί το χρήσιμο υλικό και θα
συντηρεί τη τάξη στη πληροφορία
 Οι περισσότεροι δίνουν έμφαση στη δημιουργία
υλικού και όχι στη συντήρηση
 Σύνδεσμοι στο χρήσιμο υλικό
 ανανέωση συνδέσμων προς το νέο υλικό
 Διαγραφή συνδέσμων προς το λιγότερο χρήσιμο

40. Μη στάνταρ χρώματα
υπερσυνδέσμων
 Σύνδεσμοι
 Σε σελίδες που δεν έχουμε επισκεφτεί blue
 Όταν έχουμε πάει purple/red
 Δεν θα πρέπει να καταστρέφεται αυτή η
σύμβαση
 Από τα λίγα στάνταρ
 Η συνέπεια βοηθά στη γρήγορη εκμάθηση
○ Μην χρησιμοποείτε αλλού τα χρώματα αυτά!
 Τι πρόβλημα υπάρχει με αυτή τη σύμβαση;

41. Έλλειψη στοιχείων πλοήγησης
 Οι χρήστες δεν ξέρουν πολλά για το δικτυακό τόπο
 Πάντα δυσκολεύονται να βρουν τη χρήσιμη πληροφορία
 Να δίνεται ισχυρή αίσθηση της δομής
 Να επικοινωνείται σωστά η δομή
 Χάρτη δικτυακού τόπου (site map)
○ Για να ξέρουν που να πάνε οι χρήστες
 Εργαλεία αναζήτησης
○ Για πολλούς ο πιο χρήσιμος τρόπος

42. Μεγάλες κυλιόμενες σελίδες
 Μόνο 10% των χρηστών επιχειρούν κύλιση
πέρα από το πάνω μέρος της σελίδας
 Το κρίσιμο περιεχόμενο πρέπει να είναι στο
πάνω μέρος
 Σε πολύ ενδιαφέρον περιεχόμενο επιτρέπεται
εξαίρεση
 Οι ενδιαφερόμενοι θα το διαβάσουν
 Καλό να είναι συνοπτικό και πάλι

43. Λάθη;

44. Λάθη;

45. Ορφανές σελίδες
 Όλες οι σελίδες πρέπει να φαίνεται που
ανήκουν
 Οι χρήστες συχνά δεν επισκέπτονται πρώτα τη
κεντρική σελίδα
 Κάθε σελίδα πρέπει να έχει
 Σύνδεσμο στην αρχική σελίδα
 Ένδειξη για το που ανήκουν σε σχέση με τη δομή
του πληροφοριακού χώρου
 Breadcrumbs (Κεντρική->Κατηγορία->Σελίδα)

46. Λάθη;

47. Περίπλοκα URLs
 Εξακολουθεί να είναι πιο ‘φιλικό΄ προς τη μηχανή
 http://www.contra.gr/Column.aspx?ColID=9&ExtraID=1149
 Οι χρήστες προσπαθούν να το αποκωδικοποιήσουν
 Για να αντιληφθούν τη δομή ενός του δικτυακό τόπου
 Τα URL θα πρέπει να είναι κατανοητά
 Θα πρέπει να δίνουν πληροφορία για τη δομή
 Μερικές φορές πρέπει να το γράψουμε το URL->
○ Πεζά γράμματα, σύντομα χωρίς ειδικούς χαρακτήρες π.χ. ~

48. Κινούμενα γραφικά (Animations)
 Όχι συνεχώς κινούμενα γραφικά και κείμενο
 Επηρεάζει τη περιφερειακή όραση και το
γνωστικό μηχανισμό της προσοχής
○  όχι animation, κινούμενο κείμενο κλπ
 Δώστε ησυχία στους χρήστες ώστε να
διαβάσουν το κείμενο!
 <BLINK> είναι καταστροφικό!

49. Λάθη;

50. Υπερβολική χρήση τεχνολογίας
 Μην προσπαθείτε να παρασύρετε έτσι χρήστες
 Θα αρέσει στους ‘νερντ’ αλλά όχι στους χρήστες που
ενδιαφέρονται για το περιεχόμενο
 Αν κολλήσει το σύστημα τους
 Δεν θα επιστρέψουν πάλι στη σελίδα σας!

51. Ευχρηστία: Ορισμός
 “Ευχρηστία: ο βαθμός στον οποίο ένα σύστημα μπορεί να
χρησιμοποιηθεί από συγκεκριμένους χρήστες για να επιτύχουν
συγκεκριμένους σκοπούς με αποτελεσματικότητα, αποδοτικότητα και
υποκειμενική ικανοποίηση, σε δοθέν πλαίσιο χρήσης.” [ISO 9241]
Πηγή: Usability engineering. By Simpson, J., from the cover
of IEEE Computer, March 1992

52. Παράγοντες που καθορίζουν
την ευχρηστία ενός δικτυακού
τόπου Ο χρόνος απόκρισης (μεταφόρτωση σελίδας) για ένα δικτυακό
τόπο/σελίδα
○ rule of thumb: αν χρειαστεί πάνω από 10 δευτερόλεπτα ο χρήστης έχει
φύγει
 Η δόμηση ενός δικτυακού τόπου
○ μπορώ να βρω εύκολα αυτό που ψάχνω;
 Το σύστημα πλοήγησης που χρησιμοποιείται για ένα δικτυακό τόπο
○ οι σύνδεσμοι και το μενού πλοήγησης έχουν κατάλληλες και
κατανοητές περιγραφές;
 Το περιεχόμενο ενός δικτυακού τόπου
○ Είναι επίκαιρο;
○ Υποστηρίζει τους πληροφοριακούς στόχους του χρήστη;
○ Παρέχεται με κατάλληλη και κατανοητή γλώσσα;

53. Στοιχεία ευχρηστίας
1. Ευκολία εκμάθησης: για αρχάριους χρήστες
2. Αποδοτικότητα: ρυθμός εκτέλεσης εργασιών για
πεπειραμένους χρήστες
3. Διατηρησιμότητα ικανότητας χρήσης: ευκολία στην
περιστασιακή χρήση
4. Αριθμός λαθών: συχνότητα απλών και σοβαρών
σφαλμάτων
5. Υποκειμενική ικανοποίηση: Ευχαρίστηση χρήσης
λόγω αίσθησης προόδου στο στόχο μας

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

55. Οδηγός για δημιουργία
ιστοσελίδων σχολείων
 Από Υπ. Παιδείας Κύπρου, διαθέσιμος στο
 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
