Πίνακας περιεχομένου
Mερικές χρήσιμες συμβουλές σχετικά με το Button Design με δυνατότητα για κλικ.
Μπορείτε να δημιουργήσετε εύκολα οπτικά, ελκυστικά και φιλικά προς το χρήστη buttons με τις συμβουλές περιλαμβάνονται στο άρθρο.
Μην ξεχνάτε ότι το σημαντικό είναι τα κουμπιά αυτά πρέπει να είναι σαφή, ευκρινή και να μπορούν εύκολα οι άνθρωποι να καταλάβουν τι πρέπει να κάνουν.
Ας ξεκινήσουμε:
1. Αποφύγετε να ξεπερνάτε τη μια γραμμή στο κείμενο σας
Αποφύγετε τα μεγάλα κείμενα στο κουμπί σας. Μια ετικέτα κουμπιού πρέπει να παραμένει σε μία γραμμή.
- Μια μόνο γραμμή κειμένου βελτιώνει την αναγνωσιμότητα, επιτρέποντας στους χρήστες να κατανοήσουν γρήγορα τον σκοπό του κουμπιού.
- Το πολύ κείμενο στα κουμπιά μπορεί να φαίνεται ακατάστατο ή μη ισορροπημένο.
- Οι σταθερές ετικέτες μιας γραμμής ενισχύουν την ομοιομορφία του σχεδιασμού.
- Διατηρήστε τις ετικέτες των κουμπιών συνοπτικές, αποφεύγοντας μεγάλες φράσεις.
2. Αποφύγετε τη χρήση disabled buttons
Μην χρησιμοποιείτε disabled buttons. Ο λόγος είναι ότι συχνά είναι δύσκολο να καταλάβουμε γιατί είναι απενεργοποιημένη μια επιλογή και τι πρέπει να κάνουμε για να την ενεργοποιήσουμε.
- Τα απενεργοποιημένα κουμπιά (disabled buttons) μπορεί να μπερδέψουν τους χρήστες και να τους αφήσουν να αναρωτιούνται γιατί δεν μπορούν να συνεχίσουν, οδηγώντας σε μια αρνητική εμπειρία.
- Οι χρήστες με αναπηρίες μπορεί να θεωρήσουν δύσκολο να κατανοήσουν γιατί ένα κουμπί είναι απενεργοποιημένο, επηρεάζοντας τη χρηστικότητα και την προσβασιμότητα.
- Αντί να απενεργοποιήσετε τα κουμπιά, καθοδηγήστε τους χρήστες με σαφή μηνύματα ή οδηγίες σχετικά με τον τρόπο ολοκλήρωσης των απαραίτητων βημάτων για την ενεργοποίηση της ενέργειας.
- Τα ενεργοποιημένα κουμπιά (enabled buttons) διατηρούν την εμπειρία χρήστη απρόσκοπτη, επιτρέποντας στους χρήστες να εστιάζουν στην ολοκλήρωση εργασιών χωρίς διακοπές ή σύγχυση.
3. Χρησιμοποιήστε λέξεις που προτρέπουν σε δράση στις ετικέτες των κουμπιών
Οι ετικέτες κουμπιών αναγκάζουν τους χρήστες για να αναλάβουν δράση. Για να προσδιορίσετε τι θα κάνει ένα κουμπί, χρησιμοποιήστε ρήματα ή σαφείς λέξεις που προτρέπουν σε άμεση δράση ως ετικέτα του κουμπιού.
- Οι λέξεις όπως “Υποβολή”, “Λήψη” ή “Εξερεύνηση” δημιουργούν μια σαφή παρότρυνση για δράση, προτρέποντας τους χρήστες να λάβουν άμεσα μέτρα.
- Τα ρήματα παρέχουν άμεσο πλαίσιο, διευκολύνοντας τους χρήστες να κατανοήσουν τι θα συμβεί όταν κάνουν κλικ στο κουμπί.
- Οι σαφείς, προσανατολισμένες στη δράση ετικέτες μειώνουν τη σύγχυση, βοηθώντας τους χρήστες να πλοηγούνται στη διεπαφή ομαλά και αποτελεσματικά.
- Τα ρήματα και οι λέξεις δράσης φαίνονται πιο δυναμικά και ελκυστικά, παρακινώντας τους χρήστες να αλληλεπιδράσουν.
4. Ευθυγραμμίστε τα κουμπιά
Μην τοποθετείτε ένα κουμπί κάτω από ένα άλλο κουμπί εάν υπάρχει καλός χώρος για να τα τοποθετήσετε δίπλα-δίπλα. Αυτό θα διαταράξει την οπτική ροή και θα κάνει τη διάδραση να μοιάζει ακατάστατη και μπερδεμένη.
- Τα σωστά ευθυγραμμισμένα κουμπιά υποστηρίζουν προγράμματα ανάγνωσης οθόνης και βοηθητικά εργαλεία, καθιστώντας τη δίαδραση ευκολότερη για την πλοήγηση όλων των χρηστών.
- Η προβλέψιμη τοποθέτηση κουμπιών βοηθά τους χρήστες να γνωρίζουν πού να κοιτάξουν, ελαχιστοποιώντας τον δισταγμό ή τα σφάλματα.
- Η σωστή ευθυγράμμιση οδηγεί σε μια πιο οργανωμένη και οπτικά ελκυστική διεπαφή με τον χρήστη.
5. Χρησιμοποιήστε την τυπική διάταξη κουμπιών
Η χρήση μιας τυπικής διάταξης κουμπιών βελτιώνει την εξοικείωση, καθοδηγώντας τους χρήστες σε ενέργειες χωρίς κόπο και βελτιώνοντας τη συνολική χρηστικότητα και αποτελεσματικότητα κατά τη διάδραση με τον ιστότοπο ή την εφραμογή.
- Η τήρηση των τυπικών σχεδίων κουμπιών διασφαλίζει τη συνέπεια σε διάφορες εφαρμογές, ιστότοπους και πλατφόρμες.
- Αναπτύξτε ένα συγκεκριμένο στυλ για την εφαρμογή σας για να διατηρήσετε ένα συνεκτικό θέμα και στυλ σχεδίασης.
- Οι συνεπείς διατάξεις κουμπιών απλοποιούν τη διαδικασία σχεδιασμού και ανάπτυξης, επιτρέποντας στις ομάδες να επικεντρωθούν στη λειτουργικότητα αντί να εφευρίσκουν εκ νέου τον τροχό για κάθε έργο.
6. Επισημάνετε και κάντε highlight ένα κουμπί προτεραιότητας για μια ενέργεια
Η έμφαση στο κουμπί κύριας ενέργειας μέσω του χρώματος, του μεγέθους και της τοποθέτησης εφιστά την προσοχή των χρηστών, καθοδηγώντας τους αποτελεσματικά προς τις πιο σημαντικές ενέργειες. Για παράδειγμα μεταξύ του κουμπιού «Ακύρωση» και του κουμπιού «Σύνδεση» θέλετε να δώσετε έμφαση στο κουμπί «Σύνδεση».
- Ένα κύριο κουμπί θα πρέπει να έχει μεγαλύτερο οπτικό βάρος, το οποίο επιτυγχάνεται μέσω έντονου στυλ, περιγραμμάτων ή εφέ σκιών για να τονιστεί η προβολή του.
- Το χρώμα θα πρέπει να έρχεται σε αντίθεση με το υπόλοιπο πλαίσιο και κείμενο για να εξασφαλίζεται εύκολη ορατότητα.
- Η τοποθέτηση του κουμπιού κύριας δράσης είναι απαραίτητη. θα πρέπει να βρίσκεται σε περιοχές όπου οι χρήστες αναμένουν να το βρουν (για παράδειγμα δεξιά).
7. Μην χρησιμοποιείτε δύο εικονίδια στο ίδιο κουμπί
Αποφύγετε τη χρήση δύο εικονιδίων σε ένα μόνο κουμπί, καθώς μπορεί να δημιουργήσει σύγχυση και ακαταστασία, μειώνοντας τη σαφήνεια και την κατανόηση του χρήστη.
Κάθε εικονίδιο σε ένα κουμπί έχει την οπτική του σημασία και η χρήση δύο εικονιδίων μπορεί να δημιουργήσει ασάφεια.
- Η χρήση πολλών εικονιδίων μπορεί να κάνει τα κουμπιά να φαίνονται γεμάτα και συντριπτικά, μειώνοντας τη συνολική εμπειρία και σαφήνεια του χρήστη.
- Οι χρήστες μπορεί να δυσκολεύονται να καταλάβουν ποιο εικονίδιο αντιπροσωπεύει τη δράση του κουμπιού.
- Ένα μόνο εικονίδιο επικοινωνεί μια σαφή ενέργεια ή σκοπό, βοηθώντας τους χρήστες να κατανοήσουν γρήγορα τι κάνει το κουμπί χωρίς αμφισημίες.
- Η χρησιμοποίηση ενός εικονιδίου ανά κουμπί βοηθά στη δημιουργία μιας συνεπούς γλώσσας σχεδίασης, καθιστώντας την επαφή πιο φιλική προς το χρήστη.
