Opracowywanie publikacji i wizualizacja danych

Opracowywanie publikacji i wizualizacja danych Użyteczność i anatomia danych Jachranka, 12-13 października 2011 Trener: Michał Brennek Moduł 1 1 Kto? Kto 2 Michał Brennek, miło mi Cię powitać! 2

Co to są dane? Dane 33 39 cm 76 85 cm 70900 km 3 Jaka jest różnica między danymi? Po co je gromadzić? 3 Prosty test... Test 4 Ile udało Ci się zapamiętać? 4

Co to jest wiedza? Wiedza 5 Czy można to przedstawić inaczej? Oczywiście. Od neolitu ludzie posługują się opowieściami. Kiedy siedzieliśmy przy ognisku, dzieci nie uczono o danych dotyczących obwodu nogi mamuta, wytrzymałości kości oraz kącie balistycznym pod jakim rzuca się dzidą. Dzieci słuchały opowieści. Pamiętaj, że naszym celem jest komunikacja. Komunikacja INFORMACJI. Jaka jest różnica? 5 Proces pozyskiwania wiedzy Proces Dane Struktura Interpretacja Informacja Powiązania Wiedza Projektowanie informacji (information design), to proces przekształcania (tłumaczenia) złożonych, surowych, niestrukturyzowanych danych w wartościowa i pełną znaczenia informację 6 Dopiero nadając strukturę danym oraz interpretując je tworzymy informację. To czy stanie się częścią naszej wiedzy to drugi element tego procesu. Decyduje o tym jej użyteczność oraz budowanie powiązań z już istniejącymi elementami wiedzy. 6

Komponenty systemu Fizjologia (ewolucja) Postrzeganie Analiza Informacja Decyzja (czy warto) Wiedza Filtry 7 Każdy z nas ma swój zestaw filtrów przez który patrzy na świat. To one decydują o tym jak go postrzegamy. To one decydują o tym, które informacje zostaną przyswojone a które odrzucone. Uwaga! Podczas snu filtry nie działają dlatego nie warto zasypiać przy reklamach... 7 Co dała nam ewolucja 7H15 M3554G3 53RV35 70 PR0V3 H0W 0UR M1ND5 C4N D0 4M4Z1NG 7H1NG5! 1N 7H3 B3G1NN1NG 17 W45 H4RD BU7 N0W 0N 7H15 L1N3 Y0UR M1ND 1S 8 Sprawdź jak łatwo nasz umysł potrafi się dostosować! 8

Co dała nam ewolucja 7H15 M3554G3 53RV35 70 PR0V3 H0W 0UR M1ND5 C4N D0 4M4Z1NG 7H1NG5! 1N 7H3 B3G1NN1NG 17 W45 H4RD BU7 N0W 0N 7H15 L1N3 Y0UR M1ND 1S... THIS MESSAGE SERVES TO PORVE HOW OUR MINDS CAN DO AMAZING THINGS! IN THE BEGINNING IT WAS HARD BUT NOW ON THIS LINE YOUR MIND IS... R3PUBL1K@ M@C3D0N11 9 Rzeczywiście nasz umysł dokonuje niesamowitych rzeczy i bardzo łatwo czytać tekst w kolejnych linijkach ale czy musimy się tak męczyć? 9 Jak to działa w praktyce F 10 Aby pomóc w komunikowaniu informacji prowadzone są badania z dziedziny użyteczności. Wyraźnie widać, że oko porusza się po stronie w taki sposób, że tworzy literę F. Oczywiście na tym przykładzie została użyta strona wyników wyszukiwania Google, ale podobne badania stosuje się do dowolnych treści, uzyskując podobne wyniki. Metoda jest prosta za pomocą specjalnego urządzenia śledzi się ruch gałki ocznej. Tam gdzie się zatrzymuje jest stawiany punkt. Im więcej punktów tym cieplejsza barwa (patrz metoda hipsometryczna). Wniosek: nie czytamy a skanujemy, cała linijka jest czytana dopiero wtedy, gdy jest przydatna dla naszej wiedzy. 10

