Progresywne mechanizmy kontroli ujawniania

Dzięki kontrolce progresywnego ujawniania użytkownicy mogą wyświetlać lub ukrywać dodatkowe informacje, w tym dane, opcje lub polecenia. Stopniowe ujawnianie promuje prostotę, koncentrując się na podstawowych, ale ujawniając dodatkowe szczegóły zgodnie z potrzebami.

zrzut ekranu przedstawiający

Przykłady progresywnych mechanizmów kontroli ujawnienia.

Czy jest to właściwa kontrola?

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

• Czy użytkownicy muszą zobaczyć informacje w niektórych, ale nie wszystkich scenariuszach, czy też niektóre, ale nie przez cały czas? Jeśli tak, wyświetlanie informacji przy użyciu stopniowego ujawniania upraszcza środowisko odniesienia, ale umożliwia użytkownikom łatwe uzyskiwanie dostępu do informacji.

  

  W tym przykładzie aplikacja Zabezpieczenia Systemu Windows wyświetla cały czas ważny stan zabezpieczeń, ale używa progresywnego ujawniania do wyświetlania szczegółów na żądanie.

• Czy jeśli informacje są domyślnie wyświetlane, czy użytkownicy mogą je ukryć? Czy istnieją scenariusze, w których użytkownicy będą potrzebować więcej miejsca? Czy użytkownicy są wystarczająco zmotywowani do dostosowywania interfejsu użytkownika? Jeśli nie, wyświetl informacje bez użycia stopniowego ujawniania.

  niepoprawne:

  

  W tym przykładzie użytkownicy nie będą motywowani do ukrywania informacji.

• Czy dodatkowe informacje są zaawansowane, istotne, złożone lub powiązane z niezależnym podzadaniem? Jeśli tak, rozważ wyświetlenie informacji w osobnym oknie przy użyciu przycisków poleceń lub linków zamiast korzystać z progresywnej kontroli ujawniania. (Dodatkowe informacje są zaawansowane, jeśli są przeznaczone dla użytkowników zaawansowanych. Jest to skomplikowane, jeśli sprawia, że inne informacje są trudne do odczytania lub rozłożyć).

  

  W tym przykładzie informacje o nazwie i wydawcy oprogramowania mają znaczenie przede wszystkim dla zaawansowanych użytkowników, dlatego są używane linki do oddzielnych okien.

• Czy dodatkowe informacje są fragmentem zdania lub zdania, który opisuje, co robi element lub jak można go użyć? Jeśli tak, rozważ użycie etykietki narzędzia lub etykietki informacji.

• Czy dodatkowe informacje związane z bieżącym zadaniem, ale niezależne od aktualnie wyświetlanych informacji? Jeśli tak, rozważ użycie kart . Jednak listy zwijane są często preferowane do kart, ponieważ są bardziej elastyczne i skalowalne.

• Czy wyświetlanie lub ukrywanie dodatkowych informacji zasadniczo jest filtrem danych? Jeśli tak, rozważ użycie listy rozwijanej lub pól wyboru zamiast tego zastosować filtr do całej listy.

Pojęcia dotyczące projektowania

Cele stopniowego ujawniania informacji mają na celu:

• uprościć interfejsu użytkownika, koncentrując się na podstawowych, ale ujawniając dodatkowe szczegóły zgodnie z potrzebami.
• uprościć wygląd interfejsu użytkownika, zmniejszając postrzeganie bałaganu.

Oba cele można osiągnąć za pomocą progresywnych mechanizmów kontroli ujawniania, w których użytkownicy klikają, aby wyświetlić więcej szczegółów. Można jednak osiągnąć drugi cel uproszczenia wyglądu bez używania jawnych progresywnych mechanizmów kontroli ujawniania przez:

• Wyświetlanie szczegółów kontekstowych tylko w kontekście. Można na przykład automatycznie wyświetlać kontekstowe polecenia lub paski narzędzi, gdy są istotne dla wybranego obiektu lub trybu.

• zmniejszenie wagi cen dla pomocniczego interfejsu użytkownika.Affordances to właściwości wizualne sugerujące sposób użycia obiektów. Trendem jest posiadanie interfejsu użytkownika, z którego użytkownicy mogą korzystać w miejscu, ale aby cały taki interfejs użytkownika przyciągał krzyk "click me!" prowadzi do zbyt dużej ilości wizualnego bałaganu. W przypadku pomocniczego interfejsu użytkownika często lepiej jest używać subtelnych cen i dać pełny wpływ na mysz.

  

  W tym przykładzie pole Ocena jest interaktywne, ale nie jest wyświetlane tak, aż wskaźnik myszy zostanie zatrzymany.

