ΣΧΕ ΙΑΣΗ ΠΕΡΙΒΑΛΛΟΝΤΟΣ ΙΕΠΑΦΗΣ ΜΕ ΤΟ ΧΡΗΣΤΗ ΣΧΕ ΙΑΣΜΟΣ ΙΕΠΙΦΑΝΕΙΩΝ ΙΑ ΙΚΤΥΟΥ ΤΜΗΜΑ ΠΟΛΙΤΙΣΜΙΚΗΣ ΤΕΧΝΟΛΟΓΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ



Σχετικά έγγραφα
οδηγίες σχεδίασης Web εφαρμογών. Να παρουσιαστούν μέσω παραδειγμάτων καλές και άσχημες πρακτικές σχεδίασης. Στόχος του Μαθήματος

Πολιτιστικοί οργανισµοί

Βασικές Αρχές Σχεδιασµού Συστήµατος ιεπιφάνειας - Πλοήγηση

Τα κύρια χαρακτηριστικά που καθιστούν τον δικτυακό κόµβο «καλή πρακτική», σε σχέση µε τις επιλεγµένες περιοχές είναι:

Μέρος Α : Σύντομη εισαγωγή στο σχεδιασμό διεπιφανειών

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

Γαβαλάς Δαμιανός

Τα κύρια χαρακτηριστικά που καθιστούν τον δικτυακό κόµβο «καλή πρακτική», σε σχέση µε τις επιλεγµένες περιοχές είναι:

Δικτυακοί τόποι. Η σχεδίαση ενός δικτυακού τόπου. Δρ. Ματθαίος Α. Πατρινόπουλος

Εισαγωγή στην Επιστήμη του Ιστού

Ηλεκτρονικά Καταστήµατα. Νικόλαος Πρωτόγερος Πανεπιστήµιο Μακεδονίας

ΑΛΛΗΛΕΠΙΔΡΑΣΗ ΑΝΘΡΩΠΟΥ - ΥΠΟΛΟΓΙΣΤΗ. Διδάσκων: Κωνσταντίνος Στεφανίδης

ΕΓΧΕΙΡΙΔΙΟ ΟΡΘΩΝ ΠΡΑΚΤΙΚΩΝ ΠΑΡΟΥΣΙΑ ΣΤΟΝ ΠΑΓΚΟΣΜΙΟ ΙΣΤΟ ΤΕΧΝΟΛΟΓΙΚΟ ΕΚΠΑΙΔΕΥΤΙΚΟ ΙΔΡΥΜΑ ΜΕΣΟΛΟΓΓΙΟΥ

Στρατηγικό Σχέδιο Για τη Βιώσιµη Ανάπτυξη της Θεσσαλονίκης (ΣΣΒΑΘ) 1 η Ενδιάµεση Έκθεση 3. ηµιουργία και Λειτουργία Web site

Συνοπτικός Οδηγός Χρήσης του Moodle για τον Καθηγητή

ΣΧΕ ΙΑΣΗ ΠΕΡΙΒΑΛΛΟΝΤΟΣ ΙΕΠΑΦΗΣ ΜΕ ΤΟ ΧΡΗΣΤΗ. ΑΞΙΟΛΟΓΗΣΗ ΕΥΧΡΗΣΤΙΑΣ ΙΚΤΥΑΚΩΝ ΤΟΠΩΝ ΜΟΥΣΕΙΩΝ ΜΕ ΤΗ ΜΕΘΟ Ο MiLE

ΕΡΓΑΣΙΑ. (στο μάθημα: Τεχνολογίες Εφαρμογών Διαδικτύου του Η εξαμήνου σπουδών του Τμήματος Πληροφορικής & Τηλ/νιών)

Αξιολόγηση του ικτιακού Τόπου της Εθνικής Στατιστικής Υπηρεσίας. ρ Σπύρος Συρµακέσης. by hci.gr

Μεγάλη Μουσική Βιβλιοθήκη της Ελλάδας - Λίλιαν Βουδούρη. Μεγάλη Μουσική Βιβλιοθήκη της Ελλάδας

12.1. Προσδοκώμενα αποτελέσματα

Συγκεντρωτικό Παράρτημα

Αρχές Δημιουργίας Εκπαιδευτικού ΙΣΤΟΤΟΠΟΥ βάσει του σχετικού εργαλείου αξιολόγησης του «διαγωνισμού ελληνόφωνων εκπαιδευτικών ιστοτόπων»

Πρόσβαση στην NetLibrary.

Ηλεκτρονικό Κατάστημα

The state Hermitage Museum

Αξιολόγηση Ιστοσελίδων. Εργασία. Χαράλαμπος Κουτσουρελάκης

ιπλωµατική εργασία: Νικόλαος Ματάνας Επιβλέπων Καθηγήτρια: Μπούσιου έσποινα

Συνοπτικός οδηγός χρήσης της πλατφόρμας ασύγχρονης τηλεεκπαίδευσης. Καθηγητή

Ανοικτά Ακαδηµα κά Μαθήµατα

