Σωστή διάταξη των στοιχείων στην φόρμα και σχεδιασμός

Η διάταξη των στοιχείων στην φόρμα, ήταν πάντα ενα πολύ σημαντικό κομμάτι κατα την διάρκεια της σχεδίασης του GUI.

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

Σας παραθέτω παρακάτω δύο εικόνες απο δύο διαφορετικά προγράμματα, ένα απο δικό μου και ένα απο άλλη εταιρία.
και
Θα δείτε οτι στην μια περίπτωση το GUI έχει χρώματα τα οποία είναι απαλά, λιτά και δεν «προκαλούν» τον χρήστη, ενώ στην άλλη περίπτωση τα χρώματα που χρησιμοποιούνται προκαλούν πρόβληματα.
Χρησιμοποιούν το κόκκινο, το οποίο σαν χρώμα προκαλεί οργή (rage color) κάτι το οποίο δεν το θέλουμε στον χρήστη.Η διάταξη των πεδίων είναι επίσης λάθος μέσα στο GroupBox καθώς πρώτα έπρεπε να εμφανίζεται το Επίθετο και μετά το Όνομα του πελάτη.Η τελευταία παρατήρηση είναι ότι δεν υπάρχει εύκολη προσπέλαση σε άλλο πελάτη.

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

Άρα τελικά ποια είναι η καλύτερη διάταξη στα στοιχεία μας στην φόρμα και ο καλύτερος σχεδιασμός της;

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

- Αποφεύγουμε να βάζουμε στοιχεία στο επάνω μέρος της φόρμας. Το επάνω μέρος της φόρμας το αφήνουμε για κάποια ΤoolΒar  με διάφορες λειτουργίες (Εύρεση,Διαγραφή, Καταχώρηση κλπ)

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

- Στην αριστερή πλευρά τοποθετούμε πάντα τα σημαντικά στοιχεία. Όσο πιο σημαντικό το θεωρούμε σαν πεδίο, τόσο πιο νωρίς πρέπει να εμφανιστεί στον χρήστη.Έτσι του γλυτώνουμε χρόνο στην καταχώρηση και έχουμε ενα καλό επιχείρημα για marketing (χρόνος = χρήμα)

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

- Σε κάθε ομάδα έχουμε εικονικές στήλες με τα labels των πεδίων. Στοιχίζουμε τα labels πάντα αριστερά και αρχίζουμε να τοποθετούμε τα πεδία εκει που τελείωσε το μεγαλύτερο πεδίο και όχι δίπλα απο κάθε label.

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

- Στο κάτω μέρος της φόρμας (στο StatusBar) αναφέρουμε σε τι κατάσταση βρισκόμαστε (πχ Επεξεργασία, Νεα καταχώρηση κλπ), ενώ καλό θα ήταν να αναφέρουμε και κάποια σύνολα (πχ Ενεργοί και Ανενεργοί Πελάτες). Συμβουλή: Μην ξεπεράσετε τη μέση του StatusBar, καθώς κανένας χρήστης δεν θα διαβάσει μέχρι τέρμα δεξιά τα στοιχεία.Οτιδήποτε θεωρείτε πιο σημαντικό, τοποθετήστε το πρώτο.Χρησιμοποιούμε και εδώ διαχωριστικά.

- Δημιουργούμε πάντα συντομεύσεις για όλες τις σημαντικές λειτουργίες (καταχώρηση κλπ) και προσπαθούμε να ακολουθήσουμε ήδη γνωστές συντομεύσεις απο άλλες μεγάλες σουίτες εφαρμογών, όπως πχ CTRL + N για νέο παράθυρο (στον Internet Explorer) θα μπορούσε να είναι συντόμευση για την δημιουργία νέας καρτέλας πελάτη. Δεν κάνουμε ποτέ override συντομεύσεις που χρησιμοποιεί το λειτουργικό (Windows) καθώς θα μπερδέψουμε τον χρήστη (πχ CTRL + C αντι για copy να κάνει Close!!).

