Η ΕΥΧΡΗΣΤΙΑ στη σχεδίαση πολυµεσικών εφαρµογών

Transcript

1 ΕΛΛΗΝΙΚΟ ΑΝΟΙΚΤΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΓΡΑΦΙΚΕΣ ΤΕΧΝΕΣ ΠΟΛΥΜΕΣΑ ΓΤΠ61: ΠΛΗΡΟΦΟΡΙΚΗ - ΠΟΛΥΜΕΣΑ Η ΕΥΧΡΗΣΤΙΑ στη σχεδίαση πολυµεσικών εφαρµογών Γαϊτάνος Ερωτόκριτος Α.Μ

2 ο ΌΡΟΣ USABILITY ΧΡΗΣΤΙΚΟΤΗΤΑ ΕΥΧΡΗΣΤΙΑ χρησιµοποιείται για να υποδηλώσει το βαθµό ευκολίας µε τον οποίο οι άνθρωποι µπορούν να χειριστούν ένα εργαλείο για την επίτευξη ενός σκοπού.

3 ο ΌΡΟΣ στην Επιστήµη Υπολογιστών σχετίζεται µε το βαθµό καλαισθησίας και σαφήνειας της διεπαφής χρήστη ενός προγράµµατος ή ενός δικτυακού τόπου. HUMAN-COMPUTER INTERACTION (HCI) INTERACTION DESIGN (IxD) USABILITY ENGINEERING Η ερευνητική και σχεδιαστική διαδικασία που διασφαλίζει την χρηστικότητα ενός προϊόντος

4 ENGINEERING vs ΕΡΓΟΝΟΜΙΑ Ορισµένοι θεωρούν τη Μηχανική Χρηστικότητας ως εξειδίκευση της εργονοµίας στο χώρο του λογισµικού Συνήθως: Εργονοµία φυσιολογία χρήστη Μηχανική Χρηστικότητας ψυχολογία χρήστη

5 και ΑΝΘΡΩΠΟΣ Ανθρωποκεντρικός σχεδιασµός λαµβάνοντας υπόψη παραµέτρους της ανθρώπινης Φυσιολογίας & Ψυχολογίας USER FRIENDLY USABLE

6 ΟΡΙΣΜΟΣ Η ευχρηστία είναι ένα ποιοτικό χαρακτηριστικό που αποτιµά την ευκολία χειρισµού µιας διεπαφής χρήστη. Ορίζεται από 5 στοιχεία: Learnability Efficiency Memorability Errors Satisfaction [Εκµάθηση] [Αποδοτικότητα] [Αποµνηµόνευση] [Ανοχή σε σφάλµατα] [Ικανοποίηση χρήστη] Jacob Nielsen

7 + άλλα ποιοτικά χαρακτηριστικά Usability Utility Accessibility [Ευχρηστία] [Ωφελιµότητα] [Προσβασιµότητα]

8 ΣΠΟΥ ΑΙΟΤΗΤΑ Αυξηµένη ευχρηστία Αυξηµένη Παραγωγικότητα Απόρριψη ή Αποδοχή ενός προγράµµατος από την αρχική εντύπωση που προκαλεί στα πρώτα λεπτά της χρήσης του Ιδιαίτερα στο Web: Ευχρηστία = Απαραίτητη προϋπόθεση επιβίωσης

9 USER INTERFACE DESIGN ΕΜΠΕΙΡΙΚΗ ΙΑΠΙΣΤΩΣΗ Στις περισσότερες περιπτώσεις είναι πρακτικά αδύνατη η δηµιουργία µε την πρώτη προσπάθεια µιας διεπαφής χωρίς προβλήµατα χρηστικότητας. Ευχρηστία Επανασύλληψη της διεπαφής Αφαίρεση σφαλµάτων αλληλεπίδρασης ΑΝΤΙΜΕΤΩΠΙΣΗ ΠΡΟΒΛΗΜΑΤΟΣ Επαναλήψεις Επαναληπτικός Σχεδιασµός (Iterative Design)

10 ITERATIVE DESIGN PROJECT Α Ανάλυση απαιτήσεων Β Σχεδιασµός Γ Παραγωγή Αξιολόγηση Evaluation ΑΞΙΟΛΟΓΗΣΗ δ α ΑΝΑΛΥΣΗ β ΣΧΕ ΙΑΣΗ ΠΡΩΤΟΤΥΠΟ γ

