Συγγραφή “ιστοκειμένου”

Writing for the Web

υπό Α. Ανδρεάτου

Μρ+Δρ Μηχ. ΗΥ, Μρ Εκπ. Ενηλ.aandreatos@gmail.com

Νοέμβριος 2013V1

Αντικείμενο & λέξεις-κλειδιά● Πώς γράφουμε κείμενα για τον παγκόσμιο ιστό

● Διαδικτυακός χρόνος και συμπεριφορά των χρηστών

● Μέθοδος του παγόβουνου” και μέθοδος της “βιτρίνας”

● Δομή ιστοσελίδων – πρότυπα

● Περιεχόμενο ιστοσελίδων

● Τύποι ιστοσελίδων

● Τρόποι ανάγνωσης ιστοσελίδων

● Ευχρηστία ιστοσελίδων

● Παραδείγματα και αντιπαραδείγματα

Η σημερινή εποχή(χρονολογίες κατά προσέγγιση)

Ανάπτυξη υλικού

ΗΥ(1980-2000+)

Ανάπτυξη λογισμικού

ΗΥ(1985-2005+)

Ανάπτυξη υλικού

ΗΥ(1980-2000+)

Ανάπτυξη περιεχομένου

(2005-σήμερα)

Έσοδα από το υλικό

Έσοδα από άδειες χρήσης

Έσοδα από διαφημίσεις, και πωλήσεις

ή επισκεψιμότητα

Ορισμός ιστότοπου (site)

Αρχική σελίδα

[Home]

Υποσελίδα α' Υποσελίδα β' Υποσελίδα γ'

Υποσελίδα α1'

Ιεραρχική δενδρική

δομή

Υποσελίδα γ2'Υποσελίδα γ1'

(Όλα τα λεφτάεδώ)

Η σημερινή κατάσταση

Η μεγάλη διαθεσιμότητα υλικού, λογισμικού, συστημάτων ΒΔ, εξυπηρετών ιστού και συστημάτων διαχείρισης περιεχομένου, διευκολύνουν τα μέγιστα την διάθεση περιεχομένου στον Ιστό και διαχωρίζουν την μορφή και το layout από το περιεχόμενο.

Πώς γράφουμε άρθρα για τον παγκόσμιο ιστό;

● Έτσι ώστε να τραβήξουμε την προσοχή (και να μεγαλώσουμε την επισκεψιμότητα της σελίδας μας)

● Έτσι ώστε να κερδίσουμε αναγνώστες (για να επανέλθουν στη σελίδα μας)

● Έτσι ώστε να μην κουράσουμε τους αναγνώστες (ούτε να τους κάνουμε να βαρεθούν)

● Έτσι ώστε να βγαίνει αμέσως το μήνυμα.

Ο χρόνος στο Διαδίκτυο... τρέχει 7 φορές γρηγορώτερα!

● Οι χρήστες του Διαδικτύου είναι βιαστικοί...

● Η διάρκεια προσήλωσης της προσοχής είναι 7 φορές μικρότερη.

● Η πληθώρα πληροφορίας οδηγεί σε έλλειμμα προσοχής.

● Οι χρήστες βλέπουν μιαν ιστοσελίδα ως εικόνα παρά ως κείμενο (κρίση σε 1”)

● Δεν διαβάζουν αλλά σαρώνουν και αναζητούν λέξεις-κλειδιά που θα τους τραβήξουν την προσοχή.

Δηλαδή πώς;● Χρησιμοποιούμε την “μέθοδο του

παγόβουνου” και την “μέθοδο της βιτρίνας” ● Με μια ματιά να καταλαβαίνει ο αναγνώστης

αν τον ενδιαφέρει το άρθρο (χωρίς να χρειάζεται να το διαβάση όλο)

● Γνωρίζουμε ότι οι περισσότεροι αναγνώστες δεν έχουν χρόνο, είναι περαστικοί, δεν θα μας δώσουν β' ευκαιρία

● Δεν διαβάζουν αλλά βλέπουν (εικόνες, λέξεις). Σαρώνουν (scan) το κείμενο με το μάτι.

“Μέθοδος του παγόβουνου”

Πώς να γράφουμε και να παρουσιάζουμε άρθρα στον Ιστό.

● Αρχικά, κόβουμε το μισό κείμενο. ● Αποφεύγουμε τα “κατεβατά”. ● Επισυνάπτουμε μια τουλάχιστον συναφή

φωτογραφία και την πηγή του άρθρου. ● Πρώτα η ουσία (περιληπτικά) και μετά (στο

τέλος) οι λεπτομέρειες.