• Wyświetlanie kroków po wykonaniu czynności wykonywanych dopiero po wykonaniu wymagań wstępnych. Takie podejście najlepiej używać ze znanymi zadaniami, w których użytkownicy mogą pewnie wykonać pierwsze kroki.

  

  W tym przykładzie nazwa użytkownika i strona hasła początkowo wyświetla tylko nazwę użytkownika i opcjonalne pola haseł. Pola potwierdzenia i wskazówek są wyświetlane po wprowadzeniu hasła przez użytkownika.

Chociaż stopniowe ujawnianie jest doskonałym sposobem uproszczenia interfejsów użytkownika, ma następujące zagrożenia:

• Brak możliwości odnajdywania. Użytkownicy mogą zakładać, że jeśli coś nie widzą, nie istnieje. Użytkownicy mogą nie umieścić wskaźnika myszy lub kliknąć, jeśli nie zobaczą szukanych informacji. Zawsze istnieje prawdopodobieństwo, że użytkownicy mogą nie klikać takich elementów jak Więcej opcji.
• Brak stabilności. Postępowe ujawnienie powinno być oczekiwane lub przynajmniej czuć się naturalne. Jeśli kontrolki nieoczekiwanie pojawiają się i znikają, wynikowy interfejs użytkownika może czuć się niestabilny.

Progresywne mechanizmy kontroli ujawniania

Kontrolki stopniowego ujawniania są zwykle wyświetlane bez bezpośrednich etykiet opisujących ich zachowanie, więc użytkownicy muszą mieć możliwość wykonania następujących czynności na podstawie samego wyglądu wizualizacji kontrolki:

• Należy pamiętać, że kontrola zapewnia stopniowe ujawnienie.
• Ustal, czy bieżący stan jest rozwinięty lub zwinięty.
• Określ, czy do wykonania zadania są potrzebne dodatkowe informacje, opcje lub polecenia.
• Określ, jak przywrócić oryginalny stan, jeśli jest to konieczne.

Chociaż użytkownicy mogą określić powyższe elementy przez próbę i błąd, należy spróbować wykonać takie eksperymenty niepotrzebnie.

Progresywne mechanizmy kontroli ujawniania mają dość słabe , co oznacza, że ich właściwości wizualne sugerują, jak są używane, choć słabo. W poniższej tabeli porównaliśmy wygląd typowych mechanizmów kontroli stopniowego ujawniania informacji:

Kontrola	Cel	Wygląd	Glyph wskazuje
Chevrons	Pokaż wszystko: Pokaż lub ukryj pozostałe elementy w całkowicie lub częściowo ukrytej zawartości. Elementy są wyświetlane w miejscu (przy użyciu pojedynczego pagonu) lub w menu podręcznym (przy użyciu podwójnego cudzysłów).	Pagony wskazują kierunek, w którym nastąpi akcja.	Przyszły stan
strzałki	Pokaż opcje: Pokaż menu podręczne polecenia.	Strzałki wskazują kierunek, w którym nastąpi akcja.	Przyszły stan
kontrolek Plus i minus	Rozwiń kontenery: rozwiń lub zwiń zawartość kontenera podczas przechodzenia przez hierarchię.	Symbole plus i minus nie wskazują, ale akcja zawsze występuje po prawej stronie.	Przyszły stan
obracające się trójkąty	Pokaż szczegóły: Pokaż lub ukryj dodatkowe informacje dla pojedynczego elementu. Są one również używane do rozszerzania kontenerów.	Obracające się trójkąty są nieco podobne do dźwigni obrotowych, więc wskazują kierunek, w którym wystąpiła akcja.	Stan obecny

Jeśli robisz tylko jedną rzecz...

Użytkownicy powinni mieć możliwość prawidłowego przewidywania zachowania progresywnej kontroli ujawnienia przez samą inspekcję. Aby to osiągnąć, wybierz odpowiednie wzorce użycia i spójnie zastosuj ich wygląd, lokalizację i zachowanie.

Wzorce użycia

Progresywne mechanizmy kontroli ujawniania mają kilka wzorców użycia. Niektóre z nich są wbudowane w typowe kontrolki.

Znaki

Chevrons pokazują lub ukrywają pozostałe elementy w całkowicie lub częściowo ukrytej zawartości. Zazwyczaj elementy są wyświetlane na miejscu, ale można je również wyświetlić w menu podręcznym. Gdy element zostanie rozszerzony, dopóki użytkownik go nie zwinie.

