Przełącz wyświetlanie stanów

Aug 20 2020

Przeprojektowuję zestaw przełączników, w których niektóre z nich można aktywować i dezaktywować za pomocą standardowego wzoru. Jednak niektóre z nich są domyślnie aktywowane ze względu na uprawnienia administratora, ale nie mogą zostać dezaktywowane przez użytkownika . Bieżący wyświetlacz pokazuje te przełączniki w jaśniejszym zielonym kolorze, ale jak powiedziałem, nie można ich klikać. To sprawiło, że poczułem się zdezorientowany podczas analizy zachowania i zakładam, że użytkownicy mogą czuć to samo. Czy uważasz, że istnieje sposób, aby wyświetlić te przełączniki, aby użytkownik wiedział, że są aktywowane, ale ich stanu nie można zmienić? Aplikacja jest responsywna i może być wyświetlana na wielu urządzeniach. Z góry dziękuję!

Odpowiedzi

44 SoorajMV Aug 20 2020 at 18:24

Material Design Pokazuje stan Zablokowany w wyszarzonej wersji, na przykład:

Ale problemem jest dostępność. Użytkownicy z niepełnosprawnością wzroku nie będą w stanie rozróżnić tych dwóch.

Zamiast tego możesz dodać symbol kłódki do przełącznika wraz z mniejszym kolorem krycia i jeśli użytkownik spróbuje z nim wejść w interakcję, podaj podpowiedź z napisem „Zablokowane przez administratora” / „Włączone przez administratora” lub coś w tym stylu.

20 musefan Aug 20 2020 at 18:17

Chociaż „wyblakły” styl wyłączonych kontrolek jest dość standardowy, problem polega na tym, że różnica jest zbyt subtelna, aby użytkownik mógł ją wyraźnie zobaczyć.

Możesz zmienić kolor z zielonego na szary (na przykład), jednak może to spowodować utratę jasności, że w rzeczywistości oznacza on „włączony” (co jest przede wszystkim celem koloru zielonego).

Mając to na uwadze, proponuję, aby w ogóle unikać używania kontrolki do tego celu. Zamiast tego możesz użyć tekstu, aby pokazać stan włączony / wyłączony, bez nieporozumień związanych z używaniem do tego kontrolki. Na przykład:


Alternatywnie, jak sugeruje jcaron, możesz również wyraźnie stwierdzić, że ustawienia zostały skonfigurowane przez administratora. Pomaga to wyjaśnić użytkownikowi, że nie może ich zmienić. Coś takiego:

6 thomic Aug 20 2020 at 18:47

Najpierw musisz być jasny, czy twój przełącznik powinien być tylko do odczytu lub wyłączony.
Oto dobry artykuł na ten temat:https://vaadin.com/docs/v8/framework/articles/ReadOnlyVsDisabledFields.html

W moim ostatnim projekcie użyłem tych stylów, aby zróżnicować stany przełącznika.
Przełączniki są „aktywne i wybrane”, „aktywne”, „wyłączone” i „tylko do odczytu”.