“Μέθοδος του παγόβουνου”

Οι πολλές λεπτομέρειες(οι περισσότεροι δεν

θα τις διαβάσουν)

Αντιπροσωπευτικός και περιεκτικός τίτλος

Επεξηγηματικός υπότιτλος και αντι-προσωπευτική εικόνα (1000 λέξεις)

Σύνοψη ή συμπεράσματα

“Διαβάστε περισσότερα”

ΠαράδειγμαΑντιπροσωπευτικός και

περιεκτικός τίτλος

Αποκαλυπτικός υπότιτλος και αντιπροσωπευτική εικόνα (1000 λέξεις)

Σύνοψη ή συμπεράσματα

Οι πολλές λεπτομέρειες(οι περισσότεροι δεν

θα τις διαβάσουν)

“Μέθοδος της βιτρίνας”

● Πώς θα καταλαβαίνει ο αναγνώστης με μια ματιά στην αρχική σελίδα με τι ασχολείται ο ιστότοπος (“τί πουλάμε”), ώστε να αποφασίσει αν θα μας διαβάση.

● Είναι το πιο κρίσιμο τμήμα του ιστότοπου και αξίζει να το προσέξουμε ιδιαιτέρως.

“Μέθοδος της βιτρίνας”● Αντιπροσωπευτικά προϊόντα όμορφα

τοποθετημένα, συχνά με διακοσμητικά

● Με μια ματιά καταλαβαίνει ο πελάτης τι πουλάει το μαγαζί

● Όποιος ενδιαφέρεται ν' αγοράση, μπαίνει

● Μπορεί να δείχνει και “προσφορές”

● Μπορεί να δείχνει ένα κύριο θέμα και μερικά δευτερεύοντα

● Ανανεώνεται συχνά (πχ με την ώρα, την ημέρα ή την εποχή)

● Ανταμοιβές για τους καλούς πελάτες

Αντιστοιχία στον Ιστό● Η αρχική σελίδα ενός ιστότοπου δείχνει τα βασικά

θέματα

● Ο επισκέπτης μπορεί να εστιάσει σε κάτι ανοίγοντας μιαν υποσελίδα

● Για να ξανάρθει ο επισκέπτης, πρέπει το περιεχόμενο ν' ανανεώνεται, π.χ:

● “Προσφορές” = extras, “what's new”, downloads...

● Ανταμοιβές για τους καλούς πελάτες = προνόμια (πχ λογ/σμός)

● Ο ιστότοπος πρέπει να εμπνέει εμπιστοσύνη (About us)

Παράδειγμα 1οΤι “πουλάει το μαγαζί”

Κύριο θέμα (ανανεώνεται συχνά)

Δευτερεύονταθέματα

Διακοσμητικά

Παράδειγμα 2οΤι “πουλάει το μαγαζί”

Κύριο θέμα (ανανεώνεται συχνά)

Νέα

Extras

Νέα

Παράδειγμα 3οΤι “πουλάει το μαγαζί”

Κύριο θέμα /Προσφορές(ανανεώνεται συχνά)

Προνόμια

Extras

Νέα

Παράδειγμα 4οΤι “πουλάει το μαγαζί”

Κύριο θέμα (ανανεώνεται συχνά)

Νέα

Extras

Με μια ματιά

Προνόμια

Αξία της “βιτρίνας”

● Είναι πολύ σημαντικό να μπορεί ο χρήστης/ πελάτης να καταλάβει “τι πουλάει το μαγαζί” με την πρώτη ματιά.

● Επίσης είναι εξ ίσου σημαντικό η βιτρίνα μας να τραβάει τον πελάτη και να τον παρακινεί να περάση μέσα (είδαμε καλά και κακά παραδείγματα).

● Η αρχική σελίδα δεν πρέπει να είναι κουραστική αλλά ελκυστική.

Δομή ιστοσελίδωνΗ δομή των ιστοσελίδων πρέπει να είναι τέτοια ώστε να :

● είναι ελκυστική από την πρώτη ματιά

● είναι προφανής ο στόχος της

● είναι προφανής η λειτουργία της

● είναι εργονομική και εύχρηστη

● ευνοεί την περιήγηση

● μην είναι πολύ μακριά

● μην περιέχει κατεβατά κειμένου

Τίτλοι ιστοσελίδων

● Οι τίτλοι ιστοσελίδων έχουν μεγάλη σημασία.● Πρέπει να είναι σύντομοι και/ή περιγραφικοί.● Παραδείγματα περιγραφικών τίτλων:

