28. března 2014, Brno Připravil: David Procházka

28. bˇrezna 2014, Brno ´ Pˇripravil: David Prochazka

´ ame ´ Poznav uˇzivatele ˇ a´ uˇzivatelska´ rozhran´ı Pokrocil

Procˇ je nutne´ zabyvat ´ se HCI

ˇ Obsah pˇredna´ sky 1

Proˇc je nutne´ zabývat se HCI

2

´ ´ Jak dosahnout vhodneho designu

3

Analýza uˇzivatele

4

´ ı uˇzivatelu˚ Vzory chovan´

5

Konec

Strana 2 / 35


Strana 3 / 35

ˇ O cem bude tento kurz? PUR spada´ do kategorie kurzu˚ oznaˇcovaných Human-Computer Interaction (HCI) nebo take´ Human-Machine Interaction (HMI). V cˇ eˇstineˇ se ´ pˇreklad styk cˇ lovek-stroj. ˇ ustalil ˇ ı oblast na pomez´ı informatiky, HCI je vedn´ psychologie, sociologie, . . . Jej´ım c´ılem je mimo jine´ zkoumat aspekty ˇ se stroji a navrhovat metody pro komunikace cˇ loveka ´ interakce. zlepˇsen´ı teto ˇ r´ıme zvlaˇ ´ steˇ na software (desktopove, ´ My se zameˇ ´ ı aplikace). mobiln´ı, webove´ a specialn´


Strana 4 / 35

ˇ ıme Co se tedy (snad) nauc´

´ ret takove´ aplikace, ktere´ budou z pohledu Jak vytvaˇ uˇzivatele pˇr´ıjemne´ a intuitivn´ı.


Strana 5 / 35

Procˇ je to nutne´ ´ v´ıce amater ´ u. Technicka´ zaˇr´ızen´ı pouˇz´ıva´ cˇ ´ım dal ˚ ´ eˇ Technicke´ parametry jsou mnoho uˇzivatelu˚ men ´ ´ ´ ´ duleˇ ˚ zite, neˇz vhodne ovladan´ı (kolik funkc´ı Photoshopu, Corelu, televize, telefonu, aj. ´ vyuˇz´ıvate?). ´ a´ – viz. Apple.1 Design HW a SW tedy prodav Nelze opisovat! Porter: Competitive Strategy: Techniques for Analyzing Industries and Competitors – Je nutne´ jasneˇ definovat cˇ ´ım se budu liˇsit od konkurence – ´ et ˇ jine´ cˇ innosti nebo podobne´ jiným provad 2 ˇ s´ı, lze zlepˇsit. zpusobem . Nelze být jen efektivnejˇ ˚ 1 2

ˇ ´ a funkˇcnost. Pozor nezameˇ novat krasu viz Wii kdyˇz Nintendo zaˇcalo propadat za Sony a Microsoftem




2


3


4


5

Konec

Strana 6 / 35


Strana 7 / 35

´ ´ Jak dosahneme vhodneho designu?

Teˇzko. Ale muˇ ˚ zeme zaˇc´ıt tak, zˇ e se zaˇcneme zabývat t´ım, ´ proˇc lide´ (ne)pouˇz´ıvaj´ı urˇcite´ nastroje. ´ ´ ı spravn´ ´ ych otazek ´ HCI je v zasad eˇ o hledan´ (a ´ eˇ o nalezen´ı odpoved´ ˇ ı na ne). ˇ 3 idealn C´ıl je proniknout do myˇslen´ı uˇzivatelu˚ a pochopit je.

3

Eric Raymond: The Luxury of Ignorance: An Open-Source Horror Story – zkuˇsenosti s CUPS


Strana 8 / 35

Procˇ manaˇzer vyuˇz´ıva´ email4 ´ Aby si pˇreˇcetl zpravy. ˇ ale proˇc p´ısˇ e a cˇ te emaily? Jiste, Aby mohl komunikovat s jinými lidmi. ˇ ale proˇc nezavola, ´ nepoˇsle dopis, fax, . . . ? Jiste, ˇ y duvod Evidentneˇ existuje nejak´ ... ˚ soukrom´ı?, archivace konverzac´ı?, rychlost?, cena?, ´ ı (fyzicke) ´ omezen´ı? socialn´ 4

viz Jenifer Tidwell: Designing Interfaces, str. 4


Strana 9 / 35

´ Procˇ si mama nekoup´ı j´ızdenku on-line?

ˇ on-line, . . . Muˇ ˚ ze je koupit po telefonu, osobne, Boj´ı se platit kartou? ´ Nemuˇ zorientovat? ˚ ze se na strance Nema´ moˇznost konzultace?


Strana 10 / 35

Mus´ıme tedy zjistit co uˇzivatel chce ˇ který pouˇz´ıva´ dobrovolneˇ nejak´ ˇ y nastroj ´ Kaˇzdý cˇ lovek, ma´ pro to svuj ˚ duvod: ˚ nalezen´ı informace nebo objektu, ˇ se nauˇcit, neco vykonat operaci, ˇ ovladat ´ neco nebo hl´ıdat, ˇ vytvoˇrit neco, ˇ ym, komunikovat s nek´ pobavit se.


Strana 11 / 35

ˇ Obcas je to velmi sloˇzite´ ˇ Mejme obchod ze snowboardovým zboˇz´ım. Abychom ´ ´ zakazn´ ıky pˇrilakali, um´ıt´ısme na web ˇradu videi´ı o SNB, informac´ı o stylech, akc´ıch, atp. ˇ r´ı zakazn´ ´ ´ ani ´ od koupeˇ a koukaj´ı Nekteˇ ıci jsou odlak na videa, uˇc´ı se. ˇ r´ı se vrat´ ´ ı, nekteˇ ˇ r´ı ne. Nekteˇ ´ ı cˇ ast ´ 18ti lete´ i 35 lete? ´ Zabav´ı nav´ıc multimedialn´ ˇ r´ı starˇs´ı radeji ˇ na jednoduche, ´ Nepujdou nekteˇ ˚ 5 ´ pˇrehledne´ stranky?

5

Ja´ osobneˇ cˇ asto ano


ˇ ˇ je jedinecn ˇ y´ Kaˇzdy´ clov ek

Rozhodneˇ nen´ı jako Vy!

Strana 12 / 35

Analyza ´ uˇzivatele



2


3


4


5

Konec

Strana 13 / 35


Strana 14 / 35

´ ı, Abychom pochopili jeho chovan´ ˇ ˇ ı budeme muset zjistit nekolik vec´ 1 2 3 4 5 6

´ Za jakým uˇ ´ celem uˇzivatel zaˇr´ızen´ı pouˇz´ıva. ˇ ı c´ıle uˇcinit. Jake´ ukony mus´ı ke splnen´ ´ Jazyk a slova, kterými tuto cˇ inost charakterizuje6 . Jeho schopnosti. ´ ´ Jeho postoj k Vaˇsemu navrhu a jeho alternativam. ˇ ´ Kolik cˇ asu je ochoten venovat nauˇcen´ı se prace 7 ´ s nastrojem (dramaticke´ rozd´ıly mezi skupinami uˇzivatelu). ˚

6 ´ pro urˇcite´ oprace stejne´ obraty jako Vaˇse Pouˇz´ıvate ´ ´ mama/pˇr´ıtelkyneˇ – synchronizovat/kop´ırovat/pˇrenest/uloˇ zit 7 Photoshop, Maya, Vim, MsOffice, IE


Strana 15 / 35

Jak uˇzivatele analyzovat 1

2

3

4

