Πριν ανοίξεις FTP ή Photoshop: Mindmaps, Prototypes και Wireframes
Αλέξανδρος Λίγγρης, στις 23 September 2009 · Εργασία στο IT · Προγραμματισμός · Σχεδιασμός ·
Το πρόγραμμα (όχι η εφαρμογή), ο σχεδιασμός (όχι η σχεδίαση) και ο προγραμματισμός (μην σκεφτείς php ή java) είναι οι σημαντικότεροι παράγοντες, που τελικά θα κρίνουν την επιτυχία υλοποίησης ενός project. Θυμάστε που στο σχολείο, στην έκθεση, σας έλεγαν να κάνετε ένα σχεδιάγραμμα πριν αρχίσετε να γράφετε και αναρωτιόσασταν γιατί σας βασανίζουν; Ε, είχαν απόλυτο δίκιο.
Για να οργανωθούμε και να συντονιστούμε, ως άτομα ή και ως ολόκληρη ομάδα, υπάρχουν κάποια εργαλεία και κάποιες τεχνικές που πέρα από χρήσιμες, είναι και διασκεδαστικές. Μερικά βασικά:
Mindmaps
Σχεδιαγράμματα τα οποία μπορεί να είναι πολύ αυστηρά (IA) ή εντελώς ελεύθερα και αυθόρμητα (Brainstorming) και τα οποία περιέχουν ιδέες, λέξεις, ενέργειες, διαδικασίες, όλα ενωμένα μεταξύ τους.
Τα Mindmaps είναι εξαιρετικά χρήσιμα για την απόδοση της αρχιτεκτονικής της πληροφορίας μιας σελίδας. Μπορεί σε μια στατική σελίδα να είναι απλά ένα reminder αλλά είναι απαραίτητο μέρος της παραγωγής σε μια διαδραστική εφαρμογή με πολλά επίπεδα ρόλων χρηστών.
Όμως πριν οποιαδήποτε οργάνωση της πληροφορίας, τα Mindmaps μπορούν να είναι προσωπικό ή ομαδικό εργαλείο brainstorming. Με πολύ αυθόρμητο τρόπο, ακόμα και ζωγραφική, μπορεί να οδηγηθεί μια ομάδα σε πολύ ωραίες ιδέες.
Στην πραγματικότητα όμως, τα Mindmaps είναι απλά ένα εργαλείο, οι τρόποι με τους οποίους θα το χρησιμοποιήσετε είναι όσοι και όποιοι νιώθετε ότι θα κάνουν την εργασίας σας καλύτερη.
Wireframes and Prototypes
Wireframes είναι τα σκίτσα, ή διαγράμματα, ή απεικονόσεις μέρους μιας εφαρμογής ή ιστοσελίδας. Ασχέτως αν είναι low-fidelity ή high-fidelity, αποτελούν στατικές απεικονίσεις, με σκοπό να οργανώσουν το layout μιας ιστοσελίδας χωροταξικά.
Αυτό που διαχωρίζει την έννοια του Prototype από το Wireframe είναι ότι τα Prototypes απεικονίζουν μια διαδικασία και όχι μια στατική κατάσταση. Πέρα δηλαδή από την χωροταξική οργάνωση της πληροφορίας αναλαμβάνουν να παρουσιάσουν και τη λειτουργία της εφαρμογής. Για παράδειγμα, ότι θα πατήσω το κουμπί και θα βγει μια χοντρή. Το Wireframe δεν θα έδειχνε τη χοντρή.
Τα wireframes μπορούν να είναι πολύ πρόχειρα σχέδια πάνω σε χαρτοπετσέτες, μέχρι και πολύ ποιοτικά σχέδια στο photoshop. Αυτό είναι κάτι που ρυθμίζουν οι ανάγκες του project την κάθε χρονική στιγμή. Δεν υπάρχει ένας κανόνας. Υπάρχουν πολλές μέθοδοι και μοντέλα. Σίγουρα δεν υπάρχει το μοντέλο ας ενώσουμε ένα γραφίστα και ένα προγραμματιστή για να βγει μια ιστοσελίδα ή μια εφαρμογή. Και γιατί αυτό;
Επικοινωνία
Πριν ο προγραμματιστής αγγίξει κώδικα, ή ο γραφίστας ανοίξει το Photoshop, ή ο project manager κάνει καφέ, θα είναι ιδανικό να υπάρχει ένα Prototype της εφαρμογής, ή μέρους της. Στην πραγματικότητα ένα καλοσχεδιασμένο Πρωτότυπο-Πρότυπο είναι το μέσω επικοινωνίας του σχεδιαστή (UX Designer αν μου επιτρέπετε) με τον γραφίστα, τους developers, τον Project Manager και τον πελάτη. Επίσης είναι μια διαδικασία στην οποία όλα τα μέλη της ομάδα μπορούν να συμμετέχουν, προσφέροντας τις ιδέες τους και κερδίζοντας πληρέστερη κατανόηση της εφαρμογής.
Δοκιμές
Μία άλλη εξαιρετική χρήση του Prototype είναι οι δοκιμασίες στις οποίες μπορούμε να το θέσουμε χωρίς να ξοδέψουμε πολλά χρήματα. Δεν χρειάζεται να ολοκληρώσουμε το προϊόν για να γίνουν Usability δοκιμές. Φτιάχνουμε μια λειτουργία “ζωγραφιστά”, την τεστάρουμε και μαζεύουμε feedback και δεδομένα για τον σχεδιασμό της, χωρίς να χρειαστεί ούτε μία γραμμή κώδικα. Αποφεύγονται αμέτρητα πισωγυρίσματα, κακές συνεννοήσεις, χρόνος και χρήμα. Wow, είναι τόσο εύκολο; Όχι και ναι. Είναι σίγουρα ευκολότερο απ’ ότι χωρίς τη χρήση σχεδιαγραμμάτων.
Οι εφαρμογές του διαδικτύου και συνεπώς οι ιστοσελίδες συνεχώς θα γίνονται πιο πολύπλοκες και ενδιαφέρουσες. Αυτό σημαίνει ότι το μοντέλο παραγωγής μιας ιστοσελίδας θα αρχίσει όλο και πιο συχνά να δανείζεται τα μοντέλα παραγωγής των “κανονικών” εφαρμογών. Η οργάνωση και η επικοινωνία μιας ομάδας είναι μια εξαιρετικά πολύπλοκη και συναρπαστική διαδικασία για την οποία υπάρχουν εκατοντάδες τρόποι, μέθοδοι και μοντέλα. Το σίγουρο είναι ότι τα σχεδιαγράμματα θα σας βοηθήσουν να κάνετε αποδοτικότερη και ποιοτικότερη δουλειά, όποιον δρόμο και αν διαλέγετε, ασχέτως του μεγέθους του project. Ακόμα και αυτό το μικρό κείμενο, ξεκίνησε από ένα πρόχειρο σχεδιάγραμμα σε μια χαρτοπετσέτα από σουβλατζίδικο, δίπλα από το πληκτρολόγιο μου...
Αλέξανδρος Λίγγρης
O Αλέξανδρος Λίγγρης, γνωστός και ως Lexx, είναι web developer στην kudos και θα βρείτε περισσότερα για τη δουλειά του στο προσωπικό του site.



