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

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

Προβλέψτε σφάλμα χρήστη. ελαττώστε τον ερεθισμό των χρηστών

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

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

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

Διατηρήστε πρότυπα ιστού

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

  • Βεβαιωθείτε ότι οι περιοχές με δυνατότητα κλικ είναι άμεσα αναγνωρίσιμες (όπως οι σύνδεσμοι που είναι ενεργοποιημένοι) αυτό το μέρος ) και είναι αρκετά μεγάλα ώστε να ενεργοποιούνται εύκολα.
  • Σπάστε μπλοκ κειμένου με εικόνες και άλλη οπτική διέγερση.
  • Χρήση τριμμένη φρυγανιά όταν εφαρμόζεται;
  • Προσπαθήστε να αποφύγετε τη διάδοση του ίδιου άρθρου ή της αναζήτησης προϊόντων σε πολλές σελίδες.
  • Δημιουργήστε εύχρηστες πληροφορίες επικοινωνίας, FAQ, γραμμή αναζήτησης και άλλες βασικές λειτουργίες.

Αν και Grip Limited's ιστοσελίδα είναι συναρπαστικό και συναρπαστικό, είναι επίσης απίστευτο σύγχυση. Παρόλο που υπάρχει μια εξήγηση για το πώς μπορείτε να σύρετε τις στήλες για να αποκαλύψετε το περιεχόμενο, χάνονται στη μίζα της άλλης τυπογραφίας. Ένα παραδοσιακό μενού είναι προσβάσιμο, αλλά μόνο εάν κατασκοπεύετε το μικρό drop-down. Είναι ένα τόσο δροσερό design site που μερικοί χρήστες δεν ενδιαφέρονται για το πόσο δύσκολο είναι να το χρησιμοποιήσουν, αλλά πολλοί άλλοι θα αποστασιοποιηθούν. Αλλά αν ο ιστότοπος ενσωμάτωσε τις παραπάνω προτάσεις στο σχεδιασμό του, θα μπορούσε να διατηρήσει το δροσερό του παράγοντα και να προσφέρει ένα καλό UX.

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

Πού να τραβήξετε τη γραμμή

Υπάρχουν άλλοι κανόνες UX που μπορούν να λυγιστούν αλλά να μην σπάσουν. Αλλά σε ποιο σημείο ένας σχεδιαστής πάει πολύ μακριά; Τα στοιχεία πλοήγησης είναι ένα καλό παράδειγμα για να συνεργαστείτε, επειδή κάθε τοποθεσία έχει κάποια μορφή από αυτά. Συμβατικά, είναι διευθετημένα με έναν από τους δύο τρόπους:

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

Αλλά υπάρχουν και άλλα στυλ και συστήματα πλοήγησης που μπορούν να λειτουργήσουν αν χρησιμοποιηθούν προσεκτικά και προσεκτικά. Για παράδειγμα, αυτό το site χαρτοφυλακίου έχει μια λίστα πλοήγησης που καταλαμβάνει το μεγαλύτερο μέρος της σελίδας και κάθε λέξη είναι μερικώς συγκεχυμένη. Επιπλέον, τα στοιχεία δεν παραμένουν ακίνητα. να πέφτουν και να διαχωρίζονται για να εμφανίζουν το περιεχόμενο σε κάθε ενότητα. Όλες αυτές οι ακμή μπορεί να έχουν συνδυαστεί για να σχηματίσουν ένα σύγχρονο σύστημα που θα εμπόδιζε γρήγορα τον χρήστη. Ωστόσο, ο σχεδιασμός αποφεύγει να είναι προβληματικός επειδή είναι τόσο απλός. οι λέξεις είναι ακόμα ευανάγνωστες. τα drop-downs έχουν τόσο μικρή πληροφορία ότι ο υπόλοιπος κατάλογος πλοήγησης δεν κινδυνεύει να χαθεί. Συνολικά, είναι ένα τολμηρά διαφορετικό σύστημα που αποφεύγει να είναι προβληματική.

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

Η εξοικείωση έναντι της λειτουργικότητας

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

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

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

Χρησιμοποιήστε μια ξεκάθαρη διοχέτευση μετατροπής

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

Οι ιστότοποι ηλεκτρονικού εμπορίου είναι συνήθως εκείνοι που παίρνουν λάμψη για τις κακοσχεδιασμένες διοχετεύσεις μετατροπής τους, αλλά υπάρχουν πολλά υπέροχα παραδείγματα από τα όμορφα σχεδιασμένα καταστήματα web βελτιστοποιημένα με UX. Πάρτε για παράδειγμα το Φρούτα του Loom site, η οποία έχει μια καθαρή, φιλική διεπαφή που εξακολουθεί να είναι λογικά κατασκευασμένη. Δεν είναι ούτε το αποτέλεσμα της προσαρμοσμένης και περίπλοκης ανάπτυξης backend. ο ιστότοπος δημιουργήθηκε χρησιμοποιώντας απλά Amazon λογισμικό ηλεκτρονικού εμπορίου, ότι κάθε μικρή επιχείρηση θα μπορούσε να εκμεταλλευτεί.

Τοποθετήστε τη σάρωση και προσθέστε οπτικό ενδιαφέρον

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

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

Η κατώτατη γραμμή

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

Συμβιβάζετε ποτέ τη χρηστικότητα για την αισθητική; Μπορεί ο σχεδιασμός να είναι καλός χωρίς χρηστικότητα; Ας γνωρίσουμε τις σκέψεις σας στα σχόλια.

Προτεινόμενη εικόνα / μικρογραφία, λειτουργική εικόνα μέσω Shutterstock.