´ ı: Ruzn´ Pˇr´ıme´ pozorovan´ ˚ ymi metodami zkoumejte ´ cejte kamerou pˇri praci). ´ uˇzivatele (nataˇ Pˇr´ıpadove´ studie: Muˇ zkoumat ˚ zete t´ımto zpusobem ˚ ˇ ˇ skupinu uˇzivatelu˚ nebo nekolik skupin. Casto dlouhodobe´ studie. ´ ı mnoha lid´ı, neosobn´ı, muˇ Pruzkumy: Dotazovan´ ˚ ˚ zete ´ pˇrij´ıt o mnoho informac´ı, vhodný navrh je kl´ıcˇ ový. ˇ dat. Tvorba modelu˚ Persony: Nejedna´ se o sber ˇ ı Vam ´ uvedomit ˇ ruzn´ si, co by ˚ ych osob. Umoˇznuj´ ˇ udelala tato osoba X.


Strana 16 / 35

´ testovan´ ´ ı Problem

1 2

3

´ Informace jsou mnohdy velmi zkreslene. ´ ı muˇ Testovan´ ˚ ze uˇzivatele stresovat, muˇ ˚ ze se c´ıtit ˇ y, pod tlakem atp. podcenen´ ´ ı je zcela nezavisl ´ ´ ı (ale jak na nej). ˇ Idealn´ e´ pozorovan´




2


3


4


5

Konec

Strana 17 / 35


Strana 18 / 35

´ ı uˇzivatelu˚ Vzory chovan´ ´ ı, lze v jejich chovan´ ´ ı nalezt ´ Pˇrestoˇze jsou lide´ unikatn´ urˇcite´ podobnostn´ı vzory jak reaguj´ı v urˇcitých situac´ıch8 . Safe Exploration Instant Gratification Satisficing Changes in Midstream Deferred Choices Incremental Construction

1 2 3 4 5 6

8

7 8 9 10

11 12

Habituation Spatial Memory Prospective Memory Streamlined Repetition Keyboard Only Other People’s Advice

Jenifer Tidwell: Designing Interfaces, str. 10–20


Strana 19 / 35

Safe Exploration Nechte meˇ to vyzkouˇset bez toho, zˇ e bych se stratil ˇ pokazil. nebo neco ˇ ı vyzkouˇset nove´ funkce bez rizika, zˇ e mus´ı Lide´ chtej´ ˇ opravovat, vracet nebo zˇ e se stane neco, ˇ neco co se ´ staˇc´ı i pˇrehran´ ´ ı hlasite´ jim nel´ıb´ı (nemus´ı být kriticke, ´ hudby pˇri kliknut´ı na webove´ strance). ˇ je znervoz ´ nuj´ ˇ ı a odrazuj´ı od zkouˇsen´ı Tyto veci nových funkc´ı. Pˇr´ıklady: ´ ´ ˇ Fotoeditor s funkc´ı v´ıcenasobn eho Zpet ´ ´ Uˇzivatel webových stranek je schopen se v kaˇzdem ´ zpet. ˇ okamˇziku zorientovat a vatit Uˇzivatel mobiln´ıho telefonu se boj´ı vyzkouˇset nove´ ´ funkce kvuli pˇripojen´ı na Internet. ˚ samovolnemu


Strana 20 / 35

Instant Gratification ˇ ted’, ne pozdeji. ˇ Chci to videt ˇ okamˇziteˇ videt ˇ výsledek svých cˇ inu. Uˇzivatel by mel ˚ ˇ s´ı nadeje, ˇ zˇ e zustane. To ho uspokoj´ı a je vetˇ ˚ ˇ co bude cht´ıt uˇzivatel Je dobre´ odhadnout prvn´ı vec, ˇ udelat. ˇ Rozhodneˇ uvodn´ ı funkcionalitu nepodminujte ´ sloˇzitými kroky, instrukcemi, atp. (ne: registrace pro ˇ ı, lze ukazat ´ ´ cne´ výsledky) výpoˇcet pojiˇsten´ cˇ asteˇ


Strana 21 / 35

Satisficing = satisfying + sufficing ´ nechci ztracet ´ Je to dost dobre, cˇ as uˇcen´ım se, jak to ˇ ´ udelat lepe. Uˇzivatel obvykle vybere prvn´ı funkci, ktera´ ´ eˇ povede k výsledku. potencialn ´ nejlepˇs´ı, staˇc´ı dostateˇcna´ 9 Nepotˇrebuje nalezt ´ Toto cˇ asto vede ke vzniku sˇ patných navyk u. ˚ ˇ by Pokud rozhran´ı nab´ız´ı v´ıce obdobných func´ı, mela cena za volbu sˇ patne´ být n´ızka´ (viz Safe Exploration) ˇ Nekolik tipu: ˚ ´ e´ a jasne´ popisky (ˇspatný pokus frustruje), kratk ´ ı stranka ´ ˇ vest ´ (layout), vizualn´ by mela ˇ uˇzivateli vratit ´ se do m´ısta, kde se spletl, umoˇznete ´ ı sloˇzitost pˇrinaˇ ´ s´ı velkou kognitivn´ı zat ´ eˇ ˇ z. vizualn´ 9

kolik lid´ı pouˇz´ıva´ styly ve Wordu?


Strana 22 / 35

Changes in Midstream ˇ Rozmyslel jsem si, co chci delat. ˇ Nekolik pˇr´ıkladu: ˚ Uˇzivatel Amazonu jde cˇ ´ıst recenze a rozhodne se koupit knihu, ˇ a´ poznamku ´ manaˇzer si del na PDA a vstoup´ı ´ zakazn´ ık, mus´ı se pˇrepnout do jine´ aplikace, cˇ asem to chce dopsat, ´ ˇ programator v IDE pracuje s nekolika projekty, ˇ ˇ uˇzivatel vyplnuje pruzkum a chce jej dopsat pozdeji. ˚

ˇ být uzavˇren, mela ˇ by mu být Uˇzivatel by nemel ´ ´ eˇ se i vratit ´ ponechana moˇznost volby odej´ıt a idealn 10 (reentrance) . 10

Pˇr´ıliˇs velka´ volnost obˇcas uˇzivatele mate! Chce být doveden k c´ıli.


Strana 23 / 35

Deferred Choices Nechte meˇ to dokonˇcit, nechci na to odpov´ıdat. Odstraˇsuj´ıc´ı pˇr´ıklady: ˇ ım do fora ´ 11 , registrace ˇrady udaj ´ u˚ pˇred vpuˇsten´ vytvoˇren´ı projektu v ruzn´ ˚ ych IDE, kde mus´ım vyplnit ˇradu poloˇzek, ktere´ zat´ım neznam. ´

´ Nezahlcujte napoˇcatku uˇzivatele kvantem dotazu. ˚ Jasneˇ vyznaˇcte povina´ pole. ˇ ˇ otazky ´ Nekdy se vyplat´ı rozdelit na duleˇ ˚ zite´ a ´ dodateˇcne). ˇ druhotne´ (na ty se ptat Zvolte dobre´ výchoz´ı hodnoty. ˇ editovat tyto hodnoty na zˇrejmem ´ m´ısteˇ Umoˇznete (taˇc´ıtko Edit Project). 11

ˇ sinu udaj ˇ pokud bude chut’? Proˇc vetˇ ´ u˚ nenechat na pozdeji,


Strana 24 / 35

Incremental Construction ˇ Nechte meˇ to zmenit. Jo, to je lepˇs´ı. ´ Tento bod se týka´ zejmena ruzn´ ˚ ych vývojových a konstrukˇcn´ıch prostˇred´ı. ˇ Kaˇzde´ d´ılo se tvoˇr´ı postupne. ˇ bých schopen tvoˇrit projekt po Uˇzivatel/tvurce by mel ˚ ´ malých cˇ astech, upravovat je, . . . ˇ vliv techto ˇ ´ a okamˇziteˇ videt uprav na system. ´ Pokud mus´ı pul ˚ minuty cˇ ekat, neˇz se projekt pˇreloˇz´ı, ´ ztrac´ı pozornost.


Strana 25 / 35

Habituation Tohle gesto funguje vˇsude, proˇc tady ne? ´ Mame zaˇzitu ˇradu gest (CTRL+S, Enter, BackSpace, Esc, . . . ). ´ umoˇznuje ˇ ´ To nam znaˇcnou efektivitu pˇri praci s aplikacemi. ´ je, zˇ e tato gesta mus´ı být konzistentn´ı napˇr´ıcˇ Problem aplikacemi12 ´ i konzistentn´ı v ramci aplikace13 12

´ ˇradku, ´ CTRL+A, CTRL+X, CTRL+S v Emacsu (skok na zaˇcatek uloˇzen´ı, uloˇzen´ı) a MsWordu 13 ´ Gesto X mus´ı vykonat akci X za vˇsech okolnost´ı, ne jen v urˇcitem ´ modu


Strana 26 / 35

Spatial Memory ´ zˇ e to tlaˇc´ıtko tam jeˇsteˇ pˇred chvilkou bylo! Pˇr´ısaham, ˇ ’ je velmi silný pomocn´ık pˇri Prostorova´ pamet orientaci (viz organizovaný chaos na desktopech mnoha uˇzivatelu). ˚ ´ ´ Je vhodne´ umist’ovat ovladac´ ı prvky na oˇcekavateln a´ m´ısta. Nechte uˇzivatele pˇrizpusobit si GUI. ˚ ˇ ˇ (viz problem ´ samo-organizuj´ıc´ıch Nedelejte to za nej 14 se menu ) 14

napˇr. v Ms Office, orientace uˇzivatelu˚ byla horˇs´ı, neˇz pˇri vypnute´ ˇ lze vytrenovat ´ volbe,


Strana 27 / 35

Prospective Memory ´ si to tady, abych to pozdeji ˇ vyˇreˇsil. Necham ˇ si rad ´ nechav ´ a´ nav ´ est´ ˇ ı, ktere´ podporuj´ı jeho Clovek 15 ’ ˇ. . dlouhodobou pamet ´ ´ U mnoha aplikac´ı je v´ıtano, pokud je podporovan 16 ´ poznamek ´ system a pˇripomenut´ı. ´ ´ Problemem mohou být pˇr´ıliˇs chytre´ systemy ´ ıc´ı organizovat veci ˇ za uˇzivatele.17 pomahaj´ ´ vytvoˇr´ı system ´ Nechte uˇzivateli volnost a on si sam pˇripom´ınek. Výzva: pokud uˇzivatel nedokonˇc´ı ulohu, nechte mu ´ inteligentn´ı pˇripom´ınku18 . 15

kniha poloˇzena´ na stole, uzel na kapesn´ıku bookmarky, sticky notes na plochu, posledn´ı otevˇrene´ soubory, ˇ cky, . . . tagy, hvezdiˇ 17 ´ ı oken, odstranov ˇ an´ ´ ı nepouˇz´ıvaných automaticke´ zav´ıran´ 16


Strana 28 / 35

Streamlined Repetition ˇ poˇrad ´ dokola? Mus´ım to delat ´ e). ´ Uˇzivatele velmi irituje opakovat urˇcite´ ukony (i kratk ´ ˇ Casem zaˇcne ignorovat jejich podstatu (výstraˇzne´ okno Windows). Je vhodne´ eliminovat opakuj´ıc´ı se ulohy (zkratkova´ ´ ´ ´ an´ ´ ı akc´ı ve Photoshopu, klavesa, Replace All, nahrav skripty). ´ ım uˇzivatele. Tyto vzory lze z´ıskat pˇr´ımým pozorovan´ ´ ı zde nepomah ´ a´ (nevedom ˇ ´ ı). Dotazovan´ e´ opakovan´


Strana 29 / 35

Keyboard Only Nenut’te meˇ pouˇz´ıvat myˇs ˇ ´ Rada lid´ı z urˇciteho duvodu nepouˇz´ıva´ myˇs (neradi ˚ ´ ı pryˇc ruce z klavesnice, ´ ´ pracuj´ı na davaj´ je to pomale, laptopu, . . . ). ˇ r´ı ani nemohou (specialn´ ´ ı zaˇr´ızen´ı cˇ asto Nekteˇ ´ podporuj´ı API klavesnice). ´ ı ovlad ´ an´ ´ ı klavesnic´ ´ Je vhodne´ umoˇznit dualn´ ı: ´ zkratkove´ klavesy pro poloˇzky menu (CTRL+S), ˇ ze seznamu˚ pomoc´ı sˇ ipek, výber ˇ ı focus, TAB men´ combo boxy, atp. podporuj´ı sˇ ipky, výchoz´ı (default) tlaˇc´ıtka v dialoz´ıch a Enter, ...


Strana 30 / 35

Other People’s Advice Co si o tom jin´ı mysl´ı ˇ ´ a´ uˇzivatelum Rada webových aplikac´ı dav ˚ prostor ´ rit sve´ nazory, ´ ´ ˇ vyjadˇ napady, dokonce ovlivnovat obsah, cenu komodit, atp. Nelze aplikovat vˇzdy, ale . . . 19 20 ´ Zkuste být kreativn´ı – ne jen implementovat forum.

19

´ ım kodu ´ Matlab Contest s opisovan´ Jak podn´ıtit uˇzivatele k honocen´ı? Jak filtrovat vhodne´ ´ re? . . . komentaˇ 20


Strana 31 / 35

Find It23 ´ ˇ ´ sloˇzky. . . Tuˇs´ım, zˇ e jsem to daval nekam do teto ˇ sina uˇzivatelu˚ nen´ı schopna pojmenovat Drtiva´ vetˇ vhodneˇ dokument natoˇz vytvoˇrit kvalitn´ı strom dokumentu. ˚ ˇ ´ ı ontology. Casto obt´ızˇ ne´ i pro profesionaln´ ˇ být zateˇ ˇ zovan ´ (pokud Uˇzivatel by t´ımto nemel nechce). ˇ sineˇ uˇzivatelu˚ nezaleˇ ´ z´ı na tom, kam se pˇresneˇ Vetˇ ´ formatu. ´ 21 dokument uloˇz´ı a v jakem ˇ m´ıt k dispozici nastroj, ´ Uˇzivatel by mel který mu 22 dokument rychle nalezne. 21

´ ı na desktopech? Kolik dokumentu˚ se nachaz´ viz Google Docs nebo i Spotlight. 23 ´ Nasleduj´ıc´ı pravidla jsme formulovali s kolegou Kryˇstofem 22


Strana 32 / 35

Stay in Sync ´ poˇc´ıtaˇci! Jejda, ten dokument je na druhem ˇ Rada uˇzivatelu˚ vyuˇz´ıva´ v´ıce zaˇr´ızen´ı a je notorický ´ udrˇzet data synchronizovane. ´ problem 24 ´ Synchronizaci lze ˇreˇsit extern´ım nastrojem nebo ji 25 muˇ ˚ ze podporovat samotna´ aplikace . To je jeden z duvod u˚ proˇc horˇs´ı webove´ aplikace ˚ ´ vytlaˇcuj´ı kvalitn´ı desktopove. Synchronizace mus´ı fungovat automaticky nebo ´ eˇ ˇ r automaticky jinak pro vetˇ ˇ sinu nepouˇzitelna. ´ tem 24

synchronizaˇcn´ı aplikace, e-disky, aj. ´ cˇ lank ´ u˚ a citac´ı nebo webove´ desktopový Mendeley pro spravu Google Docs 25

Konec



2


3


4


5

Konec

Strana 33 / 35

Konec

Strana 34 / 35

D´ıky za pozornost ´ ska byla zameˇ ˇ rena na jedinou vec ˇ – Cela´ tato pˇrednaˇ ´ ı uˇzivatele. Popsali jsme si, zˇ e snahu pochopit chovan´ ´ ı. kaˇzdý uˇzivatel je unikatn´ Ma´ specificka´ psychologicka´ a fyzicka´ omezen´ı ˇ ’, (intelekt, zkuˇsenost s technikou, zrak, pamet ´ ı, atp.) prostorove´ vn´ıman´ ´ ı. Neco, ˇ Pˇresto existuj´ı obvykle´ vzory v jeho chovan´ ˇ sinu uˇzivatelu˚ teˇs´ı nebo naopak obteˇ ˇ zuje. co vetˇ ˇ Take´ bylo zm´ıneno, zˇ e k pochopen´ı vztahu uˇzivatele k aplikaci mus´ıme jasneˇ definovat smysl aplikace ´ za jakým uˇ (tedy proˇc to pouˇz´ıva, ´ celem). ´ Pˇr´ısˇ t´ı tema: Sestavujeme aplikaci

Konec

Ze zˇ ivota: XKCD

Strana 35 / 35


Sestaven´ı aplikace ˇ a´ uˇzivatelska´ rozhran´ı Pokrocil

´ Jak postupovat pˇri navrhu aplikace



2

´ sky Kritika minule´ pˇrednaˇ

3


4

Definujeme aplikaci

5

Struktura aplikace

6

Vzory pro implementaci

7

Vzory ˇreˇs´ıc´ı strukturu aplikace

8

ˇ ı obsahu aplikace Vzory pro cˇ lenen´

9

´ ı doplnkov´ ˇ Specialn´ y vzor

10

Konec

Strana 2 / 53


Strana 3 / 53

ˇ ˇ ı pˇredna´ ska ˇ O cem bude dnesn´

´ aˇ ´ re, kdy by mela ˇ být Vaˇse aplikace Formulovali jste scen ´ pouˇz´ıvana (uˇ ´ cel), jakou skupinou uˇzivatelu, ˚ jake´ kroky k c´ıli povedou a nyn´ı ji chcete navrhnout a implementovat. ´ ´ Pod´ıvame se zakladn´ ı komponenty aplikace a jak je 1 implementovat.

1

ˇ vychaz´ ´ ıme zejmena ´ Opet z knihy Designing Interfaces od Jenifer Tidwell, str. 21-90 a take´ z knihy Designing for Interaction (Second Edition) od Dana Saffera.

ˇ Kritika minule´ pˇredna´ sky



2


3


4

Definujeme aplikaci

5

Struktura aplikace

6


7


8


9


10

Konec

Strana 4 / 53


Strana 5 / 53

Ruzn ˚ e´ pˇr´ıstupy k designu rozhran´ı ˇ y pˇr´ıstup ma´ sve´ uplatnen´ ˇ ı, resp. lze je Kaˇzdý zm´ınen´ kombinovat! User centered design – jiˇz pˇredstaven, toˇc´ı se okolo uˇzivatele. ´ ı funkc´ı. Activity centered design – duraz na definovan´ ˚ ˇ ren na analýzu System centered design – zameˇ ´ funkcionality systemu. ´ pˇrevaˇ ´ zneˇ uvahou Genius design – design je dan ´ ´ ´ re. navrh aˇ


Strana 6 / 53

User centered design ´ obˇcas zklame. Designer ´ je vlastneˇ UCD nas pˇrekladatel uˇzivatelových potˇreb. ´ ı potˇreb uˇzivatele se obˇcas dostaneme Pˇri definovan´ do slepe´ uliˇcky. Pohled uˇzivatele je obˇcas sˇ patneˇ definovatelný. ´ Proˇc student optimalizuje rozvrh? (kvuli ˚ praci?, efektiviteˇ studia?, atp.) ˇ ˇ zˇ e navrhovane´ Spatn eˇ aplikovatelne´ take´ v pˇr´ıpade, zaˇr´ızen´ı je zcela nove´ (nelze se opˇr´ıt o zkuˇsenosti).


Strana 7 / 53

Activity centered design

´ ı aktivit, ktere´ mus´ı být provedeny. Duraz na definovan´ ˚ Uˇzivatel je vykonavatelem aktivit. ´ ı z ukol Aktivity se skladaj´ ´ u˚ (tasks). ´ rozliˇsit (pod)aktivity a ukoly. Obˇcas je problem ´ ´ ı z mobiln´ıho telefonu. Co je (Aktivita je zavolan´ nalezen´ı osoby v kontaktech?) ´ ´ r definuje prostˇredky pro vykonav ´ an´ ´ ı aktivit. Navrh aˇ


Strana 8 / 53

System centered design ´ ´ a´ navrhnout Duraz na komponenty systemu. Pomah ˚ ´ zejmena funkcionalitu (ne vzhled). ´ Uˇzivatel nastavuje c´ıle (goal) pro system. (Nastaven´ı teploty na termostatu.) ´ ´ r zajiˇst’uje, zˇ e vˇsechny komponenty budou Navrh aˇ spolupracovat. ´ Komponenty systemu: Goal (nastavena´ teplota), ´ ı?), Senzors, Environment (kde se termostat nachaz´ ´ e´ zmeny ˇ teploty), Disturbances (pˇr´ıcˇ ina nahl ’ Comparator (zajiˇstuje kontrolu c´ıle), Actuator ˇ je jinak, (pokud Comparator ˇrekne, zˇ e je neco ´ ˇ a´ vazba, zda byla aktivuje napravu), Feedback (zpetn ˇ ˇ sna), ´ Controls (ovladac´ ´ zmena usp ı prvky). ´ eˇ


System centered design

Strana 9 / 53


Strana 10 / 53

Genius design ´ ´ re. Kl´ıcˇ em jsou zkuˇsenosti navrh aˇ ˇ Uˇzivatel je z vývoje prakticky vypuˇsten. ˇ Pouˇzit pouze pro zpetnou validaci. ´ Pouˇz´ıvano mj. take´ v okamˇziku, kdy nelze testovat (obchodn´ı tajemstv´ı). ´ mus´ı být zkuˇsený! Designer ˇ Dobry´ pˇr´ıklad: iPod, spatn y´ pˇr´ıklad: Newton ´ an´ ´ ı, nepochopen´ı potˇreb beˇ ˇ zneho ´ (ˇspatne´ ovlad ´ a´ firma: Apple. uˇzivatele). Znam




2


3


4

Definujeme aplikaci

5

Struktura aplikace

6


7


8


9


10

Konec

Strana 11 / 53


Strana 12 / 53

´ Prvn´ı kroky navrhu aplikace ´ ´ sky byste si meli ˇ být Na zaklad eˇ pˇredchoz´ı pˇrednaˇ ˇ ´ r´ıme sestavovan´ ´ ım vedomi faktu, zˇ e aplikaci nevytvaˇ ˇ prvku˚ a vymýsˇ len´ım, jak se doplnit o nejakou funkcionalitu. ´ ˇ být jasne, ´ Jiˇz pˇred zaˇcatkem implementace by melo jaký bude jej´ı uˇ ´ cel a funkcionalita. ˇ ˇ ame ´ ´ Spatn´ y pˇr´ıklad: Udel Javovou aplikaci na praci ´ s fotkama. Bude tam strom se sloˇzkami, okenko ´ s nahledem a nahoˇre budou ruzn ˚ a´ tlaˇc´ıtka a dalˇs´ı ´ ovladac´ ı prvky na upravu fotek a dalˇs´ı operace. ´ Lepˇs´ı pˇr´ıklad: Vytvoˇr´ıme aplikaci, jej´ımˇz smyslem ´ bude organizace fotek a zakladn´ ı upravy. Aplikace ´ ´ bude pro amatery.

Definujeme aplikaci



2


3


4

Definujeme aplikaci

5

Struktura aplikace

6


7


8


9


10

Konec

Strana 13 / 53

Definujeme aplikaci

Strana 14 / 53

Co ted’? ˇ r´ı navrh ´ ´ ri v tomto okamˇziku zaˇcnou kreslit Nekteˇ aˇ ´ navrh GUI. ˇ s´ı, pˇremýsˇ len´ı o fyzicke´ To nen´ı upln ´ eˇ nejvhodnejˇ ´ muˇ ´ implementaci komponent Vas ˚ ze hodneˇ svazat. ˇ Casto upadnete do stereotypu. ´ st’ nevhodne´ pro multimodaln´ ´ ı aplikace. Zvlaˇ ´ Je lepe uvaˇzovat v abstraktn´ıch pojmech2 , neˇz ´ ıch widgetech (strom, okno, atp.). Odloˇz´ıte konkretn´ t´ım rozhodnut´ı o implementaci. 2 ´ Navrh aplikac´ı je trochu o urˇcite´ filozofii, stejneˇ jako napˇr. OOP. ˇ ˇ to mus´ı vstˇrebat“. Clovek

Definujeme aplikaci

Strana 15 / 53

Definujeme funkcionalitu: komponenty aplikace ˇ sinu aplikac´ı (nebo jejich cˇ ast´ ´ ı) lze charakterizovat Vetˇ ˇ jedn´ım z techto popisu: ˚ 1 2 3 4

´ seznam objektu˚ – poˇstovn´ı schranka s emaily, seznam ukol ´ u˚ neco cˇ innost´ı – nakup, prodej, registruj,. . . ˇ ´ seznam kategori´ı – zdrav´ı, veda, sex, zabava,. .. ´ ´ r, adresaˇ ´ r, ToDo. . . seznam nastroj u˚ – kalendaˇ

Pˇrestoˇze tyto popisy jasneˇ specifikuj´ı svuj ˚ uˇ ´ cel, jsou ´ od konkretn´ ´ ıho vzhledu. zcela abstrahovany V okamˇziku, kdy zaˇcneme uvaˇzovat o jejich pˇrevodu ´ ı podoby, mus´ıme uvaˇzovat ˇradu faktoru˚ do vizualn´ poˇc´ınaje schopnostmi uˇzivatele, konˇce hadwarovými omezen´ımi platformy.

Definujeme aplikaci

Seznam objektu˚

Strana 16 / 53

Definujeme aplikaci

ˇ Seznam cinnost´ ı

Strana 17 / 53

Definujeme aplikaci

Seznam kategori´ı

Strana 18 / 53

Definujeme aplikaci

´ Seznam nastroj u˚

Strana 19 / 53

Struktura aplikace



2


3


4

Definujeme aplikaci

5

Struktura aplikace

6


7


8


9


10

Konec

Strana 20 / 53

Struktura aplikace

Strana 21 / 53

Rozloˇzen´ı aplikace Jakmile definujeme funkcionalitu aplikace, mus´ıme zamyslet nad jej´ı implementac´ı. ´ ´ Existuj´ı v zasad eˇ tˇri zakladn´ ı typy aplikace: 1 2 3

aplikace vyuˇz´ıvaj´ıc´ı v´ıce oken, ˇ ym oknem, aplikace s jedn´ım rozdelen´ ˇ ıc´ım obsah. aplikace s jedn´ım oknem men´

´ Zde jsme zasadn eˇ omezeni platformou (PDA ma´ malou obrazovku, atp.). ˇ být dana ´ Volba implementace by nemela naˇs´ım vkusem, ale podstatou aplikace (napˇr: Mus´ı uˇzivatel paralelneˇ pracovat s v´ıce dokumenty?)

Struktura aplikace

Strana 22 / 53

Aplikace vyuˇz´ıvaj´ıc´ı v´ıce oken

´ ´ ı aplikace, kde je Vhodne´ zejmena pro profesionaln´ vhodne´ pˇrizpusobit si GUI. ˚ ˇ zne´ uˇzivatele cˇ asto obteˇ ˇ zuj´ıc´ı nebo matouc´ı. Pro beˇ Pokud je potˇreba pracovat s v´ıce dokumenty ˇ vyuˇz´ıva´ se tento model nebo rozdelen´ ˇ ı paralelne, okna.

Struktura aplikace

Strana 23 / 53

ˇ ıc´ı obsah Jedno okno men´

´ jsou postaveny webove´ Klasický model, na kterem ´ stranky. Uˇzivatele´ jsou na tento koncept zvykl´ı. Vhodne´ take´ pro aplikace s malým displayem a prumyslov e´ aplikace (kladen duraz na pˇrehlednost a ˚ ˚ intuitivitu). Je nutne´ peˇcliveˇ definovat cesty aplikac´ı.

Struktura aplikace

Strana 24 / 53

ˇ Jedno delen e´ okno s panely

ˇ ˇ s´ı webove´ stranky ´ Cast´ y model pro sloˇzitejˇ a desktopove´ aplikace ( Outlook, iCal, aj.) ˇ ˇ hodneˇ vec´ ˇ ı paralelne, ˇ ale nezateˇ ˇ zuje Umoˇznuje videt organizac´ı oken jako prvn´ı model. ˇ Nekdy je nutne´ kombinovat s prvn´ım modelem, ´ pokud mnoˇzstv´ı panelu˚ pˇresahne unosnou mez. ´

Struktura aplikace

Strana 25 / 53

´ ı tok Vizualn´ ´ Bez ohledu na typ aplikace, vˇzdy je nutne´ brat ´ ı vn´ıman´ ´ ı rozloˇzen´ı komponent. v potaz vizualn´ ˇ Roli hraje nekolik vlastnost´ı: bl´ızkost, podobnost, ´ navaznost, ˇ ı do skupin. rozdelen´

ˇ intuitivneˇ odhalit vstupn´ı bod a být Uˇzivatel by mel opticky veden aplikac´ı. ´ ˇradou metod: centraln´ ´ ı pracovn´ı plocha Realizovano ´ ı styl (stranky ´ (Word, Google), jednotný vizualn´ se ´ ˇ ı do jasneˇ zakladn´ ım menu, iPod iTunes), delen´ popsaných sekc´ı, atp.




2


3


4

Definujeme aplikaci

5

Struktura aplikace

6


7


8


9


10

Konec

Strana 26 / 53


Strana 27 / 53

ˇ nekolik ˇ Opet vzoru˚ ´ ´ obecnou strukturu aplikace. Mame popsanu ´ Nyn´ı se pod´ıvame na implementaci jednotlivých komponent. Vˇsechny budou ruzn´ ˚ ymi zpusoby ˚ ´ prezentovat uˇzivateli informace/nastroje. ˇ Nekolik vzoru˚ pro strukturu aplikace: 1 2 3 4

Two-Panel Selector Canvas Plus Palette One-Window Drilldown Alternative views

ˇ ˇ ı obsahu aplikace: Nekolik vzoru˚ pro cˇ lenen´ 1 2 3 4

Wizard Extras On Demand Intriguing Branches ´ ı vzor) Multi-level Help (specialn´

ˇ ıc´ı strukturu aplikace Vzory rˇes´



2


3


4

Definujeme aplikaci

5

Struktura aplikace

6


7


8


9


10

Konec

Strana 28 / 53


Two-Panel Selector

Strana 29 / 53


Strana 30 / 53

Two-Panel Selector Podstata: Dva panely, element vybraný v prvn´ım ´ panelu zobraz´ı svuj ˚ obsah do druheho. Prezentovat lze cokoliv od dokumentu˚ po pˇr´ıkazy. Lze pouˇz´ıt i na malých display´ıch (BlackBerry). Velmi intuitivn´ı pro uˇzivatele, snadno pˇrep´ına´ ´ pozornost (oˇci nemus´ı urazit velkou vzdalenost). ´ z na pozornost a pamet ˇ ’ (narozd´ıl od Sniˇzuje zateˇ ˇ ı obsah. Drill-Down), protoˇze jedno okno nemen´ ´ Rychle´ – myˇs´ı je obsluhovano cˇ asto pouze jedno okno.


Strana 31 / 53

Two-Panel Selector – implementace ´ ˇ e“ ˇ je vhodne´ um´ıstit výberov ˇ e´ okno V zapadn´ ım svet ” ˇ jakým mozek vlevo nebo nahoru (odpov´ıda´ to smeru ´ a´ informace – zkuste se koukat z praveho ´ zpracovav okna jedouc´ıho auta) Kdyˇz uˇzivatel vybere element, okamˇziteˇ zobrazte jeho obsah (single-click3 ). ˇ pohybovat se v seznamu pomoc´ı Umoˇznete ´ klavesnice (ˇsipky). ˇ vybraný element (napˇr. inverze pozad´ı a Zvýraznete p´ısma). ´ zkami Pokroˇcile´ varianty: bal´ıcˇ ek“ panelu˚ se zaloˇ ” (Eclipse), pohyblive´ panely (WinAmp), rozbalovac´ı sekce panelu˚ (Photoshop). 3

ne jako Nokia u Symbianu double-click


Canvas Plus Palette

Strana 32 / 53


Strana 33 / 53

Canvas Plus Palette

´ ´ Klasicke´ schema pro kreativn´ı nastroje (Photoshop, GIMP). Pˇrejato z UNIXových aplikac´ı ´ Dnes cˇ asto nahrazovano oknem s vnoˇrenými podokny“. ” ˇ je doporuˇcovano ´ Opet paletu um´ıstit nahoru nebo ´ zem.). vlevo (v zap.


One-Window Drilldown

Strana 34 / 53


Strana 35 / 53

One-Window Drilldown ´ okamˇziku aplikace zab´ıra´ cele´ Princip: V kaˇzdem ˇ je okno. Pokud si uˇzivatel vybere uˇcitou volbu, opet zobrazena pˇres cele´ okno. ´ ˇ Vhodný pˇr´ıstup zejmena v techto pˇr´ıpadech: 1 2 3

Pracujete se zaˇr´ızen´ım s malou obrazovkou (nelze pouˇz´ıt Two-Panel Selector ). Jedna´ se o aplikaci pro neznale´ uˇzivatele. ´ an´ ´ ı (kiosky, prum. Nen´ı k dispozici pˇresne´ ovlad ˚ zaˇr´ızen´ı).

Podstata spoˇc´ıva´ v linearizaci cˇ innosti uˇzivatele. ´ Je nezbytne´ poskytnout mu jasna´ tlaˇc´ıtka/klavesy pro ˇ a zruˇsit“. kroky vpˇred, zpet ” Je nutne´ udrˇzovat konzistentn´ı zobrazen´ı elementu˚ 4 . 4

ne jak nastaven´ı ve Windows 7


Alternative views

Strana 36 / 53


Alternative views

Strana 37 / 53


Strana 38 / 53

Alternative views ˇ Umoˇznuje uˇzivateli zobrazit obsah zcela odliˇsnou formou – jiný jazyk, poˇrad´ı prvku, ˚ zoom, atp. (viz Word, nebo reˇzim GIMPu jedno okno/v´ıce oken) ´ Snaˇzte se vytvoˇrit kdykoliv zobrazujete (formatujete) 5 ˇ y obsah . nejak´ ˇ Umoˇznuje uˇzivateli pˇrizpusobit zobrazen´ı jeho ˚ preferenc´ım, zaˇr´ızen´ı,. . . ˇ aby se uˇzivatel mohl snadno vratit ´ do Zajistete, pˇredchoz´ıho zobrazen´ı. ´ aby si aplikace pamatovaly nastaven´ı Je vhodne, uˇzivatele (zobrazen´ı ve Wordu, nastaven´ı GMailu). ´ Je doporuˇcovano pouˇz´ıvat plovouc´ı rozloˇzen´ı podle ´ ıho nastaven´ı aplikace. aktualn´ 5

mapy, texty,. . .

ˇ ˇ ı obsahu aplikace Vzory pro clen en´



2


3


4

Definujeme aplikaci

5

Struktura aplikace

6


7


8


9


10

Konec

Strana 39 / 53


Strana 40 / 53

Wizard

´ ˇ ı obsahuje je Zakladn´ ı myˇslenkou vˇsech vzoru˚ na cˇ lenen´ omezit mnoˇzstv´ı prvku, ˚ se kterými mus´ı uˇzivatel pracovat.


Strana 41 / 53

Wizard

´ ı volba pokud je potˇreba provest ´ uˇzivatele Idealn´ procesem na který nen´ı zvyklý6 . ´ ´ z (jasneˇ Zasadn eˇ sniˇzuje kognitivn´ı zateˇ ˇ specifikujeme, co se ma´ udelat). ˇ Nekdy pˇr´ıliˇs limituj´ıc´ı pro pokroˇcile´ uˇzivatele. ´ ˇ ı procesu do vhodných Problemem muˇ ˚ ze být rozdelen´ bloku. ˚

6

´ napˇr. nakup letenek nebo instalace programu


Strana 42 / 53

Klasicky´ Wizard ˇ s´ı implementac´ı tohoto modelu je Wizard, Nejklasiˇctejˇ který zab´ıra´ cele´ okno. Jeho kladem je, zˇ e okno muˇ ˚ ze obsahovat ˇradu ˇ ´ vysvetlen´ı, obrazku, ˚ atp. Skrýva´ vˇsak pˇred uˇzivatelem jeho pˇredchoz´ı volby. Je nezbytne´ dovolit uˇzivateli pohybovat se vpˇred i ˇ a zruˇsit akci. zpet ´ Tento navrh lze vylepˇsit vyuˇzit´ım vzoru Two-Panell Selector.


Cancel

Strana 43 / 53


Strana 44 / 53

Alternativn´ı Wizard ´ okne. ˇ Alternativou je zobrazit celý proces v jedinem ´ procesu vizualn ´ eˇ jasneˇ Je vhodne´ jednotlive´ cˇ asti ˇ oddelit. ´ celne´ je postupna´ aktivace zobrazených prvku˚ Uˇ podle postupu uˇzivatele. ´ ı voleb. Alternativou (lepˇs´ı?) je postupne´ zobrazovan´ ˇ s´ı dobˇre zvolene´ výchoz´ı hodnoty Uˇzivatele vˇzdy poteˇ .


Extras On Demand

Strana 45 / 53


Strana 46 / 53

Extras On Demand

´ Proˇrezejte ovladac´ ı prvky Vaˇs´ı aplikace na naproste´ minimum. ´ et ˇ 80% operac´ı Dobre´ rozhran´ı: umoˇzn´ı rychle provad ˇ a zbytek je nejak moˇzný. ´ ı jsou samostatne´ panely a liˇsty s pokroˇcilými Idealn´ funkcemi. Mnoho funkc´ı uˇzivatele mate.7

7

´ ´ ´ an´ ´ ı Tv pouˇz´ıva´ Vaˇse babiˇcka? kolik tlaˇc´ıtek dalkov eho ovlad


Intriguing Branches

Strana 47 / 53


Strana 48 / 53

Intriguing Branches ´ ı skryte´ funkcionality. 8 Vyuˇz´ıva´ se pro pˇridan´ ˇ ´ steˇ pokroˇcil´ı uˇzivatele). ´ Lide´ jsou zvedav´ ı (zvlaˇ Rozhran´ı s pˇridanou funkcionalitou je pro neˇ ´ ˇ s´ı. zabavn ejˇ ´ ˇ Uˇzivatele´ maj´ı tendenci ignorovat explicitn´ı napov edy ˇ et ˇ v´ıc?“ volba. – lepˇs´ı variantou je chcete ved ” Je nezbytne´ do hloubky pochopit uˇzivatele (co ho ´ zaj´ıma). Dejte uˇzivateli jasneˇ najevo, zˇ e bude moci pokraˇcovat ´ v pˇredchoz´ı praci. 8

ˇ napˇr. nab´ıdnut´ı doplnkov´ ych informac´ı

´ ı doplnkov ˇ Specialn´ y´ vzor



2


3


4

Definujeme aplikaci

5

Struktura aplikace

6


7


8


9


10

Konec

Strana 49 / 53


Multi-level Help

Strana 50 / 53


Strana 51 / 53

Multi-level Help ´ ˇ Nejen komplexn´ı aplikaci podpoˇrte ˇradou napov ed. Poˇc´ıtat s velmi rozd´ılnou urovn´ ı znalost´ı uˇzivatelu. ´ ˚ ´ ´ ˇ pˇr´ımo do aplikace (ale Vkladejte popisky a napov edy ˇ aby neobteˇ ˇ zovaly pokroˇcile´ uˇzivatele). nevt´ırave, ´ lze tooltips nad ikonkami jsou prakticky nezbytne, aplikovat i na jine´ prvky GUI, ´ ˇ zobrazovat ve schovatelnem ´ oknu, delˇs´ı napov edy ´ ˇ ´ eˇ nezbytnost´ı je samostatna´ napov eda, idealn ˇ a´ o animace, pˇr´ıklady, atp. doplnen ´ ˇ v napov ´ ˇ eˇ zasadn´ ı je snadne´ nalezen´ı odpovedi ed ´ an´ ´ ı, pomoc´ı vyhledav ´ ı je pokud vyhledav ´ an´ ´ ı um´ı nalezt ´ i poloˇzku idealn´ menu (MacOS X aplikace), ´ on-line podpora (helpline, forum,. . . ).

Konec



2


3


4

Definujeme aplikaci

5

Struktura aplikace

6


7


8


9


10

Konec

Strana 52 / 53

Konec

Strana 53 / 53

D´ıky za pozornost ´ cˇ asti ´ jsme si specifikovali 4 obecne´ prvky, V teto ´ opakuj´ı (seznam akc´ı, ktere´ se v GUI neustale ´ objektu, u). ˚ kategori´ı a nastroj ˚ A pod´ıvali jsme se na jejich implementaci. ´ Definovali jsme zakladn´ ı koncept aplikace ´ delen ˇ e´ okno, jedine´ okno) (v´ıce-oknova, ´ i jednotlivých komponent GUI (zakladn´ ıch prvku). ˚ Jejich podstatou bylo zobrazit uˇzivateli ruzn´ ˚ ymi zpusoby zvolene´ informace. Druha´ skupina vzoru˚ ˚ ˇ rena na sn´ızˇ en´ı poˇctu elementu, byla zameˇ ˚ se kterými mus´ı uˇzivatel pracovat. ´ Pˇr´ısˇ t´ı tema: Navigujeme uˇzivatele


Navigace v aplikaci ˇ a´ uˇzivatelska´ rozhran´ı Pokrocil

Navigace v aplikaci


Navigace v aplikaci

2

Vzory pro navigaci v aplikaci

3

Pˇrechod ze stavu do stavu

4

Identifikace pozice v aplikaci

5

´ ı vzory Specialn´

6

Konec

Strana 2 / 34

Navigace v aplikaci

Strana 3 / 34


´ sce jsme se zabývali zakladn´ ´ V minule´ pˇrednaˇ ı strukturou ´ ´ ıho pohledu – jak prezentovat aplikace zejmena z vizualn´ ´ uˇzivateli urˇcitý obsah a nastroje. ´ ´ ´ Dnes se pod´ıvame na problem, jak uˇzivatele provest ´ c´ıle, ke kteremu ´ aplikac´ı, aby dosahl byla vytvoˇrena. ´ okamˇziku ved ˇ el, ˇ kde se v aplikaci A take´ aby v kaˇzdem ´ ı.1 nachaz´

1

ˇ vychaz´ ´ ıme zejmena ´ Opet z knihy Designing Interfaces od Jenifer ´ Tidwell, str. 55 a nasleduj´ ıc´ı

Navigace v aplikaci

Strana 4 / 34

Schizma ˇ ı m´ıt vˇse na dosah (obsah, Pokroˇcil´ı uˇzivatele´ chtej´ funkce). ´ cn´ıky mate. Je nutne´ nekter ˇ Mnoho elementu˚ zaˇcateˇ e´ schovat. Cesta ke schovaným mus´ı být co nejkratˇs´ı. ´ pozor na dodrˇzen´ı minimaln ´ eˇ nasleduj´ ´ Mus´ıme dat ıc´ı pravidla: 1 2 3

´ v´ım, kde jsem (signpost – nav ´ est´ ˇ ı“), stale ” v´ım kam j´ıt2 (wayfinding – ukazatel“), ” je to bl´ızko – minimalizujeme poˇcet kliknut´ı.

´ v potaz narodn´ ´ ´ Je nutne´ brat ı zvyky (zejmena pˇri rozloˇzen´ı prvku). ˚ 2

´ co se stane po kliknut´ı uˇzivatel nesm´ı být na pochybach

Navigace v aplikaci

Strana 5 / 34

´ eˇ ˇz Kognitivn´ı zat ´ cn´ıci slepeˇ nasleduj´ ´ Zaˇcateˇ ı ukazatele. ´ neˇz se Pokaˇzde´ kdyˇz vstoup´ıte do m´ıstnosti, trva, ´ z). Stejna´ situace je zorientujete (kognitivn´ı zateˇ ´ u kaˇzdeho okna aplikace. Snaˇz´ıme se ji minimalizovat3 . ˇ ı vytvoˇrit mentaln´ ´ ı mapu Zkuˇsen´ı uˇzivatele´ chtej´ ˇ pomah ´ a´ jasne´ znaˇcen´ı4 . prostoru. Opet ˇ par ´ vzoru, ´ KZ pomohou Opet ˚ ktere´ nam minimalizovat. . . 3 4

´ rozˇciluj´ı webove´ galerie, kde prvky men´ ˇ ı um´ısten´ ˇ ı? Take´ Vas ´ ´ ˇ ˇ pˇredstavte si, zˇ e jste v neznamem meste



Navigace v aplikaci

2


3


4


5


6

Konec

Strana 6 / 34


Vzory pro orientaci v aplikaci Vzory, ktere´ ˇreˇs´ı pˇrechod ze stavu do stavu: 1 2 3 4 5

Clear Entry Points Global Navigation Hub And Spoke Pyramid Modal Panel

Vzory, ktere´ identifikuj´ı pozici v aplikaci: 1 2 3 4

Sequence Map Breadcrumps Annotated Scrollbar Color-Coded Sections

´ ı vzory: Specialn´ 1 2

Animated Transitions Escape Hatch

Strana 7 / 34



Navigace v aplikaci

2


3


4


5


6

Konec

Strana 8 / 34


Strana 9 / 34

Clear Entry Points ˇ ´ jasných vstupn´ıch Vytvoˇrte jeden nebo nekolik malo bodu˚ 5 . 6 ˇ jasneˇ evokovat ulohu Popis by mel . ´ Je potˇreba naplnit vzor Instant Gratification. ´ eˇ i barevneˇ Vstupn´ı body mus´ı být proporcionaln ˇ zdurazn eny. ˚ ˇ ı tohoto vzoru - jen Splash Screen nen´ı naplnen´ ´ okna (pouˇz´ıt max. nuceneˇ pˇrep´ına´ uˇzivatele do jineho jako progress bar ) 5 6

´ u, i u webu cˇ asto mnoˇzstv´ı ruzn´ ˚ ych ramc ˚ pol´ı, reklam, . . . ˇ ´ pojem zde zaˇcnete“ mnoho neˇr´ıka


Clear Entry Points

Strana 10 / 34


Clear Entry Points?

Strana 11 / 34


Strana 12 / 34

Global Navigation ˇ ast ´ obrazovky vˇzdy ukazuje konzistentn´ı ovlad ´ an´ ´ ı C ˇ ´ pro pˇrepnut´ı mezi castmi aplikace. ˇ ´ Cast´ y vzor pro webove´ stranky nebo mobiln´ı zaˇr´ızen´ı7 . ´ oddelit ˇ globaln´ ´ ı a lokaln´ ´ ı navigaˇcn´ı Býva´ problem prvky. ´ v potaz, zˇ e uˇzivatel muˇ Nutne´ brat ˚ ze tuto navigaci ´ pˇrehlednout. Alternativou je vzor Hub And Spoke.

7

´ ı vede obvykle k nevoli uˇzivatelu˚ jeho ignorovan´


Global Navigation

Strana 13 / 34


Global Navigation

Strana 14 / 34


Strana 15 / 34

Hub And Spoke ˇ ıme na podaplikace. Aplikaci rozdel´ ´ ı vstup a vˇzdy jasný Uˇzivateli poskytneme centraln´ výstup. Rozd´ıl oproti Global Navigation je, zˇ e se ´ ´ nepˇrep´ıname pˇr´ımo mezi cˇ astmi aplikace. ˇ asti ´ spolu obvykle ani nekomunikuj´ı8 . C Hub And Spoke se obvykle pouˇz´ıva´ v souvislosti s aplikacemi vyuˇz´ıvaj´ıc´ımi cele´ okno. Velmi intuitivn´ı, ale muˇ ˚ ze omezovat uˇzivatel zvykle´ na ˇ s´ı volnost. vetˇ 8

to by vedlo sp´ısˇ e na aplikaci pˇredchoz´ıho vzoru


Hub And Spoke

Strana 16 / 34


Strana 17 / 34

Pyramid

Pyramida je kombinac´ı pˇredchoz´ıch pˇr´ıstupu. ˚ ´ ´ ı vstupn´ı bod, výstup a moˇznost Mame centraln´ ´ ´ pˇrechazet mezi cˇ astmi aplikace. ´ Urovenˇ zanoˇren´ı je 1. Vzor redukuje poˇcet akc´ı, ktere´ jsou nutne´ ´ ı obsahu. k prozkouman´ Obvykle´ u aplikac´ı zab´ıraj´ıc´ıch cele´ okno.


Pyramid

Strana 18 / 34


Modal Panel

Strana 19 / 34


Strana 20 / 34

Modal Panel Vyskakovac´ı okno, ktere´ zastav´ı aplikaci, dokud se uˇzivatel nerozhodne. Pouˇz´ıt pokud nezbytneˇ potˇrebujete pomoc od uˇzivatele. ´ ale pˇri opakovan´ ´ ı vede Velmi ruˇsive, k apatiˇcnosti/vzteku (i tento soubor smazat?). Velmi pˇrehledneˇ oznaˇcit moˇznosti. ˇ Ponechat uˇzivateli cestu zpet.



Navigace v aplikaci

2


3


4


5


6

Konec

Strana 21 / 34


Sequence Map

Strana 22 / 34


Strana 23 / 34

Sequence Map

Panel, který pˇresneˇ ukazuje polohu v sekvenci cˇ innost´ı9 . Muˇ ˚ ze slouˇzit pro informaci nebo pro pˇrechod. ˇ et, ˇ kde se nachaz´ ´ ı (v jake´ fazi ´ Uˇzivatel chce ved procesu). Psychologicky velmi dobre´ (bl´ızˇ ´ım se ke konci).

9

Prvn´ı ze vzoru˚ na identifikaci pozice


Breadcrumps

Strana 24 / 34


Strana 25 / 34

Breadcrumps

´ m´ısteˇ v hierarchii objektu˚ ukaˇzte cestu Na kaˇzdem ˇ zpet. Jedna´ se o alternativu k Sequence Maps. Stejný psychologický princip. ´ Implementovat v bl´ızkosti vrcholu stranky/aplikace.


Strana 26 / 34

Annotated Scrollbar Vyuˇzijte scrollbar k identifikaci pozice – dynamický text charakterizuj´ıc´ı obsah oblasti. ´ steˇ pokud je aplikace zameˇ ˇ rena na praci ´ Zvlaˇ ´ s velkým dokumentem (text, zdrojový kod, aj.). ´ eˇ ˇ r nemoˇzne´ cˇ ´ıst pˇresouvaný text a na scrollbar Je tem ´ eˇ soustˇred´ı. se uˇzivatel prav Scrollbar (ˇci obdobný panel) lze obohatit i o staticke´ ˇ ı. prvky – napˇr. barevne´ rozˇclenen´


OpenOffice.org a Xcode

Strana 27 / 34


Strana 28 / 34

Vysledky ´ vyhled. v Google Chrome


Strana 29 / 34

Color-Coded Sections

´ rozhran´ı muˇ Urˇcita´ cˇ ast ˚ ze sd´ılet jednotný barevný ´ ton. ´ a´ v jake´ je sekci bez Uˇzivateli se snadno rozpoznav ´ ı navigaˇcn´ıch elementu. hledan´ ˚ ´ Do znaˇcne´ m´ıry i podprahove. ˇ ´ nen´ı tˇreba u trivialn´ ´ ıch stranek. ´ Obvykle doplnkov e,



Navigace v aplikaci

2


3


4


5


6

Konec

Strana 30 / 34


Strana 31 / 34

Animated Transitions

´ e´ zmeny ˇ mohou uˇzivatele mast. ´ Nahl ˇ ´ tak ji lepe ´ Pokud je zmena postupna, akceptuje. Pˇri minimalizaci, pˇresunu, atp. uˇzivatel v´ı, kam se prvek schoval“. ” ´ eˇ pˇritaˇzliva´ a Dobˇre zvolena´ animace je vizualn ˇ zuje. neobteˇ ´ Doporuˇcena´ delka animace je cca 0.3-1.0s.


Strana 32 / 34

Escape Hatch

´ aplikace s omezenými navigaˇcn´ımi Do kaˇzde´ cˇ asti ˇ element umoˇznuj´ ˇ ıc´ı navrat ´ moˇznostmi10 um´ıstete do ´ e´ cˇ asti ´ aplikace. znam ´ Implementace: logo vracej´ıc´ı na domovskou stranku, Cancel“ tlaˇc´ıtko, 0“ u telefonu, . . . . ” ” ˇ zdurazn ˇ ı myˇslenky Safe Exploration. Opet en´ ˚

10

Hub and Spoke, Modal Panel, . . .

Konec


Navigace v aplikaci

2


3


4


5


6

Konec

Strana 33 / 34

Konec

Strana 34 / 34

D´ıky za pozornost

´ Dnes jsme si ukazali, jakým zpusobem navigovat ˚ uˇzivatele v aplikaci: jak mu umoˇznit snadný pˇrechod ´ mezi jednotlivými cˇ astmi aplikace (aplikacemi) a jak ´ ı pozici v aplikaci. mu jasneˇ popsat jeho aktualn´ ´ ´ ıme operace Pˇr´ısˇ t´ı tema: Provad´


´ en´ ˇ ı operac´ı Provad ˇ a´ uˇzivatelska´ rozhran´ı Pokrocil

´ en´ ˇ ı operac´ı Provad



2

Nab´ızen´ı operac´ı

3

´ en´ ˇ ı procesu˚ Provad

4

Sekvence operac´ı

5

´ an´ ´ ı textových hodnot Vklad

6

´ ı pˇr´ıpady Specialn´

7

Konec

Strana 2 / 42


Strana 3 / 42

ˇ ˇ ı pˇredna´ ska ˇ O cem bude dnesn´ ´ sky jsme se zabývali zakladn´ ´ Do minule´ pˇrednaˇ ı strukturou aplikace – kolik bude m´ıt oken, s jakým ˇ jak bude zobrazen, obsahem, jak bude obsah cˇ lenen, jak uˇzivatele navigovat mezi sekcemi, jak mu ´ ı, atp. vyznaˇcit, kde se nachaz´ ˇ tem ´ eˇ ˇ r statickeho ´ Aplikaci jsme vn´ımali jako neco (elektronickou knihu). ´ ´ provad ´ en´ ˇ ı ruzn´ Dnes se pod´ıvame na problem ˚ ych operac´ı.


Strana 4 / 42

Druhy interakce ´ eˇ nab´ıdnout nastroj) ´ Nab´ızen´ı operac´ı (jak originaln Button Groups, Action Panel, Smart Menu Items, Done Button

´ en´ ˇ ı procesu˚ (tisk) Provad Preview, Progress Indicator, Cancelability

´ en´ ˇ ı sekvenc´ı operac´ı (uprava Provad fotografie) ´ Command History + Multilevel Undo, Macros

´ an´ ´ ı textových hodnot Vklad Forgiving Format, Structured Format, Input Prompt, Autocompletition, Fill-in-the-Branches, Input Hits

´ an´ ´ ı netextových hodnot Vklad Dropdown Chooser, Illustrated Choices, List Builder

´ ı pˇr´ıpady Specialn´ Good Defaults, Same-Page Error Message




2


3


4

Sekvence operac´ı

5


6


7

Konec

Strana 5 / 42


Strana 6 / 42

Button Groups ´ ı urˇcitou skupinu funkc´ı davejte ´ Tlaˇc´ıtka, ktera´ ovladaj´ do skupin. ´ an´ ´ ı, tlaˇc´ıtka na Pˇr´ıklad: iTunes – tlaˇc´ıtka na pˇrehrav ´ s oknem, playlisty. praci ˇ ıc´ı (aha, tyto Skupiny tlaˇc´ıtek jsou sebe-vysvetluj´ tlaˇc´ıtka manipuluj´ı s X). Nikdy nekombinovat tlaˇc´ıtka ´ ı skladeb a zavˇren´ı s ruzn´ ˚ ym významem (pˇrep´ınan´ okna) ´ e´ symboly, jasna´ a jednoznaˇcna´ Pouˇz´ıvat ustalen ´ ano. ´ slova. Nepouˇz´ıvat zˇ argon, pokud to nen´ı oˇcekav ´ ı pozor na mrtvý bod (napˇr. konec Pˇri umist’ovan´ ´ ´ na zvyky. dlouheho seznamu), dbat


Button Groups

Strana 7 / 42


Strana 8 / 42

Action Panel Prezentuje m´ısto ruzn´ ˚ ych menu a liˇst tlaˇc´ıtek dobˇre strukturovanou velkou skupinu func´ı. Ms Word – Nový dokument“ panel – Nový ze ” sˇ ablony, Otevˇr´ıt existuj´ıc´ı, atp. Pruzkumn´ ık ve Window, Finder v MacOS X a jejich ˚ levý panel Inspector u Pages, Keynote, aj.

Pouˇz´ıt pokud by skupina tlaˇc´ıtek nedostaˇcovala nebo ´ pˇr´ıkazy jsou pˇr´ıliˇs sloˇzite. Proˇc pouˇz´ıt: viditelnost a volna´ ruka pˇri designu ´ ı, panelu (muˇ ˚ ze být integrovaný, separatn´ schovatelný, volne´ rozloˇzen´ı prvku). ˚ ´ na pˇrehlednost - ne vˇse v jednom“ Dbat ”


Action Panel

Strana 9 / 42


Strana 10 / 42

Smart Menu Items ˇ text v menu dynamicky podle toho, co pˇresneˇ Mente funkce provede.


Strana 11 / 42

Done Button ˇ tlaˇc´ıtko, ktere´ ukonˇcuje ulohu ˇ eˇ na Um´ıstete oddelen ´ konec visual flow (Konec, OK). ˇ by bez cˇ ten´ı být janeˇ patrne, ´ zˇ e se jedna´ Melo o posledn´ı krok.




2


3


4

Sekvence operac´ı

5


6


7

Konec

Strana 12 / 42


Strana 13 / 42

Preview Zobrazte uˇzivateli, co se stane, aˇz proces dokonˇc´ı. ´ cnou ulohu“ Kdy: Uˇzivatel chce vykonat naroˇ – tisk ´ ” ´ ´ ı formulaˇ ´ re, atp. velkeho dokumentu, odeslan´ ˇ ı Vyvaruje se tak mnoˇzstv´ı chyb a nedorozumnen´ ´ ı v´ıce produktu˚ – klikl nedoˇckaveˇ 2×, tisk (objednan´ ´ ım stran a cˇ ´ısly sˇ patných stran – rozd´ıl mezi cˇ ´ıslovan´ ´ stranek, atp.). ´ ım proveden´ım ukonu Pˇred finaln´ zobrazte souhrn a ´ ˇ v pˇr´ıpadeˇ chyby navrat ´ ´ umoˇznete k potˇrebnemu kroku.


Strana 14 / 42

Progress Indicator + Cancelability ˇ z´ı dele, ´ neˇz cca 2 sekundy. Kdykoliv urˇcita´ uloha beˇ ´ ˇ být blokovano ´ ˇ ı GUI by nemelo bez upozornen´ ˇ beˇ ˇ zet na pozad´ı (zamrznut´ı) nebo uloha by nemela ´ ˇ bez informace io prub ˚ ehu. ´ ˇ ˇ popisovat: Indikator prub by mel ˚ ehu ´ eˇ deje, ˇ co se prav ´ ulohy ´ jaka´ cˇ ast je hotova, ´ kolik cˇ asu (ˇci jine´ jednotky) zabere zbytek ulohy, ´ jak operaci zruˇsit.

ˇ ´ cne´ ukoly Cancelability: Casov eˇ (ˇci jinak) naroˇ by ´ ˇ j´ıt jednoduˇse zruˇsit (Stop v prohl´ızˇ eˇci, Cancel melo u tiskove´ ulohy) – pamatujte na Safe Exploration ´

Sekvence operac´ı



2


3


4

Sekvence operac´ı

5


6


7

Konec

Strana 15 / 42

Sekvence operac´ı

Strana 16 / 42

Cmd. Hist. + Multilevel Undo + Macros ´ r´ı se zaznam ´ Vytvaˇ o operac´ıch, ktere´ uˇzivatel provedl ˇ ˇ co dˇr´ıve udelal, ˇ (nedestruktivn´ı zmeny) – aby videl, ˇ .. mohl pˇr´ıkazy volat opakovane,. Vhodne´ pro sloˇzite´ aplikace typu vývojove´ prostˇred´ı, ´ modelovac´ı nastroje – Maple, Matlab,. . . ˇ ı Safe S t´ımto souvis´ı i Multi-level Undo – naplnen´ Exploration a Incremental Construction. a Macros – vyhnut´ı se Streamlined Repetition Implementace Command History a M. Undo: Smart Menu Items, seznamy,. . . Implementace Macros – tlaˇc´ıtko Record“, sekvence ” v Cmd. Hist.

Sekvence operac´ı

Strana 17 / 42

´ Command History: co zaznamenavat ´ Obvykle zaznamenavat: ´ zapis textu, ´ databazov a´ transakce, ´ ´ modifikace platna (u obrazku), ˇ zmena tvaru nebo organizace grafických objektu, ˚ ´ ı/modifikace objektu˚ (sloupec), vytvoˇren´ı/smazan´ ´ ri, operace se soubory a adresaˇ ´ jakakoliv Copy“, Cut“, Paste“ operace. ” ” ”

Obvykle vynechat:

ˇ textu nebo objektu, výber ˇ ´ zmena stranky okna nebo dokumentu, pozice kurzoru/scrollbaru, ˇ zmena velikost´ı a pozic oken, panelu. ˚

´ an´ ´ ı textovych Vklad ´ hodnot



2


3


4

Sekvence operac´ı

5


6


7

Konec

Strana 18 / 42


Strana 19 / 42

Forgiving Format ˇ ´ Umoˇznuje uˇzivateli vloˇzit text v mnoha formatech. Pouˇz´ıt v okamˇziku, kdy uˇzivatel muˇ ˚ ze pouˇz´ıt nepˇredv´ıdatelný mix b´ılých znaku, ˚ zkratek, atp. ˇ zovalo pˇremýsˇ let o spravn ´ em“ ´ Uˇzivatele by zateˇ ” ´ formatu. Redukuje nezbytnost pouˇzit´ı pomucek pro vstup. ˚ Alternativou je Structured Format. Pˇr´ıklad z Google Calendar : 10 Schuzka, 10:00 Schuzka, 10am-11am Schuzka


Forgiving Format

Strana 20 / 42


Forgiving Format

Strana 21 / 42


Strana 22 / 42

Structured Format ´ M´ısto textoveho pole uˇzivatel vyb´ıra´ vstup ze selektoru˚ nebo vpisuje do striktneˇ specifikovaných pol´ı. Pouˇz´ıt pokud potˇrebujete jasneˇ strukturovaný vstup ´ na daný format ´ (ˇc´ıslo nebo chcete uˇzivatele navest kreditn´ı karty, CCV). Pozor na vstupy, ktere´ se liˇs´ı s ohledem na oblast/zemi (telefon). ´ ˇ typu dd/mm/yy. Je vhodne´ pouˇz´ıvat napov edy Lze nahradit Forgiving Format.


Strana 23 / 42

Fill-in-the-Blanks ˇ Formulujte dotaz jako vetu, do ktere´ uˇzivatel ˇ doplnuje“ slova. ” ˇ ıc´ı: Vytvoˇr obraz o rozliˇsen´ı ... [px/cm] Sebe-vysvetluj´ ´ krat ... [px/cm]. ˇ ´ ıch Pouˇz´ıt pokud je nutne´ doplnit nekolik konkretn´ hodnot. ´ s lokalizac´ı (ruzn Obˇcas muˇ ˚ ze být problem ˚ e´ poˇrad´ı ˇ ach). ´ slov ve vet


Strana 24 / 42

Input Hints ˇ vedle/pod pole pro vstup text vysvetluj´ ˇ ıc´ı Um´ıstete jeho obsah. ´ Jmeno: . . . (popisek: Pˇr´ıklad: David George“). ” ´ Pˇrezd´ıvka: . . . (popisek: Toto jmeno bude zobrazeno ” u Vaˇseho. . .“). Býva´ pouˇzit ve spojitosti s Forgiving Format a Structured Format. Alternativou je Input Prompt.


Strana 25 / 42

Input Prompt ˇ ı. Text, který je vloˇzen pˇr´ımo do pole s odpoved´ ˇ s´ı, neˇz Input Hint. Mus´ı být struˇcnejˇ ´ Text v poli oznaˇcenem Destinace“ – Kam chcete ” ” ˇ letet“. ´ Text v poli oznaˇcenem Datum“ – Kdy chcete ” ” ˇ odletet“. ˇ cˇ asto zaˇc´ıname ´ Pro výber slovy typu vyber/zvol“, pro ” 1 textova´ pole vloˇz/vepiˇs“ . ”

1

ˇ z Power Pointu: Click to add title“ viz veta


Strana 26 / 42

Autocompletion Jak uˇzivatel p´ısˇ e, ukazuj´ı se moˇzne´ dokonˇcen´ı. Pouˇz´ıt kdykoliv muˇ ˚ zeme tuˇsit, co uˇzivatel p´ısˇ e ´ (jmena, den v týdnu). ´ ´ pˇredchaz´ ´ ı pˇreklepum. Velmi zasadn eˇ zrychluje praci, ˚ ˇ an´ ´ ı muˇ ´ eno ˇ Doplnov z ˚ ze být provad ´ uˇzivatelem vloˇzených hodnot, databaze ´ (jmena ´ existuj´ıc´ı databaze v UIS), ´ ´ obvykle vstupy v dane oblasti (dny v týdnu).

Mus´ı j´ıt zruˇsit, nesm´ı interferovat s psan´ım! (meˇ v UIS obˇcas nejde2 ). 2

´ eˇ odladit JavaScript aby fungoval po vˇsemi prohl´ızˇ eˇci nicmen stejneˇ je ukol hodný Sysifa. . . ´




2


3


4

Sekvence operac´ı

5


6


7

Konec

Strana 27 / 42


Strana 28 / 42

Good Defauts

´ doplnte ˇ vhodne´ výchoz´ı Kdykoliv je to moˇzne, hodnoty. ´ ˇ zuje. Zasadn´ ı uspora cˇ asu, ale sˇ patný tip obteˇ ´ ´ Obˇcas problem, zˇ e uˇzivatel se vubec nesoustˇred´ı na ˚ ´ podstatu otazky. ˇ ı jej k tomu pˇrinut´ı. Naopak mechanicke´ doplnen´ ´ zit, zda výchoz´ı odpoved ˇ ’ nemuˇ Nutne´ zvaˇ ˚ ze uˇskodit.


Strana 29 / 42

Same-Page Error Message ˇ ı na chybu pˇr´ımo na stranku ´ ´ rem. Upozornen´ s formulaˇ ˇ ´ samostatna´ dialogova´ okna. Kdyˇz Casto pouˇz´ıvany okno zmiz´ı, zmiz´ı i popis chyb a uˇzivatel mus´ı hledat. ˇ být pˇr´ımo u poloˇzky a pˇresný: Popis chyby by mel struˇcneˇ a jasneˇ ( v emailove´ adrese chyb´ı @“ m´ısto ” ˇ ´ adresy“), Spatn´ y format ” ˇ ˇ m´ısto Chyba pˇri lidsky (( Spatn eˇ zadane´ PSC“ ” ” ´ numericke validaci pole“), ˇ nastala neoˇcekavan ´ sluˇsneˇ ( Prominte a´ chyba, ” ˇ pros´ım na Objednat“ m´ısto PHP Error 76“). kliknete ”

´ ı je okamˇzita´ kontrola. Idealn´ ´ zvaˇzte Input Pokud se chcete vyvarovat chybam Hints, Input Promps, Forgiving Format, kdy je to moˇzne´ Dropdown Chooser m´ısto otevˇrene´ odp.


Strana 30 / 42

´ ı Same-Page Error Message: zadan´


Strana 31 / 42

Same-Page Error Message: chyba


Strana 32 / 42

Same-Page Error Message: Windows


Strana 33 / 42

Same-Page Error Message: Firefox


Strana 34 / 42

Same-Page Error Message: nVidia


Strana 35 / 42

Same-Page Error Message: MapShake

http://mapshake.cz – excelentn´ı registrace i operace ´ AJAX+inteligentn´ı programator=intuitivita

Konec



2


3


4

Sekvence operac´ı

5


6


7

Konec

Strana 36 / 42

Konec

Bud’te kreativn´ı

Strana 37 / 42

Konec

Pozor na lokalizaci :-)

Strana 38 / 42

Konec

´ ı case-study Trivialn´

Strana 39 / 42

Konec

´ ı case-study Trivialn´

Strana 40 / 42

Konec

Strana 41 / 42

´ r autora Komentaˇ 1

The title: I believe that each form should have a prominent title that briefly explains what the form is about. If you use login page, like in my example, it is important to mention the name of your website here, so the accidental visitors know where they are.

2

Non members: Non-member visitors may stumble upon your login page one way or another. Why not think of them and offer them a direct link to the registration page. It will save them some time and you increase your chance of more new member signing up.

3

Input fields and labels: Although login forms usually contain two input fields, it is important that they’re styled nicely so the labels are readable, and there is no. One thing that I often notice on the various websites is the lack of clickable labels. You should use FOR attribute on labels ”connect”them with appropriate input field. It is such a small effort when coding and it can make a huge difference in terms if usability.

4

Forgot password link: This is also very important link. Many users have numerous accounts and passwords and they often can’t remember which one they used on your site. The best placement for this link is near the password field itself.

5

Submit button: This should, of course, be the most prominent thing in the form. For best results (by results I mean best user experience) it should always look like a button.

6

Remember me: Very useful feature that your returning users will appreciate. If your application supports it, include this option and your members will be thankful. One thing that I believe that is very important is wrapping the checkbox and the text inside the same label. Checkboxes are small and therefor hard to click on. If you wrap entire text inside the label, you enlarge the clickable area and that way making the life easier for your users.

7

Back link: If you have full login pages, then you MUST allow users to change their mind about logging in

Konec

Strana 42 / 42

D´ıky za pozornost ´ Toto tema pokrývalo problematiku interakce s uˇzivatelem. ´ byly zm´ıneny ˇ tipy na zaj´ımave´ zpusoby V prvn´ı cˇ asti ˚ ´ nab´ızen´ı nastroj u. ˚ ´ ˇ Nasledovala zm´ınka o procesech – uˇzivatel by nemel ´ ı naroˇ ´ cne´ operace. být polapen do pasti“ pˇri vykonan´ ” ˇ m´ıt pˇrehled o sekvenci operac´ı, Stejneˇ tak by mel ´ eˇ by mel ˇ m´ıt moˇznost ji lehce ktere´ provedl a idealn zopakovat. ´ popisuje problem ´ vstupu hodnot – zde Posledn´ı cˇ ast je nutne´ zamyslet se nad podstatou vstupu a vybrat vhodnou metodu. ´ ´ Pˇr´ısˇ t´ı tema: Koneˇcneˇ zaˇc´ıname programovat :-)

