Widoki drzewa

W widoku drzewa użytkownicy mogą wyświetlać hierarchicznie rozmieszczone kolekcje obiektów i korzystać z niej przy użyciu pojedynczego zaznaczenia lub wielokrotnego zaznaczenia.

W drzewie obiekty zawierające dane są nazywane węzłami liścia i obiektami, które zawierają inne obiekty, są nazywane węzłami kontenera. Jeden, najbardziej górny węzeł kontenera jest nazywany węzłem głównym. Użytkownicy mogą rozwijać i zwijać węzły kontenera, klikając przyciski plusa i minus ekspandera.

Typowy widok drzewa.

Czy jest to właściwa kontrola?

Posiadanie danych hierarchicznych nie oznacza, że musisz użyć widoku drzewa. Bardzo często widok listy jest prostszym, ale bardziej zaawansowanym wyborem. Widoki listy:

• Obsługa kilku różnych widoków.
• Obsługa sortowania danych według dowolnej kolumny w widoku Szczegóły.
• Obsługa organizowania danych w grupach, tworząc hierarchię dwu poziomową.

Aby użyć widoku listy, można spłaszczać informacje hierarchiczne przy użyciu następujących technik:

• Usuń węzeł główny, jeśli jest obecny, ponieważ często nie jest to konieczne.

• Użyj grup widoków listy, kart, list rozwijanych lub nagłówków z możliwością rozwinięcia, aby zastąpić kontenery najwyższego poziomu.

  zrzut ekranu

  W tym przykładzie grupy widoków listy są używane dla kontenerów najwyższego poziomu.

  

  W tym przykładzie karty są używane dla kontenerów najwyższego poziomu

  

  W tym przykładzie lista rozwijana jest używana dla kontenerów najwyższego poziomu.

• Jeśli skojarzona kontrolka wyświetla zawartość wybranego kontenera, ta kontrolka może wyświetlać niższe poziomy hierarchii.

  

  W tym przykładzie kontenery niskiego poziomu są wyświetlane w oknie dokumentu.

Należy użyć widoku drzewa, jeśli chcesz wyświetlić hierarchię więcej niż dwóch poziomów (nie w tym węzła głównego).

Aby zdecydować, czy widok drzewa jest właściwą kontrolką, rozważ następujące pytania:

• Czy hierarchiczna jest hierarchiczna? Jeśli nie, użyj innej kontrolki.
• Czy hierarchia ma co najmniej trzy poziomy (nie w tym katalog główny)? Jeśli nie, rozważ alternatywy, takie jak grupy widoku listy, karty, listy rozwijane lub nagłówki z możliwością rozwijania.
• Czy elementy mają dane pomocnicze? Jeśli tak, rozważ użycie widoku listy w trybie widoku Szczegóły, aby w pełni wykorzystać dane pomocnicze.
• Czy dane niższego poziomu odnoszą się do niezależnych podzadań? Jeśli tak, rozważ wyświetlenie informacji w skojarzonej kontrolce lub w osobnym oknie (wyświetlane przy użyciu przycisków poleceń lub linków).
• Czy użytkownicy docelowi są zaawansowani? Zaawansowani użytkownicy są bardziej biegłi w korzystaniu z drzew. Jeśli aplikacja jest przeznaczona dla początkujących użytkowników, unikaj korzystania z widoków drzewa.
• Czy elementy mają jedną, naturalną, hierarchiczną kategoryzację, która jest znana większości użytkowników? Jeśli tak, dane są idealne dla widoku drzewa. Jeśli istnieje potrzeba wielu widoków lub sortowania, zamiast tego użyj widoku listy.
• Czy użytkownicy muszą zobaczyć dane niższego poziomu w niektórych, ale nie wszystkich scenariuszach, czy niektóre, ale nie przez cały czas? Jeśli tak, dane są idealne dla widoku drzewa.

Pojęcia dotyczące projektowania

