dizajn programskih proizvoda - · pdf fileskripta za usmeni-dizajn programskih proizvoda ......

SKRIPTA ZA USMENI-Dizajn programskih proizvoda

[Type text]

Dizajn programskih proizvoda

Što čini dobar dizajn? Dobro dizajnirani softver može poboljšati učinkovitost rada 25-40% Radi se o tome kako čovjek vidi, razumije i misli. Dizajn treba biti prilagođen koriniku koji na njemu radi.

Ljudsko-računalna komunikacija

HCI se bavi sljedećim stvarima:

Ljudskim zahtjevima Fizičkim sposobnostima i ograničenjima korisnika Ljudskim afinitetima prema oblicima i bojama Tehničkim ograničenjima softvera i hardvera

Tipkovnica Miš

Na dodir osjetljivi zaslon (touchscreen) ili ploča (touchpad)

Zalon Zvučnici Pisač Crtač

Kratka povijest HCI

1974 – XEROX – miš Miš se počeo koristiti 1984 pojavom Macintosha

1985 – Microsoft Windows 1.0 1987 – X Windows 1989 – AT & T Open Look, Sun Motif

Kratka povijest WWW


[Type text]

1969 – ARPANET – Prva globalna računalna mreža. Povezivala je 4 glavna sveučilišta (UCLA, Stanford, UCSB, Uni Utah)

1972 – 213 spojnih točaka 1972 – ARPANET – Norwegian Seismic Array 1973 – ARPANET – University College London 1974 – Bolt, Beranek, Newman – Telnet – Javno dostupna globalna računalna mreža 1974 – TCP/IP protokol 1989 – CERN – HTML – Protokol temeljen na hipertekstu (objavljen za Internet 1991). Prostor različitih

"stranica" na različitim serverima koji su povezan hipertekstom naziva se WWW. Mnogo manje mogućnosti od tada postojećih GUI.

1990 – ARPANET postaje Internet 1991 – Uni of Minessota – Gopher – Stablasto sučelje za Internet 1993 – Uni of Illinois – Mosaic – prvi grafički WWW pretraživač 1994 – Uni of Illinois – Netscape Navigator 1995 – Microsoft – Internet Explorer 1995 – Opera – Mali pretraživač temeljen na Mosaicu 1998 – Mozilla 2004 – Mozilla Firefox

Razvoj UI

70' – Maska za unos ima mnogo polja. Koriste se skraćenice za oznake, na zaslonu se pojavljuje mnogo poruka koje su dane u šiframa

80' – Oznake postaju opisne. Koriste se funkcijske tipke kako bi se pozivale posebne funkcije. Sučelja su još uvijek karakter orijentirana

90' – Pojava GUI. Javljaju sesloženije komponente maski kao što su izborne liste (list boxes, combo boxes). Dugmad mijenja funkcijske tipke

Osnove GUI

GUI je korisničko sučelje temeljeno na manipulaciji grafičkim objektima na zaslonu. GUI se sastoji od:

Radnog prostora na kojem se nalaze različiti objekti. Radni se prostor vizualizira kao radni stol (Desktop)

Pokazivača (Pointing device, kursor) pomoću kojeg se manipulira objektima radnog prostora. Pokazivač podsjeća na ljudsku ruku kojom čovjek manipulira dokumentima na radnom stolu.

WIMP – Windows, Icons, Menus, Pointing Device GUI se temelji na direktnoj interakciji. Podsjeća na način manipulacije objektima u realnom svijetu Uzimanje objekata Premještanje objekata Bacanje objekata "u smeće" Otvaranje dokumenata

GUI Prednosti

Simboli se lakše percipiraju nego riječi Lakše se uči


[Type text]

Lakše i intuitivnije rješavanje problema Lakše zapamćivanje Prirodnije Koristi vizualno navođenje Daje kontekst Povećava osjećaj kontrole Trenutni odaziv Laka inverzija akcija Atraktivnije Lakše za lokalizaciju Zahtjeva manje tipkanja

Nedostaci

Veći zahtjevi na dizajn Potreba za učenjem nije u potpunosti eliminirana Nedostatak eksperimentalno provjerenih uputa za izradu dizajna Nije uvijek bliskko ljudima Povećana kompleksnost sustava Zahtjeva manipulaciju prozorima Nema eksperimentalnih istraživanja o ergonomiji ikona (ergonomija teksta se

razvija 300 godina!) Smanjena efikasnost za masovni unos i za iskusne korisnike Opasnost od zagušenja radnog prostora

WWWUI –grafičko sučelje za world wide web

Orijentirano na pretraživanje i prezentaciju informacija Zahtjev za neovisnost o sustavu na kojem se izvodi Zahtjev za radom bez dodatne instalacije softvera

Glavne značajke dobrog dizajna

1. Prisupačnost – Sustav mora biti dizajniran tako da bude iskoristiv što većem broju ljudi

bez ikakvih promjena i prilagodbi 2. Estetičnost

Sustav mora biti privlačan korisnicima

3. Dostupnost Sve opcije iz izbornika moraju biti dostupne u svim trenucima

4. Jasnoća Svi koncepti moraju biti razumljivi i intuitivni

5. Kompatibilnost Prilagođavati se treba softver, a ne korisnici

6. Konfigurabilnost Omogućiti personalizaciju, konfiguraciju i rekonfiguraciju od strane korisnika

