6 dizajn rozhranÍ informaČnÝch systÉmov

1

6 DIZAJN ROZHRANÍ INFORMAČNÝCH SYSTÉMOV

Je komplexný problém a zahrňuje metódy klasického grafického, informačného alebo priemyselného dizajnu ako aj návrh interakcie a navigácie. Pri návrhu treba rešpektovať senzorické, motorické a kognitívne schopnosti cieľovej skupiny používateľov.

Jednotlivé kroky životného cyklu takýchto produktov zhora nadol si vyžadujú návrh informačnej architektúry, dizajn interakcie, informačný dizajn, dizajn navigácie a vizuálny dizajn.

MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

2

6.1 INFORMAČNÁ ARCHITEKTÚRA

Pojem zaviedol Richard Wurman a čiastočne vychádza z knihovníckej vedy.

Pôvodne sa používal v zmysle informačného dizajnu.

Je to umenie vyjadriť model alebo koncept informácie v aktivitách ktoré vyžadujú explicitné detaily zložitého systému.

Medzi takéto systémy patria knižničné systémy, klasické múzeá a galérie, archívy (filmový, televízny, rozhlasový), informačný systém (v zmysle vizuálnych navigačných prvkov) v zložitých budovách (letiská, nemocnice), systémy pre riadenie obsahu, data bázy, internetové sídla.


3

Má iný význam ako architektúra systému v softvérovom inžinierstve. ,

Informačný architekt.

Osoba zodpovedná za analýzu a dizajn dát, archivovaných v informačnom systéme, pričom sa záujem sústreďuje na prvky, ich atribúty a ich vzájomné vzťahy.

Vzťahuje sa na modelovanie dát pre individuálne a inštitucionálne dátové modely. Inštitúcia (napríklad podnik) môže používať a koordinovať definíciu dát vo viacerých (môžu byť aj stovky) rôznych databázach.

Pre integráciu technológií ako aj definíciu špecifických dát ktoré sa prenášajú medzi systémami sa používa kánonický dátový model. Na vyššej úrovni abstrakcie sa môže vzťahovať na definíciu dátových úložísk.


4

INÉ DEFINÍCIE IA

Informačná architektúra je konceptuálna štruktúra a logická organizácia inteligencie osoby alebo organizácie.

Pojem inteligencia je v zmysle vedomosť použitá pre informovanie. Iná definícia hovorí, že IA je:

1. Štrukturálny dizajn zdieľaných informačných prostredí. 2. Umenie a veda organizovať a označovať internetové sídla, intranetové zdroje, sieťové komunity a softvér tak aby podporoval použiteľnosť a schopnosť niečo nájsť (findability). 3. Vynárajúca sa komunita odborníkov zameraná na tvorbu princípov dizajnu architektúry v digitálnej krajine.

KritikaIA: Architektúra sa zaoberá návrhom statických a fyzických stavieb, zatiaľ čo informácia je nehmotná a informačné systémy sú dynamické.


5

Návrh orientovaný na používateľa analyzuje kognitívne, behaviorálne a emočné procesy používateľa a definuje informačné systémy orientované na používateľa a taxonómie.

Niektoré aktivity potrebné pre tvorbu informačných systémov môžu byť podobné aktivitám pri tvorbe taxonómií.

Niektorí experti tvrdia, že pojem informačná architektúra je analogický s taxonómiou.

Iní tvrdia, že aktivity pri tvorbe taxonómie sú podmnožinou aktivít vo vývoji informačnej architektúry, pretože typicky zahrňujú formuláciu cieľov informácie a porozumeniu zámerov používateľov.


6

Niektorí informační architekti sa špecializujú na vývoj taxonómií ako súčasti ich nástrojov pre IA, ktoré sú súčasťou dodávaných častí ako je mapa stránky, tokové diagramy, návrhy prototypov na úrovni vzhľadu obrazovky reprezentujúcich štruktúru internetového sídla alebo interaktívnu aplikáciu.

Nakoľko metódy informačnej architektúry sa po vzniku WWW popularizovali, niektorí architekti nemajú skúsenosť s návrhom systémov s neverbálnym obsahom, kde je prehliadanie menej dôležité.

Používatelia podnikových informačných systémov a databáz majú obyčajne iné ciele ako používatelia internetu.

Pre informačného architekta je dôležité aby rozumel konkrétne požiadavky používateľov a aby neaplikoval rovnaké metódy pre každý informačný systém (customization).


7

V súvislosti s integráciou podnikových aplikácií, ani internetové stránky ani podnikové dátové modely sa nemôžu posudzovať izolovane.

Informačný architekt čelí výzvam vynárania sa celého spektra štrukturovaných a neštrukturovaných dát v tranzakčných systémoch a iných aplikáciách.


8

6.2 DIZAJN INTERAKCIE

Návrh interakcie (Interaction Design) definuje chovanie vecí alebo systémov ako reakciu na akcie používateľa.

Vo všeobecnosti sa môže použiť aj pre neelektronické výrobky, služby alebo organizácie. Interakacia sa obyčajne sústreďuje na informačné technológie vložené do okolitého fyzického a sociálneho prostredia.

Ako prvý použil Bill Moggridge a Bill Verplank koncom osemdesiatich rokov minulého storočia. Podľa nich je to adaptácia pojmu návrh používateľských rozhraní, ktorý vznikol v počítačoveje vede na priemyselný dizajn.

Je to vylepšenie mäkkej tváre (soft-face) aplikácií priemyselného dizajnu na produkty obsahujúce nehmotný softvér.


9

Návrh interakcie je interdisciplinárny - vyžaduje si vedomosti z programovania, grafického dizajnu, psychológie a iných príbuzných disciplín.

Malcolm McCullough napísal, že návrh interkacie sa stane v dôsledku všadeprítomného (ubiquotous) používania počítačov najviac rozšíreným umením dvadsiateho prvého storočia.


10

NÁVRH SOCIÁLNEJ INTERAKCIE

Táto disciplína sa vynára v poslednej dobe v súvislosti s rozvojom rôznych zariadení ako mobilné telefóny, PDA a rôzne aplikácie počítačov (kolaboratívne prostredia, sociálne siete, hry s viac hráčmi).

Sociálna interakcia sa zaoberá interakciami medzi používateľmi navzájom pomocou informačných a komunikačných technológií.

Predmetom záujmu je dynamika interpersonálnej komunikácie, hovorená a písaná reč, pragmatika rozprávania a interakcie.

Reč a umenie písať sa stávajú kritickými faktormi používania sociálnych technológií.

Sú viac predmetom sociológie, psychológie a antropológie ako racionálnych kognitívnych a počítačových vied.


11

V návrhu interakcie sa používajú aj poznatky z emocionálneho dizajnu (emočný dizajn - Emotional Design alebo model radosti).

Pri návrhu interakcie sa používajú niektoré princípy kognitívnej psychológie, ktoré tvoria teoretický základ tejto disciplíny. Obsahujú mentálne modely, mapovanie, metafory rozhraní a "affordance".


12

6.2.1 KONCEPTY DIZAJNU INTERAKCIE

Pri dizajne všeobecne sa používajú nasledovné koncepty podporujúce použiteľnosť: "Affordance", obmedzenia, mapovanie, konzistencia, spätná väzba, kultúrne pozadie, konceptuálne modely, individuálne rozdiely

"AFFORDANCE"Toto slovo v zmysle kompatibility stimulu a odozvy pôvodne zaviedol percepčný psychológ J. J. Gibson (1977, 1979) pre opis akčných vlastností medzi svetom a hercom (človek alebo zviera). Gibsonove "affordance" sú vzťahom.

Podľa knihy D.A. Normana "The Psychology of Everyday Things" by sa mal použiť pojem "perceived affordance," pretože v dizajne sa viac staráme o to čo používateľ vníma ako ako to čo skutočne robí.


13

Dizajnér sa stará o to či si používateľ uvedomuje fakt, že existujú niektoré akcie s navrhovaným objektom.

Sú situácie, keď zmyslami vnímateľné charakteristiky objektu implikujú intuitívne jeho funkcionalitu a použitie.

"Affordance" sa vzťahujú na vnímané a skutočné vlastnosti vecí, hlavne na tie, ktoré určujú spôsob ako by sa veci mohli používať.

