organizacja treści: architektura informacji i struktura...

61
Organizacja treści: architektura informacji i struktura aplikacji

Upload: others

Post on 12-Jun-2020

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Organizacja treści:

architektura

informacji i struktura

aplikacji

Page 2: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Co to jest Architektura

informacji

Architektura informacji (AI) – sztuka oraz nauka organizowania i etykietowania stron internetowych, społeczeostw sieciowych

i oprogramowania w celu wspierania użyteczności informacji. Jest związana z tworzeniem i przechowywaniem informacji w postaci cyfrowej w celu ułatwienia użytkownikowi dostępu do niej.

Page 3: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

FORMY PRZEDSTAWIENIA

Pokazanie jednego elementu.

Pokazanie listy lub zestawu elementów.

Udostępnienie narzędzi kreatywnych.

Umożliwienie wykonania czynności.

Page 4: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Pokazanie jednego elementu

To najprostszy przypadek. Wokół samej treści można rozmieścid drobne narzędzia, które są potrzebne do interakcji z nią np. suwaki, ramkę rejestracji, kontrolki nawigacyjne.

Page 5: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Pokazanie jednego elementu

Page 6: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Pokazanie listy elementów

Jest to przedstawienie informacji w zorganizowany sposób np. Listy tekstowe, menu, siatki obrazów, rezultaty wyszukiwania,

listy e-maili.

Page 7: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Pokazanie listy elementów

Page 8: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Pokazanie listy elementów

Page 9: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Udostępnienie narzędzi

kreatywnych

Są to edytory, kreatory służące do tworzenia programów, grafik oraz różnych innych projektów. Zwykle posiadają więcej niż jeden obszar roboczy do edycji wielu projektów jednocześnie, płótno (obszar roboczy) oraz paletę narzędzi.

Page 10: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Udostępnienie narzędzi

kreatywnych

Page 11: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Udostępnienie narzędzi

kreatywnych

Page 12: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Udostępnienie narzędzi

kreatywnych

Page 13: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Udostępnienie narzędzi

kreatywnych

Page 14: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Umożliwienie wykonania

czynności

Interfejs nie tylko służy do prezentowania elementów lub tworzenia, lecz ma również za zadanie pomóc użytkownikowi w wykonaniu jakieś czynności, np.: Logowanie, Rejestracja, Drukowanie, Wczytywanie plików, Robienie zakupów, Określenie ustawieo, itd.

Page 15: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Logowania i Rejestracja

Page 16: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Rejestracja

Page 17: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Drukowanie

Page 18: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Ustawienia

Page 19: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Wczytywanie i Wysyłanie

Plików

Page 20: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Umożliwienie wykonania

czynności

Page 21: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Wzorce

Wzorce odnoszą się do projektowania wysokopoziomowego, określają formę interakcji ogólniejszych sekcji aplikacji lub serwisów, a czasem nawet całego systemu. Oto 10 z nich: Ekspozycja, Wyszukiwanie i Przeglądanie, Aktualności, Menadżer obrazów, Pulpit, Płótno i Paleta, Kreator, Edytor ustawieo, Różne widoki, Wiele obszarów roboczych, Wielopoziomowy system pomocy.

Page 22: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Ekspozycja, Wyszukiwanie i

Przeglądanie

Na stronie głównej witryny lub aplikacji umieszczane są trzy elementy: polecany artykuł lub produkt, pole wyszukiwania oraz listę przedmiotów lub kategorii do przeglądania.

Page 23: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Ekspozycja, Wyszukiwanie i

Przeglądanie

Te trzy elementy są bardzo istotne. Wyszukiwanie i przeglądanie to dwa nierozłączne sposoby znajdowania pożądanych treści. Jedni ludzie wiedzą, czego szukają i wystarczy im pole wyszukiwania, gdy inni wolą swobodnie przeglądad przedstawione im listy i kategorie. Natomiast polecane elementy mają przyciągad użytkowników. Są ciekawsze od list kategorii i pól wyszukiwania zwłaszcza wtedy, kiedy są opatrzone zachęcającymi obrazkami i nagłówkami.

