Listy. Co przedstawiamy przy pomocy list? wiadomości e-mail; komentarze; posty na forum; artykuły; zdjęcia;

Prezentacja na temat: "Listy. Co przedstawiamy przy pomocy list? wiadomości e-mail; komentarze; posty na forum; artykuły; zdjęcia;"— Zapis prezentacji:

1 Listy

2 Co przedstawiamy przy pomocy list? wiadomości e-mail; komentarze; posty na forum; artykuły; zdjęcia;

3 Co przedstawiamy przy pomocy list? produkty; wyniki wyszukiwania; linki; itp..

4 Scenariusze korzystania z list Uzyskanie ogólnego przeglądu – Jakie wrażenie na czytelniku wywrze lista? Przeglądanie elementu po elemencie – Czy użytkownik będzie przeglądać elementy listy losowo, czy we właściwej kolejności?

5 Scenariusze korzystania z list Wyszukiwanie określonego elementu – Czy użytkownik szuka czegoś konkretnego? Sortowanie i filtrowanie. Organizowanie, dodawanie, usuwanie i kategoryzowanie elementów.

6 Architektura informacji Jakie są najważniejsze cechy strukturalne listy przeznaczonej do wyświetlenia na stronie?  Długość  Kolejność  Grupowanie – Czy elementy są skategoryzowane? Czy owe kategorie wchodzą w skład większych kategorii?  Rodzaje elementów – Jakie są to elementy? Czy elementy listy znacząco się od siebie różnią?

7 Architektura informacji Jakie są najważniejsze cechy strukturalne listy przeznaczonej do wyświetlenia na stronie? c.d.  Interakcja – Czy element listy powinien być ukazany w całości ? Co użytkownik ma robić z tymi elementami?  Dynamika – Ile czasu zajmuje wczytanie całej listy? Czy lista zmienia się na bieżąco

8 Wzorce 1. Wybór dwupanelowy; 2. Uszczegółowienie w jednym oknie; 3. Wkładka; 4. Siatka miniaturek; 5. Karuzela; 6. Przemienne tło;

9 Wzorce 1. Paginacja; 2. Bezpośrednie przejście do elementu; 3. Przewijanie alfabetyczne; 4. Kaskadujące listy; 5. Tabela drzewiasta; 6. Pole nowego elementu.

10 Wybór dwupanelowy Co zrobić ? Umieść dwa panele obok siebie. W pierwszym pokaż listę elementów, spośród których użytkownik może do woli wybierać. W drugim powinna się pojawiać treść wybranego elementu.

11 Wybór dwupanelowy  Kiedy używać ? Mamy do pokazania listę elementów. Z każdym elementem powiązana jest interesująca użytkownika treść (pełnowymiarowy obraz, treść e- maila) albo szczegóły dotyczące plików bądź ich datowania.

12 Wybór dwupanelowy  Kiedy używać ? Chcesz, aby użytkownik zobaczył ogólną strukturę listy i cały czas miał tę listę przed oczami, lecz również chcesz mu dać możliwość przeglądania elementów szybko i bez trudności. Użytkownik nie musi jednocześnie widzieć szczegółów lub treści więcej niż jednego elementu

13 Wybór dwupanelowy  W jaki sposób? Umieszczamy klikalną listę w górnym lub lewym panelu, a panel ze szczegółami u dołu lub po prawej stronie. Do takiego rozmieszczenia przyzwyczajona jest większość użytkowników posługujących się językami, których pismo czyta się od lewej do prawej.

14 Wybór dwupanelowy  W jaki sposób? Kiedy użytkownik wybiera element, od razu należy pokazać jego treść lub szczegóły w drugim panelu. Wybór powinien następować za pomocą jednego kliknięcia. Należy dać użytkownikowi możliwość zmiany wyboru przy użyciu klawiszy, najlepiej strzałek. Należy pamiętać o tym aby zaznaczony element był widoczny.

15 Dlaczego ?  Wyuczona, powszechna i silnie ugruntowana konwencja;  Użytkownik może swobodnie przenosić uwagę z jednego panelu na drugi;  Zmniejszona ilość koniecznego wysiłku fizycznego;  Zmniejszone obciążenie poznawcze;  Zmniejszone obciążenie pamięci użytkownika.

16 Przykłady