Pagony są używane w następujący sposób:

Zwyczaj	Przykład
interfejsu użytkownika w miejscu skojarzony obiekt odbiera fokus wejściowy, a pojedynczy cudzysłów jest aktywowany za pomocą paska spacji.	W tych przykładach pojedyncze pagony są umieszczone po prawej stronie skojarzonej kontrolki.
przyciski polecenia z etykietami zewnętrznymi przycisk polecenia odbiera fokus wejściowy, a pojedynczy cudzysłów jest aktywowany za pomocą paska spacji.	W tym przykładzie pojedynczy przycisk chwironu jest oznaczony etykietą i umieszczony po lewej stronie etykiety. W przypadku tego wzorca przycisk byłby trudny do zrozumienia bez etykiety.
przyciski polecenia z etykietami wewnętrznymi przycisk polecenia odbiera fokus wejściowy i jest aktywowany za pomocą paska spacji.	W tych przykładach zwykłe przyciski poleceń mają podwójną pozycję pagonu, aby sugerować ich znaczenie.

Strzałki

Strzałki pokazują wyskakujące menu poleceń. Element pozostaje rozwinięty, dopóki użytkownik nie dokona wyboru lub kliknie w dowolnym miejscu.

Jeśli przycisk strzałki jest niezależną kontrolką, otrzymuje fokus wejściowy i jest aktywowany za pomocą paska spacji. Jeśli przycisk strzałki ma kontrolkę nadrzędną, element nadrzędny odbiera fokus wejściowy, a strzałka jest aktywowana za pomocą Alt+Strzałka w dół i Alt+strzałka w górę, podobnie jak w przypadku kontrolki listy rozwijanej.

Strzałki są używane w następujący sposób:

Zwyczaj	Przykład
Oddzielne przyciski strzałka znajduje się w osobnej kontrolce przycisku.	W tych przykładach oddzielne przyciski strzałek umieszczone po prawej stronie wskazują menu poleceń.
przyciski polecenia strzałka jest częścią przycisku polecenia.	W tych przykładach przyciski menu i przyciski podziału mają strzałki umieszczone po prawej stronie tekstu.

Kontrolki Plus i minus

Kontrolki plus i minus rozszerzają lub zwijają, aby pokazać zawartość kontenera na miejscu podczas przechodzenia przez hierarchię. Element pozostaje rozwinięty, dopóki użytkownik go nie zwinie. Chociaż wyglądają one jak przyciski, ich zachowanie jest w miejscu.

Skojarzony obiekt odbiera fokus wejściowy. Znak plus jest aktywowany za pomocą strzałki w prawo, a minus z strzałki po lewej stronie.

Kontrolki Plus i minus są używane w następujący sposób:

Zwyczaj	Przykład
zwijane drzewa hierarchia wielowymiarowa do wyświetlania zawartości kontenera.	W tym przykładzie kontrolki plus i minus są umieszczone po lewej stronie skojarzonego kontenera.
listy zwijanych hierarchia dwu poziomów do wyświetlania zawartości kontenera.	W tym przykładzie kontrolki plus i minus są umieszczone po lewej stronie skojarzonego nagłówka listy.

Trójkąty obracające

Obracające się trójkąty pokazują lub ukrywają dodatkowe informacje w miejscu dla pojedynczego elementu. Są one również używane do rozszerzania kontenerów. Element pozostaje rozwinięty, dopóki użytkownik go nie zwinie.

Skojarzony obiekt odbiera fokus wejściowy. Zwinięty trójkąt (skierowany w prawo) jest aktywowany za pomocą strzałki w prawo, a rozwinięty trójkąt (skierowany w dół) z strzałki w lewo.

Trójkąty obracające są używane w następujący sposób:

Zwyczaj	Przykład
zwijane drzewa hierarchia wielowymiarowa do wyświetlania zawartości kontenera.	zrzut ekranu W tym przykładzie trójkąty obracające się znajdują się po lewej stronie skojarzonego kontenera.
listy zwijanych hierarchia dwu poziomów, aby wyświetlić dodatkowe informacje.	zrzut ekranu W tym przykładzie trójkąty obracające się znajdują się po lewej stronie skojarzonych elementów listy.

Strzałki podglądu

Podobnie jak w przypadku cudzysłów, dodatkowe informacje są wyświetlane lub ukryte. Element pozostaje rozwinięty, dopóki użytkownik go nie zwinie. W przeciwieństwie do pagonów glyphs mają graficzną reprezentację akcji, zazwyczaj ze strzałką wskazującą, co się stanie.

