Ελαττώματα σχεδίασης που μπορούν να αποφευχθούν που μπορούν να βλάψουν τον ιστότοπό σας

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

Δεν μπορεί να κατηγορηθεί για την εκπαίδευση. Κάθε μάθημα στο Internet Design and Development που αξίζει το αλάτι του καλύπτει τις βασικές αρχές καλών αρχών σχεδιασμού, χρηστικότητας και προσβασιμότητας. Δεν μπορεί να κατηγορηθεί για τα πρότυπα μηχανικής, επειδή οι οδηγίες του W3C είναι αυστηρότερες και σαφέστερες από ποτέ. Ούτε μπορεί να κατηγορηθεί για την τεχνολογία, επειδή η τεχνολογία υποστηρίζει περισσότερο την ανάπτυξη ιστότοπων υψηλής ποιότητας, όχι λιγότερο.

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

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

1. Κακή αντίθεση

Αυτό έγινε πρόσφατα μοντέρνο. Είναι εκπληκτικό που θα μπορούσε να είναι έτσι, δεδομένου του επαναλαμβανόμενου μηνύματος που μας οδηγεί επανειλημμένα τα τελευταία 25 χρόνια, ότι πρέπει να αποφύγουμε την κακή αντίθεση. Ο πρόδρομος αυτής της μόδας φαίνεται να είναι Twitter και Bootstrap, αλλά με τη σειρά τους θα μπορούσαν να έχουν εμπνευστεί από κάποιον άλλο. Ας ρίξουμε μια ματιά σε ένα παράδειγμα:

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

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

Οι σύνδεσμοι δεν έχουν την τυπική απόχρωση του μπλε, είναι στο "Twitter Μπλε », η οποία είναι μια πολύ απαλή απόχρωση που δεν έρχεται σε αντίθεση καλά με το λευκό φόντο.

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

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

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

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

2. Κακή κωδικοποίηση

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

Φαίνεται σαν μια συνηθισμένη περίπτωση κάποιου που ξεχνά να ορίσει την κωδικοποίηση σε UTF-8, σωστά; Εκτός εάν δεν είναι, επειδή η κωδικοποίηση για αυτήν τη σελίδα έχει οριστεί σε UTF-8. Ο σχεδιαστής του ιστότοπου έκανε τα πάντα σωστά, ακόμη και στο μέγιστο δυνατό σημείο να ξεφύγει από όλες τις αποστρόφους στα μετα-δεδομένα στον χαρακτήρα οντότητας 39, παρόλο που αυτό δεν μπορεί καν να είναι απαραίτητο. Το πρόβλημα προέκυψε με την εισαγωγή του περιεχομένου στο σχεδιασμό, επειδή αυτό που προφανώς συνέβη εδώ είναι λάθος κωδικοποιημένο κείμενο που περιέχει έξυπνα εισαγωγικά MS Word έχει επικολληθεί στην ενότητα περιεχομένου, διασφαλίζοντας έτσι ότι θα αποδίδεται λανθασμένα σε κάθε πρόγραμμα περιήγησης, επειδή η κωδικοποίηση του η σελίδα έχει οριστεί σε UTF-8 και το περιεχόμενο δεν κωδικοποιείται σε UTF-8.

Ενώ οι περισσότεροι άνθρωποι θα είναι πρόθυμοι να παραβλέψουν το μικρό ζήτημα των έξυπνων αποστροφών που αποδίδονται ως â € ™, είναι πολύ ενοχλητικό και είναι ακόμη χειρότερο όταν το λάθος εμφανίζεται στον τίτλο. Η ουσία είναι ότι πρέπει να ελέγξετε ότι το περιεχόμενό σας εμφανίζεται σωστά όταν το απελευθερώνετε στον Ιστό και πρέπει πάντα να διασφαλίζετε ότι έχετε χρησιμοποιήσει σωστή κωδικοποίηση (η οποία για τους περισσότερους σκοπούς θα είναι UTF-8 ή UTF-16). Θυμηθείτε ότι οι ιστότοποι αφορούν κυρίως τις πρώτες εντυπώσεις και δεν είναι πραγματικά καλό εάν η πρώτη εντύπωση που κάποιος παίρνει από την επιχείρησή σας είναι «ατημέλητη» ή «τεμπέλης».

3. Χρήση Flash

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