{3 σχόλια ως τώρα } + Νέο σχόλιο
klou
lol Highlight:
Οφείλω να το πω, τα wireframes δεν με βόλευαν καθόλου. Τα θεωρούσα χάσιμο χρόνου. Εδώ δεν έχουμε χρόνο για βασικά πράγματα, σε χαρτί θα ζωγραφίζουμε; Αφού τα έχω όλα στο μυαλό μου!
Θυμάμαι επίσης ότι απάντησα σε ένα σχετικό post της Ζαχαρένιας, γράφοντας ότι λόγω του ότι αλλάζω γνώμες συνεχώς, δεν με βολεύουν τα wf.
Τελικά, εκεί που αλλάζω γνώμες είναι ο γραφιστικός σχεδιασμός, κάτι που δεν έχει καμία σχέση με wireframes.
Το σωστό wireframe σε βοηθά να γλυτώσεις χρόνο σε κάθε διαδικασία του design, από το Inspiration spark που ψάχνεις, εώς το τέλος.
Ζαχαρένια Ατζιτζικάκη
Ε αυτό βρε Klou μου δεν θα το καταλάβω ποτέ.
Έχεις καλέ μου να σχεδιάσεις ένα task flow για μια εφαρμογή. Το ‘χεις όλο μέσα στο μυαλό σου και είσαι και σίγουρος πως είναι το πιο σωστό / απλό;
Wow!
Βασίλης Μαστοροστέργιος
“Πριν ο προγραμματιστής αγγίξει κώδικα, ή ο γραφίστας ανοίξει το Photoshop, ή ο project manager κάνει καφέ”
Hahahaha, δεν άντεξα
Great post