7. Konzistentnost Aplikacija mora izgledati kao da iza nje leži svjestan dizajn, a ne kao da je skrpana od različitih nezavisnih dijelova

Kontrola


[Type text]

Interakciju treba kontrolirati i inicirati korisnik, a ne sustav.

8. Izravnost Sve moguće opcije i parametri moraju biti vidljivi na početku pokretanja akcije

9. Efikasnost Iznad svega sustav treba štedjeti na radu oka i ruke

10. Poznatost Korisnici trebaju što manje koristiti priručnik i većina im stvari u sustavu mora biti jasna sama po sebi

11. Fleksibilnost Imajte na umu da će sustav koristiti različiti korisnici

12. Dobrohotnost Ljudi griješe i ne trebaju ispaštati za svoje pogreške

Svakako spriječiti sve pogreške koje bi mogle imati dalekosežne posljedice za sustav

13. Izbjegavanje stresa Napravite sustav koji će korisniku biti prijatelj

14. Očitost Sustav nije nikada previše sugestivan kad navodi korisnika na pravi put Treba imati u vidu

Sustav se mora biti lako shvatljiv Nizovi akcija i odziva moraju biti smisleni, lako pamtljivi

15. Predvidljivost Korisnik mora moći bez problema predvidjeti koji će rezultat pojedina akcija dati

16. Oporavak Ako dođe do poteškoća sustav se mora vratiti na prethodno stanje

17. Trenutačnost odziva Sustav mora obavještavati korisnika da je prihvatio njegov zahtjev

18. Transparentnost Korisnik se mora koncentrirati na svoj posao, a ne boriti se sa softverom

19. Trade-offs Korisnički način rada uvijek ima prednost pred tehničkim zahtjevima

Ljudske reakcije na loš dizajn Psihološke

Zbunjenost Odbojnost Frustracija Stres Dosada

Fizičke Odbijanje sustava Djelomično korištenje sustava Neizravno korištenje sustava Kompenzirajuće aktivnosti Pogrešno korištenje sustava Izravno programiranje

Ljudska psihofizička obilježja Percepcija

1. Blizina – Ljudi povezuju one stvari koje se nalaze u blizini na zaslonu 2. Analogija – Ljudi povezuju stvari koje slično izgledaju 3. Obrasci – Ljudi povezuju stvari koje su slične po obliku, bez obzira na veličinu 4. Pojednostavljenje – Ljudi lakše pamte stvari koje su jednostavnog ili savršenog oblika


[Type text]

5. Zatvorenje – Ljudi imaju tendenciju zatvaranja nezatvorenih oblika u krug, kvadrat i sl. 6. Ogrupljavanje – Ljudi objekte svrstavaju u grupe i pamte ih kao jedinstvenu cjelinu 7. Dopunjavanje – Ljudi često dopunjavaju objekte tako da ih pamte kao jednako

dugačke 8. Balansiranost – Ljudi lakše pamte dizajn koji se temelji na okomitim i vodoravnim

objektima te pravim kutevima. 9. Trodimenzionalna projekcija – Ljudi imaju tendenciju predstavljanja objekata u tri

dimenzije (za preklapajuće objekte govore da su "ispod" ili "iznad") 10. Model svjetla odozgo – Ljudi imaju tendenciju da tamne, zasjenjene objekte vide kao

da su "ispod" 11. Očekivanja – Ljudi često vide ono što očekuju, a ne ono što se zaista nalazi pred

njima 12. Kontekst – Okolina, kontekst utječu na precepciju

Poznavanje poslovnog procesa

Prikupljanje zahtjeva Metode izravnog sakupljanja zahtjeva

Intervju Fokusna grupa (8-12 korisnika + moderator) Timska radionica Studija promatranja poslovanja Prototipiranje zahtjeva Prototipiranje korisničkog sučelja Testiranje korisnosti u laboratoriju

Metode neizravnog sakupljanja zahtjeva Posredovanje menadžmenta Upitnik Elektronička fokusna grupa Posredovanje prodaje i marketinga Korisnička linija kao posrednik Analiza konkurentnog sustava Sajmovi

Određivanje osnovnih poslovnih funkcija Proces određivanja poslovnih funkcija temelji se na tri koraka:

Potpuno shvaćanje korisnikova mentalnog modela Razvoj konceptualnog modela sustava Promjena korisnikova mentalnog modela

Shvaćanje korisnikova mentalnog modela: Provodi se analizom zadaća:

Doznavanje korisnikovih aktivnosti Doznavanje interakcija između korisnika Razbijanje korisnikovih aktivnosti na jednostavne zadaće Doznavanje veza između zadaća


[Type text]

Izrada konceptualnog modela Provodi se analizom zadaća

Doznavanje korisnikovih aktivnosti Doznavanje interakcija između korisnika Razbijanje korisnikovih aktivnosti na jednostavne zadaće Doznavanje veza između zadaća

Konceptualni model je model budućeg sustava koji se temelji na korisnikovom

mentalnom modelu Konceptualni model sadrži

objekte veze među objektima Svojstva objekata Akcije koje se vrše nad objektima

Pri izradi konceptualnog modela treba imati na umu da Konceptualni model mora odražavati korisnikov, a ne dizajnerov mentalni

model Konceptualni model mora odražavati stvarne analogije i od korisnika