Εργαλεία Ανάπτυξης Εφαρμογών Internet I

Τα κύρια χαρακτηριστικά που καθιστούν τον δικτυακό κόµβο «καλή πρακτική», σε σχέση µε τις επιλεγµένες περιοχές είναι:

χρήστες και υπηρεσίες

Microsoft Excel Κεφάλαιο 1. Εισαγωγή. Βιβλίο εργασίας

ΕΑΠ-ΓΤΠ61/Α2. Παππά Θεοδώρα 9/12/2007

ΕΡΓΑΣΤΗΡΙΟ FRONT PAGE 2

ΔΙΑΚΗΡΥΞΗ ΔΗΜΟΠΡΑΣΙΑΣ ΜΕ ΑΡΙΘΜΟ ΔΔ-...

Δ.Π.Μ.Σ. στη Διοίκηση Επιχειρήσεων για Στελέχη Επιχειρήσεων. Υπεύθυνος : Οικονομίδης Αναστάσιος. Ψωμαδοπούλου Χρυσοβαλάντου (06/33)

ΥΠΗΡΕΣΙΑ. Ηλεκτρονική ιαχείριση Τάξης. Οδηγίες χρήσης για τον µαθητή.

ΘΕΜΑ: Πρόσκληση εκδήλωσης ενδιαφέροντος για την παροχή υπηρεσιών με τίτλο «Σχεδιασμός λογοτύπου και σχεδιασμός και κατασκευή δυναμικής ιστοσελίδας»

Εργαλεία ανάπτυξης εφαρμογών internet Ι

ΣΧΕ ΙΑΣΗ ΠΕΡΙΒΑΛΛΟΝΤΟΣ ΙΕΠΑΦΗΣ ΜΕ ΤΟ ΧΡΗΣΤΗ ΒΑΣΙΚΕΣ ΕΝΝΟΙΕΣ ΤΜΗΜΑ ΠΟΛΙΤΙΣΜΙΚΗΣ ΤΕΧΝΟΛΟΓΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ

ΠΤΥΧΙΑΚΗ ΕΡΓΑΣΙΑ ΜΕ ΘΕΜΑ:

Web Sites Το τρίπτυχο της επιτυχίας

ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ

Atlantis - Νέο user interface

Εργαλεία Ανάπτυξης Εφαρμογών Internet I

International Diploma in IT Skills Proficiency Level

ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ

Στρατηγική ανάπτυξη δικτυακού κόμβου

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

ΥΠΗΡΕΣΙΕΣ ΔΙΑΔΙΚΤΟΥ Explorer & Outlook 2013

Ηλεκτρονικό εμπόριο. HE5 Ηλεκτρονικό κατάστημα Σχεδιασμός και λειτουργίες

ΠΛΗΡΟΦΟΡΙΚΗ ΣΤΟ ΕΝΙΑΙΟ ΛΥΚΕΙΟ

Εισαγωγή. Κατανεµηµένα Συστήµατα 01-1

Παρατηρώντας την κίνηση των παιδιών Πλοήγηση

Οδηγός γρήγορης εκκίνησης

Ψηφιακή Εκπαιδευτική Πλατφόρμα, Διαδραστικά Βιβλία και Αποθετήριο Μαθησιακών Αντικειμένων

Προσβασιµότητα στους διαδικτυακούς κόµβους

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα

Δραστηριότητα 9 Δημιουργία και διαχείριση blog μέσω του Blogger. Δημιουργία ιστολογίου

ΣΧΕΔΙΑΣΗ ΔΙΑΔΡΑΣΤΙΚΟΥ ΓΡΑΦΕΙΟΥ ΜΕ ΧΡΗΣΗ ΤΗΣ LUCID

ηλεκτρονικό εµπόριο, ιαφημιση και

Εισαγωγικά Θέµατα WWW (World Wide Web)

Ανάλυση και Σχεδίαση Εφαρµογών Πολυµέσων

ΜΑΘΗΜΑ: Εργαλεία Ανάπτυξης εφαρμογών internet.

Π3.1 ΣΧΕΔΙΟ ΑΞΙΟΛΟΓΗΣΗΣ

ΜΙΑ ΠΙΛΟΤΙΚΗ ΕΦΑΡΜΟΓΗ ΣΤΗΝ ΤΑΞΗ WEB-BASED APPLETS ΜΕ ΔΥΝΑΤΟΤΗΤΕΣ ΠΕΙΡΑΜΑΤΙΚΗΣ ΔΙΑΔΙΚΑΣΙΑΣ ΠΕΡΙΛΗΨΗ

Εγχειρίδιο Χρήστη - Μαθητή

1. Εισαγωγή...3 Συμβατότητα Browser...3 Διεύθυνση πρόσβασης...3 LoginScreen...3 Κύρια Εφαρμογή Οδηγίες Χρήσης...5 Αρχική Σελίδα...

εθνικοί χαρτογραφικοί οργανισμοί και γεωπύλες: λειτουργικότητα και χρήστης

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

Ηλεκτρονικό Επιχειρείν

