Ένα απλό hack για να βελτιώσει το Onboarding UX [OCD]

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

Απλό αγγελιοφόρο ui χτισμένο χρησιμοποιώντας αυτό τον ελεύθερο πόρο σκίτσο

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

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

Έμαθα αυτό το σκληρό τρόπο όταν μου εμποτισμένος όσο το Dribbble θα μπορούσα να σχεδιάσω ένα ταμπλό για μια εφαρμογή b2b. Φαινόταν εξαιρετικό στο Sketch, αλλά οι πελάτες μας δεν κατάφεραν να βρουν το δρόμο τους.

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

Υπάρχουσες λύσεις

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

Το UX, που βασίζεται σε διαφάνεια, βασίζεται σε διαφάνεια

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

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

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

Επεξήγηση εργαλείου με βάση το demo για introjs.com/

Όσον αφορά τη λύση που βασίζεται σε εργαλειοθήκη, τους βρήκα ενοχλητικό και σχεδόν πάντα έκανε κλικ στο "skip tutorial". Παρόλο που μεγάλες εταιρείες όπως η Canva χρησιμοποιούν το εργαλείο υπολογισμού με βάση την επιβίβαση. Ένα προϊόν που ονομάζεται AppCues σάς επιτρέπει να σχεδιάσετε αυτά τα εργαλεία χωρίς κώδικα, τακτοποιημένα.

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

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

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

OCD γνωστός και ως επίκεντρο σχεδιασμού

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

Ήθελα μια λύση η οποία:

  • Ήταν σχετικό με το πλαίσιο
  • Δεν ήταν ενοχλητικό (κανένας δεν θέλει να πάρει 17 βήματα για να μάθει πώς λειτουργεί ένα χαρακτηριστικό)
  • Είναι διακριτική (όπως οι φάρες)
  • Είναι εύκολο να καταναλωθεί (τα εργαλεία δεν είναι εύκολο να καταναλωθούν)

Αποτέλεσμα

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

Κατάσταση 1: Δεν υπάρχουν επαφές

Κατάσταση 2: Παρουσιάζονται οι επαφές, αλλά δεν υπάρχουν συζητήσεις

Κατάσταση 3: Και οι συνομιλίες και οι επαφές είναι παρούσες

Ο στόχος κάθε κράτους είναι να προχωρήσει ο χρήστης στην επόμενη κατάσταση. Όταν ο χρήστης έχει προχωρήσει στην κατάσταση 3, είναι επιτυχημένος στην επιβίβαση. Λαμβάνοντας υπόψη το mockup της συνομιλίας, ο στόχος για κάθε κατάσταση έχει ως εξής:

Στόχος κράτους 1: Κύριος χρήστης να προσθέσει μια επαφή

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

Κράτος 1 - Προκαλέστε τον χρήστη να προσθέσει επαφές (απεικόνιση από undraw.co)

Μόλις προστεθεί μια επαφή, μπορούμε να ξεκινήσουμε το δεύτερο στόχο.

Στόχος Κράτος 2: Πρώτος χρήστης για να ξεκινήσει μια συνομιλία

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

Κράτος 2 - Επαφή προστέθηκε, πρώτος για να ξεκινήσει μια συνομιλία

Στόχος κράτους 3: Κανένας, ο χρήστης είναι ενσωματωμένος - όλα τα συνθήματα πρέπει να εξαφανιστούν

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

Κράτος 3 - Ο χρήστης έχει επιβιβαστεί με επιτυχία

Οφέλη αυτής της προσέγγισης

  • Σε σύγκριση με την προσέγγιση των διαφανειών στο βήμα 1, το Onboarding Centric Design (OCD) παρουσιάζει το περιεχόμενο σε κομμάτια. Οι πληροφορίες διατίθενται στο σημείο λήψης αποφάσεων.
  • Αυτή η προσέγγιση μπορεί να χρησιμοποιηθεί τόσο σε κινητές όσο και σε επιτραπέζιες συσκευές. Αυτό το UI είναι απλό, αλλά σε περίπτωση σύνθετου UI, μπορείτε να χρησιμοποιήσετε OCD με hotspots για να αυξήσετε CTAs.
  • Αυτή η προσέγγιση βελτιώνει πρώτα την UX σας, αναγκάζοντας σας να σκεφτείτε από την άποψη του ταξιδιού του χρήστη.
  • Αν τυχαίνει να γράφετε τα πρόεδρά σας χρησιμοποιώντας το React, αυτή η προσέγγιση ταιριάζει με την αρχιτεκτονική συστατικών της.

Επομένως, ως κανόνας:

Σχεδιασμός μοντέλων για κράτη.
Κάθε κράτος έχει έναν στόχο - την πρόοδο στην επόμενη κατάσταση.
Η τελευταία κατάσταση είναι όταν ο χρήστης σας είναι ενσωματωμένος.

Ευχαριστώ για την ανάγνωση :)

Γεια σας, αν σας άρεσε αυτό το άρθρο και θέλετε να ενημερώσετε, ακολουθήστε με: Μέσο, Github ή Twitter

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