11 κοινά λάθη σχεδιασμού ιστοσελίδων (σφάλματα)

Υπάρχουν τόνοι ιστότοπου στο Διαδίκτυο και εκατοντάδες ή πιθανώς χιλιάδες δημιουργούνται την ημέρα. Εδώ είναι ένα πολύ ενδιαφέρον πράγμα που πρέπει να αναλογιστούμε - Ποια είναι τα στοιχεία μιας καλής ιστοσελίδας?

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

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

1. Πού είναι το πλαίσιο αναζήτησης?

Ο ιστός είναι σαν ένα αρχείο πληροφοριών. Είτε πρόκειται για εταιρικό ιστότοπο είτε για απλώς ένα blog, ένα πλαίσιο αναζήτησης είναι απαραίτητο. Ο επισκέπτης μπορεί να ψάχνει για κάτι που είναι κρυμμένο μέσα στον ιστότοπο, με το πλαίσιο αναζήτησης, οι πιθανότητες είναι, οι επισκέπτες θα πάρουν αυτό που θέλουν.

Προτάσεις:Προσαρμοσμένη αναζήτηση Google είναι ένας τακτικός, απλός και αποτελεσματικός τρόπος για να ξεκινήσετε. Δίνει τη δυνατότητα στους επισκέπτες να αναζητούν αποτελεσματικά τον ιστότοπό σας. Ακριβώς αντιγράψτε τον κώδικα HTML από τον πίνακα ελέγχου και επικολλήστε τον στον ιστότοπό σας και voilà ??  ?? Ã'Â, έχετε μια λειτουργία αναζήτησης στον ιστότοπό σας.

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

Περισσότερο: Σχεδιάζοντας το Άγιο Πλαίσιο Αναζήτησης: Παραδείγματα και Βέλτιστη Πρακτική- Αυτό το άρθρο περιγράφει λεπτομερείς οδηγίες για το σχεδιασμό του πλαισίου αναζήτησης.

2. Κακή αναγνωσιμότητα και αναγνωσιμότητα.

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

Προτάσεις:Ευτυχώς, υπάρχουν απλοί τρόποι που μπορείτε να κάνετε για να βελτιώσετε την εμπειρία ανάγνωσης των χρηστών στον ιστότοπό σας.

1. Συγκρίνετε τα σχέδια χρωμάτων των σημαντικότερων ιστότοπων και παρατηρήστε πώς τα χρώματα βελτιώνουν την αναγνωσιμότητα. Ένα καλό μέρος για να δοκιμάσετε διαφορετικά σχέδια χρωμάτων είναι Adobe Kuler.
2. Χρησιμοποίησε ένα Γραμματοσειρά Sans serif καθώς επιτρέπει την εύκολη ανάγνωση στον ιστό.

Περισσότερο: Εδώ είναι ένα καλό άρθρο που θα σας δώσει περισσότερες συμβουλές για τη βελτίωση της αναγνωσιμότητας - Αναγνωσιμότητα - Εύκολη ανάγνωση ιστοσελίδων.

3. Αδιάκοπη διάταξη περιεχομένου.

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

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

Συνολικά, το χειρότερο σε αυτήν την κατηγορία θα τοποθετήσει ανακριβές, απροσπέλαστο, ασήμαντο ή ξεπερασμένο περιεχόμενο στον ιστότοπό σας. Το περιεχόμενο πρέπει να συμπίπτει με το γενικό θέμα της ιστοσελίδας και να είναι χρήσιμο. Εάν μια σελίδα είναι υπό κατασκευή, γιατί να την ασχοληθούμε; Εάν ο σχεδιαστής πρέπει πραγματικά, τότε είναι μόνο προσωρινός και οι 3 εβδομάδες δεν θα θεωρούνται πλέον προσωρινές.

Προτάσεις: Οργάνωση περιεχομένου στον ιστότοπό σας χρησιμοποιώντας HTML και CSS θα πρέπει να χρησιμοποιείται κατά τη δημιουργία του σχεδίου των σελίδων σας.

1. Δημιουργήστε αρκετά κενά μεταξύ του κειμένου και των εικόνων σας χρησιμοποιώντας τα περιθώρια.
2. Ενημερώστε και είστε συνεπείς. Ο σκοπός της ενημέρωσης δεν είναι μόνο να προσθέσει νέο περιεχόμενο αλλά να εντοπίσει και να διορθώσει τα λάθη του παρελθόντος. Jakob Nielsen σας προτείνει να νοικιάσετε ένα ιστός “κηπουρός”.

Προϋπολογισμός για να προσλάβετε έναν κηπουρό ιστού ως μέρος της ομάδας σας. Χρειάζεται κάποιος να ξεριζώσει τα ζιζάνια και να ανασχεδιάσει τα λουλούδια καθώς αλλάζει ο ιστότοπος, αλλά οι περισσότεροι άνθρωποι προτιμούν να ξοδεύουν το χρόνο τους για να δημιουργήσουν νέο περιεχόμενο παρά για συντήρηση. Στην πράξη, η συντήρηση είναι ένας φτηνός τρόπος για την ενίσχυση του περιεχομένου στον ιστότοπό σας, καθώς πολλές παλιές σελίδες διατηρούν τη συνάφεια τους και πρέπει να συνδεθούν στις νέες σελίδες. Φυσικά, ορισμένες σελίδες είναι καλύτερα να απομακρύνονται εντελώς από το διακομιστή μετά την ημερομηνία λήξης τους - Jakob Nielsen