17

18 Uszczegółowienie w jednym oknie  Co zrobić ? Przedstaw listę lub menu elementów w jednym oknie. Kiedy użytkownik wybiera element z listy, pokaż jego szczegóły lub treść w oknie w miejscu listy.

19 Uszczegółowienie w jednym oknie  Kiedy używać ? Mamy do dyspozycji bardzo mało miejsca, którego nie wystarczy na wybór dwupanelowy lub wkładkę. Interfejs ten może być przykładowo wykorzystany do wyświetlenia na ekranie urządzenia mobilnego albo na osobnym pasku bocznym.

20 Uszczegółowienie w jednym oknie  W jaki sposób ? Utwórz listę opartą na layoucie lub formacie, który uznasz za najlepszy. Może składać się z prostego tekstu, wielu rzędów z odpowiednio sformatowanym tekstem, dendrogramów, Siatek miniatur czy innego rodzaju elementów.

21 Uszczegółowienie w jednym oknie W jaki sposób ? Lista może być przewijalna, jeśli inaczej nie zmieści w wyznaczonej przestrzeni. Kiedy użytkownik wybiera któryś z elementów listy, widok listy powinien zastąpić widok lub zawartość elementu. Umieść w tym widoku przyciski Wstecz lub Anuluj, który prowadzi użytkownika z powrotem do listy.

22 Dlaczego ?  Prostota  Łatwo zrozumieć działanie listy elementów lub linków  W bardzo ograniczonej przestrzeni to jedyna sensowna możliwość przedstawienia listy i szczegółów elementów

23 Przykłady

24

25 Wkładka  Co zrobić ? Umieść listę elementów w rzędach kolumny. Kiedy użytkownik wybiera element, ukaż jego szczegóły na miejscu, w samej liście. Elementy muszą się otwierać i zamykać niezależnie od siebie.

26 Wkładka  Kiedy używać ? Szczegóły elementów nie zajmują dużo miejsca, ale nie są wystarczająco małe, aby je domyślnie prezentować w liście w całości. Użytkownik może również otworzyć dwa elementy jednocześnie i je porównać.

27 Wkładka W jaki sposób ? Zaprezentuj listę elementów w kolumnie. Wkładka ze szczegółami klikniętego elementu powinna rozwijać się na miejscu. Element powinien się zwijać po wykonaniu podobnego gestu. Kiedy element się rozwija, rozszerz jego obszar w dół tak, by jednocześnie zepchnął znajdujące się pod nim elementy. Tak powinno wyglądać rozwinięcie każdego elementu.

28 Wkładka W jaki sposób ? Ta stale zmieniająca się struktura musi być zawarta w przewijalnym obszarze, gdyż może stać się niezwykle długa. Przy otwieraniu i zamykaniu elementu powinno następować animowane przejście, gdyż sprzyja to orientacji użytkownika oraz zwraca jego uwagę na otworzony element.

29 Dlaczego?  Użytkownik widzi inne elementy listy, co może mu pomóc w przyswojeniu i wykorzystywaniu jej zawartości  Użytkownik może wybrać jednocześnie oglądać szczegóły kilku elementów

30 Przykłady

31

32 Siatka miniaturek  Co zrobić ? Utwórz listę przyciągających wzrok elementów i nadaj jej postać siatki „odbitek”. Pozwól użytkownikowi wybrać jedną lub więcej miniaturek do przeglądania lub zarządzania.

33 Siatka miniaturek  Kiedy używać ? Elementy listy oznaczone są właściwymi sobie miniaturkami graficznymi: obrazami, logo, zrzutami ekranu, pomniejszonymi zdjęciami itd. Są one na ogół utrzymane w jednakowym rozmiarze i stylu. Przy każdym chcesz umieścić niewielką ilość informacji o elemencie. Użytkownik chce obejrzeć całą listę, a być może musi ją szybko przejrzeć, by znaleźć interesującą go pozycję.

34 Siatka miniaturek  W jaki sposób? Rozmieść miniaturki w dwuwymiarowej siatce. Dopasuj je tak, aby były mniej więcej tego samego rozmiaru i siatka była schludna, umieść metadane w pobliżu miniaturki. Wyjątkiem są sytuacje, kiedy masz do czynienia z obrazami, których wymiary i proporcje są dla użytkownika przydatnymi informacjami. Przykładowo w zbiorze osobistych zdjęć znajdziemy zarówno wykadrowane pionowo, jak i poziomo.

