ΕΠΛ 012. θεωρία Σχεδιασµού Ιστοσελίδων

Transcript

1 ΕΠΛ 012 θεωρία Σχεδιασµού Ιστοσελίδων Design Principles

2 Web Site Life Cycle Site Definition & Planning Information Architecture Design Prototype Implementation Validation and Testing Operation - Launch

3 Ορισµός & Προγραµµατισµός Ορισµός σκοπού & αποστολής Άλλο ο χρήστης και άλλο ο πελάτης Συλλογή απαιτήσεων πελατών Ποιος ο σκοπός? Τύπος συναλλαγών/αλληλοεπιδράσεων του χρηστή? Ποιο το µετρό επιτυχίας? Ενδιαφέροντα και χαρακτηριστικά χρηστών ηλικίες, γεωγραφική περιοχή, µόρφωση, κουλτούρα, τεχνολογικά: browsers, ταχύτητα σύνδεσης Υπάρχουν διαφορετικές οµάδες µε διακριτά προφίλ?

4 Ταξινόµηση Ιστοσελίδων Πώλησης προϊόντων ιαφήµιση και προώθηση προϊόντων Πληροφοριακές και Εκπαιδευτικές Πανεπιστήµια, σχολεία, µουσεία, πόλις, Είσοδοι πρόσβασης (portals) βιβλιοθήκες, εφηµερίδες, κέντρα ειδήσεων Υπηρεσίες εξυπηρέτησης Κυβέρνησης, ηµικρατικοί οργανισµοί, ιασκέδασης και συνάντησης Παιχνίδια ηλεκτρονικά, chat rooms, Κοινοτικές Πολιτικά κόµµατα, συντεχνίες, επαγγελµατικοί σύνδεσµοι,

5 Αρχιτεκτονική Πληροφοριών Έµφαση στο περιεχόµενο και στην οργάνωση του ηµιουργία µεταφορών Υιοθέτηση ιδεών παρουσίασης και όψεων από άλλους χώρους και από εµπειρίες Βοήθα και στη χρήση αλλά και στη κατανόηση Π.χ., φάκελοι µε ετικέτες για καταχωρήσεις καλαθιά ψωνίσµατος και check-out βιβλιάριο καταθέσεων παραµύθι για

6 Αρχιτεκτονική Πληροφοριών Χαρακτηριστικά διαδικτυακών τόπων Στατικοί ή δυναµικοί (database-driven) driven) Ανταπόκριση σε πράξεις του χρηστή (Interactivity) Αλλαγή χρώµατος και µεγέθους κειµένου µετά από επιλογή Cascade style sheets, JavaScripts Είδος και προτεραιότητα αντικειµένων Υποχρεωτικά και προαιρετικά Φωτογραφίες, γραφικά, comics Σειρά ανάπτυξης (λίστα ιστοσελίδων)

7 Σχεδιασµός Τόπου Εµφάνιση και οργάνωση ιστοσελίδων & γραφικών Νοητός σχεδιασµός (conceptual design) Πλοήγηση-Μενού (ελαχιστοποίηση #κλικ) ιαχωρισµός σε ενότητες θεµατικές ενότητες για πανεπιστήµιο? Προσωπική? ιαφορετικούς χρηστές (audience audience-splitting) ιαφορετικές µεταφορές Ιεραρχικά Επίπεδα («κανόνας»: τρία επίπεδα/κλικ) narrow & deep Vs. broad & shallow Σχήµα χρωµάτων («κανόνας»: τρία χρώµατα) visual motif Κοινά στοιχειά στις σελίδες Ανάπτυξη περιεχοµένου

8 Πλοήγηση Τα τρία σηµαντικά στοιχειά (ΠΠΠ) Που πήγαν Που είναι Που µπορούν να πάνε Τύποι Θεµατική πλοήγηση (µπορεί να είναι ιεραρχική) Ανάλυσης διαδροµής campus life student activities leadership program Μηχανισµοί αναζήτησης (search engines) Κανόνας: πάντα σύνδεσµοι κειµένου (text links) γιατί? (text-browsers, graphics & javascripts turned off) αν θέλω όµως γραφικά όπως το yahoo? Σηµαντική η θέση σχηµάτων πλοήγησης

9 Παράδειγµα Search Engine Χρήση google <div align="right" class="search"> <span class="bd">search MyPage</span> <form action= method="get" id="google-search"> <img src="/im/google_sm_grey.gif" alt="google" width="65" height="27" align="middle" /> <input type="text" name="q" size="12" class="input_cl"/> <input type="submit" value="search" class="submit" /> <input type="hidden" name="sitesearch" value="cs.pitt.edu/~panos" /> </form> </div>

10 Που είµαι; Σηµαντική πληροφορία σε πλούσιες/περιπλοκές σελίδες Τρόποι Ανάλυσης διαδροµής Απενεργοποίηση συνδέσµου στη σελίδα στο µενού Τροποποίηση µορφής συνδέσµου στο µενού «είσαι εδώ» σήµανση

11 Τεχνικά θέµατα Ταχύτητα πλοήγησης µόνος έλεγχος στο περιεχόµενο της ιστοσελίδα Περισσότερο κείµενο παρά εικόνες, γραφικά, Java applets Plug-Ins & βοηθητικές εφαρµογές υπάρχουν; (π.χ., PDF reader, RealAudio, Flash) Animation Vs. Video Video είναι περιεχόµενο που επιλέγεται ιασκέδαση, διαφηµίσεις, παιδικά-εκπαιδευτικά

12 Θέµατα Σχεδιασµού Cluttered Design Λίγα και καλά Background Patterns Απλό, να µην υποσκιάζει το κείµενο Κα0αρα χρώµατα και όχι µοτίβα (επαναλαµβανόµενα σχεδία/σχήµατα) Don t tile the background Θυρεοί, logo, κλπ µπορούν να εµφανίζονται µια φορά

13 Θέµατα Σχεδιασµού Χρώµατα καλή αντίθεση µε το background Μαύρα γράµµατα σε ανοιχτόχρωµο background Άσπρα ή κίτρινα σε σκούρο background Είναι συνδεδεµένα µε την κουλτούρα Π.χ., το µαύρο είναι πένθιµο σε µας, γενέθλιων στις ΗΠΑ Συνδεδεµένα µε ειδικό νόηµα Μπλε/µωβ για συνδέσµους Μορφοποίησης κειµένου Γραµµατοσειρές Μέγεθος και στοίχισης κλπ.

14 Πρωτότυπο µέχρι Τελικό Προϊόν Πρωτότυπο: Υλοποίηση σχεδίου και εισαγωγή παραδείγµατα ή βασικού περιεχοµένου Ολική κωδικοποίηση ιστοσελίδων σε html Έλεγχος λαθών και παραλείψεων Τεχνικά Περιεχοµένου ευχρηστίας ηµοσίευση τελικού προϊόντος διαδικτυακού χώρου Επιτήρηση και βελτίωση Web site logs