Page 24: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Ekspozycja, Wyszukiwanie i

Przeglądanie

Page 25: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Ekspozycja, Wyszukiwanie i

Przeglądanie

Page 26: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Aktualności

W aktualnościach pokazywane są elementy w liście, ułożone w odwróconym porządku chronologicznym, czyli z najnowszymi informacjami na górze. Dzięki temu ludzie mogą z łatwością śledzid wiadomości, gdyż najnowsze treści pojawiają się na samej górze. Mogą sprawdzad często i mied pewnośd, że zobaczą, co trzeba. Często aktualizowane kanały można podzielid na łatwiejsze w zarządzaniu podkanały dobrane według tematu, nadawcy, źródła, wyszukiwania lub innych czynników. Można również pozwolid użytkownikowi samodzielnie zdecydowad, które z nich obejrzy. Serwisy, takie jak Facebook czy Twitter wyświetlają klikane listy takich podkanałów po lewej stronie panelu z nadchodzącą treścią.

Page 27: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Przy każdym elemencie można wyświetlid następujące informacje: Tytuł, skrót składający się z kilku słów lub zdao oraz miniaturkę, jeśli

jest dostępna, Wzmianka o osobie, która napisała aktualizację, blogu, na którym

opublikowano artykuł, autorze tego artykułu albo nadawcy e-maila, Data, Link do aktualizacji. Daje to użytkownikowi możliwośd natychmiastowego reagowania na

przychodzące wiadomości. Gwiazdki, kciuki w górę, „polubienia” i dodawanie do ulubionych to niektóre narzędzia.

W wielu serwisach z Aktualnościami, w tym na Facebooku i Twitterze,

w interfejsach komputerowych i na urządzenia mobilne wykorzystywany jest wzorzec Nieskooczona lista.

Pozwala ona użytkownikowi wczytad stronę lub dwie najnowszych aktualizacji oraz „cofnąd się w czasie” wedle upodobania.

Page 28: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Aktualności

Page 29: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Aktualności

Page 30: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Menadżer Obrazów

Użyte są miniaturki, podgląd elementów i interfejs umożliwiający przeglądanie zasobów, by utworzyd znajomą strukturę do zarządzania zdjęciami, filmami i innego rodzaju obrazami. Składa się z dwóch głównych widoków: Siatki Miniatur elementów listy oraz dużego podglądu wybranego elementu. Użytkownicy mogą między nimi przeskakiwad.

Page 31: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Menadżer Obrazów

Page 32: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Menadżer Obrazów

Page 33: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Pulpit

Umieszczone są elementy wyświetlające dane na pojedynczej, wypełnionej informacjami i regularnie aktualizowanej stronie.

Pulpit ma za zadanie pokazywad użyteczne informacje, sam się aktualizowad, wyświetlad dane w graficznej formie itd.

W wielu internetowych pulpitach wykorzystane są następujące wzorce: Zatytułowane sekcje, Zakładki i rozwijane panele, Ruchome panele, Uszczegółowienie w jednym oknie, Różnego rodzaju listy i tabele, Przemienne tło, Infografiki, Chmurka informacyjna.

Page 34: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Pulpit

Page 35: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Pulpit

Page 36: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Pulpit

Page 37: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Pulpit

Page 38: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Płótno i Paleta

To powszechnie rozpoznawalna paleta obok pustego płótna. Użytkownik klika przyciski na palecie, aby stworzyd coś na płótnie. Składają się one na edytor graficzny. Taki edytor zazwyczaj służy do tworzenia nowych obiektów i rozmieszczania ich w wirtualnej przestrzeni.

Page 39: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Płótno i Paleta

Page 40: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Kreator