Επιχειρηµατικές ιαδικασίες: Εισαγωγικές Έννοιες & Αρχικά στάδια µοντελοποίησης

Τεχνολογία Πολιτισμικού Λογισμικού

ΧΡΗΣΗ Η/Υ & ΙΑΧΕΙΡΙΣΗ ΑΡΧΕΙΩΝ

Το µάθηµα Ηλεκτρονική ηµοσίευση

Ως Διαδίκτυο (Internet) ορίζεται το παγκόσμιο (διεθνές) δίκτυο ηλεκτρονικών υπολογιστών (international network).

Γενικές Οδηγίες για τις νέες Εκτυπωτικές Φόρμες

ιαχείριση Τηλεφωνικών Κλήσεων

Σχεδίαση της Διεπαφής Ανθρώπου-Υπολογιστή

1. ΕΙΣΑΓΩΓΗ 2. ΠΕΡΙΓΡΑΦΗ

Εγχειρίδιο χρήσης του συστήµατος εκπαίδευσης από απόσταση «Εκπαίδευση χωρίς όρια» του Τ.Ε.Ι. Λάρισας. Λειτουργίες Μαθητών

Η ΧΡΗΣΗ ΤΗΣ ΥΠΟΔΟΜΗΣ ΧΩΡΙΚΩΝ ΔΕΔΟΜΕΝΩΝ ΓΙΑ ΤΗΝ ΑΝΑΖΗΤΗΣΗ ΚΑΙ ΑΠΕΙΚΟΝΙΣΗ ΓΕΩΓΡΑΦΙΚΩΝ ΠΛΗΡΟΦΟΡΙΩΝ

ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΙΣΤΟΤΟΠΩΝ

Gmail: Η προσέγγιση της Google στο ηλεκτρονικό ταχυδρομείο

χεδιασμός Ιστοχώρων, χεδιασμός Γραφικών, Γνωστική Ψυχολογία

Junior A (Κωδ.Τμήματος AJ1)

Επεξεργασία Εικόνας. Κωδικός Πακέτου ACTA - CGD+CWD Τίτλος Πακέτου ΕΠΕΞΕΡΓΑΣΙΑ ΕΙΚΟΝΑΣ - ΣΧΕ ΙΑΣΗ ΙΣΤΟΣΕΛΙ ΑΣ. Εκπαιδευτικές Ενότητες

ΔΡΑΣΤΗΡΙΟΤΗΤΕΣ. Κωδικός Τίτλος Επίπεδο

ΕΠΛ 012. θεωρία Σχεδιασµού Ιστοσελίδων

ΧΡΗΣΗ Η/Υ ΚΑΙ ΔΙΑΧΕΙΡΙΣΗ ΑΡΧΕΙΩΝ

Γαβαλάς αµιανός

ΥΠΟΧΡΕΩΤΙΚΕΣ ΓΝΩΣΕΙΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΕΡΟΣ ΙΙ

Πι νακας περιεχομε νων

Τι είναι ένα σύστημα διαχείρισης περιεχομένου; δυναμικό περιεχόμενο

Οδηγός Χρήστη. Καλώς ήλθατε στο Ηλεκτρονικό Περιβάλλον Μάθησης.

ΕΦΑΡΜΟΓΗ ΔΙΑΧΕΙΡΙΣΗΣ ΕΝΙΣΧΥΤΙΚΗΣ ΔΙΔΑΣΚΑΛΙΑΣ (ΕΚΔΟΣΗ 2.0 ΣΕΠΤΕΜΒΡΙΟΣ 2016) ΟΔΗΓΙΕΣ ΧΡΗΣΗΣ

1. Τα Κυριότερα Εργαλεία Ενηµέρωσης και Ευαισθητοποίησης σχετικά µε τον Εθελοντισµό

Το σύστημα Βοήθειας του Internet Explorer

Transcript:

ΣΧΕ ΙΑΣΗ ΠΕΡΙΒΑΛΛΟΝΤΟΣ ΙΕΠΑΦΗΣ ΜΕ ΤΟ ΧΡΗΣΤΗ Εαρινό Εξάµηνο 2001 ΣΧΕ ΙΑΣΜΟΣ ΙΕΠΙΦΑΝΕΙΩΝ ΙΑ ΙΚΤΥΟΥ ρ. Βαγγελιώ Καβακλή ΠΑΝΕΠΙΣΤΗΜΙΟ ΑΙΓΑΙΟΥ, ΤΜΗΜΑ ΠΟΛΙΤΙΣΜΙΚΗΣ ΤΕΧΝΟΛΟΓΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ 1 Κατηγορίες χρήσεων του Web Η παρουσίαση της πληροφορίας στο Web ακολουθεί το πρότυπο (µεταφορά) της σελίδας (page metaphor). Oι χρήσεις του Web µπορούν να διακριθούν σε «Ξεφύλλισµα» σελίδων (browsing) Συναλλαγές (transactions) Εκτέλεση εφαρµογών (running applications) Kαθεµία από τις παραπάνω κατηγορίες παρουσιάζει προβλήµατα ευχρηστίας (usability problems) ειδικά όταν η µορφή της αλληλεπίδρασης µε το χρήστη ξεφεύγει από το πρότυπο της σελίδας. 2 1

