Σχεδίαση και Ανάπτυξη Διαδραστικών Εφαρμογών στο Παγκόσμιο Πλέγμα Πληροφοριών – Χρηστοκεντρικός Σχεδιασμός Web Design and Authoring User-Centered Design

Στις επόμενες διαφάνειες θα ασχοληθούμε με: Τη δημιουργία πλάνου για project κατασκευής ιστοσελίδων Χρηστοκεντρικός Σχεδιασμός Αρχικό σχεδιασμό σελίδωv, δημιουργία πρωτοτύπων Xρηση Wordpress για τη δημιουργία σελίδων Εισαγωγή εικόνων, video σε σελίδες Mobile access and content management Αξιολόγηση ενός ιστοχώρου

Η διαδικασία του σχεδιασμού Analysis Design Production Evaluation

Analysis DesignProductionEvaluation Κάνε τις παρακάτω ερωτήσεις όταν κατασκευάζεις το πλάνο σου για τη δημιουργία ενός ιστοχώρου Ποιος είναι ο σκοπός/ στόχος? Ποιο είναι το κοινό/ που απευθύνεσαι? Ποιο είναι το περιεχόμενο? Ήδη υπάρχοντα sites? Ποιο είναι το χρονοδιάγραμμα υλοποίησης?

Analysis DesignProductionEvaluation Ποιος είναι ο σκοπός/στόχος? Πληροφόρηση Διαφήμιση Κέρδος Προβολή

Analysis DesignProductionEvaluation Ποιο είναι το κοινό/ που απευθύνεσαι? Ηλικία, φύλο Προηγούμενη γνώση στο αντικείμενο Γνώση του Διαδικτύου Δημογραφικά στοιχεία Ενδιαφέροντα Εργασία Πως συνδέονται στο Διαδίκτυο (model,Isdn,Adsl, ασύρματα)

Analysis DesignProductionEvaluation Ποιο είναι το περιεχόμενο? Κείμενο, εικόνες, ήχος, video Τρόποι επικοινωνίας Τι περιεχόμενο ήδη υπάρχει και τι πρέπει να δημιουργηθεί εκ νέου Πόσο συχνά αλλάζει το περιεχόμενο, ή πόσο συχνά πρέπει να αλλάζει Τι υποδομή σε ανθρώπους και Η/Υ απαιτείται για την κατασκευή και συντήρηση του ιστοχώρου

Analysis DesignProductionEvaluation Έρευνα σε υπάρχοντα sites Μελέτησε ήδη υπάρχοντα παρόμοια sites, ειδικά των ανταγωνιστών/αντιπάλων σου Έλεγξε για τυχόν ιδέες που μπορείς να βελτιώσεις Μη θεωρείς ότι τα όμορφα από αισθητικής άποψης sites με κίνηση και χρώματα είναι τα καλύτερα. Τα Sites γεμάτα με κινούμενα γραφικά (animation) δεν είναι κατ’ανάγκην τα καλύτερα. Πρέπει να λάβεις υπόψη σου ότι δεν έχουν όλη γρήγορη πρόσβαση στο Διαδίκτυο.

Analysis Design ProductionEvaluation Σχεδιασμός του έργου Παγίωση του πλάνου σου Το σενάριο του ιστοχώρου σου (Storyboard for the web site): Η δομή του ιστοχώρου site structure, Η πλοήγηση (navigation), το περιεχόμενο (content), Η μορφή της κάθε σελίδας (page layout), κλπ. Επικοινωνία μεταξύ των μελών της ομάδας

Analysis Design ProductionEvaluation Χρηστικότητα / καλός σχεδιασμός του ιστοχώρου ή με άλλα λόγια Κανόνες Σχεδιασμού οι οποίοι οδηγούν σε: Ευκολία πλοήγησης/ανάγνωσης Εμπιστοσύνη, Οικειότητα, Επικοινωνία, Συνεχή επίσκεψη Και συνεπώς Στην αύξηση του επιπέδου Προσοχής του επισκέπτη προς το περιεχόμενο!

Δύο Φάσεις Σχεδιασμού Φάση Πρώτη Σχεδιασμός όλου του Ιστοχώρου (Site) Φάση Δεύτερη Σχεδιασμός της Ιστοσελίδας

Φάση Πρώτη - Σχεδιασμός όλου του Ιστοχώρου (Site Design) Μαζέψτε το περιεχόμενο και οργανώστε το σε ενότητες Δώστε κατάλληλο όνομα σε κάθε ενότητα Τα ονόματα θα γίνουν κουμπιά μετάβασης Δουλέψτε πάνω στην πλοήγηση μεταξύ των ενοτήτων Σχεδιάστε τον χάρτη του ιστοχώρου (site map) Απλοποιείστε το αποτέλεσμα….

Πλοήγηση μεταξύ των ενοτήτων Από το να έχεις χαθεί…. στο να γνωρίζεις που βρίσκεσαι.

Σχέση Σκοπού του Site - Στυλ Πλοήγησης

Αρχιτεκτονική Γραμμικής Πλοήγησης