Stolička "affords" - umožňuje (je pre) podporu niečoho a preto umožňuje sedenie.

Nožničky majú otvory a os okolo ktorej sa otáčajú obe pohyblivé časti. Nabádajú k prestrčeniu prstov a ich otvárania a zatvárania.

Komplexné objekty si vyžadujú návod na použitie, ale jednoduché sa používajú intuitívne. Ak tomu tak nie je, veci sú navrhnuté zle.


14

V dizajne vecí (product design), kde sa jedná o reálne fyzické predmety môžu existovať reálne aj vnímané "affordance".

Softvérové rozhrania sú neuchopiteľné, vnímateľné len vizuálne. Existujú virtuálne a preto nevykazujú fyzické "affordance".

Klávesnica myš a tlačidlá "affords" ukazovať, dotýkať sa a poklepávať (click). Obrazovka umožňuje tiež dotýkať sa, aj keď len podmnožina - dotykové obrazovky fungujú pri dotyku.

Nepriama interakcia pomocou kurzoru ovládaného myšou nie je "affordance" - je to spätná väzba.


15

OBMEDZENIAPredstavujú hranice možných akcií, ktoré sa môžu s daným rozhraním robiť.

Zabraňujú výberu neplatných možností.

Logické obmedzeniaKultúrne obmedzeniaFyzické obmedzenia

Príkladom fyzických obmedzení je taký tvar vecí, ktorý zabraňuje inému spôsobu použitia, napríklad konektory (matičná doska, diskový radič, externé pamäti flash) sú asymetrické.

Kurióznym príkladom je použitie symetrického slova čitateľného ŤAHAŤ na skle dverí, ktoré sa otvárajú len v jednom smere. Takýto prípad sa skutočne stal.


16

MAPOVANIE

Je vzťah medzi ovládacími prvkami a ich pôsobením na ovládaný objekt.

Napríklad volant auta spôsobuje jeho otočenie v smere otočenia volantu, rozmiestnenie vypínačov a im zodpovedajúcim svetlám v miestnosti.

Niektorým ľuďom spôsobuje problém mapovanie pohybu bočnej lišty na rolovanie textu v okne. Šípka na ikone smeruje dolu a text sa pohybuje smerom nahor.

Mapovanie môže byť kultúrne (farby indexov v menu na ich reprezentáciu) alebo fyzické (sila zvuku, jas svetla).


17

KONZISTENCIARovnaké operácie a rovnaké prvky používať na podobné úlohy. Napríklad rovnaká farba skupiny menu alebo tlačidiel.

Ak sa pre označenie skupiny písmen používa stlačenie tlačidla SHIFT a pohyb myši, potom súčasné stlačenie iného znaku napríklad ALT by sa malo použiť pre inú funkciu.

Konzistencia podporuje naučiteľnos.

SPATNÁ VAZBAZviditeľnenie zvýraznením, zobrazením objektu alebo jeho animáciou ako aj generovanie zvukového signálu indikujúceho uskutočnenie akcie.

KULTÚRNE POZADIESymboly, ikony, farby majú v rôznych kultúrach rôzny význam.


18

KONCEPTUÁLNE MODELYPoužívatelia majú mentálne modely fungovania vecí.

Modely umožňujú znovupoužitie scenára fungovania vecí.

Tieto modely obsahujú "affordance", mapovanie, obmedzenia, kultúrne zvyky, podobnosť iným prístrojom a veciam.

Zlý dizajn vedie k nesprávnym mentálnym modelom. INDIVIDUÁLNE ROZDIELYPoužívatelia majú rôzne senzorické, motorické a kongnitívne schopnosti.

Ovládanie automobilu je obtažne až nemožné pre deti ale aj extrémne veľkých ľudí, malé písmo sa zle číta, niektorí ľudia nerozoznávajú farby.


19

6.3 INFORMAČNÝ DIZAJN

Informačný dizajn (Information design) je súbor metodík a zručnosti pre prezentovanie informácie tak, aby ju ľudia používali výkonne a účinne.

Dôraz sa kladie na funkcionálny (v porovnaní s atraktivitou) návrh a prezentovanie informácie.

Informačný dizajn prekračuje hranice medzi softvérovými systémami zameranými na úlohy (task oriented) a hypertextovými systémami zameranými na informácie (information oriented), pretože ani návrh rozhraní ani navigačný dizajn nemôže byť úspešný bez dobrého informačného dizajnu.

Informačný dizajn je tmel, ktorý drží všetky komponenty dizajnu v celku.


20

Uplatňuje sa vždy keď sa robia rozhodnutia o tom, ako prezentovať informáciu tak aby ju ľudia mohli používať alebo ľahko porozumieť.

Niekedy je informačný dizajn vizuálny. Napríklad graf, pomáhajúci porozumieť štatistické data, ikona reprezentujúca vec, zoskupenie prvkov pri organizovaní informácie.

Napríklad položky (štát, zamestnanie, telefón, ulica, meno, smerovacie číslo, organizácia, mesto) môžu byť v inom poradí - meno ako prvé, je to prirodzenejšie.

Používa sa aj rozdelenie do skupín do skupín - osobné údaje - meno (krstné meno, priezvisko), adresa (štát, mesto, ulica, smerové číslo), iné (telefón).

Vznikol v grafickom dizajne a preto sa častokrát učí ako súčasť grafického dizajnu. Pojem sa objavil v roku 1970 ale viac sa udomácnil po zverejnení publikácie Information Design Journal v roku 1979.


21

70.roky- štatistická grafika, informačná grafika - kvantitatívne dáta (ľahko pochopiteľné grafy)

Informačná grafika sa ďalej rozvíja v disciplíne vizualizácia dát a vedecká vizualizácia s dôrazom na abstraktné a n- rozmerné štatistické dáta.

Neskoršie sa úloha grafického informačného dizajnu rozšírila o zodpovednosť za obsah a o jazyk informačnej správy.

V tomto prípade sa vyžadujú interdisciplinárne vedomosti a výskum hodnotenia používateľmi, čo presahuje doménu klasického grafického dizajnu.


22


23

Profesionálne písanie a technická dokumentácia (dizajn dokumentov) - súčasť grafického a informačnéhu dizajnu. Zameriava na tvorbu informačnej štruktúry pre špecifické domény. Napríklad tam kde treba štrukturovať relevantný obsah jeho dekompozíciou do oddelených príručiek podľa kompetencií a schopností cieľovej skupiny čitateľov a účelu použitia.

Aj na úrovni, kde je treba organizovať obsah v každom dokumente, pričom treba zaručiť aby dokumenty obsahovali prehľad, koncepty, príklady a definície podľa určitej organizačnej schémy.

Na najnižššej úrovni pri jemnom návrhu pre logické delenie hlavných bodov, zvýraznenie dôležitosti, navigačné pomôcky, návrh stránok, výber typov písma a medzier. Tieto kompetencie sú dôležité okrem príručiek aj pri návrhu pomoci (help) používateľom softvérových produktov.


24

V informatike a informačných technológiách je informačný dizajn synonymom pre informačnú architektúru, data bázy a dátové štruktúry.

Tu sa používa aj dátové modelovanie a analýza procesov. Dizajnér sa tu stáva informačným architektom.

Dôležitou časťou informačného a navigačného dizajnu je hľadanie cesty (Wayfinding).

Je to analógia k informačnému systému mesta alebo budovy – šípky, orientačné tabule, farebné kódy.

Dobrý spôsob hľadania cesty je keď používateľ pochopí mentálny obraz kde sa nachádza , kam môže pokračovať a ktorá voľba ho priblíži k cieľu.

Komponenty hľadania cesty sú prvky, ktoré nemajú funkciu navigačných prvkov. Sú to napríklad farby, nadpisy alebo malé mapky ukazujúce kde človek sa v štruktúre nachádza.


25

6.4 DIZAJN NAVIGÁCIE

Navigačná schéma internetového sídla je analógiou cestnej mapy.

Poskytuje ukotvenie k domovskej pozícii a umožňuje dosiahnuť jasnú cestu k cieľu ako aj návrat domov.

Základným prvkom navigácie je vnorený odkaz - ktorý môže byť umiestnený na ľubovoľnom mieste informačnej krajiny a poskytuje viac informácií o vybranom pojme.