Drzewa są przeznaczone do organizowania danych i ułatwiają odnajdywanie, ale trudno jest łatwo odnaleźć dane w drzewie. Podczas podejmowania decyzji o widokach drzewa i ich organizacji należy pamiętać o następujących zasadach.

Przewidywalność i możliwość odnajdywania

Widok drzewa jest oparty na relacjach między obiektami. Drzewa działają najlepiej, gdy obiekty tworzą jasne, dobrze znane, wzajemnie wykluczające się relacje, w których każdy obiekt mapuje się na pojedynczy, łatwy do określenia kontenera.

Istotnym problemem jest to, że obiekt może występować w różnych węzłach. Na przykład gdzie użytkownicy spodziewają się znaleźć urządzenie sprzętowe, które odtwarza muzykę, ma duży dysk twardy i używa portu USB? Być może w każdym z kilku różnych węzłów kontenera, takich jak Multimedia, Storage, USB i ewentualnie w zasobach sprzętowych. Jednym z rozwiązań jest umieszczenie każdego obiektu w jednym najbardziej odpowiednim kontenerze niezależnie od okoliczności; innym podejściem jest umieszczenie każdego obiektu we wszystkich kontenerach, które mają zastosowanie. Pierwszy promuje prostą, czystą hierarchię, a drugi promuje odnajdywanie, z których każdy ma zalety i potencjalne problemy.

Użytkownicy mogą nie zupełnie zrozumieć układu drzewa, ale przez pewien czas tworzą model mentalny relacji po interakcji z drzewem. Jeśli ten model mentalny jest nieprawidłowy, prowadzi do zamieszania. Załóżmy na przykład, że odtwarzacz muzyczny można znaleźć w kontenerach Multimedia, Storage i USB. Ten układ zwiększa możliwości odnajdywania. Jeśli użytkownik najpierw znajdzie urządzenie w multimediach, użytkownik może stwierdzić, że wszystkie urządzenia, takie jak odtwarzacze muzyczne, są wyświetlane w kontenerze Multimedia. Użytkownik będzie oczekiwać, że podobne urządzenia, takie jak kamery cyfrowe, pojawią się w kontenerze Multimedia i staną się mylące, jeśli tak nie jest.

Wyzwaniem podczas projektowania drzewa jest zrównoważenie możliwości odnajdywania za pomocą przewidywalnego modelu użytkownika, który minimalizuje zamieszanie.

Szerokość a głębokość

Badania użyteczności wykazały, że użytkownicy są bardziej skuteczne w znajdowaniu obiektów w drzewie, które jest szerokie niż w drzewie, które jest głęboko, więc podczas projektowania drzewa należy preferować szerokość na głębokości. Najlepiej, aby drzewo miało nie więcej niż cztery poziomy (nie licząc węzła głównego), a najczęściej używane obiekty powinny być wyświetlane na dwóch pierwszych poziomach.

Inne zasady

• Gdy użytkownicy znajdą szukaną zawartość, przestają szukać. Nie wyglądają, aby zobaczyć, gdzie inny obiekt może zostać znaleziony, ponieważ nie musi. Ci użytkownicy mogą założyć, że pierwszą ścieżką, którą znajdą, jest jedyną ścieżką.
• Użytkownicy mają problemy ze znalezieniem obiektów w dużych, złożonych drzewach. Użytkownicy nie będą wykonywać wyczerpującego, ręcznego wyszukiwania w celu znalezienia obiektów w takich drzewach; zatrzymują się, gdy myślą, że wydali rozsądny wysiłek. W związku z tym duże, złożone drzewa muszą zostać uzupełnione innymi metodami dostępu, takimi jak wyszukiwanie słów, indeks lub filtrowanie.
• Niektóre programy umożliwiają użytkownikom tworzenie własnych drzew. Chociaż takie samoprojektowane drzewa mogą być dostosowane do modelu psychicznego użytkownika, są one często tworzone przypadkowo i słabo utrzymywane. Na przykład, gdy system plików, program poczty e-mail i lista Ulubione zwykle przechowuje podobne typy informacji, użytkownicy rzadko przeszkadzają sobie w taki sam sposób.