4. Κακή πλοήγηση.

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

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

Προτάσεις:

1. Κάντε την πλοήγηση ομαλή, χρησιμοποιώντας περιγραφές κειμένων για όλους τους συνδέσμους. Παρέχετε alt κείμενο για εικόνες. Χρησιμοποιήστε εναλλακτικές τεχνικές περιγραφής κειμένου για συνδέσεις Flash ή Javascript.
2. Οργανώστε και δομήστε την πλοήγησή σας σε συνδυασμό με το θέμα της ιστοσελίδας. Οι προσωπικοί ιστότοποι μπορούν να αντέξουν οικονομικά να είναι πιο δημιουργικοί αλλά και προσβάσιμοι, αλλά ένας ιστότοπος επιχειρήσεων απαιτεί μεγαλύτερη αποτελεσματικότητα και σαφήνεια.

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

Περισσότερο: Εφαρμογή αποτελεσματικής πλοήγησης στον ιστότοπο - Αυτό το άρθρο δίνει περισσότερες πληροφορίες σχετικά με την εφαρμογή μιας αποτελεσματικής πλοήγησης για τον ιστότοπό σας.

5. Ασυνεπής σχεδιασμός διασύνδεσης.

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

Προτάσεις:

1. Χρησιμοποιήστε ένα τυποποιημένο συνεπές πρότυπο για κάθε σελίδα με συνδέσμους προς τα κύρια τμήματα του ιστότοπου.
2. Η λέξη-κλειδί είναι απλή. Δημιουργήστε αισθητικά απλά σχέδια και οι χρήστες δεν θα μπερδευτούν ποτέ στον ιστότοπό σας.

6. Μη φιλική ανάλυση οθόνης.

Είμαι βέβαιος ότι επισκεφτήκαμε ιστότοπους όπου πρέπει να μετακινηθείτε οριζόντια. Αυτό είναι ένα απόλυτο no-no στο σύγχρονο web design. Ένας καλός σχεδιαστής θα αναπτύξει ιστότοπους που ταιριάζουν στα περισσότερα μεγέθη οθόνης. Η τρέχουσα βελτιστοποιημένη διάταξη για ιστότοπους είναι αυτή τη στιγμή 1024 x 768 εικονοστοιχεία.

Προτάσεις:Είναι δύσκολο και σχεδόν αδύνατο να ικανοποιήσει το σχεδιασμό ώστε να ταιριάζει σε κάθε ανάλυση, ειδικά όταν οι επισκέπτες περιηγούνται τώρα στα κινητά τηλέφωνα και τα netbook, αλλά μπορούμε να έχουμε μια γενική ιδέα για τις γενικά χρησιμοποιούμενες ψηφιακές αναλύσεις με τους παρακάτω τρόπους:

• Ελέγξτε τα στατιστικά σας - Οι υπηρεσίες ανάλυσης όπως το Google Analytics σάς παρέχουν πληροφορίες σχετικά με την ανάλυση οθόνης που χρησιμοποιούν. Αυτές είναι χρήσιμες πληροφορίες που πρέπει να γνωρίζετε πριν ξεκινήσετε την επόμενη ανακατασκευή σας.
• Στατιστικά προγράμματος περιήγησης για τα σχολεία W3 - Τα σχολεία W3 δίνουν σαφείς λίστες του πιο δημοφιλούς προγράμματος περιήγησης που χρησιμοποιούν οι νέοι και τα ταξινομούν ανάλογα με τη δημοτικότητα. Υπάρχουν και άλλα ενδιαφέροντα και σημαντικά στατιστικά στοιχεία.

7. Συμπληρωμένα Έντυπα Εγγραφής.

Οι φόρμες εγγραφής είναι δύσκολες. Πόσες πληροφορίες χρειάζεστε από το χρήστη; Πηγαίνουν οι ημέρες κατά τις οποίες ένας χρήστης έπρεπε να εισάγει λεπτομέρειες για να εγγραφεί στον ιστότοπό σας. Ορισμένοι ιστότοποι καθιστούν τα περισσότερα πεδία καταχώρισης υποχρεωτικά και επικυρώνουν τα πεδία σε βαθμό που ο χρήστης είναι απογοητευμένος μετά από μερικές προσπάθειες. Θυμηθείτε, οι χρήστες επισκέπτονται έναν ιστότοπο για να αποκτήσουν πληροφορίες. Όχι το αντίστροφο.

Η απλή μορφή του Somecard κάνει την εγγραφή ανώδυνη.

Προτάσεις:Συγκρίνετε τις φόρμες εγγραφής σε όλες τις κοινότητες στον ιστό και κατανοήστε ποιες βασικές πληροφορίες απαιτούνται από τον χρήστη κατά τη διάρκεια της διαδικασίας εγγραφής.