prikupljene metafore Konceptualni model mora biti kompatibilan s korisnikovim očekivanjima,

navikama, rotunama i stereotipovima Konceptualni model mora prikazati nevidljive dijelove obrade Konceptualni model mora predviđati ispravan odziv sustava Iz konceptualnog modela moraju biti izbačeno sve što je nevažno Konceprualni model mora biti dizajnerski konzistentan Dokumentacijai sustav pomoći mora biti podrška konceptualnom modelu Konceptualni model mora odražavati i ekspertni i početnički mentalni

model

Razvoj metafora Metafore predstavljaju prikaz objekata poslovnog sustava u programu (kanta za smeće, pisaća daska...) Metafore moraju biti bliske korisniku tako da mu bude jasno o kojem objektu se radi Kod odabira metafora treba imati na umu sljedeće:

Od predloženih metafora treba izabrati onu koja najbolje opisuje objekte i operacija nad njima

Treba koristiti metafore iz realnog svijeta Treba koristiti jednostavne metafore Treba koristiti uobičajene metafore Sustav može imati sinonimne metafore Koristiti glavne metafore, čak i ako ih ne možemo potpuno vizualizirati u

sustavu Metafore treba testirati

Promjena korisnikovog mentalnog modela Samo korištenje uvedenog softverskog rješenja promijenit će korisnikov mentalni model Sustav treba pomoći korisniku da bolje razumije svoje zadaće na poslu


[Type text]

Standardizacija dizajna Postoji niz standarda i naputaka koji obrađuju područje dizajna programskog proizvoda

i korisničkog sučelja Standardizacija dizajna

Korištenje razvijenih naputaka i standarda donosi koristi i za korisnika i za dizajnera: Koristi za korisnika

Ubrzati rad

Smanjenje pogrešaka

Smanjiti vrijeme potrebno za obuku korisnika

Osigurati personalizaciju sustava

Povećati zadovoljstvo korisnika

Povećati prihvaćanje sustava

Smanjiti potrebni razvoj

Koristi za dizajnera Povećati vidljivost funkcija sustava

Pojednostaviti dizajn

Povećava broj dizajnerskih pomoćnih alata

Smanjuje redundantne napore

Smanjuje vrijeme potrebno za obuku

Osigurava testove za kontrolu kvalitete

Principi dobrog dizajna

Osnovni elementi lošeg GUI dizajna (Howlett,1995)

Vizualna inkonzistencija u prezentaciji informacija Prevelika količina vizualnih svojstava i elemenata Prečesto korištenje trodimenzionalne prezentacije Pretjerano korištenje jakih boja Loše dizajnirane ikone Loša tipografija Metafore koje su preopširne, preuske ili pak previše slovne

Osnovni elementi lošeg WWWUI dizajna (Nielsen, 2005)

Problemi čitljivosti, uključujući premale fontove ili premali kontrast Nestandardni prikaz linkova Pretjerano korištenje Flash prezentacija Sadržaj neprilagođen Webu Nekompatibilnost pretraživača Velike, nezgrapne maske za unos Nedostatak kontakta ili drugih informacija o vlasniku stranice Stranice fiksne širine koje prelaze veličinu zaslona Neadekvatno povećanje fotografija

Ciljevi dobrog dizajna Minimizirati vizualni napor Minimmizirati intelektualni napor Minimizirati potrebu za pamćenjem Minimizirati manualni napor


[Type text]

Početna točka Kod dizajna, posebno Web stranice, treba postojati početna točka na kojoj se nalazi

glavni objekt.

Hornoff & Halverson, 2003: Tekst se zapaža prije nego slika Veći objekti se zapažu prije nego manji Promjenjive informacije se zapažu prije nego statične

Streveler & Wasserman (1985): Ljudsko oko prvo primjećuje gornji lijevi dio stranice Nakon toga ljudsko se oko kreće po stranici u smjeru kazaljke na satu.

Uređivanje informacija i objekata 1. Podijeliti informacije i objekte u smislene cjeline 2. Odrediti jačinu veza između informacija 3. Osigurati redoslijed informacija koji se podudara s korisnikovim očekivanjima i potrebama 4. Izabrati shemu redoslijeda prezentacije

Konvencionalna (prema danima u tjednu, po abecedi i sl.) Redoslijed korištenja Učestalost korištenja Prema funkciji Prema važnosti Od općeg prema konkretnom

Navigacija i protok informacija Osigurajte da prezentacija informacija bude ritmična, tako da vodi ljudsko oko slijedno kroz

stranicu Osigurajte da tok informacija bude od vrha prema dnu i s lijeva na desno Pomozite navigaciju kroz stranicu poravnavanjem objekata, grupiranjem objekata i korištenjem

linija odvajanja grupa Osigurajte logiku slijeda informacija prikazujući ih od najvažnijih prema manje važnima Postavljajte gumbe kao posljednje objekte na stranici Ako informacij moraju biti prikazane na više stranica, osigurajte da prelasci sa stranice na stranicu

budu na kraju grupa

Grupiranje objekata Grupiranje praznim prostorom

Kod WWWUI ovo treba koristiti pažljivo jer može uzrokovati potrebu za skroliranjem stranice

Grupiranje granicama Ne koristiti više od 3 različite debljine crte po stranici Ne koristiti više od 2 stila linija po stranici Susjedne grupe poravnati s lijeve, desne, gornje i donje strane Kod WWWUI koristiti linije za grupiranje samo kada je to najnužnije