www.mcdonaldsmenu.info, www.tanea.gr● Τί νομίζετε πώς περιέχει αυτός ο ιστότοπος;● Παραδείγματα σύντομων τίτλων: ● www.in.gr, www.pcmag.gr● Σας φαίνονται περιγραφικοί;

Μέθοδοι συντόμευσης τίτλωνΥπάρχουν υπηρεσίες που παρέχουν σύντομα ψευδώνυμα μακρυών URL εις βάρος της περιγραφικότητας:

● Tinyurl

● http://goo.gl

● Χρήσιμο αν έχουμε φτιάξει δωρεάν ιστοσελίδα τύπου (π.χ): “http://sites.google.com/site/greek_honey_from_Sparta”

● Υπάρχει και η λύση χρήσης ψευδωνύμου [alias]: αγοράζουμε όνομα [domain name] και το συνδέουμε με τη [δωρεάν] ιστοσελίδα μας (π.χ.):

● www.spartanhoney.gr ---> “http://sites.google.com/site/greek_honey_from_Sparta”

Περιεχόμενο ιστότοπων Ένας καλός ιστότοπος πρέπει να:

● Ανταποκρίνεται στις προσδοκίες του πληθυσμού-στόχου

● Εμπνέει εμπιστοσύνη και αξιοπιστία ● Παρέχει αξία στους επισκέπτες της (όπως

πχ Wikipedia, Google)● Εμφανίζεται ψηλά στο Google (“SEO”) -->● Δηλώνει την ταυτότητα και τους στόχους της● Ανανεώνεται συχνά

Συνήθη πρότυπα ιστοσελίδων

Αν και ο καθένας μπορεί να φτιάξη την σελίδα του όπως θέλει, υπάρχουν ωρισμένα συνηθισμένα και κοινά πρότυπα.

● Συνήθη πρότυπα είναι: ● α/ Το πρότυπο “Π” ● β/ Το πρότυπο “Γ” ● γ/ Το πρότυπο “Ι Ι”

α) Το πρότυπο “Π”

● Πάνω πλαίσια [tabs], αριστερά και δεξιά στήλες με συνδέσμους περιήγησης (αρ.) ή νέων (δεξ.).

● Στο κέντρο το κύριο θέμα που μπορεί να ανανεώνεται συχνά.

● Οι αριστεροί σύνδεσμοι είναι σχεδόν σταθεροί ενώ οι δεξιοί ανανεώνονται συχνά.

Παράδειγμα “Π”

β) Το πρότυπο “Γ”

● Πάνω πλαίσια [tabs], αριστερά στήλες με συνδέσμους περιήγησης.

● Στο κέντρο το κύριο θέμα που μπορεί να ανανεώνεται συχνά.

● Οι αριστεροί σύνδεσμοι είναι σχεδόν σταθεροί και υποστηρίζουν την περιήγηση στον ιστότοπο [λοιπές σελίδες].

Παράδειγμα “Γ”

Ευχρηστία ιστοσελίδων(web usability)

● Μια ιστοσελίδα είναι εύχρηστη αν: ● Έχει μια ελκυστική, ευχάριστη και σαφή

“βιτρίνα” (αρχική σελίδα)● Ο χρήστης μπορεί να πλοηγηθεί εύκολα στις

υπόλοιπες σελίδες● Η σελίδα δεν είναι πολύ βαρειά (“κατεβαίνει

γρήγορα”)● Ο πελάτης να μπορεί να βρη εύκολα αυτό

που ψάχνει. ●

Πώς το επιτυγχάνουμε;● Χρησιμοποιούμε ωραία χρώματα, όμορφες

γραμματοσειρές και πολυμέσα

● Χρησιμοποιούμε συνέπεια στη σχεδίαση (ίδιο στυλ σε όλες τις σελίδες) [βλ. CSS]

● Αποφεύγουμε τις ογκώδεις εικόνες, τα πολλά flash video, animation, αναδυόμενα παράθυρα κλπ.

● Αποφεύγουμε την υπερφόρτωση συνδέσμων

● Χρησιμοποιούμε το ίδιο στύλ σε όλες τις σελίδες ενός ιστότοπου [βλ. CSS]

● Χρησιμοποιούμε σωστή και επαγγελματική σχεδίαση [βλ. CΜS].

Παραδείγματα

● Τι σας αρέσει και τι δεν σας αρέσει στις παρακάτω ιστοσελίδες;

● Τι θα προτείνατε για βελτίωσή τους;

Παράδειγμα α'

Παράδειγμα β'

Παράδειγμα γ'

Παράδειγμα δ'

Παράδειγμα ε'

Άλλα σημεία

