26 βήματα σχεδιασμού προϊόντων & ταμπλό

Τι έμαθα κατά τη διάρκεια του τετραετού ταξιδιού μου για σχεδιαστή προϊόντων και σχεδιαστή ταμπλό

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

1. Προ-επεξεργασία

Λάβετε όσο το δυνατόν περισσότερες πληροφορίες (Ζητήστε τρία παραδείγματα)

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

Μάθετε για Personas

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

Πρότυπο Persona - Κατεβάστε το εδώ: http://janlosert.com/assets/persona-template.zip

Ρύθμιση ακριβών στόχων - Τι ακριβώς πρέπει να ακολουθήσουμε;

Πιστεύω ότι οι περισσότεροι σχεδιαστές / πελάτες αγνοούν αυτό το βήμα, αλλά μία από τις πιο σημαντικές πτυχές του σχεδιασμού και για τα δύο μέρη είναι να κατανοήσουν τους στόχους του προϊόντος που σχεδιάζετε. Έχουμε την τάση να πηδούμε ευθεία σε εικονοστοιχεία και γρήγορα να σαρώνουμε το UI του έργου. Εάν πρόκειται για έναν ολοκαίνουργιο ιστότοπο ή για ένα νέο χαρακτηριστικό, φροντίστε να ορίσετε σαφείς στόχους για το τι θέλετε να επιτύχετε.
 
Δεδομένου ότι όλα είναι trackable, μιλήστε για τα ακριβή σημεία που πρόκειται να παρακολουθείτε. Για παράδειγμα, αυτά θα μπορούσαν να κυμανθούν από νέες εγγραφές, σε πολλούς πελάτες που χρησιμοποιούν Paypal έναντι αγορών με πιστωτικές κάρτες. Πάντα σιγουρευτείτε ότι γνωρίζετε πόσο υψηλός στόχος είστε στην αρχή!
 
P.S. - Θα χρειαστείτε έτσι ούτως ή άλλως για τη δημιουργία διοχετεύσεων στο Mixpanel αργότερα σε αυτή τη διαδικασία.

Δομή έργου

Ρυθμίστε το φάκελο Έργου και ξεκινήστε τη συλλογή του Moodboard

Υπάρχουν πολλές τοποθεσίες για έμπνευση - Dribbble, Behance, Pttrns, Pinterest κλπ. Είναι πολύ εύκολο να βρείτε παρόμοια έργα με εκείνα στα οποία θα εργαστείτε. Επιπλέον, μπορεί να υπάρχει ήδη μια λύση σε ένα πρόβλημα που αντιμετωπίζετε και προσπαθείτε να λύσετε.
 
Όταν αρχίζω να εργάζομαι σε ένα νέο έργο, πάντα ρυθμίζω ένα φάκελο με φακέλους που ονομάζονται - Αρχεία προέλευσης, Οθόνες & Εξαγωγή, Έμπνευση & Πόροι. Εξοικονομήστε ό, τι βρίσκω στο διαδίκτυο στο φάκελο Inspiration για να μπορέσετε να το χρησιμοποιήσετε αργότερα για να δημιουργήσετε βασικές κάρτες moodboards. Αυτός ο φάκελος θα μπορούσε να γεμίσει με οτιδήποτε από plugins, swatches ή ακόμα και από περιπτωσιολογικές μελέτες από την Behance.

2. Πηγαίνοντας χαμηλή πιστότητα

Λευκόπλακα

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

Χαρτογραφήστε όλες τις πληροφορίες των οθονών σας (Τι δεδομένα χρειάζεται να εισάγει ο χρήστης)

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

Καταγράψτε όλες τις πιθανές καταστάσεις

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

Tapdaq - Διασυνδεδεμένα κράτη μέλη Widget

Προετοιμάστε το πρώτο διάγραμμα

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