11 Ανάλυση α Χρήστες -Contextual Interviews -Individual Interviews -Surveys (online) -Focus Groups Συλλογή στοιχείων χρηστών - Ηλικία - Γνωστικό Υπόβαθρο (τι γνωρίζουν και τι µπορούν να µάθουν) -Εµπειρία χρήσης -Αναµενόµενο περιβάλλον εργασίας -Τρόποι προσέγγισης πληροφοριών (π.χ. πόσο θέλουν να διαβάζουν) ηµιουργία Personas Φανταστικά πρόσωπα -ένα για κάθε βασική οµάδα χρηστών που έχει εντοπιστεί- µε αντίστοιχα χαρακτηριστικά.

12 Ανάλυση α Εργασίες Ανάλυση Εργασιών (Task Analysis) -Ποιοι είναι οι σκοποί (goals); -Τι κάνουν οι χρήστες για να τους πετύχουν; -Πως η πρότερη γνώση /εµπειρία των χρηστών επηρεάζει τον τρόπο που σκέφτονται για το πως θα εκτελέσουν τις διάφορες εργασίες; Συγγραφή Σεναρίων Περιγραφή ενεργειών ενός συγκεκριµένου χρήστη για την εκπλήρωση συγκεκριµένου σκοπού. -goal based scenarios -elaborated scenarios -full scale task scenarios

13 Ανάλυση α Καταγραφή Μετρήσιµοι στόχοι ευχρηστίας Measurable Usability Goals ΑΠΟ ΟΣΗ (Performance) Χρόνος -εντοπισµού επιθυµητής πληροφορίας -κατανόησης συγκεκριµένης πληροφορίας -ανάνηψης ύστερα από σφάλµα Ακρίβεια -πλήθος άστοχων επιλογών πλοήγησης -πλήθος άστοχων αναζητήσεων -πλήθος σφαλµάτων -πλήθος πληροφοριών εκλαµβανόµενων λανθασµένα Επιτυχία Μπορούν να τεθούν για διάφορους στόχους (πλοήγησης, αναζήτησης, λεπτοµέρειας περιεχοµένου κ.λπ.) π.χ.σχετικά µε τη χρήση on-line βοήθειας: -Αν χρειαστεί ο χρήστης θα ανατρέξει στη «Βοήθεια»; -Θα βρει αυτό που θέλει; -Θα επιστρέψει σε λιγότερο από δύο λεπτά;

14 Σχεδίαση β Μορφή οµή Σχεδίαση Οθόνης (Screen Design) Οργάνωση Περιεχοµένου Εφαρµογή γενικών κανόνων που έχουν προκύψει από σχετικές έρευνες του κλάδου του usability engineering (research-based guidelines) Κατηγοριοποίηση περιεχοµένου:card-sorting Παράλληλη σχεδίαση Πολλοί σχεδιαστές δουλεύουν ανεξάρτητα πάνω στο ίδιο σύνολο απαιτήσεων και όταν τελειώσουν παρουσιάζουν τις ιδέες τους. Επιλέγονται τα καλύτερα στοιχεία τα οποία συνθέτουν την τελική λύση.

15 Πρωτότυπο γ Παραγωγή Ο απλούστερος τρόπος λήψης ανάδρασης από το χρήστη από τα πρώτα κιόλας βήµατα ανάπτυξης του έργου. Έγκαιρος εντοπισµός σηµείων που χρήζουν αλλαγή ευκολότερες τροποποιήσεις. Τύποι πρωτοτύπων -Σχέδια σε χαρτί (Low Fidelity Prototype) -Οθόνες µε βασικά στοιχεία µέσω των οποίων ο χρήστης µπορεί να µετακινηθεί (click through) -Πλήρως λειτουργικό περιβάλλον (High Fidelity Prototype) Απευθείας Αξιολόγηση Rapid Prototyping

