Prawdopodobnie byłeś tam już wcześniej. Jak wybrać pomiędzy pokazaniem modalu użytkownikom, a kiedy przekierować ich na osobną, nową stronę? I czy to w ogóle ma znaczenie? Właściwie to prawda. Decyzja wpływa na przepływ użytkowników, ich kontekst, możliwość wyszukiwania szczegółów, a co za tym idzie, częstotliwość błędów i realizację zadań. Obie opcje mogą być destrukcyjne i frustrujące – w niewłaściwym czasie i w niewłaściwym miejscu. Więc lepiej zróbmy to dobrze. Zobaczmy, jak to zrobić. Modale a okna dialogowe, nakładki i lightboxy Chociaż często mówimy o pojedynczym modalnym komponencie interfejsu użytkownika, często ignorujemy drobne, skomplikowane niuanse pomiędzy różnymi typami modalności. W rzeczywistości nie każdy mod jest taki sam. Modale, okna dialogowe, nakładki i lightboxy — wszystkie brzmią podobnie, ale w rzeczywistości są zupełnie inne:
DialogOgólne określenie „rozmowy” (użytkownik ↔ system). Nakładka Mały panel treści wyświetlany na górze strony. ModalUser musi wchodzić w interakcję z nakładką i wyłączonym tłem. Użytkownik niemodalny musi wchodzić w interakcję z włączoną nakładką i tłem. LightboxPrzyciemnione tło, aby skupić uwagę na modalu.
Jak podkreśla Anna Kaley, większość nakładek pojawia się w nieodpowiednim momencie, przeszkadza użytkownikom w kluczowych zadaniach, używa wulgarnego języka i zakłóca płynność działania użytkowników. Są z natury zakłócające i zazwyczaj charakteryzują się dużą dotkliwością, ale nie ma takiej potrzeby.
Z pewnością użytkownicy muszą zostać spowolnieni i przerwani, jeśli konsekwencje ich działań mają duży wpływ, ale w większości scenariuszy działania niemodalne są znacznie subtelniejsze i bardziej przyjazne, aby zwrócić na coś uwagę użytkownika. Jeśli już, zawsze sugeruję, aby było to ustawienie domyślne. Modale → Dla pojedynczych, samodzielnych zadań Jako projektanci często odrzucamy modyfikacje jako nieistotne i irytujące — i często tak jest! – ale one też mają swoją wartość. Mogą być bardzo pomocne, ostrzegając użytkowników o potencjalnych błędach lub pomagając im uniknąć utraty danych. Mogą także pomóc w wykonywaniu powiązanych działań lub drążeniu szczegółów bez zakłócania bieżącego stanu strony. Jednak największą zaletą modułów modalnych jest to, że pomagają użytkownikom zachować kontekst bieżącego ekranu. Nie oznacza to tylko interfejsu użytkownika, ale także edytowane dane wejściowe, pozycję przewijania, stan akordeonów, wybór filtrów, sortowanie i tak dalej.
Czasami użytkownicy muszą szybko potwierdzić wybór (np. filtry jak pokazano powyżej), a następnie natychmiast kontynuować. Automatyczne zapisywanie może oczywiście osiągnąć to samo, ale nie zawsze jest potrzebne lub pożądane. Blokowanie interfejsu użytkownika często nie jest dobrym pomysłem. Mody nie są jednak używane do żadnych zadań. Zazwyczaj używamy ich do pojedynczych, samodzielnych zadań, w których użytkownicy powinni wskoczyć, wykonać zadanie, a następnie wrócić tam, gdzie byli. Nic dziwnego, że sprawdzają się dobrze w przypadku krótkich interakcji o wysokim priorytecie (np. alertów, destrukcyjnych działań, szybkich potwierdzeń). Kiedy mody pomagają: 🚫 Moduły modalne są często uciążliwe, inwazyjne i mylące.🚫 Utrudniają porównywanie i kopiowanie i wklejanie. ✅ Jednak moduły modalne pozwalają użytkownikom zachować wiele kontekstów. ✅ Przydatne, aby zapobiec nieodwracalnym błędom i utracie danych. ✅ Przydatne, jeśli wysłanie użytkowników na nową stronę byłoby uciążliwe. ✅ Pokaż modal tylko wtedy, gdy użytkownicy cenią sobie zakłócenie. ✅ Domyślnie preferuj nieblokujące się okna dialogowe („niemodalne”). ✅ Pozwól użytkownikom minimalizować, ukrywać lub przywracać okno dialogowe później. ✅ Użyj modalu, aby spowolnić użytkowników, np. zweryfikować złożone dane wejściowe. ✅ Daj wyjście za pomocą „Zamknij”, klawisza ESC lub kliknij poza polem. Strony → Dla złożonych, wieloetapowych przepływów pracy Kreatory lub nawigacja na kartach w modułach nie sprawdzają się zbyt dobrze, nawet w złożonych produktach dla przedsiębiorstw — tam panele boczne lub szuflady zazwyczaj sprawdzają się lepiej. Problemy zaczynają się, gdy użytkownicy muszą porównać punkty danych lub odwoływać się do nich — jednak moduły modalne blokują to zachowanie, więc zamiast tego ponownie otwierają tę samą stronę na wielu kartach.
W przypadku bardziej złożonych przepływów i procesów wieloetapowych najlepiej sprawdzają się samodzielne strony. Strony działają też lepiej, gdy wymagają pełnej uwagi użytkownika, a odwoływanie się do poprzedniego ekranu nie jest zbyt pomocne. Szuflady działają w przypadku zadań podrzędnych, które są zbyt złożone dla prostego modalu, ale nie wymagają nawigacji na całej stronie. Kiedy unikać modalności: 🚫 Unikaj modów w przypadku komunikatów o błędach. 🚫 Unikaj modów w przypadku powiadomień o funkcjach. 🚫 Unikaj modów w celu wdrożenia. 🚫 Unikaj modów w przypadku złożonych, długich, wieloetapowych zadań. 🚫 Unikaj wielu zagnieżdżonych modów i zamiast tego używaj opcji Poprzedni/Następny. 🚫 Unikaj modułów modalnych uruchamianych automatycznie, jeśli nie jest to absolutnie konieczne. Unikaj obuDo powtarzających się zadań W przypadku wielu złożonych, wymagających wielu zadań produktów użytkownicy będą wielokrotnie wykonywać te same zadania. Tam zarówno modalne, jak i nowe nawigacje na stronach powodują problemy, ponieważ zakłócają przepływ lub zmuszają użytkowników do gromadzenia brakujących danych między wszystkimi różnymi kartami lub widokami. Zbyt często użytkownicy kończą z nieudanym doświadczeniem, pełnym niekończących się potwierdzeń, przesadnych ostrzeżeń, pełnych instrukcji lub po prostu brakujących punktów odniesienia. Jak wspomniał Saulius Stebulis, w takich scenariuszach sekcje rozwijalne lub edycja lokalna często sprawdzają się lepiej — dzięki nim zadanie jest zakotwiczone na bieżącym ekranie. W praktyce w wielu scenariuszach użytkownicy nie wykonują swoich zadań w izolacji. Muszą wyszukiwać dane, kopiować i wklejać wartości, udoskonalać wpisy w różnych miejscach lub po prostu przeglądać podobne rekordy podczas wykonywania swoich zadań. Nakładki i szuflady są bardziej pomocne w utrzymaniu dostępu do danych w tle podczas wykonywania zadania. Dzięki temu kontekst zawsze pozostaje na swoim miejscu, można go odwołać lub skopiować i wkleić. Zapisuj moduły i nawigację po stronie na momenty, w których przerwa naprawdę dodaje wartość — szczególnie aby zapobiec krytycznym błędom. Modale a strony: drzewo decyzyjne Jakiś czas temu Ryan Neufeld przygotował bardzo pomocny przewodnik, który miał pomóc projektantom w wyborze między modułami a stronami. Zawiera poręczną ściągawkę w formacie PNG i szablon Dokumentu Google z pytaniami podzielonymi na 7 sekcji. Jest długi, niezwykle dokładny, ale bardzo łatwy do zrozumienia:
Może to wyglądać zniechęcająco, ale jest to dość prosty proces składający się z 4 kroków:
Kontekst ekranu. Najpierw sprawdzamy, czy użytkownicy muszą zachować kontekst ekranu bazowego. Złożoność i czas trwania zadania. Prostsze, skoncentrowane i nierozpraszające zadania mogą wymagać działania modalnego, ale długie i złożone przepływy wymagają strony. Odniesienie do strony bazowej. Następnie sprawdzamy, czy użytkownicy często muszą odwoływać się do danych w tle lub czy zadaniem jest proste potwierdzenie lub wybór. Wybór właściwej nakładki. Wreszcie, jeśli nakładka jest rzeczywiście dobrą opcją, pomaga nam wybrać pomiędzy modalną a niemodalną (skłonną do niemodalnej).
Podsumowanie Jeśli to możliwe, unikaj blokowania całego interfejsu użytkownika. Mieć pływające okno dialogowe, częściowo zakrywające interfejs użytkownika, ale umożliwiające nawigację, przewijanie i kopiowanie i wklejanie. Lub pokaż zawartość modalu jako boczną szufladę. Lub zamiast tego użyj pionowego akordeonu. Lub przenieś użytkowników na osobną stronę, jeśli chcesz pokazać wiele szczegółów. Jeśli jednak chcesz zwiększyć wydajność i szybkość użytkowników, za wszelką cenę unikaj modalności. Używaj ich, aby spowalniać użytkowników, skupiać ich uwagę i zapobiegać błędom. Jak zauważyła Therese Fessenden, nikt nie lubi, gdy mu przeszkadza się, ale jeśli już musisz, upewnij się, że jest to absolutnie warte swojej ceny. Poznaj „wzorce projektowe inteligentnych interfejsów” Całą sekcję dotyczącą modów i alternatyw znajdziesz w Smart Interface Design Patterns, naszym 15-godzinnym kursie wideo zawierającym 100 praktycznych przykładów z rzeczywistych projektów — wraz ze szkoleniem na żywo z zakresu UX jeszcze w tym roku. Wszystko, od mega rozwijanych menu po złożone tabele korporacyjne — z 5 nowymi segmentami dodawanymi co roku. Przejdź do bezpłatnego podglądu. Użyj kodu BIRDIE, aby zaoszczędzić 15% zniżki. Poznaj wzorce projektowania inteligentnych interfejsów, nasz kurs wideo na temat projektowania interfejsów i UX.
Szkolenie wideo + UXTylko wideoWideo + szkolenie UX495,00 $ 699,00
Uzyskaj szkolenie wideo + UX 25 lekcji wideo (15 godz.) + szkolenie UX na żywo. 100-dniowa gwarancja zwrotu pieniędzy. Tylko wideo300,00 USD 395,00 USD
Skorzystaj z kursu wideo40 lekcji wideo (15h). Aktualizowany co roku. Dostępny również jako pakiet UX z 2 kursami wideo.
Przydatne zasoby
Różne typy wyskakujących okienek, autor: Anna Kaley Najlepsze praktyki projektowania modułów interfejsu użytkownika, autorstwa Uxcel Używamy zbyt wielu cholernych modów: wytyczne dotyczące UX, autor: Adrian Egger Dialogi modalne i niemodalne — Therese Fessenden Projekt nowoczesnego interfejsu użytkownika przedsiębiorstwa: okna dialogowe modalne — James Jacobs Modale w systemach projektowych