Προβλήµατα ευχρηστίας στο Web Web & «ξεφύλλισµα» σελίδων τα προβλήµατα χρηστικότητας εντοπίζονται στα εξής: Προσανατολισµός Χρήση frames Χρήση DHTML ή Java applets τα οποία µεταβάλουν τη συνήθη λειτουργικότητα του φυλλοµετρητή. Άνοιγµα νέων παραθύρων Web & Συναλλαγές Συναλλαγές που δεν µεταβάλλουν την βάση δεδοµένων Συναλλαγές που µεταβάλλουν την κατάσταση της βάσης δεδοµένων (αγορά προϊόντων) Κατά την τέλεση συναλλαγών, η σύνδεση του πελάτη (client) µε τον εξυπηρετητή (server) είναι χαλαρή. Η χρήση των κουµπιών του πλοηγού δεν προκαλεί ενηµέρωση του εξυπηρετητή. Π.χ. χρήση του πλήκτρου Back ή του Reload κατά τη συµπλήρωση µίας φόρµας παραγγελίας. Web & Εκτέλεση εφαρµογών o κύριος λόγος χρήσης του Web για εκτέλεση µίας εφαρµογής είναι η ευκολία ανάπτυξης (deployment) σε περίπτωση που η αλληλεπίδραση µε την εφαρµογή ξεφεύγει από το πρότυπο της σελίδας, πρέπει να εξετάζεται το ενδεχόµενο η εφαρµογή να τρέχει σε ξεχωριστό παράθυρο ίσως και χωρίς τη µπάρα εργαλείων του πλοηγού. 3 Αρχική Ανάλυση Τα στάδια της αρχικής προετοιµασίας περιλαµβάνουν: Καθορισµός επιχειρησιακού στόχου: τι θέλετε να πετύχετε µέσω του Web site. Ανάλυση επιχειρησιακού στόχου και καταγραφή επιµέρους επιδιώξεων Ανάλυση χρηστών: Ποιο είναι το κοινό στο οποίο απευθύνεστε; Συνοπτική περιγραφή της πληροφορίας που θα περιέχεται στο site Αναζήτηση των σχετικών πηγών πληροφορίας που είναι διαθέσιµες ή θα πρέπει να δηµιουργηθούν ούτως ώστε να πετύχετε τους στόχους που έχετε θέσει 4 2

Παράδειγµα: Web site συλλόγου αποφοίτων Μέσα στους επόµενους 12 µήνες αναµένεται ότι το Web site του συλλόγου αποφοίτων θα επιτύχει τα ακόλουθα: Μείωση του φόρτου εργασίας της γραµµατείας λόγω κλήσεων ρουτίνας σχετικά µε τις δραστηριότητες του συλλόγου, ύψος εισφοράς, συναντήσεις µελών κ.ο.κ. Σηµαντική µείωση των ταχυδροµικών εξόδων καθώς και του χρόνου που απαιτείται για την διεκπεραίωση της αλληλογραφίας ρουτίνας Το Web site του συλλόγου θα συµπεριλαµβάνει όλο το υλικό το οποίο δηµοσιεύεται στο τριµηνιαίο ειδησεογραφικό δελτίο του συλλόγου. Επιπλέον, θα περιλαµβάνει επιπλέον έγκαιρη πληροφόρηση σχετικά µε αλλαγές στο πλάνο δραστηριοτήτων του συλλόγου Μετά από ένα χρόνο θα διεξαχθεί ψηφοφορία µεταξύ των µελών του συλλόγου για να αποφασισθεί εάν θα συνεχιστεί ή όχι η έντυπη κυκλοφορία του ειδησεογραφικού δελτίου Περαιτέρω ανάλυση των αρχικών στόχων περιλαµβάνει: προσδιορισµό οικονοµικών και οργανωτικών στόχων κριτήρια µέτρησης της απόδοσης µακροπρόθεσµα σχέδια σχετικά µε τη σύνταξη και διαχείριση του Web site 5 Ανάλυση κοινού Less than 10% of Web readers ever scroll beyond the top of Web pages. [J. Nielsen] Web surfers: Στόχος σας είναι η προσέλκυση των συµπτωµατικών αναγνωστών µε δυνατά γραφικά και έντονες δηλώσεις περιεχοµένου (ανάλογα µε τα εξώφυλλα περιοδικών στο περίπτερο) Όλοι οι σύνδεσµοι στην κεντρική σελίδα πρέπει να κατευθύνουν τον χρήστη σε άλλες σελίδες µέσα στο site. Αρχάριοι και περιστασιακοί χρήστες: Οι αρχάριοι «τροµοκρατούνται» από πολύπλοκα µενού και επιφυλάσσονται να εξερευνήσουν ένα site αν η κεντρική σελίδα δεν είναι ελκυστική και ευκρινώς οργανωµένη Απαραίτητα: η ξεκάθαρη δοµή και εύκολη πρόσβαση σε επεξηγηµατικές σελίδες που δείχνουν την οργάνωση της πληροφορίας Χρήσιµα: χάρτες πλοήγησης, γλωσσάριο τεχνικών όρων και ορολογίας, κατάλογος συχνών ερωτήσεων (FAQ) Έµπειροι και συχνοί χρήστες: Αντιπαθούν: τα «αραιά» γραφικά µενού µε λίγες επιλογές, γραφικά και φρου-φρου Εκτιµούν: αναλυτικά αλλά λιτά µενού κειµένου, εκτενείς ευρετηριακές δοµές που τους επιτρέπουν άµεση πρόσβαση στην πληροφορία που επιθυµούν ιεθνείς χρήστες: µετάφραση τουλάχιστον των κύριων σελίδων του site αποφυγή τοπικών ιδιωµατισµών, ασαφών τεχνικών ακρώνυµων, και καθαρά επαγγελµατικών όρων (τουλάχιστον στις εισαγωγικές σελίδες του site) αποφυγή χρήσης τοπικών συµβάσεων σχετικά µε την εµφάνιση ηµεροµηνίας και ώρας 6 3