16 Αξιολόγηση δ Μέθοδοι Γνωσιακά Μοντέλα (Cognitive Modeling) ηµιουργία υπολογιστικού µοντέλου εκτίµησης χρόνου εκτέλεσης διαφόρων ενεργειών από τους χρήστες. Επισκόπηση (Inspection) Εξέταση των παραµέτρων ευχρηστίας µιας διεπαφής χρήστη από ειδικούς (usability specialists) ενδεχοµένως µαζί µε προγραµµατιστές / χρήστες. Επερωτήσεις (Inquiry) Περισυλλογή αντιδράσεων απόψεων - αναγκών χρηστών από τους αξιολογητές ευχρηστίας µε α) συνοµιλία β) παρατήρηση γ) γραπτή δήλωση Έλεγχος (Testing) Αντιπροσωπευτικοί χρήστες εκτελούν τυπικές εργασίες (στο σύστηµα ή το πρωτότυπο) και οι αξιολογητές µελετούν τα αποτελέσµατα.

17 Αξιολόγηση µε Γνωσιακά Μοντέλα (Cognitive Models) δ ηµιουργία υπολογιστικού µοντέλου εκτίµησης χρόνου εκτέλεσης διαφόρων ενεργειών από τους χρήστες. Παράµετρος Eye movement time Decay half-life of visual image storage Perceptual processor cycle time Μέση Τιµή 230 ms 200 ms 100 ms Εύρος Τιµών ms ms ms Cognitive processor cycle time 70 ms ms Motor processor cycle time 70 ms ms Effective working memory capacity 7 items 5-9 items Keystroke Level Models Key press and release (keyboard) Point the mouse to an object on screen Button press and release (mouse) Hand motion keyboard mouse Mental preparation Type String of N characters Wait for system respond Drag and drop with the mouse for length L Τιµές 0,08-1,2 sec 1,1 sec 0,1 sec 0,4 sec 1,2 sec

18 Αξιολόγηση µε Επισκόπηση (Inspection) δ Ευρετικοί κανόνες (heuristic evaluation) Επισκόπηση χαρακτηριστικών (feature inspection) Εξέταση των παραµέτρων ευχρηστίας µιας διεπαφής χρήστη από ειδικούς (usability specialists) ενδεχοµένως µαζί µε προγραµµατιστές / χρήστες. Γνωσιακή Περιδιάβαση (Cognitive Walkthrough) Πολυσυµµετοχική Περιδιάβαση (Pluralistic Walkthrough) Επισκόπηση βάση προοπτικής (perspective-based inspection)

19 Αξιολόγηση µε Επερωτήσεις (Inquiry) δ Ερωτηµατολόγια (Questionnaires) Συνεντεύξεις (interviews) Περισυλλογή αντιδράσεων απόψεων - αναγκών χρηστών από τους αξιολογητές ευχρηστίας µε α) συνοµιλία β) παρατήρηση γ) γραπτή δήλωση Καταγραφή πραγµατικής χρήσης (Logging Actual Use) Οµάδες εστίασης (Focus Groups) Παρατήρηση Πεδίου (Field Observation) Μελέτη Πεδίου (Proactive Field Study)

20 Πρωτόκολλο ιατύπωσης σκέψεων (Thinking aloud protocol) USABILITY Αξιολόγηση µε Έλεγχο (Testing) δ Μέθοδος προπονητή (Coaching Method) Μάθηση µε οµαδικές ανακαλύψεις (Co-discovery learning) Αντιπροσωπευτικοί χρήστες εκτελούν τυπικές εργασίες (στο σύστηµα ή το πρωτότυπο) και οι αξιολογητές µελετούν τα αποτελέσµατα. Μέτρηση απόδοσης (Performance Measurement) Πρωτόκολλο υποβολής ερωτήσεων (Question-asking protocol) Έλεγχος εξ αποστάσεως (Remote testing) Αναδροµικός έλεγχος (Retrospective Testing) Μέθοδος σκίασης (Shadowing method) Μέθοδος ιδασκαλίας (Teaching Method)

21 Guidelines Γενικοί σχεδιαστικοί κανόνες για τη διασφάλιση της ευχρηστίας σε µια πολυµεσική εφαρµογή

22 Guidelines Βελτιστοποίηση Εµπειρίας Χρήστη [Optimizing User Experience] 1 a 1:1 Αποφυγή χρήσης αυτόκλητα αναδυόµενων παραθύρων 1:2 Στους δικτυακούς τόπους ιδιαίτερη έµφαση πρέπει να δοθεί στην εικόνα αξιοπιστίας (credibility) που αποπνέουν 1:3 Τυποποίηση της ακολουθίας των ενεργειών που πρέπει να ακολουθήσει ο χρήστης 1:4 Μείωση του φόρτου εργασίας του χρήστη (workload) 1:5 Να λαµβάνεται πάντα υπόψη η περιορισµένη µνήµη του χρήστη 1:6 Ελαχιστοποίηση του χρόνου «κατεβάσµατος» (για τις ιστοσελίδες) 1:7 Προειδοποίηση σε περίπτωση παρέλευσης διαθέσιµου χρόνου (time-outs) 1:8 Προβολή πληροφοριών σε απευθείας χρησιµοποιήσιµη µορφή (directly usable format) χωρίς να απαιτείται η µετατροπή κατά κάποιο τρόπο

