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

Παρουσίαση με θέμα: "ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΔΙΑΔΙΚΤΥΑΚΩΝ ΕΦΑΡΜΟΓΩΝ"— Μεταγράφημα παρουσίασης:

1 ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΔΙΑΔΙΚΤΥΑΚΩΝ ΕΦΑΡΜΟΓΩΝ
ΚΕΦΑΛΑΙΟ 4.4 ΣΧΕΔΙΑΣΜΟΣ ΔΙΕΠΑΦΗΣ ΧΡΗΣΤΗ ΠΑΛΛΑΣ ΑΝΑΣΤΑΣΙΟΣ / ΜΑΡΤ. 2016

2 ΚΕΦΑΛΑΙΟ 4.4 Τι είναι η «Διεπαφή χρήστη»;
Είναι το τμήμα του πληροφοριακού συστήματος που έρχεται σε επαφή και αλληλεπιδρά με τον χρήστη. Η σωστή σχεδίαση είναι πολύ σημαντική καθώς θα πρέπει να αναδεικνύει τις δυνατότητες του συστήματος και παράλληλα να ανταποκρίνεται στις ικανότητες και ιδιαιτερότητες του χρήστη.

3 Πρωτότυπα (prototypes)
Μια μέθοδος για την ανάπτυξη της διεπαφής. Για την δημιουργία κάθε πρωτοτύπου (prototype) ακολουθείται ένας μικρός «κύκλος ζωής» (εντός της φάσης του σχεδιασμού του συστήματος). Ο κύκλος ζωής περιλαμβάνει: Απαιτήσεις > Σχεδίαση > Αξιολόγηση > Υλοποίηση

4 Αντικείμενα Διεπαφών Γραφικά Αντικείμενα που χρησιμοποιούνται για την διεπαφή σε μια ιστοσελίδας (HTML Forms Elements) ΚΟΥΜΠΙΑ (BUTTONS) <input type=“submit” … /> Κουμπί Αποστολής φόρμας <input type=“reset” … /> Κουμπί Καθαρισμού φόρμας (Reset) <input type=“button” … /> Κουμπί εκτέλεση ενέργειας <button type=“button” … /> Κουμπί εκτέλεση ενέργειας ΠΛΑΙΣΙΑ ΚΕΙΜΕΝΟΥ (TEXT BOXES) <input type=“text” … /> Πεδίο Κειμένου ΠΕΡΙΟΧΗ ΚΕΙΜΕΝΟΥ (TEXT AREA) <textarea name=“…” rows=“…” cols=“…”> Περιοχή κειμένου </textarea> ΚΩΔΙΚΟΣ (PASSWORD) <input type=“password” … /> Για την εισαγωγή κωδικού (ο κωδικός δεν εμφανίζεται)

5 Αντικείμενα Διεπαφών Γραφικά Αντικείμενα που χρησιμοποιούνται για την διεπαφή σε μια ιστοσελίδας (HTML Forms Elements) ΚΟΥΜΠΙΑ ΜΟΝΑΔΙΚΗΣ ΕΠΙΛΟΓΗΣ (RADIO BUTTONS) <input type=“radio” … /> Επιλογή με  Κουκίδες ΚΟΥΜΠΙΑ ΕΠΙΛΟΓΩΝ (CHECK BOXES) <input type=“checkbox” … /> Επιλογή με  ΛΙΣΤΑ ΕΠΙΛΟΓΩΝ (LIST BOXES / SELECT BOXES) <select name=“…”> Επιλογή από λίστα <option value=“…”> … </option> <option value=“…”> … </option> </select> Μπορεί να χρησιμοποιηθεί για 1 ή και περισσότερες επιλογές χρησιμοποιώντας το attribute “Multiple”.

6 Αντικείμενα Διεπαφών ΜΠΑΡΕΣ ΟΛΙΣΘΗΣΗΣ (SLIDERS) <input type=“range” /> Επιλογή από μπάρα κύλισης (HTML5) ΛΙΣΤΕΣ ΔΕΔΟΜΕΝΩΝ (DATA LISTS) <input list=“…" name=“…”> Επιλογή από πολυπληθείς λίστες <datalist id=“…"> (HTML 5) <option value=“…"> </datalist> ΠΛΑΙΣΙΑ (FIELD SETS) Ομαδοποιεί τα στοιχεία <fieldset> μιας φόρμας <legend></legend> <input … /> <input … /> </fieldset>

7 Αναγνώριση Αντικειμένων

8 Βασικές Αρχές και Λάθη Ο σχεδιασμός της διεπαφής με το χρήστη αποτελεί «καθοριστικός» παράγοντας επιτυχίας. Είναι εκτός από την πρώτη εντύπωση που δίνει μια εφαρμογή στο χρήστη πρέπει να κεντρίζει το ενδιαφέρον του αλλά και να είναι χρηστική. Μόνο τότε μπορούμε να την χαρακτηρίσουμε επιτυχημένη. Η «καλή αισθητική» είναι σημαντική και προκαλεί θετικά συναισθήματα προς τον χρήστη του συστήματος/εφαρμογής

9 Βασικές Αρχές και Λάθη Τι περιλαμβάνει ο σχεδιασμός της διεπαφής:
Χρώματα Διάταξη Αντικειμένων (στοίχιση και ομαδοποίησή τους) Ορθογραφία – Σύνταξη Χρήση εικονιδίων Μέγεθος γραμμάτων

10 Οι κανόνες του J. Nielsen
Αντιστοιχία μεταξύ του συστήματος και του πραγματικού κόσμου Ορατή κατάσταση του συστήματος Έλεγχος και Ελευθερία του χρήστη Συνέπεια και συμμόρφωση με πρότυπα Πρόληψη Σφαλμάτων Αναγνώριση αντί της ενθύμησης Ευελιξία και Αποδοτικότητα της χρήσης* Αισθητική και μινιμαλιστική σχεδίαση Αναφορά Σφαλμάτων Βοήθεια και Τεκμηρίωση* * Δεν περιλαμβάνονται στο βιβλίο Πηγή:

11 Μαντέψτε τα Λάθη!

12 Μαντέψτε τα Λάθη!

13 Μαντέψτε τα Λάθη!