Prototyping & wireframes (η σωτηρία του web designer?)

Προδιαγραφές.

Η μαγική λέξη που απουσιάζει σχεδόν ολόκληρη από κάθε έργο που αναλαμβάνει κάποιος web designer, τουλάχιστον στην Ελλάδα (κάτι μου λέει πως αυτό βέβαια είναι γενικό πρόβλημα - στην Ελλάδα πάντα).

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

Ορίζοντας προδιαγραφές γλυτώνει κανείς από τους εξής πονοκεφάλους:

Πονοκέφαλος απλός
(που είχαμε πει να βάλουμε το μενου;)
Πονοκέφαλος που έρχεται μετά από ένα μήνα
(Πελάτης: αααα, ωραία, να πετάξουμε πάνω τώρα και αυτό το forum που λέγαμε; θυμάσαι; ε;)
Πονοκέφαλος που έρχεται μετά από ένα μήνα και ένα forum που δεν θυμάσαι οτι το είχες υποσχεθεί
(ρε να πάρει, λίγα τον χρεώσα)

Πολλοί συνάδελφοι γνωρίζουν τους παραπάνω πονοκεφάλους και παίρνουν τα κατάλληλα χάπια για την καταστολή. Όμως δεν είναι καλύτερη η πρόληψη από την θεραπεία;

Prototyping

Είναι μια έννοια που ορίζει ακριβώς αυτό: ΤΟ πρωτότυπο πάνω στο οποίο μπορεί κανείς να υλοποιήσει ένα έργο έχοντας καταγράψει (όσο το δυνατόν περισσότερες) ανάγκες του πελάτη.

Το prototype πρέπει να αποτελείται από τρία διαφορετικά προϊόντα:

Wireframes (ή αλλιώς “κουτάκια”)

Καθορίζει σαφώς τις επιμέρους οθόνες και τα στοιχεία που απαρτίζουν την κάθε μια καθώς και τα χαρακτηριστικά κάθε στοιχείου. Επίσης, περιέχει και use cases που αποσαφηνίζουν τις διαδικασίες πλοήγησης σε επιλεγμένα (ή όλα) σενάρια χρήσης του website. Οπτικά, αυτό θα μπορούσε να είναι πολλά Α4 με σχεδιασμένα κουτάκια (οθόνες), με άλλα κουτάκια μέσα τους (στοιχεία οθόνης) και πολλές πολλές σημειώσεις πάνω τους και βελάκια ή ακόμη περισσότερες Α4 με περιγραφή όλων των παραπάνω. Το πως μπορεί κανείς να συμμαζέψει αυτό το πάκο χαρτιών σε ένα και μόνο αρχείο, θα το πούμε παρακάτω.

Design Mock ups (η αλλιώς “εικαστικά προσχέδια”)

Στην ουσία μοιάζει με τα κλασικά προσχέδια. Το μυστικό όμως εδώ είναι πως αυτά είναι ανεξάρτητο από τα Wireframes και έχουν δική τους ζωή. Ενώ με τα wireframes καθορίζεις σαφώς τη λειτουργικότητα του website, με τα mock ups καθορίζεις την αισθητική του. ΟΧΙ την τελική μορφή!Αυτή θα προκύψει παντρεύοντας τα wireframes και τα mock ups σε ένα τελικό προσχέδιο πριν ακόμη γραφτεί μια γραμμή CSS, ή HTML.

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

Final Mock up (ή αλλιώς “τελικό προσχέδιο”)

Για το πως θα είναι στην πραγματικότητα, μπορεί να υπογράψει το τελικό προσχέδιο το οποίο ονομάζεται Final Mock up και είναι στην ουσία ο γάμος του wireframe και του design mock up που έχει επιλέξει ο πελάτης.

Καταλαβαίνει κανείς πως με τον παραπάνω διαχωρισμό θα μπορούσε αν είναι ανάγκη (το προϋποθέτει η φύση του project) να δουλέψουν δύο διαφορετικοί εξειδικευμένοι συνεργάτες πάνω σε ένα project. πχ ο Analyst ή GUI specialist να δουλέψει στα wireframes και ο απλός web designer πάνω στο εικαστικό. Έτσι μειώνεται στην ουσία και ο χρόνος που απαιτείται για την υλοποίηση.

Συνοψίζοντας, οι φάσεις του prototyping είναι τρεις:

Wireframe (πως δουλεύει)
Design mock ups (πως θα φαίνεται)
Final mock up (Πως πραγματικά θα είναι)

Πρακτικές συμβουλές

Wireframes μπορεί κανείς να δουλέψει με:

Χαρτί, μολύβι, Post-it και γερή μνήμη
Εξειδικευμένο software
Δες : Axure (σοβάρό/ακριβό), MockupScreens (καλό/φτηνό), Denim (παιδικό/τσάμπα) ή δες μια πιο ολοκληρωμένη λίστα.

Design mock ups μπορεί κανείς να δουλέψει με: