Udostępnij przez


Przycisków

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.

Za pomocą przycisku radiowego użytkownicy mogą wybierać spośród zestawu wzajemnie wykluczających się opcji powiązanych. Użytkownicy mogą wybrać jedną i tylko jedną opcję. Przyciski radiowe są tak zwane, ponieważ działają jak ustawienia wstępne kanału na urządzeniach radiowych.

zrzut ekranu przedstawiający trzy przyciski radiowe

Typowa grupa przycisków radiowych.

Grupa przycisków radiowych zachowuje się jak jedna kontrolka. Tylko wybrany wybór jest dostępny przy użyciu Tab, ale użytkownicy mogą przechodzić przez grupę przy użyciu strzałek.

Nuta

Wytyczne dotyczące układu i nawigacji za pomocą klawiatury są prezentowane w osobnym artykule.

 

Czy jest to właściwa kontrola?

Aby zdecydować, rozważ następujące pytania:

  • Czy kontrolka służy do wybierania jednej opcji z zestawu wzajemnie wykluczających się wyborów? Jeśli nie, użyj innej kontrolki. Aby wybrać wiele opcji, użyj pól wyboru , listy wielokrotnego wyboru lub listy pól wyboru.

  • Czy liczba opcji z zakresu od dwóch do siedmiu? Ponieważ używane miejsce na ekranie jest proporcjonalne do liczby opcji, zachowaj liczbę opcji w grupie z zakresu od dwóch do siedmiu. W przypadku ośmiu lub większej liczby opcji użyj listy rozwijanej lub listy jednoselekcji.

  • Czy pole wyboru byłoby lepszym wyborem? Jeśli istnieją tylko dwie opcje, zamiast tego można użyć jednego pola wyboru. Jednak pola wyboru są odpowiednie tylko do włączania lub wyłączania pojedynczej opcji, natomiast przyciski radiowe mogą być używane do zupełnie różnych alternatyw. 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:

      zrzut ekranu przedstawiający pole wyboru poziomego

      poprawna:

      zrzut ekranu przedstawiający przyciski radiowe poziome/pionowe

      W poprawnym przykładzie wybory nie są przeciwieństwami, więc 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:

      zrzut ekranu pokaż/nie pokazuj przycisków radiowych

      W tym przykładzie opcje nie są wystarczająco ważne, aby używać przycisków radiowych.

      poprawna:

      zrzut ekranu przedstawiający pole wyboru nie pokazuj tego komunikatu

      W tym przykładzie pole wyboru to efektywne wykorzystanie miejsca na ekranie dla tej opcji peryferyjnej.

    • Użyj pola wyboru, jeśli na stronie znajdują się inne pola wyboru.

  • Czy lista rozwijana byłaby lepszym wyborem? Jeśli opcja domyślna jest zalecana dla większości użytkowników w większości sytuacji, przyciski radiowe mogą zwrócić większą uwagę na opcje niż to konieczne.

    • Rozważ użycie listy rozwijanej, jeśli nie chcesz zwracać uwagi na opcje lub nie chcesz zachęcać użytkowników do wprowadzania zmian. Lista rozwijana koncentruje się na bieżącym zaznaczeniu, natomiast przyciski radiowe podkreślają wszystkie opcje w równym stopniu.

      zrzut ekranu o najwyższej jakości jako przycisk domyślny

      W tym przykładzie lista rozwijana koncentruje się na bieżącym zaznaczeniu i zniechęca użytkowników do wprowadzania zmian.

    • Rozważ listę rozwijaną, jeśli na stronie znajdują się inne listy rozwijane.

  • Czy zestaw przycisków poleceń, linków poleceń lub przycisku podziału jest lepszym wyborem? Jeśli przyciski radiowe są używane tylko do wpływania na sposób wykonywania polecenia, często lepiej jest przedstawić odmiany poleceń. Dzięki temu użytkownicy mogą wybrać odpowiednie polecenie z jedną interakcją.

  • Czy opcje prezentują opcje programu, a nie dane? Wartości opcji nie powinny być oparte na kontekście ani na innych danych. W przypadku danych użyj listy rozwijanej lub listy z pojedynczym wyborem.

  • Jeśli kontrolka jest używana na stronie kreatora lub panelu sterowania, czy kontrolka jest odpowiedzią na instrukcję główną i czy użytkownicy mogą później zmienić wybór? Jeśli tak, rozważ użycie linków poleceń zamiast przycisków radiowych w celu zwiększenia wydajności interakcji.

  • Czy wartości nieliczbowe? W przypadku danych liczbowych użyj pól tekstowych , list rozwijanych lub suwaków .

Wytyczne

Ogólne

  • Wyświetl opcje w kolejności logicznej, takie jak najbardziej prawdopodobne, aby wybrać najmniej, najprostszą operację najbardziej złożoną lub najmniej ryzyko dla większości. Kolejność alfabetyczna nie jest zalecana, ponieważ jest zależna od języka i dlatego nie jest lokalizowalna.

  • Jeśli żadna z opcji nie jest prawidłowym wyborem, dodaj inną opcję, aby odzwierciedlić ten wybór, takie jak Brak lub Nie ma zastosowania.

  • Preferuj wyrównanie przycisków radiowych w pionie zamiast poziomo. Wyrównanie w poziomie jest trudniejsze do odczytania i zlokalizowania.

    poprawna:

    zrzut ekranu przedstawiający wyrównanie pionowych przycisków radiowych

    W tym przykładzie przyciski radiowe są wyrównane w pionie.

    niepoprawne:

    zrzut ekranu przedstawiający wyrównanie poziomego przycisku radiowego

    W tym przykładzie wyrównanie w poziomie jest trudniejsze do odczytania.

  • ponownie rozważyć użycie pól grupowych do organizowania grup przycisków radiowych— często powoduje to niepotrzebne zaśmiecanie ekranu.

  • Nie używaj etykiet przycisków radiowych jako etykiet pól grupowych.

  • Nie używaj zaznaczenia przycisku radiowego, aby:

    • Wykonywanie poleceń.
    • Wyświetl inne okna, takie jak okno dialogowe, aby zebrać więcej danych wejściowych.
    • Dynamiczne pokazywanie lub ukrywanie innych kontrolek związanych z wybraną kontrolką (czytniki zawartości ekranu nie mogą wykryć takich zdarzeń). Można jednak dynamicznie zmieniać tekst na podstawie zaznaczenia.

Kontrolki podrzędne

  • Umieść kontrolki podrzędne z prawej strony lub poniżej (wcięcie, opróżnij etykietą przycisku radiowego) przycisk radiowy i jego etykietę. Zakończ etykietę przycisku radiowego dwukropkiem.

    zrzut ekranu kontrolki po prawej stronie etykiety

    W tym przykładzie przycisk radiowy i jego podrzędna kontrola współdzielą etykietę przycisku radiowego i jego klucz dostępu. W takim przypadku strzałek przenoszą fokus z przycisku radiowego do podrzędnego pola tekstowego.

  • Pozostaw włączone zależne pola tekstowe z możliwością edycji i listy rozwijane, jeśli udostępniają etykietę przycisku radiowego. Gdy użytkownicy wpiszą lub wkleją dowolne elementy w polu, zaznacz odpowiednią opcję automatycznie. Upraszcza to interakcję.

    zrzut ekranu okna dialogowego zakresu stron z polem tekstowym

    W tym przykładzie wprowadzenie numeru strony powoduje automatyczne wybranie pozycji Strony.

  • Unikaj zagnieżdżania przycisków radiowych z innymi przyciskami radiowymi lub polami wyboru. Jeśli to możliwe, zachowaj wszystkie opcje na tym samym poziomie.

    poprawna:

    zrzut ekranu przedstawiający przyciski radiowe wyrównane do lewej

    W tym przykładzie opcje są na tym samym poziomie.

    niepoprawne:

    zrzut ekranu przedstawiający zagnieżdżone przyciski radiowe

    W tym przykładzie użycie opcji zagnieżdżonych zwiększa niepotrzebną złożoność.

  • Jeśli zagnieżdżasz przyciski radiowe z innymi przyciskami radiowymi lub polami wyboru, wyłączyć te kontrolki podrzędne do momentu wybrania opcji wysokiego poziomu. To pozwala uniknąć nieporozumień co do znaczenia kontroli podrzędnej.

Wartości domyślne

  • Ponieważ grupa przycisków radiowych reprezentuje zestaw wzajemnie wykluczających się wyborów, zawsze mieć jeden przycisk radiowy wybrany domyślnie. Wybierz najbezpieczniejszą opcję (aby zapobiec utracie dostępu do danych lub systemu) oraz najbezpieczniejszą i prywatną. Jeśli bezpieczeństwo i zabezpieczenia nie są czynnikami, wybierz najbardziej prawdopodobną lub wygodną opcję.

  • Wyjątki: nie ma wyboru domyślnego, jeśli:

    • Nie ma akceptowalnej opcji domyślnej dla bezpieczeństwa, zabezpieczeń lub powodów prawnych, dlatego użytkownik musi dokonać wyraźnego wyboru. Jeśli użytkownik nie dokona wyboru, wyświetl komunikat o błędzie, aby wymusić jego użycie.
    • Interfejs użytkownika musi odzwierciedlać bieżący stan, a opcja nie została jeszcze ustawiona. Wartość domyślna niepoprawnie oznacza, że użytkownik nie musi dokonać wyboru.
    • Celem jest zebranie niebiałych danych. Wartości domyślne to stronnicza kolekcja danych.
    • Grupa przycisków radiowych reprezentuje właściwość w stanie mieszanym, co ma miejsce podczas wyświetlania właściwości dla wielu obiektów, które nie mają tego samego ustawienia. Nie wyświetlaj w tym przypadku komunikatu o błędzie, ponieważ każdy obiekt ma prawidłowy stan.
  • Ustaw pierwszą opcję domyślną, ponieważ użytkownicy często tego oczekują — chyba że kolejność nie jest logiczna. W tym celu może być konieczne zmianę etykiet opcji.

    niepoprawne:

    zrzut ekranu ostatniego przycisku radiowego jako opcja domyślna

    W tym przykładzie opcja domyślna nie jest pierwszą opcją.

    poprawna:

    zrzut ekranu pierwszego przycisku radiowego jako domyślny

    W tym przykładzie etykiety opcji są zmieniane tak, aby pierwsza opcja została wybrana jako domyślna.

