Projektowanie grafiki dla publicznych stron internetowych

Embed Size (px)

Citation preview

Open Source CMS w Administracji Publicznej

Zagadnienia grafiki w aspekcie ustawyo dostpie do informacji publicznej, funkcjonalnoci jak i podania najnowszymi trendami - responsive web design

Warszawa, 22. listopada 2011

O autorze Micha Czebotar

W firmie Squiz od 2005 roku, kilka lat w biurze londyskim, kilka miesicy w biurze w Sydney, od trzech lat w biurze w Szczecinie.

Zakres obowizkw to praca techniczna przy wdraaniu systemw CMS oraz praca kreatywna.
W biurze w Polsce gwnie praca kreatywna - projektowanie graficzne, analiza sajtw
w kwestii architektury informacji, rozwiza pod ktem uytecznoci.

Electoral Commission, Dept. Of Human Services

Projektowanie grafiki dla administracji publicznej:

nie ogranicza si jedynie do pracy w photoshopie

analiza sabych punktw w dotychczasowych serwisach

analiza pod ktem architektury informacji

funkcjonalno (usability) - atwo w posugiwaniu si stron, szybko odnajdywania informacji, satysfakcja z korzystania z serwisu

future-proof: skalowalno pod ktem dodawania nowych treci, sekcji

Nastpnie:

future-proof: analiza pod ktem rozwiza technicznych w przyszoci, wersji jzykowych, wersji na rne urzdzenia

wireframes, czyli zilustrowane prototypy strony (oglny layout i funkcjonalno)

analiza brand guidelines (jeli takowe istniej)

praca w photoshopie z coraz wiksz iloci szczegw

Open Source CMS w Administracji Publicznej

Powrt do rzeczywistoci

Oczekiwania:

przetarg ogoszony na tydzie przed terminem skadania ofert

do zoenia oferty niezbdne projekty graficzne

wymagania: jeden do trzech projektw strony gwnej, projekt podstrony

wicej: projekt dla wybranych sekcji (landing pages)

wicej: projekt wersji okolicznociowych

projekt wersji high-contrast, projekt strony mobilnej

Co oferuje zleceniodawca:

dla nowej wersji serwisu: najczciej kilku- lub nawet dzisicioletni serwis do wasnej analizy

dla nowych serwisw: niewystarczajc ilo informacji, mao konkretw

brak analizy niedoskonaoci, konretnych oczekiwa

brak struktury serwisu, mapy strony

Moe by gorzej:

niestety zbyt konkretne oczekiwania wynikajce z nieznajomoci aktualnych technologii i trendw

czsto pniej cikie do przeskoczenia, ze wzgldu na zaistnienie w SIWZ

Przykady?

tzw. promo-bannery na stronie gwnej promujce tre serwisu (np. aktualnoci) wykonane w technologii Adobe Flash z moliwoci adowania "obrazkw i tekstu" z zewntrzynych plikw

to samo moemy wykona w duo prostszy sposb za pomoc javascriptu, zwikszajc tzw. dostpno serwisu

cofamy si w czasie kilka lat

Inne ciekawostki:

strona MUSI mieci si na ekranie 1024x768, tre gwna w tzw. ramce przewijana paskiem

bardzo sprecyzowane rozwizanie

autentyczny przykad z przetargu z wrzenia 2011

cofamy si w czasie dobre 10 lat

Efekt:

projekty robione "pod przetarg", mimo le dobranych rozwiza

prace oceniane na podstawie pierwszego wraenia - kolorowe i z efektami, jak na stronach korporacyjnych znanych marek czy produktw

kilkudniowa praca, mimo braku sprecyzowanych oczekiwa i niewystarczajcej informacji, oceniana przez fachowcw, ale rwnie przez osoby bez dowiadczenia

dlaczego przetargi na zoone serwisy ogaszane s na ostatni chwil?

Open Source CMS w Administracji Publicznej

Serwisy administracji publicznej

Charakterystyka:

serwisy maj suy przede wszystkim uytkownikom kocowym, nie tylko ministerstwu

najczciej serwisy, w ktrych znajduje si bardzo duo treci, ilo stron i dokumentw czsto liczona w tysicach

informacja powinna by atwo odnajdywalna, zarwno w obrbie caego serwisu jak i na poszczeglnych stronach

Charakterystyka c.d.:

serwisy te s dynamiczne, nowe treci publikowane s codziennie, tworzone s nowe sekcje

do zarzdzania treci wykorzystywane s systemy CMS

Obiorcy:

uytkownicy serwisw to przekrj przez cae spoeczestwo

wczajc osoby starsze i mniej "biege w internecie"

osoby niedowidzce, osoby z mniejsz sprawnoci ruchow

Dostpno:

zgodnie z prawem powinny by dostpne dla wszystkich, przez dostpno rozumiemy moliwo korzystania z serwisu i dotarcia do wszystkich treci

niepenosprawni, w tym niewidzcy, stanowi 15% ogu mieszkacw pastw UE

Konstytucja RP oraz ustawa o dostpie do informacji publicznej mwi o rwnoci obywateli w dostpie do informacji bez dyskryminacji ze wzgldu na jakiekolwiek kryteria w tym stopie sprawnoci

do tego samego zobowizuj dyrektywy UE eEurope 2002 oraz Sekcja 508 Rehabilitation Act w USA

Realia:

ministrowie UE zobowizali si, e do 2010 roku strony administracji publicznej dostosowane bd
do potrzeb osb niepenosprawnych

w Polsce nagminnie pomijane s zasady dostpnoci dla osb niepenosprawnych i zagroonych wykluczeniem cyfrowym

w ostatnich 2-3 latach publikowanych jest sporo raportw naganiajcych ten problem

ponad poowa stron kandydatw na Prezydenta RP
w 2010 roku nie speniaa w najmniejszym stopniu standardw dostpnoci

Podstawowe bedy:

brak nagwkw, mapy strony, opisw ALT i TITLE dla obrazw i linkw

niemono zwikszenia wielkoci tekstu

niedostateczny kontrast

Dostpno to rwnie:

zmieniaj si nawyki uytkownikw internetu, coraz czciej korzystaj oni z internetu z urzdze przenonych typu telefony i tablety

wedug Gartnera, organizacji doradczej w zakresie technologii informacyjnych, w 2013 wizyty z urzdze przenonych mog przewyszy te z komputerw stacjonarnych

Dostpno to rwnie:

serwisy adm. publ. najczciej maj bardzo du liczb odwiedzin, w sytuacjach krytycznych liczone
w tysicach wej na minut

wyniki wyborw, katastrofy, gdy adres strony opublikowany zostanie w telewizji

dostpno to rwnie dostpno serwisu 24h/7

Nawigacja

wielopoziomowa hierarchia pozwoli logicznie pogrupowa strony

rne sposoby nawigacji: breadcrumb, gwna pozioma + dropdown, lewa + nazwa sekcji, footer

natychmiastowa informacja gdzie si aktualnie znajduje uytkownik

wyszukiwarka

Responsive web design

przegldanie penej wersji strony na telefonie jest niewygodne (zoomowanie)

rozwizaniem osobna okrojona wersja mobilna

coraz wicej urzdze o najrniejszych rozdzielczociach

responsive design - strona reaguje na rozdzielczo urzdzenia, na ktrym jest wywietlana

Open Source CMS w Administracji Publicznej

Kliknij, aby edytowa format tekstu konspektuDrugi poziom konspektuTrzeci poziom konspektuCzwarty poziom konspektuPity poziom konspektuSzsty poziom konspektuSidmy poziom konspektusmy poziom konspektuDziewity poziom konspektu