Χειρότερα λάθη σχεδιασμού ιστοσελίδων: 10 παραδείγματα κακών ιστότοπων

Άρθρο που γράφτηκε από:
  • Κατασκευή Ιστοσελίδων
  • Ενημερώθηκε: Apr 16, 2020

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

Ίσως έχετε ακούσει τον όρο «κολλώδης"Σε αναφορά σε ιστότοπο.

Αυτό σημαίνει απλώς μια τοποθεσία όπου ο επισκέπτης θέλει να κολλήσει - ένας ιστότοπος που παραμένει με το πρόγραμμα περιήγησης και τον οποίο κάνει σελιδοδείκτες και συχνάζει. Υπάρχουν τόσα πολλά στοιχεία που πηγαίνουν σε μια ιστοσελίδα κολλώδη ότι είναι ένα ολόκληρο άλλο θέμα.

Ωστόσο, υπάρχουν σίγουρα κάποια λάθη σχεδιασμού ιστοσελίδων που μπορούν να κάνουν ένα site που οι επισκέπτες θέλουν να ξεφύγουν από. Εδώ είναι το design no-no που πρέπει να αποφύγετε.

Λάθος #1: Χρώματα Jarring

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

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

Παράδειγμα Bad Websit: Moradito

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

Λάθος #2: Πάρα πολλά γραφικά

Εάν γεμίσετε την ιστοσελίδα σας με γραφικά, εμφανίζονται δύο διαφορετικά πράγματα.

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

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

Παράδειγμα Bad Websit: Pine-Sol

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

Λάθος #3: Χρόνος αργού φορτίου

Η ιστοσελίδα σας φορτώνει τόσο αργά ώστε ο επισκέπτης έχει χρόνο να πάει να πάρει ένα φλιτζάνι καφέ και ένα ντόνατ πριν επιστρέψει;

Η προσθήκη πολλών στοιχείων, όπως flash, ήχος, τόνοι γραφικών υψηλής ανάλυσης ή δέσμες ενεργειών Java, μπορεί να προκαλέσει την επιβράδυνση του χώρου και την επιβράδυνση του. Λάβετε υπόψη ότι ενώ οι περισσότεροι από τους επισκέπτες σας θα έχουν υψηλή ταχύτητα, εξακολουθούν να υπάρχουν πελάτες της υπαίθρου που θα είναι σε dial-up και δεν μπορούν να έχουν πρόσβαση στον ιστότοπό σας εάν φορτώνουν πολύ αργά.

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

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

- Πηγή: Ενισχύστε το SEO σας με την καλύτερη ταχύτητα του ιστότοπου

Παράδειγμα Bad Website: Το Μουσείο μου

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

Λάθος #4: Πολύ μεγάλη διαφήμιση

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

Στην πραγματικότητα, σε ένα έκθεση ψηφιακής διαφήμισης που πραγματοποιήθηκαν από την Upstream και την YouGov στην 2012, διαπίστωσαν ότι περίπου το 20% των καταναλωτών είπε ότι εάν μια εταιρεία διαφημίζει πάρα πολύ, δεν θα χρησιμοποιούσαν ποτέ ξανά αυτήν την εταιρεία.

Παράδειγμα Bad Website: Hemmy.net

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

Λάθος #5: Επεξεργασία ερασιτεχνικών φωτογραφιών

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

Συμβουλή: Χρησιμοποιήστε δωρεάν εργαλεία επεξεργασίας εικόνων online: canva, Pic Monkey

Παράδειγμα Bad Website: Peter's Buses

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

Λάθος #6: Σχεδιάζει μια τριετία που θα μπορούσε να δημιουργήσει

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

Παράδειγμα Bad Website: Cyber ​​D-Sign Clan

Κακά παραδείγματα σχεδιασμού
Ο σχεδιαστής δεν έχει αλλάξει καν τα χρώματα των λέξεων από την τυπική σχεδίαση που ξεκινά με το MS. Αυτός ο σχεδιασμός είναι τόσο απλός ώστε να είναι άμεσα αναγνωρίσιμος ως βασικό υπόβαθρο μοτίβου της Microsoft και Word Art.
Κακά παραδείγματα σχεδιασμού
Επιπλέον, μια αναδυόμενη σελίδα προσπαθεί να φορτώσει. Αυτό μπορεί να παραβλεφθεί εάν ο σχεδιασμός ήταν καλύτερος μόλις παραλείψετε την εισαγωγή και κάνετε κλικ στην κύρια σελίδα. Ωστόσο, ο σχεδιασμός της συνδεδεμένης σελίδας (παρακάτω) είναι εξίσου απογοητευτικός.

Λάθος #7: Κακή πλοήγηση

Ακόμα κι αν ένας ιστότοπος έχει οπτικά ελκυστικό σχεδιασμό, οι επισκέπτες μπορούν να απογοητευτούν και να αφήσουν την κακή πλοήγηση.

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

Παράδειγμα Bad Websείναι: LawnSignDirectory.com

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

Λάθος #8: Ζητήματα κειμένου

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

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

Παράδειγμα Bad Website: Τρίγωνο των Βερμούδων

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

Λάθος #9: Τύπος

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

Συμβουλή: Μάθετε πώς μπορείτε να να πιάσετε τυπογραφικά λάθη και λάθη στη δική σας γραφή.

Παράδειγμα Bad Website: Web Tek Rocks

Κακά παραδείγματα σχεδιασμού
Ένα τυπογραφικό λάθος μπορεί να αγνοηθεί, αλλά αυτός ο ιστότοπος δείχνει πώς μερικές σκιερές τοποθεσίες είναι γεμάτες από σφάλματα. Για μια εταιρεία που θέλει να σας βοηθήσει να τοποθετήσετε τον ιστότοπό σας στον ιστό, πιθανότατα θα εξυπηρετηθήκατε καλύτερα να αφιερώσετε λίγο χρόνο για τη διόρθωση των ζητημάτων στον ιστότοπό σας, προτού δημιουργήσετε τη δική σας. "Ειδικό" είναι σπέλτα SPECAIL? "Εμπειρογνωμοσύνη" είναι γραμμένο "experteze"? Προσφέρουν να "βοηθήσουν να βρεθείτε" σε απευθείας σύνδεση. "Μπορούμε χτισμένο το site σας πιο γρήγορα από οποιονδήποτε! "

Λάθος # 10: Χειρότερος σχεδιασμός ιστοτόπου - τόσο κακό που δεν μπορείτε να το εξηγήσετε

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

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

Παράδειγμα Bad Website: Η μετά θάνατον ζωή

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

Σχετικά με την Lori Soard

Η Lori Soard εργάζεται ως ανεξάρτητος συγγραφέας και συντάκτης από την 1996. Έχει πτυχίο Αγγλικής Εκπαίδευσης και Διδακτορικό στη Δημοσιογραφία. Τα άρθρα της έχουν εμφανιστεί σε εφημερίδες, περιοδικά, σε απευθείας σύνδεση και έχει δημοσιεύσει πολλά βιβλία. Από το 1997 εργάστηκε ως σχεδιαστής και υποστηρικτής ιστοσελίδων για δημιουργούς και μικρές επιχειρήσεις. Έχει εργαστεί ακόμη και για σύντομη ταξινόμηση ιστοσελίδων για μια δημοφιλής μηχανή αναζήτησης και μελετώντας σε βάθος τακτική SEO για πολλούς πελάτες. Απολαμβάνει την ακοή από τους αναγνώστες της.