Je to lupa pomocou ktorej používateľ vidí štruktúru a prostriedok, pomocou ktorého sa v nej môže pohybovať. Na prvý pohľad je to jednoduchá úloha, vložiť na každú stránku linky, dovoľujúce pohyb v informáciách.


26

Navigačný musí poskytnúť tri možnosti súčasne:

1. Dostať sa z jedného bodu stránky do iného bodu.

2. Relácie medzi riadiacimi prvkami a obsahom. Čo majú tieto linky navzájom spoločné ? Sú niektoré dôležitejšie ako iné ? Aké sú medzi nimi relevantné vzťahy ?

3. Vzťahy medzi obsahom a stránkou, ktorú používateľ práve prehliada, Čo má spoločné tento obsah s tým čo hľadá ? To pomáha používateľovi porozumieť aké možné a najlepšie voľby má k dispozícii k dosiahnutiu cieľa.


27

6.4.1 TYPY A METÓDY NAVIGÁCIE

Hierarchická navigácia sa vzťahuje na sídla s bohatým obsahom a najlepšie sa organizuje ako veľký strom, podobne ako knižnica. Umožňuje široký výber v rámci celého sídla.

Globálna navigácia sa aplikuje na sídla kde je možné logicky preskakovať medzi všetkými bodmi. Skôr v menšom počte ale širších kategóriách.

Lokálna navigácia je niekde medzi hierarchickou a globálnou navigáciou. Aplikuje sa na hlbší obsah so širšími oblasťami. Umožňuje pohyb v blízkom okolí.

Náhradná navigácia poskytuje skratky k dosiahnutiu obsahu, ktorý sa nedá priamo dosiahnuť cez globálnu alebo lokálnu navigáciu. Ponúka výhody faceted (knihovníctvo) klasifikácie (dovoľuje používateľovi posunúť fokus na výskum bez návratu na začiatok), pričom sídlo si udržiava primárnu hierarchickú architektúru


28

Faceted NavigationProblemThe users are searching for an item in a structure where all facets of an item are a possible entry point

SolutionAllow the users to navigation the information space by progressively selecting desired facets of the information items.

Faceted search, also called faceted navigation or faceted browsing, is a technique for accessing a collection of information represented using a faceted classification, (example of faceted classification, a collection of books might be classified using an author facet, a subject facet, a date facet, etc. Faceted classification is used in faceted search systems that enable a user to navigate information along multiple paths corresponding to different orderings of the facets. This contrasts with traditional taxonomies in which the hierarchy of categories is fixed and unchanging)allowing users to explore by filtering available information. A faceted classification system allows the assignment of multiple classifications to an object, enabling the classifications to be ordered in multiple ways, rather than in a single, pre-determined, taxonomic order. Each facet typically corresponds to the possible values of a property common to a set of digital objects.[1]

Facets are often derived by analysis of the text of an item using entity extraction techniques or from pre-existing fields in the database such as author, descriptor, language, and format. This approach permits existing web-pages, product descriptions or articles to have this extra metadata extracted and presented as a navigation facet.MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

http://en.wikipedia.org/wiki/Faceted_classification

http://en.wikipedia.org/wiki/Faceted_search

http://en.wikipedia.org/wiki/Taxonomy

http://en.wikipedia.org/wiki/Entity_extraction

29

Kontextuálna navigácia sa nazýva aj "inline" navigácia a je vnorená do obsahu stránky. Je to odkaz v rámci stránky. Návrh kontextovej navigácie nám uľahčí porozumenie potrieb používateľa a poslanie stránky.

Zdvorilostná navigácia poskytuje prístup k položkám, ktoré používateľ obyčajne nepotrebuje (len občas). Sú to kontaktné informácie, formuláre pre spätnú väzbu, vyhlásenia o stránke.


30

METÓDY PODPORUJÚCE NAVIGÁCIU

Štýly navigácie: Linky, cesty, lišty, mapy, …

Mapa stránky: Je nástroj vzdialenej navigácie, keď používateľ nevie pokračovať štandardnými prostriedkami. Je to obyčajne hierarchická schéma stránky. Obyčajne len dve úrovne hierarchie.

Index: Je abecedný zoznam hlavných tém a linky na relevantné stránky. Užitočné ak sídlo má veľa rôznych tém. Niekedy sa týkajú len istých častí sídla.

Priama navigácia: Používať označenia.

Konzistentnosť: Na celej stránke.

Pomoc v grafickej forme: Ilustrovanie navigácie pomocou grafov ale aj textových linkov.

Automatická navigácia: Existujú snahy o automatizáciu navigácie.MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

31

6.4.2 DESAŤ PRAVIDIEL NAVIGAČNÉHO DIZAJNU

1 Dizajn zameraný na používateľa.

Základný princíp navigačného dizajnu je zameranie na čitateľa - používateľa internetového sídla.

Nie je to návrh, ktorý má len dobre vyzerať.

Vyhýbanie sa postoju z pohľadu organizácie, nepoužívať neznáme klasifikačné názvy, ktorým rozumie len niekoľko kompetentných osôb.

Navigácia je pomôcka pre čitateľa, ktorá mu pomáha orientovať sa v obsahu.

Komunikovať s používateľmi o ich preferovaných spôsoboch navigácie.

Používať modely navigácie od prvých fáz návrhu a zohľadňovať spätné väzby od používateľov


32

2 Používať viac spôsobov navigácie.

Keby chceli všetci používatelia komunikovať so systémom rovnako, návrh by sa zjednodušil.

Realita je však iná. Ľudia majú svoje obľúbené spôsoby navigácie v obsahu.

Niektorí hľadajú radšej informáciu podľa zemepisnej polohy, iný podľa subjektov. Iný požadujú dokument, ktorý čítali posledne alebo najčastejšie čítaný.

Aby sa uspokojili ich požiadavky treba používať rôzne možnosti navigácie ako aj mnohonásobné klasifikácie pojmov.


33

3 Informovať používateľa kde sa nachádza

Navigácia musí dať používateĺovi jasnú a jednoznačnú informáciu o tom kde sa nachádza.

Má byť vo forme hypertextu.

Ak je v grafickej forme v prípade globálnej navigácie, potom klasifikačný názov sa musí líšiť od toho, ktorý opisuje stránku.

Aby používateľ vedel kde sa nachádza musí mať každá stránka unikátne meno, aby čitateľ okamžite vedel kde je.

V prípade grafickej forme musí byť zaručené aby odkaz opisujúci stránku, kde sa nachádza používateľ je rozdielny od ostatných odkazov (linkov).


34

4 Informovať používateľa odkiaľ prišiel

Základný princíp navigačného dizajnu je informovať používateľa kde sa nachádzal.

To je kľúčový dôvod používať šo najviac hypertext v porovnaní s grafickou formou.

V hypertexte sa pri poklepnutí na odkaz zmení farba textu.

Preto treba používať čo najviac hypertext a konvenšné farby pre nenavštívené a navštívené odkazy (modrá a fialová).


35

5 Informovať používateľa kam môže pokračovať

Používať samovysvetľujúce klasifikácie možných pokračovaní.

Označiť na aký typ dokumentu - HTML, PDF, TXT, JPG ide.

Neotvárať nové okná ak to nie je nevyhnutné.

Zmena farby odkazu ak sa nad ňou nachodí kurzor.

Pomáha ak viac odkazov je pokope. Pretože link zmení farbu, používateľ vie presne ktorý má odklepnúť.


36

6 Poskytnutie kontextu

Primárnou funkciou stránky je poskytnúť použivateĺovi kontext.

Stránka nie je len o funkčnej navigácii vo forme hľadania v hypertexte.

Musí tiež vyberať zvýraznený obsah z archívu a prezentovať ho ako sumarizáciu vlastností.

Najlepší kontext sa dosiahne vhodnou klasifikáciou obsahu, rôznymi odkazmi na zdroje informácií, použitím navigácie, ktorá na konci dokumentu dovedie k odkazom na podobné dokumenty a sídla.

7 Dodržiavanie konzistentnosti

Nekonzistentnosť mätie používateľov. Pre navigáciu je kritická konzistencia klasifikácie, grafickej navigácie, farieb pre hypertext.