Grupiranje bojom pozadine Koristiti prosječan kontrast Jaki kontrast čuvati samo za slučajeve kada je nešto iznimno važno


[Type text]

Razlučivost Svaki objekt na zaslonu mora biti jasno razlučiv od pozadine i okolni objekata Pravila:

Objekti se ne smiju međusobno dodirivati Objekti ne smiju dodirivati rub ekrana Tekst unutar objekta (npr. gumba) ne smije dodirivati rub objekta Susjedni se objekti moraju jasno razdvajati bojom, graničnikom,

zasjenjenjem ili drugim grafičkim svojstvima

Fokus i isticanje Načini na koje se može istaknuti neki objekt

Pojačanim osvjetljenjem objekta – Ne koristiti više od dvije razine osvjetljenja Reverznim prikazom – Ovaj način isticanja je kontroverzan i rijetko se koristi Odabirom različitog fonta slova – Ne koristiti više od 2 stila fonta i 3 veličine slova Podebljanjem, ukošavanjem i potcrtavanjem slova – Najčešće se koristi udebljavanje jer

je ukošavanje manje uočljivo, a potcrtavanje dodaje šum i smanjuje čitljivost teksta Treptanjem slova – Nekim je ljudima iritirajuće i smanjuje čitljivost teksta. Preporuča se

treptanje od 2-5 Hz s najmanje 50% vremena u kojem je tekst prikazan Linijama i kvadratima – Ne koristiti više od 3 debljine linije i 2 vrste linije Bojama – Ne koristiti više od 4 boje za isticanje teksta Veličinom – Veći se objekti prije zapažaju nego manji Animacijom – Najefikasnije isticanje. Može biti vrlo iritirajuće. Pozicijom – Ljudsko oko prvo zapaže gornji lijevi ugao zaslona Različitim i neobičnim oblikom Izolacijom Potiskivanjem neaktivnih objekata

3D ELEMENTI

3D elementi 3D elementi koriste se kada se žele prikazati informacije u nekoliko razina. Tehnike 3D prikaza:

Preklapanje objekata. Bacanje sjena – Bez obzira na kulturološku i socijalnu komponentu, svi ljudi

podrazumijevaju "osvjetljenje odozgo", a kod bacanja sjena uvijek podrazumijevaju osvjetljenje u gornjem lijevom uglu ekrana (sjene idu dolje desno)

Jarke i prigušene boje – Objekti jarkih boja će odavati dojam da su iznad onih u prigušenim bojama.

Povećanje i smanjenje – Veći objekti će odavati dojam da su ispred manjih Vertikalna pozicija – Što je objekt niže, izgledat će bliže


[Type text]

Ukošeni rubovi objekta – Ako rubovi objekta ne slijede standardno uređenje (okomito-vodoravno-pravi kut) odavat će dojam trodimenziolnosti

Zamućivanjem – Objekti koji su zamućeni odaju dojam veće udaljenosti Promjenom teksture – Objekti s gušćom teksturom izgledat će udaljenije Približavajuće linije Brzina pomicanja – Objekti koji se kreću sporije izgledat će udaljeniji

Elementi prikaza teksta Bez obzira na rastuće grafičke mogućnosti, tekst ostaje najvažniji element svake WWW stranice i aplikacije Tekst je element koji ima najdulju tradiciju i najbolje je istražen. Znanost o prikazu teksta naziva se tipografija.

Familije pisama

Sarifna pisma (serif) Naserifna pisma (sans serif)

Istraživanja pokazuju da nema razlike u čitljivosti serifnih i neserifnih pisama Pravilo: Ne miješati dvije familije fontova na istoj stranici, jer to donosi šum.

Svako pismo više tipova. Normalno

Ukošeno (italic, cursiv) Podebljano (bold, boldface) Ukošeno i podebljano

SSaa ssjjeennoomm ((SShhaaddooww)) VELIKA MALA SLOVA (SMALLCAPS)

VELIKA SLOVA

Veličina aplikacije i stranice Skroliranje i straničenje Izvjeći potrebu za skroliranjem kako bi se odredio sadržaj stranice Minimizirati vertikalno skroliranje Osigurati kontekstualno navođenje na skroliranje Osigurati sažetke dugačkih stranica Izbjeći horizontalno skroliranje Dulje stranice koristiti samo kod stranica koje se čitaju za dodatno upoznavanje materije Koristiti straničenje umjesto skroliranja kad god je to moguće.


[Type text]

Elementi sučelja aplikacije

Naslov Svakom prozoru ili stranici treba definirati naslov Naslov se pojavljuje na vrhu prozora Naslov treba biti

Opisan Jedinstven za prozor Koncizan

Današnji standard zahtjeva da se naslov piše velikim početnim slovom i malim ostalim slovima (mixed-case)

Oznake i naslovi kontrola Dobro definirane oznake rezultirat će:

90% lakše traženje objekata

25% smanjenje količine klikova koje će korisnik napraviti

Značajno smanjenje broja pogrešaka

Značajno povećanje broja pronađenih objekata

Značajno povećanje zadovoljstva korisnika kod rada

Oznake i naslovi kontrola Sve kontrole na zaslonu moraju imati oznaku ili naslov Svi naslovi i oznake moraju biti pune riječi (bez skraćenica) koje imaju neko značenje za