Jak to działa w praktyce 3 kliknięcia 11 Tylko 3 kliknięcia muszą nas doprowadzić do celu w internecie. To także przekłada się na inne media. Mamy coraz mniej cierpliwości. Trochę w przypadku książek przypomina to sytuację opisaną przez Lema Sepulkarium patrz Sepulki, patrz Sepulkowanie, patrz Sepulkarium. 11 Jak to działa w praktyce 7 sekund 12 Badania pokazują, że na tyle starcza nam cierpliwości Potem zaczynamy się irytować... 12

Jak to działa w praktyce 14% pola 13 Badania heat map pokazują, że o tyle ogranicza się pole widzenia podczas kiedy jesteśmy zirytowani. 13 Filtry Wstaw info o filtrach 14 14

Proces projektowania informacji Kto to robi: - Projektant Grafiki - Architekt Informacji - Projektant Interakcji - Projektant UX - Specjalista użyteczności - Specjalista ergonomii - Specjalista interfejsów (HCI) - Specjalista od treści Recepta na przeładowanie informacją 15 Wszyscy ci ludzie zajmują się projektowaniem informacji. Każdy z nich ma jednak inne filtry patrzy na swoją prace pod innym kątem. Ale uwaga... Więcej urządzeń (papier, e-papier, PC) oznacza więcej interfejsów. Należy zadbać o prowadzenie użytkownika (tak jak wycieczka z przewodnikiem). Stwórz spójną opowieść! 15 Proces projektowania informacji Projektowanie informacji musi być: Zorientowane na treść; Stawiać użytkownika w centrum uwagi; Dobre wieści A gdy proces jest dobrze poprowadzony oszczędza zasoby! 16 Stąd za chwilę wykonamy ćwiczenie... 16

Ale jak to zrobić? Poznaj swojego odbiorcę! Czy są tu jakieś priorytety? 17 Warsztat: Tworzymy personę. Za pomocą pytań z następnego slajdu stwórz osoby, korzystające z Twoich publikacji. Do kogo są one skierowane. Co chcesz nimi osiągnąć? 17 Persona - dane demograficzne i personalne - charakterystyka (opis) - opis potrzeb i preferencji - element wizualny (rysunek lub zdjęcie) - scenariusze 18 Kiedy już stworzysz poszczególne persony, nadaj im priorytety, kto jest najważniejszym użytkownikiem? Kolejnym krokiem jest zastanowienie się, jakie działania podejmują dane osoby. To pozwala uzyskać tak zwane scenariusze użycia (use cases), które są podstawą tworzenia wymagań. Pamiętaj, że każde wymaganie musi zostać skonfrontowane z potrzebami persony jeżeli nie jest uzasadnione odrzuć je. Z drugiej strony jako fachowiec z pewnością masz pewne przekonania o przydatności danej funkcji bądź nie... Nie odrzucaj tego bezkrytycznie. Zdrowy rozsądek jest najlepszym przewodnikiem. 18

Wymagania funkcjonalne Persony w akcji pozwalają opracować zestaw wymagań, względem których należy konfrontować decyzje podejmowane na etapie tworzenia publikacji. 19 Czy wszystkie wymagania należy uwzględnić? Złotą zasadą jest ta przytaczana przez Elihau Goldratt'a: It has to be good enough but not any better. 19 Jak pogodzić publikacje Kluczowe przy podejmowaniu decyzji o założeniach merytorycznych (i ich skalowaniu) publikacji powinny być potrzeby użytkownika. 20 To w jaki sposób użytkownik będzie wykorzystywał daną publikację decyduje o wymaganiach. Można to badać. Zapytaj co sądzi o danej publikacji (lub jej założeniach) ktoś spoza zespołu. Zrób test A/B. Przyglądaj się jak obce osoby korzystają z Twoich publikacji. Słuchaj krytyki ona nie jest wymierzona w Ciebie ale pokazuje, które potrzeby odbiorcy są niespełnione. 20