Αρχιτεκτονική Ιεραρχικής Πλοήγησης

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

Αρχιτεκτονική Δικτυωτής Πλοήγησης Να χρησιμοποιείται όταν ο αριθμός των σελίδων είναι μικρός

Σχεδιάστε το Χάρτη του Site

Storyboards – graphical representation of the entire site

Φάση Δεύτερη - Σχεδιασμός της Ιστοσελίδας (Page Design) Η προσοχή του επισκέπτη πρέπει να δίνεται στο περιεχόμενο και όχι στη μορφή της σελίδας Κατασκευάστε ένα ή δύο σχέδια σελίδας και χρησιμοποιείστε τα για όλον τον ιστοχώρο Η θέση των κουμπιών και των σημείων μετάβασης πρέπει να παραμένει σταθερή σε όλες τιε σελίδες Τοποθετείστε τα σημαντικά θέματα στην αρχή των σελίδων Επιλέξτε κατάλληλα χρώματα

Ζωγραφίστε τη σελίδα σας

`

Wireframes – a “shell” showing the actual pages that will be created in the Web site

Κρατείστε λεπτή τη γραμμή τίτλου της σελίδας, περίπου 150 pixeles από την κορυφή

Στόχος του σχεδιαστή είναι η εύρεση της βέλτιστης λύσης

Σχεδιασμός Δικτυακών Τόπων Βασικό βήμα ο καθορισμός της αρχιτεκτονικής του δικτυακού τόπου ο τρόπος που είναι συνδεδεμένες μεταξύ τους οι ιστοσελίδες (σειριακή, ιεραρχική, πλέγμα, μικτή,κλπ.

Επιλογή Κατάλληλης Αρχιτεκτονικής Εξαρτάται από Παράγοντες όπως: Όγκος πληροφορίας (βιβλιοπωλείο: σειριακή ή ιεραρχική;) Είδος πληροφορίας (παρόμοιες πληροφορίες -> ιεραχική οργάνωση) Απαιτείται να ληφθεί υπόψη το περιεχόμενο (τύπος/είδος, υπάρχουσα δομή,,εταδεδομένα), το πλαίσιο χρήσης (οργανωτικοί στόχοι, εργασιακές πρακτικές, χρηματοδότηση, κουλτούρα, τεχνολογίες, ανθρώπινοι πόροι) και οι ομάδες χρηστών (εργασίες,ανάγκες, εμπειρία, μέθοδοι αναζήτησης πληροφορίας, κατάλληλη ορολογία).

Η δόμηση περιεχομένου αγγίζει θέματα όπως: Οργάνωση Λειτουργικότητα Περιήγηση Αναζήτηση Και συνεπώς ευκολία, αποδοχή και ευχρηστία!

Μη προσεγμένη οργάνωση και κατηγοριοποίηση της πληροφορίας επηρεάζει άμεσα τον τρόπο που αντλαμβάνονται οι χρήστες την πληροφορία. Π.χ. τοποθέτηση στοιχείων για μία γραμματέα ενός διευθυντή κάτω από την κατηγορία «Προσωπικό Διεύθυνσης» Επίσης τι σημαίνει μία κατηγορία με τίτλο «Προϊόντα» : αγορά,υποστήριξη, περιγραφή;

Να δομήσουμε την πληροφορία όπως εμείς οι σχεδιαστές πιστεύουμε; Με ποιους τρόπους καθένας μας όμως δομεί τα προσωπικά του αρχεία στον Η/Υ; Με βάση το θέμα, τη χρονολογική σειρά; Μήπως αλφαβητικά; Μήπως με τα πιθανές ενέργειες; Ή μήπως με έναν μικτό τρόπο; Πρέπει συνεπώς να καλύψουμε τις ανάγκες όσο το δυνατόν περισσότερων χρηστών! Πώς θα γίνει αυτή η ομαδοποίηση;

Τεχνικές εύρεσης Αρχιτεκτονικής Ιστοτόπων Τεχνική Ταξινόμησης Καρτών (Card Sorting, Nielsen) Ζητάμε από αντιπροσωπευτικούς χρήστες να δομήσουν τις βασικές έννοιες σε κατηγορίες ->εμπλοκή χρηστών στο σχεδιασμό (συμμετοχικός σχεδιασμός) Πλεονεκτήματα: 1.Πιθανή αποδοχή από όλους τους χρήστες 2.Εύρεση λαθών στα πρώτα στάδια, λάθη ορολογίας 3.Απλή και απαιτεί σχετικά λίγους πόρους

Χρηστοκεντρικός Σχεδιασμός Ενεργός ρόλων των χρηστών στη διαδικασία σχεδιασμού, συμμετοχή στην αξιολόγηση ενδιάμεσων εκδόσεων του τελικού προϊόντος. Γενικές Αρχές: 1.Μελετάμε τα γνωστικά και κοινωνικά χαρακτηριστικά τους σε συνδυασμό με τις εργασίες που επιτελούν 2.Αναπτύσσουμε ένα πρωτότυπο και μελετάμε αντιδράσεις και σχόλια 3.Επαναλαμβάνουμε τη διαδικασία βελτιώνοντας το πρωτότυπο

Ο ρόλος των χρηστών εξαρτάται από το είδος του ιστοτόπου Προσωπική ιστοσελίδα (μικρή συμμετοχή χρηστών) Διαδικτυακή πύλη (μεγάλη συμμετοχή)

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

Απαιτείται Κατανόηση: 1.Των απαιτούμενων λειτουργιών, εργασιών, ροής και παρουσίασής τους στις ιστοσελίδες 2.Των απαιτήσεων περιεχομένου (είδος/βάθος πληροφορίας, τρόπος παρουσίασης), δόμησης πληροφορίας (ομαδοποίηση, πλοήγηση), σχεδίαση αντικειμένων (υπερσύνδεσμοι, λίστες περιεχομένων), εμφάνιση περιεχομένου (χρώματα, γραμματοσειρές, οπτικός διαχωρισμός)

Η προτεινόμενη διαδικασία του σχεδιασμού (μοντέλο του καταρράκτη) Analysis Design Production Evaluation

Υπάρχουν άλλα μοντέλα σσχεδιασμού; Το μοντέλο του καταρράκτη είναι ένα σειριακό μοντέλο Το ελικοειδές μοντέλο ή μοντέλο σπιράλ. Η ανάπτυξη είναι μία διαδικασία επαναληπτική όπου κάθε φορά βελτιώνουμε ένα πρωτότυπο μέχρι να προκύψει η τελική εφαρμογή (συχνή η χρήση του στο διαδίκτυο). Το αστεροειδές μοντέλο. Δεν υπάρχει προκαθορισμένη σειρά στις φάσεις ανάπτυξης. Ο κεντρικός άξονας είναι η αξιολόγηση.

Κανόνες Αποτελεσματικού Σχεδιασμού Ιστοσελίδων Ταχύτητα φόρτωσης Τοπικές μηχανές αναζήτησης Μέγεθος ιστοσελίδων Τεχνολογία που χρησιμοποιείται Υποστήριξη πλοήγησης Ομοιομορφία δικτυακού τόπου Απλότητα διεπιφάνειας (γραφικά, χρώματα) Περιεχόμενο! (λιτό, με σαφήνεια, ανανεωμένο, χρήση υπερσυνδέσμων Εξασφάλιση αυθύπαρκτου χαρακτήρα ιστοσελίδας (σε ποιο ιστότοπο ανήκει)

Κανόνες Σχεδίασης Αρχικής Σελίδας Τίτλος Στοιχεία επικοινωνίας Ενημέρωση για τις σημαντικότερες λειτουργίες Μηχανισμός αναζήτησης Ενημέρωση για περιεχόμενο Ονόματα υπερσυνδέσμων Χάρτης ιστοτόπου Όχι έντονα γραφικά στις κύριες πληροφορίες

Jacob Neilson’s “Τα 10 λάθη στο σχεδιασμό στο Web” Using frames Gratuitous use of Bleeding-edge technology Scrolling text, constantly running animation Complex URLs Orphan pages Long scrolling pages Lack of navigation support Non-standard link colors Outdated information Long loading time

Top 10 website design tips - checklist Know your audience Keep web pages short Limit the amount of text Avoid large images Use web safe colors Clearly identify all links Check spelling Use a site map or directory page Update and check all links Include contact information

Χρήση ενός εργαλείου συγγραφής (DreamWeaver) για τη δημιουργία των σελίδων Άλλα εργαλεία FrontPage PageMill Netscape Composer AnalysisDesign Production Evaluation

Έλεγξε τις web σελίδες τοπικά Ανέβασε τα αρχεία σου σε ένα Web server: δημοσιοποίηση το έργο σου Λάβε σχόλια από τους χρήστες Επανα-διοργάνωσε, επανα-σχεδίασε και αναβάθμισε τον ιστοχώρο σου AnalysisDesignProduction Evaluation

Δημοσιοποίησε το web site σου Δημιούργησε τον Ιστοχώρο στον υπολογιστή Web Server E-class Επισκέπτες του site Upload download

10 Ευριστικοί Κανόνες Σχεδιασμού του Jacob Nielsen 1.Visibility of system status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. 2.Match between system and the real world The system should speak the users' language, with words, phrases, and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in natural and logical order. 3.User control and freedom Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo. 4.Consistency and standards Users should not have to wonder whether different words, situations, or actions men the same thing. Follow platform conventions. 5.Error prevention Even better than good error messages is a careful design which prevents a problem from occurring in the first place. 6.Recognition rather than recall Make objects, actions and options visible. The user should not have to remember information from on part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate. 7.Flexibility and efficiency of use Accelerators - unseen by the novice user - may often speed up the interaction for the expert user to such an extent that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. 8.Aesthetic and minimalist design Dialogues should not contain information which irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. 9.Help users recognize, diagnose, and recover from errors Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution. 10.Help and documentation Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.