● Θεωρούμε ότι απευθυνόμαστε όχι στον μέσο αλλά στον τελευταίο χρήστη του Ιστού αν δεν θέλουμε να αποκλείσουμε χρήστες (ελαφριά σελίδα για αργές συνδέσεις, μεγάλα γράμματα για ηλικιωμένους, στενές σελίδες για μικρές οθόνες και περιορισμένο αριθμό χρωμάτων, ελαφριά σελίδα που να φορτώνεται γρήγορα).

Ο κανόνας του “7”

● Η θεωρία του Miller [1956] υποστηρίζει ότι δεν πρέπει να υπάρχουν πάνω από 7 στοιχεία ενός είδους [π.χ. tab, μενού, λίστες] σε μιαν ιστοσελίδα. Αν χρειάζονται περισ-σότερα, μπορούμε να χρησιμοποιήσουμε ιεραρχική δομή.

Ο κανόνας των 3 κλικ

● Ο επισκέπτης πρέπει να μπορεί να φτάση κάπου [εκεί που θέλει] με 3 κλικ.

● Ένα κοινό μενού περιήγησης μέσω συνδέσμων στην αριστερή στήλη βοηθάει πολύ σ' αυτό.

Καθορισμός στόχων

-- Γιατί να φτιάξω έναν ιστότοπο;● Για να καλύψω μιαν υπαρκτή ανάγκη.● Ποιό είναι το κοινό μου και ποιά η ανάγκη του;● Κέντρο βάρους η ανάγκη του “πελάτη” κι όχι

τα προϊόντα μου.

Τύποι ιστότοπων και στόχοι τους

● 1) Ιστότοποι περιεχομένου (ειδήσεις, επιστημονικά ή τεχνικά άρθρα, χόμπυ, κοινά ενδιαφέροντα). Πιθανός στόχος η αύξηση επισκεπτών, η δημιουργία κοινού ή online κοινότητας ή συνδρομητών (RSS feeds)

● 2) Εμπορικοί ιστότοποι. Στόχος οι αγορά προϊόντων online (ηλ. εμπόριο).

Τύποι ιστότοπων και στόχοι τους● 3) Ιστότοποι καθοδήγησης. Υποβοηθούν

στη λήψη αποφάσεων πωλήσεων ακριβών προϊόντων ή υπηρεσιών που δεν αγοράζονται μέσω Διαδικτύου. Μαζεύουν στοιχεία πελατών μέσω online φορμών. Συχνά περιέχουν αναλύσεις, tutorial, white papers.

● 4) Ιστότοποι τεχνικής υποστήριξης και αυτο-εξυπηρέτησης πελατών. Στόχος η μείωση προσωπικού. Περιέχουν οδηγίες, FAQ κλπ.

● 5) Προσωπικές ιστοσελίδες

Παράδειγμα α': σε ποιά κατηγορία ανήκει;

Παράδειγμα β': σε ποιά κατηγορία ανήκει;

Παράδειγμα γ': σε ποιά κατηγορία ανήκει;

Παράδειγμα δ': σε ποιά κατηγορία ανήκει;

Παράδειγμα ε': σε ποιά κατηγορία ανήκει;

Μέτρηση αποτελεσματικότητας σελίδας

Στόχος: η μετατροπή των επισκεπτών σε πελάτες

● 1. Ιστότοποι περιεχομένου: η μετατροπή των επισκεπτών σε συχνούς επισκέπτες ή συνδρομητές

● 2. Εμπορικοί ιστότοποι: η μετατροπή των επισκεπτών σε αγοραστές

● 3. Ιστότοποι καθοδήγησης: μετατροπή των επισκεπτών σε καταγεγραμμένους επισκέπτες [registered]

● 4. Ιστότοποι υποστήριξης: μετατροπή των επισκεπτών σε ικανοποιημένους πελάτες

Πόσο καλή είναι η σελίδα μου;

● Έχει επισκέπτες; [μετρητής επισκεψιμότητας]

● Μπορεί να την βρεί κανείς εύκολα με το Google;

● Σε τι σειρά βρίσκεται στην αναζήτηση μέσω Google; [βλ. SEOSEO = Search Engine Optimisation]

● Υπάρχουν αλλού σύνδεσμοι προς την σελίδα μου;

● Ποιό είναι το “ποσοστό μετατροπής” [επισκεπτών σε πελάτες];

● Αξίζει τα λεφτά της;

Δείκτης αποτελεσματικότητας

● Key-Performance Indicator (KPI) = ποσοστό επισκεπτών που πείθονται.

