Σχεδίαση της διεπαφής χρήστη ΑΡΙΣΤΟΤΕΛΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΘΕΣΣΑΛΟΝΙΚΗΣ ΤΜΗΜΑ ΠΛΗΡΟΦΟΡΙΚΗΣ Σταύρος Ν. Δηµητριάδης Λέκτορας Πληροφορική και Εκπαίδευση 2005

Βασικοί Άξονες Σχεδίασης (1) Προδιαγραφές σχεδίασης της διεπαφής χρήστη (2) Προδιαγραφές οργάνωσης στοιχείων πολυμέσων (3) Προδιαγραφές οργάνωσης της δομής του ΕΛ

Υποδείξεις αποδοτικής σχεδίασης Οθόνης (Screen Design) Κανόνες ευχρηστίας για τη σχεδίαση της διεπαφής χρήστη (Usability heuristics) 9 κανόνες ευχρηστίας (Schneiderman) Υποδείξεις αποδοτικής σχεδίασης Οθόνης (Screen Design) ΠΡΟΣΟΧΗ & ΕΝΔΙΑΦΕΡΟΝ ΕΜΠΛΟΚΗ & ΕΠΕΞΕΡΓΑΣΙΑ ΟΡΓΑΝΩΣΗ & ΠΛΟΗΓΗΣΗ

1 - Η κατάσταση του συστήματος θα πρέπει να γίνεται φανερή στους χρήστες Το λογισμικό να πληροφορεί πάντοτε τον χρήστη για το τι συμβαίνει στο σύστημα δίνοντάς του μια κατάλληλη ανάδραση (feedback). Παράδειγμα: file copy Αντιπαράδειγμα: Text copy

2 - Το λογισμικό θα πρέπει να «μιλά» τη γλώσσα του χρήστη Χρησιμοποιήστε γλώσσα κατανοητή από τον χρήστη (λέξεις,φράσεις, έννοιες) για τα μηνύματα που μεταδίδει το λογισμικό προς αυτόν όχι δύσκολους στην κατανόηση τεχνικούς όρους Αντιπαράδειγμα: Το μήνυμα «Συνέβη σφάλμα τύπου 101» δεν βοηθά τον χρήστη να καταλάβει ποιο ακριβώς είναι το πρόβλημα.

3 - Το λογισμικό δεν πρέπει να «τιμωρεί» τον χρήστη Το λογισμικό θα πρέπει πάντοτε να επιτρέπει στον χρήστη να ακυρώσει την επιλογή του και να επιστρέψει στην αρχική του κατάσταση και όχι να τον «κλειδώνει» σε μια σειρά ενεργειών που ξεκίνησε κατά λάθος. Προσφέρετε δυνατότητες ακύρωσης (undo) & επαναφοράς (redo) των ενεργειών.

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

Σχεδίαση Οθόνης: Η διάταξη «Ζ» Υποστηρικτικό υλικό, αναδυόμενα πλαίσια (εκεί που εστιάζει το μάτι στη συνέχεια) Σημαντικότερη πληροφορία (εκεί που εστιάζει πρώτα το μάτι) Πλοήγηση Οδηγίες

Επιλέξτε ένα Θέμα (ή Μεταφορά) Προσθέτει ενδιαφέρον Συνδέει μεταξύ τους τα στοιχεία του περιβάλλοντος εφαρμόζοντας έναν ενοποιημένο τρόπο παρουσίασης Βοηθά στην πλοήγηση Ενισχύει την κατανόηση του τρόπου που είναι οργανωμένες οι πληροφορίες Προτιμήστε Θέματα (ή Μεταφορές) σχετικά με την εργασία και όχι φανταστικά

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

6 - Ευελιξία και αποδοτικότητα χρήσης Οι χρήστες θα πρέπει να μπορούν να εκτελούν τις ενέργειες με περισσότερους από έναν τρόπους ώστε να επιλέγουν ποιος τους ταιριάζει καλύτερα Προβλέψτε τρόπους γρήγορης εκτέλεσης ενεργειών (συντομεύσεις -- shortcuts) για τους έμπειρους χρήστες του λογισμικού. Συμπεριλάβετε πολλαπλούς τρόπους εκτέλεσης ενεργειών, όπως καταλόγους επιλογών (menu), εικονίδια (icons), συντομεύσεις (πχ. Ctlr-P  Print)

7 - Λιτότητα Περιοριστείτε στις απαραίτητες πληροφορίες. Η ταυτόχρονη παρουσίαση πλήθους πληροφοριών μπορεί να συγχύσει και να απογοητεύσει τον χρήστη. Κάθε πρόσθετη πληροφορία «ανταγωνίζεται» την σημαντική πληροφορία στη μνήμη του χρήστη …με αποτέλεσμα να την καθιστά λιγότερο «ορατή» και αξιοποιήσιμη.