Jeśli robisz tylko jedną rzecz...

Starannie rozważne rozważnie ważą korzyści i wady korzystania z widoków drzewa. Hierarchicznie rozmieszczone dane nie oznaczają, że musisz użyć widoku drzewa.

Wzorce użycia

Widoki drzewa mają kilka wzorców użycia:

Zwyczaj	Przykład
widoki drzewa z tylko węzłami kontenera użytkownicy mogą jednocześnie wyświetlać i korzystać z jednego kontenera.	Zazwyczaj te widoki drzewa mają skojarzoną kontrolkę, która wyświetla zawartość wybranego kontenera, dzięki czemu użytkownicy mogą wchodzić w interakcje tylko z jednym kontenerem naraz. zrzut ekranu W tym przykładzie widok drzewa ma tylko węzły kontenera. Zawartość wybranego węzła jest wyświetlana w skojarzonej kontrolce widoku listy.
widoki drzewa z węzłami kontenera i liścia użytkownicy mogą wyświetlać kontenery i opuszczać je oraz korzystać z niej.	Zazwyczaj te widoki drzewa mają skojarzoną kontrolkę, która wyświetla zawartość wybranego kontenera lub liścia. Umożliwienie użytkownikom interakcji z listami często sprawia, że konieczne jest obsługę wielu wyborów. w tym przykładzie widok drzewa ma zarówno węzły kontenera, jak i liścia. Ponieważ jest obsługiwany wybór wielokrotny, zawartość otwartych elementów jest wyświetlana przy użyciu kart w skojarzonej kontrolce. alternatywnie widok drzewa może mieć zorganizowaną listę, gdzie kontenery są nagłówkami, a liście są opcjami. W tym przykładzie liście drzewa są opcjami, a kontenery są kategoriami opcji.
widoki drzewa pól wyboru użytkownicy mogą wybrać dowolną liczbę elementów, w tym brak.	Pola wyboru wyraźnie wskazują, że istnieje możliwość wielokrotnego zaznaczenia. użyj tego wzorca drzewa, gdy wybór wielokrotny jest niezbędny lub często używany. W tym przykładzie widok drzewa pól wyboru umożliwia wybranie funkcji do włączenia lub wyłączenia.
Konstruktorzy widoków drzewa użytkownicy mogą utworzyć drzewo, dodając jednocześnie jeden kontener lub liść i opcjonalnie ustawiając kolejność.	Wiele drzew można tworzyć lub modyfikować przez użytkowników. niektóre drzewa są wbudowane przy użyciu menu kontekstowych i przeciągania i upuszczania (takich jak foldery w Eksploratorze Windows), podczas gdy inne drzewa są tworzone przy użyciu wyspecjalizowanego okna dialogowego (takiego jak lista ulubionych w eksploratorze Windows Internet Explorer). W tym przykładzie z programu Internet Explorer użytkownicy mogą tworzyć własną listę ulubionych przy użyciu okna dialogowego.
widoki drzewa z alternatywnymi metodami dostępu użytkownicy mogą znajdować obiekty w inny sposób niż za pomocą drzewa hierarchicznego.	Jak wspomniano wcześniej, użytkownicy mają problemy ze znalezieniem obiektów w dużych, złożonych drzewach, więc takie drzewa powinny być uzupełnione innymi metodami dostępu, takimi jak wyszukiwanie słów, indeks lub filtrowanie. W tym przykładzie użytkownicy mogą również uzyskiwać dostęp do informacji przy użyciu spisu treści, indeksu i ulubionych. dla niektórych użytkowników karty indeksu i wyszukiwania mogą być bardziej przydatne niż karta zawartości. W tym przykładzie menu Start systemu Windows umożliwia również użytkownikom dostęp do programów, plików i stron sieci Web, wpisując część nazwy w polu Wyszukiwania.

