ΣΧΕΔΙΑΣΗ ΔΙΕΠΑΦΩΝ ΑΝΘΡΩΠΟΥ- ΥΠΟΛΟΓΙΣΤΗ (10)

Transcript

1 ΤΕΙ ΔΥΤΙΚΗΣ ΕΛΛΑΔΑΣ ΤΜΗΜΑ ΔΙΟΙΚΗΣΗΣ ΕΠΙΧΕΙΡΗΣΕΩΝ (ΜΕΣΟΛΟΓΓΙ) ΑΝΑΛΥΣΗ ΚΑΙ ΣΧΕΔΙΑΣΜΟΣ ΠΛΗΡΟΦΟΡΙΑΚΩΝ ΣΥΣΤΗΜΑΤΩΝ ΣΧΕΔΙΑΣΗ ΔΙΕΠΑΦΩΝ ΑΝΘΡΩΠΟΥ- ΥΠΟΛΟΓΙΣΤΗ (10) ΓΙΩΡΓΟΣ ΜΟΥΡΚΟΥΣΗΣ Μηχανικός Η/Υ & Πληροφορικής Διδάκτορας Μηχανικός ΕΜΠ Υλικό: ΘΕΩΡΙΑ

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

3 Σχεδίαση Φορμών και Αναφορών (συν.) 3 Και οι δύο αποτελούν τη διεπαφή μέσω της οποίας οι χρήστες μπορούν να: Εισάγουν δεδομένα στο πρόγραμμα (φόρμες) Λαμβάνουν πληροφορίες από το πρόγραμμα (αναφορές) Παλιά, οι αναλυτές χρησιμοποιούσαν σχεδιαγράμματα και σκαριφήματα για να απεικονίσουν τη μορφή που θα είχαν οι οθόνες αυτές. Σήμερα υπάρχουν στο εμπόριο πολλά προγράμματα τα οποία επιτρέπουν την εύκολη σχεδίαση τους. Το πλεονέκτημα των προγραμμάτων αυτών είναι ότι οι παραγόμενες φόρμες μπορούν να χρησιμοποιηθούν άμεσα για την υλοποίηση του τελικού προϊόντος.

4 4 Παράδειγμα ΕργαλείουΣχεδίασης Διεπαφής

5 Σχεδίαση Φορμών και Αναφορών Φόρμα Ένα επιχειρησιακό έγγραφο που περιέχει ορισμένα προκαθορισμένα δεδομένα και περιοχές όπου στοιχεία πρέπει να συμπληρωθούν Μία φόρμα βασίζεται συνήθως σε μια εγγραφή μιας βάσης δεδομένων Έκθεση/Αναφορά Ένα επιχειρησιακό έγγραφο που περιέχει μόνο προκαθορισμένα δεδομένα Μόνο για ανάγνωση ή προβολή δεδομένων Τυπικά περιέχει δεδομένα από πολλές εγγραφές της βάσης δεδομένων

6

7 Σχεδίαση Αναφοράς με Διάγραμμα Χαρακτήρων Εκτηπωτή (dot-matrix)

8

9 Τι δεν μας αρέσει στις διεπαφές Έχετε παραδείγματα σχεδίασης φορμών και αναφορών που δεν είναι λειτουργικά; Προσοχή λοιπόν κατά την σχεδίαση φορμών και αναφορών

10 Η διαδικασία σχεδιασμού φόρμες και εκθέσεις Επικεντρωνόμαστε στις δραστηριότητες του Χρήστη Πρέπει να ακολουθούνται κάποια πρότυπα Προσδιορίζουμε τις απαιτήσεις: Ποιος θα χρησιμοποιήσει τη φόρμα ή την αναφορά; Ποιος είναι ο σκοπός της φόρμας ή της αναφοράς; Πότε απαιτείται ή χρησιμοποιείται η αναφορά; Πού χρειάζεται φόρμας ή της έκθεσης να παραδοθεί ή να χρησιμοποιηθεί; Πόσοι άνθρωποι πρέπει να χρησιμοποιήσουν ή να προβάλουν τη φόρμα ή την αναφορά;

