Gdy są używane prawidłowo, mogą ułatwić użytkownikowi pracę podczas wykonywania zadania. Gdy są używane nieprawidłowo, mogą przeszkadzać w zadaniu użytkownika. Oto kilka sprawdzonych metod, które pomogą w zaprojektowaniu modalnych okien przyjaznych dla użytkownika.
Modalne okna
Okno modalne jest dodatkowym oknem, które otwiera się nad głównym.
Użytkownicy muszą wchodzić w interakcje z nim, zanim będą mogli wykonać swoje zadanie i powrócić do głównego okna.
Powinieneś używać okien modalnych, gdy są kroki, które użytkownik musi wykonać, zanim zadanie zostanie ukończone.
Używanie okna modalnego zamiast pełnej strony pozwala użytkownikom zachować kontekst swojego zadania.
Dołącz wyraźny, widoczny tytuł pasujący do klikniętego przycisku
Po otwarciu okna modalnego ważne jest, aby użytkownicy wiedzieli, skąd pochodzi. Twoje okno modalne powinno zawierać tytuł pasujący do klikniętego przycisku, który je otworzył. Pokazuje to spójne zachowanie i mówi im, jakie zadania wykonują.
Umieść przycisk zamykania wysokiego kontrastu w górnym rogu
Zamykanie okna modalnego, kiedy jest to konieczne. Użyj konwencjonalnej ikony "X" dla przycisku zamknięcia. Przycisk zamykania o wysokim kontraście pozwoli użytkownikom lepiej widzieć wyjście. Twój przycisk zamknięcia powinien być w kształcie i kolorze.
Zezwalaj użytkownikom na zamykanie okna za pomocą klawisza ESC
Ze względów związanych z dostępnością okno modalne powinno się zamknąć, gdy użytkownik naciśnie klawisz ESC. Powinieneś także zezwolić użytkownikom na przechodzenie przez kontrolki w oknie modalnym, jeśli je posiadasz. Umożliwi to użytkownikom, którzy używają czytników ekranu i klawiatur do poruszania się po interfejsie.
Zamknij okno, gdy użytkownik kliknie poza nim
Jeśli użytkownicy nie znajdą przycisku zamykania, pozwól im zamknąć okno, klikając poza nim. To sprawia, że wyjście jest łatwe i intuicyjne, ponieważ użytkownicy często klikają główne okno, aby do niego wrócić. Ale nie chcesz pozwalać użytkownikom na wyjście w ten sposób, jeśli wprowadzają informacje do formularza, w przeciwnym razie mogliby je utracić.
W razie potrzeby użyj przycisków "Anuluj"
Twoje okno modalne będzie wymagało przycisku "Anuluj", jeśli użytkownik wykonuje zadanie, w którym wprowadza informacje. Jeśli w twoim modalu znajduje się formularz, ważne jest, aby użytkownik nie kliknął poza oknem, aby je zamknąć. Aby temu zapobiec, zaoferuj użytkownikom przycisk "Anuluj" jako jedyny sposób, w jaki użytkownik może zamknąć okno.
Umieść cień lub przezroczystą nakładkę za nim
Gdy otworzy się okno modalne, użytkownicy muszą wiedzieć, że jest to drugie okno nałożone na główne.
Ułatw użytkownikom zapoznanie się z tym trybem za pomocą cienia lub przezroczystej nakładki za oknem.
Upewnij się, że przezroczysty arkusz nie jest zbyt nieprzejrzysty, aby użytkownicy mogli nadal widzieć główne okno.
Jeśli jest zbyt ciemno, użytkownicy mogą się pomylić myśląc, że opuścili główne okno.
Nie zwiększaj rozmiaru okna ani jego szerokości
Jeśli twoje okno modalne jest wyższe lub szersze niż ekran użytkownika, użytkownik będzie musiał przewijać, aby zobaczyć całość. Jest to szczególnie frustrujące dla użytkowników mobilnych. Ustaw okna modalne na odpowiedni rozmiar na ekranie użytkownika, aby nie trzeba było przewijać.
Niemodalne okna
Okno bez modalu jest również dodatkowym oknem, które otwiera się w głównym oknie. Jednak różnica polega na tym, że użytkownicy nie muszą wchodzić w interakcje z nim przed powrotem do głównego okna. Użytkownicy mogą kontynuować pracę z otwartym oknem modalowym. Nie wymaga ich natychmiastowej uwagi.
Używaj, gdy użytkownicy muszą odwoływać się do informacji w oknie głównym
Gdy użytkownicy muszą porównać lub odwołać się do informacji w oknie głównym, okno modalne nie będzie działać. Powinieneś użyć w tej sytuacji okna bez modalu, ponieważ zajmuje ono niewielką część ekranu i umożliwia użytkownikom przeglądanie i pracę w głównym oknie po otwarciu. Użytkownicy mogą jednocześnie wchodzić w interakcje z ekranem głównym jak i oknem.
Zrób tak mały, jak to możliwe
Okna tego typu zajmują bardzo mało miejsca w głównym oknie. Spraw, aby okno było tak małe i zrozumiałe jak to możliwe, aby użytkownicy mogli nadal wchodzić w interakcję z głównym oknem. Główne okno jest zawsze głównym celem zadania użytkownika.
Przymocuj go do krawędzi głównego okna
Okno bez modalu powinno wyświetlać się, dopóki użytkownik go nie zamknie. Dołączenie go do bocznej krawędzi głównego okna sprawia, że jest on widoczny dla użytkowników. Mogą przewijać i nadal wchodzić w interakcję z oknem, gdy zajdzie taka potrzeba.
Użyj przycisku "X" dla przycisku zamykania.
Okno bez modalu nie potrzebuje tylu wyjść, jak okno modalne. Prosty przycisk ikony "X" powinien wystarczyć. Ustaw przycisk jako widoczny i umieść go w prawym górnym rogu.
Końcowe przemyślenia
Okna modalne są efektywnym elementem interfejsu w przypadku poprawnego zaprojektowania i prawidłowego korzystania z nich.
Mogą pomóc użytkownikowi przyspieszyć i ułatwić wykonywanie zadań.
Ale mogą też ich irytować, gdy są źle zrobione.
Wiedząc, jak projektować okna modalne, będziesz mógł ich używać w sposób, który Cię nie denerwuje.
Pamiętaj o tych najlepszych praktykach, aby projektowane przez Ciebie modalne okna zbliżały użytkowników do sukcesu.