Kryteria oceny szaty graficznej stron internetowych

Bożena Jarosz
[email protected]
Pracownia Technologii Nauczania
Akademia Pedagogiczna im. KEN
Kraków
Kryteria oceny szaty graficznej stron internetowych
wykorzystywanych w edukacji
Wstęp
Internetowe strony www od lat cieszą się nie słabnącym zainteresowaniem
młodzieży. Stałym elementem zdecydowanej większości stron jest szata graficzna, która
współtworzy całość dokumentu i wpływa na jego charakter. Troska o jakość aspektu
wizualnego wydaje się istotna z kilku poniższych powodów.
1. Badania wykazują, że przeciętny, szczególnie młody internauta, przeszukuje
strony pobieżnie i ma z nimi często chwilowy, powierzchowny kontakt. W tej sytuacji o tym,
czy użytkownik zatrzyma się na stronie dłużej, może zadecydować nie tylko jej treść, ale
także niebanalne rozwiązania graficzne.
2. W czasach popularyzacji kultury obrazu i jej postępującej dominacji nad kulturą
druku, warto zadbać o walor estetyczny, a nawet intelektualny wymiar każdego obrazu,
z którym styka się młodzież, gdyż obraz taki niewątpliwie kształtuje gust młodego odbiorcy.
3. Jeżeli efekt wizualny zostanie użyty jako uzupełnienie prezentowanych na stronie
treści, wówczas staje się nie tylko źródłem przeżycia estetycznego, lecz – co najważniejsze
– istotnie wpływa na odbiór tych treści.
Znaczenie jakości graficznej strony w ogólnej ocenie stron www – kilka
przykładów
Szereg instytucji rzeczywistych oraz wirtualnych, w tym portale internetowe,
dostrzegają znaczenie jakości internetowych witryn reprezentujących firmy czy też osoby
prywatne i podejmują się oceny tych stron, najlepsze nagradzając lub wyróżniając, np. za
pomocą pewnej liczby przyznanych gwiazdek. Na własny użytek instytucje formułują też
zestawy kryteriów oceny. Wśród nich mniej lub bardziej akcentuje się aspekt graficzny
strony, często w powiązaniu ze sposobem nawigacji. W ubiegłym roku przedstawiłam
kryteria, zaproponowane przez bibliotekarzy i dla bibliotekarzy instytucji akademickich,
wśród których do szaty graficznej odnosi się znaczna ich część [Bednarek-Michalska,
2005].
Nie wszystkie zajmujące się oceną stron instytucje zwracają uwagę na walory
estetyczne. Decyduje o tym głównie charakter strony, cel jej stworzenia oraz grupa
odbiorców, dla których została przeznaczona. Dwa takie przypadki wymieniłam na początku
poniższej listy z przykładami.
1
1. Przedstawiony przez Komisję Europejską projekt wytycznych dotyczących
kryteriów oceny jakości serwisów internetowych poświęconych zdrowiu skupia się głównie
na kwestiach związanych z prawdziwością i rzetelnością przedstawianych danych oraz
odpowiedzialnością i etyką. Pominięto całkowicie aspekt graficzny, natomiast jako ostatnie
kryterium na liście umieszczono jedynie łatwość korzystania z serwisu [Unia Europejska...,
2005].
2. Także wirtualna organizacja Investor Relations Best Practice, która od kilku lat
ocenia i nagradza strony internetowe przedsiębiorstw, nie jest zainteresowana
promowaniem jakości wizualnej. Jako jeden z ważnych elementów strony organizacja
uznała jednakże łatwość nawigacji [IR Best Practice rozdało nagrody, 2003].
3. Z kolei wykładowcy Wyższej Szkoły Handlu i Prawa, którzy oceniali serwisy
internetowe działających w kraju towarzystw ubezpieczeniowych, jakość graficzną uznali
za jedną z sześciu cech podlegających ocenie [Kozerski, 2002].
4. Polski Portal Astronomiczny zajął się oceną internetowych witryn o tematyce
astronomicznej. Na własne potrzeby stworzono zestaw siedmiu kryteriów W punktach
drugim i trzecim wymieniono „ładną i miłą dla oka” oprawę graficzną oraz wygodę nawigacji,
która powinna być intuicyjna [http://astronomia.pl, 2005]. Wyróżniająca się szata graficzna
może stanowić istotny atut strony i podnieść jej pozycję w sześciostopniowej skali
„gwiazdkowej”.
5. W ogłoszonym kilka lat temu konkursie „Polska w Internecie” zorganizowanym
przez PSI oraz KBN wśród pięciu kryteriów oceny stron www odnajdujemy elementy, które
niewątpliwie wiążą się z jakością wizualną, a więc sposób prezentacji, oryginalność oraz
wrażenie ogólne [Aktualności, 2005].
6. Znany portal Polska.pl również wyróżnia umieszczone w katalogu strony
za pomocą gwiazdek (do trzech). Ocenie podlega m.in. poziom graficzny oraz
funkcjonalność [http://www.polska.pl/katalog, 2005].
7. Centrum Informatyczne Państwowej Wyższej Szkoły Zawodowej w Pile podjęło się
analizy internetowych witryn szkolnych. Ustalone zostały cechy, jakimi powinna odznaczać
się idealna strona internetowa szkoły ponadgimnazjalnej. Należą do nich: forum, wersje
językowe, czytelność, rekrutacja, gazetka, sukcesy, zdjęcia, linki, twórczość uczniów
(np. poezja, twórczość artystyczna lub inne dokonania), konkursy, materiał dla innych,
wspomaganie wymiany międzynarodowej oraz pomoc w realizacji procesów opartych na
współpracy. Warto podkreślić, że przy ocenie czytelności i przejrzystości zwrócono uwagę
na dopasowanie szaty graficznej, odpowiednią czcionkę i tło, na którym widnieje tekst oraz
zrozumiałą, intuicyjną i łatwą w obsłudze strukturę interfejsu [Centrum Informatyczne, 2004].
Podobne zalecenia dotyczące zasad nawigacji znalazły się w sformułowanych dalej
w artykule wskazówkach, które autorzy adresują do twórców szkolnych stron www.
Kryteria i wymagania dotyczące wizualnej jakości stron edukacyjnych
Zestaw kryteriów przydatnych do analizy i oceny grafiki oraz innych efektów
wizualnych na stronach www przeznaczonych dla młodzieży musi uwzględniać szereg
wymagań ogólnych, dotyczących projektowania stron. Warto w tym miejscu odwołać się
do najlepszych tradycji projektowania graficznego, które jednakże trzeba uzupełnić
2
zestawem zasad „webmasteringu”, a więc działań w specyficznym środowisku edytorów
oraz języków programowania (np. HTML, Flash, JavaScript czy SVG). Jednocześnie należy
pamiętać, iż zasadniczy cel tworzenia stron wspierających kształcenie oraz portali
szkolnych, zasadniczo różni się od komercyjno-marketingowych celów różnorodnych firm
i instytucji, czy też portali ogólnotematycznych. Po uwzględnieniu tych aspektów proponuję
przy ocenie wizualnej jakości stron www kierować się następującą listą wymagań ogólnych.
1. Wymagania edukacyjne, metodyczne i informacyjne. Strony wykorzystywane
przez młodzież w procesie kształcenia mają różnorodny charakter. Jednakże za wyjątkiem
statycznych i animowanych galerii internetowych (profesjonalnych i amatorskich), na
wszystkich stronach nadrzędne znaczenie mają poprawne merytorycznie treści oraz
rzetelne informacje. W zależności od typu strony efekty wizualne należy więc
podporządkować aspektom edukacyjnym i informacyjnym. „Od witryn internetowych
wymagamy takiej samej obsługi redakcyjnej, jak ze strony innych mediów” [Kruge, 2005].
Stosowne treści powinno się wyróżniać, umiejętnie dobierając wielkość, styl oraz barwę
czcionki. Kolor jest tu szczególnie istotnym czynnikiem graficznym, pełniącym funkcję
eksponującą i informacyjną. Poza zróżnicowaniem tekstu umożliwia podział płaszczyzny
strony na niezależne obszary.
Szata graficzna powinna także – o ile to jest możliwe – korelować z prezentowaną na
stronie tematyką. Należy jednakże zwracać uwagę, aby efekty wizualne wzmocniły przekaz
edukacyjny, ale go nie zdominowały.
2. Wymagania funkcjonalne i psychologiczne. „Projektowanie graficzne to obszar
twórczości artystycznej, który obejmuje (...) m.in. funkcje komunikacyjne i działania
organizujące wizualną komunikację (...)” [http://www.asp.gda.pl, 2005]. Poprzedni punkt
dostarcza przykładów na to, że w ocenie jakości stron internetowych istotną rolę odgrywa
struktura interfejsu, jako ważny wyróżnik funkcjonalności strony. Nawigacja musi być łatwa
i intuicyjna, tak aby niepotrzebnie nie absorbować uwagi internauty, który powinien skupić
się na merytorycznej zawartości strony. Ważne jest, aby początkujący webmasterzy nie
korzystali w sposób bezkrytyczny z ułatwień i kreatorów, które automatycznie generują
elementy menu [Bonarski, 2003]. Uzyskane w ten sposób efekty mogą być estetyczne
i niezwykle atrakcyjne wizualnie, lecz jednocześnie rozpraszające, czy nawet denerwujące.
Niewłaściwym pomysłem jest również ukryte menu, którego użytkownik musi poszukiwać,
błądząc wskaźnikiem myszy po różnych fragmentach ekranu. Projektant uzyskuje tym
sposobem bardzo oszczędny i elegancki wygląd strony, niezakłócony elementami mało
atrakcyjnymi, lecz zniechęcony poszukiwaniem użytkownik może stronę po prostu opuścić.
„Najlepszym rozwiązaniem pozostaje więc menu stale widoczne na każdej stronie serwisu
(...) np. przyklejone do krawędzi okna przeglądarki, a więc zachowujące tę samą pozycję,
niezależnie od rozmiaru okna programu oraz pozycji pionowego paska przewijania”
[Bonarski, 2003]. Aby ułatwić użytkownikowi skoncentrowanie się na treści przekazu, należy
także – o ile to możliwe – unikać ramek przewijanych wewnątrz okna głównego, które
zawsze, niezależnie od jakości i estetyki, rozpraszają uwagę.
Odbiór treści zawartych na stronie wspomaga również czytelna i przejrzysta forma
wszystkich elementów graficznych. Dotyczy to szczególnie czcionki oraz tła, na którym
została ona wyeksponowana. Wielkość czcionki, kolorystyka oraz użyte desenie powinny
3
być dostosowane do typu strony oraz do ilości treści na stronie. Niezależnie od rodzaju
przekazywanych treści należy jednakże unikać:
• mało czytelnej czcionki – drobnej, zagęszczonej, rozmytej, zbyt ozdobionej
ornamentem lub zbyt uproszczonej, pozbawionej charakterystycznych szczegółów
różnicujących znaki,
• tła, które „zlewa się” kolorystycznie z czcionką lub pokryte jest drobnym, dominującym
nad czcionką deseniem, zmniejszającym czytelność,
• ostrych, jaskrawych barw wypełniających rozległe fragmenty ekranu,
• animowanych obrazów większego formatu lub małych, lecz użytych w nadmiarze, jeżeli
prezentowane są na ekranie bez przerwy i nie można ich zatrzymać w czasie,
• nieostrych, niezbyt czytelnych rysunków, schematów, wykresów oraz filmów.
Wszystkie wymienione elementy nie tylko zakłócają korzystanie z informacji, lecz
także mogą powodować szybkie zmęczenie i rozdrażnienia odbiorcy.
Niekwestionowaną zasadę obowiązującą przy projektowaniu stron stanowi zasada
umiaru. Przeładowanie strony elementami informacyjnymi oraz zbędnymi informacyjnie,
poza wątpliwym efektem estetycznym, powoduje zagubienie i dezorientację internauty lub
odwrócenie jego uwagi od treści. Chaos należy wyeliminować lub ograniczyć do minimum.
Zaleca się również stosować konwencjonalne rozwiązania w nawigacji [Kruge, 2005].
3. Wymagania estetyczne, plastyczne i artystyczne. Stajemy tu przed trudnym
(niemożliwym?) zadaniem sformułowania zasad w obszarze, który z natury wymyka się
rygorom, klasyfikacjom i zakazom. Kontynuując myśl rozpoczętą w poprzednim punkcie
stwierdzamy, że w projektowaniu graficznym równie istotne, jak funkcjonalność są „czysto
artystyczne, indywidualne, a więc także intuicyjne umiejętności (...)” [http://www.asp.gda.pl,
2005].
Traktując stronę jako obraz ujęty w ramy ekranu, należy zadbać o kompozycję
ogólną, tak aby internauta już przy pierwszym kontakcie odniósł pozytywne wrażenie,
zachęcające do dalszej eksploracji. Podobnie więc jak obraz – widok na ekranie, oglądany
z pewnego oddalenia, powinien stanowić zaplanowaną logicznie i plastycznie całość,
tworzącą odpowiedni do treści klimat. Zadecyduje o tym podział płaszczyzny strony
na obszary o odpowiednio dobranych kształtach i proporcjach (fragmenty informacyjnie
niezależne wyeksponowane na odrębnych, barwnych prostokątach, zunifikowane tło
podzielone liniami czy też pozbawione dodatkowych podziałów itp.), zrównoważona lub –
przeciwnie – niespokojna kolorystyka, spójność użytych ornamentów i elementów
ozdobnych (kontury lub rozmycie, cienie, głębia), spójność wykorzystanych krojów czcionki
oraz rozkład akcentów. Oprócz elementów, które decydują o całościowym, strukturalnym
odbiorze obrazu, istotny jest również detal. Należy więc zadbać o estetyczną i artystyczną
jakość użytych rysunków, niewielkich animacji oraz fotografii, a także – w miarę możliwości
– o ich kolorystyczne zharmonizowanie z całością strony. Ciekawym rozwiązaniem jest takie
wykorzystanie rysunków i fotografii, aby obok funkcji informacyjnej pełniły one jednocześnie
na stronie funkcję kompozycyjną.
Za wymagania estetyczne zgodne z powszechnym poczuciem piękna i harmonii
można uznać także – wymienione już w nieco innym kontekście w poprzednim punkcie –
zalecenia odnoszące się do czytelności i przejrzystości wizualnej. I tak, np. dysonansem
4
okażą się z pewnością znaki tekstu konkurujące z drobnym ornamentem pokrywającym tło.
Również wiele drobnych statycznych lub animowanych obiektów rozmieszczonych na
stronie bez spójnej plastycznie koncepcji, a jedynie w celu przyciągnięcia uwagi internauty –
zamieni witrynę w tandetny, jarmarczny obrazek. Tu również można powtórzyć zasadę
stosowania z umiarem detali oraz ozdób. Ozdobny (lub uproszczony) kształt czcionki –
którego nie zalecam stosować w dużych fragmentach tekstu – umiejętnie dobrany
i wyeksponowany np. w tytule – podkreśli walor plastyczny i estetyczny strony. Natomiast
nieuzasadniony nadmiar ozdób będzie kojarzyć się ze złym gustem.
Jak już wspomniałam, wszystkie wymienione zalecenia, mogą okazać się
nieprzydatne w konfrontacji z konkretną artystyczną wizją projektanta strony. Dzieła
nieprzeciętne często wymykają się rygorystycznie narzuconym kanonom, z drugiej strony
zaś te kanony tworzą. Jako ważny cel edukacyjny zawarty w projekcie plastycznym można
przecież uznać kształtowanie świadomości estetycznej młodych odbiorców, której nie
sposób zamknąć w obszarze nakazów i zakazów. Z tego względu rozważania zawarte
w niniejszym punkcie należy traktować raczej jako drogowskaz, który zignorujemy wówczas,
gdy wybierzemy własną, oryginalną drogę.
4. Wymagania techniczne. Opracowanie szaty graficznej witryn internetowych
wydawnictw, bibliotek, portali edukacyjnych (czy też innych instytucji, stanowiących
autorytet na rynku edukacyjnym) powinno się powierzyć plastykom – profesjonalistom
[Jarosz, 2004]. Należy też zadbać o odpowiednią ostrość i kontrast fotografii
przeznaczonych do publikacji w Internecie. W przeciwnym wypadku grafika bitmapowa,
zubożona w procesie kompresji, będzie prezentować się niekorzystnie [Bonarski, 2003].
Od strony technicznej – dla podniesienia atrakcyjności – warto uwzględnić w projekcie
najnowsze rozwiązania technologiczne (np. animacje warstw). Technika osadzania
odrębnych obiektów w dokumencie podzielonym tabelą na fragmenty zyskała już miano
„sędziwej”. Dlatego też implementacji cyfrowej projektu powinni się podjąć profesjonalni
webmasterzy. Efektownie prezentują się witryny wykonane w całości w jednorodnej
technologii, co wymaga jednakże doświadczenia i mistrzowskich umiejętności [Bonarski,
2003].
Kończąc podjęty w niniejszym rozdziale temat pragnę zwrócić uwagę na kolejność,
w jakiej wymieniłam zalecenia i wymagania ujęte w czterech punktach. Pomimo, iż
w artykule oceniamy walory wizualne stron, aspekty estetyczne znalazły się dopiero na
trzeciej pozycji w zestawie. Kolejność wymagań nie została tu dobrana przypadkowo.
Wynika ona z nadrzędnego celu poznawczego, jakiemu – moim zdaniem – ma służyć każda
internetowa witryna edukacyjna.
Literatura
Aktualności. [W:] TELEINFO 23/96. http://www.teleinfo.com.pl/ti/1996/23/f01.html [dostęp
05.07.2005]
Bednarek-Michalska B.: Ocena jakości bibliotekarskich serwisów informacyjnych
udostępnianych w Internecie. http://ebib.oss.wroc.pl/2002/31/michalska.php [dostęp
10.07.2005]
5
Bonarski P.: Podstawowe zasady tworzenia dobrych stron WWW.
http://www.chip.pl/arts/archiwum/n/printversion/printversion_60889.html, 2003 [dostęp
22.06.2005]
Centrum Informatyczne, Państwowa Wyższa Szkoła Zawodowa w Pile: Próba oceny
szkolnych stron WWW. http://student.pwsz.pila.pl/~sknti/strszkpgim.doc [dostęp 12.04.2004]
http://astronomia.pl/katalog/index.php?id=kryteria [dostęp 10.07.2005]
http://www.asp.gda.pl/wydzialy/malgraf/projgraf/1ppg/1ppg.html [dostęp 8.02.2005]
http://www.polska.pl/katalog [dostęp 10.07.2005]
IR Best Practice rozdało nagrody. [W:] Polskie Forum Corporate Governance.
http://www.pfcg.org.pl/article/3680_IR_Best_Practice_rozdalo_nagrody.htm, 2003 [dostęp
22.06.2005]
Jarosz B.: Przestrzeń graficzna w przekazach multimedialnych w dobie dominacji kultury
obrazu. [W:] Materiały 14. ogólnopolskiego sympozjum naukowego „Komputer w edukacji”.
Pod red. naukową J. Morbitzera. Wydaw. Naukowe AP, Kraków 2004, s. 73–77
Kozerski K.: PZU Życie wyróżnione. [W:] Internet Standard.
http://www.internetstandard.pl/news/45435.html, 2002 [dostęp 10.07.2005]
Kruge S.: Nie każ mi myśleć. O życiowym podejściu do funkcjonalności stron internetowych.
Wydaw. Helion, Gliwice 2005
Unia Europejska proponuje kryteria oceny stron internetowych o tematyce zdrowotnej.
[W:] mp OnLine. http://www.mp.pl/kurier/show.php?aid=7990 [dostęp 10.07.2005]
6