Περισσότερα από τα ίδια
Εάν δεν έχετε ακούσει ποτέ για ένα μοτίβο διεπαφής χρήστη, ακολουθεί μια γρήγορη εξήγηση: όπως με τα περισσότερα πράγματα, ειδικά κατά την ανάπτυξη λογισμικού, ένα μεγάλο σύνολο στοιχείων μπορεί συχνά να ομαδοποιηθεί, καθώς σχηματίζουν ένα αναγνωρίσιμο μοτίβο. Ένα παράδειγμα λογισμικού θα ήταν ο ορισμός των αρχιτεκτονικών προτύπων ή προτύπων που σχετίζονται με μια συγκεκριμένη γλώσσα προγραμματισμού.
Ωστόσο, υπάρχουν επίσης κοινά μοτίβα κατά το σχεδιασμό της διεπαφής χρήστη. Απλώς ρίξτε μια γρήγορη ματιά σε ορισμένες εφαρμογές στη συσκευή στην οποία διαβάζετε αυτό το άρθρο, ορισμένα πράγματα επαναλαμβάνονται τελικά:
- τροπικές προβολές με ενέργεια αποθήκευσης, ακύρωσης ή / και διαγραφής
- ενότητες στοιχείων που περιέχουν κείμενο, για παράδειγμα λίστες με κίνηση σάρωσης για κάθε στοιχείο λίστας
Σκεφτείτε λοιπόν ένα βήμα παραπέρα, υπάρχουν πόροι στους οποίους μπορείτε να αξιοποιήσετε κατά το σχεδιασμό ενός UI μόνοι σας; Ίσως μια συλλογή προτύπων που άλλοι σχεδιαστές έχουν ήδη αναγνωρίσει και επισημοποιήσει; Λοιπόν, δεν θα έκανα αυτήν την ερώτηση εάν δεν θα είχα ήδη την απάντηση! Ώρα για το δεύτερο κεφάλαιο!
Κεφάλαιο δύο (το ανακοινωθέν)
Αναζητώντας έναν επίσημο ορισμό, η ομάδα Carbon Design της IBM έχει έναν εξαιρετικό: Τα πρότυπα είναι λύσεις βέλτιστων πρακτικών για τον τρόπο με τον οποίο ένας χρήστης επιτυγχάνει έναν στόχο. Δείχνουν επαναχρησιμοποιήσιμους συνδυασμούς στοιχείων και προτύπων που αντιμετωπίζουν κοινούς στόχους χρήστη με ακολουθίες και ροές.
Ας ρίξουμε μια ματιά σε μερικά παραδείγματα. Οι ακόλουθες καταχωρίσεις λαμβάνονται από τον ιστότοπο Carbon Design της IBM, καθώς και από τη σελίδα μοτίβου UI της Google. Δεν μπόρεσα να βρω έναν ιστότοπο για το Fluent Design της Microsoft, αλλά συνέδεσα την αρχική τους σελίδα στο προσάρτημα.
Αναζήτηση
Η αναζήτηση περιεχομένου είναι από τα βασικά στοιχεία για τις περισσότερες εφαρμογές, επομένως είναι η τέλεια επιλογή για τον καθορισμό ενός μοτίβου διεπαφής χρήστη για αυτό. Ανεξάρτητα από την τελική χρήση του (είτε μια καθολική αναζήτηση είτε μια συγκεκριμένη αναζήτηση σε μια σελίδα περιεχομένου), το UI αναζήτησης έχει να προσφέρει
- μια εισαγωγή κειμένου
- ένα σύμβολο κράτησης θέσης κειμένου εάν δεν υπάρχει ακόμη διαθέσιμη εισαγωγή
- ένα εικονίδιο που υποδεικνύει με σαφήνεια τον σκοπό της εισαγωγής κειμένου, για παράδειγμα με τη χρήση μεγεθυντικού φακού, καθώς και ως ενεργοποίηση για μια νέα αναζήτηση
Σε ορισμένες περιπτώσεις, μια ετικέτα υπόδειξης μπορεί να βοηθήσει στη διάκριση μεταξύ διαφορετικών τύπων περιεχομένου ή να παρέχει βοήθεια σε μη έγκυρη εισαγωγή. Όσο περισσότερες συνθήκες πρέπει να χειριστεί μια αναζήτηση, τόσο καλύτερη είναι η προσαρμογή μιας αναζήτησης σε αυτήν την απαίτηση προσθέτοντας ρητά μενού φίλτρων.
Διάλογος
Ένα από τα πολύ εμφανή μοτίβα διεπαφής χρήστη. Οι διάλογοι επιτρέπουν σε μια εφαρμογή να εμφανίζει μια πληροφορία χωρίς να χάνει το συνολικό πλαίσιο ενός ιστότοπου. Αυτό επιτυγχάνεται με την κάλυψη ολόκληρου του παραθύρου, αλλά μόνο ενός μικρότερου μέρους. Οι διάλογοι διακόπτουν την τρέχουσα ροή εργασίας του χρήστη και ως εκ τούτου θα πρέπει να θεωρούνται απαραίτητες μόνο όταν μια διακοπή στη ροή εργασίας είναι πραγματικά έγκυρη. Θα πρέπει να χειρίζονται μόνο μικρές εργασίες και να έχουν σαφή εστίαση στο τι πρέπει να επιτύχουν. Για παράδειγμα, επαναφέρετε τις μη αποθηκευμένες αλλαγές ή πραγματοποιήστε μια σημαντική ενέργεια.
Κενές καταστάσεις
Παρόλο που μπορεί να ακούγεται περίεργο στην αρχή, οι κενές καταστάσεις είναι πολύ συχνές στις εφαρμογές. Είναι σημαντικό να ενημερώσετε τον χρήστη ότι δεν υπάρχουν διαθέσιμα δεδομένα και να εξηγήσετε ιδανικά γιατί συμβαίνει αυτό. Ανάλογα με το περιεχόμενο, μια υπόδειξη σχετικά με τον τρόπο επίλυσης της κενής κατάστασης μπορεί να βοηθήσει πολύ στη δημιουργία ενός καλού UX. Για παράδειγμα, ένας χρήστης έκανε αναζήτηση για κάτι, αλλά δεν μπόρεσε να βρει τίποτα. Αυτό μπορεί να είναι μια περίπτωση χρήσης όπου η υποβολή διαφορετικού ερωτήματος αναζήτησης μπορεί να βοηθήσει τον χρήστη να ολοκληρώσει την εργασία. Σε κάθε περίπτωση, κάθε προβολή που αντιπροσωπεύει μια κενή κατάσταση πρέπει να είναι συμφραζόμενη. Ένα αρνητικό παράδειγμα θα ήταν κάτι σαν "Αυτό δεν λειτούργησε. Προσπαθήστε ξανά αργότερα".
Μην αντιμετωπίζετε τις άδειες καταστάσεις ως μεταγενέστερη σκέψη στη διαδικασία σχεδίασης διεπαφής χρήστη. Εάν εφαρμοστούν σωστά, επιτρέπουν στους χρήστες να προχωρήσουν ομαλά στη ροή εργασίας. Οι άδειες καταστάσεις που ακινητοποιούν ολόκληρη τη ροή εργασίας είναι στην πραγματικότητα ένα χειρότερο σενάριο, εκτός από τα σφάλματα της εφαρμογής.
Μόνο μια αρχή
Αυτή ήταν μια γρήγορη ματιά σε ορισμένα μοτίβα διεπαφής χρήστη που έχω διαλέξει από το Carbon Design της IBM, καθώς και από τη σελίδα μοτίβων υλικών UI. Η εφαρμογή μοτίβων διεπαφής χρήστη στην εφαρμογή σας μπορεί επίσης να συμβάλει στη μείωση της τριβής μεταξύ της ροής εργασίας ενός χρήστη και της διεπαφής χρήστη για την ολοκλήρωση της εργασίας. Ο σχεδιασμός της διεπαφής χρήστη μπορεί να είναι αρκετά προκλητικός, οπότε η στάση στους ώμους των γιγάντων μαθαίνοντας από υπάρχουσες μελέτες UX βοηθά πολύ στη βελτίωση της αντίληψης των χρηστών σας για τη συμπεριφορά της εφαρμογής σας.
