Ακούστε την ηχητική έκδοση αυτού του άρθρου
Ως τυπικό μέρος της διαδικασίας UX, οι σχεδιαστές δημιουργούν αρχιτεκτονική πληροφοριών κατά την κατασκευή προϊόντων. Καθορισμός κάθε λεωφόρου και διαδρομής που μπορούν να ακολουθήσουν οι χρήστες μέσω μιας εφαρμογής ή ιστότοπου, η αρχιτεκτονική πληροφοριών είναι κάτι περισσότερο από έναν χάρτη ιστότοπου για να δείξει ποια σελίδα οδηγεί πού.
Παρόμοια με την κατασκευή αρχιτεκτόνων που χρησιμοποιούν ένα σχεδιάγραμμα για την κατασκευή κάθε τμήματος ενός σπιτιού, από φυσικές δομές έως πιο περίπλοκες εσωτερικές λειτουργίες όπως ηλεκτρικά και υδραυλικά, η αρχιτεκτονική πληροφοριών περιγράφει την ιεραρχία, την πλοήγηση, τα χαρακτηριστικά και τις αλληλεπιδράσεις ενός ιστότοπου ή μιας εφαρμογής. Και όπως τα σχεδιαγράμματα είναι το πιο πολύτιμο έγγραφο που μπορεί να χρησιμοποιήσει ένας αρχιτέκτονας στην κατασκευή ενός κτιρίου, η αρχιτεκτονική πληροφοριών μπορεί να είναι το πιο ισχυρό εργαλείο στο οπλοστάσιο ενός σχεδιαστή.
Ωστόσο, η ανάπτυξη ενός δεν είναι τόσο απλή όσο η δημιουργία μιας λίστας χαρακτηριστικών και η χαρτογράφηση του τρόπου λειτουργίας τους - ας διερευνήσουμε τη διαδικασία.
Τι είναι η αρχιτεκτονική πληροφοριών και γιατί είναι σημαντική;
Η αρχιτεκτονική πληροφοριών (IA) είναι, σαν ένα σχεδιάγραμμα , μια οπτική αναπαράσταση της υποδομής, των χαρακτηριστικών και της ιεραρχίας του προϊόντος. Το επίπεδο λεπτομέρειας είναι μέχρι το σχεδιαστής , οπότε η IA μπορεί επίσης να περιλαμβάνει πλοήγηση, λειτουργίες και συμπεριφορές εφαρμογών, περιεχόμενο και ροές. Δεν υπάρχει καθορισμένο όριο στο μέγεθος ή το σχήμα του IA. Ωστόσο, θα πρέπει να περιλαμβάνει τη γενικευμένη δομή του προϊόντος, ώστε ο καθένας (θεωρητικά) να μπορεί να το διαβάσει και να κατανοήσει πώς λειτουργεί το προϊόν.
Θα χρησιμοποιούμε την αναφορά προσχεδίου συχνά επειδή ο σκοπός και των δύο εγγράφων είναι σχεδόν πανομοιότυπος. Ακριβώς όπως ένα σχέδιο, το IA παρέχει σχεδιαστές (καθώς και ομάδες ανάπτυξης προϊόντων και μηχανικής) μια πανοραμική θέα ολόκληρου του προϊόντος. Η ύπαρξη ενός ενιαίου εγγράφου που παρέχει μια απλή και κατανοητή αναπαράσταση του τρόπου λειτουργίας της εφαρμογής ή του ιστότοπου είναι ζωτικής σημασίας για την ανάπτυξη νέων λειτουργιών, την ενημέρωση των υπαρχόντων και για να δούμε τι είναι δυνατόν λαμβάνοντας υπόψη το υπάρχον προϊόν.
Με το IA διαθέσιμο, καθίσταται πολύ πιο εύκολο να λάβετε βασικές αποφάσεις για νέες δυνατότητες και υλοποιήσεις, να κατανοήσετε τα χρονοδιαγράμματα για αλλαγές προϊόντων και να ακολουθήσετε τη συμπεριφορά των χρηστών μέσω πολλαπλών διαδικασιών.
Ας δούμε ένα βασικό βίντεο για να δούμε πώς δημιουργείται ένα IA.
Πώς να σχεδιάσετε την αρχιτεκτονική πληροφοριών
Ως μέρος της διαδικασίας UX, ο σχεδιασμός IA ακολουθεί πολύ παρόμοια μοτίβα με το διάγραμμα ροής: Προσθέστε σχήματα και συνδέστε τα με γραμμές με οργανωμένο τρόπο σε ένα μόνο έγγραφο. Η πρόκληση κατά την οικοδόμηση IA είναι στην κατανόηση πως η εφαρμογή ή ο ιστότοπός σας λειτουργεί πραγματικά από την πλευρά του χρήστη και πώς να οργανώσετε αυτές τις πληροφορίες σε μια ευανάγνωστη και ευανάγνωστη μορφή.
Υπάρχουν δύο βασικές προϋποθέσεις για την κατασκευή του IA: την οργάνωση μέσω μιας οπτικής ιεραρχίας (δηλαδή, μιας ιεραρχίας χαρακτηριστικών, λειτουργιών και συμπεριφοράς) και τη δημιουργία ενός θρύλου για την εμφάνιση διαφορετικών τύπων χαρακτηριστικών, αλληλεπιδράσεων και ροών. Με ένα τυπικό διάγραμμα ροής, τα σχήματα ακολουθούν συγκεκριμένες απαιτήσεις (τα ορθογώνια είναι διαδικασίες, τα διαμάντια είναι σημεία απόφασης κ.λπ.). Ωστόσο, μετά από αυτήν την ονοματολογία δεν απαιτείται.
διαφορά μεταξύ των εταιρειών c και s
Με άλλα λόγια, οι πιο σημαντικοί παράγοντες για την οικοδόμηση της IA σας είναι όπου τοποθετούνται μεμονωμένα στοιχεία της αρχιτεκτονικής (ιεραρχικά) και πώς επισημαίνονται και εμφανίζονται.
τι είναι η ανάπτυξη που καθοδηγείται από τη συμπεριφορά
Κατανόηση και εμφάνιση οπτικής ιεραρχίας
Η πιο δύσκολη πτυχή της δημιουργίας μιας νέας αρχιτεκτονικής πληροφοριών είναι σχεδόν πάντα στην κατασκευή της ιεραρχικά. Είναι μια κοινή παρανόηση ότι το IA πρέπει να χτιστεί «από πάνω προς τα κάτω». Αυτό είναι σχεδόν πάντα πιο δύσκολο να γίνει, εκτός εάν πρόκειται για υπάρχον προϊόν, όπως στο παραπάνω βίντεο.
Κατά την κατασκευή IA από το μηδέν, εκτός εάν ο ιστότοπος ή η εφαρμογή σας ακολουθεί μια τυπική μορφή, είναι πολύ δύσκολο να σχεδιάσετε οτιδήποτε μετά το ανώτερο επίπεδο. Είναι σαν να ζητάς από έναν μηχανικό να χτίσει ένα αυτοκίνητο από πάνω προς τα κάτω αντί για μέρη. Κάθε κομμάτι πρέπει να κατασκευαστεί εκ των προτέρων με τη δική του έρευνα, χρόνο για σχεδιασμό και ανάπτυξη. Το ίδιο ισχύει και για την IA.
Η εμφάνιση της οπτικής ιεραρχίας αποτελεί πολύτιμο πλεονέκτημα για την IA, όχι μόνο επειδή παρέχει καλύτερο περιβάλλον για τον αναγνώστη, αλλά επίσης γενικεύει τις βασικές περιοχές του προϊόντος. Εάν η πιο σημαντική λειτουργία της εφαρμογής σας είναι η παραγγελία μιας διαδρομής (a la Uber ή Lyft) που μπορεί να γίνει από την αρχική σελίδα, τότε αυτή η σελίδα θα έχει τα περισσότερα σημεία επαφής και την μεγαλύτερη αξία για το προϊόν. Το ίδιο θα ισχύει και για την οπτική ιεραρχία.
Οι χάρτες ιστότοπων είναι χρήσιμοι για την κατανόηση της ιεραρχίας, καθώς οργανώνουν σελίδες αριθμητικά (όπως 1.0 Home, 2.0 Payment, 2.1 Add Pay Method, κ.λπ.). Εναλλακτικά, σκεφτείτε το παράδειγμα στην παρακάτω εικόνα για τον ιστότοπο της βιβλιοθήκης του Πανεπιστημίου Duke, όπου η κορυφαία πλοήγηση δεν είναι μόνο στην κορυφή, αλλά και επισημαίνεται ότι είναι ορατή σε ολόκληρη την εφαρμογή.
Ιεραρχία σχημάτων, χρωμάτων και άλλων οπτικών στοιχείων
Εκτός από την ιεραρχία, η παραπάνω αρχιτεκτονική κάνει κάτι άλλο καλά: Εμφανίζει κάθε σημείο εμπλοκής μοναδικά όπως απαιτείται μέσω ενός απλού θρύλου και μερικών βασικών φράσεων. Ο θρύλος υποδηλώνει σελίδα και τύπο περιεχομένου και υποδηλώνει παραλλαγές μεταξύ χρωμάτων σχημάτων. Αυτό είναι σημαντικό γιατί, παρόλο που ο ιστότοπος του Duke φαίνεται αρκετά απλός, το IA έχει βάθος μόνο σε τρία επίπεδα. Κάθε κίτρινο ορθογώνιο υποδηλώνει μια εφαρμογή, οπότε οι διαδικασίες σε κάθε ένα από αυτά τα πλαίσια δεν περιλαμβάνονται σε αυτό το έγγραφο!
Ακόμη και χωρίς αυτά τα μέρη διαθέσιμα, η δομή είναι τέτοια που μπορούμε να καταλάβουμε πώς να περιηγηθούμε στον ιστότοπο μόνο μέσω του IA. Αυτό σταματά όταν φτάνουμε σε μια εφαρμογή στον ιστότοπο - δεν χρειάζεται.
Το IA παρακάτω είναι για ένα παιχνίδι. Χρησιμοποιώντας τέσσερα σχήματα, χωρίς χρώμα και έξυπνα τοποθετημένα αποσπάσματα κειμένου, κάθε σημαντική αλληλεπίδραση είναι κατανοητή χωρίς πρωτότυπα και το πιο σημαντικό, μπορεί να γίνει κατανοητή από οποιονδήποτε εργάζεται σε αυτό.
Αυτό το μοντέλο δεν είναι τέλειο, αλλά οργανώνει την ιεραρχία εφαρμογών με σαφήνεια και οριοθετεί τι βλέπει ή κάνει ο χρήστης σε οποιοδήποτε δεδομένο σημείο.
Τα καλύτερα εργαλεία αρχιτεκτονικής πληροφοριών
Υπάρχουν πολλές εφαρμογές λογισμικού που επιτρέπουν την κατασκευή ενός IA, αλλά λίγες είναι απλές και αρκετά γρήγορες για να κάνουν την εμπειρία ευχάριστη. Ή τουλάχιστον, εύκολο στη διαχείριση.
Το Draw.io, που χρησιμοποιείται στο παραπάνω βίντεο, είναι εντελώς δωρεάν για προσωπική και επαγγελματική χρήση και συνδέεται αυτόματα στο Google Drive. Έχει επίσης ενσωματώσεις με Confluence και JIRA, οι οποίες πληρώνονται. Draw.io είναι εξαιρετικό για το διάγραμμα ροής, τη δημιουργία ροών χρηστών και αρχιτεκτονικής πληροφοριών και με τη λειτουργικότητα του Drive, πολλά άτομα μπορούν να εργαστούν στο ίδιο έγγραφο και να δουν τις αλλαγές ζωντανά. Υπάρχει επίσης μια δωρεάν έκδοση εκτός σύνδεσης.
Lucidchart είναι ένα άλλο εξαιρετικό εργαλείο που παρέχει μια ελαφρώς καλύτερη εμπειρία από το Draw.io και έχει πρόσθετα πλεονεκτήματα όπως προ-ενσωματωμένα πρότυπα, πολλές ακόμη ενσωματώσεις, μια εφαρμογή για κινητά (με βαθμολογία 2,5 αστέρια στο App Store) και υποστήριξη για επιχειρήσεις.
Omnigraffle και Βίσιο είναι μακροχρόνιοι βασικοί υπολογιστές και λειτουργούν άριστα για την κατασκευή και τη συντήρηση ενός σχεδιασμού IA, αν και το Visio είναι μόνο διαδικτυακό (η παλαιότερη έκδοση εκτός σύνδεσης είναι μόνο για Windows), ενώ το Omnigraffle είναι μόνο για Mac και απαιτεί ξεχωριστές αγορές για τις εκδόσεις MacOS και iOS. Το OmniGraffle έχει ένα πλεονέκτημα έναντι των σημαντικότερων ανταγωνιστών στο ότι παρέχει αυτοματισμό JavaScript και AppleScript, το οποίο για τους περισσότερους σχεδιαστές μπορεί να είναι περιττή, αλλά συνήθως, οι αρχιτέκτονες πληροφοριών πλήρους απασχόλησης το εκτιμούν.
Όλα τα εργαλεία που αναφέρονται παραπάνω είναι κατασκευασμένα για ταχύτητα και ευκολία στη χρήση, ειδικά γύρω από το διάγραμμα ροής, το οποίο ακολουθεί σχεδόν πανομοιότυπες αρχές με την αρχιτεκτονική της πληροφορίας. Άλλες εφαρμογές όπως Μπαλσάμικ , MindMeister , MindManager , ή XMind Όλα προσφέρουν παρόμοια συμπεριφορά, αλλά είναι χτισμένα για άλλους σημαντικούς σκοπούς, όπως πρωτότυπα ή χαρτογράφηση μυαλού.
Βέλτιστες πρακτικές αρχιτεκτονικής πληροφοριών
Ενώ υπάρχουν λίγοι καθορισμένοι κανόνες για το τι συνιστά αρχιτεκτονική πληροφοριών, κατά τη διάρκεια της διαδικασίας, λάβετε υπόψη τα εξής:
πώς λειτουργεί το responsive web design
Μην εστιάζετε στην ιεραρχία, εστιάστε στη δομή
Η ιεραρχία είναι ρυθμιζόμενη . Η αρχική σελίδα θα είναι πάντα η αρχική σελίδα, αλλά όπου οδηγεί, πώς οι χρήστες φτάνουν σε αυτά τα μέρη και όλα όσα βρίσκονται μεταξύ και πέρα καθορίζονται αργότερα.
Όλες οι διαδικασίες πρέπει να είναι λογικές
Παρόλο που το IA στη διαδικασία UX είναι για αλληλεπιδράσεις χρηστών, κάθε βήμα του τρόπου πρέπει να έχει νόημα. Οι οθόνες εγγραφής δεν πρέπει να οδηγούν σε ρυθμίσεις, μια λειτουργία κάμερας δεν πρέπει να μεταβαίνει σε προβολή χάρτη… η λίστα συνεχίζεται.
Θυμηθείτε τη διαδικασία UX
Ένα κοινό λάθος είναι απλά φτιαχνω, κανω IA, χωρίς πόρους, έρευνα ή άλλα περιουσιακά στοιχεία ή εργασία. Αυτό είναι σαν να πείτε σε έναν συγγραφέα να γράψει ένα βιβλίο χωρίς περίγραμμα ή έναν προγραμματιστή να κωδικοποιήσει μια εφαρμογή χωρίς πρωτότυπα.
Είστε ο Χαρτογράφος
Οι χαρτογράφοι λαμβάνουν υπόψη τα πάντα για έναν χάρτη, από οροσειρές έως κρατικά σύνορα. Ακριβώς όπως οι χάρτες, οι σχεδιαστές καθορίζουν τι εντάσσεται στη σχεδίαση IA. Μεμονωμένες σελίδες, συγκεκριμένες συμπεριφορές χρηστών, πλαίσιο για σημεία απόφασης… και ούτω καθεξής.
Τελικά, ο χαρτογράφος αποφασίζει τι συμβαίνει στον χάρτη με βάση τις ανάγκες των χρηστών. Το ίδιο ισχύει και για τους σχεδιαστές, επομένως κατασκευάστε το IA για τον τελικό χρήστη, δηλαδή τις ομάδες ανάπτυξης προϊόντων και σχεδιασμού.
Η αρχιτεκτονική πληροφοριών αλλάζει και εξελίσσεται συνεχώς
Για να τρυπήσετε το σημείο για άλλη μια φορά, όλες οι IA έχουν κατασκευαστεί για αλλαγή. Τα προϊόντα εξελίσσονται, αλλάζουν τα σχέδια, προσαρμόζονται οι χρήστες και ο κύκλος συνεχίζεται ξανά και ξανά. Μην το πάρετε πολύ σοβαρά και ξέρετε ότι θα υπάρχει πάντα περιθώριο βελτίωσης. Μην στοχεύετε στην τελειότητα. δημιουργήστε ένα απλό, προσαρμόσιμο IA.
έξι νόμοι της αντιληπτικής οργάνωσης
Η Αρχιτεκτονική των Πληροφοριών μου Έγινε… Τώρα τι;
Είναι μια κοινή αντίληψη ότι κάθε σχεδιαστική εργασία δεν είναι ποτέ στα αληθεια ολοκληρώθηκε, και αυτό ισχύει σίγουρα για την αρχιτεκτονική πληροφοριών. Αυξάνονται και συρρικνώνονται και αλλάζουν όπως κάνουν τα προϊόντα μας. Σε αντίθεση με ένα σχέδιο για ένα κτίριο, το IA θα εξελίσσεται πάντα με βάση οτιδήποτε από τις ανάγκες των χρηστών έως τις νέες δυνατότητες ή την αναθεώρηση ενός προϊόντος. Μεγάλο μέρος της δομής μπορεί να παραμείνει το ίδιο και να παρέχει συνέπεια μεταξύ των εκδόσεων, ώστε οι χρήστες να μην μπερδεύονται.
Και αυτό είναι καλό. Το να γνωρίζετε ότι το IA είναι ένα ρευστό έγγραφο —ένα που πιθανότατα αλλάζει εβδομαδιαία, και μερικές φορές ακόμη και καθημερινά— είναι ένας ισχυρός τρόπος για να διατηρήσετε τη συνολική δομή της εφαρμογής ή του ιστότοπού σας χωρίς να αγγίξετε ποτέ τον κώδικα ή δημιουργία νέων πρωτοτύπων . Όσο καλύτερη είναι ολόκληρη η ομάδα ανάπτυξης προϊόντων ξέρει το IA, όσο πιο γρήγορα όλοι θα γνωρίζουν τι είναι και δεν είναι δυνατό και πόσο σοβαρή είναι η υποτιθέμενη «εύκολη δουλειά».
Αυτό μας φέρνει στην πραγματική ομορφιά της αρχιτεκτονικής πληροφοριών: Δεν υπάρχει προκαθορισμένο σημείο εκκίνησης. Ενώ η παραδοσιακή διαδικασία σχεδίασης UX υπαγορεύει ότι η IA κατασκευάζεται αφού ολοκληρώσει αρκετές ροές χρηστών. οπλισμένοι με πολλούς χρήστες και ανταγωνιστική έρευνα , μπορεί επίσης να είναι το πρώτο πράγμα που έγινε ... ή το τελευταίο. Η διαδικασία πρωτοτυπίας φέρνει συχνά πληροφορίες σχετικά με το πώς πρέπει να συμβούν συγκεκριμένες συμπεριφορές ή ενέργειες που θα ήταν δύσκολο να φανταστούν από μια λογική ή μη φανταστική IA.
Ως μια διαρκώς εξελισσόμενη πρακτική, ο σχεδιασμός IA είναι μια τέχνη όσο και μια δεξιότητα, και γι 'αυτό εν μέρει οι μεγάλες εταιρείες έχουν θέσεις αρχιτέκτονα πληροφοριών. Αυτοί οι σχεδιαστές είναι οι πύλες των τεράστιων συστημάτων, και με την κατανόησή τους για την ανάπτυξη των προϊόντων με την πάροδο του χρόνου, βοηθούν στην οδήγηση ομάδων προϊόντων, σχεδιασμού και μηχανικής για να λάβουν τις σωστές αποφάσεις για το διάστημα χρόνια . Αυτή η κλίμακα οργάνωσης δεν είναι για όλους τους σχεδιαστές, αλλά κάθε σχεδιαστής μπορεί να δημιουργήσει μια απλή, κατανοητή αρχιτεκτονική πληροφοριών.
• • •
Συνιστώμενη ανάγνωση σχετικά με την αρχιτεκτονική πληροφοριών
Πώς να αισθανθείτε οποιοδήποτε χάος: Αρχιτεκτονική πληροφοριών για όλους
Βασικά στοιχεία αρχιτεκτονικής πληροφοριών
Η διαφορά μεταξύ της αρχιτεκτονικής πληροφοριών και του σχεδιασμού UX
• • •
Περαιτέρω ανάγνωση στο ApeeScape Design Blog:
- eCommerce UX - Μια επισκόπηση των βέλτιστων πρακτικών (με το Infographic)
- Η σημασία του ανθρωποκεντρικού σχεδιασμού στο σχεδιασμό προϊόντων
- Τα καλύτερα χαρτοφυλάκια σχεδιαστών UX - Εμπνευσμένες μελέτες περιπτώσεων και παραδείγματα
- Ευρετικές αρχές για φορητές διεπαφές
- Προγνωστικός σχεδιασμός: Πώς να δημιουργήσετε μαγικές εμπειρίες χρηστών
Κατανόηση των βασικών
Τι είναι η αρχιτεκτονική πληροφοριών;
Η αρχιτεκτονική πληροφοριών είναι ένα έγγραφο που παρέχει έναν λειτουργικό χάρτη για το πώς λειτουργεί και λειτουργεί ένα προϊόν για τους χρήστες. Είναι παρόμοιο με ένα σχεδιάγραμμα για ψηφιακά προϊόντα και εμφανίζει σελίδες, περιεχόμενο, αλληλεπιδράσεις και συμπεριφορές για ολόκληρο το προϊόν.
Σε τι αφορά η αρχιτεκτονική
Ο σκοπός της αρχιτεκτονικής για τους ψηφιακούς σχεδιαστές είναι να κατανοήσει και να εκτιμήσει το πλαίσιο ενός προϊόντος, τόσο από την πλευρά του χρήστη όσο και από την επιχείρηση.
Τι είναι ο ιεραρχικός σχεδιασμός;
Ο ιεραρχικός σχεδιασμός είναι η δομή περιεχομένου, δεδομένων και αλληλεπιδράσεων με φυσικό τρόπο, συνήθως εστιάζοντας την προτεραιότητα στην κορυφή. Τα τμήματα χαμηλότερης τιμής πέφτουν χαμηλότερα στην ιεραρχία και μπορούν να βρεθούν είτε πιο κάτω σε μια σελίδα είτε σε μια εντελώς διαφορετική σελίδα.
Τι σημαίνει ο σχεδιασμός με επίκεντρο τον χρήστη;
Ο σχεδιασμός με επίκεντρο τον χρήστη είναι μια φιλοσοφία σχεδιασμού που δίνει προτεραιότητα στον χρήστη. Όλες οι αποφάσεις σχεδιασμού και ανάπτυξης προϊόντων καθορίζονται με δοκιμές έναντι του UX που προσφέρεται για να διασφαλιστεί ότι οι ανάγκες των χρηστών ικανοποιούνται πάντα χωρίς να θυσιάζονται οι υπάρχουσες προσδοκίες των χρηστών.
βέλτιστες πρακτικές σχεδιασμού πινάκων βάσης δεδομένων
Τι είναι η οπτική ιεραρχία στο σχεδιασμό ιστοσελίδων;
Η οπτική ιεραρχία στο σχεδιασμό ιστοσελίδων είναι η σκόπιμη δομή περιεχομένου και δεδομένων σε μια σελίδα για να παρέχει στους χρήστες σαφή κατανόηση του πού υπάρχει περιεχόμενο και πώς να το χρησιμοποιούν από πού τοποθετείται όλο το περιεχόμενο και τα δεδομένα και σε ποια μορφή.
Πόσα χρήματα βγάζει ένας αρχιτέκτονας πληροφοριών;
Σύμφωνα με την Glassdoor, ο μέσος εθνικός μισθός των ΗΠΑ για τους αρχιτέκτονες πληροφοριών είναι περίπου 95.000 $ ετησίως.
