Dizajn korisničkog sučelja - 1. kolokvij PDF

DIZAJN KORISNIČKOG SUČELJA – 1. KOLOKVIJ Osnovna funkcija korisničkog sučelja (engl. user interface, UI) – olakšavanje komunikacije čovjeka i računala Sučelje nije namijenjeno kontinuiranom neprekidnom čitanju, već predstavlja okvir predviđen neprestanim složenim kretanjima Su...

DIZAJN KORISNIČKOG SUČELJA – 1. KOLOKVIJ Osnovna funkcija korisničkog sučelja (engl. user interface, UI) – olakšavanje komunikacije čovjeka i računala Sučelje nije namijenjeno kontinuiranom neprekidnom čitanju, već predstavlja okvir predviđen neprestanim složenim kretanjima Sučelja trebaju biti što jednostavnija, funkcionalnija i intuitivnija Nama nije cilj proučavati i otkrivati kako sučelje radi već rješavati zadatak i dobivati određene informacije koje tražimo Vrste korisničkih sučelja: Graphical User Interfaces (grafička) Web-based Interfaces (web) Touch Interfaces (sučelja na dodir) Multi-screen Interfaces (više ekransko sučelje) Voice user Interfaces (sučelja upravljana glasom) Gesture Interfaces (sučelja upravljana pokretom) Razvoj i povijest korisničkih sučelja Komandna korisnička sučelja 1950. godine. „Komande” se unose preko tipkovnice Za ispis se koriste teleprinteri Tekstualna korisnička sučelja Tekstualna sučelja (engl. Text User Interface, TUI) naredbe se pozivaju unutar postojećih 1964. izumljen računalni MIŠ, jako važan za daljnji razvoj korisničkih sučelja – DOUGLAS ENGELBART 1968. je predstavljen prvi prototip Povijest grafičkog korisničkog sučelja 1974. Xerox predstavlja prototip Alto računala Prvo komercijalno uspješno računalo s grafičkim korisničkim sučeljem - Apple Macintosh,1984.g. Microsoft slijedi trendove, a prva komercijalna inačica Windowsa s grafičkim korisničkim sučeljem je bila Windows 3.1. Grafičko korisničko sučelje Grafičko korisničko sučelje (engl. Graphical User Interface, skraćeno GUI) način interakcije čovjeka s računalom kroz manipulaciju grafičkim elementima i dodacima uz pomoć tekstualnih poruka i obavijesti Grafičko korisničko sučelje koriste svi suvremeni operativni sustavi GUI programi prikazuju vizualne elemente poput: o ikona o prozora o gumba s tekstom i/ili slikama o okvira za unos teksta o kvadratića za odabir (engl. check box) o kružići za odabir (engl. radio button) Tri pravila dizajna KS: 1. uključiti korisnika 2. smanjiti zahtjeve sučelja prema korisniku 3. učiniti sučelje konzistentnim 1. Uključiti korisnika: o Omogućiti korisniku da posao obavi na intuitivan način o Treba postići da korisnik upravlja računalom, (a ne računalo korisnikom) o Omogućiti fleksibilnu interakciju sa sustavom (ovisno o tome što preferira - korisnik može koristiti miš, tipkovničke prečece, ikone) o Ubrzati interakciju s napretkom korisnikovog iskustva i omogućiti prilagodbu interakcije (korisnik 90% vremena koristi 10% mogućnosti aplikacije) 2. Smanjiti zahtjeve sučelja prema korisniku: o Smanjiti zahtjeve prema kratkotrajnoj memoriji (na dijelu ekrana prikazati prijašnje akcije) o Omogućiti poništavanje zadnje ili više akcija o Definirati intuitivne tipkovničke kratice o Često korištene opcije treba ponuditi prve o Sakriti tehničke detalje od manje naprednog korisnika o Vizualni izgled aplikacije treba koristiti metafore iz stvarnog svijeta (obrasci slični tiskanima) 3. Učiniti sučelje konzistentnim o Korisnik uvijek mora znati gdje se nalazi, (za manje iskusne korisnike- čarobnjak) o Zadržati konzistentnost sučelja među aplikacijama unutar iste porodice (MS Office) o Ne mijenjati bez jakog razloga sučelje kod izrade nove verzije aplikacije o Konzistentnost kod različitih ekranskih prikaza Dizajn mobilnih korisničkih sučelja Povijest o sredina 1990-ih - mobiteli s pristupom Internetu o Prvi preglednici su mogli očitati osnovni HTML ali često samo u crno- bijeloj verziji o sredina 2000-ih - mobiteli prikazuju „stvarne web stranice” zahvaljujući Java Script i CSS2 tehnologiji o iPhone - jedan od prvih mobilnih uređaja s multi-touch tehnologijom o U isto vrijeme može prepoznati više od jedne točke kontakta s ekranom o Procesorska snaga i memorijski kapacitet današnjih pametnih tel. je u rangu osobnih računala prije 15-ak god. Responzivni web o Stranice su responzivne ako se prilagođavaju uređaju, odnosno veličini ekrana (desktop web/mobile web) Aplikacije o 2008. g. Apple je objavio 552 mobilne aplikacije. o Najrasprostranjeniji dodatak pametnih telefona o Aplikacije su podijeljene u kategorije zbog njihovog lakšeg pronalaženja, ali i preglednosti o Sastoje se od multimedijskog sadržaja (tekst, zvuk, slika, video, animacije) Osnovna pravila dizajna mobilnih UI o Mali ekrani ne dozvoljavaju velik broj informacija o Ne koristiti tekst u ikonama mobilnih aplikacija, već simbole i ilustracije (Mobilne aplikacije se predstavljaju pomoću ikona uz koje dolazi i ime aplikacije pa nije potrebno ponavljanje imena unutar same ikone) o Jednostavnost o Minimalna površina tipke za dodir prstom mora biti oko 45×45 pixela o Ne smanjivati tekst kako bi ga stalo što više o Ne koristiti tekst pisan isključivo VERZALIMA o Koristiti što manje slika o Izbaciti reklame Osnovna pravila dizajna o Ne koristiti previše jarkih boja o Ne pretjerivati s brendiranjem o Logo krade dragocjen prostor kojeg je bolje iskoristiti za sadržaj o Na vrh sučelja staviti elemente koji se najviše koriste 3D KORISNIČKA SUČELJA o Pojam 3D sučelje se koristi za prikaze i interakciju sa 3D objektima o 3D UI privlače pažnju bojom, oblikom, teksturom, sjenčanjem, pokretom Primjena 3D: o Kirurzi o Inženjeri kod projektiranja zgrada o Kemičari za izgled molekule o Planiranje prostorija o Trening pilota Percipiranje 3D objekata o Dvije vrste znakova na temelju kojih se procjenjuje udaljenost 1. MONOKULARNI o dovoljno je jedno oko da bi ih percipirali (linearna perspektiva, tekstura) 2. BINOKULARNI o znakovi dubine temelje se na informacijama iz oba oka o Osnova trodimenzionalnog vida je različitost slika na mrežnici o Zbog različitog položaja naših očiju, svako oko gleda svijet iz drugog kuta, a na mrežnicama se stvaraju dvije različite slike o Stereoskopija Prednosti 3D tehnologije: o 3D reklame o Tvrtke stvaraju 3D modele svojih proizvoda o Korisnici imaju više mogućnosti ispitivanja proizvoda o Mogućnost konstruiranja objekata kao što su u stvarnom svijetu Nedostaci : o Posebni ulazni i izlazni uređaji (skuplji) o Vrijeme potrebno za stvaranje složenih scena o Zbog povećanog stupnja slobode kretanja, javljaju se novi načini za izgubiti se o Loša razlučivost zaslona na udaljenim objektima o Dezorijentacija, glavobolje, umaranje očiju o Manjak tv kanala (teško dobavljiv) za gledanje 3D sadržaja 3D naočale Aktivne 3D naočale o Vezane uz 3D TV prijamnik o Potamnjuje se ili zatvara svaka leća vremenski sinkronizirano s televizijskim zaslonom o potrebno je napajanje Pasivne 3D naočale o Stare obojene 3D naočale o koriste metodu pod nazivom Anaglif o rade pomoću filtera koji blokiraju određene boje za svako oko o Svako oko vidi dio slike koji se u mozgu sklopi u trodimenzionalnu sliku o koriste se u kinu gdje su dvije slike projicirane pod malo drugačijim kutom, a prikazuju se na ekranu pomoću dva projektora AKTIVNE PASIVNE - teže, skuplje - laganije, jeftinije - potrebno napajanje - nema napajanja - titranje svjetlijih - mirnija slika regija slike - za kino - kvalitetnija slika - za kućni 3D TV 3D FILM o Mnogi današnji filmovi koriste 3D efekte i zbog toga postaju blockbusteri o Prvi od filmova koji su kompletno napravljeni računalnom animacijom je Toy Story o Prvi film koji je agresivnije iskoristio 3D tehnologiju je Jurassic Park 3D aplikacije – KARTE Google Earth - bolja korisnička podrška i veća pokrivenost Microsoft Virtual Earth 3D - novija aplikacija - bolja rezolucija, ali puno neispravnih mapa - lakša navigacija 3D IGRE Povijest Prva 3D igra koja je ostavila značajniji trag je 3D Wolfenstein Tek igra Doom je poprimila svjetske razmjere (1993) slijede Quake i Unreal, tzv. FPS (first person shooter) igre od 3D igara iz trećeg lica najpoznatija Tomb Raider Prednosti videoigara: -razvijanje koordinacije ruku i očiju, te kognitivnih vještina -učenje jezika -kod konzola Nintendo Wii, Sony Move i Microsoft Kinect - fizička aktivnost djeteta -sudjelovanje svih članova obitelji u igricama -rješavanje stresa, frustracija i napetosti -akcijske igre zahtijevaju bolju koordinaciju -pustolovne igre razvijaju maštu 3D CRTEŽI Anamorfoza - tehnika koja označava stvaranje optičkog privida zbog kojeg plošni predmeti dobivaju treću dimenziju WEB KORISNIČKA SUČELJA PLANIRANJE WEB MJESTA Svrha web mjesta - informiranje Ciljevi – privlačenje poslodavaca Ciljana skupina - studenti, maturanti, lokalna zajednica, poslodavci, sponzori Sadržaj - članci, reportaže, intervjui, galerije, rasprava Kako će funkcionirati web mjesto - blog Potrebna umijeća i resursi - dizajner, koder, programer, asistent za održavanje Rezultati istraž.(John Morkes, Jakob Nielsen) Koristiti podebljane ključne riječi Upotreba upola manje riječi nego u papirnoj verziji Koristiti linkove Iznositi samo jednu ideju po odlomku Princip obrnute piramide (zaključak na početku) Jasni i jednostavni naslovi Elementi dobrog dizajna Dobar kolorni kontrast Ispravna tipografija Korištenje bijelog prostora Jednostavnost Funkcionalnost Ritam Simetrija Temeljne značajke web-a a) vizualni izgled - bitniji kod web stranica vezanih za modu, audio i video produkciju, umjetnost općenito, osobne stranice gdje se očekuje “cool” i “fancy” dojam b) upotrebljivost - web stranica koja je pregledna, jasna, brzog odziva, dobro organizirana, vidljiva u različitim internet preglednicima – većina web stranica koje pružaju informacije o usluzi, proizvodu, tvrtki,... Faktori utjecaja na izgled i funkc. web stranice brzina internet veze brzina računala vrsta Internet preglednika platforma (operacijski sustav) postavke korisnika ekranski prikaz raspoloživi fontovi raspoložive boje Najčešće greške u web dizajnu: Uvodna animacija, previše slika, grafika Svjetleći tekstovi i previše boja i fontova Stranice bez linkova Prevelika navigacijska traka Nedostatak naslova i opisa Nestandardne boje linkova (plava-novi link) Dugačke tekstove razbiti na paragrafe Nečitljivost teksta zbog slabog kontrasta Oglašavanje na nekomercijalnim stranicama Zvučni zapisi (osim za specifične stranice) Onemogućavanje tipke back Otvaranje novih prozora Nedostatak arhive (uvođenje arhiva starih stranica povećava opterećenje servera za 10%, ali i korisnost stranica za 50%) Mijenjanje URL-a Dobar izgled samo u jednom pregledniku Čitanje web-a u obliku slova F Primijenjen je obrazac čitanja s lijeva na desno i od vrha prema dolje (navika čitanja na papiru) Sve važne stvari staviti u prva dva odlomka jer se taj dio prvi zamjećuje Čitanje web-a s lijeva na desno  Eye tracking tehnologija se temelji na praćenju kretanja zjenice oka Mjeri se kako i koliko dugo potencijalni kupac percipira određene informacije Spajanjem naočala na računalo, izvješće može jasno pokazati gdje i koliko dugo su oči nešto gledale White space Daje dizajnu profinjenu nijansu i pozitivno utječe na upotrebljivost Može biti i druge boje ovisno o boji pozadine Uključuje prostor u marginama, oko fotografija i blokova teksta, razmak između linija teksta, slovnih znakova i riječi, rubovima layouta U dizajnu se koristi u dvije svrhe: 1. ČITLJIVOST (leading, kearning, tracking) 2. PROSTOR-LAYOUT (u svrhu odvajanja elemenata, povećavanja njihove upotrebljivosti i naglašavanja) FONT, BOJA, SLIKA, ZVUK, ANIMACIJA Duljina retka - Optimalna duljina retka teksta je 40-80 slovnih znakova sa proredima - Za jednostupčaste tekstove idealno je 65 slovnih znakova Leading - Leading je razmak između redova i igra veliku ulogu u čitljivosti teksta - Prividno se mijenja ton boje tipografije zbog gustoće redaka Ljestvica Kreirati svoju ljestvicu ili koristiti staru još iz 16.st. Skala je važna jer uspostavlja tipografsku hijerarhiju koja poboljšava čitljivost i stvara harmoniju i povezanost unutar teksta. Prored Staviti 2-5 pt veći prored od veličine fonta, ovisno o fontu. Ako je veličina fonta 12 pt, prored od 15 pt ili 16 pt. “text-indent” – tekstualne uvlake Navodnike stavljati u margine teksta -time se povećava čitljivost. Vertikalni ritam Mreža je temelj za dosljedni tipografski ritam na stranici. Tako čitatelj lako prati tijek teksta – olakšava se čitljivost. Widows & Orphans (udovica i siroče) Označavaju riječi koje su same u redu, smetaju oku i ometaju kontinuitet čitanja. Mogu se izbjeći podešavanjem razmaka između slova i riječi. Naglasak Dati naglasak nekoj riječi s time da se ne ometa čitatelj. Idealna forma za naglašavanje je italic. Ostali oblici naglašavanju su: bold, boja, podcrtavanje, drugačiji font, veliko slovo. Koristiti samo jednu vrstu naglašavanja. Poravnavanje teksta Tekst se najbolje čita ako je poravnat u lijevo. Fontovi na web korisničkim sučeljima Najčešće korišteni fontovi na webu su Arial i Helvetica. idealan font je Verdana Reducirani broj različitih fontova na web (1-2 fonta i 2 boje teksta) Pripaziti na odnos pozadine i fonta Boje na web korisničkim sučeljima pobuđuju određene asocijacije i osjećaje direktno su povezane sa namjenom web stranice čimbenik su čitljivosti web stranice važan odnos pozadine i boje fonta kontinuitet boje kroz sve aplikacije kor. suč. Hladne boje smirujuće djelovanje manje se ističu od toplih (Plava je standardna boja za linkove pa treba izbjegavati plavi tekst jer se korisnik može zabuniti) Tople boje boje uzbuđenja, pokreću, izazivaju uzbuđenje i bijes Neutralne boje pogodne za pozadine pomažu da se stavi fokus na druge boje Las Vegas efekt Boje se koriste zato jer su dostupne a ne zato što su potrebne. Problem je upotreba pozadinskih boja grafike i tekstura koje nadvladavaju sadržaj i uzrokuju slabu čitljivost sadržaja. Ne zna se što je grafička pozadina, a što sadržaj. Zvuk na web korisničkim sučeljima Zvučna podloga web stranica – prihvatljivo kao opcija Ometanje prilikom pregledavanja sadržaja stranice Zvuk kao dio interaktivnosti web korisničkog sučelja Slike na web korisničkim sučeljima Vizualno “bogatiji” web sadržaj “Veća” količina informacija na manje prostora Povećavaju količinu informacija, a time usporavaju učitavanje web stranica Izbjegavati slike veće od “sigurnih” granica Video/animacija na web korisničkim sučeljima skretanje pozornosti korisnika na neki dio web stranice – previše elemenata ometa povećavaju količinu informacija, a time usporavaju učitavanje web stranica