Πιθανότατα να έχετε ξαναπάει εκεί. Πώς επιλέγουμε μεταξύ της εμφάνισης ενός modal στους χρήστες και πότε τους πλοηγούμαστε σε μια ξεχωριστή, νέα σελίδα; Και έχει καμία σημασία; Στην πραγματικότητα, το κάνει. Η απόφαση επηρεάζει τη ροή των χρηστών, το περιβάλλον τους, την ικανότητά τους να αναζητούν λεπτομέρειες και, μαζί, τη συχνότητα σφαλμάτων και την ολοκλήρωση της εργασίας. Και οι δύο επιλογές μπορεί να είναι ενοχλητικές και απογοητευτικές — τη λάθος στιγμή και σε λάθος μέρος. Οπότε καλύτερα να το κάνουμε σωστά. Λοιπόν, ας δούμε πώς να το κάνουμε ακριβώς αυτό. Modals vs. Dialogs vs. Overlays vs. Lightboxes Ενώ συχνά μιλάμε για ένα μεμονωμένο στοιχείο διεπαφής χρήστη, συχνά αγνοούμε λεπτές, περίπλοκες αποχρώσεις μεταξύ όλων των διαφορετικών τύπων modal. Στην πραγματικότητα, δεν είναι όλοι οι τρόποι το ίδιο. Modals, παράθυρα διαλόγου, επικαλύψεις και lightbox - όλα ακούγονται παρόμοια, αλλά στην πραγματικότητα είναι αρκετά διαφορετικά:
DialogΈνας γενικός όρος για τη «συνομιλία» (σύστημα χρήστη ↔). OverlayΈνα μικρό πλαίσιο περιεχομένου που εμφανίζεται στην κορυφή μιας σελίδας. Το ModalUser πρέπει να αλληλεπιδρά με την επικάλυψη + το φόντο απενεργοποιημένο. Το NonmodalUser πρέπει να αλληλεπιδρά με την επικάλυψη + φόντο ενεργοποιημένη. LightboxDimmed φόντο για εστίαση της προσοχής στο modal.
Όπως τονίζει η Anna Kaley, οι περισσότερες επικαλύψεις εμφανίζονται τη λάθος στιγμή, διακόπτουν τους χρήστες κατά τη διάρκεια κρίσιμων εργασιών, χρησιμοποιούν κακή γλώσσα και διακόπτουν τη ροή των χρηστών. Είναι από τη φύση τους διακόπτες και συνήθως με υψηλό επίπεδο σοβαρότητας χωρίς έντονη ανάγκη για κάτι τέτοιο.
Σίγουρα οι χρήστες πρέπει να επιβραδύνουν και να διακόπτονται εάν οι συνέπειες της δράσης τους έχουν μεγάλο αντίκτυπο, αλλά για τα περισσότερα σενάρια οι μη τρόποι χρήσης είναι πολύ πιο λεπτές και μια πιο φιλική επιλογή για να φέρουν κάτι στην προσοχή του χρήστη. Αν μη τι άλλο, προτείνω πάντα να είναι προεπιλογή. Τρόποι → Για μεμονωμένες, αυτόνομες εργασίες Ως σχεδιαστές, συχνά απορρίπτουμε τα modal ως άσχετα και ενοχλητικά — και συχνά είναι! — όμως έχουν και την αξία τους. Μπορούν να είναι πολύ χρήσιμα για να προειδοποιήσουν τους χρήστες για πιθανά λάθη ή να τους βοηθήσουν να αποφύγουν την απώλεια δεδομένων. Μπορούν επίσης να βοηθήσουν στην εκτέλεση σχετικών ενεργειών ή να διερευνήσουν λεπτομέρειες χωρίς να διακόψουν την τρέχουσα κατάσταση της σελίδας. Αλλά το μεγαλύτερο πλεονέκτημα των modals είναι ότι βοηθούν τους χρήστες να διατηρήσουν το πλαίσιο της τρέχουσας οθόνης. Δεν σημαίνει μόνο το UI, αλλά και επεξεργασμένη είσοδο, θέση κύλισης, κατάσταση ακορντεόν, επιλογή φίλτρων, ταξινόμηση κ.λπ.
Μερικές φορές, οι χρήστες πρέπει να επιβεβαιώσουν γρήγορα μια επιλογή (π.χ. φίλτρα όπως φαίνεται παραπάνω) και στη συνέχεια να προχωρήσουν αμέσως από εκεί. Η αυτόματη αποθήκευση μπορεί να επιτύχει το ίδιο, φυσικά, αλλά δεν είναι πάντα απαραίτητη ή επιθυμητή. Και ο αποκλεισμός του UI συχνά δεν είναι καλή ιδέα. Ωστόσο, τα modals δεν χρησιμοποιούνται για καμία εργασία. Συνήθως, τα χρησιμοποιούμε για μεμονωμένες, αυτόνομες εργασίες, όπου οι χρήστες πρέπει να μεταβούν, να ολοκληρώσουν μια εργασία και στη συνέχεια να επιστρέψουν στο σημείο που ήταν. Όπως ήταν αναμενόμενο, λειτουργούν καλά για σύντομες αλληλεπιδράσεις υψηλής προτεραιότητας (π.χ. ειδοποιήσεις, καταστροφικές ενέργειες, γρήγορες επιβεβαιώσεις). Όταν τα modals βοηθούν: 🚫 Τα Modal είναι συχνά ενοχλητικά, επεμβατικά και προκαλούν σύγχυση. ✅ Εμφάνιση ενός modal μόνο εάν οι χρήστες εκτιμούν τη διακοπή.✅ Από προεπιλογή, προτιμήστε τους μη αποκλεισμούς διαλόγους ("nonmodals"). ✅ Επιτρέψτε στους χρήστες να ελαχιστοποιήσουν, να αποκρύψουν ή να επαναφέρουν το παράθυρο διαλόγου αργότερα. Σελίδες → Για σύνθετες ροές εργασίας πολλαπλών βημάτων Οι οδηγοί ή η πλοήγηση με καρτέλες στα modals δεν λειτουργούν πολύ καλά, ακόμη και σε πολύπλοκα εταιρικά προϊόντα - εκεί, τα πλαϊνά πάνελ ή τα συρτάρια λειτουργούν συνήθως καλύτερα. Τα προβλήματα ξεκινούν όταν οι χρήστες πρέπει να συγκρίνουν ή να αναφέρουν σημεία δεδομένων — ωστόσο τα modals αποκλείουν αυτήν τη συμπεριφορά, επομένως ανοίγουν ξανά την ίδια σελίδα σε πολλές καρτέλες.
Για πιο σύνθετες ροές και διαδικασίες πολλαπλών βημάτων, οι αυτόνομες σελίδες λειτουργούν καλύτερα. Οι σελίδες λειτουργούν επίσης καλύτερα όταν απαιτούν την πλήρη προσοχή του χρήστη και η αναφορά στην προηγούμενη οθόνη δεν είναι πολύ χρήσιμη. Και τα συρτάρια λειτουργούν για δευτερεύουσες εργασίες που είναι πολύ περίπλοκες για ένα απλό modal, αλλά δεν χρειάζονται πλοήγηση σε ολόκληρη τη σελίδα. Πότε να αποφύγετε τα modals: 🚫 Αποφύγετε τα modals για μηνύματα σφάλματος.🚫 Αποφύγετε τα modals για ειδοποιήσεις λειτουργιών.🚫 Αποφύγετε τα modals για την εμπειρία ενσωμάτωσης. Αποφύγετε και τα δύοΓια επαναλαμβανόμενες εργασίες Σε πολλά σύνθετα προϊόντα που απαιτούν πολλές εργασίες, οι χρήστες θα βρεθούν να εκτελούν τις ίδιες εργασίες επανειλημμένα, ξανά και ξανά. Εκεί, τόσο οι τρόποι πλοήγησης όσο και οι νέες σελίδες προσθέτουν τριβή επειδή διακόπτουν τη ροή ή αναγκάζουν τους χρήστες να συγκεντρώσουν δεδομένα που λείπουν μεταξύ όλων των διαφορετικών καρτελών ή προβολών. Πολύ συχνά, οι χρήστες καταλήγουν με μια σπασμένη εμπειρία, γεμάτη ατελείωτες επιβεβαιώσεις, υπερβολικές προειδοποιήσεις, αναλυτικές οδηγίες ή απλώς χάνουν σημεία αναφοράς. Όπως ανέφερε ο Saulius Stebulis, σε αυτά τα σενάρια, οι επεκτάσιμες ενότητες ή η επιτόπια επεξεργασία συχνά λειτουργούν καλύτερα — διατηρούν την εργασία αγκυρωμένη στην τρέχουσα οθόνη. Στην πράξη, σε πολλά σενάρια, οι χρήστες δεν ολοκληρώνουν τις εργασίες τους μεμονωμένα. Πρέπει να αναζητήσουν δεδομένα, να κάνουν αντιγραφή-επικόλληση, να βελτιώσουν τις εγγραφές σε διαφορετικά σημεία ή απλώς να ελέγξουν παρόμοιες εγγραφές καθώς εκτελούν τις εργασίες τους. Οι επικαλύψεις και τα συρτάρια είναι πιο χρήσιμα για τη διατήρηση της πρόσβασης σε δεδομένα παρασκηνίου κατά τη διάρκεια της εργασίας. Ως αποτέλεσμα, το πλαίσιο παραμένει πάντα στη θέση του, διαθέσιμο για αναφορά ή αντιγραφή-επικόλληση. Αποθηκεύστε τα modals και την πλοήγηση στη σελίδα για στιγμές όπου η διακοπή προσθέτει πραγματικά αξία — ειδικά για την αποφυγή κρίσιμων λαθών. Modals vs. Pages: A Decision Tree Πριν από λίγο καιρό, ο Ryan Neufeld συνέταξε έναν πολύ χρήσιμο οδηγό για να βοηθήσει τους σχεδιαστές να επιλέξουν μεταξύ modals και σελίδων. Έρχεται με ένα εύχρηστο cheatsheet PNG και ένα πρότυπο Google Doc με ερωτήσεις αναλυμένες σε 7 ενότητες. Είναι μακρύ, εξαιρετικά εμπεριστατωμένο, αλλά πολύ εύκολο να το ακολουθήσετε:
Μπορεί να φαίνεται τρομακτικό, αλλά είναι μια αρκετά απλή διαδικασία 4 βημάτων:
Περιβάλλον της οθόνης. Αρχικά, ελέγχουμε εάν οι χρήστες πρέπει να διατηρήσουν το περιβάλλον της υποκείμενης οθόνης. Πολυπλοκότητα και διάρκεια εργασιών. Οι απλούστερες, εστιασμένες, μη αποσπώντας εργασίες θα μπορούσαν να χρησιμοποιήσουν έναν τρόπο λειτουργίας, αλλά οι μεγάλες, πολύπλοκες ροές χρειάζονται μια σελίδα. Αναφορά στην υποκείμενη σελίδα. Στη συνέχεια, ελέγχουμε αν οι χρήστες χρειάζεται συχνά να αναφέρονται σε δεδομένα στο παρασκήνιο ή αν η εργασία είναι μια απλή επιβεβαίωση ή επιλογή. Επιλέγοντας τη σωστή επικάλυψη. Τέλος, εάν μια επικάλυψη είναι όντως μια καλή επιλογή, μας καθοδηγεί να επιλέξουμε μεταξύ τροπικής ή μη τροπικής επικάλυψης (κλίνοντας προς ένα μη τροπικό).
Αναδίπλωση Όποτε είναι δυνατόν, αποφύγετε τον αποκλεισμό ολόκληρου του UI. Έχετε ένα διάλογο να κινείται, που καλύπτει εν μέρει τη διεπαφή χρήστη, αλλά επιτρέπει την πλοήγηση, την κύλιση και την αντιγραφή-επικόλληση. Ή εμφανίστε τα περιεχόμενα του modal ως πλαϊνό συρτάρι. Ή χρησιμοποιήστε ένα κάθετο ακορντεόν. Εναλλακτικά, φέρτε τους χρήστες σε μια ξεχωριστή σελίδα εάν θέλετε να δείξετε πολλές λεπτομέρειες. Αλλά αν θέλετε να ενισχύσετε την αποτελεσματικότητα και την ταχύτητα των χρηστών, αποφύγετε τα modals με κάθε κόστος. Χρησιμοποιήστε τα για να επιβραδύνετε τους χρήστες, για να συγκεντρώσετε την προσοχή τους, για να αποτρέψετε λάθη. Όπως σημείωσε η Therese Fessenden, σε κανέναν δεν αρέσει να τον διακόπτουν, αλλά αν πρέπει, βεβαιωθείτε ότι αξίζει το κόστος. Γνωρίστε τα «Μοτίβα σχεδίασης έξυπνης διεπαφής» Μπορείτε να βρείτε μια ολόκληρη ενότητα σχετικά με τους τρόπους και τις εναλλακτικές λύσεις στο Smart Interface Design Patterns, το μάθημά μας 15 ωρών βίντεο με 100 πρακτικά παραδείγματα από έργα της πραγματικής ζωής — με μια ζωντανή εκπαίδευση UX αργότερα φέτος. Τα πάντα, από πολύ αναπτυσσόμενους πίνακες έως σύνθετους πίνακες επιχειρήσεων — με 5 νέα τμήματα που προστίθενται κάθε χρόνο. Μεταβείτε σε μια δωρεάν προεπισκόπηση. Χρησιμοποιήστε τον κωδικό BIRDIE για να εξοικονομήσετε έκπτωση 15%. Γνωρίστε τα Smart Interface Design Patterns, το μάθημά μας βίντεο σχετικά με τη σχεδίαση διεπαφής και το UX.
Βίντεο + Εκπαίδευση UX Μόνο βίντεοΒίντεο + Εκπαίδευση UX 495,00$ 699,00 $
Λάβετε Video + UX Training25 μαθήματα βίντεο (15 ώρες) + Live UX Training. 100 ημέρες εγγύηση επιστροφής χρημάτων. Μόνο βίντεο 300,00$ 395,00$
Λάβετε το μάθημα βίντεο 40 βίντεο μαθήματα (15 ώρες). Ενημερώνεται ετησίως. Διατίθεται επίσης ως πακέτο UX με 2 μαθήματα βίντεο.
Χρήσιμοι Πόροι
Διαφορετικοί τύποι αναδυόμενων παραθύρων, από την Anna Kaley Βέλτιστες πρακτικές για το σχεδιασμό UI Modals, από την Uxcel We Use Too Many Damn Modals: UX Guidelines, από τον Adrian Egger Modal & Nonmodal Dialogs, της Therese Fessenden Modern Enterprise UI Design: Modal Dialogs, του James Jacobs Modals in Design Systems