Kreator prowadzi użytkownika przez interfejs krok po kroku, by wykonad czynności w przypisanej kolejności. Zadanie jest rozbijane na sekwencję drobniejszych czynności, którymi użytkownik zajmuje się po kolei, doskonale ułatwiając jego wykonanie. Dzięki niemu użytkownik nie musi samodzielnie zrozumied struktury zadania, które może byd bardzo skomplikowane.

Page 41: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Kreator

Page 42: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Kreator

Page 43: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Kreator

Page 44: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Kreator

Page 45: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Edytor ustawień

To samodzielna strona lub okno, gdzie użytkownik może zmienid ustawienia, preferencje albo właściwości. Jeżeli znajduje się wiele ustawieo to treści podzielone są na osobne zakładki i podstrony. Edytor Ustawieo różni się znacząco od Kreatora i charakteryzuje bardzo konkretnymi wymaganiami. Użytkownik musi poradzid sobie ze znalezieniem i zmianą pożądanej właściwości, ale nie wolno go zmuszad do przechodzenia przez narzuconą sekwencję kroków. Istotna jest wolnośd dostępu. Właściwości powinny byd pogrupowane w dobrze oznaczone i sensowne kategorie. Jest możliwośd ich przeglądania, nie tylko zmieniania. Wartości ustawieo są widoczne na pierwszy rzut oka.

Page 46: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Edytor ustawień

Page 47: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Edytor ustawień

Page 48: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Różne widoki

Pozwalają użytkownikowi przełączad się między widokami, które są znacząco różne od widoku domyślnego.

Różnych widoków można używad z różnych względów, np.: Użytkownicy mają pewne preferencje dotyczące

szybkości, stylu graficznego i innych właściwości, Użytkownik może odczuwad potrzebę rzucenia

okiem na dane z innej perspektywy, aby zgłębid istotę sprawy. Może to byd np. przełączenie między topograficznym a drogowym widokiem mapy.

Page 49: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Różne widoki

Page 50: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Różne widoki

Page 51: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Różne widoki

Page 52: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Wiele Obszarów Roboczych

Użyte są liczne zakładki wysokopoziomowe, grup zakładek i okien , aby użytkownik mógł mied jednocześnie dostęp do więcej niż jednej strony, projektu, pliku lub kontekstu.

Istnieją różne sposoby na wyświetlanie wielu obszarów roboczych. W wielu aplikacjach użyte są elementy, takie jak: Zakładki, Oddzielne okna systemu operacyjnego, Kolumny i panele w obrębie okna, Podzielone okna z możliwością regulowania podziału. Jeżeli w każdym obszarze roboczym ma się znajdowad

stosunkowo prosta treśd, np. pliki tekstowe, listy i Aktualności, podzielone okna i panele wystarczą. Jeśli treści mają byd bardziej złożone, potrzebne mogą byd całe zakładki i oddzielne okna, żeby użytkownik mógł jednocześnie widzied więcej.

Page 53: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Wiele Obszarów Roboczych

Page 54: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Wiele Obszarów Roboczych

Page 55: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Są to wszelkie funkcje pomagające użytkownikowi w wykonywaniu wszelkich zadao za pomocą danego programu. Pomoc wielopoziomowa, nawet wtedy gdy w ogóle nie przypomina standardowego „systemu pomocy”, dociera do każdego, kto jej potrzebuje, bez względu na to, czy osoba wykonuje daną czynnośd po raz pierwszy czy jest to użytkownik wykonujący ją na co dzieo.

Wielopoziomowy System

Pomocy

Page 56: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Wielopoziomowy System

Pomocy

Page 57: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Wielopoziomowy System

Pomocy

Page 58: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Wielopoziomowy System

Pomocy

Page 59: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Wielopoziomowy System

Pomocy

Page 60: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

Wielopoziomowy System

Pomocy

Page 61: Organizacja treści: architektura informacji i struktura …math.uni.lodz.pl/~robpleb/PIU/Lab6/pkt2.pdfUdostępnienie narzędzi kreatywnych Są to edytory, kreatory służące do tworzenia

DZIĘKUJEMY ZA UWAGĘ !