Univerza v Ljubljani
Akademija za likovno umetnost in oblikovanje
Diplomsko delo
Univerzitetni študijski program prve stopnje
Personalizirana vizualizacija problematike podnebnih sprememb
Zala Križ
Ljubljana, 2021
Univerza v Ljubljani
Akademija za likovno umetnost in oblikovanje
Diplomsko delo
Univerzitetni študijski program prve stopnje
Personalizirana vizualizacija problematike podnebnih sprememb
Mentor: doc. Robert Žvokelj
Somentorica: prof. dr. Petra Černe Oven
Ime in priimek avtorice: Zala Križ Študentka izrednega študija Vpisna številka: 42170043
Študijski program in smer: Oblikovanje vizualnih komunikacij, Grafično oblikovanje
Ljubljana, september 2021
Naslov diplomskega dela: Personalizirana vizualizacija problematike podnebnih sprememb
Title of the thesis: Personalized Visualization of Climate Catastrophe
vizualne komunikacije visual communications
oblikovanje uporabniške izkušnje user experience design oblikovanje uporabniških vmesnikov user interface design
vizualizacija podatkov data visualization
informacijsko oblikovanje information design
spletno oblikovanje web design
uporabnost usability
klimatske spremembe climate change
diplomska naloga BA thesis
UDK številka: 766: 004.738.1(043.2)
Izvleček
V diplomski nalogi sem načrtovala personalizirano vizualizacijo podatkov problematike globalnega segrevanja v Sloveniji, ki bi pri uporabniku vzbudila skrb in pripravljenost za spremembo vedenja ter sprejemanje podnebju prijaznih politik.
Posledice podnebnih sprememb bodo vse bolj vplivale na naša življenja in pomembno je, da razumemo, od kod te spremembe izvirajo, kako bodo na nas vplivale in kako lahko posledice blažimo.
Projekta sem se lotila z raziskavo področja komunikacije z uporabnikom, psihologije, načrtovanja uporabniške izkušnje, uporabniških vmesnikov, oblikovanja za splet in informacijskega oblikovanja. Ob upoštevanju temeljnih načel teh področij sem oblikovala končno rešitev – spletno mesto, kjer bi bile informacije predstavljene na personaliziran način.
Predstavljena rešitev obravnava dve področji vplivov podnebnih sprememb, vendar njena struktura dopušča širjenje nabora.
Abstract
In my thesis I designed a personalized visualization of climate change data in Slovenia, the goal of which is to provoke concern, affect a change in behaviour and adopt climate-positive policies. Climate change will have ever greater consequences on our lives and that is why it is important to understand why these changes are occurring, how they will impact us and how we might mitigate them.
First I studied the field of user communication, psychology, user experience design, user interface design, web design and information design. With the use of principles from these fields I designed a website where the information is presented in a personalized way.
The project addresses two areas of climate change impacts but its design allows for expansion.
Kazalo
1.0 Uvod 8
2.0 Kontekst 10
2.1 Načrtovanje uporabniške izkušnje (UX) . . . .11
2.2 Načrtovanje uporabniškega vmesnika (UI) . . . .12
2.2.1 Spletni uporabniški vmesniki . . . . 13
2.3 Uporabnost . . . .15
2.4 Informacijsko oblikovanje . . . .16
2.5 Oblikovanje spletnih strani . . . .17
2.5.1 Branje oz. skeniranje zaslonov . . . . 17
2.5.2 Tekstopisje . . . . 21
2.5.3 Sporočilnost slikovnega gradiva . . . . 22
2.5.4 Zemljevid strani in skelet . . . . 22
2.5.5 Mreža . . . . 22
2.5.6 Berljivost in čitljivost . . . . 23
2.5.7 Vizualna in tipografska hierarhija. . . . 23
2.5.8 Uporaba barv . . . . 23
2.6 Podnebne spremembe . . . 24
2.7 Izobraževanje kot strategija . . . 25
2.8 Informiranje in ozaveščanje . . . 25
2.9 Zavedanje problema . . . 25
2.10 Zakaj personalizirana vizualizacija . . . 26
3.0 Analiza 28 3.1 Ministrstvo za okolje in prostor, ARSO . . . 29
3.2 Primeri dobre prakse . . . 32
3.2.1 National Geographic, 5 Ways Climate Change Will Affect You . . . . 32
3.2.2 Covid-19 sledilnik . . . . 34
3.2.3 Danes je nov dan, Stanovanje = sanje . . . . 35
4.0 Umestitev personalizirane vizualizacije podnebnih sprememb v obstoječi nabor vsebin 38
5.0 Razvoj rešitve 40
5.1. Izbira področja . . . .41
5.2 Ciljna skupina . . . .41
5.3 Organizacija strani . . . 42
5.4 Skelet . . . 44
5.5 Tipografija . . . 46
5.5.1 Serif ali Sans Serif . . . . 46
5.5.2 Serif ali Sans Serif za ekrane . . . . 46
5.5.3 FF Yoga in FF Yoga Sans . . . . 46
5.6 Barva . . . 47
5.7 Hierarhija . . . 49
6.0 Predstavitev rešitve 51
7.0 Zaključek 79
Literatura 80
Seznam slikovnega gradiva 84
1.0 Uvod
1 Posledice podnebnih sprememb, Umanotera, dostopno na
<https://www.umanotera.
org/podnebne-spremembe/
fizikalno-ozadje-podnebnih- sprememb-in-njihove-posledice- za-slovenijo/posledice-podnebnih- sprememb/#toggle-id-4> (10. 4. 2021).
2 Biljana PEISCHL, Rajko DOLINŠEK, Informa Echo d.o.o, [OP07]
Ozaveščenost javnosti o vplivih podnebnih sprememb, ARSO OKOLJE:
Kazalci okolja, 10. 4. 2020, dostopno na
<http://kazalci.arso.gov.si/sl/content/
ozavescenost-javnosti-o-vplivih- podnebnih-sprememb>
(5. 5. 2021).
Podnebne spremembe in življenje z njimi vse bolj postajajo naša realnost, čeprav mislimo, da bodo posledice čutene šele daleč v prihodnosti in daleč stran od nas.
Podnebne spremembe bodo v naslednjih desetletjih imele ogromen vpliv na naše zdravje, prehranjevalne verige, življenjsko udobje in migracije – spremembe, ki jih ne bo mogoče zamejiti le na revnejše države in ranljivejše prebivalce.1
Kljub temu da se o podnebnih spremembah in njenih posledicah danes veliko govori, pa ARSO ozaveščenost slovenske javnosti o vplivih podnebnih sprememb označuje z oceno slabo.2
V času velike količine informacij in dezinformacij je jasna, verodostojna, prilagojena komunikacija še toliko bolj pomembna. V Sloveniji imamo ogromno znanstvenikov, ki se ukvarjajo s spremljanjem in merjenjem stanja podnebnih sprememb in širšega okolja, a žal so njihovi izsledki le malokrat primerno predočeni javnosti.
V diplomski nalogi sem poskušala rešiti problem personalizirane predstavitve in vizualizacije podatkov problematike podnebnega segrevanja v Sloveniji.
Medij spletne strani sem izbrala, saj lahko do nje dostopa veliko število uporabnikov, zato sem se osredotočila na raziskovanje oblikovanja uporabniške izkušnje,
uporabniških vmesnikov, uporabnosti in informacijskega oblikovanja.
Analizirala sem nekatere obstoječe rešitve, tako v Sloveniji kot v tujini, ter na podlagi pridobljenega znanja oblikovala svojo rešitev. Ta skuša uporabniku na prilagojen, jasen način predstaviti dva vidika problematike podnebnih sprememb na lokalnih oz.
nacionalnih primerih. S personaliziranim nagovorom sem želela uporabniku približati problematiko podnebnih sprememb in tako v njem vzbuditi željo po spremembi življenjskega sloga, skrb in zavedanje.
2.0 Kontekst
3 Don NORMAN, Jakob NIELSEN, The definition of user experience (UX), Nielsen Norman Group, dostopno na <https://www.nngroup.
com/articles/definition-user- experience/> (10. 9. 2020).
4 Joel MARSH, UX for beginners, Sebastopol 2016, str. 2.
5 Prav tam, str. 55–56.
6 Susan WEINSCHENK, 100 things every designer needs to know about people, Berkeley 2011, str. XI.
7 Wilbert O. GALITZ, The essential guide to user interface design: an introduction to GUI design principles and techniques, Indianapolis 2007³, str. 64.
8 Leah BULEY, The user experience team of one: a research and design survival guide, Brooklyn, New York 2013, str. 7.
9 Kim BAER, Jill VACARRA, Information design workbook : graphic approaches, solutions, and inspiration + 30 case studies, Beverly 2008, str. 14.
10 MARSH 2016, op. 4, str. 194–195.
2.1 Načrtovanje uporabniške izkušnje (UX)
Oblikovanje uporabniške izkušnje (UX) je krovni izraz, ki zajema vse aspekte uporabnikove interakcije z blagovno znamko, njenimi storitvami in produkti.3 Naloga UX oblikovalca je, da je ta izkušnja dobra. To stori skozi raziskovanje uporabnikov, oblikovanjem rešitev, ki zadovoljijo tako potrebe uporabnika kot blagovne znamke, ter ocenjevanjem učinkovitosti rešitev, ko so te implementirane.4 UX oblikovalci se za pridobivanje podatkov poslužujejo različnih tehnik, kot so opazovanje uporabnikov, intervjuji, fokusne skupine, raziskave, razvrščanje kartic in celo brskanje po spletu.5
UX pokriva področja psihologije, uporabnosti, oblikovanja, tekstopisja in zbiranja ter analize podatkov.
Oblikovalci imajo opravka z uporabniki, kateri imajo subjektivne misli in občutke.
Psihologija nam pomaga razumeti, kako uporabniki razmišljajo, sprejemajo odločitve, kaj jih motivira, kako se počutijo ob uporabi produktov, kaj so njihova pričakovanja in kaj privabi njihovo pozornost. Ti procesi so večinoma podzavestni in njihovo delovanje osvetljuje področje uporabniške psihologije.6
Uporabnost raziskuje, kolikšno kognitivno breme povzroča uporaba produkta in razvija metode za zmanjševanje teh bremen.7
Tekstopisje poznamo predvsem iz oglaševanja. Pri tekstopisju v UX nas zanima predvsem vloga, sporočilnost besedila skozi celoten produkt, katere informacije in na kakšen način jih predočiti uporabniku, kakšen jezik in ton jezika naj bo uporabljen.8 Za razliko od marketinškega tekstopisja v UX ni cilj izdelek oglaševati ali prodati, ampak z jasnim sporočanjem uporabnikom olajšati uporabo produkta.
Grafično oblikovanje je del širšega polja vizualnih komunikacij, ki kot sredstvo komunikacije uporablja besedilo, slike, barve, simbole, tipografijo, razmerja med elementi, kompozicijo, vizualno hierarhijo, semantično analizo itd. in skuša s temi sredstvi komunicirati karseda učinkovito.9
Analiza podatkov je pomemben temelj uporabniške izkušnje. Nestrukturirane podatke o vedenju uporabnikov, pridobljene s pomočjo računalnika, je potrebno analizirati in na podlagi izsledkov prilagoditi produkt. Podatke o uporabi produkta lahko oblikovalci pridobijo s pomočjo storitev, kot so Google Analytics (ta beleži vse uporabnike in njihove interakcije na spletnem mestu), A/B testiranjem (na trg damo dve različici istega produkta in tako vidimo, kateri je bolj ustrezen), sledenjem očesa (te nam povedo, kam uporabniki usmerjajo pogled), zajemi zaslona in sledenjem uporabnikovih premikov miške ter z analizo pojmov, ki so jih uporabniki vnesli v iskalno vrstico.10
UX torej pokriva velik spekter področij, cilj katerih je na podlagi izmerljivih in preverljivih podatkov oblikovati funkcionalne rešitve (učinkovitost katere je prav tako izmerljiva in dokazljiva), ki bodo vodile v boljšo uporabniško izkušnjo.
11 Oliver LINDBERG, Creating interactions: an overview of UI, XD Ideas, Adobe, 10. 17. 2019, dostopno na
<https://xd.adobe.com/ideas/process/
ui-design/overview-of-ui-user- interfaces/> (9. 5. 2021).
12 GALITZ 2007³, op. 7, str. 4.
13 GALITZ 2007³, op. 7, brez strani.
14 ang. Human-Computer Interaction 15 Human–computer interaction (več avtorjev), Harlow 2004³, str. xvi.
16 LINDBERG 2019, op. 11.
17 GALITZ 2007³, op. 7, str. 4.
18 LINDBERG 2019, op. 11.
19 Prav tam.
2.2 Načrtovanje uporabniškega vmesnika (UI)
Uporabniški vmesnik (UI) je način oz. sredstvo, s katerim uporabnik in računalnik komunicirata. UI omogoča uporabniku, da z računalnikom upravlja in od njega pridobi povratne informacije, kar olajša nadaljnje sprejemanje odločitev.11 Uporabniški vmesnik je del računalnika in njegove programske opreme, ki jo uporabnik vidi, sliši, se je lahko dotakne, se z njo pogovarja in jo upravlja.12 Dober UI omogoča učinkovito komunikacijo med strojem in uporabnikom.
Wilbert O. Galitz meni, da je uporabniški vmesnik najpomembnejši del kateregakoli računalniškega sistema, saj uporabniško vrednost omogoča vmesnik in ne
računalniška koda.13
Oblikovanje uporabniških vmesnikov je podskupina področja interakcija človek- računalnik14 (HCI), ki se ukvarja s preučevanjem, načrtovanjem in oblikovanjem sodelovanja med človekom in računalnikom, tako da so človekove potrebe zadovoljene na karseda učinkovit način. HCI oblikovalci morajo pri delu upoštevati množico različnih faktorjev: od želj in potreb uporabnikov, njihovih zmožnosti, zaznav, do tehničnih značilnosti, zmožnosti in omejitev programske in strojne računalniške opreme.15
Komunikacija med uporabnikom in računalnikom poteka na dva načina. Uporabnik s pomočjo tipkovnice, miške, igralnega ploščka, gest,16 prsta ali glasu napravi sporoča svoje želje. To je del komunikacije, ki ji pravimo vnos.17 Izhod pravimo rezultatu računalniške obdelave podatkov. To naprava naredi s pomočjo izhodne strojne opreme, kot so zasloni, zvočniki in printerji.18
Vrste uporabniških vmesnikov:
• Grafični oz. slikovni uporabniški vmesnik (GUI): omogoča interakcijo s pomočjo besedil, slik in gumbov, ki se prikazujejo na ekranu.
• Vmesnik z ukazno vrstico oz. znakovni uporabniški vmesnik (CLI): od uporabnika zahteva, da s pomočjo tipkovnice vnaša ukaze v določenem programskem jeziku.
• Uporabniški vmesniki, ki bazirajo na dotiku: uveljavitev teh se je pričela leta 2007, ko je izšel prvi iPhone znamke Apple.
• Uporabniški vmesniki, ki jih upravljamo s pomočjo kretenj: te s pomočjo gibov uporabljamo brez tipkovnice, miške ali potrebe po dotiku zaslona
• Pogovorni uporabniški vmesnik (CUI): oponaša pogovor z resničnim človekom.
Lahko je oblikovan kot klepetalni robot ali govorni pomočnik, kot so Alexa, Siri in Google Assistant. Vse pogosteje so ti vmesniki oblikovani brez ekranov.19
20 Spletišče (tudi spletno mesto):
skupek med seboj v celoto povezanih spletnih strani in drugih vsebin 21 Spletna stran: dokument z
nadbesedilom, ki ga prikaže spletni brskalnik. Na spletni strani so lahko različne vsebine (besedilo, slike, povezave, zvočni in video posnetki).
Jezik za opis spletnih strani je HTML.
Na svetovnem spletu jo predstavlja enoličen spletni naslov (URL).
22 GALITZ 2007³, op. 7, str. 28.
23 Prav tam, str. 28.
24 Prav tam, str. 32.
25 Jakob NIELSEN,The difference between web design and GUI design, Nielsen Norman Group, 30. 4. 1994, dostopno na <https://www.nngroup.
com/articles/the-difference-between- web-design-and-gui-design/>
(13. 6. 2021).
26 GALITZ 2007³, op. 7, str. 30.
27 Prav tam, str. 32.
28 NIELSEN 1994, op. 25.
29 GALITZ 2007³, op. 7, str. 44.
30 Jeff JOHNSON, Designing with the mind in mind: simple guide to understanding user interface design guidelines, Amsterdam, Boston, Heidelberg, London, New York, Oxford, Paris, San Diego, San Francisco, Singapore, Sydney in Tokyo 2014², str. xiii–xvi.
2.2.1 Spletni uporabniški vmesniki
Pri oblikovanju za splet ločimo dve vrsti spletnih uporabniških vmesnikov.
Pri spletiščih20, ki se osredotočajo na vsebino ali podajanje informacij, govorimo o oblikovanju spletnih strani21, ko je spletišče namenjena zbiranju informacij, gre za oblikovanje spletnih aplikacij (npr. spletne bančne aplikacije).22
Ko oblikujemo vmesnik za spletišče, moramo biti pozorni predvsem na razmerja med meniji, vsebino, navigacijami, grafikami in drugimi elementi. Cilj je zgraditi jasno hierarhijo naslovov, besedila ter navigacije in omogočiti uporabniku, da se enostavno giblje med mnogimi stranmi.23
Pri oblikovanju spletnih vmesnikov smo poleg strojne opreme omejeni s programskimi jeziki, kot sta HTML in CSS, zmogljivostmi spletnih brskalnikov in uporabnikovo privolitvijo v uporabo podatkov ali dodatnih programov.24
Za razliko od klasičnih GUI pri spletnih vmesnikih ne moremo predvideti, na kateri napravi bo spletna stran ali spletna aplikacija obiskana. Velikostne razlike med zasloni naprav so ogromne, prav tako ne moremo vedeti, katere črkovne družine ima uporabnik na napravi nameščene ali kako dobro internetno povezavo ima.25
Fokus, ki ga uporabnik nameni programski opremi ali spletnemu vmesniku, se tudi zelo razlikuje. Velika verjetnost je, da uporabnik ob obisku naše spletne strani v glavi še nima jasnega cilja, ki ga želi doseči. Uporabniki po spletu večinoma brskajo (nenačrtno iščejo in pregledujejo informacije) in hitro ter nesistematično skačejo med različnimi stranmi, katerih besedila večinoma skenirajo.26 Zato moramo pri oblikovanju spletnih UI upoštevati, da so uporabniki na spletu veliko manj fokusirani kot ob uporabi računalniških programov (npr. Adobe programska oprema, Microsoft Office ...), kjer imajo v glavi jasen cilj, ki ga želijo doseči.
Upoštevati je treba tudi dejstvo, da je uporabnika spletne strani težko predvideti – do spleta namreč dostopa ogromno število ljudi z različnimi znanji in veščinami.27 Na podlagi zbranih podatkov o uporabnikih lahko kasneje UI vedno spremenimo in ga prilagodimo našim realnim uporabnikom.
Pri oblikovanju za splet je pomembno, da se oblikovalci zavedamo, da je spletna stran ali spletna aplikacija vpeta v množico drugih strani na spletu. Tu uporabniki hitro prehajajo med različnimi stranmi in tako so zanje meje med njimi močno zabrisane, kar pomeni, da moramo pri oblikovanju močno upoštevati tudi način delovanja drugih spletnih strani.28
Temeljna načela oblikovanja spletnih uporabniških vmesnikov
Vmesnik mora biti intuitiven za uporabo, upoštevati uporabnikove sposobnosti, odgovarjati na njegove potrebe, biti uporaben, preprost za učenje in enostaven ter zabaven za uporabo.29
V želji po oblikovanju dobrih vmesnikov je bilo napisanih že mnogo smernic oblikovanja UI, vsem med njimi pa je skupno to, da v njih opisana pravila bazirajo na zakonitostih človeške psihologije (pravila zaznave, učenja, spomina, sprejemanja odločitev …).30
31 Principi povzeti po GALITZ 2007³, op. 7.
32 ang. accessibility
33 GALITZ 2007³, op. 7, str. 45.
34 Podporne tehnologije: npr. bralniki zaslonov in brajeve vrstice, ki slepim in slabovidnim omogočajo uporabo računalnika.
35 ang. perceptibility 36 ang. operability
37 GALITZ 2007³, op. 7, str. 45.
38 Prav tam, str. 53.
39 Don NORMAN, The design of everyday things: revised and expanded edition, New York 2013, str. 1–4.
40 GALITZ 2007³, op. 7, str. 54.
41 Prav tam, str. 56–57.
Nekaj principov oblikovanja UI, ki se še posebej navezujejo na oblikovanje spletnih strani31:
Dostopnost32
Princip dostopnosti narekuje, da mora biti stran oblikovana tako, da jo lahko brez prilagajanja uporablja čim več ljudi z različnimi sposobnostmi, tudi ljudje z določenimi omejitvami ali posebnimi potrebami33 (npr. omogočena uporaba podpornih
tehnologij34, navigacija s tipkovnico, slike opremljene z nadomestnim besedilom ...).
Značilnosti dostopnega UI so:
• Zaznavnost35: govori o prilagajanju spletne strani uporabnikom z različnimi senzoričnimi sposobnostmi (boljšo zaznavnost omogočimo z možnostjo prilagoditve kontrasta ali velikosti pisave na spletni strani).
• Operativnost36: omogoča uporabo strani ljudem ne glede na njihove fizične zmožnosti.
• Enostavnost: upošteva različna predznanja in izkušnje uporabnikov.
• Prizanesljivost: zagotavlja, da uporabniki na strani naredijo čim manj napak ter da so posledice teh minimalne.37
očitnost
UI naj bo enostaven in uporabniku takoj odgovori na vprašanja kot so: kaj lahko tu delam, kako to storim, kdaj to storim. 38 Uporaba naj bo intuitivna, oblika elementov naj narekuje njihovo uporabo (takim namigom pravimo affordances).39
pozitiven prvi vtis
Prvi vtis močno vpliva na nadaljnje dojemanje spletišča in izkušnje uporabe.40 Ker uporabniki posameznim spletnim mesto posvetijo le malo časa, je dobra prva izkušnja še toliko bolj pomembna.
preprostost
Preprostost vmesnika dosežemo s preglednostjo, privzetimi nastavitvami, enostavnostjo izvrševanja pogostih akcij. Preprostost je dosežena, ko lahko
uporabniki brez težav uporabljajo spletišče ne glede na njihove izkušnje, pismenost ali koncentracijo.41 Ker do spleta dostopajo ljudje z različnimi znanji, je pomembno, da je uporaba spletišča karseda preprosta za veliko število ljudi.
42 MARSH 2016, op. 4, str. 158–159.
43 Jakob NIELSEN, Usability 101:
introduction to usability, Nielsen Norman Group, 3. 1. 2012, dostopno na <https://www.nngroup.com/
articles/usability-101-introduction-to- usability/> (11. 9. 2020).
44 Dave WOOD, Basics interactive design:
interface design: an introduction to visual communication in UI design, London, New York 2014, str. 42.
45 ang. learnability 46 ang. efficiency 47 ang. memorability 48 NIELSEN 2012, op. 43.
49 GALITZ 2007³, op. 7, str. 65.
2.3 Uporabnost
Uporabnost je ena pomembnejših lastnosti produkta, saj povečano kognitivno breme uporabnika odvrača od uporabe (to še posebej velja na spletu, kjer obstaja veliko konkurence, h kateri se lahko uporabniki zatečejo)42 ali pa se produktivnost uporabnika močno zmanjša.43
Uporabnost skozi oblikovanje uporabniku olajša izvrševanje zadanih nalog.44 Po Nielsenu uporabnost definiramo po petih kvalitativnih sestavnih delih:
• Učljivost45: govori o tem, kako enostavno je uporabniku izvesti osnovne naloge, ko se prvič sreča s produktom.
• Učinkovitost46: se meri s časom, potrebnim za opravljanje nalog, ko se je uporabnik že seznanil s produktom.
• Zapomljivost47: kako hitro lahko uporabnik ponovno osvoji uporabo produkta po daljši neuporabi.
• Napake: koliko napak naredi uporabnik in kako hude so ter kako hitro si lahko od njih opomorejo.
• Zadovoljstvo: nam pove, kako prijeten je produkt za uporabo.48
Uporabnost je povezana tudi s fleksibilnostjo – bolj fleksibilni produkti nudijo večje število funkcij kot zelo specializirani produkti, a te funkcije opravljajo manj učinkovito, s čimer se uporabnost zmanjša.49
Uporabnost na spletu lahko pomeni razliko med visoko obiskano in brano spletno stranjo ali hitro zapuščeno spletno stranjo.
50 BAER, VACARRA 2008, op. 9, str. 12.
51 Wibke WEBER, Interactive information graphics: a framework for classifying a visual genre, v:
Information design: research and practice (ur. Alison Black, Paul Luna, Ole Lund in Sue Walker), Centre for information design research, University of Reading, Abingdon, New York, 2017, str. 244.
52 BAER, VACARRA 2008, op. 9, str. 14.
53 Prav tam, str. 14.
54 O oddelku, Univerza v Ljubljani:
filozofska fakulteta: oddelek za bibliotekarstvo, informacijsko znanost in knjigarstvo, dostopno na <https://
biblio.ff.uni-lj.si/o-oddelku-za- bibliotekarstvo-informacijsko- znanost-knjigarstvo> (13. 6. 2021).
55 BAER, VACARRA 2008, op. 9, str. 14.
56 Prav tam, str. 15.
2.4 Informacijsko oblikovanje
Informacijsko oblikovanje je krovni izraz, ki vključuje grafično oblikovanje, informacijsko arhitekturo, oblikovanje uporabnosti, oblikovanje interakcij človek-računalnik, preučevanje človeških dejavnikov, tekstopisje, uredništvo ter bibliotekarstvo in informacijsko znanost. Njegova naloga je, da zapletene, neorganizirane podatke preoblikuje v koristne, smiselne in logične informacije.50 V ožjem smislu označuje polja, ki se ukvarjajo z reprezentacijo velikih baz podatkov (kot so na primer zbirke bibliografskih podatkov).51
Grafično oblikovanje je del širšega polja vizualnih komunikacij, ki kot sredstvo komunikacije uporablja besedilo, slike, barve, simbole, tipografijo, razmerja med elementi, kompozicijo, vizualno hierarhijo, semantično analizo itd. in skuša s temi sredstvi komunicirati karseda učinkovito.52
Informacijska arhitektura (AI) organizira in kategorizira informacije.
Oblikuje klasifikacijske sheme in nomenklature za spletne strani, programsko opremo ali druge produkte tako na spletu, računalniku ali v vsakdanjem življenju (npr. signalizacija).53 Bibliotekarstvo in informacijska znanost se ukvarjata s produkcijo, zbiranjem, urejanjem in posredovanjem zapisanih informacij.54
Oblikovalec interakcij definira in oblikuje specifično obnašanje funkcij, s katerimi upravlja uporabnik, kot so gumbi, meniji, drsniki, gumbi za vklop in izklop, ter odziv sistema na uporabnikove manipulacije.55
Strokovnjaki za preprost in razumljiv jezik pristopajo k pisanju z mislijo na
uporabnika. Njihova besedila uporabljajo kratke povedi, ki so pisane v aktivu, in skozi celotno besedilo je vidna jasna in razumljiva struktura, kar olajša berljivost.56
Informacijsko oblikovanje je v oblikovanju, katerega cilj je jasno podajanje informacij, je ključnega pomena, saj samo jasna komunikacija vodi v razumevanje vsebine.
57 Steve KRUG, Don’t make me think, revisited: a common sense approach to web usability, Berkeley 2014³, str. 21–22.
58 Kate MORAN, How people read online: new and old findings, Nielsen Norman Group, 5. 4. 2020, dostopno na
<https://www.nngroup.com/articles/
how-people-read-online/> (26. 5. 2021).
59 Prav tam.
60 Kara PERNICE, Text scanning patterns: eyetracking evidence, Nielsen Norman Group, 25. 8. 2019, dostopno na <https://www.nngroup.
com/articles/text-scanning-patterns- eyetracking/> (26. 5. 2021).
2.5 Oblikovanje spletnih strani
Pri oblikovanju za splet se moramo zavedati, da uporabniki želijo na spletu hitro najti relevantne podatke, spletne strani pogledajo na hitro, besedilo le redko preberejo v celoti, ampak ga skenirajo in kliknejo na prvo stvar, ki ujame njihovo pozornost in je vsaj malo podobna temu kar iščejo.57
2.5.1 Branje oz. skeniranje zaslonov
Ne samo da uporabniki strani ne preberejo v celoti, tudi s skeniranjem le redko pregledajo celotno besedilo. Poleg tega skeniranje pogosto poteka nelinearno, saj uporabniki skačejo z ene strani na drugo, preskakujejo vsebino, se vračajo nazaj na že obiskane strani ali ponovno skenirajo že pregledano vsebino.58
Nekateri najbolj pogosti vzorci skeniranja so:
• F (oz. E) vzorec
• layer-cake vzorec
• točkovni vzorec
• vzorec v obliki kosilnice59
F vzorec
F vzorca se uporabniki poslužujejo, ko spletna stran nima vzpostavljene vizualne
hierarhije oz. je ta slaba. Bralčev pogled se fiksira na besede na začetku vrstic in v zgornjem levem delu strani, kar pomeni, da je besedilo v spodnjem desnem delu brano manj.60
Slika 1: Skeniranje v obliki F vzorca
61 Kara PERNICE, The layer-cake pattern of scanning content on the web, Nielsen Norman Group, 4. 8. 2019, dostopno na <https://www.nngroup.
com/articles/layer-cake-pattern- scanning/> (26. 5. 2021).
Layer-cake vzorec
Če ima spletna stran vzpostavljeno dobro vizualno hierarhijo, uporabniku omogoča, da jo skenira v obliki layer-cake vzorca. Pogled se fiksira na naslove in podnaslove, občasno pa se zavestno ustavi na tekočem besedilu. Je najbolj učinkovit način skeniranja spletnih strani, saj uporabniku omogoča hitro iskanje informacij in olajša orientacijo med vsebinskimi sklopi.61
Slika 2: Skeniranje v obliki layer-cake vzorca
62 PERNICE 2019, op. 60.
točkovni vzorec
Točkovni vzorec ima ime po vzorcu, ki ga oči naredijo s fiksacijami na posameznih besedah, ali sklopu besed, razpršenih po spletni strani. Uporabniki se osredotočijo na specifične dele, ker ti vizualno izstopajo (krepka pisava, barva, velikost ...) ali ker beseda izgleda kot to, kar iščejo (številke, velike začetnice).62
Slika 3: Skeniranje v obliki točkovnega vzorca
63 MORAN 2020, op. 58.
64 Therese FESSENDEN, Horizontal attention leans left, Nielsen Norman Group, 22. 10. 2017, dostopno na
<https://www.nngroup.com/articles/
horizontal-attention-leans-left/>
(26. 5. 2021).
65 Prav tam.
vzorec v obliki kosilnice
Vzorec v obliki kosilnice se je razvil zaradi vse večje uporabe razpredelnic na spletu (npr. razpredelnice, ki med seboj primerjajo podobne izdelke). Uporabnik se po razpredelnici pomika v obliki kosilnice – v prvi vrsti se pomika z leve proti desni, ko pride do konca, se pomakne vrstico dol in s skeniranjem nadaljuje z desne proti levi.
Ti dve smeri se tako izmenjujeta po razpredelnici navzdol.63
Slika 4: Skeniranje v obliki kosilnice
Novi vzorci skeniranja se sicer lahko razvijejo glede na novo razporeditev elementov na zaslonu – kot je pokazal primer vzorca v obliki kosilnice – a uporabniki bodo vedno najprej iskali elemente tam, kjer jih pričakujejo na podlagi klasičnih razporeditev.64 Zato je pomembno, da se tako pri strukturiranju kot oblikovanju vsebine zavedamo uporabniških vzorcev skeniranja. Na podlagi izsledkov raziskave, ki je ugotovila, da uporabniki 80 % časa gledajo v levi del zaslona, je najbolje, da na spletni strani postavimo navigacijo na vrh ali levi del strani. Vsebino, ki je drugotnega pomena, postavimo na desno.65
66 Jakob NIELSEN, Legibility, readability, and comprehension:
making users read your words, Nielsen Norman Group, 15. 11. 2015, dostopno na <https://www.nngroup.
com/articles/legibility-readability- comprehension/> (26. 5. 2021).
67 SEO: ang. search engine optimization – je zaslužena za to, da se spletno mesto sploh pokaže v seznamu zadetkov v brskalniku. Brskalnik glede na iskani niz v seznamu zadetkov prikaže spletne strani, ki uporabljajo besede povezane z iskanim nizom.
68 Janice (Ginny) REDISH, Letting go of the words : writing web content that works, Waltham 2012², str. 7–8.
69 MORAN 2020, op. 58.
70 Jakob NIELSEN, How users read on the web, Nielsen Norman Group, 30.
9. 1997, dostopno na <https://www.
nngroup.com/articles/how-users- read-on-the-web/> (26. 5. 2021).
71 ang. plain language
72 REDISH 2012², op. 68, str. 224.
73 Hoa LORANGER, Plain language is for everyone, even experts, Nielsen Norman Group, 8. 10. 2017, dostopno na
<https://www.nngroup.com/articles/
plain-language-experts/> (26. 5. 2021).
74 BAER, VACARRA 2008, op. 9, str.
42–43.
75 ang. inverted pyramid
76 Amy SCHADE, Inverted pyramid:
writing for comprehension, Nielsen Norman Group, 11. 2. 2018, dostopno na
<https://www.nngroup.com/articles/
inverted-pyramid/> (26. 5. 2021).
77 NIELSEN 2015, op. 66.
78 Pregib: ang. fold, vsebina nad pregibom je vsebina, ki je vidna na zaslonu, brez da se po njem premikamo. Vsebina, ki jo vidimo šele ko se po strani pomaknemo navzdol, je pod pregibom.
79 Therese FESSENDEN, Scrolling and attention, Nielsen Norman Group, 15.
4. 2018, dostopno na <https://www.
nngroup.com/articles/scrolling-and- attention/> (26. 5. 2021).
80 SCHADE 2018, op. 76.
81 Kate MORAN, How chunking helps content processing, Nielsen Norman Group, 20. 3. 2016, dostopno na
<https://www.nngroup.com/articles/
chunking/> (26. 5. 2021).
82 Prav tam.
2.5.2 Tekstopisje
Pisanje vsebin se mora prilagoditi načinu branja besedil na spletu.
Poleg čitljivosti, ki je v domeni oblikovalca, na hitrost branja, dojemanje in pomnjenje besedila vplivata tudi berljivost in razumevanje besedila.66 Prav tako je pri pisanju besedil za splet pomembno, da so besedila SEO67 optimizirana in da z uporabo primernega vokabularja uporabnikom olajšamo interno iskanje po strani.68
Najpomembnejše informacije navedemo na začetku poglavij (front-loading), kar olajša razumevanje ostalega dela besedila69, uporabljamo jasen in razumljiv jezik, kratke povedi in odstavke ter pišemo v obliki invertne piramide.70
Preprost jezik
Pisanje v preprostem jeziku71 stremi k podajanju informacij na jasen, jedrnat in smiseln način in olajša branje in razumevanje besedila tako laični kot profesionalni publiki.72 Preprost jezik podobno kot ostalo tekstopisje za splet uporablja publiki znane besede, kratke povedi in stavke, upošteva bralno pismenost ciljne publike in z oblikovanjem besedila (seznami, negativen prostor, kontrastni naslovi in podnaslovi) podpira skeniranje in izboljšuje berljivost.73
Uporaba razumljivega jezika je še posebej pomembna pri podajanju kompleksnejših informacij (saj jasno podajanje omogoči večje razumevanje vsebine) in na spletu (kjer so uporabniki obdani z ogromnimi količinami informacij).74
Obrnjena piramida
Pisanje v obliki obrnjene piramide75 spremeni vrstni red podajanja informacij, ki smo ga sicer navajeni iz drugih pisanih del (npr. eseji). Pri tem načinu pisanja del besedila, ki bi bil navadno zaključek, zapišemo na začetku strani, kasnejši odstavki pa vsebujejo vse manj pomembne informacije.76
Ta način pisanja je še posebej primeren za splet, saj upošteva dejstvo, da uporabniki na spletni strani preberejo le okoli 28 % besed77 in večino časa posvetijo vsebini nad pregibom78.79
Tako pisanje ima več prednosti – izboljša razumevanje besedila, saj s front-loading- om informacij uporabniki hitro ustvarijo mentalne modele, potrebne za razumevanje preostalega besedila, zmanjša čas, ki ga mora uporabnik preživeti na strani, spodbuja k drsnemu premikanju, saj vzbudi zanimanje po dodatni vsebini in podpira skeniranje.80
Chunking
Še en način organizacije besedila, ki olajša skeniranje in uporabnikom pomaga pri razumevanju in pomnjenju besedila je chunking. Izraz izhaja iz angleške besede za košček in pomeni razdelitev vsebine na manjše dele.81
Tako urejena besedila imajo kratke, jasno ločene odstavke, krajše vrstice, razločno grajeno hierarhijo in daljše nize številk, razdeljene v manjše enote.82
83 GALITZ 2007³, op. 7, str. 669.
84 ang. sitemap 85 ang. wireframe
86 BAER, VACARRA 2008, op. 9, str. 64–70.
87 MARSH 2016, op. 4, str. 153.
88 ang. adaptive
89 breakpoints: določajo velikost in strukturo elementov glede na velikost ekrana na kateri je spletna stran ali aplikacija prikazana
90 ang. responsive
91 MARSH 2016, op. 4, str. 150.
92 Responsive layout grid, Material Design, Google, dostopno na <https://
material.io/design/layout/responsive- layout-grid.html#columns-gutters- and-margins> (26. 5. 2021).
2.5.3 Sporočilnost slikovnega gradiva
Vsaka izbira, sprejeta pri oblikovanju, mora biti pragmatična. Slikovno gradivo je ključnega pomena pri oblikovanju spletnih mest. Splet omogoča uporabo velikega nabora slikovnega gradiva (video, ilustracija, fotografija, diagrami, animacija ...), to pa mora biti konsistentno s podobo blagovne znamke in razpoloženjem, ki ga želimo na strani sporočiti.
Slikovno gradivo ima veliko komunikacijsko moč, saj hitro pritegne uporabnikovo pozornost, spodbuja zanimanje, učinkovito predoči nekatere informacije, ki jih je težje razložiti z besedilom in navsezadnje doda tudi vizualno privlačnost.83
2.5.4 Zemljevid strani in skelet
Pri grajenju strani si pomagamo z zemljevidom spletne strani84, ki nam daje jasen vizualen načrt vseh delov strani in informacijskih elementov projekta. Z njimi določimo hierarhijo informacij. Zemljevid strani nato nadgradimo v skelete85, s katerimi določimo obliko, razpored in funkcionalnost elementov na spletni strani.86 Na podlagi skeletov nato izdelamo prototip, ta pa nam služi kot podlaga za izdelavo spletnega mesta ali spletne aplikacije.
2.5.5 Mreža
Pomembno je, da se pri spletnem oblikovanju zavedamo, da bodo spletne strani ali aplikacije uporabniki gledali na različno velikih zaslonih in za navigacijo uporabljali različna orodja (npr. miška, tipkovnica, prsti).87
Pri oblikovanju mreže za spletno mesto sta možni dve poti – postavitev strani je lahko prilagodljiva88, kar pomeni, da za spletno stran oblikujemo več različnih postavitev, primernih za različne velikosti ekranov, ki se prikažejo ob določenih breakpoints89, lahko pa oblikujemo odzivno90 mrežo, kjer se vsak element razteguje, skrije, prikaže itd. glede na določene breakpoints.91
Odzivno mrežo oblikujemo s pomočjo stolpcev, katerih širina ni določena s statičnimi vrednostmi, ampak s procenti. Število stolpcev je določeno glede na velikost ekrana in se spremeni ob določenih breakpoints (12 stolpcev za računalniške ekrane, 8 za tablice in 4 za mobilne telefone).92
Slika 5: Odzivna mreža s 4, 8 ali 12 stolpci na različnih zaslonih (mobilni telefon, tablica, računalnik)
93 Klementina MOŽINA, Mikrotipografija, Ljubljana 2009, str. 230.
94 Prav tam, str. 229–230.
95 NIELSEN 2015, op 66.
96 WOOD 2014, op. 44, str. 48–50.
97 BAER, VACARRA 2008, op. 9, str. 90.
98 Kim GOODWIN, Designing for the digital age: how to create human- centered products and services, Indianapolis 2009, str. 484.
99 WEINSCHENK 2011, op. 6, str. 27.
100 GOODWIN 2009, op. 98, str. 486.
2.5.6 Berljivost in čitljivost
Če želimo, da se uporabnik posveti vsebini na spletni strani moramo, v prvi vrsti poskrbeti za berljivost in čitljivost besedila.
Čitljivost se nanaša na dojemanje besedila, pogojenega s tipografskim videzom.
Nanjo vplivajo oblika pisave, višina x-višine, serifi, velikost pisave in kontrast.93
Berljivost označuje dojemanje besedila v povezavi z njegovo tipografsko ponazoritvijo in vsebino.94 Nanjo vplivata kompleksnost besed in stavčna struktura.
Berljivost izboljšamo z neposrednim izražanjem, izbiro kratkih besed in povedi in pisanjem v aktivu.95
2.5.7 Vizualna in tipografska hierarhija
Jasna hierarhija pomaga uporabniku razlikovati med različnimi elementi in skupinami elementov, olajša navigacijo, vodi uporabnikovo pozornost ter mu hitro pomaga razumeti informacijsko strukturo strani. Hierarhijo vzpostavljamo z razporeditvijo elementov po mreži, z barvo, negativnim prostorom, kontrastom, tipografijo …96 Lažje skeniranje vsebine omogoči uporaba naslovov in podnaslovov z jasnim in pomenskim besedilom ter vizualnim kontrastom, ki jih loči od tekočega besedila.
Najpomembnejše informacije lahko navedemo v seznamu, pomembne dele pa izpišemo v krepki pisavi.
2.5.8 Uporaba barv
Z barvo lahko učinkovito prikažemo razlike med elementi97, usmerimo bralčevo pozornost k določenim informacijam ali krmilnim elementom, prikažemo stanja elementov, izzovemo čustva in poudarjamo identiteto znamke.98 Pri izbiri barv moramo biti previdni, saj se interpretacija barv med kulturami razlikuje.99 Ker je določen odstotek ljudi barvno slep, je dobro, da se ne zanašamo samo na barvo ampak uporabljamo še druge označevalce – velikost, črte, rezi črk ...100
101 Podnebna spremenljivost Slovenije v obdobju 1961–2011: povzetek (več avtorjev), Ljubljana 2018, str. 2.
102 Causes of climate change, European Commission, European Union, dostopno na <https://ec.europa.eu/
clima/change/causes_en> (25. 5. 2021).
103 Podnebne spremembe, Evropska unija, Evropska unija, dostopno na <https://
europa.eu/climate-pact/learn/climate- change_sl> (25. 5. 2021)
104 Ocena podnebnih sprememb v Sloveniji do konca 21. stoletja: sintezno poročilo – prvi del (ur. Mojca Dolinar), ARSO, Ljubljana, 2018, str. 6.
2.6 Podnebne spremembe
Podnebje se neprestano spreminja, a se te spremembe v zadnjem stoletju dogajajo mnogo hitreje. V zgodovini je bilo takih dogodkov le nekaj in vsi so korenito vplivali na okolje.101 Na segrevanje okolja v največji meri vplivajo človekove dejavnosti,102 ki v ozračje sproščajo ogromne količine toplogrednih plinov (najpogostejši med njimi je ogljikov dioksid).103 Ker podnebnih sprememb ni več mogoče ustaviti, je pomembno, da razumemo, kakšen vpliv imajo te na okolje in kako se na prihajajoče spremembe prilagoditi.104 Ozaveščenost lahko vpliva na spremembo odnosa do problematike in spremembo navad in življenjskega sloga. Prav tako nam znanje o izvoru podnebnih sprememb pomaga, da lahko posledice teh omilimo.
105 PEISCHL, DOLINŠEK 2020, op. 2.
106 Podnebne spremembe, Ministrstvo za okolje in prostor RS, dostopno na <https://www.gov.si/podrocja/
okolje-in-prostor/okolje/podnebne- spremembe/> (25. 5. 2021).
107 PEISCHL, DOLINŠEK 2020, op. 2.
108 Prav tam.
2.7 Izobraževanje kot strategija
Izobraževanje in ozaveščanje o podnebnih spremembah je pomembno, saj so študije pokazale, da širina znanja o podnebnih spremembah vpliva na skrb ljudi, njihovo pripravljenost za spremembo vedenja in njihovo sprejemanje politik o podnebnih
spremembah.105 Z ozaveščanjem javnosti bomo lahko vzpostavili podnebju prijazno družbo.
2.8 Informiranje in ozaveščanje
Menim, da je največji problem informiranja javnosti ta, da se osredotoča predvsem na mlade in otroke. Če želimo izpolniti obveznosti leta 2015 sprejetega Pariškega sporazuma (do 2050 postati brezogljična družba) in cilje Nacionalnega energetskega in podnebnega načrta (do 2030 za 36 % znižati emisije toplogrednih plinov glede na leto 2015 in preiti na vsaj 27 % obnovljive vire energije)106, je pomembno, da ukrepamo zdaj. Zato menim, da je pomembno informiranje in ozaveščanje tudi odraslih med 35. in 50. letom, saj lahko ti že sedaj vplivajo na podnebno politiko, izobražujejo mlajšo populacijo in širijo informacije v širši okolici.
2.9 Zavedanje problema
Kljub temu da je danes tema podnebnih sprememb in njihovih posledic zelo
izpostavljena, ARSO ozaveščenost slovenske javnosti o vplivih podnebnih sprememb označuje z oceno slabo. Število gospodinjstev, ki meni, da je problem podnebnih sprememb zelo resen, se je med letoma 2008 in 2019 zmanjšalo za kar 13 odstotkov, in sicer z 88 na 75 odstotkov. Poleg tega so opazili upadanje števila gospodinjstev, ki menijo, da k podnebnim spremembam največ prispeva človek in da je proti podnebnim spremembam treba ukrepati takoj.107
Na ARSU so opazili tudi porast gospodinjstev, ki ne znajo ali ne želijo odgovoriti na vprašanje resnosti problema problematike podnebnih sprememb (2019: 5 %, 2010: 1 %) in stagnacijo dela gospodinjstev, ki podnebne spremembe ne smatra kot resen problem (okoli 6 %).108
109 Compassion fade: affect and charity are greatest for a single child in need (več avtorjev), PLOS One, IX/6, 2014, str. 1.
110 Ilana RITOV, Tehila KOGUT, Ally or adversary: the effect of identifiability in inter-group conflict situations, ScienceDirect, CXVI/1, 2011, str. 96.
111 Debrika SHOME, Sabine MARX, The psychology of climate change communication: a guide for scientists, journalists, educators, political aides, and the interested public, New York: Center for Research and Enviromental Decisions, 2009, str. 9–10, dostopno na <https://pure.uva.nl/ws/
files/928230/79652_315602.pdf> (15. 5.
2021).
2.10 Zakaj personalizirana vizualizacija
Izhodišče za diplomsko delo je premisa, da ljudje probleme lažje ignorirajo, bolj kot se zdijo ti od njih odmaknjeni.
Sočutje do žrtev se zmanjšuje ob zviševanju števila žrtev in ob nepoznavanju žrtev (ko so ti anonimni posamezniki). Ljudje imamo omejeno zmožnost čustvovanja, ob veliki nesrečah je ta zmožnost pod udarom, zaradi česar pride do sočutne utrujenosti, ta pa vodi v apatijo.109
Študije so pokazale, da ljudje sočustvujemo bolj z žrtvami tragedij, ki jih dojemamo kot del naše skupine.110
S predstavitvijo problema, fokusiranega na Slovenijo, sem želela uporabnikom približati problematiko podnebnih sprememb na drugačen način – ne z
izpostavljanjem težav, ki jih bodo zaradi podnebnih sprememb občutili prebivalci in živali v državah na drugem koncu sveta, ampak s predstavitvijo tegob, s katerimi se bomo ali se že srečujemo prebivalci tukaj in zdaj.
Študije namreč namigujejo, da je ozaveščanje o podnebnih spremembah bolj učinkovito, če publiki predstavimo primere iz lokalnega okolja.111
S tako predstavitvijo želim doseči, da bi uporabnik sebe in sodržavljane dojel kot žrtve preteče podnebne katastrofe. Informiranje o problemu in indetificiranje sebe kot žrtve pa bi pri osebi izzvalo velik čustven odziv ter željo po ukrepanju.
3.0 Analiza
3.1 Ministrstvo za okolje in prostor, ARSO
Prvi naslov za iskanje podatkov in informacij o podnebju in podnebnih spremembah v Sloveniji je Agencija RS za okolje (ARSO), ki se ukvarja z zbiranjem in analiziranjem podatkov, ki obsegajo vse od vremena, trenutnega stanja morja in drugih voda, ogroženih živalskih vrst, potresov, stanja smučišč, podatkov pomembnih za letalstvo, stanje podnebja in podnebnih sprememb v Sloveniji itd. V neki meri je ARSO poljudna stran, v veliki meri pa uporabnikom nudi dostop do zelo specifičnih podatkov, ki jih potrebujejo specializirani poklici v pomorstvu, letalstvu ... Poleg strani ARSO o podnebnih spremembah informirajo tudi druge strani, povezane z Ministrstvom za okolje in prostor (MOP), kot so Podnebne spremembe – podstran vladne spletne strani (https://www.gov.si/podrocja/okolje-in-prostor/okolje/podnebne-spremembe/) in Slovenija znižuje CO2 (http://www.slovenija-co2.si/index.php/o-co2).
Največji problem pri dostopu do informacij na teh straneh je razpršenost informacij in velik nabor spletnih strani, ki so med seboj nejasno povezane, kar iskanje informacij samo še oteži. Poleg tega so strani med seboj vizualno precej heterogene, kar zagotovo vnaša zmedenost na strani uporabnika.
?
Slika 6: ARSO, s klikom na gumb ARSO OKOLJE pridemo na spletno stran s popolnoma drugačnim izgledom in imenom (namesto ARSO OKOLJE se ta stran imenuje VARSTVO OKOLJA), na Kazalce okolja, ki spadajo pod ARSO OKOLJE, pa je s te strani nemogoče priti
Slika 7: Primer dveh podstrani ARSO, ki prikazujeta vreme
Ena od podstrani ARSO je ARSO OKOLJE – Kazalci okolja, ki spremlja različne statistike v povezavi z varstvom in smerjo razvoja okolja v Sloveniji. Ta stran upošteva nekatera temeljna načela, opisana v teoretičnem delu naloge, in na poenostavljen način podaja informacije, vezane na okolje v Sloveniji.
Slika 8: Domača stran ARSO Okolje – Kazalci okolja, pred izbiro kazalca
Na strani Kazalci okolja je ob izbiri posameznega kazalca prikazano njegovo stanje (v obliki emotikona) in kratka razlaga tega stanja, v zavihkih pa poleg definicije področja in njegovega pomena za okolje najdemo še vizualizacije podatkov, tabele s podatki in komentarje, ki pripadajo tem vizualizacijam ter opise uporabljenih metodologij.
Žal so vizualizacije za mnoge od teh kazalcev neažurne, vizualna podoba grafov je neenotna, nekateri med njimi so interaktivni. Ne uporabljajajo enake tipografije, barve se ne ujemajo, navajanje podatkov ob grafih je različno.
Slika 9: Grafi treh različnih kazalcev s strani Kazalci okolja
Težava je tudi nepregledna informacijska arhitektura strani ARSO (če denimo iščemo višino morja, se ta včasih nahaja v dokumentih pod stranjo vode, včasih pa pod stranjo morje).
Poleg vizualne heterogenosti se na strani pojavlja preveč kompleksen jezik, neurejena hierarhija besedil in premalo personaliziran nagovor.
112 ang. landing page: prva stran s katero se uporabnik sreča. Ta ni nujno domača stran, prav tako ima lahko spletno mesto več ciljnih strani, na katerih se pričakuje več obiska.
3.2 Primeri dobre prakse
3.2.1 National Geographic, 5 Ways Climate Change Will Affect You
5 Ways Climate Change Will Affect You je članek, ki govori o petih direktnih vplivih podnebnih sprememb na posameznika. Stran se sicer ne osredotoča na probleme specifične države, a je dober primer tekstopisja, ki v preprostem jeziku in kratkih sklopih na jasen način informira o problematiki podnebnih sprememb.
Slika 10: 5 Ways Climate Change Will Affect You, ciljna stran
Članek lahko v grobem razdelimo na šest delov – ciljna stran in pet poglavij.
Ciljna stran112 članka vsebuje malo elementov, ki jih uporabnik hitro skenira (navigacijska vrstica, naslov uvod, gumb, fotografija in noga strani), prav tako so izčiščene podstrani, ki informacije predstavljajo v obliki strnjenih odstavkov, kateri so podkrepljeni z grafi ali povednimi ilustracijami.
Hierarhija je jasno vzpostavljena z uporabo različnih velikosti tipografije, črkovnih vrst in barv.
Barva poleg naslovov označuje tudi področje, ki ga članek pokriva – svetlo modra za vode, zelena za agrikulturo, rdeča za temperature, temno modra za vreme in oranžna za področje zdravja, kar omogoča hitro razpoznavnost poglavji. Barve so si blizu po stopnji nasičenosti in z izjemo temno modre tudi po svetlosti, kar pripomore k enotnemu izgledu strani.
Slika 11: 5 Ways Climate Change Will Affect You, poglavje Heat, z naslovom in ilustracijo
Slika 12: 5 Ways Climate Change Will Affect You, hierarhija naslovov, podnaslovov in tekočega besedila
3.2.2 Covid-19 sledilnik
Covid-19 sledilnik bi izpostavila kot primer dobre prakse sodelovanja med znanstveniki, oblikovalci, programerji in profesionalci z drugih področji, ki so se samoiniciativno organizirali in s spletnim mestom omogočili uporabnikom lažje razumevanje problematike epidemije Covid-19 v Sloveniji.
Spletna stran je opremljena z vizualizacijo ažurnih podatkov, ki so med seboj jasno ločeni, saj je vsak postavljen v svoj okvir, ki se od ozadja loči z barvo. Z barvo in rezom črkovne vrste je vzpostavljena jasna vizualna hierarhija vizualiziranih podatkov, ki jih uporabnik obravnava celostno ali pa se s pomikanjem miške po grafu seznani s podrobnejšimi podatki, ki se nanašajo na posamičen dan.
Prav tako je vsaki od vizualizacij dodan gumb “?”, ki vodi do podrobnejšega opisa posamezne vizualizacije, uporabniki pa lahko dostopajo tudi do podatkovnih datotek, uporabljenih v vizualizaciji, ki so shranjene na spletni strani GitHub.
Slika 13: Covid-19 SLEDILNIK, primer grafa s podrobnejšimi podatki, ki se prikažejo ob pomiku miške po grafu
Rešitev je jasna, razumljiva predstavitev podatkov in najnovejših ukrepov s področja Covid-19, zbranih na enem spletnem mestu. Ta prebivalcem Slovenije olajša
spremljanje epidemiološke situacije in omogoča pregled nad hitro spreminjajočimi se ukrepi za zajezitev le te.
113 Stanovanje = sanje, Danes je nov dan, dostopno na <https://danesjenovdan.
si/pozivi> (25. 5. 2021).
3.2.3 Danes je nov dan, Stanovanje = sanje
Primer dobre prakse je tudi projekt inštituta Danes je nov dan iz leta 2018. Projekt so razvili na podlagi raziskave Inštituta za študije stanovanj in prostora, ki je bila izvedena v sodelovanju s Fakulteto za družbene vede in Inštitutom za politike prostora.113 Interaktivno spletno mesto Stanovanje = sanje uporabniku na personaliziran način približa stanovanjsko problematiko. Stran uporabniku pove, koliko stanovanj lahko kupi ali najame ter kakšna je njihova povprečna velikost, in sicer na podlagi uporabnikovega neto dohodka.
Slika 14: Stanovanje = sanje, stran nad pregibom
Stanovanjska problematika je predstavljena z dvema kratkima besediloma (s poudarjanjem ključnih besed in kratkimi odstavki sledita načelom dobrega tekstopisja), ki ju lahko uporabnik s klikom na vprašanje “Zakaj?” razširi, ter štirimi grafi, ki vizualizirajo rast cen stanovanj in plač, število plač potrebnih za nakup 50 m2 velikega stanovanja, število novogradenj v primerjavi z rastjo števila prebivalstva in število ter povprečno velikost novogradenj.
Slika 15: Stanovanje = sanje, besedilo
Vprašanje “Zakaj?” je oblikovano tako, da uporabnik razume, da lahko nanj klikne – podčrtano in druge barve.
Slika 16: Stanovanje = sanje, vizualizacija podatkov
Vsak od grafov je podpisan s kratko povedjo, tem pa je dodana tudi povezava do vira, iz katerega so podatki vzeti. Na dnu strani je tudi seznam uporabljenih virov, kar pripomore k legitimnosti in preverljivosti informacij.
Točne vrednosti, ki jih iz grafov uporabnik težko razbere, se prikažejo s pomikom miške na posamezne dele grafa.
4.0 Umestitev personalizirane
vizualizacije podnebnih
sprememb v obstoječi
nabor vsebin
Svojo rešitev vidim kot dodatek ali nadgradnjo spletne strani ARSO, prav tako pa bi jo lahko uporabljale politične organizacije ali društva s progresivno podnebno politiko.
Umestitev v že obstoječa spletna mesta ne bi dodajala k veliki množici že obstoječih spletnih strani, spletno mesto MOP pa bi lahko z ukinjanjem oz. združevanjem strani, ki podajajo podobne informacije, postalo mnogo preglednejše.
Projekt se mi zdi relevanten tudi zato, ker druge organizacije v Sloveniji, ki si prizadevajo za okolju prijazne spremembe v družbi, informacij v veliki meri ne podajajo na spletu ali pa te niso podane na jasen, poenostavljen način. Fundacija Umanotera spletno stran posveča večinoma predstavitvi organizacije in njihovih projektov, ki potekajo predvsem v živo. Podobno je z organizacijo Mladi za podnebno pravičnost – bolj kot na informiranje preko spleta se osredotočajo na aktivistične akcije in proteste, ki v živo opozarjajo na podnebno problematiko. Z implementacijo moje rešitve na njihova spletišča bi lahko informiranje preselili tudi na splet.
Podobno tudi organizacije izven Slovenije: Extinction Rebellion UK, Global Climate Strike, Fridays for Future komunikacijo osredotočajo bolj na predstavitev svojih projektov oz. akcij kot na predstavljanje podatkov v povezavi s podnebnimi spremembami.
5.0 Razvoj rešitve
114 Korespondenca po elektronski pošti, Zorko Vičar (ARSO) in Zala Križ, 21. 12. 2020.
115 Kdo smo, Umanotera, dostopno na
<https://www.umanotera.org/kdo- smo/> (15. 4. 2021).
116 Korespondenca po elektronski pošti, Nika Tavčar (Umanotera) in Zala Križ, 18. 1. 2021.
5.1. Izbira področja
Glede izbora področja vizualizacije sem kontaktirala ARSO – Agencijo republike Slovenije za okolje, kjer so potrdili mojo izbiro kot primerno za vizualizacijo in zanimiv kazalec podnebnih sprememb v Sloveniji.114
Poleg tega sem področji izbrala, ker podnebne spremembe na tem področju zelo jasno in direktno vplivajo na življenje prebivalcev v Sloveniji – morje bolj specifično na prebivalce obalnih mest ter turiste, temperature pa na prebivalce širše Slovenije.
5.2 Ciljna skupina
Ciljno skupino sem določila s pomočjo strokovne organizacije Umanotera, Slovenske fundacije za trajnostni razvoj, katere cilj je uveljavljanje trajnostnega razvoja v nacionalnih politikah. Poleg nadzora nad delovanjem oblasti, zbiranjem informacij in oblikovanjem pobud, se ukvarjajo tudi z ozaveščanjem in izobraževanjem javnosti in odpiranjem javnih razprav o trajnostnem razvoju, okoljskih problematikah in podnebnih spremembah.115 Kot glavno ciljno skupino sem določila odrasle med 35. in 50. letom. Gre za skupino posameznikov, ki v veliki meri ni ozaveščena o problematiki podnebnih sprememb (obstaja sicer razlika med prebivalci v večjih mestnih središčih, ki so od tistih drugje o problematiki bolj ozaveščeni), a ima izredno velik vpliv na politike, ki se sprejemajo v državi (kot volivci) ter možnost širjenja znanja o problematiki naprej (v svojem družinskem krogu na svoje otroke, v svoji okolici kot učitelji, izobraževalci ...). Zato v Umanoteri pogosto (poleg otrok) kot ciljno publiko izbirajo skupine, ki lahko pridobljeno znanje čim bolj širijo naokoli (izobraževalci).116
Medij spletne strani sem izbrala ravno zaradi njenega širokega dometa. Večina ljudi dandanes pridobiva informacije na internetu in ne več v tiskanih medijih, kot je to veljalo včasih.
Ker je ciljna skupina zastavljena široko (odrasla populacija) in ker splet obišče veliko število različnih uporabnikov, sem na spletni strani predstavila specifične posledice poplav in višjih temperatur na različne skupine populacije. S fokusom na specifične posledice (in možne rešitve) sem želela pri uporabnikih izzvati večji čustven odziv in posledično večjo željo po ukrepanju. Menim, da si lahko ob konkretnih primerih veliko jasneje predstavljajo bodočnost, ki jo prinaša podnebna katastrofa.
117 KRUG 2014³, op 57, str. 63–72.
118 Prav tam, str. 70.
5.3 Organizacija strani
Navigacijska vrstica pomaga uporabniku razumeti, kje na spletišču se nahaja (z označitvijo trenutne lokacije), oriše glavno strukturo spletišča in omogoči uporabniku da najde/izbere iskano. Navadno ta zajema ime spletnega mesta, ki se v večini primerov nahaja v zgornjem levem kotu in jo uporabniki tudi tam pričakujejo.
Poleg prvega nivoja strukture spletišča navigacija lahko vključuje tudi druge nivoje (ti se lahko prikažejo ob kliku na prvi nivo kot del navigacijske vrstice ali v obliki spustnega menija). Navigacija lahko vsebuje tudi povezave do dodatnih funkcij, ki niso del glavne hierarhije (stran za prijavo na novice, registracijo, nakupovalni voziček) in iskalno vrstico, ki jo lahko izpustimo, če je spletišče manj obsežno.117
Navigacijsko vrstico sem oblikovala zelo preprosto – vsebuje le povezavo do domače strani in dveh podstrani. Za lažje navigiranje med poglavji in skokom na vrh strani sem dodala navigacijo tudi na levi strani strani, kjer uporabnik s klikom na krogec zdrsne na izbrano poglavje. Ob širitvi spletnega mesta bi bilo to verjetno razdeljeno v več strani in podstrani – takrat bi navigacijo razširila s spustnimi meniji.
Noga naj vsebuje pomožne strani, ki niso del glavne hierarhije in niso tako
pomembne, da bi jih postavili v navigacijsko vrstico118 (povezavi do seznama zunanjih povezav in politike zasebnosti).
Stran je v grobem razdeljena na uvod nad pregibom in vsebino pod pregibom.
Pod pregibom je umeščena velika enota slikovnega materiala, ki služi vzbujanju zanimanja in vzpostavljanju vzdušja. Vsebina vsebuje tekoče besedilo in slikovni material, spremno besedilo k vizualizacijam, same vizualizacije ter vire s povezavami.
Vizualizacije so zaradi ločevanja od preostalega besedila postavljene na belo ozadje.
morje
• višina morja
• poplave
• posledice in rešitve
• viri
noga
• zunanje povezave
• politika zasebnosti
• Slovenija > regije
• posledice in rešitve
• viri
temperature domača stran
Slika 17: Zemljevid spletne strani
5.4 Skelet
Širina vsebine na strani je 1040 px – ena najpogosteje uporabljenih širin, saj omogoča nemoteno prikazovanje tako na večjih ekranih stacionarnih računalnikov kot manjših ekranih prenosnih računalnikov. Razdeljena je v 12 stolpcev, kar omogoča veliko fleksibilnost pri razvrščanju vsebine v stolpce in hkrati omogoči lažji prehod vsebine na manjše ekrane tabličnih računalnikov in mobilnih telefonov.
40 px
150 px
60 px
40 px
50 px 5 px
150 px
250 px 120 px
1080 px 1040 px
50 px 40 px
≤440 px
1400 px
1400 px 1
12 13
2 3
4
5
6
7
9
10
11
Slika 18: Skelet spletne strani
navigacijska vrstica ime spletnega mesta / povezava na domačo spletno stran
povezavi do strani morje in temperatura
širina vsebine sekundarna navigacija margine s spremenljivo širino (širina vsebine je konstantna, margine se krčijo/raztezajo glede na velikost računalniških zaslonov
višina strani nad pregibom (1080 px oz. 100% višine zaslona)
pregib
slikovni material
slikovni material ob besedilu vizualizacija podatkov noga
povezave v nogi
Slika 19: Skelet spletne strani na mobilnem telefonu in tablici
119 Alex POOLE, Which are more legible:
serif or sans serif typefaces?, Alex Poole, 17. 2. 2008, dostopno na <http://
alexpoole.info/blog/which-are-more- legible-serif-or-sans-serif-typefaces/>
(10. 5. 2021).
120 Prav tam.
121 Jakob NIELSEN, Serif vs. sans- serif fonts for HD screens, Nielsen Norman Group, 1. 7. 2012, dostopno na
<https://www.nngroup.com/articles/
serif-vs-sans-serif-fonts-hd-screens/>
(11. 9. 2020).
122 Prav tam.
123 FF Yoga and FF Yoga Sans: an extended family, rich in detail, not just for text setting, Linotype, dostopno na <https://www.linotype.
com/8192/ff-yoga.html> (15. 5. 2021).
124 FF Yoga Sans, FontShop, dostopno na
<https://www.fontshop.com/families/
ff-yoga-sans> (15. 5. 2021).
5.5 Tipografija
5.5.1 Serif ali Sans Serif
Izbor tipografije je podrejen predvsem njeni čitljivosti na zaslonu.
Čitljivost pisave je med drugim odvisna od velikosti črke, x-višine, odprtosti ali zaprtosti notranjih delov črk ter podaljškov navzgor in navzdol.119
Več raziskav se je ukvarjalo z vprašanjem čitljivosti serifnih in linearnih pisav, a niso prišli do trdnih ugotovitev. Iz tega lahko izhajamo, da je čitljivost bolj odvisna od drugih lastnosti črk (opisanih zgoraj) kot od prisotnosti ali odsotnosti serifov (katerih vloga je bolj karakterna).120
5.5.2 Serif ali Sans Serif za ekrane
Včasih je veljalo pravilo, da je zaradi slabe kvalitete ekranov, nezmožnih pravilne upodobitve serifov, na spletu najbolje uporabljati linearne črkovne družine – črke s serifi so se zaradi premalo pikslov združevale v zabrisane oblike.121
Danes so resolucije ekranov boljše, kot so bile včasih – za računalniške ekrane se številke gibljejo okoli 220 ppi (pikslov na palec), za mobilne telefone pa 400 in več ppi – vse to omogoča boljše prikazovanje serifov in raziskave berljivosti ne preferirajo ene vrste črk pred drugimi.122
Zaradi slednjega sem se odločila, da lahko za vzpostavljanje hierarhije in distinkcije uporabim tako neserifno kot serifno pisavo.
5.5.3 FF Yoga in FF Yoga Sans
Superdružina FF Yoga oblikovalca Xavierja Dupréja v serifni in linearni različici, ki združuje značilnosti močne renesančne in nevtralne linearne pisave. Velik nabor znakov, navadne arabske številke in renesančne arabske številke, šumniki ter odprte oblike in prijazen izgled so značilnosti, ki naredijo to družino primerno tako za naslove kot daljša besedila. Značilni serifi FF Yoge naredijo pisavo zanimivo tudi pri večjih velikostih, kjer pridejo ti detajli do večjega poudarka – zato so primerni tudi za naslove.123
FF Yoga Sans je sodobna alternativa humanističnega Gill Sansa in linerna spremljevalka FF Yoge.124