23 Guidelines Βελτιστοποίηση Εµπειρίας Χρήστη [Optimizing User Experience] 1 b 1:9 1:10 1:11 Μορφοποίηση της πληροφορίας ώστε να είναι αναγνώσιµη στην οθόνη αλλά και εκτυπώσιµη σε χαρτί. Ενηµέρωση προόδου εργασίας όταν ο χρήστης πρέπει να περιµένει Ενηµέρωση χρηστών για µεγάλους χρόνους «κατεβάσµατος» 1:12 Ανάπτυξη ιστοσελίδων που εκτυπώνονται χωρίς προβλήµατα 1:13 Να µην απαιτείται η εκτέλεση άλλων ενεργειών από τους χρήστες ενώ διαβάζουν 1:14 Χρήση απλής ορολογίας στη «Βοήθεια» 1:15 Παροχή επιλογών εκτύπωσης 1:16 Παροχή Τεκµηρίωσης online Βοήθειας στους χρήστες

24 Guidelines ιάταξη σελίδας [Page Layout] 2 2:1 Αποφυγή οθονών µε άχρηστα στοιχεία 2:2 Τοποθέτηση σηµαντικών στοιχείων µε συνέπεια 2:3 Τοποθέτηση σηµαντικών στοιχείων στην κορυφή και στο µέσο (top-center) 2:4 όµηση κατά τρόπο που να καθίστανται εύκολες οι συγκρίσεις 2:5 Καθιέρωση επιπέδων σηµαντικότητας των στοιχείων 2:6 Βελτιστοποίηση της πυκνότητας των οθονών (όχι µεγάλοι ή καθόλου κενοί χώροι) 2:7 Στοίχιση αντικειµένων επί της οθόνης Χρήση ρευστών διατάξεων που αυτόµατα προσαρµόζουν το µέγεθος της σελίδας 2:8 ανάλογα µε την ανάλυση της οθόνης. 2:9 Αποφυγή σηµείων τερµατισµού κύλισης (scroll stoppers) 2:10 Επιλογή κατάλληλου µήκους σελίδων (όχι ελάχιστα µεγαλύτερες από οθόνη) 2:11 Συγκρατηµένη χρήση λευκών διαστηµάτων 2:12 Επιλογή κατάλληλου µήκους γραµµών 2:13 Χρήση πλαισίων για την εµφάνιση λειτουργιών κοινών σε όλες τις οθόνες

25 Guidelines Πλοήγηση [Navigation] 3 3:1 Αποφυγή νεκρών οθονών (χωρίς δυνατότητες πλοήγησης) 3:2 Οµαδοποίηση και διάκριση στοιχείων πλοήγησης 3:3 Χρήση λίστας περιεχοµένων σε σελίδες µεγάλου µήκους 3:4 Επισήµανση τρέχουσας θέσης του χρήστη 3:5 Τοποθέτηση κύριου µενού πλοήγησης στην αριστερή πλευρά 3:6 Χρήση περιγραφικών ετικετών στις επιλογές πλοήγησης 3:7 Αποδοτική παρουσίαση Tabs (κορυφή οθόνης-look and feel πραγµατικών tabs) 3:8 ιατήρηση µικρού µεγέθους σελίδων που περιέχουν µόνο στοιχεία πλοήγησης 3:9 Χρήση κατάλληλων τύπων µενού ( sequential ή simultaneous ) 3:10 Χρήση χάρτη περιεχοµένων 3:11 Εµφάνιση περιγραφικών αναδυόµενων µηνυµάτων όταν ο χρήστης κινείται πάνω από τις επιλογές πλοήγησης 3:12 Χρήση breadcrumbs