Elektronicznie czyli jak? Nowe media stwarzają znacznie szersze możliwości niż papier. Dlatego właśnie wynaleziono hipertekst i model XML. 21 Hipertekst, w zamyśle miał być narzędziem naukowym pozwalający łączyć dokumenty tak jak w cytowaniu tylko łatwiej. A co by było gdyby tabela mogła łączyć się z komentarzem metodologicznym? Model XML w uproszczeniu pozwala na oddzielenie danych od wyglądu. Co oznacza, że można dowolnie konstruować tabele, wykresy, schematy i mapy - wkładając w nie potrzebne dane. 21 Papier zniesie wszystko... Media i ich możliwości Jakie techniki wspomagające pracę użytkownika można wykorzystać w wersji papierowej? 22 Lista do sprawdzenia: - Czy papier jest odpowiedni? - Czy druk jest wystarczająco gęsty optycznie? - Czy kolory / tony są odpowiednio zróżnicowane? - Czy publikacja jest czytelna? - Czy publikacja jest dostosowana do odbiorcy (zmęczenie oczu)? - Czy treść jest logicznie powiązana? - Czy treść jest logicznie podzielona? - Czy elementy treści są zróżnicowane według ważności (tytuły, śródtytuły, wytłuszczenia)? - Czy treść jest powiązana w sposób ułatwiający nawigację? - Czy krój prowadzi oko i jest dostosowany do wielkości i papieru? - Czy wykorzystuje się dodatkowe media? Czy są one wykorzystane w dobry sposób (np.. bez wpisywania kilometrowego adresu url)? Bardzo często wystąpi konieczność użycia czcionki o małych rozmiarach. Czy używana czcionka jest czytelna? Może warto zaprojektować specjalną czcionkę? Decyzje do podjęcia dotyczą nie tylko samego kroju (na początek szeryfowy bezszeryfowy) ale także np.: odległości znaków i linii... 22

Media i ich możliwości Żeby opublikować wersję elektroniczną zbadajmy najpierw stronę internetową... 23 Strona internetowa nie jest tylko nośnikiem słupem ogłoszeniowym Spełnia ważną funkcję w publikacji danych Lista do sprawdzenia: - Czy strona jest wykonana poprawnie technicznie? - Czy strona spełnia standardy? - Czy wyszukiwarki mogą strawić stronę i nie umrzeć? - Czy strona ma przejrzystą nawigację? - Czy strona jest intuicyjna? - Czy strona daje się obsługiwać na rożnych mediach? - Czy spełniona jest zasada 3 kliknięć? - Czy zachowanie użytkowników na stronie internetowej jest monitorowane i czy wysnuwane są wnioski? - Czy masz wpływ na kształt strony internetowej (to biznes determinuje działanie a nie wsparcie IT)? - Czy adresy internetowe są czytelne dla człowieka i logiczne? - Czy prowadzony jest aktywny dialog z użytkownikami? 23 Zbadajmy stronę www... http://www.stat.gov.pl/gus Na początek 44 błędy 24 Zanim zaczniesz myśleć o użyteczności publikacji, należy przygotować użyteczność strony www. Narzędzia poniżej: http://validator.w3.org http://browsershots.org/ 24

Media i ich możliwości Czy znasz swoje możliwości? 1. Masz prawo do łatwego administrowania treścią. 2. Czy znasz możliwość zmiany mediów (style css)? 3. Czy znasz... 25 Technologie: 1. HTML5 2. CSS 3. KML i mapy Google 4. Flash (is evil) 5. Hurtownie danych 6. Szablony danych 7. AJAX Ale uwaga, nie wszystkie technologie są kompatybilne. W dalszej części będziemy mówić o Google Maps i Google Earth. 25 Media i ich możliwości E-Ink Kindle, Nook itd... Uwaga tylko 6''! 26 Lista do sprawdzenia: Czy użytkownik na pewno używa takich urządzeń? Czy publikacja będzie dobrze wyglądać w skali szarości? Czy prosta konwersja (pdf) wystarczy? Czy 6'' to nie za mało? Czy ta publikacja jest możliwa do wykorzystania mobilnie (executive summary, breif dla dziennikarzy) Czy publikację łatwo pobrać? 26

