Σχεδιασμός εστιασμένων διεπαφών για καλύτερη συμμετοχή χρηστών

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

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

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

Capture Novelty

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

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

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

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

Μια εναλλακτική λύση θα ήταν η χρήση του GiftRocket απεικονισμένα εικονίδια ως συνδέσμους να εμβαθύνεις στην περιοχή.

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

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

Υποτυπώδης τυπογραφία

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

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

1. Διαχωρίστε το περιεχόμενο με σαφείς υπότιτλους
2. Διαχωρίστε τις παραγράφους ώστε να είναι μικρότερες
3. Χρησιμοποιήστε λίστες με κουκκίδες για να μοιραστείτε τα σημεία σας πιο γρήγορα

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

Ανατρέξτε στο blog του Quick Sprout για ένα παράδειγμα αυτού του στυλ γραφής. Το περιεχόμενο γράφτηκε από τον Neil Patel και συχνά γράφει περιεχόμενο με μεγάλο μήκος, αλλά αυτός χωρίζει τις παραγράφους σε 1-3 φράσεις το καθένα.

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

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

Eye-Catching Εικόνες

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

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

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

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

Η TechCrunch το κάνει αυτό με τις εμφανιζόμενες εικόνες στα άρθρα όπου θα βρείτε συχνά ένα εμφανίζεται φωτογραφία πάνω από την πτυχή.

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

Αντιστοιχία στοιχείων σελίδας

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

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

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

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

Θα παρατηρήσετε α παρόμοια τεχνική στην αρχική σελίδα του Optin Monster. Αυτή η κεφαλίδα έχει μόνο ένα κουμπί με τίτλο Get OptinMonster Now. Είναι ένα λαμπρό πράσινο κουμπί σε μπλε φόντο χωρίς άλλα πράσινα στοιχεία.

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

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

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

Ο καλύτερος τρόπος για να σχεδιάσετε με την αντίθεση είναι να μελετήσετε παραδείγματα και απλά να πειραματιστείτε. Δείτε τι λειτουργεί και τι όχι από μετρήσεις παρακολούθησης με έλεγχο A / B. Αν ψάχνετε για περισσότερα παραδείγματα δείτε αυτό το γράψιμο Codrops γεμάτο συμβουλές και οθόνες ζωντανών ασύμμετρων ιστοτόπων.

Ενθαρρύνετε την αλληλεπίδραση των χρηστών

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

Σε ένα static site, μπορείτε να προσθέσετε πολλά σχετικοί σύνδεσμοι για να διαβάσετε περισσότερα, ή να συμπεριλάβετε slideshows εικόνας. Μπορείτε επίσης να προσθέστε έντυπα για σχόλια χρηστών ή ενημερωτικό δελτίο ηλεκτρονικού ταχυδρομείου.

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

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

Σκεφτείτε πόσο σύγχυση η προοπτική του Twitter θα ήταν για ένα ολοκαίνουργιο χρήστη. Αν δεν ακολουθήσουν κανέναν και δεν έχουν κανέναν οπαδοί, γιατί θα τιτίβευαν?

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

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

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

• Μια τακτική που χρησιμοποιεί ο χρήστης για να αυξήσει τη δέσμευση (thinkapps.com)
• Ένα μάθημα σταδιακής δέσμευσης (uxbooth.com)
• Μην υποθέσετε ότι οι νέοι χρήστες θέλουν να μάθουν πώς να χρησιμοποιούν το προϊόν σας (uxdesign.cc)