Pola wyboru
Nuta
Ten przewodnik projektowania został utworzony dla systemu Windows 7 i nie został zaktualizowany dla nowszych wersji systemu Windows. Większość wskazówek nadal ma zastosowanie w zasadzie, ale prezentacja i przykłady nie odzwierciedlają naszych bieżących wskazówek dotyczących projektowania.
Pole wyboru umożliwia użytkownikom podjęcie decyzji między dwoma wyraźnie przeciwnymi wyborami. Etykieta pola wyboru wskazuje wybrany stan, natomiast znaczenie wyczyszczonego stanu musi być jednoznacznym przeciwieństwem wybranego stanu. W związku z tym pola wyboru powinny być używane tylko do przełączania opcji włączonej lub wyłączonej albo do zaznaczenia lub usunięcia zaznaczenia elementu.
Typowa grupa pól wyboru.
Nuta
Wskazówki dotyczące układu przedstawiono w osobnym artykule.
Czy jest to właściwa kontrola?
Aby zdecydować, rozważ następujące pytania:
Czy pole wyboru służy do przełączania opcji włączonej lub wyłączonej, czy do zaznaczenia lub usunięcia zaznaczenia elementu? Jeśli nie, użyj innej kontrolki.
Czy wybrane i wyczyszczone stany są jasne i jednoznaczne? Jeśli nie, użyj przycisków radiowych lub listy rozwijanej , aby można było oznaczyć stany niezależnie.
W przypadku użycia w grupie, czy grupa składa się z niezależnych wyborów, z których użytkownicy mogą wybrać zero lub więcej? Jeśli nie, rozważ kontrolek do wyboru zależnych, takich jak przyciski radiowe i widoki drzewa pól wyboru.
W przypadku użycia w grupie czy grupa składa się z wyborów zależnych, z których użytkownicy muszą wybrać co najmniej jeden? Jeśli tak, użyj grupy pól wyboru i obsłuż błąd, gdy żadna z opcji nie jest zaznaczona.
Czy liczba opcji w grupie wynosi 10 lub mniej? Ponieważ używane miejsce na ekranie jest proporcjonalne do liczby opcji, zachowaj liczbę pól wyboru do 10 lub mniej. Aby uzyskać więcej niż 10 opcji, użyj listy pól wyboru .
Czy przycisk radiowy byłby lepszym wyborem? Jeśli pola wyboru są odpowiednie tylko do włączania lub wyłączania opcji, przyciski radiowe mogą być używane do zupełnie różnych opcji. Jeśli oba rozwiązania są możliwe:
Użyj przycisków radiowych, jeśli znaczenie wyczyszczonego pola wyboru nie jest całkowicie oczywiste.
niepoprawne:
poziomym
W tym przykładzie przeciwny wybór z obszaru Poziome nie jest jasny, więc pole wyboru nie jest dobrym wyborem.
poprawna:
W tym przykładzie wybory nie są przeciwieństwami, dlatego przyciski radiowe są lepszym wyborem.
Użyj przycisków radiowych na stronach kreatora, aby usunąć alternatywy, nawet jeśli pole wyboru jest w inny sposób akceptowalne.
Użyj przycisków radiowych, jeśli masz wystarczającą ilość miejsca na ekranie, a opcje są wystarczająco ważne, aby być dobrym użyciem tego miejsca na ekranie. W przeciwnym razie użyj pola wyboru lub listy rozwijanej.
niepoprawne:
W tym przykładzie opcje nie są wystarczająco ważne, aby używać przycisków radiowych.
poprawna:
W tym przykładzie pole wyboru to efektywne wykorzystanie miejsca na ekranie dla tej opcji peryferyjnej.
Użyj pola wyboru, jeśli w oknie znajdują się inne pola wyboru.
Czy opcja przedstawia opcję programu, a nie dane? Wartości opcji nie powinny być oparte na kontekście ani na innych danych. W przypadku danych użyj listy pól wyboru lub listy wielokrotnego wyboru.
Wzorce użycia
Pola wyboru mają kilka wzorców użycia:
Wytyczne
Ogólne
pola wyboru Powiązane z grupą. Połącz powiązane opcje i oddzielne niepowiązane opcje w grupy 10 lub mniej, używając wielu grup w razie potrzeby.
Przykład grup powiązanych, niezależnych opcji.
ponownie rozważyć użycie pól grupowych w celu organizowania grup pól wyboru to często powoduje niepotrzebne zaśmiecanie ekranu.
listy pól wyboru w kolejności logicznej, takich jak grupowanie opcji wysoce powiązanych lub umieszczanie najbardziej typowych opcji jako pierwsze, lub po innych naturalnych postępach. Kolejność alfabetyczna nie jest zalecana, ponieważ jest zależna od języka, a zatem nie jest lokalizowalna.
Wyrównaj pola wyboru w pionie, a nie poziomo. Wyrównanie w poziomie jest trudniejsze do odczytania.
poprawna:
W tym przykładzie pola wyboru są poprawnie wyrównane.
niepoprawne:
W tym przykładzie wyrównanie w poziomie jest trudniejsze do odczytania.
Nie używaj stanu mieszanego do reprezentowania trzeciego stanu. Stan mieszany służy do wskazywania, że dla niektórych jest ustawiona opcja, ale nie wszystkie obiekty podrzędne. Użytkownicy nie powinni mieć możliwości ustawienia stanu mieszanego bezpośrednio, a nie stanu mieszanego jest odbiciem obiektów podrzędnych. Stan mieszany nie jest używany jako trzeci stan dla pojedynczego elementu. Aby reprezentować trzeci stan, użyj przycisków radiowych lub listy rozwijanej.
niepoprawne:
W tym przykładzie stan mieszany wskazuje, że usługa Motyw nie jest zainstalowana.
poprawna:
W tym przykładzie użytkownicy mogą wybrać jedną z trzech przejrzystych opcji.
Kliknięcie pola wyboru stanu mieszanego powinno przechodzić przez wszystkie zaznaczone, wyczyszczone i oryginalne stany mieszane. W przypadku przebaczenia ważne jest, aby móc przywrócić oryginalny stan mieszany, ponieważ ustawienia mogą być złożone lub nieznane użytkownikowi. W przeciwnym razie jedynym sposobem przywrócenia stanu mieszanego z ufnością byłoby anulowanie zadania i rozpoczęcie od nowa.
Nie używaj pól wyboru jako wskaźnika postępu. Zamiast tego użyj wskaźnika postępu .
niepoprawne:
W tym przykładzie pola wyboru są niepoprawnie używane jako wskaźnik postępu.
poprawna:
Przykład typowego paska postępu.
Pokaż wyłączone pola wyboru przy użyciu poprawnego stanu zaznaczenia. Mimo że użytkownicy nie mogą ich zmieniać, wyłączone pola wyboru przekazują informacje, aby były zgodne z wynikami.
niepoprawne:
W tym przykładzie opcja "Zawsze odczytaj tę sekcję na głos" powinna zostać wyczyszczone, ponieważ sekcja nie jest odczytywana, gdy opcja jest wyłączona.
Nie używaj zaznaczenia pola wyboru, aby:
- Wykonywanie poleceń.
- Wyświetl inne okna, takie jak okno dialogowe, aby zebrać więcej danych wejściowych.
- Dynamiczne wyświetlanie innych kontrolek powiązanych z wybraną kontrolką (czytniki zawartości ekranu nie mogą wykryć takich zdarzeń).
Nie pokazuj tego elementu <ponownie>
- Rozważ użycie opcji Nie pokazuj tego elementu <> ponownie, aby umożliwić użytkownikom pomijanie okna dialogowego cyklicznego tylko wtedy, gdy nie ma lepszej alternatywy. Spróbuj określić wcześniej, czy użytkownicy naprawdę potrzebują okna dialogowego; jeśli tak, zawsze wyświetla okno dialogowe, a jeśli tak nie jest, wyeliminuj okno dialogowe.
Aby uzyskać więcej wytycznych i przykładów, zobacz okna dialogowe.
Kontrolki podrzędne
Umieść kontrolki podrzędne z prawej strony lub poniżej (wcięcie, opróżnij z etykietą pola wyboru) pole wyboru i jego etykietę. Zakończ etykietę pola wyboru dwukropkiem.
W tym przykładzie pole wyboru i jego podrzędna kontrola współdzielą etykietę pola wyboru i jego klucz dostępu.
Pozostaw włączone zależne pola tekstowe z możliwością edycji i listy rozwijane, jeśli udostępniają etykietę pola wyboru. Gdy użytkownicy wpiszą lub wkleją dowolne elementy w polu, zaznacz odpowiednią opcję automatycznie. Upraszcza to interakcję.
W tym przykładzie wprowadzenie nagłówka lub stopki powoduje automatyczne wybranie opcji.
Jeśli zagnieżdżasz pola wyboru z przyciskami radiowymi lub innymi polami wyboru, wyłączyć te kontrolki podrzędne do momentu wybrania opcji wysokiego poziomu. Pozwala to uniknąć nieporozumień dotyczących znaczenia mechanizmów kontroli podrzędnych.
Ustaw kontrolki podrzędne na ciągłe pole wyboru przy użyciu pola wyboru w kolejności tabulacji.
Jeśli wybranie opcji oznacza wybranie podrzędnych pól wyboru, jawnie zaznacz te pola wyboru, aby wyczyścić relację.
niepoprawne:
W tym przykładzie pola wyboru podrzędne nie są zaznaczone.
poprawna:
zrzut ekranu
W tym przykładzie zaznaczone są pola wyboru podrzędne, dzięki czemu ich relacja z wybraną opcją jest jasna.
Użyj zależnych pól wyboru, jeśli alternatywy dodają niepotrzebną złożoność. Pola wyboru powinny być niezależnymi opcjami, ale czasami alternatywy, takie jak przyciski radiowe, dodają niepotrzebną złożoność.
poprawna:
W tym przykładzie użycie przycisków radiowych jest dokładne, ale powoduje niepotrzebne złożoność.
lepiej:
W tym przykładzie użycie pól wyboru jest prostsze i umożliwia użytkownikom skupienie się na wybieraniu żądanych opcji zamiast na ich złożonej relacji.
Ważne: zastosuj te wytyczne tylko w bardzo rzadkich okolicznościach, gdy pokazanie zależności zwiększa znaczącą złożoność bez dodawania jasności. W poprzednim przykładzie jest mało prawdopodobne, aby użytkownicy próbowali wybrać zarówno indeks górny, jak i indeks dolny, a jeśli tak, łatwo byłoby zrozumieć, że są to opcje wyłączne.
Wartości domyślne
- Jeśli pole wyboru jest dla opcji użytkownika, ustawić najbezpieczniejszy (aby zapobiec utracie dostępu do danych lub systemu), najbezpieczniejszy i prywatny stan domyślnie. Jeśli bezpieczeństwo i zabezpieczenia nie są czynnikami, wybierz najbardziej prawdopodobną lub wygodną wartość.
Zalecane ustalanie rozmiaru i odstępy
Zalecane ustalanie rozmiaru i odstępy między polami wyboru.
Etykiety
Etykiety pól wyboru
Etykietuj każde pole wyboru.
Przypisz unikatowy klucz dostępu do każdej etykiety. Aby uzyskać wskazówki, zobacz Klawiatura.
Zapisz etykietę jako frazę lub zdanie imperatywne i nie używaj końcowej interpunkcji.
- Wyjątek: Jeśli etykieta pola wyboru również oznacza podrzędną kontrolkę, która jest po niej zgodna, zakończ etykietę dwukropkiem.
Zapisz etykietę tak, aby opisywała wybrany stan pola wyboru.
W przypadku grupy pól wyboru użyj fraz równoległych i spróbuj zachować długość o tej samej długości dla wszystkich etykiet.
W przypadku grupy pól wyboru skoncentruj tekst etykiety na różnicach między opcjami. Jeśli wszystkie opcje mają ten sam tekst wprowadzający, przenieś ten tekst do etykiety grupy.
Użyj fraz dodatnich. Nie frazuj etykiety, aby zaznaczenie pola wyboru nie oznaczało wykonania akcji.
- Wyjątek: nie pokazuj tego elementu <> ponownie pola wyboru.
niepoprawne:
W tym przykładzie opcja nie używa fraz dodatnich.
Opisz tylko opcję z etykietą. Zachowaj krótkie etykiety, aby łatwo było odwoływać się do nich w komunikatach i dokumentacji. Jeśli ta opcja wymaga dalszego wyjaśnienia, podaj wyjaśnienie w statycznym tekście kontrolce przy użyciu pełnych zdań i zakończenia interpunkcji.
Nuta
Dodanie wyjaśnienia do jednego pola wyboru w grupie nie oznacza, że musisz podać wyjaśnienia dla wszystkich pól wyboru w grupie. Podaj odpowiednie informacje w etykiecie, jeśli to możliwe, i użyj wyjaśnień tylko wtedy, gdy jest to konieczne. Nie należy jedynie odpoczniać etykiety pod kątem spójności.
W tym przykładzie etykieta pola wyboru zawiera dodatkowy tekst objaśniający poniżej.
Jeśli opcja jest zdecydowanie zalecana, rozważ dodanie elementu "(zalecane)" do etykiety. Pamiętaj, aby dodać etykietę kontrolki, a nie do notatek uzupełniających.
Jeśli musisz użyć etykiet wielowierszowych, wyrównaj górną część etykiety z polem wyboru.
Nie używaj kontrolki podrzędnej, wartości, które zawiera, ani etykiety jednostek, aby utworzyć zdanie lub frazę. Taki projekt nie jest lokalizowalny, ponieważ struktura zdań różni się w zależności od języka.
niepoprawne:
W tym przykładzie pole tekstowe jest niepoprawnie umieszczone wewnątrz etykiety pola wyboru.
Etykiety grup pól wyboru
Użyj etykiety grupy, aby wyjaśnić cel grupy, a nie sposób dokonać wyboru. Załóżmy, że użytkownicy wiedzą, jak używać pól wyboru. Na przykład nie należy powiedzieć "Wybierz dowolną z następujących opcji".
Kończ każdą etykietę dwukropkiem.
Nie przypisuj klucza dostępu do etykiety. Nie jest to konieczne i sprawia, że inne klucze dostępu są trudniejsze do przypisania.
Aby wybrać co najmniej jedną opcję zależną, wyjaśnij wymaganie etykiety.
poprawna:
W tym przykładzie użytkownicy mogą myśleć, że mogą wybrać tylko jeden wybór.
lepiej:
W tym przykładzie jest jasne, że użytkownicy mogą dokonać więcej niż jednego wyboru.
Dokumentacja
W przypadku odwoływania się do pól wyboru:
Użyj dokładnego tekstu etykiety, w tym jego wielkości liter, ale nie dołączaj podkreślenia ani dwukropka klucza dostępu. Uwzględnij pole wyboru wyrazu.
Pole wyboru należy odwoływać się do pola wyboru, a nie opcji, pola wyboru lub po prostu, ponieważ pole wyboru jest niejednoznaczne dla lokalizatorów.
Aby opisać interakcję z użytkownikiem, użyj opcji wybierz i wyczyść.
Jeśli to możliwe, sformatuj etykietę przy użyciu tekstu pogrubionego. W przeciwnym razie umieść etykietę w cudzysłowie tylko wtedy, gdy jest to wymagane, aby zapobiec nieporozumieniu.
Przykład: zaznacz pole wyboru podkreśleniu.