Media i ich możliwości Stary dobry Portable Document Format 27 Format ten został stworzony do przenoszenia publikacji do drukarni, obecnie funkcjonuje także w odchudzonej internetowej wersji. Jeżeli coś się udało zrobić w pdf'ie to będzie wyglądać tak samo, wszędzie (błąd uwaga na znaki diakrytyczne). Tak naprawdę nie opłaca się tworzyć samych pdf'ów lepiej tworzyć stronę www i generować pdf dynamicznie. Czy PDF jest dostosowany do mediów, na których będzie użytkowany? Co z przenośnością? 27 Środki wyrazu - Kolor i gęstość optyczna - Kształt - Ś w i a t ł o - Kontrasty - Tło - Elementy wspomagające (szeryfy,...prowadnice) 28 Czy wykorzystano wszystkie możliwości danych mediów? Jak zareaguje na to użytkownik? Czy wspierasz jego cele? Czy publikacja nie będzie męcząca? Czy dane mają się nadawać do odczytania, czy uznajemy, że mapa będzie schematyczna (tzw. mapka), wykres to tylko linia przebiegająca w którymś kierunku... Na jakie ustępstwa jesteśmy gotowi pójść? Wszystkie te środki muszą wspierać użytkownika w jego działaniu. 28

Złodzieje 95% kradzieży w internecie dotyczy własności intelektualnej. Jak się zabezpieczyć? 29 Ważna adnotacja o zastrzeżeniu praw autorskich zastrzegamy w roku ujawnienia. Najlepszym zabezpieczeniem są otwarte licencje. Jeżeli chcemy sprzedawać publikację, możemy zabezpieczyć ją publikując jako obraz (uwaga na wagę dokumentu), lub kodując licencję w nagłówku pliku albo steganograficznie (koszty). 29 Model obiektowy Mapy Google? Dane Opis Układ Grafiki ------------------------------------------ Baza danych 30 Obiektowy model danych różni się tym od liniowego, że dane są przechowywane w bazie danych jako obiekty atomowe. Poszczególne dane mają swoich właścicieli uprawnionych do ich edytowania. Można śledzić powiązania między tabelami konstruując kostki danych - tak jak to ma miejsce w hurtowniach danych (kostka danych to taka tabela, która ma więcej niż 2 wymiary). W oddzielnym miejscu przechowuje się analizy w formie wzorów i powiązań. Kiedy potrzeba (użytkownik wysyła zapytanie), hurtownia danych składa obiekt wiedzy (knowledge part) pobierając dane, układ, wygląd, opis i uwagi metodologiczne z bazy danych. Ponieważ dane są podłączane dynamicznie, użytkownik może sam tworzyć kolejne polecenia obliczeń. Ponieważ model ten nie jest liniowy, łatwiej nim zarządzać. Można także wykorzystać CROUDSOURCING! 30

Samoczynna publikacja Hurtownia danych Źródło danych (atrybut) Widok Źródło danych (atrybut) Kostka danych (wymiary) Zapytanie użytkownika 31 Hurtownia danych w uproszczeniu Takie rozwiązanie ma pewne zarówno wady jak i zalety. Wymaga znaczącej wiedzy (plus), wymaga inwestycji w sprzęt (minus) oraz oprogramowanie i wdrożenie (minus) ale także jest łatwiejsze do zarządzania (plus). Dzięki konfiguracji widoków (tak jakby stron rocznika) zapobiega spiętrzeniu prac. Łatwo konwertować do postaci pdf i dalej do druku. 31 Poprawka Flannery'ego Poprawka Flannery'ego pozwala dostrzec różnice w wielkościach sygnatur kartodiagramu. 32

Czy nie za dużo? Sygnatury, Kolor, Gęstość... A mam taką mapę... W przypadku publikacji elektronicznych istnieje naczelna zasada: mniej znaczy lepiej. Nic dziwnego, skoro możemy dowolnie włączać i wyłączać warstwy, tak jak w GIS po co obciążać percepcję... 33 Którędy do Fastnet Konkretne dane, w konkretnym celu... Proste badanie, prosta prezentacja, za pomocą języka KML i map Google. Efekt: wspaniałe narzędzie wspomagające ODKRYWANIE WIEDZY. 34