18. dubna 2014, Brno ´ Pˇripravil: David Prochazka

´ ı realita 1: zobrazovan´ ´ ı Virtualn´ ˇ a´ uˇzivatelska´ rozhran´ı Pokrocil

ˇ Obsah pˇredna´ sky


´ sky Obsah pˇrednaˇ

2

´ ı realita Virtualn´

3

Obrazovky a projekce

4

Projekce

5

Head Mounted Display

6

Volumetric Displays

Strana 2 / 39


Strana 3 / 39


Jake´ technicke´ prostˇredky se pouˇz´ıvaj´ı pro tvorbu ´ ı a doplnen ˇ e´ reality. virtualn´ ˇ ı pouˇz´ıvan´ ´ ı Jake´ psychologicke´ aspekty ovlivnuj´ VR/AR.




2


3


4

Projekce

5


6

Volumetric Displays

Strana 4 / 39


Strana 5 / 39

´ ı realita“ Co je virtualn´ ” Existuje cela´ ˇreda (protichudn´ ˚ ych) definic. ´ Obvykle je charakterizovana jako poˇc´ıtaˇcem ” ˇ y proˇzitek“. vytvoˇrený umel´ ´ ´ ım vjemem, haptickou Muˇ vizualn´ ˚ ze být realizovana: ˇ ´ eˇ tradiˇcn´ımi zpetnou vazbou, zvukem a dalˇs´ımi men metodami (chut’, cˇ ich, atp.). VR puvodn eˇ charakterizovala komplexn´ı simulac´ı (tj. ˚ napˇr. IMAX nen´ı VR), nyn´ı ruzn ˚ e´ pˇr´ıstupy. Virtual Reality Trinagle (I3 ): ´ ıme Immersion ( ponoˇren´ı se“) – pocit, zˇ e se nachaz´ ” ˇ em ´ prostˇred´ı, real-time (latence pod 50ms). v umel ´ eˇ Interaction – moˇznost pracovat se simulac´ı, idealn ´ et ˇ pˇrirozene´ ukony. provad ´ ´ ´ ı svety, ˇ ... Imagination – napady, virtualn´


