Breaking inputs πιστωτικών καρτών σε άτομα - γιατί είναι τέλειο σχέδιο UX τόσο σημαντικό;

Ως σχεδιαστής UI στο Netguru, ασχολήθηκα με διάφορα έργα fintech τους τελευταίους μήνες. Λαμβάνοντας υπόψη όλα τα σημεία πόνου αυτών των εφαρμογών, συνειδητοποίησα ότι ένα μοτίβο δεν είναι σκέψης μέσω αρκετών - μορφών που σας επιτρέπουν να εισάγετε τα στοιχεία της κάρτας πληρωμής. Υπάρχουν διάφορα πλαίσια αυτής της διαδικασίας, αλλά πάντα, ανεξάρτητα από την κατάσταση, είναι ένα κρίσιμο και υποχρεωτικό βήμα είτε να τελειώσετε την αγορά είτε να αρχίσετε να χρησιμοποιείτε την εφαρμογή.

Τα στοιχεία: Στατιστικά στοιχεία της Ευρωπαϊκής Κεντρικής Τράπεζας

Αυτή τη στιγμή έχουμε εκατοντάδες, αν όχι χιλιάδες, μεθόδους πληρωμής - ποικίλλει ανάλογα με την περιοχή και την εξέλιξή της. Ωστόσο, σύμφωνα με την Ευρωπαϊκή Κεντρική Τράπεζα, το 2017, το 51,6% των πληρωμών έγινε με κάρτες πληρωμών. Αυτό μας δίνει 135 κάρτες πληρωμών ανά κάτοικο. Οι πληρωμές ηλεκτρονικού χρήματος είχαν μόνο μερίδιο 2,6%, αλλά, το πιο σημαντικό, το μερίδιό τους αυξήθηκε κατά 20,3% από το προηγούμενο έτος. Το συμπέρασμα από αυτά τα στατιστικά στοιχεία είναι μάλλον σαφές - οι κάρτες πληρωμών είναι οι υψηλότερες - είναι αξιόπιστες, εύκολες στη χρήση, διατίθενται σε ολόκληρο τον κόσμο και, το σημαντικότερο, είναι σταθερά εμφυτευμένες στις καθημερινές μας συνήθειες.

Τι σημαίνει για τους ανθρώπους που συμμετέχουν στη δημιουργία ψηφιακών διεπαφών; Καταρχήν, είμαστε υποχρεωμένοι να παρέχουμε τέλειες λύσεις που υποστηρίζουν τους χρήστες σε όλη τη διαδικασία εισαγωγής των δεδομένων που βρίσκονται σε μια φυσική κάρτα. Δεύτερον, δεν πρέπει να αγνοούμε τις πληρωμές ηλεκτρονικού χρήματος, οι οποίες αυξάνονται σταθερά και βελτιώνονται. Σίγουρα δεν γνωρίζουμε ποιο είναι το μέλλον, αλλά, με βάση τις τρέχουσες τάσεις, μπορούμε να προσπαθήσουμε να το προβλέψουμε - οι κάρτες πληρωμών θα χρησιμοποιηθούν λιγότερο συχνά και τα ηλεκτρονικά χρήματα, αργά αλλά αναπόφευκτα, θα γίνουν πιο προσιτά. Ωστόσο, επί του παρόντος, ας επικεντρωθούμε στο παρόν: ποιες είναι οι διαθέσιμες μέθοδοι για την εισαγωγή δεδομένων στις συσκευές μας;

Τεράστια ανάπτυξη της τεχνολογίας

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

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

Σάρωση, μορφή πολλαπλών εισροών και μορφή απλής εισόδου

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

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

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

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

Αλλά δεν είναι ήδη νεκρός; Ναι και ΟΧΙ. Όταν εξετάζουμε την οπτική όψη, ήταν πράγματι ως επί το πλείστον θαμμένος με την απελευθέρωση των iOS 7 και OS X Yosemite, αλλά, σύμφωνα με τον παραπάνω ορισμό, ο σπερμομορφισμός δεν είναι μόνο για το πώς φαίνονται τα πράγματα, αλλά και για το πώς λειτουργούν.

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

Σάρωση ως η πιο αξιόπιστη, ασφαλή και ταχύτερη μέθοδος

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