26 Guidelines Σελιδοποίηση & Κύλιση [Scrolling & Paging] 4 4:1 Αποφυγή Οριζόντιας κύλισης 4:2 ιευκόλυνση ανάγνωσης σε ταχεία κύλιση (τονισµός κύριων αντικειµένων) 4:3 Για ανάγνωση κειµένου που απαιτεί κατανόηση (comprehension) προτιµούνται µεγάλες σελίδες µε δυνατότητες κύλισης. Για εντοπισµό συγκεκριµένου κοµµατιού µέσα σε σύνολο πληροφοριών προτιµείται 4:4 η διάσπαση του συνόλου σε µικρές σελίδες. 4:5 Ανεκτά µικρή θεωρείται µια σελίδα που δεν ξεπερνάει τις τέσσερις οθόνες

27 Guidelines Επικεφαλίδες, τίτλοι και ετικέτες [Headings, titles & labels] 5 5:1 Οι ετικέτες των κατηγοριών πρέπει να σχεδιάζονται µε σαφήνεια και καθαρότητα 5:2 Επιλογή περιγραφικών τίτλων οθονών 5:3 Απλόχερη χρήση περιγραφικών επικεφαλίδων σε όλες τις οθόνες 5:4 Μοναδικότητα επικεφαλίδων 5:5 Τονισµός σηµαντικών στοιχείων 5:6 Περιγραφικές επικεφαλίδες γραµµών / στηλών σε πίνακες 5:7 Χρήση κεφαλίδων σε επίπεδα (<H1>, <H2> κ.λπ.) 5:8 Ελαχιστοποίηση επιλογών ιάκριση συχνά επιλεγόµενων στοιχείων

28 6:14 Σύνδεση σε υποστηρικτικές πληροφορίες (διασαφήνιση ορολογίας κ.λπ.) USABILITY Guidelines Links [Σύνδεσµοι] 6 6:1 Χρήση ετικετών συνδέσµων µε νόηµα 6:2 Σχετικότητα συνδεόµενου περιεχοµένου 6:3 Ταίριασµα ονόµατος συνδέσµων µε τίτλους σελίδων προορισµού 6:4 Αποφυγή χρήσης χαρακτηριστικών συνδέσµων σε non-clickable αντικείµενα 6:5 Επανάληψη σηµαντικών συνδέσµων 6:6 Χρήση κειµένου στους συνδέσµους (αποφυγή αποκλειστικής χρήσης εικονιδίων) 6:7 6:8 Επισήµανση επισκεπτόµενων συνδέσµων Συνέπεια στα χαρακτηριστικά των συνδέσµων (clickability cues) Σύνδεσµοι ενσωµατωµένοι σε ευρύτερο σώµα κειµένου (embedded links) πρέπει 6:9 να περιλαµβάνουν κείµενο περιγραφικό του προορισµού τους. 6:10 Χρήση Pointing & Clicking (και όχι mousing over) για ενεργοποίηση συνδέσµων Προσεγµένο µήκος κειµένου συνδέσµων (αρκετά µεγάλο ώστε να είναι κατανοητό 6:11 αρκετά µικρό ώστε να αποφευχθεί η αναδίπλωση γραµµών) 6:12 ιαχωρισµός εσωτερικών από εξωτερικούς συνδέσµους 6:13 Αποσαφήνιση clickable περιοχών εικόνων

29 Guidelines Εµφάνιση Κειµένου [Text Appearance] 7 7:1 Χρήση µαύρου κειµένου σε ανοικτόχρωµο οµοιόµορφο φόντο 7:2 Κοινή µορφοποίηση στοιχείων της ίδιας κατηγορίας 7:3 Χρήση πεζών & κεφαλαίων (mixed case) για σώµα κειµένου 7:4 Οπτική συνέπεια γραµµάτων σε όλες τις οθόνες 7:5 Φειδωλή χρήση της έντονης γραφής 7:6 Χρήση στοιχείων απόσπασης προσοχής (κίνηση, τεράστιο µέγεθος) µόνο όταν είναι απολύτως απαραίτητο 7:7 Αποφυγή εξεζητηµένων γραµµατοσειρών 7:8 Χρήση γραµµάτων µεγέθους τουλάχιστον 12pt Εάν γίνεται κωδικοποιηµένη χρήση του χρώµατος (color-coding) τότε αυτή πρέπει 7:9 να είναι σαφής ή να επεξηγείται Απόδοση έµφασης σε σηµείο ενός σώµατος κειµένου µε αλλαγή των εµφανισιακών 7:10 χαρακτηριστικών της γραµµατοσειράς 7:11 Υιοθέτηση ενός κοινού τρόπου τονισµού (high-light) πληροφορίας