35 Dlaczego ?  Atrakcyjny sposób przedstawiania wielu elementów w sposób skondensowany;  Tworzy hierarchię wizualną ukazującą elementy listy jako równoprawne, przy czym mocna kompozycja wizualna przyciąga oko do tej części strony;  Wzorzec ten dobrze sprawdza się na urządzeniach mobilnych.

36 Przykłady

37

38 Karuzela  Co zrobić ? Przedstaw listę atrakcyjnych wizualnie elementów w formie poziomego paska lub łuku i daj użytkownikowi możliwość przeglądania ich poprzez przewijanie lub przeciąganie miniaturek w jedną i w drugą stronę. Powiększ element centralny, jeżeli uznasz to za stosowne.

39 Karuzela  Kiedy używać ? Podobnie jak w siatce miniaturek elementy listy są oznaczone właściwymi sobie miniaturkami graficznymi. Lista jest niepodzielona na kategorie lub kontenery danych. Każdy element jest potencjalnie interesujący dla użytkownika. Użytkownicy będą przeglądać elementy dość niezobowiązująco, czyli raczej nie będą szukać czegoś konkretnego.

40 Karuzela W jaki sposób ? Utwórz miniaturki dla każdego elementu przedstawionego w karuzeli. Podobnie jak w siatce miniaturek należy pamiętać o rozmiarze i proporcjach miniaturek i o niewielkim rozmiarze metadanych. Kiedy przewijanie odbywa się w pionie, rozmieść miniaturki poziomo.

41 Karuzela  W jaki sposób ? Pokaż niewielką ich liczbę, czyli mniej niż dziesięć, a pozostałe ukryj. Gdyby użytkownik chciał poruszać się szybko po liście, jakby czegoś szukał, pod karuzelą poza strzałkami umieść dla niego pasek przewijania.

42 Dlaczego?  Wciągająca forma przeglądania elementów graficznych, która zachęca użytkownika tego, co już widać, oraz patrzenia, co jest dalej  Użytkownik nie może z łatwością przeskoczyć do konkretnego miejsca w liście toteż musi przewijać wszystkie elementy  Użytkownik ma szczegółowy widok jednego elementu, a jednocześnie widzi elementy bezpośrednio z nim sąsiadujące

43 Przykłady  http://getbootstrap.com/javascript/#carousel http://getbootstrap.com/javascript/#carousel

44 Przemienne tło  Co zrobić? Nadaj rzędom tabeli naprzemiennie kolor tła w dwóch podobnych odcieniach.  Kiedy używać ? Dane w interfejsie przedstawiane są w dużej tabeli o wielu kolumnach, a rzędy trudno graficznie oddzielić. Użytkownicy muszą poszukiwać konkretnych danych w tabeli.  W jaki sposób ? Wybierz parę spokojnych, słabo nasyconych kolorów o podobnych, lecz nieco odmiennych odcieniach.

45 Przemienne tło  W jaki sposób ? W kolejnych rzędach użyj tych kolorów tła na przemian. Jeżeli rzędy są wąskie, możesz poeksperymentować z grupowaniem ich, ale pamiętaj, że użytkownicy wolą kiedy, to pojedyncze rzędy są pokolorowane naprzemiennie. Wzorzec ten praktycznie eliminuje konieczność wstawiania poziomych kresek między rzędami. Jeśli jednak Twoim użytkownikom nie odpowiadają przemienne tła, możesz zamiast z nich skorzystać z bardzo cienkich linii poziomych.

46 Dlaczego?  Subtelnie odróżnione kolorystycznie bloki odgraniczają zawarte w nich informacje  Odbiorca odczytuje dane z tabel jako rzędy a nie tylko jako kolumny  Kolejne rzędy stają się spójnie wizualnymi obiektami  Użytkownik może obejrzeć rząd od lewej do prawej i z powrotem, i nie pomyli rzędów  Użytkownik zwraca uwagę, że sam „zarys” tabeli jest oddzielny od ogółu strony

47 Przykłady http://getbootstrap.com/css/ #tables-striped

48 Przykłady