Przykład dobrego użycia hurtowni... http://vulcan.project.asu.edu/gearth/ http://earthengine.googlelabs.com Google, najlepiej radzi sobie z analizą danych. Cała rewolucja Google'a na tym polega. Nic dziwnego, ze potrafią już pozyskiwać automatycznie dane z wielu źródeł (co nie jest wcale trudne) oraz analizują dane zawarte w obrazach... 35 Analiza publikacji Czy publikacja spełnia założenia merytoryczne? Czego oczekuje od niej użytkownik? Jakich mediów można użyć do jej prezentacji? Jakie są ograniczenia? Jakie są możliwości? Czy ilustracje są poprawne? Czy wspomagają percepcję użytkownika? Czy to, że użytkownik wie coś na dany temat nie spowoduje błędnego odbioru informacji? 36 Podczas tego warsztatu przeanalizujemy w zespołach mocne i słabe strony publikacji, z punktu widzenia potrzeb użytkownika i planowanych mediów. 36

1. Informacja o sytuacji... http://www.stat.gov.pl/gus/5840_739_plk_html.htm Analiza publikacji 2. Biuletyn statystyczny... http://www.stat.gov.pl/gus/5840_738_plk_html.htm 3. Polska w liczbach... http://www.stat.gov.pl/gus/5840_6308_plk_html.htm 4. Polska w Unii... http://www.stat.gov.pl/gus/5840_741_plk_html.htm 5. Moduł międzynarodowy... http://www.stat.gov.pl/gus/6060_plk_html.htm 6. Mały rocznik statystyczny... http://www.stat.gov.pl/gus/5840_737_plk_html.htm 7. Rocznik Statystyczny RP 37 Podczas tego warsztatu przeanalizujemy w zespołach mocne i słabe strony publikacji, z punktu widzenia potrzeb użytkownika i planowanych mediów. 37 Narzędza... Pytanie wszech czasów... JAK POKAZAĆ ZMIENNOŚĆ? Tabela? Wykres? Mapa? Kartodiagram? Wykres dynamiczny? Mapa dynamiczna? Graal wizualizacji... Aby go odnaleźć powiąż dane i użyj obiektów... Reszta to półśrodki.. 38 Zmienność jest trudno uchwycić w nieinteraktywnej publikacji papierowej. Jednakże wiele wątpliwości można rozwiązać zastanawiając się nad celem publikacji. Czy będzie ona używana do badań? 38

Bo fantazja jest od tego... Są problemy z techniką... Występuje spiętrzenie prac Oprogramowanie jest niekompatybilne Mamy problemy z przygotowaniem publikacji papierowej i elektronicznej Mamy wąskie gardła... 39 Zastanówmy się jak mógłby wyglądać idealny urząd statystyczny. Możemy do tego wykorzystać tak zwaną strategię Disneya. 39 Opracowywanie publikacji i wizualizacja danych Podglądanie dobrych praktyk Jachranka, 12-13 października 2011 Trener: Michał Brennek Moduł 2 40

Skoncentruj się na robocie Ścieżka krytyczna i łańcuch krytyczny... Rejestr doświadczeń... Zmiany... 41 Jak zmienić coś w istniejącym systemie? Po pierwsze zarządzaj! Dlaczego dane spływają z opóźnieniem rejestruj wiedzę... Zadaj pytania jak możesz uniknąć problemów. Kogo należy włączyć do zespołu, żeby uzyskać zmianę? Kto jest sojusznikiem, kto przeciwnikiem? Ech ta polityka... 41 Jak to robią inni... http://www.turkstat.gov.tr 42 42

Jak to robią inni... http://www.turkstat.gov.tr 43 Turk STAT umiejętnie wykorzystuje media społecznościowe... Czy to jest zgodne z celami użytkowników? 43 Jak to robią inni... http://www.bfs.admin.ch/bfs/portal/en/index.html 44 Dobrze rozplanowana strona. 44