Μετά από όλα καταλήξαμε με τη χρήση Camunda Modeler, το οποίο δεν είναι ακριβώς ένα εργαλείο σχεδιασμού. Είναι μια απλή εφαρμογή για τη δημιουργία τεχνικών διαγραμμάτων. Αυτό που ακούγεται περίεργο, αλλά αυτή η εφαρμογή αναπτύσσεται για να σας βοηθήσει να χτίσετε βασικά διαγράμματα. Το πιο σημαντικό είναι ότι όλα όσα δημιουργούνται είναι πλήρως κλιμακούμενα. Μπορείτε εύκολα να σύρετε και να αποθέσετε οποιοδήποτε σημείο και θα δημιουργήσει αυτόματα γραμμές και βέλη για εσάς. Μπορείτε επίσης να επιλέξετε από διαφορετικούς τύπους σημείων που μπορούν να σας βοηθήσουν, για παράδειγμα, για να επισημάνετε πότε ένας χρήστης λαμβάνει ένα μήνυμα ηλεκτρονικού ταχυδρομείου από την Intercom. Το Camunda επιτρέπει την εξαγωγή σε SVG που διευκολύνει το χρωματισμό των trackable σημείων στο Sketch.

Το μενού Tapdaq + Δομές οθονών (Εξαγωγή από το Camunda Modeler)

3. Εργασία / Σχεδιασμός

Πίνακας διάθεσης

Είμαι σε θέση να ξεκινήσω με τη δημιουργία του moodboard, καθώς συλλέγω όλες τις εικόνες στο φάκελο Inspiration μου. Χρησιμοποιώ κυρίως moodboards για να συζητήσω τις σκέψεις μου με τους συναδέλφους μου και να περιγράψω κάποιες από τις οπτικές ιδέες πριν ξεκινήσω με τη διαδικασία pixel.

Moodboard με Χρονική οθόνη και φωτεινά μπλε χρώματα

Πρώτο σχέδιο

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

Γράψτε το αντίγραφό σας (Τόνος)

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

Πρώτη εσωτερική δοκιμή

Με το πρώτο σας σχέδιο μπορείτε γρήγορα να δημιουργήσετε ένα πρωτότυπο στο Marvelapp ή Invision. Αυτό είναι κάτι που άρχισα να κάνω πρόσφατα και αποδεικνύεται ότι είναι μια άλλη εκπληκτική πτυχή επικύρωσης. Με ένα πρωτότυπο μπορείτε τώρα να δημιουργήσετε μια κλήση με 3 ή 4 άτομα από την ομάδα σας και να μοιραστείτε τον πρωτότυπο σύνδεσμο μαζί τους και να προσπαθήσετε να ρωτήσετε μερικές ερωτήσεις ενώ δοκιμάζετε πάνω τους συγκεκριμένες ροές / σενάρια. Με αυτό τον τρόπο μπορείτε να δοκιμάσετε εύκολα τις δεξιότητές σας και προφανώς να δοκιμάσετε τις αποφάσεις σχεδιασμού σας σε πραγματικούς χρήστες χωρίς να ανησυχείτε για τους σπατάλη πόρων και χρόνου. Συνήθως τείνουν να επιλέγουν ανθρώπους που δεν εμπλέκονται πολύ στην ανάπτυξη ταμπλό. Προσπαθήστε επίσης να αποφύγετε να παρακολουθείτε κάποιον που έχει ήδη την ευκαιρία να παίξει με το πρωτότυπο πριν.

Εθιμοτυπία

Όλοι γνωρίζουμε πόσο δύσκολο είναι να παραμείνουμε τακτοποιημένοι. Πώς να παραδώσετε ένα άλλο χαρακτηριστικό. Αυτό συνήθως οδηγεί σε ένα ακατάστατο αρχείο Sketch ή PSD. Έχω μάθει πολλά κατά το σχεδιασμό του Dashboard UI Kit, ειδικά για τις διαφορές μεταξύ της δουλειάς ως ένας μοναδικός σχεδιαστής σε μια εκκίνηση, που εργάζονται σε ομάδες ή εργάζονται για τα ψηφιακά προϊόντα μου. Ενώ εργάζομαι στο Tapdaq, είμαι σίγουρος για τις δεξιότητες των συναδέλφων μου και ακόμη και όταν ξέρω ότι προσπαθώ σκληρά να κρατήσω τα αρχεία καθαρά, μερικές φορές είναι αδύνατο! Ωστόσο, όταν εργάζεστε σε μια ομάδα, σκέφτομαι τα PSD μου, όπως τα δημιουργώ για κάποιον άλλο. Χρησιμοποιώ τον κανόνα ότι εάν έχετε περισσότερα από 8 επίπεδα σε ένα φάκελο, τότε θα πρέπει να δημιουργήσετε ένα νέο.

Πλαίσιο UI του πίνακα οργάνων - Δομή φακέλων

Βρήκα ένα μεγάλο plugin για το Sketch, το οποίο μου έσωσε ώρες ενώ δούλευα στα UI Kits μου. Μετονομασία - https://github.com/rodi01/RenameIt
 
Μπορείτε ακόμα να ρίξετε μια ματιά σε αυτές τις παλιές οδηγίες εθιμοτυπίας (Τέλος πάντων, τα περισσότερα σημεία λειτουργούν για οποιοδήποτε πρόγραμμα επεξεργασίας θα χρησιμοποιήσετε.) - http://photoshopetiquette.com/

Συμβουλή - Βάλτε τα πάντα στον καμβά

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

Δημιουργήστε στοιχεία UI και αρχίστε να παίζετε με το Lego

Είμαι μάλλον αργά στο πάρτι και αυτό θα είναι ήδη ξεπερασμένο ενώ το γράφω. Ο λόγος για τον οποίο δεν έχουμε πραγματοποιήσει κανένα φωτοπλαίσιο στο ταξίδι εδώ είναι απλό. Το Sketch 39 έρχεται με κάτι που έχω βρει απίστευτο και αυτό είναι "σχήματα με ιδιότητες αλλαγής μεγέθους". Με ανάγκασε να αναδημιουργήσω τελικά όλες τις οθόνες Tap + + 50+. Αυτό είναι κάτι που κάνει το σχεδιασμό εύκολο για όλους στην ομάδα. Το αρχείο σκίτσων μας είναι καθαρό drag-and-drop τώρα. Μπορείτε εύκολα να δώσετε σε οποιονδήποτε από τους συμπαίκτες σας έναν κενό καμβά και μπορούν να δημιουργήσουν σχέδια σχεδόν υψηλής πιστότητας. Χάρη σε αυτό είμαστε σε θέση να παραλείψουμε όλα τα εργαλεία wireframing και να ξεκινήσουμε με pixels σχεδόν αληθινά αναζητούν.

Αυτό συμβαδίζει επίσης με το γεγονός ότι είμαστε σε θέση να μετατρέψουμε τα wireframes σε πραγματικά σχέδια. Οποιοσδήποτε PM μπορεί να δημιουργήσει wireframe και στη συνέχεια μπορώ εύκολα να το αναλάβει και να μετατραπεί σε hi-πιστότητα.

Στοιχεία Drag & Drop στο αρχείο σκίτσων Tapdaq

4. Περιουσιακά στοιχεία και παράδοση

Όταν τελειώσετε με το σχεδιασμό και το iterating με βάση τα πρώτα σχόλια, δεν έχετε κάνει ακόμη. Τώρα έρχεται η ώρα να παραδώσετε τα σχέδιά σας στους μηχανικούς / devs σας.

ΠΡΟΔΙΑΓΡΑΦΕΣ

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

Διάγραμμα

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

Πλήρες διάγραμμα της εφαρμογής Sagram Analytics

Τελικό πρωτότυπο

Ένα από τα βασικά πράγματα για μένα είναι να είμαι πάντα έτοιμος για κάθε αλληλεπίδραση στο πρωτότυπο. Συνήθως τελειώνω έχοντας 3-5 πρωτότυπα στο δρόμο για τον τελικό για εκείνη την μικρή συνάντηση με τους συμπαίκτες ή για να δείξω κάποιες ιδιαίτερες ροές. Έχω την τάση να προετοιμάζω όλα τα κράτη στο Sketch σε ένα artboard και στη συνέχεια να αντιγράψω τους πίνακες τέχνης ώστε να έχει κάθε κράτος έτοιμο όταν εξάγει.
Όπως είπατε πριν, μπορείτε να χρησιμοποιήσετε είτε Marvelapp είτε Invision. Είναι υπέροχο να προσθέσετε σχόλια σε τμήματα των σχεδίων σας για να επεκτείνετε τις προδιαγραφές σας πολύ περισσότερο ώστε ακόμη και ο copywriter να μπορεί εύκολα να μεταβεί και να ελέγχει σε πραγματικά pixels και ροές αν κάθε αντίγραφο και διάλογος λειτουργεί όπως απαιτείται.

