 Kamil Adamuszek.  wiadomości e-mail  komentarze  posty na forum  artykuły  zdjęcia  produkty  wyniki wyszukiwania  linki  Itp..

Prezentacja na temat: " Kamil Adamuszek.  wiadomości e-mail  komentarze  posty na forum  artykuły  zdjęcia  produkty  wyniki wyszukiwania  linki  Itp.."— Zapis prezentacji:

1  Kamil Adamuszek

2  wiadomości e-mail  komentarze  posty na forum  artykuły  zdjęcia  produkty  wyniki wyszukiwania  linki  Itp..

3 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? Wyszukiwanie określonego elementu – Czy użytkownik szuka czegoś konkretnego? Sortowanie i filtrowanie Organizowanie, dodawanie, usuwanie i kategoryzowanie elementów

4 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ą?  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

5 1. Wybór dwupanelowy 2. Uszczegółowienie w jednym oknie 3. Wkładka 4. Siatka miniaturek 5. Karuzela 6. Przemienne tło 7. Paginacja 8. Bezpośrednie przejście do elementu 9. Przewijanie alfabetyczne 10. Kaskadujące listy 11. Tabela drzewiasta 12. Pole nowego elementu

6  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.  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. 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.

7  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

8

9  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.  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. 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.

10  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

11

12  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ć.  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. 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.

13  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

14

15  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ę.  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.

16  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

17

18  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.  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. 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.

19  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

20  http://getbootstrap.co m/javascript/#carous el http://getbootstrap.co m/javascript/#carous el

21  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. 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.

22  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

23 http://getbootstrap.com/css/ #tables-striped

24  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. 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. 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.

25  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

26 http://getbootstrap.com/compon ents/#pagination

27  Kiedy używać ? W intefejsie 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,  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.

28  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

29

30  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. Przykład

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

32  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.  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.

33  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

34

35  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.  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 dendrogramu, więc musisz udostępnić użytkownikowi dodatkowy przycisk lub inny sposób na posortowanie zgodnie z układem pierwotnym.

36  Łą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

37

38  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.  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.

39  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

40