Σχεδιασμός = Συναισθήματα + Ευχρηστία
Ενώ η τέχνη είναι ένας υποκειμενικός τομέας, ο γραφικός σχεδιασμός είναι πιο τυποποιημένος στα βασικά του στοιχεία. Ένας αποτελεσματικός σχεδιασμός πρέπει να κάνει τους ανθρώπους να νιώθουν έναν συγκεκριμένο τρόπο και να αναλάβουν κάποια δράση . Σε αυτό το άρθρο θα ήθελα να μοιραστώ το Gravity Switch αρχές σχεδιασμού ιστοσελίδων και η σκέψη μας πίσω από αυτά.
Αυτοί οι κανόνες είναι: ορίστε πρώτα τους στόχους. επικεντρωθεί στους χρήστες δεύτερη? Σχεδιασμός για συγκίνηση. ακολουθούν τους κανόνες του οπτικού σχεδιασμού. να οικοδομήσουμε μια σαφή, οπτική ιεραρχία. να είναι συνεπής; να παραβιάζουν τους κανόνες (όταν είναι απαραίτητο) · Μην χρησιμοποιείτε υπερβολικά τα τεχνάσματα. και τελικά δοκιμάστε, μετρήστε & βελτιώστε.
1. Καθορίστε πρώτα τους στόχους
Σίγουρα νομίζατε ότι θα έλεγα "επικεντρωθείτε πρώτα στους χρήστες", αυτό είναι πλέονΑνθρωποιλένε. Ξεχάστε αυτό, ας αρχίσουμε με τους στόχους σας. Ξεκινήστε κάθε έργο σχεδίασης ιστοσελίδων με μια συνεδρία brainstorming που σκιαγραφεί σαφείς, ρεαλιστικούς στόχους ιστοτόπου που ενισχύουν τους στόχους της επιχείρησής σας .
Για να το δείξουμε καλύτερα, ας κοιτάξουμε το Amazon. Στόχος τους είναι να μεγιστοποιήσουν τις πωλήσεις προϊόντων. Μέσω της αναβάθμισης και της διασταυρούμενης πώλησης μπορούν να μεγιστοποιήσουν την αγοραστική δύναμη κάθε χρήστη, αλλά για να είναι επιτυχείς σε αυτό, επιβραδύνουν τη διαδικασία αγοράς. Σε αντίθεση με πολλούς από τους ανταγωνιστές τους, το Amazon δεν διαθέτει κουμπί "αγοράστε τώρα" στα αποτελέσματα αναζήτησης. Οι χρήστες πρέπει να επισκεφτούν μια ακόμη σελίδα (με πιθανές αυξήσεις) προτού πραγματοποιήσουν μια αγορά. Αυτό είναι ένα τέλειο παράδειγμα του πώς ένα σχέδιο τοποθεσίας μπορεί να ανταποκριθεί σε σαφείς επιχειρηματικούς στόχους.
Οι περισσότεροι σύγχρονοι ιστότοποι ηλεκτρονικού εμπορίου έχουν αφαιρέσει το κουμπί "αγοράστε τώρα" από τα αποτελέσματα αναζήτησης, αν και κάποιες αποθήκες τούβλων και κονιάματος το έχουν ακόμα.
2. Εστίαση στους χρήστες δεύτερης
Με τους ξεκάθαρους στόχους σας, θα πρέπει να καθορίσετε και να δώσετε προτεραιότητα στους χρήστες . Να είστε όσο πιο συγκεκριμένοι γίνεται. Μερικά παραδείγματα ερωτήσεων είναι:
- Ανδρική και γυναικεία κατάρρευση;
- Επίπεδο Εκπαίδευσης?
- Τοποθεσίες στη χώρα;
- Σχετικά χόμπι;
- Βάση εισοδήματος;
- Ποιος οδηγεί τις αγορές προϊόντων για παιδιά; Παιδιά? Γονείς? Παππούς και γιαγιά?
Το βασικό σημείο είναι ότι οι σχεδιαστές θα πρέπει να γνωρίζουν τους χρήστες, ώστε να διασφαλίζουν ότι τα σχέδιά τους δεν εμποδίζουν τις βασικές διαδρομές χρήσης.
3. Σχεδιασμός για συναισθήματα
Να είστε βέβαιος ότι καταλαβαίνετε τι συναισθήματα θα πρέπει να φέρει η μάρκα σας . Καταιγισμός ιδεών. Κανε ερωτησεις. Συμφωνώ. Και ίσως το πιο σημαντικό, εστιάστε σε αυτά τα συναισθήματα όταν παρουσιάζετε πίσω στους πελάτες σας. Ποτέ μην ρωτάτε αν ο πελάτης σας "συμπαθεί" ένα σχέδιο. Όταν παράγετε σχέδια, θα πρέπει να θέσετε ερωτήματα όπως "Ποια από αυτά σας κάνει να αισθάνεστε πιο επαγγελματικά;" ή "Όταν συγκρίνετε αυτά τα δύο σχέδια, θα δείτε ότι αυτό είναι πιο σύγχρονο, ενώ αυτό είναι πιο δυναμικό. Αυτά ήταν και τα δύο συναισθήματα που ήταν σημαντικά για εσάς, τώρα που τα βλέπετε οπτικά, τα οποία νομίζετε ότι είναι το πιο σημαντικό συναίσθημα για να παρουσιάσετε στο κοινό-στόχο σας; "
Ποιες από αυτές τις οργανώσεις είναι διασκεδαστικές; Χαλαρωτικό; Καινοτόμο; Απασχολημένος? Πραγματικός? (Σχέδια από @JessicaShiner και Christine Mark)
4. Ακολουθήστε τους κανόνες του οπτικού σχεδιασμού
Υπάρχουν πολλά μικρά στοιχεία που χρησιμοποιούν οι χρήστες της ιστοσελίδας συνειδητά και υποσυνείδητα για να αποφασίσουν αν πρόκειται να εμπιστευτούν έναν ιστότοπο. Οι σημαντικότερες είναι:
- Περικοπή: η επιλογή των φωτογραφιών είναι μόνο η μισή μάχη, η περικοπή των φωτογραφιών είναι αυτό που κάνει ή σπάει μια διάταξη σελίδας.
- Αρνητικός χώρος: δίδοντας ιδιαίτερη προσοχή στα περιθώρια, το παραγέμισμα και το ύψος της γραμμής είναι η διαφορά μεταξύ της εμφάνισης των New York Times και ενός ενημερωτικού δελτίου στο γυμνάσιο.
- Γραμματοσειρές: ο καθένας αγαπάει την επιλογή των γραμματοσειρών, αλλά ένας μεγάλος σχεδιαστής μπορεί να εντοπίσει γρήγορα μια επαγγελματική γραμματοσειρά και έχει τον περιορισμό να διατηρήσει τον αριθμό των γραμματοσειρών στον ιστότοπο σε 1-2 (χωρίς να υπολογίζει το λογότυπο το οποίο συχνά έχει τη δική του γραμματοσειρά).
- Χρώματα: Τα χρώματα είναι ένα από τα πιο δύσκολα πράγματα για τους σχεδιαστές να χρησιμοποιούν αποτελεσματικά. Υπάρχουν τόσοι πολλοί κανόνες για την επιλογή μιας καλής παλέτας χρωμάτων και ενώ είναι δελεαστικό να χρησιμοποιείτε ηλεκτρονικά γεννήτριες παλετών χρωμάτων , περνούν χρόνο σχεδιάζοντας τη δική σας παλέτα χρωμάτων.
- Διάταξη: δημιουργήστε καλή "ροή" της οπτικής σελίδας έτσι ώστε τα μάτια του χρήστη να πάνε εκεί που θέλετε να πάνε στη σελίδα χωρίς άλλα στοιχεία που θολώνουν οπτικά τους στόχους σας.
5. Δημιουργήστε μια σαφή, οπτική ιεραρχία
Οι επισκέπτες της ιστοσελίδας αποκομίζουν. Δεν διαβάζουν. Πιάστε την προσοχή τους και τους φέρτε στις πιο σημαντικές πληροφορίες με μια σαφώς καθορισμένη, καλά σχεδιασμένη οπτική ιεραρχία . Μια καλά σχεδιασμένη σχεδίαση - τοποθεσία> σελίδα> ενότητα - οδηγεί το χρήστη μέσω της σελίδας με τον τρόπο που θέλετε. Οι χρήστες θα πρέπει να μπορούν να δουν τη σελίδα σας και να την καταλάβουν σε ένα δευτερόλεπτο.
Κοιτάξτε το ακόλουθο παράδειγμα ενός άρθρου και παρατηρήστε πως είναι δύσκολο για το μάτι σας να πει τι είναι η σελίδα ή πού αρχίζει το άρθρο!
Παρακάτω είναι ένα mockup που έκανα αλλάζοντας περίπου δώδεκα γραμμές CSS για να δημιουργήσουμε μια πιο καθαρή οπτική ιεραρχία σε αυτή τη σελίδα με τους ακόλουθους τρόπους:
- Ο τίτλος του άρθρου θα πρέπει να είναι το πιο εμφανές στοιχείο στη σελίδα. Αυτήν τη στιγμή είναι μικρότερο μέγεθος γραμματοσειράς από την επικεφαλίδα πιο κάτω στη σελίδα! Έτσι, αύξησα το μέγεθος του τίτλου του άρθρου και μείωσε το μέγεθος των τίτλων.
- Η επικεφαλίδα που βρίσκεται πιο κάτω στη σελίδα αποσυνδέθηκε επίσης από το περιεχόμενο που ήταν επικεφαλής για οπτική, γι 'αυτό και σφίγγα την απόσταση κάτω από την επικεφαλίδα αφήνοντας το διάστημα πάνω από την επικεφαλίδα για να ενημερώσω τους χρήστες ότι είναι μια επικεφαλίδα για την παράγραφο κάτω από αυτήν .
- Επίσης, μετέφερα τη μικρή εικόνα στα δεξιά του τίτλου αντί για το αριστερό, έτσι ώστε όταν ένας χρήστης σαρώνει την αριστερή πλευρά της σελίδας για να προσανατολιστεί ο τίτλος του άρθρου είναι στο όραμά του.
- Αφαιρέθηκα τις κλάσεις των συνόρων και του φόντου στο μπλε blurb, ώστε να μην ανταγωνίζεται πλέον την επικεφαλίδα και να αφαιρέσει το πάνω περιθώριο. Ήταν ήδη μια τάξη στη θέση της για να γίνει γκρίζο, το οποίο λειτουργεί καλά σε αυτή την περίπτωση.
- Επίσης, αφαιρέσαμε το κείμενο και την εικόνα που αποσπούν την προσοχή, κάτι που υπογραμμίζει ότι πρόκειται για ένα άρθρο ανατύπων καθώς και για ορισμένες κενές παραγράφους και
ετικέτες.
Έχω εγκαταλείψει σκόπιμα όλες τις διαφημίσεις όπως είχαν αρχικά κωδικοποιηθεί, υποθέτοντας ότι αυτό είναι ένα κρίσιμο μέρος αυτής της σελίδας.
6. Να είστε συνεπείς
Μη συγχέετε τους χρήστες σας. Οι συνδέσεις πρέπει να είναι συνεπείς και διακριτές. Αν επιλέξετε να χρησιμοποιήσετε εικονίδια, φωτογραφίες και εικονογραφήσεις, φροντίστε να φαίνονται και να αισθάνονται σαν να ανήκουν σε ένα συνεκτικό σύνολο. Οι ασυνέπειες θα αποσπάσουν τον χρήστη και θα αποκρύψουν το μήνυμά σας. Μην χρησιμοποιείτε περισσότερες από 3 γραμματοσειρές - είναι καλύτερο αν είναι όλοι στην ίδια οικογένεια. Περιορίστε τον εαυτό σας σε 5-6 χρώματα (Σημείωση: το λογότυπο μπορεί να είναι διαφορετική γραμματοσειρά και συχνά πρέπει να είναι).
7. Διάλειμμα των κανόνων (όταν είναι απαραίτητο)
Εάν υπάρχει κάτι ιδιαίτερα μοναδικό ή σημαντικό που πρέπει να επισημάνετε, ίσως χρειαστεί να «σπάσετε τους κανόνες». Μπορείτε να χρησιμοποιήσετε ένα ή δύο χρώματα που είναι αντιληπτά για να βοηθήσετε το στοιχείο να ξεχωρίζει. Για παράδειγμα, ο ιστότοπος του Ηνωμένου Βασιλείου παρακάτω υπογραμμίζει τον φορολογικό συντελεστή κάνοντας αυτό ένα μεγαλύτερο στοιχείο με ένα ποπ χρώμα.
Όταν οι άνθρωποι επισκέπτονται τη σελίδα πληροφοριών σχετικά με το Φόρος ΦΠΑ, οι σχεδιαστές του GOV.UK διαβεβαίωσαν ότι οι πληροφορίες που οι περισσότεροι άνθρωποι χρειάζονται είναι μπροστά και κέντρο.
8. Μην χρησιμοποιείτε υπερβολικά τα τεχνάσματα
Κάντε το σχέδιό σας διασκεδαστικό, αλλά βεβαιωθείτε ότι τα στοιχεία αυτά υποστηρίζουν αυτό που προσπαθείτε να επιτύχετε στον ιστότοπο. Για παράδειγμα, το Inze site είναι όμορφο να δούμε και υπέροχο στο κινητό αλλά όταν το επισκέφτηκα στον επιτραπέζιο υπολογιστή μου χάθηκα. Αποδεικνύεται ότι η πλοήγηση είναι κρυμμένη μέχρι να ξεκινήσετε την κύλιση, η οποία δυστυχώς πήρε το μάτι μου στο κάτω μέρος της σελίδας. Ως αποτέλεσμα, δεν παρατηρούσα καν την λεπτή ναυσιπλοΐα που εμφανίζεται στην κορυφή. Έβγαλα το μεγαλύτερο μέρος του δρόμου προς τα κάτω πριν συνειδητοποιήσω ότι υπήρχε (τελικά) μια πλοήγηση στην κορυφή. Η "κρυφή" πλοήγηση είναι ένα καθαρό αποτέλεσμα, αλλά το "σχέδιο" με εμπόδισε να πάρει την επιθυμητή δράση. Στο τέλος, μεταδίδει μια σύγχυση, μπερδεμένη εικόνα μάρκας.
Συγκρίνετε το Inze με αυτό που συμβαίνει σε αυτό το άρθρο εδώ Web Designer Depot όταν μετακινείτε μια σύνδεση στον επιτραπέζιο υπολογιστή σας. Έχουμε ένα καθαρό αποτέλεσμα, αλλά δεν δημιουργεί ένα "εμπόδιο" για τους χρήστες για χάρη ενός τέχνασμα. Επίσης υποβαθμίζεται χαριτωμένα, ώστε να μην σπάσει σε κινητά ή παλαιότερα προγράμματα περιήγησης.
9. Δοκιμή. Μετρήσει. Βελτιώσει
Οι ιστότοποι εξελίσσονται. Σχεδιασμός για ευελιξία και προσαρμοστικότητα. Η συλλογή και η ανάλυση δεδομένων συνεχούς δοκιμής θα οδηγήσει σε συνεχή βελτίωση. Θυμηθείτε, είναι όλα σχετικά με τη δημιουργία ενός σχεδίου που να ανταποκρίνεται στους στόχους σας.
Με την προσεκτική μέτρηση των αποτελεσμάτων μιας σειράς μικρών αλλαγών στο σχεδιασμό στην αρχική σελίδα προορισμού (αριστερά) δημιουργήσαμε ένα νέο σχέδιο (δεξιά) που αύξησε το ποσοστό εγγραφών κατά 60%!
Θυμάμαι
Ο αποτελεσματικός σχεδιασμός γραφικών πρέπει να συνδέει συναισθηματικά τον χρήστη με το εμπορικό σήμα ενώ ταυτόχρονα να τους κάνει να κάνουν ό, τι θέλετε. Μπορεί να γίνει.
Συμφωνείτε με αυτούς τους κανόνες σχεδιασμού; Θα προσθέλατε περισσότερα; Ας γνωρίσουμε τις απόψεις σας στα σχόλια.
Προτεινόμενη εικόνα / μικρογραφία, εικόνα συναισθημάτων μέσω Shutterstock.