30 Guidelines Λίστες [Lists] 8 8:1 Παρουσίαση των επιλογών της λίστας µε κάποια σειρά ταξινόµησης 8:2 Τοποθέτηση σηµαντικών επιλογών στην κορυφή της λίστας 8:3 Μορφοποίηση κατά τρόπο που να διευκολύνεται η γρήγορη σάρωση Προβολή σχετιζόµενων αντικειµένων καλύτερα σε κάθετη λίστα παρά σε οριζόντια 8:4 παράθεση κειµένου 8:5 Τοποθέτηση επεξηγηµατικής κεφαλίδας λίστας Χρήση static menu (drop down lists) τοποθέτηση στην κορυφή συχνότερα 8:6 επιλεγµένων στοιχείων 8:7 Έναρξη αρίθµησης αντικειµένων από το 1 8:8 Επιλογή κατάλληλου στυλ λίστας 8:9 Το πρώτο γράµµα κάθε επιλογής πάντα µε κεφαλαίο

31 Guidelines Στοιχεία Ελέγχου [Screen-Based Controls (Widgets)] 9 a 9:1 ιαχωρισµός απαιτούµενων από προαιρετικά πεδία συµπλήρωσης φορµών 9:2 Σαφείς ετικέτες σε κουµπιά (pushbuttons) 9:3 Συνέπεια στις ετικέτες των πεδίων συµπλήρωσης δεδοµένων 9:4 Αποφυγή διαχωρισµού κεφαλαίων-µικρών σε κώδικες εισαγόµενους από χρήστη 9:5 Σαφήνεια στις ετικέτες των πεδίων συµπλήρωσης δεδοµένων 9:6 Ελαχιστοποίηση των δεδοµένων που εισάγει ο χρήστης (π.χ. Billing Address, Shipping Addres (copy from Billing)) 9:7 Τοποθέτηση ετικετών κοντά στα αντίστοιχα πεδία συµπλήρωσης 9:8 υνατότητα επισκόπησης εισαγόµενων δεδοµένων από τους χρήστες 9:9 Χρήση Radio-Buttons για αµοιβαία αποκλειστικές επιλογές 9:10 Χρήση καθιερωµένων στοιχείων ελέγχου 9:11 Πρόβλεψη για τυπικά σφάλµατα χρηστών 9:12 ιάσπαση δεδοµένων µεγάλου µεγέθους 9:13 Υιοθέτηση µίας µόνο µεθόδου εισαγωγής δεδοµένων

32 Guidelines Στοιχεία Ελέγχου [Screen-Based Controls (Widgets)] 9 b 9:14 Απόδοση προτεραιότητας στα κουµπιά (pushbuttons) 9:15 Χρήση Check-Boxes για την παροχή δυνατότητας πολλαπλών επιλογών 9:16 Αναφορά των µονάδων µέτρησης 9:17 Αποφυγή περιορισµού των ορατών στοιχείων ενός ListBox 9:18 Εµφάνιση προκαθορισµένων τιµών σε πεδία συµπλήρωσης δεδοµένων 9:19 Τοποθέτηση σηµείου εισαγωγής στο πρώτο πεδίο εισαγωγής δεδοµένων 9:20 ιασφάλιση ότι διπλο-κλικ δεν οδηγεί σε προβληµατικές καταστάσεις 9:21 Χρήση ανοικτών λιστών για επιλογή ενός από πολλά 9:22 Data entry field vs Select from list Επιλογή µε κριτήριο την ταχύτητα επιλογής 9:23 Αποφυγή χρήσης ενός radio button µόνο του 9:24 Παροχή Auto-Tabbing λειτουργικότητας 9:25 Ελαχιστοποίηση της ανάγκης χρήσης του κουµπιού Shift