- Χρησιμοποιούμε εύκολες και κατανοητές λέξεις ως περιγραφή των πεδίων και αποφεύγουμε να δημιουργούμε δικά μας ακρωνύμια.Επίσης καλό θα ήταν να έχουμε και intergration με το εγχειρίδιο της εφαρμογής (manual), έτσι ώστε όταν ο χρήστης πατήσει το κλασικό F1 να ανοίξει η αντίστοιχη σελίδα βοήθειας στο εγχειρίδιο, για την συγκεκριμένη φόρμα.

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


Πως ξεχωρίζουμε όμως ποιες είναι οι βασικές λειτουργίες για «όλους» απο τις προχωρημένες για «λίγους»;

Προσωπικά χρησιμοποιώ ένα πολύ απλό trick.Μπαίνω στο ρόλο του αρχάριου χρήστη, σκέφτομαι δηλαδή σαν εκείνο.Εάν δεν μπορείτε να το κάνετε αυτό, τότε δείτε το απο μια άλλη οπτική γωνεία, απο την γωνεία της ευκολίας ώστε να πάρω το επιθυμητό αποτέλεσμα.
Ο πιο γρήγορος τρόπος να πάρω το επιθυμητό αποτέλεσμα, είναι και ο τρόπος με τον οποίο ο αρχάριος χρήστης θα σκεφτεί.Ενας αρχάριος χρήστης δεν θα σκεφτεί ποτέ να βάλει πχ ένα φίλτρο στην ονομασία ενός πελάτη σε ενα grid απο δεδομένα, αλλά θα προσπαθήσει να το βρει στην λίστα κάνοντας scroll down και διαβάζοντας τα ένα ένα (όταν είναι λίγα).Όταν όμως γίνουν πολλά, θα αναζητήσει ένα πιο εύκολο τρόπο να το κάνει, θα αναζητήσει για μια φόρμα εύρεσης του πελάτη με βάση ορισμένα κριτήρια.
Εκεί θα ξεχωρίσουμε τα βασικά στοιχεία που θα πρέπει να φαίνονται σε εναν αρχάριο χρήστη, απο ένα προχωρημένο.
Ο αρχάριος όπως είπαμε, θέλει το αποτέλεσμα με πολύ απλές κινήσεις, δεν θέλει ουτε φίλτρα και κριτήρια πχ στο συνολικό ποσό οφειλής του πελάτη, αλλά ούτε τον ενδιαφέρει άμμεσα εάν ο πελάτης μένει στην Αθήνα ή στην Θεσσαλονίκη.Άρα τα πεδία για παράδειγμα που θα τον ενδιέφεραν είναι πχ το Ονοματεπώνυμο, η Διεύθυνση, Τηλέφωνο.
Όλα τα υπόλλοιπα στοιχεία όπως πχ Οφειλή,Σύνολο προιόντων, και άλλα διάφορα κριτήρια, θα πρέπει να μπούν στους προχωρημένους.
Ο προχωρημένος χρήστης, μπορεί να χρησιμοποιήσει και σύνθετα κριτήρια με λογικούς τελεστές ώστε να επιτύχει το επιθυμητό αποτέλεσμα, ενώ ο αρχάριος μπορεί να μην έχει ακούσει και ποτέ, τι είναι ένας λογικός τελεστής.Στον προχωρημένο χρήστη, κάνουμε και διαχωρισμό των τηλεφώνων σε κινητά και σταθέρα, ενώ στον αρχάριο χρήστη ψάχνουμε απο default και στα δύο πεδία.
Είναι περισσότερο basic and advanced search διαφορές, οι οποίες όμως έχουν αντίκτυπο επάνω στους χρήστες, αρχάριους και προχωρημένους.

------------------------

Επέλεξα να αφήσω το κομμάτι του validation ώς ένα μέρος μόνο του, καθώς είναι πολύ σημαντικό και στον τρόπο ελέγχου αλλά και στον τρόπο παρουσίασης των λαθών στον χρήστη.
Δεν θα αναφερθώ μόνο στο validation αλλά και στο τρόπο να αποφεύγονται τα λάθη με σωστά input masked textboxes και διάφορες άλλες τεχνικές.
Επίσης με την ολοκλήρωση και του τρίτου μέρους, θα ανεβάσω και τα πρώτα sample forms με όλες τις παραπάνω λειτουργίες σε ενα demonstration project.