Quicktime Video> Σημειώσεις

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

Εμψυχος

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

Οδηγός στυλ

Ένα άλλο κρίσιμο σημείο για τους μηχανικούς είναι να μάθουν πώς θα αντιδράσουν τα πράγματα σε διάφορα σενάρια. Σκεφτείτε την κατάσταση σφάλματος της εισόδου ή πού να εμφανιστεί το μήνυμα σφάλματος. Όπως θα φανεί το πώς θα έμοιαζε η κατάσταση απενεργοποίησης της κατάστασης υποβολής, πού να βάλει τον περιστρεφόμενο κώνο κλπ. Είναι πολύ εύκολο για τους μηχανικούς να πάνε απλά μέσα από το συμβολικό συμβούλιο και το ύφος ένα προς ένα πριν ξεκινήσουν να κωδικοποιούν όλες τις οθόνες χάρη στο να έχουν ένα αρχείο σκίτσου όπως το Lego μπλοκάρει. Το styleguide και η οπτική επισκόπηση όλων των στοιχείων είναι στην πραγματικότητα ένα από τα πιο απαιτούμενα χαρακτηριστικά / σχέδια για την επόμενη ενημέρωση του κιτ εργαλείων μου του Dashboard UI.

Επισκόπηση UI του Tapdaq - Οδηγός στυλ

5. Τελικό & Δοκιμή

Εφόσον τελειώσουμε με την παράδοση των σχεδίων μας σε μηχανικούς, είμαστε σε θέση να επικεντρωθούμε στο τελευταίο μέρος της διαδικασίας - Δοκιμές των αποφάσεών μας!

Inspectlet / HotJar

Αφού τα σχέδια μετατραπούν σε κώδικα εργασίας, μην ξεχάσετε να συμπεριλάβετε τα αποσπάσματα Inspectlet ή HotJar JS. Είμαι πάντα ενθουσιασμένος (ή απογοητευμένος) για να δω πώς οι χρήστες περιηγούνται στον πίνακα ελέγχου μας ή τι κάνουν στη σελίδα του χαρτοφυλακίου μου. Το Inspectlet είναι καταπληκτικό για τη λήψη της συνόδου των χρηστών σας. Λειτουργεί επίσης για μεγάλα έργα. Έρχεται με εύκολο φιλτράρισμα "/ σελίδας" το οποίο σας βοηθά να παρακολουθήσετε τη συνεδρία ενός συγκεκριμένου χαρακτηριστικού ή ροής. Χρησιμοποιούμε το Inspectlet στο Tapdaq. Για το προσωπικό μου χαρτοφυλάκιο χρησιμοποιώ τα δωρεάν χαρακτηριστικά του HotJar για τη δημιουργία heatmaps και την καταγραφή τουλάχιστον μερικών χρηστών που περιηγούνται στο χαρτοφυλάκιό μου.

Mixpanel

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

Google Analytics

Δεν είμαι σε θέση να κωδικοποιήσω τα μεγάλα πράγματα, αλλά τουλάχιστον μπορώ να δουλέψω με αρχεία CSS και με απλό κώδικα. Τον τελευταίο καιρό με ενδιέφερε να δω πού οι χρήστες κάνουν κλικ και ενώ κοιτάζω τους χάρτες θερμότητας Hotjar, αποφάσισα να ορίσω τον βασικό tracker κλικ στο Google Analytics. Μπορείτε εύκολα να παρακολουθείτε όλα τα κλικ του χρήστη στον ιστότοπό σας. Ακολουθεί δείγμα κώδικα για κλικ παρακολούθησης - http://pastebin.com/tdmFZN2k

`` `

** 1. Επικόλληση δέσμης ενεργειών στον κωδικό σας **