Grafick½ design GUI st 1

Click here to load reader

download Grafick½ design GUI st 1

of 64

  • date post

    30-Dec-2015
  • Category

    Documents

  • view

    23
  • download

    0

Embed Size (px)

description

Eduard Sojka URO, Léto 2003/4 VŠB – Technická univerzita Ostrava. Grafický design GUI část 1. Grafický design GUI: Principy. Cílem je předat uživateli (získat od uživatele) informace co nejpřesněji a při tom současně vzbu d it dojem srozumitelnosti, pohodlí, ko m fortu. - PowerPoint PPT Presentation

Transcript of Grafick½ design GUI st 1

  • Grafick design GUIst 1Eduard Sojka

    URO, Lto 2003/4VB Technick univerzita Ostrava

  • Grafick design GUI: PrincipyClem je pedat uivateli (zskat od uivatele) informace co nejpesnji a pi tom souasn vzbudit dojem srozumitelnosti, pohodl, komfortu.K tomu je nutn respektovat psychologii vnmn, a to zejmna:usnadnit tvorbu mentlnho modelunepetovat vizuln apartnepetovat krtkodobou ani dlouhodobou pam

  • Grafick design GUI: Principylovk ve vcech vdy hled podek a d. Sna se vytvoit si mentln model celho GUI produktu, oken, strnek Kdy se model poda nalzt, pak nastupuje:pocit jistoty a ovldnut produktu,pocit vry, e lze odhadnout chovn v novch situacch,pocit vry, e produkt v novch situacch uspje.

    Kdy ne, pak pocity opannejistoty, frustrace, skepsenejistota, zda pro nov koly bude produkt vhodn.

  • Grafick design GUI: Mentln modelyMentln model okna:Komu a co?Jak?Odeslat

  • Grafick design GUI: Mentln modelyMentln model GUI / webovho msta

  • Grafick design GUI: Mentln modelyMylenka 1Mylenka 2SchmaPkladMentln model strnky v knize

  • Grafick design GUI: Mentln modelyPi nvrh GUI smujeme sil ktomu, aby si uivatel udlal sprvn mentln model produktu, okna, strnky co nejrychleji.Autor by se ml udlat nsledujc:Rozhodnout se, jak mentln model by si uivatel ml vytvoit.Odpovdajcm designem zvolen model uivateli vnutit.

  • Grafick design GUI: DobrJasn obsah a dobr strukturovn obsahu okna. Mentln model je v okn doslova nakreslen. Dobr.

  • Grafick design GUI: DobrAni v tomto ppad nem uivatel s vytvoenm mentlnho modelu pote. Jedin vtka snad pro styly a varianty nejde to vstinji? Designr pedant si rovn vimne przdn plochy vpravo nahoe.

  • Grafick design GUI: ChybyNeutdn obsah oken strnek a menu. Vzhled u tady nic zachrnit neme. Vnucujete chybn mentln model.Obsah je sice mon njak utdn, ale uivatel kl nechpe. Nabzte nepesvdiv mentln model.Obsah oken a strnek je sice rozumn, ale nepatin vzhled ztuje uivateli pochopen obsahu a vytvoen mentlnho modelu. patn prezentujete svoji pedstavu.Vytvoen mentlnho modelu ztuj nadbyten grafick prvky, kter na sebe strhuj pozornost (agresivn pozad, nadbyten grafika, animace).Typick chyby nvrhu

  • Grafick design GUI: ChybyObsah okna nen utdn, mnoho prvk. Chaotick vzhled. Absence pozad v prav doln sti okna. Pochybn pipoutn pozornosti. Chyb navigace. (Odkud jen bych ml zat?)Toshiba?

  • Grafick design GUI: ChybyNejasn obsah (nap. co je skupina, co a kdy se me uloit?). Zcela chaotick vzhled (nap. pro rmec s textem nen u volby skupiny?). Toshiba

  • Grafick design GUI: ChybyRozumn obsah, ale nepatin vzhled. Pocit naprost neuspodanosti. Zlepenm pravy by se doshlo tak rychlej orientace uivatele.IBM

  • Grafick design GUI: ChybyOpt rozumn obsah, ale nepatin vzhled. Nadbyten grafick prvky znesnaduj rychl pochopen obsahu. Tlatka zanikaj kvli nadbytenm 3D prvkm.

  • Grafick design GUI: DobrJednoduch ale pkn: Ve je podzeno dokonal srozumitelnosti a itelnosti. Minimum grafiky. dn animace.http://www.google.com/about.html

  • Grafick design GUI: DobrTradin jsou vysoce hodnoceny webov prezentace Adobe. Grafika sice moc nek, ale ani na sebe nestrhv pozornost.

  • Grafick design GUI: Dobrhttp://www.jaguar.com/us/en/home.htmDobr orientace uivatele. Grafika je v tomto ppad eln.

  • Grafick design GUI: ChybyPozornost zde upoutv nic nekajc a navc agresivn grafika. Dleit sdlen (kdo a co se prezentuje) jsou tm neiteln.

  • Grafick design GUI: Chybyhttp://www.geocities.com/wcswebbuilders/index.htmlZde je v podku snad jedin menu vlevo. Kdo a co se prezentuje je patn patrn. Grafick proveden (zahrnujc t animace) je odpudiv a petuje lidsk vnmn.

  • Design GUI: Formulace mentlnho modeluJestlie si uivatel vytv mentln modely, pak by vs mlo zajmat, jak model si vytvo pi prci s prv tm vam systmem. Naplnuje si, jak by ml v systm uivatel vnmat. Jestlie to neudlte, nedivte se, e me systm vidt jinak ne vy. Mentln model uivatele vs zajm ! Je pravda, e GUI lze konstruovat i pouhou intuic. Systematickou prac se lze ovem vyvarovat chyb plynoucch ze selhn intuice (to je douc zejmna v rozshlejch systmech).

  • Design GUI: Plnovn mentlnho modeluUdlejte inventuru veker komunikace vaeho programu suivatelem. Rozdlte komunikaci na sti, kter budou tvoit jednotliv menu, dialogov okna, ppadn strnky. Obsah oken rozdlte na sti (max. piblin 7) obsahujc prvky GUI. Menu a podmenu organizujte tak aby dlka zpravidla nebyla vt ne max. cca 12 poloek.Pro kad okno, skupinu prvk GUI, menu, podmenu naleznte maximln vstin nzvy (To je naprosto zsadn, a to i tehdy, kdy v GUI nkter z nich nakonec nebudou vidt).Nakreslete si schma azen menu, oken, strnek na papr (mentln model GUI). Podobn nakreslete i zamlen mentln modely jednotlivch oken. Nkolik tip:

  • Design GUI: Plnovn mentlnho modeluPedchoz kroky byly jen zatkem. Zsadn je, abyste uivateli pipravili model, kter je logicky sprvn. Aby se tak stalo, muste model dlouho a peliv kontrolovat.Je nkde chyba?

  • Design GUI: Kontrola mentlnho modeluMenu vlevo: Pro takov poad poloek. Je prezentace urena hlavn pro zamstnance, nebo pro studenty, nebo pro budouc studenty atd? A tak i onak, stejn je to vdy patn. http://www.fei.vsb.cz/www/home/Menu vpravo: Pro jsou v menu o fakult poloky jako politika jakosti, profesorsk a habilitan zen? Pro se tot opakuje hned v dalm menu edn deska?

  • Design GUI: Kontrola mentlnho modeluZkontrolujte si vechny poloky v oknech, jejich stech a v menu. Skuten se vechny daj shrnout pod strun nzev, kter jste vymysleli? Kdy ne, tak je patn bu nzev nebo obsah.Umte vdy pesvdiv odpovdt na otzku, pro je njak skupina prvk GUI prv v tomto a ne v jinm okn? (njak poloka v prv v tomto a ne v jinm menu?)Zkontrolujte si nzvy oken, jejich st a menu. Nejsou nap. dlouh? Kdy ano, bude to nejsp proto, e jste nzev museli umle vykonstruovat podle obsahu okna msto toho, aby okno mlo pirozen a snadno pojmenovateln obsah.Je nkde chyba? kontrola struktury

  • Design GUI: Kontrola mentlnho modeluUmte vdy pesvdiv odpovdt na otzku, pro m bt poloka A v menu umstna prv ped polokou B a ne nap. naopak? Umte vdy pesvdiv odpovdt na otzku, pro m bt skupina A prvk GUI umstna nalevo (nad atd.) od skupiny B a ne napravo (pod atd.)?Je nkde chyba? kontrola umstn

  • Design GUI: Kontrola mentlnho modeluJe nkde chyba? - sloitost eknme, e byste ve va webov prezentaci umonili prochzet jednotliv strnky tak, jak ukazuje graf. Uvate, jak dlouho by muselo trvat, ne by uivatel vechny nabzen monosti odhalil. To snad, abyste na kadou strnku umstili toto schma s vyznaenm, kde se prv nachz.Nezd se nkde model pli sloit?

  • Design GUI: Kontrola mentlnho modeluJe nkde chyba? funknost a komfort Je nap. nutn a rozumn poadovat, aby uivatel prochzel postupn tyi okna (strnky), jak to naznauje model vlevo? Nebylo by mon realizovat radji variantu vpravo (kartotka)?Bude vae een uivateli vyhovovat?

  • Design GUI: Kontrola mentlnho modeluOkno (ani strnka), jak vme, by nemly mt pli sloitou strukturu. Jestlie obsah rozumn rozdlte, je mon, e obsah nkterch oken (strnek) nemus nkter uivatele vbec ani trpit (nap. volby typu advanced settings) Na druhou stranu: m je oken vce, tm je komplikovanj model GUI jako ceku. Tedy nepehnat.

  • Design GUI: Kontrola mentlnho modeluJak mte rdi dokumenty tohoto typu? Podle mne: Jako manul dobr, ale na nap. na uen to nen. Na rozdl od knihy zde lovk nevid kontext. Ten je zejm jen z historie klikn nebo z slovn a to je asto mlo. Z naeho pohledu: Jednoduch model strnky (jeden prvek), ale sloit model celku (strom s mnoha uzly). Vdy rozvate, zda to nevad.

  • Design GUI: Realizace modeluNyn byste si mli bt mentlnm modelem (zatm jet jen svm vlastnm, kter je ale tak plnem modelu pro uivatele) u dost jisti. Zbv jedin: Co nejpesnji ho prezentovat uivateli.

  • Design GUI: Designrsk postupyK tomu, abyste model, kter jste si naplnovali, pedali uivateli co nejpesnji a s minimem jeho nmahy, vyuijte designrsk postupy, z nich nkter postupn ukeme.Vytven a ruen skupin (dojmu sounleitosti).Pipoutn pozornostiVyvenostSjednocen prostoruNavigace

  • Z teorie designu: SounleitostPat k sob: Opakovn tvaru a textury.Pat k sob: Jsou blzko sebe.

  • Design GUI: Seskupovn / oddlovn prvkeknme, e pt prvk GUI (nap. entry) nem tvoit jednu skupinu (obr. 1), ale skupiny dv. Jen mal zvten vzdlenosti (obr. 2) zejm nesta (dojem skupiny vytv tak zarovnn). Vodorovn odsunut (obr. 3) se ale zase ne vdy nehod.Mmmm:Mmmm:Mmmm:Mmmm:Mmmm:Mmmm:Mmmm:Mmmm:Mmmm:Mmmm:Mmmm:Mmmm:Mmmm:Mmmm:Mmmm:1.2.3.

  • Design GUI: Seskupovn / oddlovn prvkM-li bt prvky skuten vnmny jako dv skupiny, mus bt vzdlenost mezi nimi relativn velk (obr. 4), nebo mus bt oddleny jinm grafickm prvkem (obr. 5).Mmmm:Mmmm:Mmmm:Mmmm:Mmmm:Mmmm:Mmmm:Mmmm:Mmmm:Mmmm:4.5.

  • Design GUI: Vytven skupin pomoc mkyAplikace mky (zarovnn): Decentn, ale pesto nepehldnuteln vytvoen skupin pomoc zarovnn popisek. Nzvy skupin zarovnny doleva. Nzvy poloek ve skupinch doprava.

  • Design GUI: Mky ir pohledPouit mky (zarovnn) navozuje nejen dojem skupin, ale tak dojem podku a vizuln konzistence.

  • Design GUI: Mky ir pohledAplikace mky k dosaen vizuln konzistence: Stejn rozvren je zachovvno v rznch dialogovch oknech.NoOkMessage text in Arial 14, left adjusted Standard icon setNoOkDo you really want to delete the file myfile.doc from the folder docs? ?OkCannot move the file myfile.doc to the folder docs because the disc is full. !Ok

  • Z teorie designu: Upoutn pozornostiVlevo vidte, jak lze pozornost upoutat inn a kultivovan. Podobnch metod mete pout tak nap. pi nvrhu webovch strnek (ale i GUI).

  • Z teorie designu: Upoutn pozornostiJohn Trumbull: The Surrender of Lord Cornwallis.Jet jed