Download pdf - Osnovne tehnike vizualne komunikacije - csd.ijs.sicsd.ijs.si/novak/public/MB-HCI/ICR-07-osnovne tehnike vizualne... · Interakcija človek - računalnik (Osnovne tehnike vizualne

Slide 1Interakcija človek - računalnik (Osnovne tehnike vizualne komunikacije)

Osnovne tehnike vizualne komunikacije

Franc Novak


vizualni dizajn grafičnih uporabniških vmesnikov

prej: estetski vidiki forme

urejenost prostora



prej: estetski vidiki forme splošno,

neodvisno odciljne

urejenost prostora aplikacije




neodvisno odciljne


sedaj: zakonitosti vizualnega dizajna

ciljna aplikacija




neodvisno odciljne


sedaj: zakonitosti vizualnega dizajna konkretenproblem

ciljna aplikacija


uvod

Orodje, ki ga imamo na razpolago, je vizualni jezik.

Sintakso vizualnega jezika tvorijo osnovni elementi: točka, linija, ploskev involumen.

Skupaj z atributi: oblika, velikost, barva in tekstura določajo strukturovizualnega jezika.

Vizualni jezik ima: formalni slovar, ki vsebuje osnovne elemente dizajna,vizualno sintakso, ki opisuje način medsebojnega kombiniranja elementovv okviru danega sistema.


primer slabega dizajna


osnovna izhodišča

Kdaj vključiti dizajn v razvoju nekega produkta?


vizualni dizajn vmesnika

Osnovne tehnike komunikacijskoorientiranega grafičnega dizajna

eleganca in enostavnostsorazmerje, kontrast, dimenzijska harmonijaorganizacija in vizualne strukture


eleganca in enostavnost

Eleganco v dizajnu razpoznamo v primerih, ko gre za rešitev danegaproblema na inovativen, uspešen način, ki je hkrati popoln in skrajnoekonomičen.

Zelo pomembna je enostavnost rešitve.

Enostavnost rešitve dosežemo s ponavljajočim poenostavljanjem.



Henry C. Beck, 1933



London Underground's Victoria Line


eleganca in enostavnost – običajne napake


tehnike za doseganje elegance in enostavnosti

Reduciranje dizajna do njegovega bistva

Napotki:• določi glavne lastnosti, ki naj jih ima dizajn (tipično krajši spisek

pridevnikov); navedi tudi formalne elemente, kot je na primer ime, oznaka, barva, tekstura ali slika.

• kritično preglej vsak element dizajna; ali je dizajn možen brez njega? Če ne znaš odgovoriti, ga izpusti.

• poskusno odstrani element iz dizajna in poglej, kaj se zgodi. Če se dizajn poruši, ga ohrani. Če ne, pa razmisli, če ne bi morda element izpustil.



Dva primera:

Logo Victoria and Albert Museum, London dostop za invalide



Regularnost dizajna

Napotki:• kjerkoli je možno, uporabljaj regularne geometrijske oblike, umirjene

barve, enostavne obrise.• če uporabljaš več podobnih elementov (form, oblik), jih po možnosti

naredi enake z vidika velikosti, barve, teksture, debeline linij, orientacije, poravnanja ali medsebojne razdalje.

• omeji variacije v tipografiji na nekaj velikosti ene ali dveh družin pisav.• da bi izrabil prednosti regularnosti, izpostavi kritične elemente namenoma

na neregularen način.



primer :

regularne oblike



primer:

poenotenje oblik elementov



primer :

omejitev nabora pisav



Večkratna funkcionalnost elementov dizajna

Osnovna ideja: poiskati elemente dizajna, ki lahko igrajo večkratno vlogo

Napotki:• preveri funkcijo, ki jo ima vsak posamezni element dizajna.• poišči situacije, ko imajo različni elementi enako vlogo.• preveri, če je možno nadomestiti kak element z drugim (tudi če naredimo

kako manjšo spremembo).• združi redundantne elemente v enostavno enoto ali pa jih zamenjaj z

neko skupno funkcionalnostjo glede na dano ciljno okolje



Primer večkratne funkcionalnosti iz vsakdanjega življenja



Primer večkratne funkcionalnosti


razmerje, kontrast, skladnost

Razmerje predstavlja relativno velikost danega elementa dizajna glede na ostale elemente celotne kompozicije.

Kontrast predstavlja opazne razlike znotraj dane vizualne dimenzije (kot na primer oblika, velikost, barva, tekstura, pozicija).

Skladnost (dimenzijska harmonija) - tipičen primer: zlati rez.


razmerje, kontrast, skladnost


principi dobrega dizajna Jasnost (angl. clarity)

Predstavljeni elementi so organizirani na smiseln, razumljiv in razpoznaven način.

Faktorji, ki vplivajo na jasnost dizajna so:konsistentnost dizajna,vizualno privlačna kompozicija,logična razporeditev,predstavitev primerne količine informacij,grupiranje in poravnava elementov zaslona.


principi dobrega dizajna

Jasnost (angl. clarity)



Harmonija

Zlati rez



Zlati rez



Zlati rez



koren od 2



Simetrija:



Simetrija:

Določi linije, ki bodo igrale vlogo osi simetrije. Običajno se v tem koraku odločamo tudi med vertikalno in horizontalno simetrijo.Za človekovo zaznavanje je bolj učinkovita vertikalna simetrija.Odloči se o vsebini, ki bo podana na obeh straneh osi simetrije.Prepričaj se, da je os simetrije dejansko na sredini zaslona ali okna, kjer bo podana dana vsebina.



Simetrija:



uravnoteženost



uravnoteženost



uravnoteženost



Optična prilagoditev:


















Bela okolica:(angl. white space, negative space)



Bela okolica:



Bela okolica:



Bela okolica:

slab dizajn


principi dobrega dizajnaBela okolica:

dober dizajn



integriranje figure in podlage

Kako uskladiti velikost figure in podlage?



integriranje figure in podlage

zgoraj: preveč natrpan dizajnspodaj: izboljšana varianta



Omejevanje, zadržanost (angl. restraint)

Regularnost forme, kjer so izpuščeni detajli in variacije, povečuje jasnost intransparentnost dizajna.

Omejimo se pri podajanju kontrastov, pa še to le na eno ali vsaj zelo malovizualnih dimenzij. Tako namreč dosežemo, da so dani kontrasti učinkoviti.

primer:



Omejevanje, zadržanost (angl. restraint)

Regularnost forme, kjer so izpuščeni detajli in variacije, povečuje jasnost intransparentnost dizajna.

Omejimo se pri podajanju kontrastov, pa še to le na eno ali vsaj zelo malovizualnih dimenzij. Tako namreč dosežemo, da so dani kontrasti učinkoviti.

primer:


organizacija in vizualna struktura dizajna

Kaj lahko dosežemo z dobro organizacijo in strukturo dizajna?

Uporabnik zazna organizacijo in vizualno strukturo brez napora, zato je zelo pomembno, da znamo njun vpliv učinkovito izrabiti.


organizacija in vizualna struktura dizajna

Kaj lahko dosežemo z dobro organizacijo in strukturo dizajna?

Uporabnik zazna organizacijo in vizualno strukturo brez napora, zato je zelo pomembno, da znamo njun vpliv učinkovito izrabiti.

Pozor!Človeško oko skuša zaznati strukturo v dizajnu. Če je ni, bo samo po sebi skušalo zasnovati strukturo in ji slediti, kar lahko privede do napačnega razumevanja.

Gestalt psihologija!


Gestalt psihologija

Razum dojema zunanje informacije, ki nam jih posredujejo čutila, kot celota, ne pa kot vsota posameznih delov.Celote so strukturirane in organizirane v skladu s pravili grupiranja.


Kako torej učinkovito podati informacijo?


posredovanje informacije

Pri snovanju uporabniškega vmesnika ali spletnih strani je cilj minimizirati število informacijskih spremenljivk, ki jih mora uporabnik hraniti v kratkoročnem spominu. To dosežemo, če je informacija logična in smiselna.


posredovanje informacije

Pri snovanju uporabniškega vmesnika ali spletnih strani je cilj minimizirati število informacijskih spremenljivk, ki jih mora uporabnik hraniti v kratkoročnem spominu. To dosežemo, če je informacija logična in smiselna.

Napotki:Razdeli informacijo na enote, ki so zaznavne, logične in smiselne. Poskrbi, da bo vrstni red informacijskih enot na zaslonu ustrezal prioriteti uporabnikovih pričakovanj in potreb.Zagotovi, da bodo informacije, ki se medsebojno primerjajo, ves čas med primerjavo vidne.Zagotovi, da bo na zaslonu prezentirana samo takšna informacija, ki se nanaša na uporabnikove naloge.


tehnike za učinkovito podajanje informacije

razmerje, kontrast nenapovedljivi učinki skladnost (potrebne praktične izkušnje)

organizacija jasne in zanesljivevizualna struktura metode:

grupiranjehierarhijaporavnava



Grupiranje:

Grupiraj posamezne informacijske enote v (7+/-2) kategorij glede na njihov izvor in namen uporabe. Za vsako skupino informacijskih enot, ki jih je treba neodvisno obdelovati, priredimo svojo grupo.Rangiraj grupe po pomembnosti in njihovo število (po možnosti) še zmanjšaj na 3 – 4.Maksimiraj vizualno razlikovanje med grupami in minimiziraj vizualno razlikovanje znotraj grupe.



Grupiranje



Hierarhija



Poravnava:

Identificiraj glavne poravnalne linije danega polja in poskusi poravnati z njimi ustrezne elemente.Za elemente in polja, ki so skoraj poravnani, poskušaj doseči njihovo poravnavo s spreminjanjem njihove velikosti in pozicije.Poišči samostojno ležeče elemente in jih poravnaj s kakšno od obstoječih linij poravnave.Če obstaja element, ki ga ne moreš poravnati z nobeno od obstoječih linij poravnav, ga postavi v položaj, ki ustreza regularni razdelitvi prostora danega dizajna.



Poravnava:


Kako preveriti, če ustreznost zasnove?


(pripomoček)

Test neizostrenega pogleda (angl. squint test)

Uporabljamo ga za sprotno preverjanje vizualnega zaznavanja dizajna.Zakrijemo eno oko, z drugim bežno (neizostreno) pogledamo kompozicijo na zaslonu.Vse tisto, česar nismo opazili z neizostrenim pogledom, tudi ne bo takoj na prvi pogled (at a glance) opazno na končnem dizajnu.


(pripomoček)

primer: izostreno


(pripomoček)

primer: izostreno


(pripomoček)

primer: izostreno


(pripomoček)

primer: izostreno


stopnja kompleksnosti

Stopnja kompleksnosti

Nariši pravokotnik okrog vsakega elementa na zaslonu.Preštej število elementov. (22)Preštej število vertikalnih poravnalnih linij. (6)Preštej število horizonlalnih poravnalnih linij. (20)

22 + 6 + 20 = 48




Nariši pravokotnik okrog vsakega elementa na zaslonu.Preštej število elementov.Preštej število vertikalnih poravnalnih linij.Preštej število horizonlalnih poravnalnih linij.

18 + 6 + 8 = 32




Nariši pravokotnik okrog vsakega elementa na zaslonu.Preštej število elementov. (18)Preštej število vertikalnih poravnalnih linij. (6)Preštej število horizonlalnih poravnalnih linij. (8)

18 + 6 + 8 = 32


stopnja kompleksnosti (primer)





število elementov: 27





število vertikalnih poravnav: 6





število horizontalnih poravnav: 20



stopnja kompleksnosti: 27 + 6 + 20 = 53


kaj tvori grupo

Kako je sploh grupa vizualno zaznana?

Poveži s črto vse znake, ki niso medseboj oddaljeni več kot en presledek v horizontalni smeri in brez prazne vrsticev verikalni smeri.

Povezani elementi tvorijo grupo.


kaj tvori grupo





kaj tvori grupo





kaj tvori grupo


kaj tvori grupo


kaj tvori grupo


kaj tvori grupo


kaj tvori grupo

zakaj so tukaj večji presledki?


načini grupiranjaGrupiranje z izrabo prazne površine

S pomočjo praznih površin omogoči dovolj prostora za ločevanje med elementi. Pri spletnih straneh skrbno oceni obseg uporabe praznega prostora. Možno je, da ima za posledico potrebo pomikanja strani (page scrolling).


načini grupiranjaGrupiranje z izrabo prazne površine


načini grupiranjaGrupiranje z robovi

Uporabi robove za poudarjanje grupiranja. Uporabljaj standardno hierarhijo za parametre uporabljenih linij (debelina, vzorec, ...)Puščaj dovolj praznega prostora okrog teksta.Poravnaj robove levo, desno, zgoraj in spodaj. Pri spletnih straneh uporabljaj horizontalne linije s preudarkom: rezerviraj jih za situacije, ko želiš poudariti razliko med prostorom nad in pod linijo.


načini grupiranjaGrupiranje z robovi


načini grupiranjaGrupiranje z ozadji

Grupiranje z ozadji uporablja kontrast s preostalim delom zaslona.Pogosto imajo ozadja preveč nasičene barve. Priporočljiva je uporaba okrog 25% barvne nasičenosti (angl. saturation).Za sorodno informacijo uporabi enako ozadje.Uporabi večji kontrast za komponente zaslona, ki jim namenjaš večjo pozornost.Pogosto barva ne zadostuje za grupiranje, ampak je treba dodati še robno linijo.


načini grupiranjaGrupiranje z ozadji


kako beremo

Čitljivost (legibility) je zmožnost razpoznavanja črk uporabljene pisave. Informacija naj bo zaznavna in razločljiva.Berljivost (readability) je zmožnost branja in dojemanja besedila. Dosežemo jo z ustrezno izbiro besed, dolžino stavkov. Informacija naj bo taka, da jo bo možno interpretirati; naj bo privlačna.


kako beremo

Kako beremo spletne strani?

preskakujemo velike odstavke tekstaneradi premikamo strani (page scrolling)


kako beremo


kako beremo


kako beremo


velikost prikaza na straneh

Premikanje (scrolling):

Minimiziraj vertikalno premikanje.Če pa je vertikalno pomikanje potrebno,• razporedi znotraj strani namige, da del informacije leži “spodaj”.• organiziraj informacijo tako, da bo uporabniku logično, da je del

informacije še zakrite (n.pr. abecedni razpored).• restriktivno uporabljaj horizontalne linije, da ne bi uporabnik mislil,

da je prišel do dna strani.• olajšaj premikanje na pomembne dele z njihovim poudarjanjem.• preskrbi enovito in konsistentno oznako za konec straniRazmisli, če je možno uporabiti menjavanje strani (angl. paging).Izogibaj se horizontalnemu premikanju.


restriktivno uporabljaj horizontalne linije


izogibaj se horizontalnemu premikanju


začetna točka

Študije so pokazale, da na straneh z informacijsko vsebino ljudje najprej pogledajo tekst, šele nato pa slike.Večji tekst prevlada manjšega: tekst normalne velikosti, četudi poudarjen ali kot hiperlink redko igra vlogo začetne točke.Ljudje pogosto berejo spletne strani po vzorcu F: pogled v smeri dveh horizontalnih linij, nato pa v vertikalni smeri.


začetna točka


začetna točka


začetna točka


začetna točka


začetna točka


začetna točka

Napotki:pripravi očitno začetno točko v zgornjem levem kotu zaslona.usmeri uporabnikovo pozornost na najpomembnejše dele zaslona oziroma spletne strani.

Več o metodi sledenja oči (angl. eyetracking):

http://www.useit.com/eyetracking/methodology/


razvrščanje informacije na spletnih straneh

Napotki:Določi nivoje pomembnosti informacij. Razvrsti informacije na več nivojev glede na pomembnost. Postavi kritične informacije pri vrhu spletne strani. Postavi pomembne enote na vrh spletne strani. Sem spada tudi navigacija.Organiziraj informacijo na jasen način. Struktura naj bo logična in jasna, odraža naj uporabniške zahteve in cilje.Olajšaj pregledovanje strani. Študije so pokazale, da 80% ljudi vizualno preleti nove strani, le okrog 16% jih bere besedo-za-besedo.






navigacija

Upoštevaj naravne smeri in zaporedja premikanja oči. Oči stremijo k premikanju

od temnejših površin k svetlejšim,od velikih objektov k manjšim,od neobičajnih oblik k običajnim,od nasičenih barv k umirjenim barvam.


navigacija (nadaljevanje)

Oči lahko vodimo tudi s pomočjo okvirjev. Robovi okvirjev lahko odigrajo vlogo vizualne usmeritve. Oči stremijo k temu, da ostanejo znotraj okvira pri izvajanju določenega opravila.





Minimiziraj razdalje premikov kazalca miši in oči.Lociraj zgoraj levo najpomembnejše in najpogosteje uporabljene elemente in ukaze.Po vrsti usmerjaj pozornost na enote, ki so kritične, pomembne, manj pomembne...







Zagotovi informacijski tok z vrha proti dnu in z leve proti desni iz naslednjih razlogov:• premiki oči med posameznimi enotami bodo krajši,• ukazni tok (control movements) med posameznimi enotami bo krajši,• grupiranja elementov bodo bolj očitno zaznana.


vizualni stil dizajna spletnih strani

Napotki:Vzdržuj konsistenten in enoten vizualni stil vseh strani spletnega naslova.Vse strani naj imajo enotne vizualne karakteristike z vidika uporabljenih barv, tipografije, slik, oblike elementov dizajna zaslona.

Enotnost in konsistenca pomagata uporabnikom pri navigaciji.

Vizualni elementi, vključno s tlorisom strani, izbiro barv in fontov vplivajo nakredibilnost spletne strani in njen rating.


primer konsistentnega dizajna







