Σχεδίαση της διεπαφής χρηστών πορτοφολιού Kin

Απαιτήσεις έργου

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

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

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

Για το λόγο αυτό, συνειδητοποιήσαμε από νωρίς ότι θα είναι σημαντικό να διατηρηθεί αυτή η έκδοση όσο το δυνατόν λιγότερο.

Προγραμματισμός των ταξιδιών των χρηστών

Επί του σκάφους

Οι χρήστες θα εισαχθούν στο πορτοφόλι από το bot @KikTeam. Αυτό μας επιτρέπει να αξιοποιήσουμε όσα γνωρίζουν οι χρήστες του Kik - chatting - για να παρουσιάσουν αυτή τη νέα εμπειρία.

Αρχιτεκτονική πληροφοριών πορτοφολιού (IA) - εξέταση διαφορετικών δομών

Εξετάσαμε δύο πιθανές δομές ΕΑ κατά τη διάρκεια δύο επαναλήψεων αυτού του έργου.

  1. Ένα ισχυρό σύνολο χαρακτηριστικών που περιλαμβάνει το ιστορικό συναλλαγών και ένα μεγάλο μέρος των τρόπων να κερδίσετε το Kin.
  2. Ένα πιο οικονομικό σύνολο που περιλαμβάνει μόνο το υπόλοιπο και τις επιλογές κερδών / δαπανών.

Η πρώτη επανάληψη

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

Για τις δύο νέες σελίδες (κέρδος και ιστορικό συναλλαγών) εξετάσαμε δύο συμβατικά σχέδια:

  1. Ένα χρονοδιάγραμμα για το ιστορικό συναλλαγών: Αυτό το μοτίβο θα μας επιτρέψει να παρουσιάσουμε πληροφορίες σε χρονολογική σειρά, που ταιριάζει με τον σκοπό αυτής της σελίδας - που δείχνει τις εισερχόμενες και εξερχόμενες συναλλαγές Kin με την πάροδο του χρόνου. Αυτό είναι κοινό για τις τραπεζικές εφαρμογές.
  2. Κάρτες περιεχομένου για κέρδος: Αυτό το μοτίβο χρησιμοποιείται συνήθως στην κατανάλωση περιεχομένου και στα προϊόντα ηλεκτρονικού εμπορίου, το οποίο ταιριάζει με το χώρο που θα λειτουργεί το Kin.

Διερευνήσαμε επίσης τη χρήση λιστών λιστών και μεγάλων καρτών:

Σχεδιάζοντας αυτή την έκδοση, έχουμε επεκτείνει το κιτ UI για το brand Kin και πήραμε να πειραματιστούμε με νέα στυλ και μοτίβα UI.

Η δεύτερη επανάληψη

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

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

  1. Ισορροπία συγγενών και πληροφορίες χρηστών.
  2. Οι προσφορές δύο όψεων οικονομίας - ευκαιρίες για να κερδίσουν και να περάσουν.

Η χρήση αυτής της δομής μας επέτρεψε να δημιουργήσουμε δύο επίπεδα ιεραρχίας.

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

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

Σχεδιασμός UI

Look & Feel

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

Από τον οδηγό στυλ Kin: Ηρώο & εικονογράφηση spot, χρήση λογότυπων, χρώματα και τυπογραφίαΠορτοφόλι UI

Κινούμενες εικόνες και μεταβάσεις οθόνης

Χρησιμοποιήσαμε δύο είδη κινούμενων σχεδίων

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

Μεταβάσεις

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

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

Μικρές αλληλεπιδράσεις

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

Περίπτωση άκρων

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

Τι έπεται

Λήψη σχολίων χρήστη!

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