Χρήσιμα tips για να σχεδιάσεις μια αποτελεσματική web form στο site σου!

22 Απριλίου 2014, από

webform_design

Για ένα λεπτό, κάνε εικόνα στο μυαλό σου αυτή την σκηνή: Ένας μέσος χρήστης κάθεται αναπαυτικά στον καναπέ του και σερφάρει στο internet. Στο αριστερό χέρι κρατάει ένα κουτάκι αναψυκτικού και το δεξί χέρι εναλάσσεται ανάμεσα στο ποντίκι του laptop και στο κοντρόλ της τηλεόρασης. Ο χρόνος κυλάει ευχάριστα, διαβάζει κάποια άρθρα σε blogs, μπαίνει σε forums και ενημερώνεται για reviews άλλων χρηστών και κάπου εκεί, συναντά ένα site που τον ενδιαφέρει. Αποφασίζει να γραφτεί στο συγκεκριμένο website, πατάει το κουμπι Sign Up και εκεί βλέπει την εξής φόρμα εγγραφής, που μοιάζει με έναν ατελείωτο σιδηρόδρομο υποχρεωτικών πεδίων που πρέπει να συμπληρώσει:

 large_web_form

Δεν είναι τρομακτική;

Όταν έρθει η στιγμή να σχεδιάσεις μια web form στο site σου, να έχεις στο μυαλό σου τον χρήστη και την εμπειρία που θα αποκομίσει από αυτό. Ο μέσος χρήστης του internet χαρακτηρίζεται από έλλειψη χρόνου και μια υποσυνείδητη επιθυμία, που εκφράζεται απόλυτα στην φράση: “Μην με κάνεις να σκέφτομαι!”. Θυμήσου οτι το πιο σημαντικό πράγμα για τους χρήστες είναι η εύκολη και γρήγορη επίτευξη των στόχων τους, συνεπώς, βοήθησέ τους να τους κατακτήσουν.

Τί χρειάζεται να προσέξεις όταν σχεδιάζεις μια web form

1. Γιατί να συμπληρώσει ο χρήστης την φόρμα;

Για να εκφράσει μια ιδέα, να προτείνει μια αλλαγή σε κάποια διαδικασία, να πει ένα “γειά” και να συστηθεί, να αιτηθεί για μια θέση εργασίας, να αγοράσει ένα προϊόν, να κλείσει ένα ραντεβού, να επικοινωνήσει, να τονίσει ένα σημαντικό πρόβλημα… όποιος κι αν είναι ο λόγος για τον οποίο επέλεξες να βάλεις μια φόρμα στο website σου, τόνισέ τον. Όσο απλή ή περίπλοκη στον σχεδιασμό της κι αν εμφανίζεται η φόρμα, φρόντισε να εξηγείς στους χρήστες έναν ή περισσότερους λόγους για να την συμπληρώσουν.

Μπορείς να ξεκινήσεις βάζοντας έναν τίτλο (headline) και υπό-τιτλο (sub headline), κάπως έτσι:

Headline: Πες Μας την Ιδέα σου!

Sub headline: Θέλεις τα ρούχα σου να φτάνουν 3 έως 5 μέρες νωρίτερα στο σπίτι σου; Αν ναι, συμπλήρωσε τη φόρμα και βοήθησέ μας να το κάνουμε πράξη!

2. Βοήθησε τους χρήστες προσφέροντας περισσότερες πληροφορίες

Καθοδήγησε τον χρήστη που θα συμπληρώσει την φόρμα, με μικρές αλλά χρήσιμες πληροφορίες, όπως φαίνονται στην εικόνα που ακολουθεί. Τόνισε τα σημεία που μπορεί να του προκαλέσουν σύγχυση και δείξε του τον σωστό δρόμο. Σκέψου να χρησιμοποιήσεις hover texts / boxes και sub labels!

form_examples

3. Προτίμησε απλό και φιλικό design

Έννοιες όπως: απλότητα, ευχρηστία, φιλικότητα, λειτουργικότητα είναι σημαντικές για να καθορίσουν την εμπειρία του χρήστη (user experience – UX) στο website ή blog  σου. Επομένως, δεν χρειάζεται ο σχεδιασμός της web form να περιλαμβάνει ολόκληρη την ζωγραφική παλέτα ή διαφορετικές γραμματοσειρές και συνωστισμό λέξεων σε bold ή italic γραφή. Just keep it simple! Φρόντισε ώστε τα χρώματα της φόρμας να βρίσκονται σε συνοχή με τα υπόλοιπα χρώματα που έχεις στο site ή με το logo σου και απέφυγε εντυπωσιακά και μεγαλοπρεπή designs. Η σωστή επιλογή χρωμάτων είναι σημάδι επαγγελματισμού και φροντίδας.

Ρίξε μια ματιά στο σχεδιασμό των web forms εδώ και εδώ και θα καταλάβεις αμέσως τί εννοώ.

4. Επέλεξε έναν διασκεδαστικό και προσιτό τρόπο να πεις αυτό που θέλεις

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

5. Σκέψου να εμπλουτίσεις την φόρμα με περισσότερα στοιχεία

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

Επίσης, σκέψου να χωρίσεις την σελίδα σε 2 στήλες, όπου στην αριστερή θα προσθέσεις την web form και στην δεξιά χρήσιμες FAQ’s. Με αυτό τον τρόπο εμπλουτίζεις το περιεχόμενο της σελίδας με χρήσιμες πληροφορίες, παραθέτεις κάποιες συχνές ερωτήσεις, όλες συγκεντρωμένες σε ένα σημείο και ξεκουράζεις τον χρήστη από την αναζήτησή τους μέσα στο site σου.

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

Επίσης, στην περίπτωση που θες να υιοθετήσεις την πρακτική της pop up form φρόντισε να είσαι ιδιαίτερα προσεκτικός γιατί οι χρήστες μπορεί να την θεωρήσουν κουραστική ή εκνευριστική κάποιες φορές. Για τον λόγο αυτό, σχεδίασέ την με τρόπο ξεχωριστό ώστε να διαφέρει απο ό,τι έχει συνηθίσει ο χρήστης να συναντά online. Μια web form με όμορφο design και φιλικό περιεχόμενο θα προσελκύσει το ενδιαφέρον των χρηστών, αυξάνοντας τις πιθανότητες να την συμπληρώσουν.

 

Μπες στη συζήτηση

Πες μας τη γνώμη σου!