11 Η διαδικασία σχεδιασμού φόρμες και εκθέσεις Προτυποποίηση Το αρχικό πρότυπο σχεδιάζεται από τις προδιαγραφές Οι χρήστες επανεξετάζουν τον πρωτότυπο σχεδιασμό και είτε αποδέχονται το σχεδιασμό ή απαιτούν αλλαγές Εάν ζητούνται αλλαγές, ο κύκλος κατασκευήαξιολόγηση-αίτηση αλλαγής επαναλαμβάνεται μέχρις ότου ο σχεδιασμός είναι αποδεκτός

12 Παραδοτέα και Αποτέλεσμα Οι Προδιαγραφές σχεδίασης είναι βασικά παραδοτέα και περιέχει τρία τμήματα Η αφηγηματική επισκόπηση Δείγμα σχεδιασμού Δοκιμές και αξιολόγηση ευχρηστίας

13 Γενικές Κατευθυντήριες Γραμμές Μορφοποίηση Επισήμανση Χρηση με φειδώ για να αποσπάσει την προσοχή του χρήστη προς ή από ορισμένες πληροφορίες Ηχητικούς τόνους και εναλλαγή χρώματος/φωτεινότητας μόνο για να τονιστούν κρίσιμες πληροφορίες που απαιτούν άμεση προσοχή των χρηστών Οι μέθοδοι θα πρέπει να επιλέγονται με συνέπεια και να χρησιμοποιούνται ανάλογα το επίπεδο σπουδαιότητας των πληροφοριών που επισημαίνονται

14

15 Γενικές Κατευθυντήριες Γραμμές Μορφοποίησης Εμφάνιση Κείμενου Εμφάνιση κειμένου με μικτά κεφαλαία και πεζά - χρήση συμβατικών σημείων στίξης Χρησιμοποιήστε διπλό διάστημα, αν το επιτρέπει ο χώρος. Αν όχι, τοποθετήστε μια κενή γραμμή μεταξύ των παραγράφων Αριστερή στοίχιση κειμένου και να αφήσει ένα δεξί περιθώριο Μη-συλλαβισμός λέξεων ανάμεσα στις γραμμές Χρησιμοποιήστε υποσημειώσεις και ακρωνύμια μόνο όταν είναι ευρέως κατανοητά από τους χρήστες και είναι σημαντικά μικρότερα σε έκταση από το πλήρες κείμενο

16 Γενικές Κατευθυντήριες Γραμμές Μορφοποίησης Πίνακες και Λίστες Ετικέτες Όλες οι στήλες και γραμμές πρέπει να έχουν ετικέτες με νόημα Οι ετικέτες πρέπει να διαχωρίζονται από άλλες πληροφορίες, χρησιμοποιώντας επισήμανση Επανεμφάνιση των ετικέτων όταν τα δεδομένα εκτείνονται πέρα από μία μόνο οθόνη ή σελίδα

17 Γενικές Κατευθυντήριες Γραμμές Μορφοποίησης Πίνακες και Λίστες (συν.) Διαμόρφωση στηλών, γραμμών, και κείμενο Ταξινόμηση με ουσιαστικό σκοπό Τοποθετήστε μια κενή γραμμή μεταξύ κάθε 5 σειρές σε μεγάλες στήλες Παρόμοιες πληροφορίες που εμφανίζονται σε πολλαπλές στήλες πρέπει να ταξινομούνται κάθετα Στήλες πρέπει να έχουν τουλάχιστον δύο κενά μεταξύ τους Επιτρέψτε λευκό χώρο στις εκτυπωμένες αναφορές για το χρήστη για να γράψει σημειώσεις Χρησιμοποιήστε μια ενιαία γραμματοσειρά, εκτός από την έμφαση Χρησιμοποιήστε την ίδια οικογένεια γραμματοσειράς μεταξύ των οθονών και αναφορών Αποφύγετε φανταχτερές γραμματοσειρές

18 Γενικές Κατευθυντήριες Γραμμές Μορφοποίησης Πίνακες και Λίστες (συν.) Μορφοποίηση αλφαριθμητικών δεδομένα Δεξιά στοίχιση για τα αριθμητικά δεδομένα και να ευθυγραμμίσει τις στήλες με τελείες ή άλλα διαχωριστικό Αριστερή στοίχιση για δεδομένα κειμένου. Χρησιμοποιήστε μικρού μήκους γραμμής συνήθως 30 με 40 χαρακτήρες ανά γραμμή Σπάστε μακρές ακολουθίες αλφαριθμητικών δεδομένων σε μικρές ομάδες τριών έως τεσσάρων χαρακτήρων το καθένα

19

20 8.20

21 Σχεδίαση Διεπαφών και Διαλόγων Συγκεντρωνόμαστε στο πώς οι πληροφορίες παρέχονται και συλλαμβάνονται από τους χρήστες Οι διάλογοι είναι ανάλογες με μια συνομιλία μεταξύ δύο ανθρώπων Μια καλή διεπαφή ανθρώπου-υπολογιστή παρέχει μια εννοιαία δομή για την εύρεση, προβολή, και ανάκτηση των διαφορετικών τμημάτων του συστήματος

22 Η Διαδικασία Σχεδίαση Διεπαφών και Διαλόγων Είναι δραστηριότητα Χρηστο-κεντρική Παρόμοια με την διαδικασία σχεδίασης Φορμών και Αναφορών Πραγματοποιούμε προτυποίηση Άντληση πληροφοριών Δημιουργία πρότυπου Έλεγχος και αξιολόγηση ευχρηστίας Πραγματοποίηση βελτιώσεων Παραδοτέα Η αφηγηματική επισκόπηση Δείγματα σχεδιασμού Αναφορά Αξιολόγησης

23 23 Διαδικασία Σχεδίασης Διεπαφής

24 Διεπαφή με κακή πλοήγηση

25 Διεπαφή με σωστή πλοήγηση

26 Σχεδιασμός Διατάξεων (Layout) Η ευελιξία και η συνέπεια είναι πρωταρχικοί στόχοι του σχεδιασμού Οι χρήστες θα πρέπει να μπορούν να κυκλοφορούν ελεύθερα μεταξύ των πεδίων Τα δεδομένα δεν πρέπει να αποθηκεύονται μόνιμα μέχρι ο χρήστης το επιλέξει Κάθε κουμπί και εντολή θα πρέπει να ανατεθεί σε μία μόνο λειτουργία 8.26 Copyright 2012 Pearson Education,

27 Δόμηση Εισαγωγή δεδομένων

28 28 Παράδειγμα Σχεδιαστικών Επιλογών για Εισαγωγή Στοιχείων

29 Τεχνικές εντοπισμού σφαλμάτων

30 Μηνύματα προς το Χρήστη Πληροφορίες Κατάστασης Διατηρεί το χρήστη ενημερωμένο με την κατάσταση του συστήματος Εμφάνιση πληροφοριών κατάστασης αν η λειτουργία διαρκεί περισσότερο από ένα ή δύο δευτερόλεπτα Μηνύματα σφάλματος και προειδοποιήσεις Τα μηνύματα θα πρέπει να είναι συγκεκριμένα και χωρίς κωδικούς σφαλμάτων και ειδική ορολογία Ο Χρήστης θα πρέπει να καθοδηγείται προς ένα αποτέλεσμα και όχι να επιπλήτεται

31 Κοινά Στοιχεία Ελέγχου Διεπαφών (Common GUI Controls) Text boxes Radio buttons Check boxes List boxes Drop down lists Buttons

32 Σχεδίαση Διαγραμμάτων Διαλόγων Ορισμός Ακολουθίας Διεπαφών Απόκτηση σαφής κατανόησης του χρήστη, των λειτουργιών, των τεχνολογικές και τα χαρακτηριστικά περιβάλλοντος του συστήματος Διάγραμμα Διάλογων Μια τυπική μέθοδος για το σχεδιασμό και την αναφορά των διαλόγων ανθρώπου-υπολογιστή, χρησιμοποιώντας διαγράμματα με κουτιά και συσχετίσεις (γραμμές)

33 Διάγραμμα διαλόγων Μοναδικός Αριθμός Αναφοράς Διεπαφής Τίτλος ή περιγραφή Διεπαφής Αριθμούς Αναφοράς Διεπαφών Επιστροφής

34