33 Guidelines Γραφικά, Εικόνες & Πολυµέσα [Graphic, Images & Multimedia] 10a 10:1 Χρήση απλών εικόνων φόντου 10:2 Περιγραφή clickable εικόνων µε ετικέτες 10:3 Αποφυγή εικόνων µεγάλου µεγέθους που απαιτούν µεγάλο χρόνο «κατεβάσµατος» 10:4 Χρήση video, animation και ήχου µόνο όταν είναι απαραίτητα 10:5 Συµπερίληψη λογοτύπων 10:6 Αποφυγή χρήσης εικόνων σαν διαφηµιστικά banner 10:7 Αποφυγή χρήσης µεγάλων εικόνων στο επάνω µέρος της οθόνης 10:8 ιασφάλιση ότι οι εικόνες µεταφέρουν τα επιθυµητά µηνύµατα

34 Guidelines Γραφικά, Εικόνες & Πολυµέσα [Graphic, Images & Multimedia] 10b 10:9 Περιορισµός της χρήσης εικόνων (όχι απερίσκεπτη τοποθέτηση οπουδήποτε) 10:10 Συνοδεία πινάκων δεδοµένων µε αντίστοιχα γραφήµατα 10:11 10:12 10:13 Χρήση γραφικών για την παρουσίαση µεταβαλλόµενων σε πραγµατικό χρόνο δεδοµένων Παροχή εισαγωγικών επεξηγήσεων στα video και animation (πριν επιλεχθεί η έναρξη της εκτέλεσής τους) Προσοµοίωση αντικειµένων πραγµατικού κόσµου (π.χ. Κουµπιά players) 10:14 Χρήση εικονιδίων (thumbnails) για την προεπισκόπηση µεγάλων εικόνων 10:15 Χρήση εικόνων για τη διευκόλυνση εκµάθησης 10:16 Προσοχή στην χρήση φωτογραφιών ανθρώπων (µπορούν να επηρεάσουν τη δηµιουργία ή την αποτροπή του αισθήµατος εµπιστοσύνης προς το περιεχόµενο)

35 Γράφοντας Κείµενο 11 Guidelines [Writing Web Content] T EX t 11:1 11:2 Προσοχή στη σαφήνεια όταν διατυπώνεται σειρά ενεργειών που πρέπει να ακολουθηθούν Αποφυγή εξειδικευµένης ορολογίας 11:3 Αποφυγή εξεζητηµένων λέξεων 11:4 ιασαφήνιση ακρωνύµιων και συντοµεύσεων 11:5 Φειδωλή χρήση συντοµεύσεων 11:6 Χρήση κεφαλαίων-µικρών (mixed case) σε σώµα κειµένου 11:7 Οριοθέτηση του πλήθους λέξεων και προτάσεων ανά οθόνη 11:8 Οριοθέτηση του σώµατος κειµένου σε οθόνες πλοήγησης 11:9 11:10 Χρήση ενεργητικής φωνής Συγγραφή οδηγιών σε καταφατική (affirmative) 11:11 Περιγραφικότητα των εισαγωγικών προτάσεων

36 Guidelines Οργάνωση Περιεχοµένου [Content Organization] 12 12:1 Οργάνωση της πληροφορίας µε σαφήνεια 12:2 ιευκόλυνση της σάρωσης clear, well-located headings; short phrases and sentences; and small readable paragraphs 12:3 ιασφάλιση παρουσίασης όλων των απαραίτητων πληροφοριών 12:4 Οµαδοποίηση σχετιζόµενων στοιχείων 12:5 Ελαχιστοποίηση του αριθµού των απαιτούµενων κλικ 12:6 Οπτικοποίηση ποσοτικών δεδοµένων 12:7 Αποφυγή παρουσίασης πλεονάζουσας πληροφορίας 12:8 όµηση κατά τρόπο που να απευθύνεται σε όσο το δυνατό µεγαλύτερο ακροατήριο 12:9 Χρήση χρώµατος για οµαδοποίηση περιεχοµένου

37 Αναζητήσεις 13 Guidelines [Search] 13:1 ιασφάλιση χρησιµότητας αποτελεσµάτων αναζήτησης 13:2 υνατότητα αναζήτησης στο σύνολο του περιεχοµένου 13:3 υνατότητα αναζήτησης µε κεφαλαία και πεζά (case insensitivity) 13:4 υνατότητα αναζήτησης από κάθε οθόνη 13:5 υνατότητα απλών αναζητήσεων (one term keywords) 13:6 13:7 13:8 Γνωστοποίηση παρεχόµενων τρόπων αναζήτησης (simple, advanced, category search) Παροχή οδηγιών Παροχή προτύπων αναζήτησης (Search templates)