Strana 6 / 39

AR vs. VR

´ ı realita – zcela umel ˇ a´ scena, ´ Virtual Reality – virtualn´ ´ ˇ a´ realita – Augmented Reality – pos´ılena/dopln en ´ a´ scena ´ ˇ a´ o umel ˇ e´ informace, realn doplnen Obt´ızˇ neˇ specifikovalný pˇrechod (Mixed Reality).


Stupneˇ proˇzitku

Strana 7 / 39


Strana 8 / 39

Paradox

Lepˇs´ı technicke´ prostˇredky neznamenaj´ı nutneˇ lepˇs´ı proˇzitek (ˇcten´ı knihy vs. film). ´ ı proˇzitek Velmi duleˇ ˚ zita´ je pˇredstavivost a mentaln´ (imerze).


Strana 9 / 39

´ Jsme na pocˇ atku cesty...

...plne´ slepých uliˇcek. Výzkum: haptiky, AR, Web3D, sd´ılen´ı prostˇred´ı,. . . Mezioborový výzkum: psychologie, optika, . . . ´ ´ Aplikace: trening, simulace, design, zabava, ....


Strana 10 / 39

´ a´ exkurze do historie imerze Kratk ˇ obrazy), Malby (jeskyne, anamorfn´ı iluze (http://users.skynet.be/J.Beever/pave.htm), Camera Obscura (1515), fotografie (1827) a stereoskopie (1838), ´ film (pohybuj´ıc´ı se obrazky, cca 1834), ´ experimenty: prvn´ı letecký simulator (1929), Sensorama – Virtual Reality Workstation (1962) – http://en.wikipedia.org/wiki/Sensorama Head Mounted Displays (1960) ˇ ek ˇ je cˇ ´ım dal ´ naroˇ ´ cnejˇ ˇ s´ı. . . Clov


Strana 11 / 39

´ Zakladn´ ı komponenty VR Zobrazovac´ı zaˇr´ızen´ı (displaye, stereo projekce, helmy), dalˇs´ı výstupn´ı zaˇr´ızen´ı (zvuk, cˇ ich, hmat), ´ ı pohybu/obrazu, datove´ vstupn´ı zaˇr´ızen´ı (sn´ıman´ rukavice a obleky, EEG, aj.). výpoˇcetn´ı prostˇredky (stanice, clustery). ´ ı v realn ´ em ´ cˇ ase (25 sn´ımku/s), Poˇzadavky: zobrazovan´ ˚ latence pod 50 ms atp.




2


3


4

Projekce

5


6

Volumetric Displays

Strana 12 / 39


Strana 13 / 39

ˇ znych Technologie beˇ ´ obrazovek ˇ znejˇ ˇ s´ı jsou: Existuj´ı des´ıtky ruzn´ ˚ ych technologi´ı. Nejbeˇ ˇ CRT (Cathode Ray Tube) – jsou opouˇsteny, LCD (Liquid Crystal Display) – TFT LCD, aj., LED panely (reklamy), OLED (Organic LED) – organicka´ mezivrstva mezi ´ PMOLED (zejm. anodou a katodou, tenke´ ohebne, pro text a jednoduche´ vzory), AMOLED (pro vysoka´ rozliˇsen´ı) a dalˇs´ı var., ´ stavu, perfektn´ı E-ink – zobrazuje i ve vypnutem rozliˇsen´ı a ostrost, 100 ms obnovovac´ı frekvence (Amazon Kindle), plasma, laserova´ projekce, SED, . . .


Kategorie VR obrazovek

Strana 14 / 39


Strana 15 / 39

ˇ Rozdelen´ ı VR obrazovek: imerzivita

Imezivn´ı: Virtual Display: Head Mounted Display, Head Up Display ´ Spatially Immersive Display: CAVE, simulatory, prohnute´ panoramaticke´ obrazovky.

Neimerzivn´ı: monitory, projekce, interakt. pracovn´ı plochy, pos´ılena´ realita (AR), mobiln´ı AR, mobiln´ı VR.


Strana 16 / 39

ˇ e´ vlast. imerzivn´ıch obrazovek Kl´ıcov Latence – doba mezi pohybem a jeho vizualizac´ı, ´ ı vzdalenost(i) ´ ´ fokaln´ – vn´ımana´ vdalenost objektu˚ od pozorovatele, nesrovnalosti zpusobuj´ ı bolesti hlavy, ˚ oˇc´ı, atp. zorne´ pole (Field of View) – FOV u lid´ı 200 H, 130 V, 120 s pˇrekryvem oˇc´ı, display cca 100-120 , ´ u HMD, problem Field of Regard1 – pokryt´ı pozorovane´ oblasti (100% ˇ u HMD, u CAVE bychom potˇrebovali 6 sten), ˇ umoˇznuje stereskopicke´ zobrazen´ı? 1

´ je moˇzne´ simulovat uhel pozornosti? – kolik prostoru okolo nas ´


Strana 17 / 39

Metody pro stereoskopii Prostorový multiplexing – v´ıce obrazovek (HMD), ´ eˇ polarizaˇcn´ı mult. – jeden obraz horizontaln ´ druhý vertikaln ´ e, ˇ polarizaˇcn´ı filtr na polarizovan, ´ projektoru a na brýl´ıch, linearn´ı a kruhova´ polarizace (projekce). ´ ı mult. – ruzn spektraln´ ˚ e´ barvy pro obrazy, filtry na projektorech a brýl´ıch (projekce), ´ en ˇ e´ brýle2 , nutnost cˇ asový mult. – preklap synchronizace s obrazovkou (projekce, stanice), ´ r´ı stereo autostereoskopicke´ obr. – obrazovka vytvaˇ obraz bez nutnosti brýl´ı. 2

Shutter Glasses


Strana 18 / 39

ˇ Shutter Glasses – casov y´ multiplex ´ e´ brýle s kapalnými krystaly stˇr´ıdaveˇ blokuj´ı oˇci. Napajen


ˇ ı/spektraln´ ´ ı multiplex Polarizacn´

Strana 19 / 39


Strana 20 / 39

´ ´ ı Zakladn´ ı srovnan´ Pˇrep´ınane´ brýle: drahe´ brýle, nutnost vysoke´ obn. ´ svetla, ˇ frekvence projektoru/LCD, dobre´ barvy, ztrata sˇ patna´ separace oˇc´ı. ´ lehke, ´ dobre´ barvy, linarn´ ´ ı Polarizaˇcn´ı brýle: levne, ´ pˇri pohybu, ubytek ˇ pol. – problem svetla. ´ Infitec (spekt.): dobra´ separace oˇc´ı, kontrast, vysoka´ ˇ cena, ubytek svetla, sloˇzite´ nastaven´ı barev ´ u projektoru.


Strana 21 / 39

Auto-stereoskopicka´ obrazovka

Existuje velka´ ˇrada ˇreˇsen´ı sahaj´ıc´ıch aˇz do holografie.

Projekce



2


3


4

Projekce

5


6

Volumetric Displays

Strana 22 / 39

Projekce

Strana 23 / 39

Projekce Ne vˇzdy nezbytneˇ 3D, mnohdy nen´ı potˇreba (stejneˇ jako u AR). Stereoskopický efekt: aktivn´ı: pˇrep´ınane´ brýle pasivn´ı: polarizaˇcn´ı nebo barevne´ br.

ˇ a´ projekce. Pˇredn´ı nebo zpetn ´ ´ ´ sferick ´ ´ pl. Klasicke´ platno, deformovane´ (valcov e, e) 3 ´ nebo v´ıce platen – CAVE . ˇ s´ı FOV a FOR (pˇri v´ıce sten ˇ ach). ´ Vetˇ Volnost pohybu a lepˇs´ı imerze oproti fishtank. 3

Cave Automatic Virtual Environment

Projekce

Strana 24 / 39

Virtual Spaces

´ ı prostory umoˇznuj´ ˇ ıc´ı simulaci zejmena ´ Specialn´ ´ ych oblast´ı. rozsahl´ ˇ prochazet ´ Uˇzivatel cˇ asto muˇ modelem. ˚ ze volne“ ” ´ sferick ´ ˇ Obvykle CAVE nebp (pohybliva) a´ bunka ˇ s projekc´ı na steny nebo HMD. ˇ s´ı FOV a FOR (pˇri v´ıce sten ˇ ach). ´ Vetˇ Volnost pohybu a lepˇs´ı imerze oproti fishtank.

Projekce

CAVE

Strana 25 / 39

Projekce

Strana 26 / 39

University of California: Allosphere ´ ˇ e´ prostˇred´ı se stereo projekc´ı a prost. Sferick e´ umel zvukem, 14 samostatných projektoru, ˚ pˇrep´ınana´ technologie, ´ nen´ı pohyblive, http://www.mat.ucsb.edu/allosphere/.

Projekce

Strana 27 / 39

FogScreen http://www.fogscreen.com ´ projekce do vzduchu“, lze prochazet, ” ´ nosne´ medium je dle reklam sucha´ mlha“ (spotˇreba ” vody cca 2-8 l/h), tvoˇr´ı efekt Star Wars holo projekce“, ” teoreticky vyuˇzitelne´ i pro mobiln´ı zaˇr´ızen´ı.




2


3


4

Projekce

5


6

Volumetric Displays

Strana 28 / 39


Strana 29 / 39

Head Mounted Display ˇ Dvojce obrazovek pˇripojených k hlave, male´ LCD/OLED/LCOS (Liquid Crystal On Silicon) ´ ı retinaln´ ´ ı obr., obr. obrazovky, experimenaln´ pohybuj´ıc´ı se s pozorovatelem, ˇ ıc´ı realitu, kompletneˇ blokuj´ıc´ı výhled, doplnuj´ trackuj´ıc´ı orientaci a trackuj´ıc´ı i pozici, mnoho modelu: ˚ http://www.stereo3d.com/hmd.htm, mainstream: Oculus Rift (http://www.oculusvr.com/dk2/).


Strana 30 / 39

´ Klady a zapory HMD Klady 100% Field of Regard, ˇ malý rozmer, ´ ı s CAVE, levne´ v porovnan´ volnost pohybu – 6 DOF4 .

´ Zapory ´ ı pohybu, Je nutne´ trackovan´ latence zpusobuje dezorientaci a nevolnost ˚ ´ ´ (zpusobena zejmena nutnost´ı porovnavat data ˚ z trackeru), ˚ horˇs´ı akceptace lidmi, vysoka´ cena za vysoke´ rozliˇsen´ı a FOV. 4

Degrees Of Freedom – stupnˇ u˚ volnosti – rotace x, y, z a pohyb v x, y, z


Strana 31 / 39

See-Through HMD ˇ any ´ do realn ´ eho ´ Informace doplnov obrazu. ´ ı obrazu: Metody mixovan´ ˚ ˇ ana, ´ video – realitu sn´ıma´ kamera, data jsou doplnov opticka´ – display je polopropustný.


Strana 32 / 39

See-Through HMD

Opticka´ kompozice: ˇ s´ı, jednoduˇzsˇ ´ı – levnejˇ pˇr´ımý kontakt s realitou (i pˇri poruˇse), ´ ı prostoru. omezen´ı poruˇsen´ı vn´ıman´

Video kompozice teoreticky perfektn´ı pˇrekryt´ı, lepˇs´ı synchronizace obrazu, ˚ ´ an´ ´ ı objektu, v´ıce metod pro registraci, vklad ˚ atp.


Strana 33 / 39

F-35 Lighting II Joint Strike Fighter ˇ Sirok´ y FOV vyuˇz´ıvaj´ıc´ı projekci na pruzor pˇrilby ˚ ´ (ˇcervene´ rameˇ cky oznaˇcuj´ı projektory), integrovane´ noˇcn´ı/denn´ı ˇ ı, viden´ projekce dat ze senzoru, ˚ ´ ı velmi pˇresne´ sn´ıman´ pohybu˚ hlavy.


Strana 34 / 39

Binocular Omni-Orientation Monitor


Strana 35 / 39

Virtual Retinal Display ´ na s´ıtnici okan paprskem svetla. ˇ Obraz vykreslovan ´ mimo oko a U klasických metod je obraz produkovan ´ sledovan. Technicky podobne´ CRT. Nutnost koherentn´ıho paprsku – slaba´ laserova´ dioda. FOV teoreticky aˇz 120 . Teoreticky uˇ ´ zasne´ rozliˇsen´ı, kontrast, barvy. ´ ı pro AR. Dokonale´ pˇrekrývan´ N´ızka´ spotˇreba.


Virtual Retinal Display

Strana 36 / 39

Volumetric Displays



2


3


4

Projekce

5


6

Volumetric Displays

Strana 37 / 39

Volumetric Displays

Strana 38 / 39

Volumetric displays Doposud 2D obrazy emulovaly 3D prostor. ´ r´ı pˇr´ımo 3D obrazy sloˇzene´ z voxelu. Tento typ vytvaˇ ˚ 5 Objem je tvoˇren pohybuj´ıc´ım´ı se elementy (diody) nebo je obraz statický (napˇr. laserova´ projekce do ´ media – http://www.physorg.com/news11251.html).

5

viz Volumetric Display na Wikipedii a linky

Volumetric Displays

Strana 39 / 39

Budoucnost: Lightfield display ˇ Technologie zaloˇzena´ na rekonstrukci smeru paprsku. ˚ ´ Pˇri zaznamu je pˇred senzor vloˇzeno pole cˇ oˇcek nebo ˇ sˇ terbin. ˇ Sterbina je 1. bod, pixel dopadu je 2. – 2 body = linie. Existuj´ı konzumn´ı lightfield kamery – Lytro. S obrazovkami se experimentuje (paralela autostereoskopických).


´ ı realita 2: trackery Virtualn´ ˇ a´ uˇzivatelska´ rozhran´ı Pokrocil




2

Trackery

3

Elektromechanicke´ trackery

4

Elektromagneticke´ trackery

5

Akusticke´ trackery

6

Opticke´ trackery

7

Dalˇs´ı trackery

Strana 2 / 28


Strana 3 / 28


´ pro manipulaci s virtualn´ ´ ımi Jake´ metody jsou pouˇz´ıvany objekty (a prostˇred´ımi).

Trackery



2

Trackery

3


4


5


6

Opticke´ trackery

7

Dalˇs´ı trackery

Strana 4 / 28

Trackery

Strana 5 / 28

Trackery ˇ pozice Tracker je zaˇr´ızen´ı slouˇz´ıc´ı k detekci zmeny ´ (pˇr´ıpadneˇ i naklonu). ´ Vyuˇz´ıvano i mimo VR (GPS). Kl´ıcˇ ove´ vlastnosti: pˇresnost, poˇcet stupnˇ u˚ volnosti, ´ ı pozice, rychlost zaznamenan´ vlivy zpusobuj´ ıc´ı ruˇsen´ı (kovy, elmag.), ˚ omezen´ı pohybu (kabely, uchyty), ´ cena.

Trackery

Strana 6 / 28

Stupneˇ volnosti – Degrees Of Freedom ˇ a, ´ regulator ´ 1 DOF: jedna´ promenn zvuku, 2 DOF: 2D – tablet, myˇs, joystick, 3 DOF: napˇr. rotace okolo x, y, z – dobrý trackball, 6 DOF: rotace a translace okolo 3 os: 1 2 3 4 5 6

posun dopˇredu – dozadu, posun doprava – doleva, posun nahoru – dolu, ´ ı natoˇcen´ı doprava – doleva (roll, azimuth) horizontaln´ natoˇcen´ı nahoru – dolu (pich) ´ naklon na strany (yaw)

22 DOF: lidska´ ruka, ˇ 100 DOF: lidske´ telo.

Trackery

Stupneˇ volnosti

Strana 7 / 28

Trackery

Strana 8 / 28

´ ı pohybu Kvalita sn´ıman´ ˇ renou a skuteˇcnou pozic´ı Pˇresnost: rozd´ıl mezi nameˇ ´ ´ (ˇcasto roste se vzdalenost´ ı od poˇcatku souˇradnic). ´ ı zachytitelna´ zmena ˇ Rozliˇsen´ı: Minimaln´ pohybu. ˇ Rozkmit (jitter): zmena hodnot pokud objekt je bez pohybu. ˇ ´ ı chyba roste. Posun (drift): v prub pouˇz´ıvan´ ˚ ehu ˇ Latence: Doba za kterou tracker zachyt´ı zmenu pohybu (nad 10ms nevolnost, nad 50ms ´ nepouˇzitelne) ´ ı (registration): obecna´ schopnost pˇrekryt´ı Sl´ıcovan´ ´ eho ´ ˇ eho ´ realn a umel objektu (pˇr´ıp. pohybu).

Trackery

´ ı pohybu Technologie sn´ıman´

Elektromechanicke´ (kontaktn´ı), elektromagneticke´ (nekontaktn´ı), ultrazvukove´ (nekontaktn´ı), opticke´ (nekontaktn´ı), ´ ı, neuraln´ hybridn´ı, aj.

Strana 9 / 28




2

Trackery

3


4


5


6

Opticke´ trackery

7

Dalˇs´ı trackery

Strana 10 / 28


Strana 11 / 28

Elektromechanicke´ trackery: Gypsy


Strana 12 / 28

´ ı pohybu Technologie sn´ıman´ Konstrukce sloˇzena´ z kloubu˚ se senzory, relativneˇ jednoduche´ na pouˇzit´ı, vysoka´ odolnost na ruˇsen´ı, n´ızký rozkmit a latence, relativneˇ n´ızka´ cena, omezene´ pouˇzit´ı (velikost obleku, ramena, . . . ), ´ omezen´ı pohybu a vaha, ˇ ´ nekdy nutne´ doplnit o jine´ senzory (celkove´ naklony, posuny – gyra, aj.), ´ ı zejmena ´ dnes vyuˇz´ıvan´ nekontaktn´ıch trackeru. ˚




2

Trackery

3


4


5


6

Opticke´ trackery

7

Dalˇs´ı trackery

Strana 13 / 28


Strana 14 / 28

Elektromagneticke´ trackery ´ ´ r´ı elmag. pole, Generator vytvaˇ tracker zjiˇst’uje intenzitu elmag pole., cˇ asto pouˇz´ıvana´ metoda, ´ a, ´ verze s kabelem nebo bezdratov dosah obvykle do 5 m, pˇresnost rychle degraduje, ´ ım hodnot, latence zpusoben a´ filtrovan´ ˚ existuj´ı verze AC Magnetic (ˇcasový nebo frekvenˇcn´ı multiplex) a Pulse DC Magnetic (ˇcasový multiplex),


Strana 15 / 28

ˇ ı Rusen´ ´ ˇ velmi nachyln e´ na ruˇsen´ı kovovými pˇredmety, reproduktory, elektronikou, atp. ˇ ˇ degradace v prub cˇ asu, zmenou teploty, ˚ ehu ´ kalibrovat. pro vyˇssˇ ´ı pˇresnost nutne´ neustale


Strana 16 / 28

AC/DC AC Pˇresnost (velmi) vysoka´ ˇ ı (velmi) vysoke´ Rozlisen´ Rychlost (velmi) vysoka´ Latence (velmi) n´ızka´ ´ y-stˇredn´ı Dosah kratk´ ´ redn´ı Velikost mala-stˇ ˇ ı Rusen´ vodiˇce

DC stˇredn´ı-vyˇssˇ ´ı stˇredn´ı ´ redn´ı n´ızka-stˇ stˇredn´ı-vysoka´ ´ y kratk´ mala´ zemske´ pole, vodiˇce


Strana 17 / 28

DC: Ascension http://www.ascension-tech.com/, ´ generator pole Flock of Birds, 3D myˇs Wanda se 6 DOF (gyra + elmag trackery).




2

Trackery

3


4


5


6

Opticke´ trackery

7

Dalˇs´ı trackery

Strana 18 / 28


Strana 19 / 28

´ trackery Akusticke´ (ultrazvukove) ´ ´ e´ ultrazvukove´ signaly ´ Generator vys´ıla´ kratk zachycene´ mikrofony na ovladaˇci, n´ızka´ pˇresnost, vyˇzaduje pˇr´ımou viditelnost, ruˇs´ı sˇ um, odrazy, atp. obvyklý dosah cca 1.5 m, zaloˇzeno na triangulaci (tˇri reproduktory ´ zachycený v trojuheln´ ıku postupneˇ vyˇslou signal ´ tˇremi mikrofony v trojuheln´ ıku), ´ je moˇzný cˇ asový multiplexing pro v´ıce ovladaˇcu. ˚

Opticke´ trackery



2

Trackery

3


4


5


6

Opticke´ trackery

7

Dalˇs´ı trackery

Strana 20 / 28

Opticke´ trackery

Strana 21 / 28

Opticke´ trackery Detekce pozice bodu˚ pomoc´ı triangulace, mnohem rychlejˇs´ı, neˇz ultrazvuk, vyˇzaduje pˇr´ımou viditelnost, 6 DOF optikou, ´ ı outside-in“ (stacionarn´ ´ ı kamery sn´ımaj´ı trackovan´ ” ˇ a inside-out“ (kamera na osobeˇ body na osobe) ” sn´ıma´ okol´ı), ´ u outside-in“ se obvykle trackuje pozice urˇciteho ” markeru (b´ıla´ kuliˇcka, LED, atp., Moˇzno pouˇz´ıvat paralelneˇ v´ıce trackeru, ˚ ale mus´ı být ˇ ˇ prostoroveˇ oddeleny (nebo napˇr. barevne). ˇ s´ıch tecnologi´ı – pouˇz´ıvane´ Jedna z nejzaj´ımavejˇ ´ ska o gestech). v mainstreamu (pˇrednaˇ

Opticke´ trackery

Opticke´ trackery: triangulace

Strana 22 / 28

Opticke´ trackery

Strana 23 / 28

´ ı odrazem Opticke´ trackery: sn´ıman´

Opticke´ trackery

Strana 24 / 28

´ ı pasivn´ı Opticke´ trackery: sn´ıman´ Kamery nevys´ılaj´ı paprsky, ale pasivneˇ sn´ımaj´ı obraz markeru. ˚ Pouˇzit´ı v oblasti motion capture“ (filmy, ” animace)

ˇ ı trackery Dals´



2

Trackery

3


4


5


6

Opticke´ trackery

7

Dalˇs´ı trackery

Strana 25 / 28


Strana 26 / 28

ˇ ı metody trackovan´ ´ ı pohybu Dals´

ˇ r´ı naklon ´ Gyroskop: meˇ (rotaci). ˇ r´ı zrychlen´ı, lze pouˇz´ıt k výpoˇctu Akcelerometr: meˇ posunu. ˇ r´ı naklon ´ ´ Inklinometr: meˇ jako vodovaha (elektronicky). ˇ ˇ jiných Casto i v mobiln´ıch zaˇr´ızen´ıch a jako doplnek ´ ı metod trackovan´


´ ı nervovych Trackovan´ ´ impulsu˚ ˇ ´ Umoˇznuje ovladat zaˇr´ızen´ı pouhou myˇslenkou. Do budoucna velice slibna´ technologie. ´ ame ´ ´ Jiˇz zvlad zpracovavat ´ skupiny konkretn´ıch ˇ a´ ruka pokynu˚ – umel ´ ovladan a´ mozkem (prulom ˚ v protetice). ´ zeme z mozku z´ıskat Dokaˇ obraz cˇ tených p´ısmen v dopise.

Strana 27 / 28


Strana 28 / 28

Shrnut´ı

´ ı (hry) a inercialn´ ´ ı Mainstream: opticke´ trackovan´ ´ (gyra v PDA, komunkatorech). ´ ı prostˇred´ı: dnes vˇse, do budoucna zejmena ´ Virtualn´ optika. ´ ı aplikace: v budoucnu pravdepodobn ˇ Specialn´ eˇ 1 ´ ı rozhran´ı . neuraln´

1

´ Popularizator: prof. Warwick – http://www.kevinwarwick.com/


´ ı realita 3: I/O Virtualn´ ˇ a´ uˇzivatelska´ rozhran´ı Pokrocil




2

Haptika

3

Simulace pohybu

4

ˇ Cich

5

Chut’

6

Shrnut´ı

Strana 2 / 33


Strana 3 / 33


Jake´ existuj´ı dalˇs´ı vstupn´ı a výstupn´ı zaˇr´ızen´ı pro ´ ´ ı ruzn´ ´ ´ ovladan´ se zejmena ˚ ych AR/VR prostˇred´ı. Pod´ıvame na haptiku a motoriku.

Haptika



2

Haptika

3

Simulace pohybu

4

ˇ Cich

5

Chut’

6

Shrnut´ı

Strana 4 / 33

Haptika

Strana 5 / 33

Hapticka´ zaˇr´ızen´ı ˇ ı manipulovat s virtualn´ ´ ımi prostˇred´ımi nebo Umoˇznuj´ ´ ymi pˇredmety ˇ – vstupn´ı zaˇr´ızen´ı. vzdalen´ ˇ ı poc´ıtit Mohou i výstupn´ı (force feedback) – umoˇznuj´ ˇ tvar (strukturu) pˇredmetu. ´ ´ pouze Zasadn eˇ se zvyˇsuje imerzivita (i pˇri praci ´ steˇ pˇri zapojen´ı obou rukou. s jedn´ım objektem), zvlaˇ ´ Vstupy (udalosti): ´ ´ aktivn´ı – udalost je vyvolana poˇc´ıtaˇcem, ´ ´ pasivn´ı – udalost je vyvolana uˇzivatelem.

´ Soustˇred´ıme se zejmena na ruku (komplexn´ı mechanismus). ´ Zjednoduˇsuje zasadn eˇ obt´ızˇ nost interakce – Fitt’s law.

Haptika

Strana 6 / 33

Procˇ jsou nezbytne´ ˇ ı provad ´ et ˇ jemne´ ukony Umoˇznuj´ (operace, vjem ´ ´ povrchu organu). ˇ ı praci ´ ve virtualn´ ´ ım prostˇred´ı (snadnost Usnadnuj´ manipulace s výrobkem pˇred vytvoˇren´ım). ˇ ı praci ´ ve virtualn´ ´ ım prostˇred´ı – sniˇzuj´ı Usnadnuj´ ´ z (poloˇzen´ı pˇredmetu ˇ na stul, kognitivn´ı zateˇ ˚ m´ısto prostrˇcen´ı skrz). Nezaplavuj´ı prostˇred´ı zbyteˇcným sˇ umem“ jako ” ´ zvukova/obrazov a´ zaˇr´ızen´ı (vibruj´ıc´ı telefon pˇreda´ informaci majiteli, aniˇz by ruˇsil ostatn´ı).

Haptika

Strana 7 / 33

Hapticke´ displaye1 ˇ Podporuj´ı zpetnou vazbu. ´ Dva zakladn´ ı typy: 1 2

´ Tactile/Touch: simulovana teplota, tlak, povrch (pocit, ˇ zˇ e jsem uchopil pˇredmet). ´ pohyb rukou, Kinesthetic/Force Feedback: simulovan kloubu˚ (pocit, zˇ e jsem pˇri pohybu rukou narazil na zed’).

Ceny cca od 10 tis USD.

1

nejedna´ je o ploche´ obrazovky, pojem display pˇredskavuje obecneˇ výstupn´ı zaˇr´ızen´ı, tj. tˇreba rukavici

Haptika

Strana 8 / 33

Simulace tlaku ˇ e´ kapalinou (hydraulic) nebo Kapsy naplnen ´ nebo vzduchem (penumatic), ktere´ jsou roztahovany ´ stlaˇcovany. ´ r´ı Vibraˇcn´ı moduly nebo zvuky o n´ızke´ frekvenci vytvaˇ ´ pocit dotyku (stiskut´ı klavesy u tel. Nokia) Tyˇcinky vystupuj´ıc´ı proti prstu (velke´ pole nebo male´ skupiny pro jednotlive´ prsty) – Northrop Grumman’s Terrain Table. Motory v exoskeletu omezuj´ıc´ı pohyb prstu˚ (CyberGrasp). Simulace teploty: kapalina, omezene´ limity – ne vˇzdy prava´ teplota.

Haptika

Strana 9 / 33

Terrain Table ´ ıc´ı se z vysouvac´ıch tyˇcinek pod silikonovým Stul ˚ skladaj´ povrchem s horn´ı projekc´ı (reset 15s, rozliˇsen´ı pinu˚ 0.72”, 5.75”max. výsˇ ka pinu)

Haptika

Strana 10 / 33

Datove´ rukavice ´ ´ nebo s pevnou kostrou Muˇ materialu ˚ ze být z lehkeho (exoskeleton) Lze sn´ımat absolutn´ı pozici ruky + pohyby kloubu, ˚ ´ est´ ˇ ı, atp. (des´ıtky DOF) zap ˇ Muˇ vazbou. ˚ ze být pouze vstupn´ı nebo se zpetnou Nevýhody: cˇ asto cena, ruzn ˚ e´ velikosti rukou, nutnost kalibrace, ˇ s´ı oblek ´ an´ ´ ı a sundav ´ an´ ´ ı (nekter ˇ sloˇzitejˇ e´ typy).

Ceny za profi ˇreˇsen´ı cca 10–100 tis. USD, hern´ı varianty cca 100–500 USD.

Haptika

Strana 11 / 33

CyberGlove Systems CyberGlove II ˇ ıc´ı pˇresne´ sn´ıman´ ´ ı pohybu˚ ruky pomoc´ı Rukavice umoˇznuj´ odporových senzoru. ˚

Haptika

Strana 12 / 33

´ ı pohybu˚ v rukavici Sn´ıman´ ˇ rena zmena ˇ ˇ pˇri Opticke´ kabely: meˇ pruchodu svetla ˚ ´ ohybu kloubu, a´ a kˇrehka´ technologie (VPL ˚ nakladn DataGlove). ˇ ren zvuk emitovaný reproduktorem Ultrazvuk: meˇ v rukavici (Nintendo PowerGlove). Magnetismus: mala´ magneticka´ pole v okol´ı kloubu. ˚ ˇ r´ı se odpor v ohybových senzorech Odpor: meˇ v kloubech (mechanicke´ klouby v exoskeletonu nebo i v soft“ rukavici ). ” ´ ı: nelze plne“ ˇ srovnavat ´ Vizualn´ s pˇredchoz´ımi, ” ´ ı pozice ruky a prstu˚ pomoc´ı b´ılých kuliˇcek. trackovan´

Haptika

Strana 13 / 33

CyberGlove Systems CyberTouch ˇ ıc´ı zpetnou ˇ Rukavice umoˇznuj´ vazbu pomoc´ı vybraˇcn´ıch motorku˚ v rukavici – pocit dotyku

Haptika

Strana 14 / 33

CyberGlove Systems CyberGrasp ˇ ıc´ı zpetnou ˇ Rukavice umoˇznuj´ vazbu pomoc´ı ´ mechanickeho exoskeletu – vˇse na http://www.cyberglovesystems.com/products/.

Haptika

Strana 15 / 33

The Pinch Glove Zjednoduˇsena´ datova´ rukavice, ´ registrovano spojen´ı/rozpojen´ı vodivých ploˇsek na konc´ıch prstu˚ a v dlani, relativneˇ dostupna´ a obvykla´ (cca 2000 USD), ˇ ´ ´ ımi objekty Umoˇznuje zakladn´ ı manipulaci s virtualn´ bez sloˇzite´ kalibrace.

Haptika

Strana 16 / 33

The Pinch Glove: Hern´ı ruk. Peregrine

Haptika

Strana 17 / 33

´ Phantomy, exoskelety a dal ´ ´ Zejmena ruzn na ˚ a´ pera“ nebo jine´ nastroje ” ´ ramenu (simulatory ´ pohyblivem operac´ı), ˇ ı cˇ asto 6 DOF, umoˇznuj´ ˇ podporuj´ı zpetnou vazbu pro pocit objemu2 , omezuj´ı ´ obvykle pohyb nebo pˇr´ımo vedou – mechanicke, motor pro kaˇzdý DOF. Cca od 10 tis USD. ˇ e´ exoskelety. Existuj´ı i celotelov

2

SensAble PHANTOM series Haptic

Haptika

Strana 18 / 33

PHANTOM Omni Haptic Device ˇ Pero se zpetnou vazbou od SensAble. 6 DOF, bol´ı ruka :-)

Haptika

Strana 19 / 33

´ ´ PHANTOM 1.5 v simulatoru kravy Vynalezeno dr. Sarah Baillie z LIVE (Royal Veterinary College, Londýn) – http: //www.live.ac.uk/html/projects_haptic_01.html

Haptika

´ hologramy Pevne“ ”

Strana 20 / 33

SIGGRAPH 2009: Touchable Holography – http://www.youtube.com/watch?v=Y-P1zZAcPuw – ultrazvuk generuje haptický vjem

Simulace pohybu



2

Haptika

3

Simulace pohybu

4

ˇ Cich

5

Chut’

6

Shrnut´ı

Strana 21 / 33

Simulace pohybu

Strana 22 / 33

Simulace pohybu – Vestibular Displays Fyzicky pohybuj´ı uˇzivatelem, ´ zlepˇsuj´ı imerzivitu, omezuj´ı nevolnost ze simulatoru, ˇ se pohybuje v souladu s obrazem. atp – telo ´ zejmena ´ pouˇz´ıvany ve specializovaných ´ simulatorech, pˇret´ızˇ en´ı do 1G (Tactile motion seats, http://www.crowsontech.com/). ´ ı elektrických Galvanic Vestibular Stimulation – vys´ılan´ impulsu˚ pˇr´ımo do nervove´ soustavy. Moˇzne´ vedlejˇs´ı efekty.

Simulace pohybu

Strana 23 / 33

Pohyblive´ platformy Ploˇsne´ nebo kulove´ platformy pro pohyb (Omni-Directional Treadmill – http://www.youtube.com/watch?v=BQw1tsgrJOs, CirculaFloor – http://www.youtube.com/watch?v=EvkubXHilk0), pˇr´ıpadneˇ j´ızda na kole.

Simulace pohybu

Strana 24 / 33

VirtuSphere ˇ a´ kulova´ platforma. Pohybliva´ vˇsesmerov http://www.virtusphere.com/ http://www.youtube.com/watch?v=qTnnJR-hS7k.

ˇ Cich

Strana 25 / 33



2

Haptika

3

Simulace pohybu

4

ˇ Cich

5

Chut’

6

Shrnut´ı

ˇ Cich

Strana 26 / 33

ˇ Cichov e´ vystupn´ ´ ı zaˇr´ızen´ı ˇ Vun nosu – ˚ eˇ je vjem zachytitelný cˇ ichovou bunkou ´ zachytitelne´ jsou pouze molekuly o velmi malem rozmez´ı vah. ´ ´ C, H, O, N, P, Latek, ktere´ maj´ı vuni ˚ je relativneˇ malo: ˇ S, Cl, Br, I – pouze posledn´ı tˇri maj´ı vuni ˚ samostatne. ´ ˇ neexistuje vˇsak ekvivalent Sluˇcujeme bazov e´ vun ˚ e, ´ ´ an´ ´ ı. precizn´ıho trichromatickeho sklad ˇ ˇ muˇ Clovek ˚ re rozliˇsit tis´ıce aˇz desetitis´ıce vun´ ˚ ı. ˇ do 7 zakladn´ ´ Tyto vun ıch skupin ˚ eˇ lze rozdelit ´ ˇ ´ (ˇcasteˇcne srovnatelne s RGB). ´ ı: latky ´ Odpaˇrovan´ zniˇcitelne´ teplem, nelze zahˇr´ıvat, ´ ı kapiˇcek. rozptylovan´ ´ ı: m´ıchan´ ´ ı bazov´ ´ M´ıchan´ ych tekutin nebo po odpaˇren´ı.

ˇ Cich

Strana 27 / 33

Scent Dome ˇ Emitor vun´ cartridge (48 ˚ ı (369 USD) s menitelnou USD za kus) – http://www.trisenx.com/. ´ Zaklad 20 esenc´ı (oleje,. . . ), stovky v katalogu. ´ ´ Obdobný princip jako pˇri tvorbeˇ klasickeho parfemu.

ˇ Cich

Strana 28 / 33

´ Problemy Prozat´ım sp´ısˇ e experimety, omezený rozsah vun´ ˚ ı, ˇ ejˇ ˇ s´ı pˇrenosne´ jen omezeneˇ (obvykle rozmern zaˇr´ızen´ı), ´ ˇ problemy se zmenou vun ˚ eˇ (emitovat male´ mnoˇzstv´ı, ventilace), ´ problem ´ zjistit, ktere´ bazov ´ je stale e´ vun ˚ eˇ tvoˇr´ı vjemy, ´ eˇ neˇz sto, budou univerzaln´ ´ ı pokud jich bude men ´ a. ´ cˇ ichova´ rozhran´ı realn

Chut’

Strana 29 / 33



2

Haptika

3

Simulace pohybu

4

ˇ Cich

5

Chut’

6

Shrnut´ı

Chut’

Strana 30 / 33

Chut’ove´ vystupn´ ´ ı zaˇr´ızen´ı ˇ ek ˇ rozliˇsuje nekolik ˇ ´ Clov zakladn´ ıch chut´ı: 1 2 3 4 5

sladke´ – chut’ cukru, ´ ı – zabranuje ˇ ˇ napˇr. kofein v hoˇrke´ – varovan´ otrave, ´ e, ˇ kav ´ kysele´ – produkuj´ı zejmena kyseliny, napˇr. ocet, slane´ – chut’ soli (NaCl) umami“ – japonský výraz pro chutný“, typickou ” ” ´ substanc´ı produkuj´ıc´ı tento vjem jsou glutamaty.

ˇ chuti a hmatu. Celkový vjem chuti je kompozice vun ˚ e, Emulace chuti (projekt Food Simulator ): chut’ – male´ mnoˇzstv´ı vody vstˇr´ıknuto do pusy, vun ˚ eˇ odpaˇrovaˇcem, zvuk kousnut´ı mikrofonem, textura ´ nerealizovana. ˇ ´ Konec z gumy (z hygienických duvod u˚ meniteln e). ˚

Chut’

Strana 31 / 33

Food Simulator ´ ı – posledn´ı hranice VR“. Zat´ım velmi experimentaln´ ”

Shrnut´ı



2

Haptika

3

Simulace pohybu

4

ˇ Cich

5

Chut’

6

Shrnut´ı

Strana 32 / 33

Shrnut´ı

Strana 33 / 33

Shrnut´ı Simulace pohybu a objemu je nezbytna´ pro ˇradu imerzivn´ıch aplikac´ı. ´ ˇ Je finanˇcneˇ velmi nakladn a´ (relativne). Experimentuje se s novými metodami zaloˇzenými na ´ vjemu (fyzicke´ nekontaktn´ım hmatovem hologramy/projekce). ´ se sluchem a Pominuli jsme zaˇr´ızen´ı pro praci ´ ım ˇreˇci (doporuˇcuji pˇrednaˇ ´ sky doc. zpracovan´ ˇ ´ Cernock eho z FIT VUT v Brneˇ – http: //www.fit.vutbr.cz/study/courses/ZRE/public/, ´ http: jako prerekvizita je vhodne´ znat //www.fit.vutbr.cz/study/courses/ISS/public/).


Augmented Reality ˇ a´ uˇzivatelska´ rozhran´ı Pokrocil




2

Druhy AR

3

HMD

4

Projektory

5

Obrazovky

6

Toolkity

7

Shrnut´ı

Strana 2 / 34


Strana 3 / 34


Struˇcne´ shrnut´ı aplikac´ı Augmented Reality – ˇ e/pos´ ´ doplnen ılene´ reality.

Druhy AR



2

Druhy AR

3

HMD

4

Projektory

5

Obrazovky

6

Toolkity

7

Shrnut´ı

Strana 4 / 34

Druhy AR

Strana 5 / 34

Druhy AR 1

Zaloˇzena´ na Head Mounted Displays (HMD) opticka´ kopozice obrazu, video kompozice obrazu.

2

Zaloˇzena´ na projektorech ´ e´ plochy, projekce na realn ´ ı projektory. mobiln´ı nebo stacionarn´

3

Zaloˇzena´ na monitorech video kompozice na display telefonu, PDA, TV, aj. ˇ an´ ´ ı informac´ı do sportovn´ıch pˇrenosu, doplnov ˚ aj.

4

ˇ Je vˇsak moˇzne´ doplnovat i jine´ informace – napˇr. ´ ´ ´ obrovska´ výhoda pro slepe/slabozrak zvukove: e.

HMD

Strana 6 / 34



2

Druhy AR

3

HMD

4

Projektory

5

Obrazovky

6

Toolkity

7

Shrnut´ı

HMD

Strana 7 / 34

Opticka´ vs. video kompozice ´ ska o zobrazovan´ ´ ı. Viz pˇrednaˇ ´ ı objektu˚ je pˇresnejˇ ˇ s´ı a snaˇzsˇ ´ı u Detekce a sl´ıcovan´ ´ rske´ aplikace). video kompozice (lekaˇ ´ Rozliˇsen´ı video kompozice je dano rozliˇsen´ım displaye a kamery. ˇ s´ı, bez spoˇzden´ ˇ ı, v plnem ´ Opticka´ je bezpeˇcnejˇ rozliˇsen´ı. ´ s nastaven´ım jasu a vysokým dynamickým Problem ´ ych scen ´ u obou metod. rozsahem realn´ ´ se zaostˇren´ım oˇc´ı/kamery u videa (moˇzna´ Problem nutne´ sn´ımat oko).

HMD

Strana 8 / 34

´ ze Komplexn´ı udrˇ ´ zba a montaˇ

Opravy aut, letadel, vesm´ırne´ stanice, teleskopu, aj. http://www.youtube.com/watch?v=P9KPJlA5yds ˇ Casto PDA (Android) s pˇripojenými brýlemi – http: //www.popsci.com/technology/article/2009-10/ augmented-reality-goggles-make-marine-mechanics-twi

HMD

Strana 9 / 34

ˇ ı aplikace Dals´ ´ Dnes: armada – HUD v letadlech, poln´ı“ AR brýle. ” ˇ e´ Google Glass Rozv´ıj´ı se: mainstream – zm´ınen

HMD

Strana 10 / 34

´ pˇr´ıkladu˚ Par Augmented Reality Board Game – http://www.youtube.com/watch?v=xGsfDDxhFN0 Gizmondo Augmented Reality Game – http://www.youtube.com/watch?v=Lfp8id6bpDU Augmented Reality Encyclopedia – http://www.youtube.com/watch?v=oHkUOpYNhoM Augmented Reality GIS Maps – http://www.youtube.com/watch?v=yFwzFby2eNo

Projektory



2

Druhy AR

3

HMD

4

Projektory

5

Obrazovky

6

Toolkity

7

Shrnut´ı

Strana 11 / 34

Projektory

Strana 12 / 34

AR zaloˇzena´ na projektorech ´ eho ´ ˇ Projekce informac´ı na objekty realn sveta. ´ ıch projektoru˚ na modely nebo Projekce ze stacionarn´ pomoc´ı pˇrenosných projektoru. ˚ Khiha Spatial Augmented Reality Merging Real and Virtual Worlds zdarma: http://140.78.90.140/medien/ar/SpatialAR/ Aplikace: muzea/ˇskoly/showroomy – zlepˇsen´ı statických ” modelu“, ˚ ˇ ı, zlepˇsen´ı zobrazen´ı, medic´ına – rentgenove´ viden´ adaptivn´ı projektory – kalibruj´ı se podle ´ ´ zobrazovaneho signalu, ˇ ım, aj. auta – HUD s informacemi, noˇcn´ım viden´

Projektory

Strana 13 / 34

Projekce na zakˇriveny´ povrch Nutne´ geometricke´ a barevne´ korekce podle podkladu. Kamera vyhodnocuje zobrazen´ı a upravuje výstup.

Projektory

Strana 14 / 34

´ Zakˇriveny´ a barevny´ povrch: zaclona Pˇr´ıklad podkladu a projekce bez“ a s“ korekc´ı ” ”

Projektory

Strana 15 / 34

Projekce na zakˇriveny´ povrch: jeskyneˇ

Projektory

Strana 16 / 34

Pˇrekryt´ı v´ıce projekc´ı Projekce se pˇrekrývaj´ı, bezeˇsvost zajiˇst’uj´ı korekce ´ ´ pro velke´ projekce. Bez pomoc´ı kamer. Zasadn´ ı problem kamery nutne´ sloˇzite´ korekce.

Projektory

Architektonicka´ vizualizace ˇ Model bytu prom´ıtaný na steny.

Strana 17 / 34

Projektory

Strana 18 / 34

VeinViewer ˇ a vyhledav ´ a´ zˇ ´ıly. Kamera bl´ızka´ IR sn´ıma´ povrch tela Projektor zobraz´ı jejich pozici.

Projektory

BMW HeadUp Display ´ ı informac´ı o j´ızdeˇ na skle. Zobrazovan´

Strana 19 / 34

Projektory

Strana 20 / 34

Procˇ projektory 1

2

3 4

ˇ s´ı, neˇz Moˇzno zobrazovat obrazy mnohem vetˇ zdrojove´ zaˇr´ızen´ı. ´ e´ objekty a pˇrizpusobovat Lze snadno pˇrekrývat realn ˚ ˇ a´ m´ısta). se jim (aˇz na svetl Lze jednoduˇse pˇrekrývat obrazy z ruzn´ ˚ ych projektoru. ˚ Trend: pˇrenosne´ projektory m´ısto LCD na pˇr´ıstroj´ıch. ´ ı obsahu komunikatoru/notebooku ´ Prom´ıtan´ na plochy nebo dokonce do vzduchu – projekt FogScreen, ´ ı obsahu na beden na jejich povrch – prom´ıtan´ ´ s jejich idenfikac´ı (makery? RFID?). problem

Obrazovky



2

Druhy AR

3

HMD

4

Projektory

5

Obrazovky

6

Toolkity

7

Shrnut´ı

Strana 21 / 34

Obrazovky

Strana 22 / 34

AR prostˇrednictv´ım obrazovky ˇ s´ı varianta – staˇc´ı obrazovka a kamera. Nejdostupnejˇ Muˇ ˚ ze se jednat o PC, velmi cˇ asto sp´ısˇ o ´ PDA/komunikator. Nen´ı tak imerzivn´ı, ale postihuje obrovskou platformu uˇzivatelu˚ (prakticky kaˇzdý majitel PDA). ´ e´ limity ve výdrˇzi bateri´ı, výpoˇcetn´ım výkonu Realn ´ PDA, obrazovce. . . (technicky nen´ı problem). ´ ci: Google (Maps, Goggles) a Apple Vstupuj´ı velc´ı hraˇ (iPhone).

Obrazovky

Strana 23 / 34

AR + LBS = ♥ Moˇznost pouˇzit´ı GPS, resp. kompasu – Location Based Services (LBS): Nearest Tube – http://www.youtube.com/watch?v=U2uH-jrsSxs ˇ AR je pˇrirozeným doplnkem LBS. ˇ ´ Jiˇz dnes LBS (nevedomky) vyuˇz´ıvame – Google Maps + najdi restauraci. ´ an´ ´ ı pozice. GPS + kompas nahrazuj´ı vklad ´ ´ an´ ´ ı, resp. AR nav´ıc lepe zobraz´ı výsledky vyhledav ´ an´ ´ ı – Co je to za most?, Je v hotelu zpˇresn´ı vyhledav volno?, atp. – Wikitude AR: http://www.youtube.com/watch?v=8EA8xlicmT8, http://www.youtube.com/watch?v=PdmSVCDmJGA. Layar : http://www.youtube.com/watch?v=b64_16K2e08&.

Obrazovky

Klasicka´ LBS: Google Maps ´ an´ ´ ı objektu˚ v souvislosti s polohou Vyhledav

Strana 24 / 34

Obrazovky

Strana 25 / 34

Google Goggles ´ an´ ´ ı pomoc´ı kamery – prvn´ı krok k Automaticke´ vyhledav AR aplikaci: http://www.google.com/mobile/goggles/

Obrazovky

Strana 26 / 34

Google Goggles ´ an´ ´ ı podle polohy a obrazu – Druhý krok: vyhledav http://www.google.com/mobile/goggles/#place 1

1

ˇ si malých ikonek vyskakuj´ıc´ıch na videu ve spodn´ı cˇ asti ´ vˇsimnete obrazovky

Obrazovky

Strana 27 / 34

´ ı Metody pozicovan´ GPS + kompas (posun GPS souˇradnic nebo elektronický), triangulace pomoc´ı GSM, Wi-Fi hot-spotu, ˚ opticky pomoc´ı kamery, ´ ´ problem: jak pozicovat v uzavˇrených prostorach. akcelerometry – reaguj´ı na pohyb, ale akumuluj´ı ´ chybu a pˇresnost muˇ ˚ ze být nedostateˇcna, bluetooth (LE), RFID, ´ daný prostor pˇredem markery/fotografie – nutne´ znat nebo jej otagovat.

Obrazovky

Strana 28 / 34

Architektura (AR) LBS aplikac´ı User-side: klasicka´ off-line“ aplikace, ktera´ obsahuje ” veˇskera´ data na straneˇ uˇzivatele. Lze pouˇz´ıvat bez pˇripojen´ı k Internetu, ´ mus´ı cˇ asto ukladat velke´ mnoˇzstv´ı dat, ´ eˇ ˇ z na výpoˇcetn´ı výkon zaˇr. (analýza sn´ımku), zat ˚ ´ moˇzne´ problemy s aktualizac´ı dat (aplikace).

Server-side: Uˇzivatel ma´ pouze tenkeho klienta (napˇr. webový browser) a odes´ıla´ data serveru, který je analyzuje. Lze pouˇz´ıvat pouze po pˇripojen´ı k Internetu (rychlost). Zaˇr´ızen´ı pouze komunikuje, analýzu ˇreˇs´ı server ´ ı výpoˇcetn´ı naroky). ´ (minimaln´ Nen´ı nutne´ aktualizovat data na straneˇ klienta. ´ ı model. Dnes velmi popularn´

Obrazovky

Strana 29 / 34

´ Problemy (AR) LBS

´ ı v neznam´ ´ ych uzavˇrených prostorach ´ – Pozicovan´ ´ ı pouze pomoc´ı GPS, trinagulace dnes pozicovan´ ´ ych GSM/Wi-Fi, kompasem, kamerou pomoc´ı znam´ m´ıst. ´ ren´ı user-friendly aplikac´ı (dnes ˇrada zbyteˇcneˇ Vytvaˇ futuristických“). ” ´ s´ıt’ova´ konektivita – Dostateˇcneˇ rychla´ (a levna) ´ obvykle nutnost zpracovavat velke´ mnoˇzstv´ı dat.

Toolkity



2

Druhy AR

3

HMD

4

Projektory

5

Obrazovky

6

Toolkity

7

Shrnut´ı

Strana 30 / 34

Toolkity

Strana 31 / 34

Toolkity pro AR ARToolKit: ˇ s´ı, zˇrejmeˇ nejpropracovanejˇ ´ a´ vzory/markery, rozpoznav http://www.hitl.washington.edu/artoolkit/ ˇrada aplikac´ı – http://www.arsights.com/ ´ vývoj GNU verze zastaven, volne´ zdrojove´ kody.

OpenCV: ˇ ı, obecný toolkit pro poˇc´ıtaˇcove´ viden´ ˇ aj. pouˇz´ıvaný v robotice, výrobe, http://opencv.willowgarage.com/wiki/ nen´ı tak optimalizovaný pro AR aplikace.

Existuje ˇrada dalˇs´ıch projektu˚ – http://www. libspark.org/wiki/saqoosha/FLARToolKit/en.

Shrnut´ı



2

Druhy AR

3

HMD

4

Projektory

5

Obrazovky

6

Toolkity

7

Shrnut´ı

Strana 32 / 34

Shrnut´ı

Strana 33 / 34

Shrnut´ı

Mainstream: ´ s LBS. Jasna´ spoluprace Zat´ım sp´ısˇ e experimenty, ale rozb´ıha´ se. ´ zneˇ prostˇrednictv´ım PDA. Pˇrevaˇ

Profi“ aplikace: ”

Bylo by potˇreba HW s niˇzsˇ ´ı cenou a vyˇssˇ ´ı kvalitou. Velmi se rozv´ıj´ı oblast inteligentn´ıch projektoru“ ˚ (viz ” Raskar Ramesh)

Shrnut´ı

Strana 34 / 34

D´ıky za pozornost a hodneˇ zdaru u zkouˇsek

28. března 2014, Brno Připravil: David Procházka

Recommend Documents