Wytyczne

Prezentacja

• W kontenerze posortuj elementy w kolejności logicznej. Sortuj nazwy w kolejności alfabetycznej, liczby w kolejności liczbowej i daty w kolejności chronologicznej.

• Użyj atrybutu Always Show Selection, aby użytkownicy mogli łatwo określić wybrany element, nawet jeśli kontrolka nie ma fokusu wejściowego.

• Jeśli drzewo działa jako spis treści, użyj atrybutu Single Expand, aby uprościć zarządzanie drzewem. W ten sposób jest rozszerzana tylko odpowiednia część drzewa.

• Unikaj prezentowania pustych drzew. Jeśli użytkownik utworzy drzewo, zainicjuj drzewo za pomocą instrukcji lub przykładowych elementów, których użytkownicy mogą potrzebować.

  

  W tym przykładzie lista jest początkowo przedstawiana z przykładami.

• Nie należy zwijać węzłów kontenera, jeśli użytkownicy nie mają powodu, aby je zwinąć. W ten sposób zwiększa się niepotrzebna złożoność.

• Jeśli wydajność ładowania jest problemem, domyślnie wyświetl tylko pierwsze i drugie kontenery drzewa. Następnie można załadować dodatkowe dane na żądanie, gdy użytkownik rozwija gałęzie w drzewie.

• Jeśli użytkownicy rozszerzają lub zwijają kontener, upewnij się, że stan ten będzie trwały, aby obowiązywał przy następnym wyświetleniu widoku drzewa, chyba że użytkownicy będą preferować uruchamianie w stanie domyślnym. Trwałość powinna znajdować się w widoku drzewa dla poszczególnych użytkowników.

• Jeśli kontenery wysokiego poziomu mają podobną zawartość, rozważ użycie wskazówek wizualnych w celu ich odróżnienia.

  niepoprawne:

  

  W tym przykładzie skrzynka pocztowa i foldery archiwum mają podobną zawartość. Po dalszym rozwinięciu drzew bardzo trudno jest użytkownikom wiedzieć, gdzie znajdują się w drzewie, co prowadzi do nieporozumień. Użycie nieco różnych ikon w różnych sekcjach rozwiąże ten problem.

• Ponowne rozważenie łączenia wierszy. Chociaż te wiersze wyraźnie pokazują relacje między węzłami kontenera i liścia, dodają one bałagan wizualny bez znaczącego zrozumienia. W szczególności nie pomagają, gdy węzły są blisko siebie, ani nie pomagają, gdy węzły są tak daleko od siebie, że przewijanie jest wymagane.

  poprawna:

  

  lepiej:

  

  Linie łączące niewiele robią, aby pomóc w zrozumieniu.

Interakcja

• Rozważ zapewnienie zachowania dwukrotnego kliknięcia. Dwukrotne kliknięcie powinno mieć taki sam efekt jak wybranie elementu i wykonanie jego domyślnego polecenia.

• Zachowanie dwukrotnego kliknięcia jest nadmiarowe. Zawsze powinien istnieć przycisk polecenia lub polecenie menu kontekstowego, które ma taki sam efekt.

• Jeśli element wymaga dalszego wyjaśnienia, podać wyjaśnienie w etykietce informacji.

  

  W tym przykładzie etykietka informacyjna zawiera dodatkowe informacje.

• Podaj menu kontekstowe odpowiednich poleceń. Takie polecenia obejmują wycinanie, kopiowanie, wklejanie, usuwanie lub usuwanie, zmienianie nazwy i właściwości.

• Podczas wyłączania widoku drzewa wyłącz również wszystkie skojarzone etykiety i przyciski poleceń.

Organizacja drzewa