8 - Υποστηρίξτε τους χρήστες στο να εντοπίσουν και να διορθώσουν τα λάθη τους Χρησιμοποιήστε απλή γλώσσα για τα μηνύματα λάθους Eντοπίστε και εκφράστε με ακρίβεια το λάθος Προτείνετε (εφόσον γίνεται) κάποια λύση.

Βοήθεια Κάθε λογισμικό θα πρέπει να συνοδεύεται από πληροφορίες βοήθειας (help pages). Σχεδιάστε την Βοήθεια ώστε … Να προσφέρει στο χρήστη πληροφορίες άμεσα σχετικές με το θέμα που τον απασχολεί, Να παρουσιάζουν με σαφήνεια τα βήματα που πρέπει να κάνει ο χρήστης και Να μην είναι μεγάλες σε έκταση.

9 - Αποφύγετε την επιβάρυνση της ενεργής μνήμης του χρήστη Η ενεργή μνήμη (working memory) του ανθρώπου έχει περιορισμένη χωρητικότητα Κανόνας του 7 + - 2 (δηλ. από 5 μέχρι 9 στοιχεία) Μην επιβαρύνετε την ενεργό μνήμη των χρηστών αναγκάζοντάς τους να θυμούνται πάρα πολλά πράγματα για τις λειτουργίες της διεπαφής Σχεδιάστε με βάση την αναγνώριση πληροφορίας και όχι την ανάκληση

Υποδείξεις αποδοτικής σχεδίασης Οθόνης (Screen Design) ΠΡΟΣΟΧΗ & ΕΝΔΙΑΦΕΡΟΝ ΕΜΠΛΟΚΗ & ΕΠΕΞΕΡΓΑΣΙΑ ΟΡΓΑΝΩΣΗ & ΠΛΟΗΓΗΣΗ

ΟΘΟΝΗ Οι καλά σχεδιασμένες οθόνες θα πρέπει να είναι Oπτικά ενδιαφέρουσες Eύκολες στην ανάγνωσή τους Χωρίς ενοχλητικά ή αποπροσανατολιστικά στοιχεία

Χαρακτηριστικά καλής σχεδίασης Οθόνης (1/3) Η καλή σχεδίαση μιας οθόνης αναμένεται να ικανοποιεί ορισμένες βασικές απαιτήσεις, όπως: (1) ΠΡΟΣΟΧΗ & ΕΝΔΙΑΦΕΡΟΝ (α) να εστιάζει την προσοχή του χρήστη, Λιτή & περιεκτική παρουσίαση της πληροφορίας Οπτικές ενδείξεις για το ποια πληροφορία είναι σημαντική (β) να αναπτύσσει και να διατηρεί το ενδιαφέρον, Αξιοποίηση των στοιχείων πολυμέσων (ειδικά των δυναμικών όπως ήχος, σχεδιοκίνηση, video) για να κεντρίζει το ενδιαφέρον των χρηστών

Χαρακτηριστικά καλής σχεδίασης Οθόνης (2/3) (2) ΕΜΠΛΟΚΗ & ΕΠΕΞΕΡΓΑΣΙΑ (α) να ενισχύει την εμπλοκή μεταξύ του χρήστη και του περιεχομένου του μαθήματος, Αξιοποίηση δυνατοτήτων διάδρασης Πχ. εμφάνιση πρόσθετων πληροφοριών μέσω υπερσυνδέσμων (β) να ενισχύει την επεξεργασία των πληροφοριών, Τακτική χρήση διαδραστικών οθονών με ποικίλες δραστηριότητες άσκησης πχ. κλειστού τύπου ερωτήματα (Multiple choice, drag & drop, κλπ.) μικρές προσομοιώσεις

Μαθησιακή Διάδραση (1/3) Διάδραση που οργανώνεται με στόχο να προσφέρει μαθησιακές εμπειρίες στον εκπαιδευόμενο Η Μάθηση προκύπτει κατά την Επεξεργασία της Πληροφορίας Οι εκπαιδευόμενοι πρέπει να επεξεργαστούν την πληροφορία με ενεργό τρόπο ώστε να την κατανοήσουν και να την θυμούνται Η έρευνα έχει δείξει ότι είναι σημαντικό να έχει νόημα η διάδραση Δηλ. να εντάσσεται μέσα σε ένα γενικότερο πλαίσιο γνώσης και κατανόησης που πρέπει να αναπτύξει ο εκπαιδευόμενος

Μαθησιακή Διάδραση: Υποδείξεις (2/3) Δώστε… …συχνές ευκαιρίες για διάδραση πχ. τουλάχιστον κάθε τρεις ή τέσσερις οθόνες. Διαιρέστε… … το περιεχόμενο σε μικρά τμήματα και φτιάξτε ερωτήσεις (με ανάδραση), περιοδικές ανασκοπήσεις και περιλήψεις για κάθε τμήμα. Τοποθετήστε… … όσες περισσότερες ερωτήσεις μπορείτε χωρίς όμως να διακόπτετε τη συνέχεια της διδακτικής πορείας. Εμφανίστε… … μια ερώτηση μετά, αλλά όχι ακριβώς αμέσως μετά, την εμφάνιση κάποιου τμήματος του περιεχομένου.