49 Paginacja  Co zrobić? Podziel bardzo długą listę na wczytywane pojedynczo strony. Udostępnij użytkownikowi kontrolki pozwalające na poruszanie się po liście — do następnej, poprzedniej, pierwszej i ostatniej strony.

50 Paginacja  Kiedy używać ? Przedstawiasz listę, która może być niezwykle długa. Większość użytkowników szuka albo konkretnego elementu, albo przegląda początek listy w poszukiwaniu interesujących materiałów; tak czy inaczej, nie chcą on widzieć całej listy.  W jaki sposób? Po pierwsze, musisz zdecydować, ile elementów ma być na każdej stronie.

51 Paginacja  W jaki sposób? Odnieś to do ilości miejsca, jaką jeden element zajmuje, do tego, ile trwa wczytywanie lub wyświetlanie elementów, oraz do prawdopodobieństwa, że użytkownik znajdzie jeden lub więcej interesujących go elementów już na pierwszej stronie. Jeżeli tworzysz funkcję wyszukiwania, dopilnuj, by u góry pierwszej strony rezultatów wyświetlane były najlepsze wyniki.

52 Paginacja  W jaki sposób? Rozważ danie użytkownikowi wyboru liczby elementów na stronie. Następnie musisz określić sposób prezentowania paginacji. Czy ma się on znaleźć u dołu strony czy na górze.

53 Dlaczego ?  Paginacja dzieli listę na fragmenty, które użytkownik może przyswoić  Często używany podczas prezentacji wyszukiwania  Łatwo go wdrożyć  Użytkownik decyduje czy chce wczytać więcej elementów z listy czy dana strona w zupełności wystarczy

54 Przykłady http://getbootstrap.com/compon ents/#pagination

55 Przykłady

56 Bezpo ś rednie przej ś cie do elementu  Co zrobić? Kiedy użytkownik wpisuje nazwę elementu w tabeli lub dendrogramie, aplikacja powinna od razu „przeskoczyć” do owego elementu i zaznaczyć go.  Kiedy używać ? W interfejsie znajduje się przewijana lista, tabela, rozwijane menu, pole wyboru lub drzewo, gdzie znajduje się wiele elementów. Elementy są posortowane alfabetyczne lub numerycznie. Użytkownik chce zaznaczyć konkretny element szybko i dokładnie najlepiej przy użyciu klawiatury.

57 Bezpo ś rednie przej ś cie do elementu  W jaki sposób ? Kiedy użytkownik wpisuje pierwszą literę lub cyfrę nazwy elementu, którego szuka, aplikacja powinna przeskoczyć do pierwszego elementu, który pasuje do podanych danych; lista powinna być automatycznie przeciągnięta tak, by element był widoczny i zaznaczony. Kiedy użytkownik szybko wpisuje więcej znaków, zaznaczenie powinno być na bieżąco dostosowywane do podanych informacji.

58 Dlaczego?  Użytkownik może trzymać ręce na klawiaturze  Ludzie nie radzą sobie z przeglądaniem długich list słów i liczb, lecz komputery jak najbardziej

59 Przykłady

60 Przewijanie alfabetyczne  Co zrobić? Umieść litery alfabetu obok paska przewijania uporządkowanej alfabetycznie listy.  Kiedy używać ? Użytkownicy będą szukać bardzo konkretnych elementów z długiej listy – przyjmującej zwykle formę przewijanej listy, tabeli lub dendrogramu. Chcesz, żeby odnajdowanie elementów było łatwe i szybkie.  W jaki sposób ? Umieść długą, uporządkowaną alfabetycznie listę w przewijanym obszarze. Wzdłuż paska przewijania umieść litery alfabetu. Kiedy użytkownik klika daną literę, lista powinna być do niej przewijana.

61 Dlaczego ?  Zapewniają interaktywną mapę zawartości listy  Pozwalają na bezpośrednie przechodzenie do wybranych punktów uporządkowanych list

62 Przykład

63 Kaskaduj ą ce listy  Co zrobić? Przedstaw hierarchię w postaci interaktywnych list elementów z każdego jej poziomu. Wybór elementu hierarchii skutkuje wyświetleniem jego podrzędnych elementów w liście obok.