korisnika Uvijek koristiti veliko početno slovo i ostala mala slova (mixed-case) Oznaka uvijek mora završavati dvotočkom Konzistentnost u imenovanju kontrola Oznake se međusobno moraju značajno razlikovati

Podatkovna polja Vrste podatkovnih polja:

Polja za unos podataka

Uvijek se moraju nalaziti u obrubljenom praokutniku

Pozadina pravokutnika mora biti svjetla i u kontrastu s pozatinom prozora

Polja za prikaz podataka

Prikazuju se uvijek bez pravokutnika s pozadinom boje pozadine prozora

Trenutno nekativna polja

Sadržaj se mora prikazati bojom svjetlijom od boje kojom se prikazuje sadržaj aktivnih polja

Pozadinska boja pravokutnika mora biti ista kao i kod aktivnih polja

Poravnanje podatkovnih polja: oznake u desno – polja u lijevo

Povećana složenost maske

oznake u lijevo – polja u lijevo

povećana udaljenost oznake od kontrole


[Type text]

oznake iznad polja

Veće zauzimanje prostora

Naslovi grupa i poglavlja Naslovi grupa

Naslov trupe i poglavlja mora se nalaziti desno na vrhu grupe Moraju biti ispisani velikim slovima (upper-case) ili mješovito (mixed-case) Moraju biti ispisani normalnim intenzitetom (ne podebljano ni ukošeno)

Naslovi redaka Moraju se nalaziti na početku retka Moraju biti odvojeni od retka specijalnim simbolom kao što je -, > i sl. (Ne koristiti simbol :

koji se koristi za odvajanje oznake kontrole) Moraju biti poravnati na isti način kao i oznake kontrola Moraju biti prikazani u posebnom fontu, veličini ili intenzitetu (bold, italic)

Pomoć pri popunjavanju Omogućuju lakše popunjavanje

Osiguravaju traženi format Mogućnosti ostvarivanja pomoći pri unosu

Maska za unos definirana na polju

Komentar pored polja

Obavezna i opcionalna polja

Liste Liste u aplikaciji

ListBox Combo Box Izbornici Izvještaji

Pravila kreiranja listi Elementi liste uvijek moraju biti prikazani jedan ispod drugog Lista uvijek mora imati naslov Elementi liste moraju biti poredani na smisleni način

U sortiranom redoslijedu Važniji ili češće korišteni prije manje važnih Ako je potrebno izvršiti grupiranje elemenata liste po značenju

Definiranje procedura prelaska između polja Prelazak imzeđu polja pomoću miša krajnje je neefikasan za imalo veće količine unosa podataka Kod veće količine unosa podataka mora se omogućiti prelazak između polja samo pomoću tipkovnice Načini prelaska između polja pomoću tipkovnice

1. Pomoću tabulatorske tipke (tabbing)

Zahtjeva pritisak tabulatorske tipke na kraju unosa polja

2. Automatsko prelaženje s polja na polje (auto skip)

Neadekvatno za polja varijabilne duljine

Može donijeti poteškoće kod ispravljanja pogrešaka unosa


[Type text]

Izlazni podaci Izvještaji Nepromjenjive forme (read only forms) Tablice

Nepromjenjive maske moraju zadovoljavati sve zahtjeve koji se odnose i na maske za unos uz razliku da podatkovna polja ne smiju biti unutar pravokutnika (tj. pravokutnici izlasnih podatkovnih polja moraju biti bez obruba i u boji pozadine prozora)

Izvještaji Dijelovi izvještaja

Zaglavlje stranice

Tijelo stranice

Podnožje stranice

Zaglavlje stranice Obavezni sadržaj

Datum ispisa

O kome je izvještaj

Naslov Dodatni sadržaji

Vrijeme ispisa

Parametri ili datotekakoja se ispisuje

Logo i ostali podaci o tvrtki

Podnožje stranice

Obavezni sadržaj

Redni broj stranice Dodatni sadržaji

Ukupni broj stranica

Datum ispisa

Izvor informacija

URL lokacija

Copyright

Tijelo stranice

Svaki stupac mora imati zaglavlje Uvijek se prikazuju mjerne jedinice Reci moraju biti jasno razdvojeni Korišteni fontovi moraju biri standardni i čitljivi Tekst uvijek poravnavati na lijevo, a brojeve na desno Izbjegavati prikaz brojeva s varijabilnom brojem decimala

Tablice Dijelovi tablice

Naslov Zaglavlje Tijelo Eventualno sumarni redak

Pravila dizajna tablice: Naslov treba biti smislen, opisan i jasan

Svaki stupac mora imazi koncizno i jasno zaglavlje

U zaglavlju tablice za oznake se ne koristi dvotočka

Zaglavlje mora biti jasno istaknuto od ostatka tablice i to bojom pozadine, fontom ili na drugi način


[Type text]

Tekst u zaglavlju mora biti poravnat na isti način kao i podaci u stupcu koji naslovljava

Tekst mora biti lijevo poravnat, a brojevi desno

Podaci u tablici moraju biti poredani logično

Slični zajedno

Najvažniji na početku

Kronološki

Susjedni reci u tablici moraju biti različito osjenčani

Pozadina tijela tablice mora biti u svjetlim bojama

Organizacijski i strukturni naputci