37

8 Dodržiavanie konvencií

Ľudia vo väčšine považujú pavučinu ako jedno médium. Uprednostňujú použitie zručností, ktoré poznajú z jedného sídla na iné sídla.

Časom sa vynárajú nové metódy, rôzne sídla uprednostňujú rôzne metódy. Veľké sídla imitujú bez zábran najlepšie metódy navigácie.

Tie sú: Globálna komunikácia, návrat domov (ikona domčeku), informácia o sídle (About), adresa kontaktu firmy a sieťového správcu.

Logo organizácie býva v ľavom hornom rohu každej stránky, a je súčasne odkazom na domovskú stránku.

Vyhľadávanie obyčajne v pravom hornom rohu je súčasťou mnohých zložitejších sídiel - aj keď mnohokrát majú obmedzenú funkcionalitu. Stránky obsahujú pätku s globálnou navigáciou vo forme hypertextu


38

9 Neprekvapovať a nemýliť používateľa

Nikdy sa nesmie požadovať aby používateľ robil niečo čo je komplikované alebo nemožné.

Nepoužívať cesty ktoré nevedú nikam alebo inam kam ukazujú, treba jasne informovať o výnimkách, nepožadovať veci, ktoré nemôžu vykonať (vyžadujúce si špecializované zásuvné moduly, kodeky a iné neštandardné nástroje).


39

10 Poskytnutie spätnej väzby

Na každej stránke poskytnúť možnosť konaktovať sa s organizáciou len jedným stlačením tlačidla myši (email, telefón a iné).

Pri zložitejších sídlach je potrebná pomoc používateľovi.

Spätná väzba pomocou zvýraznenia textu pri poklepaní naň alebo prechod na inú stránku.

Ak používateľ vyplní dotazník a odošle ho, očakáva odozvu.

Preto každá stránka musí obsahovať možnosť kontaktu s organizáciou, kontextovo citlivú pomoc, mechanizmus pre vyhnutie sa opakujúcich sa chýb používateľa, izolovanie chýb používateľa, poskytnutie mechanizmu pre zobrazovanie stavu procesu (napríklad pri načítavaní stránok), nastavenie spôsobov spätnej väzby pre používateľa.


40

6.5 DIZAJN A INŽINIERSTVO POUŽÍVATEĽSKÝCH ROZHRANÍ

Týka sa softvérového pohľadu.

Interfejs je prostriedok, pomocou ktorého sa používateľ dostáva do kontaktu s funkcionalitou.

Dizajn rozhraní je o výbere správnych prvkov pre úlohy, ktoré sa používateľ snaží riešiť a o usporiadaní týchto prvkov na plochu obrazovky tak aby boli zrozumiteľné a aby sa ľahko používali.

Úspešný dizajn je taký, kde používateľ okamžite spozná čo je dôležité.

Umením v návrhu je zviditeľniť dôležité a potlačiť nepodstatné (ale pre rôznych používateĺov je dôležitá iná vec – výzva pre adaptívne rozhrania).

Dobrí programátori uvažujú krajné situácie – edge cases.


41

Pri návrhu rozhraní softvérových aplikácií sa v súčasnosti používajú integrované návrhové prostredia IDE.

Tieto limitujú návrhárov na štandardné prvky.

Príkladom pre aplikácie v jazyku Java sú to Netbeans a Eclipse. V jazyku C++ a C# Microsoft Visual Studio.

Dve primárne technológie pre web dizajn HTML a Flash majú tiež obmedzenia, ktoré limitujú možnosti, čo je na jednej strane zlé no na druhej strane prináša výhody.

Zlé lebo obmedzujú inovácie.

Dobré lebo podporujú konvencie. Vývojom sa ustabilizovali štandardné riadiace prvky.


42

6.6 VIZUÁLNY DIZAJN

Vizuálny dizajn je konečnou fázou návrhu interaktívneho informačného systému.

Výsledkom sú jednotlivé obrazovky a ich striedanie podľa nelineárneho scenára v závislosti od akcií používateľa.

Pri vizuálnom dizajne treba používať vizuálne schopnosti používateľov a základy psychológie Gestalt - proximitu, symetriu, podobnosť, kontinuitu, uzatvorenosť.

Podkladom pre vizuálny dizajn je schématické znazornenie štruktúry - kostry stránky (wireframe).


43

6.6.1 SCHÉMATICKÉ ZNÁZORNENIE (WIREFRAME) OBRAZOVKY

Základom rozmiestnenia prvkov určujúcich následný vizuálny dizajn je kostra stránky (wireframe, rámec, rám).

Je to čiarové znázornenie všetkých komponentov na stránke a spôsob ako spolu zapadajú.

Je detailne okomentovaná .

Integruje informačný, interfejs a navigačný dizajn – tu sa spájajú informačný a vizuálny dizajn a kohezívnu kostru. Vyžaduje si rovnováhu mnohých aspektov súčasne.

Má mnoho spoločného s architektonickým diagramom jednej stránky, môže byť aj šablóna pre všetky stránky.

Určuje rozmiestnenie prvkov (layout, priestorová kompozícia) obrazovky.


44

Informační architekti sa sťažujú, že dizajnéri tvoriaci kostru zatemňujú informačnú architektúru za navigačným systémom a nereflektujú princípy architektúry.

Vizuálni návrhári sa sťažujú, že kostra, ktorú navrhnú informační architekti redukuje ich role na umelcov a obmedzujú ich expertízne schopnosti a skúsenosti v komunikačnom dizajne.

Ak na projekte pracujú informační architekti a vizuálni dizajnéri je jedinou cestou ich úzka spolupráca.

Návrh wireframes treba dokumentovať- ale dobre.Zlá dokumentácia je mrhanie časom.Dobrá je užitočná aj do budúcnosti.

Postačujú skice, hlavne pre malé tímy, kde dizajnér a informačný architect sedia vedľa seba.

Ak je to distribuovaný tím je treba aby to bolo formálne.


45

Hodnota kostry je v tom že integruje tri prvky štrukturálnej úrovne:

1. Interface dizajn – cez výber a aranžovanie prvkov rozhrania

2. Navigačný dizajn – cez identifikáciu a definíciu jadrových navigačných systémov

3. Informačný dizajn - cez umiestnenie a prioritizáciu informačných komponentov.

Ich integráciou do jedného dokumentu wireframe definuje kostru ktorá buduje na podloženej konceptuálnej štruktúre a súčasne ukazuje cestu k vizuálnemu dizajnu.


46

6.6.6 NÁVRH OBRAZOVIEK

Obrazovky sú vizuálnym prejavom funcionality aplikácie. Obsahujú statický a dynamický text a obraz. Text a obraz majú rôznu veľkosť, farbu. Štyri princípy návrhu obrazovkových rozhraní podľa D.A. Normana. Každý z nich má výhody aj nevýhody.

1. Používanie konvenčných metód pri výbere obrazov a dovolených interakcií

Konvencie vážne obmedzujú kreativitu. Ich používanie môže mať za následok porušenie duševného vlastníctva autora použitej metódy alebo obrazu. Častokrát chceme zaviesť novú metódu bez použitia konvencií. Vo všeobecnosti môže aj použitie konvencií viesť k neúspešnému návrhu, no keď porušujeme konvencie je väčšia pravdepodobnosť zlyhania aj keď si myslíme, že nová metóda je vynikajúca. Nie je možné zaviesť novú klávesnicu, zmeniť konvencie pre ovládanie posúvacej lišty alebo zaviesť dvojité stlačenie tlačidla myši pri voľbe odkazu pri internetovej stránke. Ľudská kultúra sa mení pomaly - v dobrom aj zlom.


47

2. Používanie slov pre opis požadovanej akcie (napríklad tu stlač tlačidlo alebo použitie textu pred grafickými objektami )

