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

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

Θα ξεκινήσω με μια ιστορία

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

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

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

Το γιατί και πώς

Ίσως να λέτε στον εαυτό σας: "μην μου πείτε γιατί και πώς! Είμαι ερευνητής UX, dang nabbit! Τρώω γιατί και πώς για το πρωινό. "Λοιπόν, επιτρέψτε μου να το εξηγήσω.

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

Για να σας δώσω λίγο περισσότερο περιεχόμενο, ας μιλήσουμε μέσω ενός παραδείγματος. Ας υποθέσουμε ότι σχεδιάζουμε μια εφαρμογή που χρονολογείται όπου ένα από τα βασικά κομμάτια του περιεχομένου είναι ένα προφίλ. Με τη δομοστοιχειωτή σχεδίαση, θα ρωτούσαμε: "Πού θα μπορούσε αυτό το περιεχόμενο να εμφανιστεί στο UI;" - και με βάση την απάντησή μας, θα σχεδιάζαμε ενότητες για καθένα από αυτά τα σενάρια. Ίσως θα σχεδιάζαμε ένα προφίλ που να μπορεί να εμφανίζεται σε μια λίστα ή σε ένα προφίλ που καταλαμβάνει ολόκληρη την οθόνη. Αρχιτεκτονική πληροφοριών. Μοτίβα. Ελέγξτε, ελέγξτε.

Ένα

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

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

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

Εισάγετε τον σχεδιασμό δομικών στοιχείων

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

Στον σχεδιασμό δομικών στοιχείων, αφήστε τη στρατηγική να παρέχει το πλαίσιο για το σχεδιασμό. όχι αντίστροφα.

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

Ο σχεδιασμός δομικών στοιχείων είναι δομοστοιχειωτός σχεδιασμός για UXers.

Ανατομία δομικής δομής

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

Η ανατομία του μπλοκ προφίλ αρχίζει να διαμορφώνεται.

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

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

Μπορεί να μοιάζει με αυτό:

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

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

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

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

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

Οδηγός γρήγορης εκκίνησης

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

Βήμα # 1: Απογραφή στρατηγικής.

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

Για να κάνετε: Τα μέλη της ομάδας Rally να δημιουργούν ανεξάρτητα τα δικά τους αποθέματα στρατηγικής.

Βήμα # 2: Καθορίστε το βασικό σας περιεχόμενο.

Αυτά είναι τα πράγματα που λαμβάνουν οι χρήστες σας στην εφαρμογή σας. Για να το καταλάβετε, αποκλείστε λίγο χρόνο για μια συνάντηση προβληματισμού με την ομάδα σας. Ρωτήστε τον εαυτό σας ερωτήσεις όπως: "Τι αναζητούν οι χρήστες μου; Θέα? Λήψη; "Μόλις εντοπίσετε ένα κομμάτι του βασικού περιεχομένου, γράψτε το σε ένα κομμάτι χαρτί και το κρεμάστε σε έναν τοίχο.

Για να κάνετε: Κρατήστε μια αρχική συνεδρίαση με την ομάδα σας.

Βήμα # 3: Καθορίστε τον τρόπο και τον λόγο.

Τώρα που έχετε εντοπίσει τις στρατηγικές σε επίπεδο εφαρμογής και το βασικό περιεχόμενο, ήρθε η ώρα να φέρετε μαζί τα δύο! Επιστρέψτε στην αίθουσα προβληματισμού σας για μια συνέλευση παρακολούθησης και βεβαιωθείτε ότι η ομάδα σας φέρνει τα αποθέματα στρατηγικής τους. Για αυτό το μέρος της διαδικασίας, η ομάδα σας τοποθετεί τη στρατηγική post-it σημειώνει σε οποιοδήποτε βασικό περιεχόμενο όπου η στρατηγική αυτή μπορεί να έχει αντίκτυπο.

Για να το κάνετε: Κρατήστε μια συνάντηση brainstorming με την ομάδα σας.

Βήμα # 4: Η ανατομία ενός δομικού στοιχείου.

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

Για να κάνετε: Αντιστοιχίστε κάθε μέλος της ομάδας με διάφορους τύπους περιεχομένου. Αυτό το μέλος της ομάδας πρέπει να καθορίσει την ανατομία αυτού του περιεχομένου.

Βήμα # 5: Ευθυγράμμιση, ευθυγράμμιση, ευθυγράμμιση

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

Για να κάνετε: Προγραμματίστε μια ώρα για τα μέλη της ομάδας να παρουσιάσουν την ανατομία δομικών στοιχείων.

Αυτό το άρθρο σας παρουσιάζεται από τον RUXERS. Το RUXERS είναι μια κοινότητα ηγέτες πραγματικής εμπειρίας χρηστών που μοιράζονται και συζητούν την τελευταία σχεδίαση, την εμπειρία των χρηστών, τη χρηστικότητα και την έρευνα. Είμαστε στο Twitter - ελάτε μαζί μας!