Organizacija Prezentirati podatke na logičan i jasan način Najčešće korištene podatke

Staviti u višu hijerarhijsku razinu na sajtu Staviti na vrh stranice

Najvažnije informacije Staviti u višu hijerarhijsku razinu sajta Staviti na vrh stranice

Naslovi Jasni i precizni Konzistentno pozicionirani s obzirom na polja za unos Uvijek korstiti mixed-case

Grupiranje Podatke grupirati logično Napraviti grupe od 4-7 elemenata

Zaglavlja Koristiti velika slova (Upper case) ili podebljana normalna slova (Boldface mixed case) Definirati zaglavlja za grupe kontrola

Maske za pregled (read-only forms) Organizirati masku logično i pregledno Limitirati se samo na nužne podatke Važnije podatke pozicionirati pri vrhu

Zaglavlja trebaju biti: 1. Jasna


[Type text]

2. konzistentno pozicionirana 3. poravnata u lijevo ili u desno

Dizajn WWW sajtova i stranica Tri dimenzije Web sajtova:

1. Struktura 2. Navigacija 3. Sadržaj

Doživljaj Web stranice ovisi o: Sadržaju

Sadržaj treba zadovoljavati korisničke potrebe Važnije informacije moraju biti bliže korijenu sajta i vrhu stranice Sadržaj se stranica mora često osvježavati

Naslovi i zaglavlja na Webu Na samom početku izgradnje sajta ustanovite hijerarhiju naslova (po veličini, stilu i debljini slova) Osigurajte što je manje moguće različitih fontova i veličina Ne preskačite razine važnosti

Početna stranica (home page) Svrha:

Reći koriniku o čemu se radi na sajtu Reći korisniku gdje se nalazi

Sadržaj: Osigurati navigaciju na sve važne dijelove sajta Izbjegavati tekstove na početnoj stanici

Veličina – zabranjeno skroliranje Elementi početne stranice:

Naziv i logo vlasnika Naziv Web sajta Kratak (vrlo) opis Web sajta Pregled ili mapa sajta Sažetak najnovijih vijesti Najave promjena sajta

Osigurati vraćanje na početnu stranicu sa svake druge stranice na sajtu

Posebni slučaj su segmentirani stupci


[Type text]

Razvoj sistemskih izbornika i

navigacijskih shema

Prednosti i nedostaci

Prednosti Olakšavaju učenje sistemskih mogućnosti Funkcioniraju na principu prepoznavanja objekata, a ne pamćenja

Nedostaci Veći izbornici često predstavljaju problem za neiskusnije korisnije Teško se implementiraju složenije veze među objektima izbornika

Izborničke strukture

Jednostavni izbornici Sve opcije izbornika dane su na jednom zaslonu Korisnik izabire jednu od ponuđenih opcija Nisu povezani s drugim izbornicima Mogu se izvoditi na različite načine

Opcijama s brojem

Običnim gumbima

Alternativnim gumbima (Radio Buttons)

Linkovima

Slijedni linearni izbornici Ova vrsta izbornika predstavlja seriju jednostavnih izbornika koji su međusobno povezani

u slijed Nema mogućnosti da se slijed pojavljivanja mijenja promjenom izbora

Simultani izbornici Kod ovih se izbornika javlja više izborničkih grupa na istom ekranu Oni imaju istu funkcionalnost kao slijedni linearni izbornici, samo što su smješteni

zajedno, na jednom ekranu umjesto na nizu slijedno povezanih ekrana

Hijerarhijsko-slijedni izbornici Oni se također nalaze na nizu ekrana, kao i linearno-slijedni izbornici, no izbori

koji će se naći na sljedećim ekranima ovisit će izboru koji je korisnik ranije odabrao

Ovi izbornici se mogu dizajnirati preko strukture općenitog stabla

Povezani izbornici Ovdje se radi o mreži izborničkih struktura koja nije stablasta Daje korisniku potpunu kontrolu navigacije kroz izbornike U ovakvim se izbornicima lako "izgubiti"

Izbornici pogonjeni događajima Ovi izbornici mogu biti hijerarhijski ili povezani Njihov se sadržaj mijenja s obzirom na događaje u sustavu Većina današnjih Windows izbornika jesu pogonjeni događajima


[Type text]

Razvoj sistemskih izbornika i

navigacijskih shema (cont.)

Izbori opcija izbornika Inicijalni izbor

Inicijalni izbor je izbor koji je aktivan kada se po prvi puta pojavi izbornik na zaslonu. Ponekad neke opcije imaju veću vjerojatnost izbora nego druge

Ako neka opcija ima veću vjerojatnost izbora, nju treba napraviti aktivnom Ako ponavljanje prethodno izabrane opcije ima veću vjerojatnost, onda nju treba

napraviti aktivnom Ako ni jedna opcija nema veću vjerojatnost izbora, onda treba napraviti aktivnom

prvu opciju u izborniku

Tehnike izbora opcija Pokazivačima

Izbor opcije izravnim postavljanjem pokazivača na nju pomoću mehaničke jedinice (npr. miša, prsta na aktivnom zaslonu)

Pri tome treba istaknuti Koja je opcija trenutno aktivno (pod kursorom)

Tipkovnicom Kretanje kroz izbornik

Tipke gore i dolje trebaju mijenjati aktivnu opciju u okomitim izbornicima