• Użyj naturalnej struktury hierarchicznej, która jest znana większości użytkowników.
• Jeśli nie możesz użyć takiej struktury, spróbuj zrównoważyć odnajdywanie za pomocą przewidywalnego modelu użytkownika, który minimalizuje zamieszanie.
• Aby bezpiecznie zwiększyć możliwość odnajdywania, umieść element w wielu kontenerach, gdy:
  • Element nie jest powiązany z żadnymi innymi podobnymi elementami (dlatego użytkownicy nie są myleni przez nieprawidłowe skojarzenia).
  • Istnieje tylko kilka z takich nadmiarowo zlokalizowanych elementów (więc drzewo nie staje się wzdęty).
• Użyj najprostszej struktury hierarchicznej, która dobrze działa. W tym celu:
  • Umieść najczęściej używane obiekty na dwóch pierwszych poziomach drzewa (nie licząc węzła głównego) i umieść mniej często używane obiekty w dół hierarchii.
  • Wyeliminuj niepotrzebne lub połącz nadmiarowe kontenery na poziomie pośrednim.
• Preferuj szerokość na głębokości. Najlepiej, aby drzewo miało nie więcej niż cztery poziomy, a najczęściej używane obiekty powinny być wyświetlane na dwóch pierwszych poziomach.
• Ustal, czy naprawdę potrzebujesz węzła głównego. Podaj węzeł główny, jeśli użytkownicy potrzebują możliwości wykonywania poleceń w całym drzewie (ewentualnie przy użyciu menu kontekstowego w węźle głównym). W przeciwnym razie drzewo jest prostsze i łatwiejsze do użycia bez niego.
• Jeśli drzewo ma alternatywne metody dostępu, takie jak wyszukiwanie wyrazów lub indeks, zoptymalizuj drzewo do przeglądania, koncentrując się na najbardziej użytecznej zawartości. W przypadku alternatywnych metod dostępu zawartość drzewa nie musi być kompleksowa. Uproszczenie drzewa ułatwia użytkownikom znajdowanie najbardziej przydatnej zawartości.

Widoki drzewa pól wyboru

• Wyświetl liczbę wybranych elementów poniżej listy, zwłaszcza jeśli użytkownicy mogą wybrać kilka elementów. Ta opinia pomaga użytkownikom potwierdzić, że ich wybór jest poprawny.

  

  W tym przykładzie liczba wybranych elementów jest wyświetlana poniżej drzewa. Jasne jest, że dwa elementy nie są zaznaczone.

• Jeśli istnieje potencjalnie wiele elementów i wybranie lub wyczyszczenie wszystkich elementów jest prawdopodobne, dodaj przyciski Zaznacz wszystko i Wyczyść wszystkie polecenia.

• Użyj pól wyboru stanu mieszanego, aby wskazać częściowe zaznaczenie elementów w kontenerze.

  poprawna:

  

  W tym przykładzie pola wyboru stanu mieszanego są używane do wskazywania częściowego zaznaczenia.

Zalecane ustalanie rozmiaru i odstępy

Zalecane ustalanie rozmiaru i odstępy dla kontrolek widoku drzewa.

• Wybierz szerokość widoku drzewa, która pozwala uniknąć konieczności przewijania poziomego dla większości elementów, gdy drzewo jest w pełni rozwinięte.

• uwzględnij dodatkowe 30 procent, aby uwzględnić lokalizację.

• Wybierz wysokość widoku drzewa, która eliminuje niepotrzebne przewijanie w pionie. Rozważ, aby widok drzewa był nieco dłuższy (lub jeszcze bardziej, jeśli jest dostępny obszar), jeśli w ten sposób zmniejsza to zapotrzebowanie na pionowy pasek przewijania.

  niepoprawne:

  

  W tym przykładzie, dzięki czemu widok drzewa będzie nieco szerszy i dłuższy, wyeliminowałby paski przewijania w większości przypadków. W tym konkretnym drzewie można otworzyć jednocześnie tylko jeden kontener.