W tych przykładach z programu Microsoft Windows Media Player glyphs zawierają strzałki sugerujące akcję, która się wydarzy.

Strzałki w wersji zapoznawczej są najlepiej zarezerwowane w sytuacjach, w których standardowy pagon nie komunikuje się odpowiednio z zachowaniem kontroli, na przykład gdy ujawnienie jest złożone lub istnieje więcej niż jeden typ ujawnienia.

Wytyczne

Ogólne

• Wybierz progresywny wzorzec ujawniania na podstawie jego użycia. Opis każdego wzorca użycia można znaleźć w poprzedniej tabeli.

• Nie używaj linków do progresywnych mechanizmów kontroli ujawniania informacji. Używaj tylko progresywnych mechanizmów kontroli ujawniania przedstawionych w sekcji Wzorce użycia. Jednak użyj linków, aby przejść do tematów pomocy .

  poprawna:

  

  niepoprawne:

  

  W niepoprawnym przykładzie link służy do wyświetlania większej liczby opcji. To użycie byłoby poprawne, jeśli łącze przechodziło do innej strony lub okna dialogowego albo wyświetlało temat Pomocy.

Interakcja

• W przypadku pagonów i strzałek, które nie są bezpośrednio oznaczone etykietami, użyj etykietek narzędzi, aby opisać ich działanie.

  

  W tym przykładzie etykietka narzędzia wskazuje efekt nieoznaczonej kontrolki pagonu.

• Jeśli użytkownik rozwija lub zwija element, ustaw stan na trwały, aby obowiązywał przy następnym wyświetleniu okna, chyba że użytkownicy będą preferować uruchamianie w stanie domyślnym. Utrwał stan dla poszczególnych okien dla poszczególnych użytkowników.

• Upewnij się, że cała rozszerzona zawartość może być zwinięta i odwrotnie, a operacja odwrotna jest oczywista. To zachęca do eksploracji i zmniejsza frustrację. Najlepszym sposobem, aby operacja odwrotna stała jest zachowanie kontroli w tej samej stałej lokalizacji. Jeśli chcesz przenieść kontrolkę, zachowaj ją w tej samej lokalizacji względnej w wizualnie odrębnym obszarze.

  niepoprawne:

  

  cudzysłów

  W tym przykładzie kliknięcie przycisku Zamień na cudzysłów powoduje wyświetlenie Zastąp polem tekstowym. Po wykonaniu tej czynności rozszerzenie Replace staje się poleceniem Replace, więc nie ma możliwości przywrócenia oryginalnego stanu.

• Użyj tylko kluczy dostępu odpowiednich dla progresywnego wzorca ujawniania, jak pokazano w sekcji Wzorce użycia. Nie używaj Enter, aby aktywować stopniowe ujawnienie.

Prezentacja

• Nie używaj trójkątnych grotów strzałek do celu innego niż stopniowe ujawnienie.

  niepoprawne:

  

  Chociaż ten przykład nie jest stopniowym wzorcem ujawniania, użycie strzałki sugeruje, że polecenia będą wyświetlane w oknie podręcznym.

  poprawna:

  

  W tym przykładzie punktor jest poprawnie używany.

• Usuń (nie wyłączaj) progresywnych mechanizmów kontroli ujawniania, które nie mają zastosowania w bieżącym kontekście. Progresywne mechanizmy kontroli ujawniania danych powinny zawsze dostarczać obietnicę, więc usuń je, gdy nie ma więcej informacji, które należy przekazać.

  niepoprawne:

  

  W tym przykładzie progresywna kontrola ujawnienia, która nie ma zastosowania, jest niepoprawnie wyłączona.

Znaki

• Użyj pojedynczych pagonów, aby pokazać lub ukryć na miejscu. Użyj podwójnych pagonów, aby pokazać lub ukryć przy użyciu menu podręcznego. Należy jednak zawsze używać podwójnych pagonów dla przycisków poleceń z etykietami wewnętrznymi.

  poprawna:

  

  niepoprawne:

  

  W niepoprawnym przykładzie podwójny chwiron jest używany do progresywnego ujawniania w miejscu.

  poprawna:

  dwukrotnie przekręconego polecenia

  W tym przykładzie podwójny pagon jest używany do progresywnego ujawniania w miejscu, ponieważ jest to przycisk polecenia z etykietą wewnętrzną.