Tipke lijevo i desno trebaju mijenjati aktivnu opciju u vodoravnim izbornicima

Standardni (default) izbor U izbornicima (najčešće onima s gumbima) se vrlo često definira standardni izbor Ako postoji standardni izbor on se podudara s inicijalnim izborom Standardni se izbor ističe od ostalih podebljanim (bold) slovima Osigurajte standardni izbor kad god je to smisleno

Izbori uključivanja i isključivanja Postoji više mogućih načina izvedbe

U padajućim izbornicima se uključivanje i isključivanje označava kvačicom

Ako imamo izbornik s više opcija koje se isključuju, onda se koriste alternativni gumbi (radio buttons)

Ako u izborniku imamo više neisključivih opcija koriste se izborna polja (CheckBox)

Svrha Da se odredi je li neko svojstvo uključeno ili isključeno

Kao podsjetnik koje je svojstvo aktivno

Linkovi i akcije Vrste linkova

Tekstualni linkovi Izdvojeni izbornici (okomite ili vodoravne trake)


[Type text]

Izbornici unutar teksta

Grafički linkovi Problem s prepoznavanjem linkova

Komandni gumbi i trake s alatima Moraju zadovoljavati sve ono što je i što će biti rečeno za gumbe u GUI

sučelju

Pravila kreiranja linkova Uvijek konzistentno izdvajati linkove od ostalih objekata Tekstualni linkovi moraju biti izvedeni na jedan od sljedećih načina:

Podcrtavati sve tekstualne linkove uključujući one koji su unutar teksta sadržani u zaglavlju stranice

Razlikovati interne, vanjske i linkove na sidra Eksterni linkovi moraju se istaknuti tako da

Link sadrži adresu odredišne stranice Doda obavijest o izlasku sa sajta uz link Doda odjavna stranica

Grafički linkovi Jasno označiti dijelove slike na koje se može kliknuti Jasno izdvojiti grafičke linkove od dekorativne grafike

Linkovi u trakama Linkove u trakama istaknuti tako da se

Trake uvijek nalaze na isom mjestu na stranici Ispisuju bojom različitom od boje ostalog teksta

Višestruki linkovi (fat links) Moderni browseri omogućuju otvaranje više fascikala (tabs). Stoga se može

razmotriti ideja da jedan link otvara više stranica

Vrste grafičkih izbornika

Izbornička traka Izbornička traka treba sadržavati sve relevantne dijelove aplikacije Iz izborničke trake se ne smije izravno pokretati ni jedna akcija

Izbornička traka može biti izvedena tekstualno ili pomoću gumba

Padajući izbornici Koriste se kako bi se pokrenule često korištene akcije ili različiti prozori Padajuće izbornike treba držati relativno kratkima Najbolji način označavanja opcija jest tekstualan Padajući izbornici se rabe za prvu razinu izborničkih struktura

Osigurati logično grupiranje opcija

Kaskadni izbornici Ovdje se radi o drugoj i daljnjim razinama standardne izborničke strukture Koriste se zbog smanjenja broja opcija u nultoj i prvoj razini

Kaskadni izbornici moraju uvijek biti označeni kaskadnim indikatorom > Nikada ne prelaziti 3 razine izbornika (padajući + 2 kaskadne razine)

Pojavljujući izbornici (pop-up) Koriste se za prikaz opcija i izbora koji su kontekstualno vezani uz zadaću

Istrgnuti izbornici (tear-off) Oni su kombinacija padajućih i pojavljujućih izbornika Prema načinu otvaranja isti su kao padajući ili kaskadni izbornici (iz drugog izbornika) Prema mjestu na kojem se pojavljuju isti su kao pojavljujući izbornici


[Type text]

Izbornici s ikonama Koriste se za pokretanje različitih alata, komandi, opcija Ikone trebaju biti

Takve da zorno prikazuju opciju o kojoj se radi

Standardne za sustav u kojem se radi

Izbor vrste prozora

Prozor Prozor je pravokutno područje na zaslonu, definirano rubom, koje sadrži neki dio dijaloga

korisnika s računalom.

Karakteristike prozora 1. Naslov po kojem se prozor identificira 2. Veličina, odnosno visina i širina 3. Stanje – aktivan, dostupan i nedostupan 4. Vidljivost 5. Lokacija na zaslonu u odnosu na rubove zaslona 6. Prezentacija, u odnosu na ostale prozore – prekrivajuća, kaskadna i pločasta 7. Mogućnosti manuipulacije prozorom 8. Funkcija, zadaća ili aplikacija kojoj prozor pripada.

Ograničenja dizajna s prozorima Hardverska ograničenja

Pojava vrlo malih zaslona ograničava količinu informacija u prozoru Sporost nekih računala i nedostatak memorije ograničava broj korištenih prozora Slaba rezolucija nekih zaslona ograničava kvalitetu grafike koja se prikazuje

Ljudska ograničenja Zbog povećane složenosti sučelje s prozorima zahtjeva više učenja i prakse Prekrivajući prozori ubrzavaju izvršenje zadaće, ali isto tako povećavaju mogućnost

pogrešaka Često se ubrzanje koje donose prozori anulira s vremenom potrebnim za manipulaciju

prozorima

Komponente prozora Okvir

Svaki prozor ima pravokutni okvir ili rub koji ga ograničava i odvaja od ostalih prozora