Περισσότερο: 9 Κοινά λάθη ευχρηστίας στον σχεδιασμό ιστοσελίδων - Αυτή η ανάρτηση στο Smashing Magazine λαμβάνει μια σε βάθος ματιά στα έντυπα εγγραφής μεταξύ άλλων λαθών ευχρηστίας.

8. Ακεραιτή χρήση εικόνων / κινούμενων εικόνων.

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

Οι κινούμενες εικόνες είναι φοβερό και ένα ισχυρό μέσο. Ειδικά όταν χρησιμοποιείται σωστά. Όταν είναι ένας κύκλος ή ακριβώς πάρα πολύ σε μια ιστοσελίδα, παίρνει στα νεύρα των χρηστών. Οι χρήστες δεν έχουν την υπομονή, το χρόνο ή τους πόρους, ώστε οι σχεδιαστές πρέπει να προσφέρουν εναλλακτικές λύσεις ή ακόμα καλύτερα, το κουμπί παράκαμψης, εάν πρόκειται για κινούμενη εικόνα πλήρους σελίδας.

Περισσότερο: Φλας: 99% Κακό - Χρησιμοποιήστε το Flash κατάλληλα. Έχουν περάσει σχεδόν 10 χρόνια από τότε που ο Jakob Nielsen δημοσίευσε αυτό το άρθρο, αλλά εξακολουθεί να έχει σημασία από την άποψη της χρηστικότητας του Flash ειδικά του Διακοπεί θεμελιώδη στοιχεία ιστού κομμάτι.

9. Συσσωρευμένες σελίδες, περισσότεροι λευκοί χώροι.

Πολλοί σχεδιαστές ξεχνούν κενό διάστημα και τη σημασία της. Είναι τόσο κατακλυσμένα στη δική τους δημιουργική σχεδίαση που ξεχνούν ότι δεν είναι γι 'αυτούς. Έτσι, προσπαθούν να στριμώξουν όσο μπορούν σε μια σελίδα. Τελικό αποτέλεσμα? Μια απασχολημένη, γεμάτη και δυσανάγνωστη σελίδα.

kylestanding κάνουν καλή χρήση των κενών στο σχεδιασμό τους.

Εδώ είναι μερικά άρθρα για να σας δώσω μια καλή ιδέα για το σημασία του κενό χώρο στο web design:

• Μια σύγκριση τεσσάρων διαστάσεων λευκού χώρου
• Η αξία του λευκού χώρου
• Λευκό χώρο

10. Δεν υπάρχει μουσική υπόκρουση, παρακαλώ!

Οι χρήστες δεν θέλουν δροσερό, επιδιώκουν την αποτελεσματικότητα. Και ναι, το 99 τοις εκατό δεν ενδιαφέρεται για τη μουσική στον ιστότοπό σας. Μερικοί σχεδιαστές το κάνουν χειρότερο θέτοντας διαφορετική μουσική υπόκρουση σε κάθε ιστοσελίδα.

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

11. Δοκιμή, δοκιμή και δοκιμή.

Αυτό δεν μπορεί να υπερκεραστεί. Πόσες φορές βρισκόμαστε σε ιστοσελίδες που μπορούν να προβληθούν μόνο σε ένα συγκεκριμένο πρόγραμμα περιήγησης; Οι προγραμματιστές ιστού πρέπει να έχουν έναν κατάλογο ελέγχου των τύπων κατά τη δοκιμή ιστοτόπων.

• Μπορεί ο ιστότοπος να προβληθεί σε διαφορετικά περιβάλλοντα?
• Είναι η διάταξη σχεδίασης συνεπής σε όλα τα προγράμματα περιήγησης?
• Μπορεί ο ιστότοπος να προβληθεί σε διαφορετικές ρυθμίσεις, όπως Εικόνες απενεργοποιημένες, Απενεργοποίηση JavaScript, κλπ?

Προτάσεις:Το W3C προσφέρει εργαλεία για τη δοκιμή διασφάλισης ποιότητας. Ολοκλήρωση αγοράς Εργαλειοθήκη ελέγχου ποιότητας της W3C και Επικύρωση ιστοσελίδας.

Συμπέρασμα:

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

Ποιες είναι οι εμπειρίες σας στα σχέδια σχεδιασμού ιστοσελίδων; Τι άλλες συμβουλές και σκέψεις θα θέλατε να μοιραστείτε με τα λάθη του σχεδιασμού ιστοσελίδων?

Σημείωση του συντάκτη: Αυτή η ανάρτηση είναι γραμμένη από Brujo Owoh για το Hongkiat.com. Το Brujo Owoh είναι ένα σύστημα Multimedia Systems, το οποίο ειδικεύεται στο σχεδιασμό ιστοσελίδων και στο 2D Animation. Παίρνει τη φαντασία της ανάγνωσης, συναντιέται με τους συντρόφους του και ακολουθεί τις τάσεις σχεδίασης στο Twitter. Επισκεφθείτε το ιστολόγιο του Brujo.