Η ιδανική μορφή - 7 χρυσές κανόνες

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

  1. Δεξιά και λογική σειρά και μορφή
    Όπως ανέφερα προηγουμένως, είναι πολύ σημαντικό να διατηρηθεί η σειρά παρόμοια με μια φυσική κάρτα. Αυτό βοηθά τους χρήστες να σαρώσουν τη φόρμα πιο γρήγορα. Διαβαίνουν τις πληροφορίες με τη σειρά και τις συμπληρώνουν ανάλογα. Επιπλέον, αποφύγετε τη χρήση στοιχείων επιλογής - απλώς κοιτάξτε την κάρτα. Δεν λέει τον Ιανουάριο του 2020, αλλά 01/20. Το ίδιο ισχύει και για τον αριθμό κάρτας, ο οποίος συνήθως διαιρείται σε τετραψήφια κομμάτια. Φροντίστε να το παρουσιάσετε με τον ίδιο τρόπο.
  2. Ζητήστε μόνο τις απαραίτητες πληροφορίες
    Ζητώντας το πλήρες όνομα και τη διεύθυνση του κατόχου της κάρτας μπορεί να είναι ένα πρόσθετο μέτρο ασφάλειας, αλλά δεν χρειάζεται πάντα να το κάνετε. Για παράδειγμα, εάν η εφαρμογή σας κάνει KYC (διαδικασία επαλήθευσης ταυτότητας βάσει εγγράφου και φωτογραφίας), γνωρίζετε ήδη το πλήρες όνομα. Βεβαιωθείτε ότι επαναχρησιμοποιήσετε τις πληροφορίες που έχετε δώσει πριν. Ο αριθμός της κάρτας περιλαμβάνει πολύ περισσότερες πληροφορίες από ό, τι αναμένετε. Για παράδειγμα, δεν χρειάζεται να ρωτήσετε για τον τύπο κάρτας, καθώς αυτό μπορεί εύκολα να αποκωδικοποιηθεί από τον αριθμό.
  3. Χρησιμοποιήστε τον κατάλληλο τύπο πληκτρολογίου
    Αυτός ο κανόνας είναι απλός στην εφαρμογή, αλλά πολύ συχνά ξεχασμένος. Τα smartphones μας έχουν μερικά είδη πληκτρολογίων ανάλογα με το περιβάλλον. Έχουμε μια ειδική έκδοση για να εισαγάγουμε τη διεύθυνση ηλεκτρονικού ταχυδρομείου, τον αριθμό τηλεφώνου ή τη διεύθυνση της ιστοσελίδας μας. Χρησιμοποιήστε ένα αριθμητικό πληκτρολόγιο για να καταστήσετε τον αριθμό CVV εύκολο για τον πελάτη.
  4. Η οπτική αναπαράσταση είναι μια ωραία προσθήκη
    Εάν διαθέτετε τους απαραίτητους πόρους, δείξτε μια οπτική αναπαράσταση της κάρτας που ενημερώνεται καθώς ο χρήστης εισάγει τις λεπτομέρειες. Ο έλεγχος εάν τα δεδομένα είναι σωστά θα είναι πολύ πιο γρήγορα με αυτόν τον τρόπο.
  5. Ελαχιστοποιήστε τα σφάλματα, ενημερώστε σαφώς εάν συμβούν
    Βεβαιωθείτε ότι ακολουθείτε τους βασικούς κανόνες προσβασιμότητας, όπως κατάλληλη αντίθεση, μέγεθος γραμματοσειράς κ.ο.κ. Αυτό πιθανότατα θα ελαχιστοποιήσει τον αριθμό των σφαλμάτων, επειδή η φόρμα σας θα είναι εύκολη στην ανάγνωση και σάρωση. Ωστόσο, αν εμφανιστούν κάποια σφάλματα, βεβαιωθείτε ότι έχετε τοποθετήσει μια υπόδειξη δίπλα στο σημείο όπου ο χρήστης πρέπει να διορθώσει κάποιες πληροφορίες.
  6. Ενεργοποιήστε υπηρεσίες τρίτου μέρους που έχουν ήδη τις λεπτομέρειες (π.χ. Apple Pay)
    Εάν είναι δυνατόν, ενεργοποιήστε τις υπηρεσίες τρίτου μέρους που χρησιμοποιεί ήδη ο χρήστης σας. Θα μπορούσε να είναι τόσο απλό όσο επιτρέπει την πληρωμή της Apple ή την εφαρμογή του PayPal ως μέθοδο πληρωμής. Μετά από αυτόν τον απλό κανόνα μπορεί να βελτιωθούν σημαντικά τα ποσοστά μετατροπής σας!
  7. Ασφάλεια - παρέχει μια αξιόπιστη λύση
    Βεβαιωθείτε ότι τα προσωπικά δεδομένα των χρηστών είναι ασφαλή από την πλευρά σας. Ένα άλλο βήμα θα ήταν να ενημερώσετε τους χρήστες σας σχετικά με τις προφυλάξεις. Θα μπορούσε να είναι οτιδήποτε - μια λεπτή εικόνα, μια μικρή υπόδειξη ή απλά ένα καθαρό σχέδιο. Η καθησυχαστική προστασία των χρηστών σας για το απόρρητο θα κάνει το προϊόν σας πιο αξιόπιστο. Μην περιπλέχετε, μην προσθέτετε μεγάλες εκθέσεις για την ασφάλεια σε αυτό το μέρος - μια μικρή υπόδειξη θα είναι περισσότερο από αρκετή.

Για να συνοψίσω…

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

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

Ποιά είναι η γνώμη σου? Έχετε αντιμετωπίσει οποιαδήποτε παρόμοια προβλήματα κατά το σχεδιασμό για fintech; Μοιραστείτε τη γνώμη σας στην ενότητα σχολίων και αν βρήκατε αυτές τις πληροφορίες χρήσιμες - αφήστε ένα χτύπημα.

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

Ευχαριστώ όλους τους ανθρώπους που συμμετείχαν στην ανάγνωση των αποδείξεων και τα σχόλιά τους: Patrycja Paczkowska, Mateusz Przytuła, Luke Pachytel, Toto Castiglione, Ναταλία Chrzanowska