Naslovna traka Naziva se naslov, naslovna traka ili naslovno područje prozora Naslovna traka sadrži

naslov


[Type text]

ikonu (opisana kasnije) gumbe za promjenu veličine prozora (opisani kasnije

Naslovna traka također služi kao kontrolno mjesto za pomicanje prozora kontrolno mjeto za otvaranje glavnog pojavljujućeg izbornika aplikacije

Ikona naslovne trake Nalazi se u gornjem lijevom uglu prozora Klikanjem na nju se otvara padajući izbornik s opcijama promjene veličine prozora Ona je 16x16 pt verzija aplikacijske ikone

Tipovi prozora Primarni prozori

Javlja se pokretanjem neke aplikacije Naziva se još i primarni prozor, aplikacijski prozor, korijenski prozor, roditeljski prozor U biti treba koristiti jedan primarni prozor

Sekundarni prozori Još se nazivaju i sekundarni prozori, prozori djeca

Koriste se za reprezentaciju dodatne akcije koja je

složene prirode vezana uz objekte primarnog prozora

Sekundarni prozori mogu biti Zavisni – Vezani su uz aplikaciju u kojoj se koriste i mogu biti pokrenuti samo iz

glavnog prozora aplikacije

Nezavisni – Kada se pokreću nezavisno od aplikacije (npr.

Sekundarni prozori Tipovi

Dijaloški prozori (dialog boxes) Koriste se za prezentiranje kratkih informacija

Koriste se za potrebe specifičnih akcija

Koriste se za prezentiranje akcija koje trebaju kretko vrijeme za izvršavanje se ne mijenjaju često

U njima se pojavljuju sljedeći gumbi OK Cancel Ostali po potrebi

Dijalozi svojstava (property sheets) Koriste se za prezentiranje potpunog skupa svojstava nekog objekta

Preporučene veličine su 252x218 DLU 227x215 DLU 212x188 DLU

Gumbi koji se koriste su OK Cancel Apply Reset Ostali po potrebi

Preglednici svojstva (property inspectors) Pomoću njih se izvode promjene svojstava objekata dinamički

Prikazuju samo najčešće korištena svojstva objekta


[Type text]

služe kao podsjetnici na uključena svojstva

Prozori s porukama (message boxes) Koriste se kako bi se korisniku proslijedila informacija o nastaloj situaciji ili stanju

Najčešće se koriste sljedeći gumbi OK Cancel Help Yes i No Stop Gumbi koji ispravljaju situaciju zbog koje je poruka ispisana

Gotovo uvijek su modalni

Često se koriste za potvrdu neke destruktivne akcije

Ekranske kontrole

Ekranske kontrole To su grafički objekti koji reprezentiraju svojstva ili operacije nad drugim objektima. Još se nazivaju widgets

Oni mogu: Omogućavati izbor neke vrijednosti Omogućavati promjenu neke vrijednosti Ispisivati samo određeni dio nekog teksta, vrijednosti ili grafike Posjedovati kontekstualni pojavljujući prozor

Ekranske se kontrole dijele na: Gumbe Tekstualne kontrole (za unos ili samo za čitanje) Kontrole izbora Kombinirane kontrole Posebne kontrole Prezentacijske kontrole Web kontrole

Ekranske kontrole moraju izgledati onako kako rade raditi onako kako izgledaju

Dakle, Kontrole koje imaju uzdignuti 3D izgled moraju se moći pritisnuti Kontrole koje imaju udubljeni 3D izgled ne smiju se moći pritisnuti Elementi s ravnom bijelom pozadinom moraju se moći otvoriti, ažurirati ili premještati

Ekranske kontrole se dijele na Glavne operabilne kontrole Selekcijske kontrole Kombinirane operabilno-selekcijske kontrole


[Type text]

Ostale operabilne kontrole

Glavne operabilne kontrole

1. Gumbi Kvadratne ili pravokutne kontrole koje indiciraju neku akciju koja se može izvršiti U sebi mogu sadržavati oznaku, grafiku ili oboje Svrha:

Za pokretanje akcija Za promjenu svojstava Za prikaz pojavljujućih prozora

Vrste

Komandni gumbi (Command Buttons) – Najčešće se smješteni u unutrašnjosti prozora Njihovim pritiskanjem se aktivira akcija koja se odmah pokreće Najčešće sadrže oznaku akcije koju pokreću

Trake s alatima (Toolbars) – Fiksirne su u glavnom prozoru Grupirane su u zajedničko područje koje nazivamo straka s gumbima Najčešće sadrže grafiku koja oslikava akciju koju pokreću Korisnik ih može premještati ili maknuti iz prozora

Gumbi sustava – Specifični za operacijski sustav Služe za pokretanje kontrola prozora Smješteni su u gornjem desnom uglu prozora

2. Tekstualna polja

Svrha: Za prikaz, unos i promjenu tekstualnih informacija Za prikaz tekstualnih podataka namijenjenih samo za čitanje

Tekstualna polja mogu biti: Polja za unos – polje u koja se preko tipkovnice unose vrijednosti

obavezna

opcionalna

Polja za čitanje – Polja koja prikazuju neku vrijednost, ali ne dozvoljavaju njenu promjenu

dizajn programskih proizvoda - · pdf fileskripta za usmeni-dizajn programskih proizvoda ......

Documents