Λοιπόν, το Flash είναι ένα τεράστιο γουρούνι πόρων. Είναι επίσης γεμάτο με ευπάθειες, έχει στοχοθετηθεί από κακόβουλους χάκερ ως μηχανισμό παράδοσης trojan και είναι εγγενώς κίνδυνος απορρήτου επίσης λόγω της ενσωμάτωσης επίμονων cookie Flash, αλλιώς γνωστών ως Local Shared Objects. Αυτά τα cookie παρακάμπτουν τις ρυθμίσεις ασφαλείας του προγράμματος περιήγησης και ενδέχεται να περιέχουν περισσότερες πληροφορίες από ένα κανονικό cookie. Ακόμα χειρότερα, τα LSO μοιράζονται δεδομένα μεταξύ διαφορετικών προγραμμάτων περιήγησης, καθιστώντας ακόμη πιο δύσκολο για τους απλούς χρήστες να διατηρούν το απόρρητο.

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

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

4. Αυτόματη αναπαραγωγή βίντεο

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

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

Εάν τόσοι πολλοί χρήστες περιγράφουν αυτήν τη συμπεριφορά ως ενοχλητική και πραγματικά ρωτούν πώς να την απενεργοποιήσουν, πρέπει πραγματικά να είναι ενοχλητική. Και ναι, γνωρίζουμε ότι είναι πραγματικά πολύ απλό για τους χρήστες του Firefox, του Chrome και του Chromium να απενεργοποιήσουν πλήρως την αυτόματη αναπαραγωγή, αλλά πόσοι χρήστες είναι πραγματικά άνετοι να σκάβουν περίπου: config ή εγκατάσταση μιας προσθήκης για τον αποκλεισμό συμπεριφοράς που δεν πρέπει να είναι εκμεταλλεύεται αρχικά;

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

5. Άπειρη κύλιση

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

Αλλά για άλλη μια φορά, τα αποτελέσματα αναζήτησης λένε μια ιστορία. Δείτε αυτό το παράδειγμα:

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

6. Δημιουργία αναδυόμενων παραθύρων ή αναδυόμενων παραθύρων όταν δεν χρειάζονται

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

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

  • για να ξεγελάσει τα αναλυτικά στοιχεία ποσοστού εγκατάλειψης της Google
  • να προσπαθήσετε να κάνετε τις δεύτερες σκέψεις σας εάν κάνετε αναπήδηση

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

7. Ενοχλητικές επικαλύψεις

Δεν είναι η «Διεθνής Ημέρα του Bash στο TripAdvisor» (ακόμα), αλλά δεδομένου ότι παρέχουν τόσο γενναιόδωρα παραδείγματα ενοχλητικής συμπεριφοράς ιστοσελίδων, θα ήταν πραγματικά να φαίνεται ένα άλογο δώρου στο στόμα για να το αγνοήσει αυτό. Αυτό λοιπόν έδειξε το TripAdvisor μόλις πριν από μια στιγμή, όταν έκανα αυτό το αναδυόμενο στιγμιότυπο οθόνης:

Μπορείτε πιθανώς να μαντέψετε ήδη τι είναι τόσο ηλίθιο γι 'αυτό. Είναι ότι είμαι ήδη στον ιστότοπό τους. Σκέφτομαι ήδη να ψωνίσω στον ιστότοπό τους. Έτσι, αυτό το αναδυόμενο δεν επιτυγχάνει τίποτα εκτός από το να με εμποδίζει να το κάνω αυτό. Τουλάχιστον δεν είναι μια από αυτές τις παρόμοιες επικαλύψεις που με παρακαλούν να εγγραφώ σε ένα ενημερωτικό δελτίο ή να κατεβάσω ένα «δωρεάν» ηλεκτρονικό βιβλίο.

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

Είναι ως επί το πλείστον θέμα κοινής λογικής (γι 'αυτό πιθανώς οι έμποροι αποτυγχάνουν σε αυτό)

Το πραγματικά προφανές είναι ότι όταν κάνετε κάτι στον Ιστό που έχει μόνο όφελος για τον εαυτό σας, δεν παρέχει κανένα όφελος στον χρήστη, και με κάποιο τρόπο τους ενοχλεί, εισβάλλει στο απόρρητό του ή τους κοστίζει πραγματικά χρήματα (όπως στην περίπτωση της αυτόματης αναπαραγωγής βίντεο και απεριόριστες ιστοσελίδες κύλισης), οι χρήστες πρόκειται να το αγανακτούν. Ίσως όχι όλοι οι χρήστες, αλλά αρκετά από μια ενεργά πλειοψηφία να επηρεάσουν αρκετά περισσότερα.

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

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

Μπογκντάν Ράνσα

Ο Bogdan είναι ιδρυτικό μέλος του Inspired Mag, έχοντας συγκεντρώσει σχεδόν 6 χρόνια εμπειρίας κατά τη διάρκεια αυτής της περιόδου. Στον ελεύθερο χρόνο του αρέσει να μελετά την κλασική μουσική και να εξερευνά εικαστικές τέχνες. Είναι επίσης πολύ παθιασμένος με τους fixies. Έχει ήδη 5.