• Jeśli użytkownicy korzystają z większego widoku drzewa, zmień rozmiar widoku drzewa i jego okna nadrzędnego. Dzięki temu użytkownicy mogą odpowiednio dostosować rozmiar widoku drzewa.

Etykiety

Etykiety kontrolek

• Wszystkie widoki drzewa wymagają etykiet. Napisz etykietę jako wyraz lub frazę, a nie jako zdanie, kończąc na dwukropku i używając tekstu statycznego.

• Przypisz unikatowy klucz dostępu. Aby uzyskać wskazówki dotyczące przypisywania, zobacz Klawiatura.

• Użyj wielkich liter w stylu zdania.

• Umieść etykietę nad kontrolką i wyrównaj etykietę do lewej krawędzi kontrolki.

• W przypadku widoków drzewa wielokrotnego zaznaczenia zapisz etykietę, aby było jasne, że istnieje możliwość wyboru wielokrotnego. Etykiety widoku drzewa pól wyboru mogą być mniej jawne.

  niepoprawne:

  

  W tym przykładzie etykieta nie zawiera informacji na temat wielokrotnego wyboru.

  lepiej:

  

  W tym przykładzie etykieta wyraźnie wskazuje, że istnieje możliwość wyboru wielokrotnego.

  najlepsze :

  

  W tym przykładzie pola wyboru wyraźnie wskazują, że istnieje możliwość wielokrotnego zaznaczenia, więc etykieta nie musi być jawna.

Tekst danych

• Użyj wielkich liter w stylu zdania.

Tekst instruktażowy

• Jeśli musisz dodać tekst instrukcji dotyczący widoku drzewa, dodaj go powyżej etykiety. Używaj pełnych zdań z kończącymi znakami interpunkcyjnymi.

• Użyj wielkich liter w stylu zdania.

• Dodatkowe wyjaśnienia, które są pomocne, ale nie są konieczne, powinny być krótkie. Umieść te informacje w nawiasach między etykietą i dwukropkiem, po instrukcji głównej, jeśli jest używana zamiast etykiety, lub poniżej kontrolki.

  

  W tym przykładzie dodatkowe wyjaśnienie znajduje się poniżej kontrolki.

Dokumentacja

Podczas odwoływania się do widoków drzewa:

• Użyj dokładnego tekstu etykiety, w tym jego wielkości liter, ale nie dołączaj podkreślenia ani dwukropka klucza dostępu. Dołącz listę wyrazów lub listę hierarchiczną, jeśli kontekst wymaga rozróżnienia od zwykłych list.
• W przypadku elementów drzewa użyj dokładnego tekstu elementu, w tym jego wielkości liter.
• Zapoznaj się z widokami drzewa jako widokami drzewa tylko w programowaniu i inną dokumentacją techniczną. Wszędzie indziej użyj listy lub listy hierarchicznej, ponieważ drzewo terminów jest mylące dla większości użytkowników.
• Aby opisać interakcję użytkownika, użyj opcji wybierz dane, a następnie rozwiń i zwiń przyciski plus i minus.
• Jeśli to możliwe, sformatuj etykiety i elementy drzewa przy użyciu pogrubionego tekstu. W przeciwnym razie umieść etykietę i elementy w cudzysłowie tylko wtedy, gdy jest to wymagane, aby zapobiec nieporozumieniu.

Przykład: na liście Zawartość wybierz pozycję Projekt interfejsu użytkownika.

W przypadku odwoływania się do pól wyboru w widoku drzewa:

• Użyj dokładnego tekstu etykiety, w tym jego wielkości liter, i dołącz pole wyboru wyrazów. Nie dołączaj podkreślenia klucza dostępu.
• 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: na liście elementów do tworzenia kopii zapasowej zaznacz pole wyboru Moje dokumenty.