To, že akcie sú opísané verbálne je príčinou prečo použitie menu je relatívne ľahko zrozumiteľné. Ale používať menu sa človek musí naučiť. Samotné slová neriešia problém, musíme vedieť, aké akcie vyvolajú. To si vyžaduje konvencie zvýrazňovania, znázornenia a naznačenia akčných objektov. Je známe, že jednoslovné návestia pri väčšine ľudí zlyhávajú. Každý má svoje obľúbené slovo, ale množina oblúbených slov je veľká. Slová spôsobujú problémy pri lokalizácii v iných jazykoch. Preto sa v doprave používajú symbolické značky namiesto slov. Aj keď mnoho ľudí im nerozumie. Slovám sa porozumie rýchlejšie ako grafickým znakom aj dobre známym. Najlepšie sa dá porozumieť piktogramom spolu so slovami no mnohokrát sa používateľ musí obrátiť na príručku, glosár alebo spriahnutú pomoc aby pochopil ich význam a kontext.


48

3. Používanie metafor

Metafory sú užitočné ale aj škodlivé.

Niektorí ľudia (napr. aj A.D. Norman) tvrdia, že sú viac škodlivé ako užitočné.

Nie všetci používatelia im rozumejú a na druhej strane ich interpretovať doslova a pokúšať sa robiť akcie, ktoré sú možné s vecou, ktorej metafora sa v rozhraní používa a ktoré neboli ani zámerom.

Metafory podporujú naučiteľnosť rozhraní pri prechode z aplikácie bez počítača na aplikáciu s počítačom.

No ak používatelia nemajú skúsenosti s predpočítačovou aplikáciou, metafora stráca význam.

Napríklad metafora písacieho stola alebo digitálne hodinky s analógovým ukazovaním času.


49

4. Používanie koherentných konceptuálnych modelov tak, že ak sa používateľ naučí jednu časť, môže ich použiť v iných častiach

Koherentné konceptuálne modely sú užitočné a potrebné. Problém je s ich inicializáciou - ako sa tento model spozná na začiatku, ktoré a aké konvencie, slová a metafory.


50

6.6.7 NIEKTORÉ PRINCÍPY GRAFICKÉHO DIZAJNU OBRAZOVIEK

Grafický dizajn sa zaoberá návrhom povrchu - konečným vzhľadom obrazoviek. Kľúčovým je návrh tvaru symbolov, typografia, výber farieb a rozloženie prvkov na obrazovke.

OBRAZOVÝ SYMBOLIZMUS A NÁVRH PIKTOGRAMOVAbstraktné obrazy - znaky (piktogramy, idiogramy) delíme na