Jak to robią inni... bit.ly http://epp.eurostat.ec.europa.eu/portal/page/portal/eurostat/home/ 45 Dobre usability, dobry standard, ale przeciętna prezentacja danych 45 Jak to robią inni... bit.ly!!!!!!!? http://epp.eurostat.ec.europa.eu/cache/ity_offpub/ks-ei-11-001/en/ks-ei-11-001-en.pdf 46 Jaki jest cel tego wykresu? Czy on ma pozwolić i odczytać dane czy jest po prostu profesjonalnym elementem graficznym? Jak to wygląda z perspektywy użytkownika? 46

Jak to robią inni... http://www.census.gov/ 47 Przejrzysta nawigacja US Census 47 Jak to robią inni... http://factfinder2.census.gov/faces/nav/jsf/pages/index.xhtml 48 Nowa strona FactFinder w US Census wykorzystuje informacje o przeglądarce do dobrego dostosowania wyświetlanych informacji. 48

Jak to robią inni... http://2010.tnsdigitallife.com/ 49 TNS zbudował aplikację internetową do prezentacji danych. Wykorzystuje ona czytelną technologię Flash (taką, która daje się wyszukiwać) oraz HTML5. Aplikacja wspomaga proces ODKRYWANIA i PRZYSWAJANIA wiedzy. Dzięki intuicyjnemu interfejsowi można ją odkrywać bez żadnych instrukcji. 49 Infografika http://images.fastcompany.com/upload/realestate_bigger.jpg 50 Infografika z zasady jest uproszczeniem, przekazywanej informacji. Nie służy do czytania, tylko do skanowania. To forma Briefingu. Infografiki są natomiast nieocenione w organizacji i strukturze treści. Jeżeli wraz z czytelnymi ikonami i schematami kolorystycznymi pozwalają nam nawigować. 50

Narzędzia Hurtownia danych i wsparcie informatyczne (zalety/wady) GIS Aplikacje internetowe Infografiki 51 Każde z wymienionych narzędzi ma swoje wady i zalety ich ocenę należy przeprowadzić wyłącznie z punktu widzenia użytkownika i jego celów! 51 Narzędzia Gdzie jest granica między analizą naukową a zabawą? http://epp.eurostat.ec.europa.eu/cache/bcc2/group1/xdis_en.html 52 Ruch, kolory to dobrze ale gdzie użyteczność? Ile zmiennych jesteś w stanie obserwować jednocześnie? Einstein potrafił 4... 52

Ciekawe wykorzystanie narzędzi wspomagających... Narzędzia 53 ECB wykorzystuje proste dane on-line, ale tabela ma narzędzia wspomagające, dzięki którym nie trzeba się domyślać można odczytać... 53 Narzędzia Flash NIE ale HTML5 to jest przyszłość! http://www.fusioncharts.com/demos/blueprint/ 54 Ze względu na coraz większa popularność MID oraz MMD (Mobile Internet Device, Mobile Multimedia Device) popularnie zwanymi urządzeniami do konsumpcji mediów, opartych o otwarte systemy operacyjne (Linux, Android itd..) nie warto inwestować w technologie zamknięte. HTML5 rozwiązał bardzo wiele kwestii kompatybilności i przenośności, pozwala także modyfikować wizualizację danych w locie. 54

Narzędzia Ocena narzędzia: 1. Funkcjonalność z punktu widzenia użytkownika 2. Przenośność 3. Koszty wdrożenia/korzyści wdrożenia 4. Spójność systemu 5. Wartość dodana 55 Szczególnie krytycznym należy być podczas analizy kosztów i korzyści wdrożenia. Często nakłady pracy przeważają nad efektami. 55 Dlaczego 56 Każde narzędzie powinno być spójne z tym co chcesz opowiedzieć za pomocą danych. Jeżeli nie wspiera Twojej opowieści odrzuć je... 56

Dane teleadresowe: Centrum Szkoleniowe FRR Sp. z o.o. ul. Świeradowska 43, piętro VI, wejście F 02-662 Warszawa Telefon 22 583 10 00 Fax 22 583 10 09 E-mail szkolenia@frr.pl Dowiedz się więcej Wszelkie prawa zastrzeżone. Kopiowanie, powielanie i wykorzystywanie materiałów bez zgody właściciela zabronione. 2010-2011 Centrum Szkoleniowe FRR Sp. z o.o. 57