64 Kaskaduj ą ce listy  Kiedy używać ? Elementy listy ułożone są hierarchicznie. Taka hierarchia może być rozbudowana, a na każdym jej poziomie może znajdować się wiele elementów. Może chodzić o hierarchię dosłowną, tak jak w systemie plików, albo konceptualną. Wzorzec ten wykorzystuje się często, by dać użytkownikowi możliwość poruszania się po kategoriach i wybierania elementów spośród nich albo podejmowanie współzależnych decyzji.

65 Kaskaduj ą ce listy W jaki sposób ? Umieść elementy pierwszego poziomu hierarchii w liście znajdującej się najdalej po lewej; powinna w niej obowiązywać zasada jednokrotnego wyboru. Kiedy użytkownik zaznacza w niej któryś z elementów, wyświetl elementy podrzędne w drugiej liście. Podrzędne dla tych z drugiej listy wyświetl w trzeciej itd. Kiedy użytkownik dociera do elementów najniższego poziomu hierarchii – możesz umieścić szczegóły takiego elementu na prawym krańcu interfejsu.

66 Dlaczego ?  Rozkładając poziomy hierarchii na kilku przewijalnych listach możesz ją uzyskać pełniej  Rozłożenie elementów w listach pozwala na schludne uporządkowanie  Użytkownikowi łatwiej rozeznać się na którym poziome działa

67 Przykłady

68

69 Tabela drzewiasta  Co zrobić? Umieść pola elementów w kolumnach tabeli, lecz znajdujący się w pierwszej kolumnie zarys struktury drzewa zaznacz wcięciami.  Kiedy używać ? Elementy listy są wysoce ustrukturyzowane oraz charakteryzują się interesującymi dla użytkowników atrybutami. Możesz je zaprezentować w wielokolumnowej liście lub tabeli. Elementy są jednak przede wszystkim ujęte w hierarchię, więc wolisz, żeby były przedstawione w formie dendrogramu.

70 Tabela drzewiasta  W jaki sposób ? Dendrogram zamieść w pierwszej kolumnie, a atrybuty elementów w kolejnych. Rzędy – każdy z pojedynczym elementem – można zwykle zaznaczać. Sortowanie kolumn zakłóca właściwy układ dendrogra- mu, więc musisz udostępnić użytkownikowi dodatko-wy przycisk lub inny sposób na posortowanie zgodnie z układem pierwotnym.

71 Dlaczego ?  Łącząc dwie metody przeglądania danych w jeden widok, sumujemy korzyści obydwu podejść kosztem skompilowania warstwy kodowej i graficznej.  Możemy ukazać hierarchię elementów, a także matrycę dodatkowych danych lub atrybutów w jednej, scalonej strukturze

72 Przykłady

73

74 Pole nowego elementu  Co zrobić? Użyj pierwszego lub ostatniego rzędu tabeli lub listy jako pola służącego do tworzenia nowych elementów  Kiedy używać ? W interfejsie znajduje się tabela, lista, dendrogram albo jakiekolwiek inne poziome zobrazowanie zbioru elementów. Na jakiś etapie użytkownik do zbioru chce dodać nowe elementy. W interfejsie nie ma miejsca na dodatkowe przyciski czy kontrolki ale chcemy, aby tworzenie nowego elementu było efektowne i łatwe dla użytkownika.

75 Pole nowego elementu  W jaki sposób ? Daj użytkownikowi łatwy i intuicyjnie zrozumiały sposób tworzenia nowych elementów w pierwszym pustym rzędzie tabeli. Edycję elementu można rozpocząć np. kliknięciem rzędu. Po kliknięciu nowy element powinien pojawić się w rzędzie. Zawartość kolumn w tabeli powinna być modyfikowalna, co pozwala użytkownikowi nadać im wartości. W komórkach powinny znaleźć się pola tekstowe, rozwijane listy bądź jakiekolwiek inne narzędzia pozwalające na szybkie i dokładne przypisanie owych wartości.

76 Dlaczego ?  Sprawiamy, że element powstaje tam, gdzie rzeczywiście będzie istniał  Większa spójność pod względem konceptualnym niż tworzenie elementów w osobnej części interfejsu  Interfejs jest bardziej schludny, ponieważ zajmuje mniej miejsca na ekranie  Eliminuje „przeskoki” do nowych okien  Wymaga od użytkownika mniej pracy

77 Przykłady

78