Projektowanie grafiki dla publicznych stron internetowych
-
Upload
squiz-poland -
Category
Documents
-
view
1.128 -
download
1
Transcript of Projektowanie grafiki dla publicznych stron internetowych
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