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´yvat se HCI
2
´ ´ Jak dosahnout vhodneho designu
3
Anal´yza uˇzivatele
4
´ ı uˇzivatelu˚ Vzory chovan´
5
Konec
Strana 2 / 35
Procˇ je nutne´ zabyvat ´ se HCI
Strana 3 / 35
ˇ O cem bude tento kurz? PUR spada´ do kategorie kurzu˚ oznaˇcovan´ych 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´
Procˇ je nutne´ zabyvat ´ se HCI
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´ı.
Procˇ je nutne´ zabyvat ´ se HCI
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´ym provad 2 ˇ s´ı, lze zlepˇsit. zpusobem . Nelze b´yt jen efektivnejˇ ˚ 1 2
ˇ ´ a funkˇcnost. Pozor nezameˇ novat krasu viz Wii kdyˇz Nintendo zaˇcalo propadat za Sony a Microsoftem
´ ´ Jak dosahnout vhodneho designu
ˇ Obsah pˇredna´ sky 1
Proˇc je nutne´ zab´yvat se HCI
2
´ ´ Jak dosahnout vhodneho designu
3
Anal´yza uˇzivatele
4
´ ı uˇzivatelu˚ Vzory chovan´
5
Konec
Strana 6 / 35
´ ´ Jak dosahnout vhodneho designu
Strana 7 / 35
´ ´ Jak dosahneme vhodneho designu?
Teˇzko. Ale muˇ ˚ zeme zaˇc´ıt tak, zˇ e se zaˇcneme zab´yvat 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
´ ´ Jak dosahnout vhodneho designu
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´ymi 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
´ ´ Jak dosahnout vhodneho designu
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?
´ ´ Jak dosahnout vhodneho designu
Strana 10 / 35
Mus´ıme tedy zjistit co uˇzivatel chce ˇ kter´y pouˇz´ıva´ dobrovolneˇ nejak´ ˇ y nastroj ´ Kaˇzd´y 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.
´ ´ Jak dosahnout vhodneho designu
Strana 11 / 35
ˇ Obcas je to velmi sloˇzite´ ˇ Mejme obchod ze snowboardov´ym 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
´ ´ Jak dosahnout vhodneho designu
ˇ ˇ je jedinecn ˇ y´ Kaˇzdy´ clov ek
Rozhodneˇ nen´ı jako Vy!
Strana 12 / 35
Analyza ´ uˇzivatele
ˇ Obsah pˇredna´ sky 1
Proˇc je nutne´ zab´yvat se HCI
2
´ ´ Jak dosahnout vhodneho designu
3
Anal´yza uˇzivatele
4
´ ı uˇzivatelu˚ Vzory chovan´
5
Konec
Strana 13 / 35
Analyza ´ uˇzivatele
Strana 14 / 35
´ ı, Abychom pochopili jeho chovan´ ˇ ˇ ı budeme muset zjistit nekolik vec´ 1 2 3 4 5 6
´ Za jak´ym uˇ ´ celem uˇzivatel zaˇr´ızen´ı pouˇz´ıva. ˇ ı c´ıle uˇcinit. Jake´ ukony mus´ı ke splnen´ ´ Jazyk a slova, kter´ymi 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
Analyza ´ uˇzivatele
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´y navrh je kl´ıcˇ ov´y. ˇ dat. Tvorba modelu˚ Persony: Nejedna´ se o sber ˇ ı Vam ´ uvedomit ˇ ruzn´ si, co by ˚ ych osob. Umoˇznuj´ ˇ udelala tato osoba X.
Analyza ´ uˇzivatele
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´
´ ı uˇzivatelu˚ Vzory chovan´
ˇ Obsah pˇredna´ sky 1
Proˇc je nutne´ zab´yvat se HCI
2
´ ´ Jak dosahnout vhodneho designu
3
Anal´yza uˇzivatele
4
´ ı uˇzivatelu˚ Vzory chovan´
5
Konec
Strana 17 / 35
´ ı uˇzivatelu˚ Vzory chovan´
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´ych 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
´ ı uˇzivatelu˚ Vzory chovan´
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´yt kriticke, ´ hudby pˇri kliknut´ı na webove´ strance). ˇ je znervoz ´ nuj´ ˇ ı a odrazuj´ı od zkouˇsen´ı Tyto veci nov´ych funkc´ı. Pˇr´ıklady: ´ ´ ˇ Fotoeditor s funkc´ı v´ıcenasobn eho Zpet ´ ´ Uˇzivatel webov´ych 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
´ ı uˇzivatelu˚ Vzory chovan´
Strana 20 / 35
Instant Gratification ˇ ted’, ne pozdeji. ˇ Chci to videt ˇ okamˇziteˇ videt ˇ v´ysledek sv´ych 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´ymi kroky, instrukcemi, atp. (ne: registrace pro ˇ ı, lze ukazat ´ ´ cne´ v´ysledky) v´ypoˇcet pojiˇsten´ cˇ asteˇ
´ ı uˇzivatelu˚ Vzory chovan´
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´ysledku. potencialn ´ nejlepˇs´ı, staˇc´ı dostateˇcna´ 9 Nepotˇrebuje nalezt ´ Toto cˇ asto vede ke vzniku sˇ patn´ych navyk u. ˚ ˇ by Pokud rozhran´ı nab´ız´ı v´ıce obdobn´ych func´ı, mela cena za volbu sˇ patne´ b´yt n´ızka´ (viz Safe Exploration) ˇ Nekolik tipu: ˚ ´ e´ a jasne´ popisky (ˇspatn´y 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?
´ ı uˇzivatelu˚ Vzory chovan´
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´yt uzavˇren, mela ˇ by mu b´yt 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´yt doveden k c´ıli.
´ ı uˇzivatelu˚ Vzory chovan´
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´ychoz´ı 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,
´ ı uˇzivatelu˚ Vzory chovan´
Strana 24 / 35
Incremental Construction ˇ Nechte meˇ to zmenit. Jo, to je lepˇs´ı. ´ Tento bod se t´yka´ zejmena ruzn´ ˚ ych v´yvojov´ych a konstrukˇcn´ıch prostˇred´ı. ˇ Kaˇzde´ d´ılo se tvoˇr´ı postupne. ˇ b´ych schopen tvoˇrit projekt po Uˇzivatel/tvurce by mel ˚ ´ mal´ych 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.
´ ı uˇzivatelu˚ Vzory chovan´
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´yt 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
´ ı uˇzivatelu˚ Vzory chovan´
Strana 26 / 35
Spatial Memory ´ zˇ e to tlaˇc´ıtko tam jeˇsteˇ pˇred chvilkou bylo! Pˇr´ısaham, ˇ ’ je velmi siln´y pomocn´ık pˇri Prostorova´ pamet orientaci (viz organizovan´y 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,
´ ı uˇzivatelu˚ Vzory chovan´
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´yt 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´yzva: 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´ych automaticke´ zav´ıran´ 16
´ ı uˇzivatelu˚ Vzory chovan´
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´ystraˇ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´ym pozorovan´ ´ ı zde nepomah ´ a´ (nevedom ˇ ´ ı). Dotazovan´ e´ opakovan´
´ ı uˇzivatelu˚ Vzory chovan´
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´yber ˇ ı focus, TAB men´ combo boxy, atp. podporuj´ı sˇ ipky, v´ychoz´ı (default) tlaˇc´ıtka v dialoz´ıch a Enter, ...
´ ı uˇzivatelu˚ Vzory chovan´
Strana 30 / 35
Other People’s Advice Co si o tom jin´ı mysl´ı ˇ ´ a´ uˇzivatelum Rada webov´ych aplikac´ı dav ˚ prostor ´ rit sve´ nazory, ´ ´ ˇ vyjadˇ napady, dokonce ovlivnovat obsah, cenu komodit, atp. Nelze aplikovat vˇzdy, ale . . . 19 20 ´ Zkuste b´yt 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
´ ı uˇzivatelu˚ Vzory chovan´
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´yt 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´y 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
´ ı uˇzivatelu˚ Vzory chovan´
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´y ´ 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´y Mendeley pro spravu Google Docs 25
Konec
ˇ Obsah pˇredna´ sky 1
Proˇc je nutne´ zab´yvat se HCI
2
´ ´ Jak dosahnout vhodneho designu
3
Anal´yza uˇzivatele
4
´ ı uˇzivatelu˚ Vzory chovan´
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´y 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´ym uˇ (tedy proˇc to pouˇz´ıva, ´ celem). ´ Pˇr´ısˇ t´ı tema: Sestavujeme aplikaci
Konec
Ze zˇ ivota: XKCD
Strana 35 / 35
28. bˇrezna 2014, Brno ´ Pˇripravil: David Prochazka
Sestaven´ı aplikace ˇ a´ uˇzivatelska´ rozhran´ı Pokrocil
´ Jak postupovat pˇri navrhu aplikace
ˇ Obsah pˇredna´ sky 1
´ Jak postupovat pˇri navrhu aplikace
2
´ sky Kritika minule´ pˇrednaˇ
3
´ Jak postupovat pˇri navrhu aplikace
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
´ Jak postupovat pˇri navrhu aplikace
Strana 3 / 53
ˇ ˇ ı pˇredna´ ska ˇ O cem bude dnesn´
´ aˇ ´ re, kdy by mela ˇ b´yt 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
ˇ Obsah pˇredna´ sky 1
´ Jak postupovat pˇri navrhu aplikace
2
´ sky Kritika minule´ pˇrednaˇ
3
´ Jak postupovat pˇri navrhu aplikace
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 4 / 53
ˇ Kritika minule´ pˇredna´ sky
Strana 5 / 53
Ruzn ˚ e´ pˇr´ıstupy k designu rozhran´ı ˇ y pˇr´ıstup ma´ sve´ uplatnen´ ˇ ı, resp. lze je Kaˇzd´y 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´yzu System centered design – zameˇ ´ funkcionality systemu. ´ pˇrevaˇ ´ zneˇ uvahou Genius design – design je dan ´ ´ ´ re. navrh aˇ
ˇ Kritika minule´ pˇredna´ sky
Strana 6 / 53
User centered design ´ obˇcas zklame. Designer ´ je vlastneˇ UCD nas pˇrekladatel uˇzivatelov´ych 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´y. ´ 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).
ˇ Kritika minule´ pˇredna´ sky
Strana 7 / 53
Activity centered design
´ ı aktivit, ktere´ mus´ı b´yt 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ˇ
ˇ Kritika minule´ pˇredna´ sky
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ˇ
ˇ Kritika minule´ pˇredna´ sky
System centered design
Strana 9 / 53
ˇ Kritika minule´ pˇredna´ sky
Strana 10 / 53
Genius design ´ ´ re. Kl´ıcˇ em jsou zkuˇsenosti navrh aˇ ˇ Uˇzivatel je z v´yvoje prakticky vypuˇsten. ˇ Pouˇzit pouze pro zpetnou validaci. ´ Pouˇz´ıvano mj. take´ v okamˇziku, kdy nelze testovat (obchodn´ı tajemstv´ı). ´ mus´ı b´yt zkuˇsen´y! 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
´ Jak postupovat pˇri navrhu aplikace
ˇ Obsah pˇredna´ sky 1
´ Jak postupovat pˇri navrhu aplikace
2
´ sky Kritika minule´ pˇrednaˇ
3
´ Jak postupovat pˇri navrhu aplikace
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 11 / 53
´ Jak postupovat pˇri navrhu aplikace
Strana 12 / 53
´ Prvn´ı kroky navrhu aplikace ´ ´ sky byste si meli ˇ b´yt Na zaklad eˇ pˇredchoz´ı pˇrednaˇ ˇ ´ r´ıme sestavovan´ ´ ım vedomi faktu, zˇ e aplikaci nevytvaˇ ˇ prvku˚ a vym´ysˇ len´ım, jak se doplnit o nejakou funkcionalitu. ´ ˇ b´yt jasne, ´ Jiˇz pˇred zaˇcatkem implementace by melo jak´y 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
ˇ Obsah pˇredna´ sky 1
´ Jak postupovat pˇri navrhu aplikace
2
´ sky Kritika minule´ pˇrednaˇ
3
´ Jak postupovat pˇri navrhu aplikace
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 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´ysˇ 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´ymi 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
ˇ Obsah pˇredna´ sky 1
´ Jak postupovat pˇri navrhu aplikace
2
´ sky Kritika minule´ pˇrednaˇ
3
´ Jak postupovat pˇri navrhu aplikace
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 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´yt 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´y model, na kterem ´ stranky. Uˇzivatele´ jsou na tento koncept zvykl´ı. Vhodne´ take´ pro aplikace s mal´ym 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´yt Uˇzivatel by mel opticky veden aplikac´ı. ´ ˇradou metod: centraln´ ´ ı pracovn´ı plocha Realizovano ´ ı styl (stranky ´ (Word, Google), jednotn´y vizualn´ se ´ ˇ ı do jasneˇ zakladn´ ım menu, iPod iTunes), delen´ popsan´ych sekc´ı, atp.
Vzory pro implementaci
ˇ Obsah pˇredna´ sky 1
´ Jak postupovat pˇri navrhu aplikace
2
´ sky Kritika minule´ pˇrednaˇ
3
´ Jak postupovat pˇri navrhu aplikace
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 26 / 53
Vzory pro implementaci
Strana 27 / 53
ˇ nekolik ˇ Opet vzoru˚ ´ ´ obecnou strukturu aplikace. Mame popsanu ´ Nyn´ı se pod´ıvame na implementaci jednotliv´ych 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´
ˇ Obsah pˇredna´ sky 1
´ Jak postupovat pˇri navrhu aplikace
2
´ sky Kritika minule´ pˇrednaˇ
3
´ Jak postupovat pˇri navrhu aplikace
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 28 / 53
ˇ ıc´ı strukturu aplikace Vzory rˇes´
Two-Panel Selector
Strana 29 / 53
ˇ ıc´ı strukturu aplikace Vzory rˇes´
Strana 30 / 53
Two-Panel Selector Podstata: Dva panely, element vybran´y 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´ych 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.
ˇ ıc´ı strukturu aplikace Vzory rˇes´
Strana 31 / 53
Two-Panel Selector – implementace ´ ˇ e“ ˇ je vhodne´ um´ıstit v´yberov ˇ e´ okno V zapadn´ ım svet ” ˇ jak´ym 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´y element (napˇr. inverze pozad´ı a Zv´yraznete 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
ˇ ıc´ı strukturu aplikace Vzory rˇes´
Canvas Plus Palette
Strana 32 / 53
ˇ ıc´ı strukturu aplikace Vzory rˇes´
Strana 33 / 53
Canvas Plus Palette
´ ´ Klasicke´ schema pro kreativn´ı nastroje (Photoshop, GIMP). Pˇrejato z UNIXov´ych aplikac´ı ´ Dnes cˇ asto nahrazovano oknem s vnoˇren´ymi podokny“. ” ˇ je doporuˇcovano ´ Opet paletu um´ıstit nahoru nebo ´ zem.). vlevo (v zap.
ˇ ıc´ı strukturu aplikace Vzory rˇes´
One-Window Drilldown
Strana 34 / 53
ˇ ıc´ı strukturu aplikace Vzory rˇes´
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´y 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
ˇ ıc´ı strukturu aplikace Vzory rˇes´
Alternative views
Strana 36 / 53
ˇ ıc´ı strukturu aplikace Vzory rˇes´
Alternative views
Strana 37 / 53
ˇ ıc´ı strukturu aplikace Vzory rˇes´
Strana 38 / 53
Alternative views ˇ Umoˇznuje uˇzivateli zobrazit obsah zcela odliˇsnou formou – jin´y 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´
ˇ Obsah pˇredna´ sky 1
´ Jak postupovat pˇri navrhu aplikace
2
´ sky Kritika minule´ pˇrednaˇ
3
´ Jak postupovat pˇri navrhu aplikace
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 39 / 53
ˇ ˇ ı obsahu aplikace Vzory pro clen en´
Strana 40 / 53
Wizard
´ ˇ ı obsahuje je Zakladn´ ı myˇslenkou vˇsech vzoru˚ na cˇ lenen´ omezit mnoˇzstv´ı prvku, ˚ se kter´ymi mus´ı uˇzivatel pracovat.
ˇ ˇ ı obsahu aplikace Vzory pro clen en´
Strana 41 / 53
Wizard
´ ı volba pokud je potˇreba provest ´ uˇzivatele Idealn´ procesem na kter´y nen´ı zvykl´y6 . ´ ´ 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´ych Problemem muˇ ˚ ze b´yt rozdelen´ bloku. ˚
6
´ napˇr. nakup letenek nebo instalace programu
ˇ ˇ ı obsahu aplikace Vzory pro clen en´
Strana 42 / 53
Klasicky´ Wizard ˇ s´ı implementac´ı tohoto modelu je Wizard, Nejklasiˇctejˇ kter´y zab´ıra´ cele´ okno. Jeho kladem je, zˇ e okno muˇ ˚ ze obsahovat ˇradu ˇ ´ vysvetlen´ı, obrazku, ˚ atp. Skr´yva´ 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.
ˇ ˇ ı obsahu aplikace Vzory pro clen en´
Cancel
Strana 43 / 53
ˇ ˇ ı obsahu aplikace Vzory pro clen en´
Strana 44 / 53
Alternativn´ı Wizard ´ okne. ˇ Alternativou je zobrazit cel´y proces v jedinem ´ procesu vizualn ´ eˇ jasneˇ Je vhodne´ jednotlive´ cˇ asti ˇ oddelit. ´ celne´ je postupna´ aktivace zobrazen´ych prvku˚ Uˇ podle postupu uˇzivatele. ´ ı voleb. Alternativou (lepˇs´ı?) je postupne´ zobrazovan´ ˇ s´ı dobˇre zvolene´ v´ychoz´ı hodnoty Uˇzivatele vˇzdy poteˇ .
ˇ ˇ ı obsahu aplikace Vzory pro clen en´
Extras On Demand
Strana 45 / 53
ˇ ˇ ı obsahu aplikace Vzory pro clen en´
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´y. ´ ı jsou samostatne´ panely a liˇsty s pokroˇcil´ymi 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
ˇ ˇ ı obsahu aplikace Vzory pro clen en´
Intriguing Branches
Strana 47 / 53
ˇ ˇ ı obsahu aplikace Vzory pro clen en´
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
ˇ Obsah pˇredna´ sky 1
´ Jak postupovat pˇri navrhu aplikace
2
´ sky Kritika minule´ pˇrednaˇ
3
´ Jak postupovat pˇri navrhu aplikace
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 49 / 53
´ ı doplnkov ˇ Specialn´ y´ vzor
Multi-level Help
Strana 50 / 53
´ ı doplnkov ˇ Specialn´ y´ vzor
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
ˇ Obsah pˇredna´ sky 1
´ Jak postupovat pˇri navrhu aplikace
2
´ sky Kritika minule´ pˇrednaˇ
3
´ Jak postupovat pˇri navrhu aplikace
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 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´ych 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´ymi mus´ı uˇzivatel pracovat. ´ Pˇr´ısˇ t´ı tema: Navigujeme uˇzivatele
28. bˇrezna 2014, Brno ´ Pˇripravil: David Prochazka
Navigace v aplikaci ˇ a´ uˇzivatelska´ rozhran´ı Pokrocil
Navigace v aplikaci
ˇ Obsah pˇredna´ sky 1
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
ˇ ˇ ı pˇredna´ ska ˇ O cem bude dnesn´
´ sce jsme se zab´yvali zakladn´ ´ V minule´ pˇrednaˇ ı strukturou ´ ´ ıho pohledu – jak prezentovat aplikace zejmena z vizualn´ ´ uˇzivateli urˇcit´y 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´ym mus´ı b´yt 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´yt 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
Vzory pro navigaci v aplikaci
ˇ Obsah pˇredna´ sky 1
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 6 / 34
Vzory pro navigaci v aplikaci
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
Pˇrechod ze stavu do stavu
ˇ Obsah pˇredna´ sky 1
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 8 / 34
Pˇrechod ze stavu do stavu
Strana 9 / 34
Clear Entry Points ˇ ´ jasn´ych 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´yt 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
Pˇrechod ze stavu do stavu
Clear Entry Points
Strana 10 / 34
Pˇrechod ze stavu do stavu
Clear Entry Points?
Strana 11 / 34
Pˇrechod ze stavu do stavu
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´yva´ 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´
Pˇrechod ze stavu do stavu
Global Navigation
Strana 13 / 34
Pˇrechod ze stavu do stavu
Global Navigation
Strana 14 / 34
Pˇrechod ze stavu do stavu
Strana 15 / 34
Hub And Spoke ˇ ıme na podaplikace. Aplikaci rozdel´ ´ ı vstup a vˇzdy jasn´y Uˇzivateli poskytneme centraln´ v´ystup. 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
Pˇrechod ze stavu do stavu
Hub And Spoke
Strana 16 / 34
Pˇrechod ze stavu do stavu
Strana 17 / 34
Pyramid
Pyramida je kombinac´ı pˇredchoz´ıch pˇr´ıstupu. ˚ ´ ´ ı vstupn´ı bod, v´ystup 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.
Pˇrechod ze stavu do stavu
Pyramid
Strana 18 / 34
Pˇrechod ze stavu do stavu
Modal Panel
Strana 19 / 34
Pˇrechod ze stavu do stavu
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.
Identifikace pozice v aplikaci
ˇ Obsah pˇredna´ sky 1
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 21 / 34
Identifikace pozice v aplikaci
Sequence Map
Strana 22 / 34
Identifikace pozice v aplikaci
Strana 23 / 34
Sequence Map
Panel, kter´y 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
Identifikace pozice v aplikaci
Breadcrumps
Strana 24 / 34
Identifikace pozice v aplikaci
Strana 25 / 34
Breadcrumps
´ m´ısteˇ v hierarchii objektu˚ ukaˇzte cestu Na kaˇzdem ˇ zpet. Jedna´ se o alternativu k Sequence Maps. Stejn´y psychologick´y princip. ´ Implementovat v bl´ızkosti vrcholu stranky/aplikace.
Identifikace pozice v aplikaci
Strana 26 / 34
Annotated Scrollbar Vyuˇzijte scrollbar k identifikaci pozice – dynamick´y text charakterizuj´ıc´ı obsah oblasti. ´ steˇ pokud je aplikace zameˇ ˇ rena na praci ´ Zvlaˇ ´ s velk´ym dokumentem (text, zdrojov´y kod, aj.). ´ eˇ ˇ r nemoˇzne´ cˇ ´ıst pˇresouvan´y text a na scrollbar Je tem ´ eˇ soustˇred´ı. se uˇzivatel prav Scrollbar (ˇci obdobn´y panel) lze obohatit i o staticke´ ˇ ı. prvky – napˇr. barevne´ rozˇclenen´
Identifikace pozice v aplikaci
OpenOffice.org a Xcode
Strana 27 / 34
Identifikace pozice v aplikaci
Strana 28 / 34
Vysledky ´ vyhled. v Google Chrome
Identifikace pozice v aplikaci
Strana 29 / 34
Color-Coded Sections
´ rozhran´ı muˇ Urˇcita´ cˇ ast ˚ ze sd´ılet jednotn´y barevn´y ´ 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,
´ ı vzory Specialn´
ˇ Obsah pˇredna´ sky 1
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 30 / 34
´ ı vzory Specialn´
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.
´ ı vzory Specialn´
Strana 32 / 34
Escape Hatch
´ aplikace s omezen´ymi 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
ˇ Obsah pˇredna´ sky 1
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 33 / 34
Konec
Strana 34 / 34
D´ıky za pozornost
´ Dnes jsme si ukazali, jak´ym zpusobem navigovat ˚ uˇzivatele v aplikaci: jak mu umoˇznit snadn´y pˇrechod ´ mezi jednotliv´ymi cˇ astmi aplikace (aplikacemi) a jak ´ ı pozici v aplikaci. mu jasneˇ popsat jeho aktualn´ ´ ´ ıme operace Pˇr´ısˇ t´ı tema: Provad´
28. bˇrezna 2014, Brno ´ Pˇripravil: David Prochazka
´ en´ ˇ ı operac´ı Provad ˇ a´ uˇzivatelska´ rozhran´ı Pokrocil
´ en´ ˇ ı operac´ı Provad
ˇ Obsah pˇredna´ sky 1
´ en´ ˇ ı operac´ı Provad
2
Nab´ızen´ı operac´ı
3
´ en´ ˇ ı procesu˚ Provad
4
Sekvence operac´ı
5
´ an´ ´ ı textov´ych hodnot Vklad
6
´ ı pˇr´ıpady Specialn´
7
Konec
Strana 2 / 42
´ en´ ˇ ı operac´ı Provad
Strana 3 / 42
ˇ ˇ ı pˇredna´ ska ˇ O cem bude dnesn´ ´ sky jsme se zab´yvali zakladn´ ´ Do minule´ pˇrednaˇ ı strukturou aplikace – kolik bude m´ıt oken, s jak´ym ˇ 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´ı.
´ en´ ˇ ı operac´ı Provad
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´ych hodnot Vklad Forgiving Format, Structured Format, Input Prompt, Autocompletition, Fill-in-the-Branches, Input Hits
´ an´ ´ ı netextov´ych hodnot Vklad Dropdown Chooser, Illustrated Choices, List Builder
´ ı pˇr´ıpady Specialn´ Good Defaults, Same-Page Error Message
Nab´ızen´ı operac´ı
ˇ Obsah pˇredna´ sky 1
´ en´ ˇ ı operac´ı Provad
2
Nab´ızen´ı operac´ı
3
´ en´ ˇ ı procesu˚ Provad
4
Sekvence operac´ı
5
´ an´ ´ ı textov´ych hodnot Vklad
6
´ ı pˇr´ıpady Specialn´
7
Konec
Strana 5 / 42
Nab´ızen´ı operac´ı
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´yznamem (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´y bod (napˇr. konec Pˇri umist’ovan´ ´ ´ na zvyky. dlouheho seznamu), dbat
Nab´ızen´ı operac´ı
Button Groups
Strana 7 / 42
Nab´ızen´ı operac´ı
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´y dokument“ panel – Nov´y ze ” sˇ ablony, Otevˇr´ıt existuj´ıc´ı, atp. Pruzkumn´ ık ve Window, Finder v MacOS X a jejich ˚ lev´y 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´yt integrovan´y, separatn´ schovateln´y, volne´ rozloˇzen´ı prvku). ˚ ´ na pˇrehlednost - ne vˇse v jednom“ Dbat ”
Nab´ızen´ı operac´ı
Action Panel
Strana 9 / 42
Nab´ızen´ı operac´ı
Strana 10 / 42
Smart Menu Items ˇ text v menu dynamicky podle toho, co pˇresneˇ Mente funkce provede.
Nab´ızen´ı operac´ı
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´yt janeˇ patrne, ´ zˇ e se jedna´ Melo o posledn´ı krok.
´ en´ ˇ ı procesu˚ Provad
ˇ Obsah pˇredna´ sky 1
´ en´ ˇ ı operac´ı Provad
2
Nab´ızen´ı operac´ı
3
´ en´ ˇ ı procesu˚ Provad
4
Sekvence operac´ı
5
´ an´ ´ ı textov´ych hodnot Vklad
6
´ ı pˇr´ıpady Specialn´
7
Konec
Strana 12 / 42
´ en´ ˇ ı procesu˚ Provad
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´ych 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.
´ en´ ˇ ı procesu˚ Provad
Strana 14 / 42
Progress Indicator + Cancelability ˇ z´ı dele, ´ neˇz cca 2 sekundy. Kdykoliv urˇcita´ uloha beˇ ´ ˇ b´yt 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´ı
ˇ Obsah pˇredna´ sky 1
´ en´ ˇ ı operac´ı Provad
2
Nab´ızen´ı operac´ı
3
´ en´ ˇ ı procesu˚ Provad
4
Sekvence operac´ı
5
´ an´ ´ ı textov´ych hodnot Vklad
6
´ ı pˇr´ıpady Specialn´
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´yvojove´ 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´ych objektu, ˚ ´ ı/modifikace objektu˚ (sloupec), vytvoˇren´ı/smazan´ ´ ri, operace se soubory a adresaˇ ´ jakakoliv Copy“, Cut“, Paste“ operace. ” ” ”
Obvykle vynechat:
ˇ textu nebo objektu, v´yber ˇ ´ zmena stranky okna nebo dokumentu, pozice kurzoru/scrollbaru, ˇ zmena velikost´ı a pozic oken, panelu. ˚
´ an´ ´ ı textovych Vklad ´ hodnot
ˇ Obsah pˇredna´ sky 1
´ en´ ˇ ı operac´ı Provad
2
Nab´ızen´ı operac´ı
3
´ en´ ˇ ı procesu˚ Provad
4
Sekvence operac´ı
5
´ an´ ´ ı textov´ych hodnot Vklad
6
´ ı pˇr´ıpady Specialn´
7
Konec
Strana 18 / 42
´ an´ ´ ı textovych Vklad ´ hodnot
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´y mix b´ıl´ych znaku, ˚ zkratek, atp. ˇ zovalo pˇrem´ysˇ 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
´ an´ ´ ı textovych Vklad ´ hodnot
Forgiving Format
Strana 20 / 42
´ an´ ´ ı textovych Vklad ´ hodnot
Forgiving Format
Strana 21 / 42
´ an´ ´ ı textovych Vklad ´ hodnot
Strana 22 / 42
Structured Format ´ M´ısto textoveho pole uˇzivatel vyb´ıra´ vstup ze selektoru˚ nebo vpisuje do striktneˇ specifikovan´ych pol´ı. Pouˇz´ıt pokud potˇrebujete jasneˇ strukturovan´y vstup ´ na dan´y 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.
´ an´ ´ ı textovych Vklad ´ hodnot
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´yt problem ˚ e´ poˇrad´ı ˇ ach). ´ slov ve vet
´ an´ ´ ı textovych Vklad ´ hodnot
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´yva´ pouˇzit ve spojitosti s Forgiving Format a Structured Format. Alternativou je Input Prompt.
´ an´ ´ ı textovych Vklad ´ hodnot
Strana 25 / 42
Input Prompt ˇ ı. Text, kter´y je vloˇzen pˇr´ımo do pole s odpoved´ ˇ s´ı, neˇz Input Hint. Mus´ı b´yt 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´yber slovy typu vyber/zvol“, pro ” 1 textova´ pole vloˇz/vepiˇs“ . ”
1
ˇ z Power Pointu: Click to add title“ viz veta
´ an´ ´ ı textovych Vklad ´ hodnot
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´ydnu). ´ ´ pˇredchaz´ ´ ı pˇreklepum. Velmi zasadn eˇ zrychluje praci, ˚ ˇ an´ ´ ı muˇ ´ eno ˇ Doplnov z ˚ ze b´yt provad ´ uˇzivatelem vloˇzen´ych hodnot, databaze ´ (jmena ´ existuj´ıc´ı databaze v UIS), ´ ´ obvykle vstupy v dane oblasti (dny v t´ydnu).
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´y Sysifa. . . ´
´ ı pˇr´ıpady Specialn´
ˇ Obsah pˇredna´ sky 1
´ en´ ˇ ı operac´ı Provad
2
Nab´ızen´ı operac´ı
3
´ en´ ˇ ı procesu˚ Provad
4
Sekvence operac´ı
5
´ an´ ´ ı textov´ych hodnot Vklad
6
´ ı pˇr´ıpady Specialn´
7
Konec
Strana 27 / 42
´ ı pˇr´ıpady Specialn´
Strana 28 / 42
Good Defauts
´ doplnte ˇ vhodne´ v´ychoz´ı Kdykoliv je to moˇzne, hodnoty. ´ ˇ zuje. Zasadn´ ı uspora cˇ asu, ale sˇ patn´y 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´ychoz´ı odpoved ˇ ’ nemuˇ Nutne´ zvaˇ ˚ ze uˇskodit.
´ ı pˇr´ıpady Specialn´
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´yt pˇr´ımo u poloˇzky a pˇresn´y: 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.
´ ı pˇr´ıpady Specialn´
Strana 30 / 42
´ ı Same-Page Error Message: zadan´
´ ı pˇr´ıpady Specialn´
Strana 31 / 42
Same-Page Error Message: chyba
´ ı pˇr´ıpady Specialn´
Strana 32 / 42
Same-Page Error Message: Windows
´ ı pˇr´ıpady Specialn´
Strana 33 / 42
Same-Page Error Message: Firefox
´ ı pˇr´ıpady Specialn´
Strana 34 / 42
Same-Page Error Message: nVidia
´ ı pˇr´ıpady Specialn´
Strana 35 / 42
Same-Page Error Message: MapShake
http://mapshake.cz – excelentn´ı registrace i operace ´ AJAX+inteligentn´ı programator=intuitivita
Konec
ˇ Obsah pˇredna´ sky 1
´ en´ ˇ ı operac´ı Provad
2
Nab´ızen´ı operac´ı
3
´ en´ ˇ ı procesu˚ Provad
4
Sekvence operac´ı
5
´ an´ ´ ı textov´ych hodnot Vklad
6
´ ı pˇr´ıpady Specialn´
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´yvalo 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´yt 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
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
2
´ ı realita Virtualn´
3
Obrazovky a projekce
4
Projekce
5
Head Mounted Display
6
Volumetric Displays
Strana 2 / 39
ˇ Obsah pˇredna´ sky
Strana 3 / 39
ˇ ˇ ı pˇredna´ ska ˇ O cem bude dnesn´
Jake´ technicke´ prostˇredky se pouˇz´ıvaj´ı pro tvorbu ´ ı a doplnen ˇ e´ reality. virtualn´ ˇ ı pouˇz´ıvan´ ´ ı Jake´ psychologicke´ aspekty ovlivnuj´ VR/AR.
´ ı realita Virtualn´
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
2
´ ı realita Virtualn´
3
Obrazovky a projekce
4
Projekce
5
Head Mounted Display
6
Volumetric Displays
Strana 4 / 39
´ ı realita Virtualn´
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´y umel´ ´ ´ ım vjemem, haptickou Muˇ vizualn´ ˚ ze b´yt 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´
´ ı realita 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´y pˇrechod (Mixed Reality).
´ ı realita Virtualn´
Stupneˇ proˇzitku
Strana 7 / 39
´ ı realita Virtualn´
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).
´ ı realita Virtualn´
Strana 9 / 39
´ Jsme na pocˇ atku cesty...
...plne´ slep´ych uliˇcek. V´yzkum: haptiky, AR, Web3D, sd´ılen´ı prostˇred´ı,. . . Mezioborov´y v´yzkum: psychologie, optika, . . . ´ ´ Aplikace: trening, simulace, design, zabava, ....
´ ı realita Virtualn´
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´y 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
´ ı realita Virtualn´
Strana 11 / 39
´ Zakladn´ ı komponenty VR Zobrazovac´ı zaˇr´ızen´ı (displaye, stereo projekce, helmy), dalˇs´ı v´ystupn´ı zaˇr´ızen´ı (zvuk, cˇ ich, hmat), ´ ı pohybu/obrazu, datove´ vstupn´ı zaˇr´ızen´ı (sn´ıman´ rukavice a obleky, EEG, aj.). v´ypoˇcetn´ı prostˇredky (stanice, clustery). ´ ı v realn ´ em ´ cˇ ase (25 sn´ımku/s), Poˇzadavky: zobrazovan´ ˚ latence pod 50 ms atp.
Obrazovky a projekce
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
2
´ ı realita Virtualn´
3
Obrazovky a projekce
4
Projekce
5
Head Mounted Display
6
Volumetric Displays
Strana 12 / 39
Obrazovky a projekce
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, . . .
Obrazovky a projekce
Kategorie VR obrazovek
Strana 14 / 39
Obrazovky a projekce
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.
Obrazovky a projekce
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 ´
Obrazovky a projekce
Strana 17 / 39
Metody pro stereoskopii Prostorov´y multiplexing – v´ıce obrazovek (HMD), ´ eˇ polarizaˇcn´ı mult. – jeden obraz horizontaln ´ druh´y vertikaln ´ e, ˇ polarizaˇcn´ı filtr na polarizovan, ´ projektoru a na br´yl´ıch, linearn´ı a kruhova´ polarizace (projekce). ´ ı mult. – ruzn spektraln´ ˚ e´ barvy pro obrazy, filtry na projektorech a br´yl´ıch (projekce), ´ en ˇ e´ br´yle2 , nutnost cˇ asov´y mult. – preklap synchronizace s obrazovkou (projekce, stanice), ´ r´ı stereo autostereoskopicke´ obr. – obrazovka vytvaˇ obraz bez nutnosti br´yl´ı. 2
Shutter Glasses
Obrazovky a projekce
Strana 18 / 39
ˇ Shutter Glasses – casov y´ multiplex ´ e´ br´yle s kapaln´ymi krystaly stˇr´ıdaveˇ blokuj´ı oˇci. Napajen
Obrazovky a projekce
ˇ ı/spektraln´ ´ ı multiplex Polarizacn´
Strana 19 / 39
Obrazovky a projekce
Strana 20 / 39
´ ´ ı Zakladn´ ı srovnan´ Pˇrep´ınane´ br´yle: drahe´ br´yle, nutnost vysoke´ obn. ´ svetla, ˇ frekvence projektoru/LCD, dobre´ barvy, ztrata sˇ patna´ separace oˇc´ı. ´ lehke, ´ dobre´ barvy, linarn´ ´ ı Polarizaˇcn´ı br´yle: 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.
Obrazovky a projekce
Strana 21 / 39
Auto-stereoskopicka´ obrazovka
Existuje velka´ ˇrada ˇreˇsen´ı sahaj´ıc´ıch aˇz do holografie.
Projekce
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
2
´ ı realita Virtualn´
3
Obrazovky a projekce
4
Projekce
5
Head Mounted Display
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´y efekt: aktivn´ı: pˇrep´ınane´ br´yle 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´ych 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´ı.
Head Mounted Display
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
2
´ ı realita Virtualn´
3
Obrazovky a projekce
4
Projekce
5
Head Mounted Display
6
Volumetric Displays
Strana 28 / 39
Head Mounted Display
Strana 29 / 39
Head Mounted Display ˇ Dvojce obrazovek pˇripojen´ych 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´yhled, 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/).
Head Mounted Display
Strana 30 / 39
´ Klady a zapory HMD Klady 100% Field of Regard, ˇ mal´y 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
Head Mounted Display
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´y.
Head Mounted Display
Strana 32 / 39
See-Through HMD
Opticka´ kompozice: ˇ s´ı, jednoduˇzsˇ ´ı – levnejˇ pˇr´ım´y 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.
Head Mounted Display
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.
Head Mounted Display
Strana 34 / 39
Binocular Omni-Orientation Monitor
Head Mounted Display
Strana 35 / 39
Virtual Retinal Display ´ na s´ıtnici okan paprskem svetla. ˇ Obraz vykreslovan ´ mimo oko a U klasick´ych 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´yvan´ N´ızka´ spotˇreba.
Head Mounted Display
Virtual Retinal Display
Strana 36 / 39
Volumetric Displays
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
2
´ ı realita Virtualn´
3
Obrazovky a projekce
4
Projekce
5
Head Mounted Display
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´y (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´ych).
18. dubna 2014, Brno ´ Pˇripravil: David Prochazka
´ ı realita 2: trackery Virtualn´ ˇ a´ uˇzivatelska´ rozhran´ı Pokrocil
ˇ Obsah pˇredna´ sky
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
2
Trackery
3
Elektromechanicke´ trackery
4
Elektromagneticke´ trackery
5
Akusticke´ trackery
6
Opticke´ trackery
7
Dalˇs´ı trackery
Strana 2 / 28
ˇ Obsah pˇredna´ sky
Strana 3 / 28
ˇ ˇ ı pˇredna´ ska ˇ O cem bude dnesn´
´ pro manipulaci s virtualn´ ´ ımi Jake´ metody jsou pouˇz´ıvany objekty (a prostˇred´ımi).
Trackery
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
2
Trackery
3
Elektromechanicke´ trackery
4
Elektromagneticke´ trackery
5
Akusticke´ trackery
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´y 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
Elektromechanicke´ trackery
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
2
Trackery
3
Elektromechanicke´ trackery
4
Elektromagneticke´ trackery
5
Akusticke´ trackery
6
Opticke´ trackery
7
Dalˇs´ı trackery
Strana 10 / 28
Elektromechanicke´ trackery
Strana 11 / 28
Elektromechanicke´ trackery: Gypsy
Elektromechanicke´ trackery
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´y 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. ˚
Elektromagneticke´ trackery
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
2
Trackery
3
Elektromechanicke´ trackery
4
Elektromagneticke´ trackery
5
Akusticke´ trackery
6
Opticke´ trackery
7
Dalˇs´ı trackery
Strana 13 / 28
Elektromagneticke´ trackery
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´y nebo frekvenˇcn´ı multiplex) a Pulse DC Magnetic (ˇcasov´y multiplex),
Elektromagneticke´ trackery
Strana 15 / 28
ˇ ı Rusen´ ´ ˇ velmi nachyln e´ na ruˇsen´ı kovov´ymi pˇredmety, reproduktory, elektronikou, atp. ˇ ˇ degradace v prub cˇ asu, zmenou teploty, ˚ ehu ´ kalibrovat. pro vyˇssˇ ´ı pˇresnost nutne´ neustale
Elektromagneticke´ trackery
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
Elektromagneticke´ trackery
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).
Akusticke´ trackery
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
2
Trackery
3
Elektromechanicke´ trackery
4
Elektromagneticke´ trackery
5
Akusticke´ trackery
6
Opticke´ trackery
7
Dalˇs´ı trackery
Strana 18 / 28
Akusticke´ trackery
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´y dosah cca 1.5 m, zaloˇzeno na triangulaci (tˇri reproduktory ´ zachycen´y v trojuheln´ ıku postupneˇ vyˇslou signal ´ tˇremi mikrofony v trojuheln´ ıku), ´ je moˇzn´y cˇ asov´y multiplexing pro v´ıce ovladaˇcu. ˚
Opticke´ trackery
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
2
Trackery
3
Elektromechanicke´ trackery
4
Elektromagneticke´ trackery
5
Akusticke´ trackery
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´yt ˇ ˇ 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´
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
2
Trackery
3
Elektromechanicke´ trackery
4
Elektromagneticke´ trackery
5
Akusticke´ trackery
6
Opticke´ trackery
7
Dalˇs´ı trackery
Strana 25 / 28
ˇ ı trackery Dals´
Strana 26 / 28
ˇ ı metody trackovan´ ´ ı pohybu Dals´
ˇ r´ı naklon ´ Gyroskop: meˇ (rotaci). ˇ r´ı zrychlen´ı, lze pouˇz´ıt k v´ypoˇctu Akcelerometr: meˇ posunu. ˇ r´ı naklon ´ ´ Inklinometr: meˇ jako vodovaha (elektronicky). ˇ ˇ jin´ych Casto i v mobiln´ıch zaˇr´ızen´ıch a jako doplnek ´ ı metod trackovan´
ˇ ı trackery Dals´
´ ı 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´ych p´ısmen v dopise.
Strana 27 / 28
ˇ ı trackery Dals´
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/
18. dubna 2014, Brno ´ Pˇripravil: David Prochazka
´ ı realita 3: I/O Virtualn´ ˇ a´ uˇzivatelska´ rozhran´ı Pokrocil
ˇ Obsah pˇredna´ sky
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
2
Haptika
3
Simulace pohybu
4
ˇ Cich
5
Chut’
6
Shrnut´ı
Strana 2 / 33
ˇ Obsah pˇredna´ sky
Strana 3 / 33
ˇ ˇ ı pˇredna´ ska ˇ O cem bude dnesn´
Jake´ existuj´ı dalˇs´ı vstupn´ı a v´ystupn´ı zaˇr´ızen´ı pro ´ ´ ı ruzn´ ´ ´ ovladan´ se zejmena ˚ ych AR/VR prostˇred´ı. Pod´ıvame na haptiku a motoriku.
Haptika
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
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´ystupn´ı (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´yrobkem 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´ym 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´ystupn´ı 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´ym Stul ˚ skladaj´ povrchem s horn´ı projekc´ı (reset 15s, rozliˇsen´ı pinu˚ 0.72”, 5.75”max. v´ysˇ ka pinu)
Haptika
Strana 10 / 33
Datove´ rukavice ´ ´ nebo s pevnou kostrou Muˇ materialu ˚ ze b´yt z lehkeho (exoskeleton) Lze sn´ımat absolutn´ı pozici ruky + pohyby kloubu, ˚ ´ est´ ˇ ı, atp. (des´ıtky DOF) zap ˇ Muˇ vazbou. ˚ ze b´yt pouze vstupn´ı nebo se zpetnou Nev´yhody: 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´ych 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´y reproduktorem Ultrazvuk: meˇ v rukavici (Nintendo PowerGlove). Magnetismus: mala´ magneticka´ pole v okol´ı kloubu. ˚ ˇ r´ı se odpor v ohybov´ych 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´ych 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´ych 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´y 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´yn) – 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´y vjem
Simulace pohybu
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
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´ych ´ simulatorech, pˇret´ızˇ en´ı do 1G (Tactile motion seats, http://www.crowsontech.com/). ´ ı elektrick´ych 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
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
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´y 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´y princip jako pˇri tvorbeˇ klasickeho parfemu.
ˇ Cich
Strana 28 / 33
´ Problemy Prozat´ım sp´ısˇ e experimety, omezen´y 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
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
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´y v´yraz pro chutn´y“, typickou ” ” ´ substanc´ı produkuj´ıc´ı tento vjem jsou glutamaty.
ˇ chuti a hmatu. Celkov´y 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´ych duvod u˚ meniteln e). ˚
Chut’
Strana 31 / 33
Food Simulator ´ ı – posledn´ı hranice VR“. Zat´ım velmi experimentaln´ ”
Shrnut´ı
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
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´ymi metodami zaloˇzen´ymi 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/).
18. dubna 2014, Brno ´ Pˇripravil: David Prochazka
Augmented Reality ˇ a´ uˇzivatelska´ rozhran´ı Pokrocil
ˇ Obsah pˇredna´ sky
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
2
Druhy AR
3
HMD
4
Projektory
5
Obrazovky
6
Toolkity
7
Shrnut´ı
Strana 2 / 34
ˇ Obsah pˇredna´ sky
Strana 3 / 34
ˇ ˇ ı pˇredna´ ska ˇ O cem bude dnesn´
Struˇcne´ shrnut´ı aplikac´ı Augmented Reality – ˇ e/pos´ ´ doplnen ılene´ reality.
Druhy AR
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
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´yhoda pro slepe/slabozrak zvukove: e.
HMD
Strana 6 / 34
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
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´ym dynamick´ym 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´ymi br´ylemi – 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´yle. ” ˇ 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
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
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´ych 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´ych ” 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´ystup.
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´yvaj´ı, 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´y 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´yvat realn ˚ ˇ a´ m´ısta). se jim (aˇz na svetl Lze jednoduˇse pˇrekr´yvat 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
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
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´y majitel PDA). ´ e´ limity ve v´ydrˇzi bateri´ı, v´ypoˇcetn´ım v´ykonu 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´ym 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´ysledky 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´y krok: vyhledav http://www.google.com/mobile/goggles/#place 1
1
ˇ si mal´ych 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´y), triangulace pomoc´ı GSM, Wi-Fi hot-spotu, ˚ opticky pomoc´ı kamery, ´ ´ problem: jak pozicovat v uzavˇren´ych prostorach. akcelerometry – reaguj´ı na pohyb, ale akumuluj´ı ´ chybu a pˇresnost muˇ ˚ ze b´yt nedostateˇcna, bluetooth (LE), RFID, ´ dan´y 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´ypoˇcetn´ı v´ykon zaˇr. (anal´yza sn´ımku), zat ˚ ´ moˇzne´ problemy s aktualizac´ı dat (aplikace).
Server-side: Uˇzivatel ma´ pouze tenkeho klienta (napˇr. webov´y browser) a odes´ıla´ data serveru, kter´y je analyzuje. Lze pouˇz´ıvat pouze po pˇripojen´ı k Internetu (rychlost). Zaˇr´ızen´ı pouze komunikuje, anal´yzu ˇreˇs´ı server ´ ı v´ypoˇ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´ych 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´ych“). ” ´ s´ıt’ova´ konektivita – Dostateˇcneˇ rychla´ (a levna) ´ obvykle nutnost zpracovavat velke´ mnoˇzstv´ı dat.
Toolkity
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
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´yvoj GNU verze zastaven, volne´ zdrojove´ kody.
OpenCV: ˇ ı, obecn´y toolkit pro poˇc´ıtaˇcove´ viden´ ˇ aj. pouˇz´ıvan´y v robotice, v´yrobe, http://opencv.willowgarage.com/wiki/ nen´ı tak optimalizovan´y pro AR aplikace.
Existuje ˇrada dalˇs´ıch projektu˚ – http://www. libspark.org/wiki/saqoosha/FLARToolKit/en.
Shrnut´ı
ˇ Obsah pˇredna´ sky 1
´ sky Obsah pˇrednaˇ
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