● Καλό Ποσοστό: 2-4%● Πολύ καλό: 5%● Εξαιρετικό (max): 12-15% ● Κάθε χρόνο ανεβαίνει διότι αυξάνονται οι

χρήστες και οι χρήσεις του Διαδικτύου.

Search Engine Optimisation● Search Engine Optimisation [SEOSEO] είναι η βελτιστοποίηση ιστότοπου με στόχο μια καλή κατάταξη στις Μηχανές Αναζήτησης.

● Σε γενικές γραμμές, αυτό επιτυγχάνεται είτε φυσικάφυσικά είτε τεχνητάτεχνητά.

Η φυσική βελτιστοποίηση ενός ιστοτόπου περιλαμβάνει:

● α) επεξεργασία του περιεχομένου και του κώδικα HTML σε σχέση με συγκεκριμένες λέξεις-κλειδιά σχετικές με το περιεχόμενο του ιστοτόπου.

● β) βελτιστοποίηση του κώδικα (HTML και "σκριπτογλωσσών" όπως php, jsp κλπ) με στόχο την διευκόλυνση των αυτομάτων λογισμικών κατηγοριοποίησης ιστοτόπων (Web_crawler) των μηχανών αναζήτησης [βλ. en.wikipedia.org/wiki/Web_crawler].

Search Engine Optimisation (2)

● Η τεχνητή βελτιστοποίηση ενός ιστοτόπου γίνεται δημιουργώντας αυτόματες προσπελάσεις προς αυτόν με στόχο την [τεχνητή] αύξηση των επισκέψεων.

● Η διαδικασία λειτουργεί ως σύστημα ανάδρασης: Όσο υψηλότερα εμφανίζεται ένας ιστότοπος στη λίστα των αποτελεσμάτων αναζήτησης, τόσο περισσότερους νέους επισκέπτες θα λάβει από τη μηχανή αναζήτησης.

● Υπάρχουν εξειδικευμένες εταιρείες αναλαμβάνουν την φυσική και τεχνητή βελτιστοποίηση ιστοτόπων (και στην Ελλάδα, πχ: /www.atnet.gr/Google-Website-Optimizer).

● Υπάρχουν επίσης υπηρεσίες όπως οι Google Analytics και Website Optimizer που μας βοηθούν να ελέγξουμε την απόδοση των σελίδων μας.

Πρότυπα ανάγνωσης ιστοσελίδας

Τι πορεία ακολουθεί το μάτι του αναγνώστη ιστοσελίδων;

βλ. Stanford-poynter project

● α) Μοντέλλο Stanford-poynter● β) Μοντέλλο Z● γ) Μοντέλλο F

α) Μοντέλλο Stanford-poynter

β) Μοντέλλο ZΤο μάτι σκανάρει τη σελίδα έτσι:

γ) Μοντέλλο FΤο μάτι σκανάρει τη σελίδα έτσι:

Τα καλύτερα αντιπαραδείγματα

1/ Αναζητήστε το λογισμικό του Mobile Internet στη σελίδα της Vodafon.gr.

2/ Δώστε αξιολόγηση μετά από συναλλαγή στο emarket.gr

Πώς να διώξετε τους επισκέπτες από τη σελίδα σας

● Ελλ. χαρακτήρες που δεν διαβάζονται● Εικόνες κακής ποιότητας ● Σπασμένοι σύνδεσμοι ● Άσχημοι χαρακτηρισμοί, κακή γλώσσα ● Αναζήτηση που δεν φέρνει αποτελέσματα● Μικρά γράμματα δυσανάγνωστα ● Πολλές διαφημήσεις ● Πολλά flash, animation, pop-ups...

Βασική βιβλιογραφία1) Σπύρος Δ. Αρσένης, Σχεδιασμός πετυχημένων

ιστοσελίδων. Εκδόσεις Κλειδάριθμος, 2007. ISBN 978-960-461-041-9, Τιμή: 32 €.

2) Elizabeth Castro, Εισαγωγή στην HTML με εικόνες (XHTML και CCS). Εκδόσεις Κλειδάριθμος, 2003. ISBN 960-209-682-9, Τιμή: 34€.

3) Nielsen J. (1993). Designing web usability, Indianapolis: New Riders.

4) S. Gardner & S. Birley, Blogging για πρωτάρηδες. Wiley & Πήγασος, 2010.

5) http://el.wikipedia.org/wiki/Search_engine_optimization

βλ. www.creativecommons.gr

Α. Ανδρεάτος Α. Ανδρεάτος Πηγή: http://t-h.wikispaces.com/Πηγή: http://t-h.wikispaces.com/