symboly - majú ľubovoľný vzhľad. Asociácii medzi vhľadom a významom je treba sa naučiť a je závislá od istej kultúrnej alebo profesnej domény. ikony - majú istú podobnosť medzi vhľadom a významom, sú ľahko zrozumiteľné.indexy (príznaky) - sú znaky spôsobené vecou alebo procesom na ktoré odkazujú. Vyjadrujú vzťah príčiny a účinku alebo následnosti (ak je farba tekutiny modrá tak je to príznakom že je chladná.


51

Abstraktné a konkrétne obrazy plnia svoju funkciu, majú estetický vhľad a zachovávajú identitu programu či prezentácie ako aj objektu prezentácie.

Základné princípy ich tvorby sú

konzistencia, jasnosť, jednoduchosť, známosť (familiarity).

Niekedy sú tieto požiadavky v protiklade, ale skúsený návrhár vie kedy môže zvýšiť váhu jedného na úkor iného kritéria.


52

Pri návrhu piktogramov rešpektujeme nasledujúce prvky vizuálnej semiotiky:

Lexikálne - vzťahujú sa k tomu ako sa vytvárajú znaky. Vizuálne atribúty ako rozlíšenie bodov, maximálna veľkosť, farebné rozlíšenie, uhly a hrúbky čiar. Syntaktické - vzťahujú sa ku vzťahu znakov navzájom. Sémantické - vzťahujú sa k významu znakov napríklad konkrétne verzus abstraktné objekty, moment v čase - pred/po/počas, priestore - pred/za/nad. Pragmatické - vzťahujú sa na spôsob interpretácie znakov, na relácie medzi znakmi a osobami, ktoré ich čítajú.

Hlavné zásady sú: Konzistenciu vzhľadu piktogramov alebo dokumentov dosiahneme tým, že používame mriežku, kde jedna bunka zodpovedá jednému obrazovému bodu.

Počet obrazových bodov má byť taký aby piktogram bol identifikovateľný z normálnej vzdialenosti pozorovateľa od obrazovky.


53

Na obrazovke s vysokým rozlíšením (60 až 150 dpi) sa používa 30 až 60 obrazových bodov na stranu štvorca.

Čitateľnosť piktogramov pri pohľade z typickej vzdialenosti - ľahká rozlíšiteľnosť navzájom voľbou počtu farieb, tvarov, vzorov.

Konzistencia množiny symbolov sa prejavuje v obmedzenom množstve uhlov, ktoré medzi sebou zvierajú čiary, ich hrúbkou, tvarom, percentom voľného priestoru.

Každý symbol rozložíme na množinu vizuálnych prvkov, ktorých kombináciou sa tvoria rôzne symboly.

Analýza verbálneho obsahu a zobrazenia na displeji, počiatočný návrh rýchlym načrtnutím (čo najviac), triedenie podľa štýlu, návrh hlavného rastru (hlavné časti), použitie veľkých objektov, tučných čiar a jednoduchých oblastí z dôvodu rozlíšiteľnosti, jednoduchý vhľad (ikony musia byť jednoduché a jasné), striedmosť farieb (nie veľa farieb), posúdenie návrhu potencionálnymi zákazníkmi


54

ÚVOD DO TYPOGRAFIE

Dôležitým vizuálnym atribútom je vzhľad textového dokumentu - rozloženie jednotlivých častí textu, obrázkov a v prípade multimédií aj okien v ktorých sa prehrávajú animácie a video.

Typografia písma je charakterizovaná druhom (rezom, typeface) napríklad Times Roman (pätkové - serif). Helvetika (bezpätkové - sans serif), typom (normálne alebo zvýraznené - kurzíva, tučné, podčiarknuté), veľkosťou písma - petit, garmond, cicero, medzerami medzi písmenami (napr. p r e l o ž e n á sadzba), slovami, riadkami a zarovnaním riadkov.

Vzhľad stránky je ďalej určený počtom a tvarom stĺpcov (bloky textu s obdĺžnikovým alebo iným tvarom) , ich vzdialenosťami od okrajov ako aj navzájom medzi sebou, farbou písmen a pozadia.

Hlavné zásady poznať každý, kdo chce publikovať v papierovej alebo elektronickej forme.


55

Veľký prínos znamenala abeceda Francúza C. Garamnoda z roku 1530. V roku 1757 navrhol J. Baskerwille abecedu s extrémne veľkými pätkam. Jeho písmo sa v takmer nezmenenej podobe používa dodnes.

V roku 1816 W. Calson navrhol (medzi inými) písmo bez pätiek. Na tú dobu pôsobilo groteskne a je známe pod menom Grotesk.

Prvé modely písacích strojov koncom minulého storočia používali písmo G. Bodoniho (1740-1813). Fotosadzba v polovici tohto storočia umožnila ďaľší rozvoj tlače.

Veľký prínos k počítačovej typografii urobil Donald Knut, autor niekoľkozväzkovej zbierky algoritmov.

Masový nástup osobných počítačov v osemdesiatich rokoch vôjde zrejme do histórie šírenia informácie pomocou písma tak ako aj posledná veľká udalosť - publikovanie v Internete cez službu World Wide Web.


56

Hlavným kritériom typografie je čitateľnosť - schopnosť nájsť, identifikovať, rozlíšiť a absorbovať text. Čitateľnosť sa podstatne zvýši pozorným výberom typu a rozložením písmen.

Aj keď sa typy písmen ako aj rozloženie textu počas stáročí zmenili, platia určité základné princípy: premenlivé rozostupy písmen kde napríklad "l" je omnoho užšie ako "m".

Adaptívne zmenšovanie rozostupov šetrí priestor a spôsobuje, že text je čitateľnejší ako pri konštantných rozostupoch.

Čitateľné písmo je veľké 9 alebo 10 bodov (1 bod = 1/72 palce). Pätkové (serif) písmo má o niečo lepšiu čitateľnosť ako bezpätkové (sans serif).

Dôležitou charakteristikou textových blokov je zarovnanie - doľava, na stred alebo doprava.


57

Podľa niektorých prameňov zarovnaný text znižuje rýchlosť čítania o 12 percent (kvôli väčším medzerám je v riadku menej slov).

Veľké písmená zaberajú o 30 percent väčší priestor a znižujú rýchlosť čítania o 12 percent.

Všeobecným pravidlom je, že treba používať čo najmenej typov písma (1 až 3), veľkostí (1 až 3) a štýlov písma.

Treba používať veľké (kapitálky, verzálky) aj malé písmená a vyhýbať sa používania len veľkých písmen.

Dĺžka riadku by mala byť v rozmedzí 40 až 60 znakov.

Rozloženie textu (Layout) má sledovať hrubý raster. Rozloženie môže byť symetrické alebo nesymetrické, ale nesmie sa miešať.

Používajú sa 1,2 alebo 3 stĺpce. Medzery medzi nimi ako aj od okrajov strany majú byť primerané. Obrázky majú byť tiež zamerané v hlavnom rastri.


58

FARBA VO VIZUÁLNOM DIZAJNE

Pri používaní farieb je dôležitá schopnosť pomenovávať ich. Vzniklo veľa farebných modelov - subjektívnych a objektívnych, založených na meraní fyzikálnych veličín alebo na subjektívnych pozorovaniach.

V počítačovej grafike sa používajú fyzikálne a inštrumentálne systémy (RGB, CMYK), kalorometrický systém (CIE XYZ), perceptuálne usporiadaný systém (Munselov strom, CIELUV, CIELAB, HLS) a prirodzený - vymenúvavací systém (CNS - color naming system).

Najčastejšie používaným inštrumentálnym modelom je RGB (Red-Green-Blue). Takzvané skutočné farby (true color) používajú 8 bitov na každú farebnú zložku, čo umožňuje zakódovať 16,78 miliónov farieb.

V norme JPEG 2003 sa používa 48 bitov na obrazový bod, čo umožňuje zakódovať väčší rozsah jasu a tým sa priblížiť k ľudskému oku.


59

V tlači sa používa model CMYK (Cyan- Magenta - Yellow- Black) so subtraktívnycm miešaním farieb.

V grafe CIE - Commision Internationale de L´Eclairage sa farba presne určí pomocou súradníc x a y. Farby sú zobrazené vnútri oblasti ohraničenej uzavretou krivkou. V strede oblasti je biela a na okrajoch sú prechody medzi základnými farbami R,G,B.

Vo video technike sa používa vyjadrenie pomocou jasovej zložky Y a dvoch farebných Y-B (U) a Y-R (V). Pri spätnej transformácii sa zelená zložka, ktorá nesie 60 percent jasovej informácie vypočíta z Y, U a V súradníc. Tento model zohľadňuje exaktnejšie podstatu ľudského oka – citlivosť na jas a farby.


60

Rôzne vstupné zariadenia môžu snímať rozdielne tie isté farby. Tak isto reprodukcia tej istej farby býva rozdielna na rozdielnych monitoroch.

Pre posudzovanie korešpodencie medzi farebnými odtieňmi nasnímaných obrazov a ich zobrazením na monitore sa používa napríklad farebný kalibrátor. Kalibrátor farieb je svetlocitlivý senzor, ktorý sa pripevní pomocou prísavky na sklo monitora a kábel sa zapojí ku klávesnici a myši. Nainštaluje sa sprievodný softvér, pomocou ktorého sa potom nastaví jas, kontrast a sýtosť základných farieb.

K vizuálnemu posudzovaniu farieb sa používa rozpoznávač farieb PANTONE (Pantone colour selector).


61

Subjektívne vnímanie farby

Farby delíme ďalej na pestré farby - spektrálne a im príbuzné tóny, alebo nepestré - biela, sivá a čierna. Sýte a pastelové (veľký podiel bielej).

Psychologické kritériá vychádzajú z faktu, že človek podvedome spája niektoré druhy farieb s určitými predmetmi alebo javmi (metaforické vnímanie farby) napríklad teplé farby (noranžová, žltá) studené tóny (modrá, zelená).

Farby sa používajú dokonca aj v liečení, napríklad modrá v miestnostiach pre pacientov s vysokým krvným tlakom, červená pre tých čo majú nízky krvný tlak.

Hovoríme o optimistických farbách (zelená), veselých (smutných alebo melancholických (modrá), smútočných (čierna aj keď v niektorých kultúrach je farbou smútku biela),


62

ľahkých (žltá), ťažkých (čierna, tmavomodrá - doporučuje sa komponovať obraz tak, aby ťažšie farby boli naspodu a ľahké navrchu.

Niektoré národy majú pre isté farby, ktoré človek z iných geografických oblastí ani nevie vizuálne rozlíšiť špeciálne výrazy.

Ustálený význam majú farby v heraldike napríklad červená je znakom odvahy, modrá vernosti, socializmu, komunizmu (v Indii čistoty), žltá (zlatá) znakom cti a lojálnosti, zelená rastu a nádeje, atď.

Niektoré farby môžu mať rôzny význam pre rôzne profesné skupiny a to aj v rámci jednej kultúry. Nepríklad modrá v USA: (diváci v kinách - neha, pornografia), (finančné kruhy - kvalita firmy, spoľahlivosť), (zdravotníctvo - smrť), (monitorovanie atómového reaktoru - chlad, voda).


63

Publikovali sa štatistiky obľúbenosti jednotlivých farieb u mužov a žien, dospelých a deťoch, rôznych národov. Sú publikované asociácie a súvislosti farieb s hudbou.

Pri vnímaní farieb je dôležítá aj ich spojitosť s inými farbami. Červená blízko žltej má v sebe nádych modrej, žltá a červená prechádza do zelenej, červená pri modrej prímes žltej. Niektoré kombinácie sú príjemné niektoré pôsobia znepokojujúco.

Kombinovanie farieb ovplyvňuje čitateľnosť dokumentov. Doporučuje sa používať kontrastné farby. V počítačovej grafike a televízii sa hovorí o "televíznach" farbách (napríklad žltá na modrej, ktorá sa s obľubou používa v prezentačných programoch alebo diapozitívoch).


64

Nasledujú niektoré odporúčania pre prácu s farbami:

Maximum päť farieb, plus mínus dve. Treba používať farby v poradí ich kódovania - postupnosť červená, oranžová, žltá, zelená, modrá, tmavo fialová, fialová.

Vhodné použitie centrálnych a periférnych farieb. Modrá na väčšie plochy - nie pre text alebo tenké linky. Na sietnici sú modré čapíky najmenej zastúpené. Modrá je vhodná ako pozadie na diapozitívoch a na obrazovke. Červená a zelená má byť v centre vizuálneho poľa a nie na periférii. Čierna, biela, žltá a modrá sa hodia na perifériu. Používajte susedné farby, ktoré sa líšia odtieňom a hodnotou.

Nepoužívať súčasne vysoko chromatické farby. Ostrý konrast kombinácií červeá/zelená, modrá/žltá, zelená/modrá, červená/modrá spôsobuje chvenie, ilúzie tieňov a hĺbky.


65

Používať známe, konzistentné farebné kódovanie. V západnej civilizácii sú to:

Červená: stop, nebezpečie, horúci, oheň Žltá: pozor, pomaly, test Zelená: choď, v poriadku, čistý, vegetácia, bezpečie Modrá: chlad, voda, pokoj, obloha Teplé farby: aktivita, potrebná odpoveď, blízke Studené: vyjadrenie stavu, informácia v pozadí, vzdialené Sivá, biela, modrá: neutralita. Farebná škála môže vyjadrovať stupňovanie hodnôt, napríklad v grafe.


66

Používať rovnaké farby pre skupiny korešpondujúcich objektov. Používať tie isté farby počas celého životného cyklu produktu - učení, testovaní, aplikáciách a publikáciách

Používajte veľké hodnoty chromatických farieb pre upútanie pozornosti. Čistá červená má väčší účinok ako žltá alebo oranžová. Používajte jasnejšie farby pre starších ľudí, alebo tých čo sa dívajú dlho na obrazovku.

Používať redundantné kódovanie tvarov ako aj farieb s ohľadom na osoby, ktoré nie sú schopné rozpoznávania farieb. Farebné rozlíšenie spôsobuje rýchlejšie zapamätanie si údajov.


67

NÁVRHU PRIESTOROVEJ KOMPOZÍCIE OBRAZOVKY

Niektoré odporúčania pri návrhu rozloženia prvkov na obrazovke (layout). Kompozícia a štýly - vizuálne makety ukazujú všetky prvky dohromady za účelom kohezívneho celku.

Na nich je možné vidieť jednoduchú koreláciu medzi kostrou a kompozíciou (layout).

Kostra je spojená s informačným dizajnom predstavuje topológiu (prvky spojené pružnými - gumennými spojmi) a kompozícia geometriu (presné umiestnenie a orientácia prvkov).

Sledovanie oka - vyhodnotenie vizuálneho dizajnu zodpovedaním otázok ako sa pohybuje oko, kde spočinie na začiatku, ktoré elementy upútajú pozornosť. Dá sa to zistiť sledovaním pohybu oka pomocou zariadenia sledovania (eyetracking), dotazníkmi, analýzou video záznamu.


68

Kontrast a uniformita - kontrast naviguje pohľad na niekoľko dôležitých prvkov, ale prehnané používanie eliminuje účinok.

Použitie navigačných prvkov rovnakej veľkosti umožňuje ich jednoduchú rekombináciu

Rozloženie prvkov v mriežke pochádza z tlačených dokumentov a v prehliadačoch sa nie vždy dá zabezpečiť.

Vnútorná a vonkajšia konzistencia - celý dokument má byť konzistentný vrátane firemnej identity, logami, nadpismi a terminológiou.

Farebné palety a typografia musia byť pre celý dokument rovnaké.


69

6.7 ZÁKLADY DIZAJNU INTERNETOVÝCH DOKUMENTOV

Existuje veľa spôsobov návrhu internetových sídiel. Táto kapitola metódu návrhu od konceptu po detailný návrh, od abstraktnej po konkrétnu špecifikáciu úloh. NÁVRH ZHORA NADOL

Návrrh od abstraktného ku konkrétnemu. Existuje päť rovín - etáp návrhu: Stratégia je kde to všetko začína. Čo požadujeme od sídla ? Čo požaduje používateľ ? Kontext transformuje stratégiu na požiadavky. Ktoré vlastnosti je treba vložiť do sídla ? Štruktúra determinuje kontext. Ako do seba zapadajú jednotlivé časti a ako sa správajú. Kostra konkretizuje štruktúru. Ktoré komponenty budú dosažiteľné používateľmi.Povrch integruje všetko spolu vizuálne. Vzhľad výsledného produktu.


70

Tieto poskytujú konceptuálny rámec pre špecifikovanie problémov používateľovej skúsenosti a nástrojoch pre ich riešenie. Téma na každej rovine je menej abstraktná a viac konkrétna.

Na najnižšej rovine sa nestaráme o konečný tvar navrhovaného sídla. Zaujíma nás len ako sídlo zapadne do stratégie. Na najvyššej rovine sa zaujímame iba o konkrétne detaily. Smerom nahor sa návrh zjemńuje a stáva sa konkrétnejším. Vyššie roviny sú závislé na nižších. Povrch závisí na kostre, kostra na štruktúre, štruktúra na kontexte a kontext na stratégii.

Ďalšie prídavné faktory determinujú konečnú skúsenosť používateľa.

Obsah je kráľom v internete. Ten prináša používateľovi osoh.

Technológia je dôležitá do tej miery, pokiaľ podporuje prácu z obsahom k spokojnosti používateľa. Ak zaostáva, môže brzdiť rýchlosť a obmedzovať kvalitu práce.


71


Životný cyklus návrhu internetového sídla podľa Garretta

72


6.7.1 STRATÉGIA: CIELE SÍDLA A POŽIADAVKY POUŽÍVATEĽA

Koncept sa určuje stratégiou. Táto zahrňuje ciele tvorcov, prevádzkoveteľov a používateľov.

Požiadavky používateľa: Sú ciele pre sídlo, ktoré vychádzajú z vonku organizácie, od ľudí ktorí ho budú používať. Musíme im rozumieť, pznať ich, vedieť akí sú. Segmentujeme ich podľa spoločných kritérií.

Ciele sídla: Môžu byť obchodné ciele. Stratégia je rovnováha medzi cieľmi sídla a požiadavkami používateľov. Definovanie stratégie: Čo potrebujeme získať zo sídla, čo vyžadujú klienti.

Metrika úspešnosti: Je štatistika návštevcnosti, obrat, zisk.

73


Použiteľnosť a model používateľov: Zbieranie a vyhodnocovanie dát o používateľových požiadavkách - štandardné metódy, interview, prieskum v teréne, atď. Prieskum zameraný na určité skupiny. Analýza úloh - činnosť používateĺa v kontexte s produktom, ktorý sa navrhuje. Testovanie používania. Prototypovanie. Metódy uvedené v kapitole 5. Tímové role a procesy: Vlastníci, vrcholové predstavenstvo. Ľudia na nižších postoch však môžu mať lepší prehľad. Ciele sídla a požiadavky používateľov sú zaznamenané formálne v strategickom dokumente. Prístup k nemu majú všetci - dizajnéri, programátori, informační architekti, manažeri (niekedy obsahuje aj citlivé údaje).

74


6.7.2 KONCEPT: FUNKČNÁ ŠPECIFIKÁCIA A POŽADAVKA NA OBSAH

Štruktúra definuje spôsob ako zapadajú jednotlivé vlastnosti a funkcie sídla. Tieto určujú koncept.

Funkcionalita a kontext: Po otázke prečo to robíme (strategy) pýtame sa čo robíme - funkčná špecifikácia a požiadavky na obsah.

Funkčná špecifikácia: Na strane softvéru sa stratégia transformuje na koncept pomocou funkčnej špecifikácie. Je to detailný opis množiny vlastností produktu. V softvérovom dizajne sa používajú rôzne metódy ale programátori to neradi používajú. Byť pozitívny – písať nie čo nemá ale čo má byť. Byť konkrétny – veľmi presne a konkrétne. Vyhýbať sa subjektívnemu jazyku (cool, pekný, fantastický – čo to je ?).

75

Požiadavky na obsah: Na strane informačného systému koncept má formu požiadaviek na obsah. Text, obrázky, video, zvuk – treba obnovovať podľa požiadaviek. Obsahový inventár v prípade ak je veľa informácií Definovanie oboru a rozsahu: Vedieť čo sa robí (zdá sa to prirodzené, ale treba presne definovať požiadavky, etapy a časový harmonogram zaznamenať ich), vedieť čo nerobíme (vyhnúť sa zbytočnostiam).

Zbieranie požiadaviek a priority: Niektoré sú špecifické a niektoré všeobecné. Najlepším zdrojom informácií sú používatelia. Scenáre – deje pre špecifické príklady. Každý má nejaké požiadavky ale je treba ich nejako utriediť a kategorizovať. Niekedy majú strategické ciele za následok rôzne požiadavky a naopak jedna požiadavka slúži rôznym cieľom.


76

6.7.3 ŠTRUKTÚRA: NÁVRH INTERAKCIE A INFORMAČNÁ ARCHITEKTÚRA

Kostra je konkrétne vyjadrenie abstraktnej štruktúry sídla. Môže definovať umoestnenie prvkov rozhrania a usporiadanie navigačných prvkov.

Dizajn interakcie: Koncept je daná štruktúra a na strane softvéru definovaná pomocou dizajnu interakcie. Týka vecí pri vykonávaní úloh. Zaoberá sa možným správaním používateľa a definovaním ako sa systém prispôsobuje a odpovedá na jeho chovanie. Tradične sa programátori starali o to čo robí softvér a ako pracuje. Na viac počítače nestačili. Dnes je v strede záujmu ako pracuje používateľ.


77

Informačná architektúra: je koncept na strane informačného priestoru. Je to usporiadanie obsahových prvkov. AI sa zaoberá tvorbou organizačných a navigačných schém, ktoré dovoľujú používateľovi pohybovať sa v obsahu efektívne a výkonne. Je úzko prepojená s konceptom získavania informácií. Návrhu systémov tak aby používateľ jednoducho získal informáciu. IA si často vyžaduje tvorbu kategorizačných schém. Takéto schémy možno tvoriť zhora alebo zdola nahor. Nemožno povedať, ktorá je lepšia ale používa sa aj kombinácia. Hlavné modely AI sú hierarchická, maticová, organická a sekvenčná štruktúra. Dôležitým pojmom sú organizačné princípy s použitím grafov.


78

Existujú rôzne organizačné princípy a môžme ich rôzne združovať podľa kategórií. Vo všeobecnosti organizačné princípy na najvyššej úrovni sú zhodné s požiadavkami používateľa a cieľmi sídla. Na nižšej úrovni majú väčší vplyv obsah a funkčné požiadavky. Každá množina dát má inú a dokonca viac konceptuálnych štruktúr. Položky môžme usporiadať podľa rôznych atribútov ako v databázach. V terminológii knihovníctva sa používa názov facets. Zlé použitie organizačnej štruktúry je horšie ako žiadne. Používatelia majú mnoho možností výberu, ale môže sa stať že informáciu nenájdu. Rovina stratégie nám napovie čo používatelia potrebujú, a rovina oboru ktorú informáciu potrebujú. Pri tvorbe štruktúry identifikujeme špecifické aspekty, ktorú informáciu mal používateľ na mysly. Skúsenosti používateľov sú tým čo nám napovie dopredu - ich očakávania.


79

Definovanie štruktúry: V softvérovom inžinierstve sa hovorí o návrhu interakcie, alebo návrhu rozhrania (interaction, interface design). V poslednej dobe, hlavne v súvislosti s web dizajnom sa viac hovorí o návrhu interakcie. V oblasti dizajnu obsahu sa hovorí o informačnej architecture. Táto oblasť zahrňuje tradičné disciplíny, ktoré pracovali s organizovaním, grupovaním a prezentovaním obsahu – knihovníctvo, novinárstvo, technická komunikácia atď.Informačný dizajn a architektúra sa zaoberajú tým ako porozumieť ľuďom, ako pracujú a myslia.

Konceptuálne modely: Sú predstavy používateľa ako by sa mali chovať interaktívne komponenty (napríklad v e-obchode akcie s nákupným košíkom a peňaženkou) . Poznajúc koncepty, dá sa z nich odvodiť konzistentný návrh. Používajú sa konvencie s nepočítačovej aplikácie a iných počítačových aplikácií.


80

Práca s chybami: Veľkú časť návrhu interakcie zaberá práca s chybami. Prvá ochrana je navrhnúť systém, tak že sa chyby nemôžu vyskytovať – pevne určiť voľby, to ale obmedzuje. Druhá ochrana je situácia ako im zabrániť – napríklad MS Word aby sme nezabudli, že po bodke má byť veľké písmeno, systém ho doplní (ak to nevieme odstrániť zdržuje to). Iný príklad je undo. Aby sme niečo nevymazali tak system chce potvrdenie – niekedy aj viac krát.

Jazyky a metadáta: Aj keď je štruktúra reprezentáciu ako používatelia myslia, nemôžu sa v interentovom sidle vyznať pokiaľ nepoznajú nomenklatúru – popisy, nadpisy a inú terminológiu sídla.Preto treba používať terminológiu, jazyk používateľa. Jedným z nástrojov, ktoré to podporujú je riadený slovník. Tento podporuje konzistenciu v rámci celého obsahu a získa sa hlbokým štúdiom analýzou používateľa a úloh. Dokonalejším riadeným slovníkom je Tesaurus. Tieto slovníky sú nápomocné pri tvorbe metadát, ktoré popisujú všetky položky obsahu. Keď máme túto informáciu, môžme robiť rôzne varianty architektúry. Čím viac informácií máme, tým flexibilnejšie môžme obsah štrukturovať. Dobré metadata umožnia lepšie vyhľadávanie vnútry sídla ako aj vyhľadávačmi.


81

Tímové role a procesy: Veľké štruktúry je treba dokumentovať. Mapa stránky je takým prostredkom. Môže mať rôzne formy – text, graf. Teraz sa používa názov graf architektúry (architecture diagram). Tento nemusí obsahovať všetky odkazy, ale popisuje štruktúru.


82

6.7.4 KOSTRA: DIZAJN ROZHRANIA A INFORMAČNÝ DIZAJN

Kostra sídla: Pod povrchom je kostra - umoestnenie tlačidiel, obrázkov, blokov textu. Kostra je navrhnutá tak aby sa optimizovalo rozmiestnenie týchto prvkov z hľadiska maximálnej výkonnosti a účinnosti interakcie.cart button when you need it.

Informačný dizajn: Prezentácia informácie spôsobom aby uľahčil porozumieť …

Dizajn rozhrania: Je to usporiadanie prvkov rozhrania pre interakciu s funkcionalitou systému. Týka sa softvérového pohľadu. Úspešný dizajn je taký, ak používateľ okamžite spozná čo je dôležité. Umením v návrhu je zviditeľniť dôležité a potlačiť nepodstatné (ale pre rôznych používateĺov je dôležitá iná vec – výzva pre adaptívne rozhrania). Dobrí programátori uvažujú krajné situácie – edge cases.


83

Navigačný dizajn: Je rozhranie pre informačný priestor. Je to množina prvkov obrazovky umožňujúca pohybovať sa v informačnej architektúre. Ani najlepší navigačný dizajn alebo návrh rozhrania nemôže vylepšiť zlý informačný dizajn, informačnú architektúru, stanovenie oboru a stratégiu.

Definovanie kostry: Štruktúra definovala ako bude stránka pracovať, kostra definuje formu funkcionality. Ide aj viac do detailov. Na rovine štruktúry to bola architektúra ale tu ideme do jednotlivých stránok a komponentov. Konvencie a metafory: Konvencie sú v živote dôležité. Konzistentnosť v aplikáciách je nie len v rozmiestnení prvkov ale aj postupnostiach operácií. Koncept ako štart, koniec, uchovať, ísť naspäť sa nachádza v mnohých aplikáciách aj navonok veľmi rozdielnych. Druhým dôležitým aspektom návrhu sú analógie s inými činnosťami. Metafory sú formou analógie a pomáhajú naučiteľnosti pomocou asociácií. Asociácie môžu byť spojené s kultúrnym pozadím.


84

Schématické znázornenie (Wireframe) je čiarové znázornenie všetkých komponentov na stránke a spôsob ako spolu zapadajú.


85

6.7.5 POVRCH: VIZUÁLNY DIZAJN

Na povrchu vidíme internetové stránky zložené z textu a obrázkov alebo animácií. Niektoré sú citlivé na dotyk a poskytujú rôzne služby, niektoré sú len ilustrácie. Vizuálny dizajn: V softvérrovom produkte alebo informačnom priestore určuje vzhľad finálneho produktu.


86

INFORMAČNÉ ZDROJE:

Garret, J., J.: The Elements of User experience. User - Centered Design for the Webhttp://www.jjg.net/elements/pdf/elements.pdfhttp://www.jjg.net/elements/translations/Fleming, J.: Web navigation: designing the User Experience. O Reilly 1998Spolsky, J.: User Interface Design for Programmers, Apress 2001Tufte, E.: Envisioning Information. Graphics Press. 1990Veen, J.: The Art and Science of Web Design. New Riders, 2000Rosenfeld, L., Morvile, P.: Information Architecture for the WWW. O´Relly 2000Norman, R.: The Design of Everyday Things, Currency/Doubleday, 1990.www.jjg.net/elements/resources/

The Microsoft Windows User Experience: Official Guidelines for User Interface Developers and Designers

Windows Vista User Experience: http://msdn2.microsoft.com/en-us/library/aa511258.aspx

Apple Human Interface Guidelines: http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines

Java Look and Feel Design Guidelines: http://java.sun.com/products/jlf/ed1/dg/index.html

Iné UI design: http://www.otal.umd.edu/guse/standards.html


http://www.jjg.net/elements/pdf/elements.pdf

http://www.jjg.net/elements/translations/

http://www.jjg.net/elements/resources/

http://msdn2.microsoft.com/en-us/library/aa511258.aspx

http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines

http://java.sun.com/products/jlf/ed1/dg/index.html

6 dizajn rozhranÍ informaČnÝch systÉmov

Documents