Μαθησιακή Διάδραση: Υποδείξεις (3/3) Σχεδιάστε… … ερωτήσεις που να μπορούν να απαντήσουν οι εκπαιδευόμενοι με βάση το υλικό που έχουν μάθει στα προηγούμενα. Ζητήστε… … από τους σπουδαστές να εφαρμόσουν αυτά που έχουν μάθει παρά να απομνημονεύσουν και να επαναλάβουν απαντήσεις.

Ανάδραση: Υποδείξεις (1/2) … η έξοδος (στην οθόνη) που πληροφορεί τον εκπαιδευόμενο σχετικά με την καταλληλότητα & ποιότητα της απόκρισής του …ενημερώνει για το ποσοστό επιτυχίας στην επίλυση των προβλημάτων Η ανάδραση είναι ένας τρόπος για ενίσχυση, εμβάθυνση και διευκρίνιση. Η ανάδραση θα πρέπει να αναδεικνύει τον τρόπο με τον οποίο μια πληροφορία είναι νοηματικά σχετική και όχι να τονίζει πως κάτι είναι ολοφάνερα ή απόλυτα «σωστό».

Ανάδραση: Υποδείξεις (2/2) Εμφανίστε την ανάδραση… … στην ίδια οθόνη με την ερώτηση και την απόκριση του σπουδαστή. … αμέσως μετά την απάντηση του σπουδαστή για να επιβεβαιώσετε μια σωστή απάντηση. … Για τις λανθασμένες απαντήσεις δώστε στον σπουδαστή μια υπόδειξη και ζητήστε του να ξαναπροσπαθήσει. Δώστε ανάδραση που να ενθαρρύνει τον σπουδαστή… …όμως μη δίνετε το είδος της ανάδρασης που θα έκανε τον σπουδαστή να επιλέγει λάθος απαντήσεις απλά και μόνο για να δει την ανάδραση που θα εμφανιστεί.

Χαρακτηριστικά καλής σχεδίασης Οθόνης (3/3) ΟΡΓΑΝΩΣΗ & ΠΛΟΗΓΗΣΗ (α) να βοηθά τους σπουδαστές να βρίσκουν και να οργανώνουν τις πληροφορίες, και (β) να διευκολύνει την πλοήγηση στο περιεχόμενο Επαρκή & Εύχρηστα Εργαλεία Πλοήγησης, όπως πχ.: Διαδραστικός Χάρτης όλης της εφαρμογής Μηχανισμοί αναζήτησης Δυνατότητα σήμανσης κόμβων ως «αγαπημένων» Δυνατότητα καθορισμού «μονοπατιών διάσχισης» από τον χρήστη .........................................

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

Πλοήγηση: Υποδείξεις (2/3) Οργάνωση της Πλοήγησης Πάνελ για τον έλεγχο της πλοήγησης πχ. με τη μορφή ενός μικρού πλαισίου με πλήκτρα πλοήγησης τοποθετημένο στο κάτω μέρος της οθόνης Για καλύτερο έλεγχο… …να χρησιμοποιηθούν προσεκτικά επιλεγμένες λέξεις ή εικονίδια μαζί με τα εργαλεία πλοήγησης του προγράμματος. Παγκόσμια κατανοητές μορφές εικονιδίων… …όπως τα play, stop και pause για τα video ή audio clips θα πρέπει να χρησιμοποιούνται όποτε είναι εφικτό

Πλοήγηση: Υποδείξεις (3/3) Ενδείξεις θέσης μέσα στη συνολική πορεία: πχ. (4/12) Πλήκτρα: «ΕΠΟΜΕΝΗ», «ΠΡΟΗΓΟΥΜΕΝΗ» Πλήκτρο «‘ΕΞΟΔΟΣ» Να σχεδιαστεί με τρόπο που να επιτρέπει στο χρήστη να εγκαταλείψει το πρόγραμμα από οποιοδήποτε σημείο. Πλήκτρο «Χάρτης» Εμφανίζει πορεία ή θέση του χρήστη μέσα στην εφαρμογή (συνήθως δενδρική δομή) Λειτουργεί και ως πίνακας περιεχομένων ολόκληρου του προγράμματος Δίνει την ευκαιρία στους σπουδαστές να μετακινούνται σε άλλα τμήματα ή να ξαναπηγαίνουν σε τμήματα απ’ όπου έχουν ήδη περάσει Πλήκτρο «ΒΟΗΘΕΙΑ» Γενικότερες πληροφορίες και λεπτομέρειες που οι περισσότεροι εκπαιδευόμενοι πιθανώς να μην χρειαστούν Υλικό για εμβάθυνση ή περιφερειακό υλικό