• Podaj relację wizualną między pagonem a skojarzona z nią kontrolką. Ponieważ chevrony w miejscu są umieszczane po prawej stronie skojarzonego interfejsu użytkownika i wyrównane do prawej, może istnieć dość odległość między pagonem a jego skojarzona kontrolka.

  poprawna:

  

  W tym przykładzie istnieje wyraźna relacja między pagonem w miejscu a skojarzonym z nim interfejsem użytkownika.

  niepoprawne:

  

  W tym przykładzie nie ma wyraźnej relacji wizualnej między pagonem w miejscu i skojarzonym z nim interfejsem użytkownika, więc wydaje się, że unosi się w przestrzeni.

Strzałki

• Nie używaj grafiki ze strzałkami, które mogą być mylone z back, forward, Go lub Play. Używaj prostych trójkątnych grotów strzałek (strzałek bez łodyg) na neutralnych tłach.

  poprawna:

  

  Te strzałki są wyraźnie postępowymi mechanizmami kontroli ujawniania.

  niepoprawne (w przypadku stopniowego ujawniania):

  

  Te strzałki nie wyglądają jak progresywne mechanizmy kontroli ujawniania.

  niepoprawne (w przypadku powrotu, do przodu):

  

  Te strzałki wyglądają jak progresywne mechanizmy kontroli ujawnienia, ale nie są.

Zalecane ustalanie rozmiaru i odstępy

Zalecane ustalanie rozmiaru i odstępy w przypadku stopniowego sterowania ujawnieniem.

Etykiety

• W przypadku cudzysłów na przycisku polecenia z etykietą zewnętrzną:
  • Przypisz unikatowy klucz dostępu . Aby uzyskać wskazówki, zobacz Klawiatura.
  • Użyj wielkich liter w stylu zdania.
  • Zapisz etykietę jako frazę i nie używaj końcowej interpunkcji.
  • Zapisz etykietę tak, aby opisywała efekt kliknięcia przycisku i zmienić etykietę po zmianie stanu.
  • Jeśli powierzchnia zawsze wyświetla niektóre opcje, polecenia lub szczegóły, użyj następujących par etykiet:
    • Więcej/mniej opcji. Użyj opcji lub kombinacji opcji, poleceń i szczegółów.
    • Więcej/mniej poleceń. Użyj tylko dla poleceń.
    • Więcej/mniej szczegółów. Służy tylko do obsługi informacji.
    • Więcej/mniej <nazwa obiektu>. Użyj dla innych typów obiektów, takich jak foldery.
  • Inaczej:
    • Pokaż/Ukryj opcje. Użyj opcji lub kombinacji opcji, poleceń i szczegółów.
    • Pokaż/Ukryj polecenia. Użyj tylko dla poleceń.
    • Pokaż/Ukryj szczegóły. Służy tylko do obsługi informacji.
    • Pokaż/Ukryj nazwę obiektu <>. Użyj dla innych typów obiektów, takich jak foldery.
• W przypadku cudzysłów na przycisku polecenia z etykietą wewnętrzną postępuj zgodnie ze standardowym przyciskiem polecenia wytycznych.

Dokumentacja

W przypadku odwoływania się do progresywnych mechanizmów kontroli ujawniania informacji:

• Jeśli kontrolka ma stałą etykietę, odwołaj się tylko do kontrolki według jej etykiety; nie próbuj opisywać kontrolki. Użyj dokładnego tekstu etykiety, w tym jego wielkości liter, ale nie dołączaj podkreślenia klucza dostępu.

• Jeśli kontrolka nie ma etykiety lub nie jest stała, odwołaj się do kontrolki według jej typu: chevron, strzałka, trójkąt lub przycisk plus/minus. W razie potrzeby opisz również lokalizację kontrolki. Jeśli kontrolka jest wyświetlana dynamicznie, na przykład kontrolka obszaru strony, uruchom odwołanie, opisując sposób wyświetlania kontrolki.

  Przykład: Aby wyświetlić pliki w folderze, przenieś wskaźnik na początek nazwy folderu, a następnie kliknij trójkąt obok folderu.

• Nie należy odwoływać się do kontrolki jako przycisku, chyba że kontrastuje z innymi progresywnymi kontrolkami ujawniania, które nie są przyciskami.

• Aby opisać interakcję z użytkownikiem, użyj kliknięcia. W razie potrzeby w celu zachowania przejrzystości użyj przycisku kliknij... , aby rozwinąć lub zwinąć.

• 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łady:

• (Dla pagonu) Aby określić rozmiar pliku, kliknij pozycję Szczegóły.
• (Strzałka) Aby wyświetlić wszystkie opcje, kliknij strzałkę obok pola Wyszukaj.
• (Dla plusa/minus) Aby wyświetlić obraz, kliknij pozycję Obrazy.