zrzut ekranu przedstawiający określanie rozmiaru i odstępów przycisków radiowych

Zalecane ustalanie rozmiaru i odstępy dla przycisków radiowych.

Etykiety

Etykiety przycisków radiowych

  • Oznacz każdy przycisk radiowy.
  • Przypisz unikatowy klucz dostępu do każdej etykiety. Aby uzyskać wskazówki, zobacz Klawiatura.

  • Użyj wielkich liter w stylu zdania.

  • Zapisz etykietę jako frazę, a nie jako zdanie i nie używaj końcowej interpunkcji.

    • Wyjątek: Jeśli etykieta przycisku radiowego również oznacza podrzędną kontrolkę, która jest po niej zgodna, zakończ etykietę dwukropkiem.
  • Użyj fraz równoległych i spróbuj zachować długość o tej samej długości dla wszystkich etykiet.

  • 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. Na przykład użyj polecenia nie zamiast nie, a drukuj zamiast drukować.

  • 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.

    zrzut ekranu przycisków radiowych z tekstem objaśniającym

    W tym przykładzie opcje są wyjaśnione przy użyciu oddzielnych kontrolek tekstu statycznego.

    Nuta

    Dodanie wyjaśnienia do jednego przycisku radiowego nie oznacza, że musisz podać wyjaśnienia dla wszystkich przycisków radiowych. 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.

     

  • Jeśli opcja jest zdecydowanie zalecana, dodaj do etykiety "(zalecane)". Pamiętaj, aby dodać etykietę kontrolki, a nie do notatek uzupełniających.

  • Jeśli opcja jest przeznaczona tylko dla użytkowników zaawansowanych, dodaj znak "(advanced)" 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 za pomocą przycisku radiowego.

  • 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.

Etykiety grup przycisków radiowych

  • Użyj etykiety grupy, aby wyjaśnić cel grupy, a nie sposób dokonać wyboru. Załóżmy, że użytkownicy wiedzą, jak używać przycisków radiowych. Na przykład nie należy powiedzieć "Wybierz jedną z następujących opcji".

  • Wszystkie grupy przycisków radiowych potrzebują etykiet. Napisz etykietę jako wyraz lub frazę, a nie jako zdanie, kończąc dwukropkiem przy użyciu tekstu statycznego lub pola grupy.

    Wyjątek: Pomiń etykietę, jeśli jest to jedynie ponowne utworzenie głównej instrukcji okna dialogowego. W tym przypadku główna instrukcja przyjmuje dwukropek (chyba że jest to pytanie) i klucz dostępu (jeśli istnieje).

    dopuszczalne :

    zrzut ekranu z nadmiarową etykietą grupy przycisków radiowych

    W tym przykładzie etykieta grupy przycisków radiowych jest tylko odtworzeniem instrukcji głównej.

    lepiej:

    zrzut ekranu głównego przycisku radiowego tylko

    W tym przykładzie etykieta nadmiarowa jest usuwana, więc główna instrukcja przyjmuje dwukropek.

  • Nie przypisuj klucza dostępu do etykiety. Nie jest to konieczne i sprawia, że inne klucze dostępu są trudniejsze do przypisania.

    • Wyjątek: Jeśli nie wszystkie kontrolki mogą mieć unikatowe klucze dostępu, możesz przypisać klucz dostępu do etykiety zamiast poszczególnych kontrolek. Aby uzyskać więcej informacji, zobacz Klawiatura.

Dokumentacja

W przypadku odwoływania się do przycisków radiowych:

  • Użyj dokładnego tekstu etykiety, w tym jego wielkości liter, ale nie dołączaj podkreślenia ani dwukropka klucza dostępu.
  • W programowaniu i innych dokumentach technicznych należy odwoływać się do przycisków radiowych jako przycisków radiowych. Wszędzie indziej używaj przycisków opcji, szczególnie w dokumentacji użytkownika.
  • Aby opisać interakcję z użytkownikiem, użyj kliknięcia.
  • 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: kliknij bieżącą stronę, a następnie kliknij przycisk OK.