Στρατηγικές Σχεδίασης αναλυτική µακροσκελής παρουσίαση Χρόνος επαφής µε το χρήστη διδασκαλία κατάρτιση ξεφύλλισµα εκπαίδευση αναζήτηση πηγών σαφής σύντοµη παρουσίαση γραµµική Αφήγηση µη - γραµµική 7 Κατάρτιση οι εφαρµογές κατάρτισης ακολουθούν µια γραµµική δοµή και παρουσιάζουν λίγες «ευκαιρίες» στο χρήστη να παρεκκλίνει από την κεντρική ροή της παρουσίασης Υπερσύνδεσµοι που αποµακρύνουν από το κεντρικό µήνυµα κάθε ενότητας µπερδεύουν το χρήστη χρησιµοποιώντας µόνο τους υπερσύνδεσµους προς την επόµενη και προηγούµενη σελίδα («Next», «Previous») : εξασφαλίζεται ότι όλοι οι χρήστες βλέπουν την ίδια παρουσίαση µπορεί να προσδιοριστεί µε µεγαλύτερη ακρίβεια ο χρόνος που απαιτείται για κάθε ενότητα ιδασκαλία και πάλι υπάρχει µια κεντρική ροή αλλά δίνονται περισσότερες ευκαιρίες στους µαθητές να αναζητήσουν επιπλέον πληροφορίες στο διαδίκτυο, παρεκκλίνοντας από το αρχικό θέµα µια καλή τακτική είναι η παράθεση παραποµπών σε άλλες πηγές σε ξεχωριστή σελίδα, ώστε να εξασφαλίζεται ότι οι µαθητές θα δουν πρώτα τη βασική παρουσίαση χρήσιµη είναι η δυνατότητα εκτύπωσης του υλικού Εκπαίδευση αναφέρονται σε κοινό που προτιµά να επιλέγει την πληροφορία που θα δει προσαρµοστικές, αλληλεπιδραστικές και µη γραµµικές δοµές είναι κατάλληλες για τέτοιου είδους εφαρµογές µια και δεν µπορεί κάποιος από την αρχή να προβλέψει ποια θέµατα θα τραβήξουν την προσοχή του κάθε χρήστη συνήθως προσφέρονται παραποµπές σε σχετικό υλικό τόσο εντός του συγκεκριµένου δικτυακού τόπου όσο και στο διαδίκτυο πλεονέκτηµα η χρήση πίνακα περιεχοµένων ή άλλων ευρετηριακών δοµών βασική η ικανότητα εκτύπωσης του περιεχοµένου Αναζήτηση πηγών (Reference) επιτρέπουν στο χρήστη να βρει εύκολα και γρήγορα αυτό που αναζητά και στη συνέχεια να το αποθηκεύσει ή να το τυπώσει χρησιµοποιούν ξεκάθαρα µη γραµµική δοµή (µια και δεν παρουσιάζουν κάποια «ιστορία» χρησιµοποιούν πίνακες περιεχοµένων, µενού µε ξεκάθαρη οργάνωση και µηχανές αναζήτησης 8 4

Πολυπλοκότητα δοµής κόµβου Πολυπλοκότητα Μορφωµένο κοινό ίκτυο ίκτυο Απλότητα βασικό περιεχόµενο Ιεραρχία Ακολουθία Γραµµική αφήγηση προβλέψιµη δοµή Μη - Γραµµική αφήγηση ευέλικτη, µπορεί να προκαλέσει σύγχυση 9 οµή κόµβου 10 5

Σαφής και ισορροπηµένη δοµή κόµβου 11 Σχεδίαση γενικού GUI vs Web design Παρόλο που οι βασικές αρχές σχεδίασης µίας γραφικής διαπροσωπείας ισχύουν και για την σχεδίαση στο Web, υπάρχουν οι ακόλουθες διαφορές: Ανοµοιογένεια στο περιβάλλον εκτέλεσης, π.χ. WebTV, WAP κινητό. Έχουµε διαφορές στη διακριτική & χρωµατική ανάλυση της οθόνης, τις ικανότητες του πλοηγού, τις γραµµατοσειρές, κλπ. Πρέπει να υπάρχει πρόβλεψη για 2 τάξεις µεγέθους διαφορετικές αναλύσεις 3 τάξεις µεγέθους διαφορετικές ταχύτητες επικοινωνίας Ελευθερία κινήσεων : ο χρήστης επιλέγει το τρόπο µετακίνησής του χωρίς να ακολουθεί συγκεκριµένους κανόνες. Η ευκολία χειρισµών και η τήρηση των γενικών κανόνων πλοήγησης έχει πολύ µεγάλη σηµασία για την προσέλκυση κοινού (maximizing usability). 12 6

Ταχύτητα φόρτωσης ιστοσελίδας Αποτελεί τον σηµαντικότερο παράγοντα ευχρηστίας του διαδικτύου Αν και τα δίκτυα γίνονται συνεχώς ταχύτερα, η ραγδαία αύξηση των χρηστών του διαδικτύου σηµαίνει µειωµένο ποσοστό χρηστών µε εξοπλισµό υψηλών προδιαγραφών! Εξαρτάται από: απόκριση του εξυπηρετητή απόκριση του διαδικτύου µέγεθος ιστοσελίδας επεξεργασία που απαιτείται για την προετοιµασία της ιστοσελίδας Πρέπει να είναι κάτω από 1 δευτερόλεπτο για να δίνει την αίσθηση της ελεύθερης κίνησης στο χρήστη Θεωρείται ανεκτή όταν δεν ξεπερνά τα 10 δευτερόλεπτα Παράδειγµα: αν η πρόσβαση ενός χρήστη στο διαδίκτυο είναι µέσω µόντεµ 28.8 Kbit και υποθέσουµε καθυστέρηση στον εξυπηρετητή 0,5 δευτερόλεπτα τότε: σελίδες µεγέθους 1800 bytes φορτώνονται σε χρόνο 1 σελίδες των 34200 bytes φορτώνονται σε χρόνο 10 σελίδες µεγέθους µεγαλύτερου από 30 Kb προκαλούν µη ανεκτή αναµονή 13 14 7

Παράδειγµα URL: http://www.athens2004.gr/ Page Rating: *** Total Page Size: 74808 bytes Total Graphics: 32370 bytes - 14 images Modem Speed Download Time 14.4k 43.56 seconds 28.8k 22.78 seconds 56k 12.57 seconds ISDN (128k) 6.68 seconds T1 (1.44 MB) 2.42 seconds [www.netmechanic.com] 15 Υποστήριξη πλοήγησης Είναι αναγκαίο να δίνεται στον χρήστη η αίσθηση της ισχυρής δοµής και υποστήριξης της πλοήγησης Οι χρήστες πρέπει να µπορούν να γνωρίζουν που βρίσκονται που έχουν ήδη βρεθεί που µπορούν ακόµα να µεταβούν Πρέπει να υπάρχει πάντα τρόπος εύκολης επιστροφής στην κεντρική (home) σελίδα καθώς και σε άλλες βασικές ενότητες του κόµβου Αποφυγή «αδιέξοδων» ιστοσελίδων Κάθε ιστοσελίδα θα πρέπει να περιλαµβάνει τουλάχιστον ένα υπερσύνδεσµο σε κάποια άλλη σελίδα του κόµβου Οι χάρτες κόµβων (site maps) δίνουν στο χρήστη µια γενική εικόνα του χώρου πλοήγησης Χρήσιµο είναι να υπάρχει κάποιος µηχανισµός που να δείχνει την τρέχουσα θέση του χρήστη 16 8

Τοπικές µηχανές αναζήτησης Αναγκαίες για κάθε κόµβο ο οποίος περιλαµβάνει µεγάλο αριθµό ιστοσελίδων εµπειρικός κανόνας: 200 ιστοσελίδες και πάνω Είναι καλό να τοποθετήσουµε ένα πλήκτρο «αναζήτησης» σε κάθε σελίδα Η αναζήτηση θα πρέπει να καλύπτει το περιεχόµενο ολόκληρου του κόµβου εκτός εάν ο χρήστης απαιτήσει να εστιάσει σε κάποιο επιµέρους θέµα Προηγµένες δυνατότητες όπως λογικοί τελεστές και σύνθετη σύνταξη θα πρέπει να αποφεύγονται στην προκαθορισµένη συµπεριφορά µιας µηχανής αναζήτησης 17 18 9

Παράδειγµα 19 Μικρό µέγεθος σελίδων Αποφεύγετε την κατακόρυφη κύλιση της ιστοσελίδας (scrolling) µόνο 10% των χρηστών µπαίνει στον κόπο να κυλήσει την ιστοσελίδα και να δει το υπόλοιπο περιεχόµενο Το µέγεθος των οθονών από τις οποίες οι χρήστες έχουν πρόσβαση στο διαδίκτυο ποικίλει Οι πιο σπουδαίες πληροφορίες πρέπει να περιέχονται στο πάνω µέρος Οι χρήστες πρέπει να µπορούν να βλέπουν συγχρόνως όλες τις δυνατές επιλογές τις οποίες πρέπει να τοποθετήσουµε και στην αρχή και στο τέλος της σελίδας Οι υπερσύνδεσµοι που βρίσκονται στο πάνω µέρος της σελίδας είναι πιθανότερο να επιλεγούν σε σύγκριση µε αυτούς που βρίσκονται στο τέλος 20 10

Τι βλέπει ο χρήστης 21 Απλή διεπιφάνεια χρήστη Το περιεχόµενο είναι η ουσία και ο λόγος ύπαρξης ενός κόµβου η διεπιφάνεια χρήστη είναι το µέσο µε το οποίο ο χρήστης αναζητά τις πληροφορίες που χρειάζεται Οι τεχνικές εντυπωσιασµού έντονα χρώµατα κινούµενα γραφικά κινούµενο κείµενο εµποδίζουν τους χρήστες να εστιάσουν την προσοχή τους στο περιεχόµενο και συχνά προκαλούν ενόχληση έχουν ταυτιστεί στη συνείδηση των χρηστών µε το εµπόριο και τη διαφήµιση µε αποτέλεσµα οι χρήστες να αγνοούν αυτόµατα το περιεχόµενο των µηνυµάτων αυτής της κατηγορίας Το στυλ της διεπιφάνειας εξαρτάται από το είδος των υπηρεσιών που προσφέρονται αλλά και από τις προσδοκίες των χρηστών 22 11

Παραδείγµατα ενηµέρωση παραποµπή σε άλλες πηγές κίνηση περιέργειας 23 Αποφυγή υπερβολικής χρήσης πρόσφατης τεχνολογίας Η χρησιµοποίηση πρόσφατης τεχνολογίας πλαισίων VRML, κτλ. όταν δεν απαιτείται από την εφαρµογή είναι αρνητική η διεπιφάνεια γίνεται πιο δύσχρηστη και σύνθετη περιορίζεται ο αριθµός των χρηστών που έχουν δυνατότητα πρόσβασης στην ιστοσελίδα Σε έρευνα της Sun Microsystems προέκυψε ότι: 8 % των χρηστών χρησιµοποιούν αλφαριθµητικούς φυλλοµετρητές Επιβάλλεται η χρήση περιγραφικού κειµένου που εµφανίζεται στη θέση µιας εικόνας π.χ., <IMG alt= εικόνα εργαστηρίου > Η χρήση περιορισµένου αριθµού χρωµάτων επιτρέπει την απόδοση των ιστοσελίδων µε τον ίδιο τρόπο και σε περιβάλλοντα µε χαµηλότερες χρωµατικές αναλύσεις 24 12

Οµοιοµορφία και τήρηση συµβάσεων Ο χρήστης του διαδικτύου επισκέπτεται ετερογενείς κόµβους σε µικρό διάστηµα και δεν θα πρέπει να αιφνιδιάζεται από ιστοσελίδες που δεν τηρούν τις συνήθεις συµβάσεις Συµβατική συµπεριφορά: χρώµα υπερσυνδέσµων (µπλε για όσους δεν έχει διαβεί και µοβ ή κόκκινο για όσους έχει ήδη διαβεί) Μη συµβατική συµπεριφορά η χρήση του συµβολισµού του υπερσυνδέσµου για την ενεργοποίηση της διαδικασίας αποστολής e-mail το άνοιγµα νέου παραθύρου αντί για την εµφάνιση νέας ιστοσελίδας στο ίδιο παράθυρο απενεργοποίηση του πλήκτρου επιστροφής [BACK] 25 Σταθερότητα και οµοιοµορφία 26 13

Σταθερότητα 27 Σχεδιασµός Ιστοσελίδων Απλή διεύθυνση και τίτλος ιστοσελίδας Η διεύθυνση του κόµβου και κάθε ιστοσελίδας (URL) θα πρέπει να είναι κατά το δυνατόν σύντοµη, απλή και κατανοητή εν πρέπει να περιέχει σηµεία στίξης και χαρακτήρες που δεν είναι εύκολο να πληκτρολογηθούν Ο τίτλος µιας σελίδας είναι η ταυτότητά της και οι µηχανές αναζήτησης δίνουν ιδιαίτερη βαρύτητα στις λέξεις-κλειδιά του τίτλου π.χ. Ο τίτλος «Τα νέα µας» είναι λιγότερο κατατοπιστικός από τον τίτλο «Τα νέα του Πανεπιστηµίου Αιγαίου» Αυθύπαρκτος χαρακτήρας κάθε σελίδας αποφυγή «ορφανών σελίδων» ιατήρηση επικαιρότητας υλικού απαιτείται µηχανισµός συντήρησης περιεχοµένου χρήσιµη είναι η διατήρηση αρχείων ιστορικού υλικού, αφού επιτρέπει στους χρήστες να καταφεύγουν σε πληροφορία που στο παρελθόν τους είχε φανεί χρήσιµη 28 14

οµή ιστοσελίδας (χωροταξία) 29 οµή ιστοσελίδας ΙΙ 30 15

Εστίαση 31 Τυπογραφία Ι 32 16

Τυπογραφία ΙΙ 33 Γενικοί κανόνες συγγραφής υπερκειµένων Η ανάγνωση υπερκειµένων δεν γίνεται µε τον ίδιο τρόπο ανάγνωσης συνήθους γραµµικού κειµένου Σχετική µελέτη συµπεριφοράς χρηστών του διαδικτύου έδειξε ότι: 79% των χρηστών ρίχνουν µια γρήγορη µατιά αναζητώντας λέξεις κλειδιά 16% διαβάζουν λέξη προς λέξη το περιεχόµενο µιας ιστοσελίδας Ο σχεδιαστής υπερκειµένου πρέπει να επιλέξει µε µέτρο τα στοιχεία τα οποία θα τονίσει ο τονισµός ενός πολύ µεγάλου ποσοστού του κειµένου έχει ως συνέπεια την απώλεια της έµφασης κάθε υπερσύνδεσµος δεν πρέπει να καλύπτει περισσότερο κείµενο από το απολύτως απαραίτητο Η συγγραφή υπερκειµένου απαιτεί ένα στυλ δηµοσιογραφικού χαρακτήρα οι πρώτες γραµµές κάθε παραγράφου πρέπει να έχουν ιδιαίτερο ενδιαφέρον και συµπυκνωµένες ιδέες Η ανάγνωση του υπερκειµένου από την οθόνη του υπολογιστή είναι κουραστική και αργή όταν γράφουµε για το διαδίκτυο χρησιµοποιούµε πιο λιτή και περιεκτική γραφή απ ότι για έντυπο κείµενο 34 17

Ο δεκάλογος των λαθών της σχεδίασης για το Web 1. Απενεργοποίηση ή παρεµπόδιση του κουµπιού Back µε : Άνοιγµα νέων παραθύρων Χρήση immediate redirect Παρεµπόδιση της χρήσης της cache του πλοηγού 2. Άνοιγµα νέων παραθύρων 3. Χρήση µη-οικείων GUI Widgets. Η χρήση της διαπροσωπείας θα πρέπει να είναι τόσο οικεία όσο η χρήση µίας τηλεφωνικής συσκευής. 4. Έλλειψη στοιχείων για τους συγγραφείς του υλικού 5. Έλλειψη αρχείου. Το αρχείο µπορεί να αυξήσει κατά 10% το κόστος λειτουργίας ενός site αυξάνοντας την λειτουργικότητά του κατά 50%. 35 Ο δεκάλογος των λαθών (συνέχεια ) 6. Μεταβολή της δοµής µε µετακίνηση των σελίδων σε νέα URLs 7. Επικεφαλίδες ή σύνδεσµοι που δεν έχουν σχέση µε το περιεχόµενο της σελίδας προορισµού. 8. Μη µελετηµένη χρήση τεχνολογικών καινοτοµιών (community, chat, free email, 3D sitemaps, auctions). 9. Αργοί χρόνοι απόκρισης απεικόνισης σελίδων: Αλόγιστη χρήση γραφικών Χρήση applets αντί για DHTML. Χρήση δυναµικών σελίδων που επιβαρύνουν τους εξυπηρετητές 10. Οτιδήποτε µοιάζει µε διαφήµηση. Προσοχή στη χρήση: Banners Pop-ups Animations 36 18

Ένα καλό παράδειγµα : Yahoo Εκµεταλλεύεται στο έπακρο τις δυνατότητες του Web χωρίς να προσπαθεί να µιµηθεί άλλα µέσα: + Χρησιµοποιεί απλή HTML που δεν εξαρτάται από την παρουσία ή όχι συγκεκριµένων πλοηγών. + Αποτέλεσµα είναι ότι χρειάζεται κατά µέσο όρο 3 δευτ. για την εµφάνιση της κεντρικής σελίδας. + Χρησιµοποιεί µία δοµηµένη οργάνωση της πληροφορίας µε συνδέσµους (links), η οποία επιτρέπει εύκολη κατανόηση και χρήση. + εν προσπαθεί να κάνει τα «πάντα», αλλά παραπέµπει στις κατάλληλες πηγές πληροφορίας, όπως άλλωστε ήταν/είναι ο πρωταρχικός του στόχος. - εν µπορεί να ανταποκριθεί στην εκρηκτική ανάπτυξη του Web. - Η κεντρική θεµατολογική οργάνωση µπορεί να αποτελέσει τροχοπέδη στην εύκολη πλοήγηση καθώς αυξάνονται οι κατηγορίες που ενσωµατώνει. 37 38 19