css3.gr

Ένα από τα μεγαλύτερα στοιχήματα για έναν web designer είναι ο σχεδιασμός του περιβάλλοντος χρήσης μιας online εφαρμογής. Ακόμα περισσότερο αν η εφαρμογή πρόκειται να χρησιμοποιείται καθημερινά από ανθρώπους με διαφορετικές ανάγκες, λίγη υπομονή και άφθονη όρεξη για γκρίνια! Δεν πρέπει όμως να είμαστε αυστηροί με τους χρήστες, καθώς οι ίδιοι είμαστε οι αυστηρότεροι κριτές για τη δουλειά των άλλων στον ίδιο τομέα.

Ο σχεδιασμός ενός web app είναι ένας γρίφος που αρχικά φαίνεται βουνό - και ίσως να είναι. Αυτό που χρειάζεται τελικά είναι μεθοδικότητα, πολλές (μα πολλές) επαναλήψεις και σκέψη στο design και δυο “μυστικά” συστατικά: ομοιογένεια και απλότητα.

Ευτυχώς όμως, δεν είναι ανάγκη να ξανα-ανακαλύψουμε τον τροχό. Μπορούμε να στηριχτούμε στην εμπειρία των μεγαλύτερων design agencies για να δούμε ποια είναι τα κύρια σχεδιαστικά χαρακτηριστικά των πιο επιτυχημένων web apps:

Όμορφα & λειτουργικά tables

Δεν υπάρχουν πολλά HTML tags πιο παραξηγημένα στο web design από το <table>. Και όμως, αν φροντίσει κάποιος να χρησιμοποιήσει tables γι’αυτό που προορίζονταν αρχικά, την παρουσίαση δεδομένων, θα δει ότι σε παρόμοιες περιπτώσεις είναι μονόδρομος.

Το Pulse είναι μια εφαρμογή παρακολούθησης προϋπολογισμών μικρών επιχειρήσεων. Ως τέτοια, διαθέτει αρκετά πολύπλοκους πίνακες - αλλά τους παρουσιάζει εξαιρετικά:

Το Etsy παρουσιάζει μια από τις πιο δυσάρεστες σελίδες του λογαριασμού σας, τις οφειλές σας, με εξαιρετικά ευχάριστο τρόπο (προσέξτε τη χαρούμενη φατσούλα όταν δεν είστε πλέον χρεωμένοι):

Λειτουργική χρήση εικονιδίων

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

Πολλά web apps χρησιμοποιούν εικονίδια μεγάλου μεγέθους στo dashboard τους και άλλα μικρότερα ως φόντο σε πεδία, σε κουμπιά και στα μενού πλοήγησης. To NashvilleQuote.com τα χρησιμοποιεί για ευκολότερη διάκριση μεταξύ των διαφορετικών quotes που διαθέτει:

To Google Analytics χρησιμοποιεί εικονίδια στο αρχικό επίπεδο του μενού για μεγαλύτερη καθαρότητα:

Ένα από τα αγαπημένα μου και πιο καλοσχεδιασμένα hosted wikis, το PbWorks, επιλέγει έξυπνα εικονίδια για να συνοδεύσει τις πιο συχνά εκτελούμενες εργασίες σε μια σελίδα:

Διακριτικό περιβάλλον χρήσης

Είτε αφορά την παλέτα χρωμάτων είτε το πλήθος των γραμματοσειρών που χρησιμοποιούνται, τα περισσότερα web apps είναι αρκετά λακωνικά και στα δύο. Η γραμματοσειρά Lucida Grande φαίνεται να κυριαρχεί στις αγγλόφωνες εφαρμογές (στα ελληνικά δυστυχώς δεν είναι και η πιο καθαρή γραμματοσειρά), ενώ οι τόνοι του γκρι και τα απλά χρώματα χρησιμοποιούνται κατά κόρον.

Για να μειώσει τη φθορά και την κούραση από την επαναλαμβανόμενη χρήση, το Backpack διατηρεί γκρι φόντο σε όλες τις σελίδες και δίνει στο χρήστη τη δυνατότητα να αλλάξει τα χρώματα του header.

Το Kontain χρησιμοποιεί άσπρο φόντο στα modules και απλό μαύρο στις επικεφαλίδες και τα tabs για έντονη αντίθεση σε όλο το περιβάλλον χρήσης του:

Το Facebook μπορεί να θεωρηθεί βαρετό, γεμάτο γκρι και μια - δύο συγκεκριμένες αποχρώσεις του μπλε. Κι όμως, χρησιμοποιείται χωρίς πρόβλημα από εκατομμύρια ανθρώπων καθημερινά.

Μια φωτεινή εξαίρεση στις διακριτικές παλέτες των εφαρμογών αποτελεί το Wufoo. Σας προκαλώ να βρείτε μια εφαρμογή σχεδιασμένη περισσότερο διασκεδαστικά από αυτή:

Φόρμες για φίλημα

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

Γι’αυτό στο επόμενο design σας ακολουθήστε τη λογική του Ballpark και εντυπωσιάστε με μια πραγματικά καλοσχεδιασμένη φόρμα:

To ImgSpark διαθέτει μια πολύ απλή φόρμα που συνδυάζει Login και Register σε ένα σύνολο εξαιρετικά “μαλακό” στα μάτια.

Ποιος είπε ότι οι φόρμες είναι μόνο κάθετες ενότητες πεδίων; Το Remindr.info συνδυάζει φυσική γλώσσα και πεδία σε ένα απλούστατο - αλλά λειτουργικό - interface:

Οργανωθείτε με tabs

Τα tab modules είναι ένας πρώτης τάξεως τρόπος να κρύψετε πληροφορία που δεν είναι ανάγκη να είναι εμφανής ανά πάσα στιγμή, παρά μόνο εφόσον το επιλέξει ο χρήστης. Όπως είναι λογικό, ο αριθμός των διαφορετικών ενεργειών που μπορούν να γίνουν μέσω μιας εφαρμογής σχεδόν επιβάλλει τη χρήση tabs σε ορισμένες περιπτώσεις.

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

Μια από τις πιο ευρέως διαδεδομένες εφαρμογές project management στο Διαδίκτυο, το Basecamp, έφερε πρώτο τα tabs στην καθημερινότητα των χρηστών του:

To PbWorks χρησιμοποιεί δύο κεντρικά tabs για να διαχωρίσει ανάμεσα στην λειτουργία προβολής και τη λειτουργία επεξεργασίας:

Επίλογος;

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

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

(Ναι, υπερβάλλω.)

Ζαχαρένια Ατζιτζικάκη

Μοιρασμένη ανάμεσα στο design και το development, η Ζαχαρένια εργάζεται στην Phaistos Networks ενώ παράλληλα γράφει στο blog της και στο PC Magazine, πάντα για το Web.

Θέλεις το επόμενο κείμενο να είναι το δικό σου;

ΜΑΘΕ ΠΕΡΙΣΣΟΤΕΡΑ