Graphic User Interface for Škoda Citigo Electric car by Ondrej Velebny

/////////////////// BcA. Ondřej Velebný //////////Diplomová práce ///////// 2012

Grafické uživatelské rozhraní u elektromobilu. /////////////////////////

Graphical user interface for an electric car. /////////////////////////////

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

/////////////////// BcA. Ondřej Velebný //////////Diplomová práce ///////// 2012

Grafické uživatelské rozhraní u elektromobilu. /////////////////////

Graphical user interface for an electric car. /////////////////////////

UTB ve Zlíně, Fakulta multimediálních komunikací, 2012

4

UTB ve Zlíně, Fakulta multimediálních komunikací, 2012

4

A

Ta BS T g r to d R A au afic iplo K T V p to m k é h m o v d o r ak o bi o u ž á p r t y k t ic l ů a i v a ác ov ké čá tel e s K lí éh č á st sk e z o p st i e č éh ab G r č ov afi á s a n j e n n ě o ro ý v á c k lo v e lu av e r g z h g é u a: a v rho ono ran rafi ž iv ytv vá m í a cký a te o ř n v ii z v ý v m ls k it g z h p o oj u ž ér r a l e d hl e d o i v a oz fic a du ty te hr ké u m n ko ls k an u ž íst ej v v ýc ý m í, d i v a ě n ho h r ot tel í p dn zař ozh yk s k ř í s ě j š í ze r a n ov é r t ro í h ní áo oz jo o u . D ím ( br h r v é m ál e d á az an h o íst t a le ov í, k a ěn ké jen ka te r d o t í k a u G ,e é b y k o n t to U I ) le k ud ové rol r d u e t ro e i h o níc iplo le m k nt ob ui t p a n h p r m o t ro m il , i v n elu v k v é ov lá d í a u ů. prá obilu sn vi ac ce . v íp a d ze e po te an n ro o re l e o el vn ti ov kt r áv c k la d o m ág éč a te o b r a ás ln é ilu fic ti j Š ké e z p r ko o u da u ž ho i v a dn živ Ci te l o c e a te t i g sk n le o . H Th é r ob e Sk et l e k l av n oz ec od Pra op h r ný t ro í m a C ct ic an p m itig ica to of í v op o b c í lem o e l p a u c h t his y b is i l u. ra a v by lec rt sc th ný ý v lo tri of ree es c h oj um c v t h n is isio e t de is a í s t h v b ěn n.

Ma esis ices out í in co in a g aim nt th ra wa ains e th phic s t /de eor al o p s c et us lac rib ica er e a e s l p int to de art erf uc sig . A ac hs n ut e ( cre of ho GU en GU r c I) an I fo om in a d c r pa n rea a m red ele tes ed G ctr a g ia c UIs ic c rap en of ar. hic ter car It c al an s a ont us d m nd ai n er int ulti the s re erf -to be vie ac uc st l we e t h oc d ha ins at de Gr t is tr ion sc Rá ap int um of rip hic dá d by uit en co tio a le ive tal nt n o c l us t ak h t an pa rol f G er Ve é p out d e n e ele U I int lké an o c as l an m ev er yt e o u D e st po f a o u d i t n t s lu t i dě o c ipl u e, ‘s l in on s ko p . e T I o ng o d ou for ca ter for AB vá . P ěk ch ní us tion ms po S T e te o v sc pa ers i of in R re tří r u al v of n da erg ting AC en ic O e ele sh on an T d , l elé ah ou E le ctr bo om d ov c í m c t ic v ard ic m i r ic ér Ar u e h fo . od t .D m ca icl r in ě r, C K .z éd es e fi i o za p y . r n l w m om t ro o po y r l p ds dp Š k ov an : or od é p el ua a a rá po ut ce o p m z a an oc ce u M . nn g A ér .V ad ác y. lav uO nd ro uš ko vi

OBSAH ÚVOD –­ 10

TEORETICKÁ ČÁST - 10

GRAFICKÉ UŽIVATELSKÉ ROZHRANÍ - 11 USER INTERFACE (UI)

HUMAN-COMPUTER INTERACTION (HCI) HUMAN INTERFACE GUIDELINE (HIG) GRAPHICAL MOCK-UPS

USER CENTERED DESIGN (UCD) INTERACTION DESIGN (IXD)

USER EXPERIENCE DESIGN (UX, UE) GRAPHICAL USER INTERFACE (GUI).

USER FRIENDLY INTERFACE PERSONY

HISTORIE GRAFICKÝCH UŽIVATELSKÝCH ROZRANÍ - 12 MEMEX

NLS ON-LINE SYSTEM XEROX ALTO

SMALL TALK APPLE LISA UNIX

XEROX STAR 8010 SYSTÉM VISION WINDOWS 1.0 MACINTOSH

X WINDOW SYSTÉM TANDY DESK MATE

GEM (GRAPHICAL ENVIRONMENT MANAGER) AMIGA WORKBENCH

GEOS (GRAPHIC ENVIRONMENT OPERATING SYSTEM) WINDOWS 2.0

ACORN COMPUTERS 2.18 NEXT STEP OS/2

WINDOWS

MACINTOSH

HISTORIE GUI u DOTYKOVÝCH ZAŘÍZENÍ - 17

DOTYKOVÁ ZAŘÍZENÍ u VYBRANÝCH VOZIDEL - 18 GUI u VYBRANÝCH ELEKTROMOBILŮ Nissan Leaf

FORD FOCUS ELECTRIC

GUI OSTATNÍCH VYBRANÝCH AUTOMOBILŮ Peugeot 208 Škoda Citigo NAVRHOVÁNÍ OVLÁDACÍCH PRVKŮ AUTOMOBILU IDEÁLNÍ VELIKOST DOTYKOVÉ PLOCHY u DOTYKOVÝCH ZAŘÍZENÍ Fittsův zákon OBRAZOVÁ MŘÍŽKA IKONY A SYMBOLY KONTROLEK NA PŘÍSTROJOVÉ DESCE CO JE TO ELEKTROMOBIL Dobíjení Rekuperace AUTOMOBILOVÝ NAVIGAČNÍ PŘÍSTROJ Global Positioning systém (GPS) Points of interest (POI) 3D vykreslování objektů v navigaci Funkce kompasu v navigaci Dopravní informace (TMC) Rádio v automobilu OBECNÉ FUNKCE Hlasové ovládání Bluetooth - komunikace s telefonem ....................................................................................................................... ....................................................................................................................... ....................................................................................................................... ....................................................................................................................... ....................................................................................................................... ....................................................................................................................... ...................................................................................................................... ....................................................................................................................... ....................................................................................................................... ....................................................................................................................... ....................................................................................................................... ....................................................................................................................... .......................................................................................................................

PRAKTICKÁ ČÁST - 24 NÁVRH GUI PRO ELEKTROMOBIL - 24 UMÍSTĚNÍ PŘÍSTROJOVÉHO PANELU A DOTYKOVÉHO ZAŘÍZENÍ MEDIA CENTER DO PALUBNÍ DESKY ŠKODA CITIGO. OBRAZOVÁ MŘÍŽKA PÍSMO PŘÍSTROJOVÁ DESKA Dynamický ukazatel spotřeby energie DOTYKOVÉ ZAŘÍZENÍ MEDIA CENTER Navigace Existují tři způsoby zadávání hledaného místa: hlasový vstup, textový pomocí klávesnice, nebo odkazem.

Prostorový pohled na mapy z pohledu uživatele Zajímavá místa na cestě Vizualizace cesty TMC dopravní informace Symbol GPS Telefon Volání a hledání Vyzvánění Průběh hovoru Ukončení hovoru Média Rádio a přehrávání hudby Výběry skladeb (playlist) Klimatizace Obecné funkce Ovládání hlasitosti Optický senzor Hlasové ovládání Použité druhy gest Dotyková klávesnice Připojení bluetooth ZÁVĚR - 34 SEZNAM POUŽITÉ LITERATURY - 35 SEZNAM POUŽITÝCH SYMBOLŮ A ZKRATEK - 37 ....................................................................................................................... ....................................................................................................................... ....................................................................................................................... ....................................................................................................................... ....................................................................................................................... ....................................................................................................................... ...................................................................................................................... ....................................................................................................................... ....................................................................................................................... ....................................................................................................................... ....................................................................................................................... ....................................................................................................................... ....................................................................................................................... ...................................................................................................................... ....................................................................................................................... ....................................................................................................................... ....................................................................................................................... ....................................................................................................................... ....................................................................................................................... ...................................................................................................................... ....................................................................................................................... ....................................................................................................................... ....................................................................................................................... ....................................................................................................................... ....................................................................................................................... ....................................................................................................................... ...................................................................................................................... ....................................................................................................................... ....................................................................................................................... ....................................................................................................................... ....................................................................................................................... ....................................................................................................................... ...................................................................................................................... ....................................................................................................................... ....................................................................................................................... ....................................................................................................................... .......................................................................................................................

9

zařízení propojuje hned několik grafických disciplín a v kombinaci

s elektromobily jde o jeden z největších trendů současnosti. GUI používaná v automobilovém průmyslu jsou těžko ovladatelná. v době, kdy celý svět

používá „smartphony“, iPady a různé druhy dotykových zařízení apod. Působí převážně mechanické ovládání palubních desek automobilů poněkud

zastarale. A to je důvod proč je cílem této diplomové práce navrhnout vlastní, lepší dotykové rozhraní u elektromobilu.

Úvodní část je věnována obecným výrazům z oblasti vývoje, které jsou

základními kameny principů tvorby GUI. Následuje obsáhlá část historického vývoje u zařízení ovládaných myší společně a dále vývoj dotykových zařízení. v další části jsou ukázky a krátké zhodnocení dotykových zařízení u vybraných vozidel, které reprezentují současný stav GUI u sériově vyráběných vozů.

Další oblastí, kterou se obecná část diplomové práce zabývá je navrhování uživatelského rozhraní média center pro elektromobil a s ním spojených technologií.

Praktická část je věnována návrhu vlastního grafického uživatelského

rozhraní u vize budoucího elektromobilu Škoda Citigo. Nejprve bude řešeno umístění přístrojové desky a dotykového zařízení media centra do interiéru

vozu, dále vývoj rozhraní, až po výklad samotných funkcí media center a jejich vizuální řešení.

GRAFICKÉ UŽIVATELSK ROZHRANÍ

TEORETICKÁ

ÚVOD

Téma diplomové práce o grafickém uživatelském rozhraní (GUI) u dotykových

ČÁST

KÉ

Grafické uživatelské rozhraní je část počítačových aplikací nebo operačního systému, jehož prostřednictvím uživatel komunikuje se zařízením řízeným počítačem. Má spíše grafickou podobu, ne jenom čistý text. Může být použito u osobního počítače nebo například u palubní desky automobilu.

s elektronickým zařízením (počítačem) za pomocí vizuálních grafických

User centered design (UCD)

prvků. Grafickými prvky rozumíme ikony a jiné vizuální indikátory vizuálně User centered design označovaný zkratkou (UCD) český “Design orientovaný

interpretující procesy nebo příkazy. Opakem vizuálního grafického rozhraní je

na uživatele” je filozofií procesu tvorby uživatelského rozhraní, kdy se

rozhraní textové, kde se příkazy zadávají prostřednictvím příkazového řádku.

designéři při návrhu orientují na potřeby uživatele. Cílem je spokojenost

Grafické uživatelské rozhraní odděluje prezentační stránku od logických

uživatele vycházející z funkčnosti systému, které vychází ze správného

procesů programu. [9]

logického řazení informací interpretovaných v přehledném uživatelském rozhraní.

User friendly interface

Hlavním rozdílem od běžného designování (obr. 1) je to, že user centered

User friendly interface neboli uživatelsky přívětivé rozhraní je rozhraní, se

design se snaží optimalizovat produkt dle uživatele s přihlédnutím k jeho

kterým se uživatel snadno ztotožní, díky intuitivnímu ovládání navrženému

možnostem nebo potřebám a ne měnit jeho zažité zvyky a chování. Při

dle potřeb uživatele. Vývoj rozhraní je tvořen s přihlédnutím na dovednosti

návrhu je kladen důraz na pochopitelnost, užitečnost a estetično.

a možnosti uživatelů (cílové skupiny). Při vývoji User friendly interface se vytvářejí prototypy pro testování na uživatelích. User friendly interface je subjektivním hodnocením každého jedince, to co připadá jednomu jasné a srozumitelné ovládání, může být pro jiného uživatele zcela nepochopitelné, a proto je třeba vše testovat. Výsledky testování odhalí nedostatky, jejichž postupné odstranění přispívá ke vzniku uživatelsky přívětivého rozhraní. [10] Persony Při vytváření kvalitního softwaru je zapotřebí soustředit se na uživatele, to znamená vycházet z teorií user centered design (ad 1. 5), user friendly interface (ad 1. 9), abychom toho dosáhli, je třeba definovat budoucí uživatele



programu. Takto definované skupiny jsou odborně nazývány persony neboli profily skupiny budoucích uživatelů určitého navrhovaného programu.

Obr. 1 Proces rozhodování při tvorbě GUI [6] V popisu person by rovněž měly být nastíněny fyzické možnosti uživatelů, Většina programů, které můžeme nazývat za uživatelsky orientované,

zkušenosti nebo návyky ovládání počítače. [11]

vzniká za aktivní spolupráce tvůrců a uživatelů při vývoji softwaru, tedy při neustálém testování na uživatelích. [5]

User interface (UI) Interaction design (IxD) User interface neboli uživatelské rozhraní, je prostředí, přes které lidé komunikují se stroji, počítačovými programy anebo jinými procesy. Patří

Interaction design zkráceně označován (IxD), je obor zabývající se chováním

sem také způsob, jakým daný program nebo webová stránka odpovídá

a dialogem uživatelů ve vztahu k počítačovým programům. Tak jako mnohé

na podměty uživatele. Cílem je vytvořit nejefektivnější oboustrannou aktivitu

odvětví designu je zaměřeno na chování a vnímání uživatele. Na rozdíl od

mezi člověkem a strojem. Při navrhování UI je třeba vycházet z disciplín jako

technických oborů, které detailně popisují, jak věci skutečně fungují, můžeme

je ergonomie, psychologie nebo design. [1]

považovat interaktivní design za disciplínu převážně vycházející z domnělých představ, jak by věci měly fungovat. Podstatou interaktivního designu je

Human-computer interaction (HCI)

nalézání co nejlepších řešení nesnází, které mohou lidem nastat při užívání daného produktu. [7]

Interakce člověk-počítač. Zkráceně HCI je mezi-oborovou disciplínou zahrnující proces analýzy, výzkumu, plánování, design a interakce mezi lidmi

User experience design (UX, UE)

(uživateli) a počítači. HCI často bývá popisována, jako průnik informatiky a věd zabývajících se chováním lidí nebo též společensko-technickou vědou.

Pojem user experience design zkráceně UX nebo UE zahrnuje vše, s čím

Tato disciplína zkoumá vztahy tří klíčových částí, jedince (uživatele), počítače

se uživatel potýká při používání produktu. A to od fáze prvního seznámení

(výpočetního systému) a jejich způsob jakým vzájemně spolupracují.

s produktem, přes učení, až po jeho profesní používání. User experience je celkový pocit uživatele z daného produktu, zahrnující vizuální vzhled, intuitivní

Ideálním cílem je navrhnout systém, u kterého by nevznikaly mezi počítačem

ovládání, ergonomii atd. (obr. 2) Používání produktu, by nemělo vyžadovat

a zadavatelem úkolu žádné komunikační bariéry a chyby. [2]

hlubší studium návodů. [8]

Human interface guideline (HIG) Pojem Human Interface Guideline zkráceně označován HIG, je soubor pravidel a doporučení určených pro vývojáře aplikací. v grafickém slovníku bychom ho mohly přirovnat ke corporate identity systému. HIG definuje základní vizuální prvky, ze kterých mohou aplikační designéři či vývojáři čerpat při tvorbě aplikace. Cílem HIG je, aby vznikaly intuitivní dobře ovladatelné a uživatelsky konzistentní aplikace. [3] Graphical mock-ups  Graphical mock-up neboli grafický model, je jednou z fází pracovního postupu při navrhování uživatelského rozhraní. Grafickým modelem rozumějme skicu

Obr. 2 User experience [6]

grafického rozhraní, kterou většinou vytváří vizuální designér, který by měl nejdříve analyzovat strukturu informací a na jejím základě vytvořit detailní

Graphical user interface (GUI)

a precizní návrh. Tento se po schválení a testování předá vývojářům jako maketa GUI. Tvorba grafického modelu oddělí stránku vizuální od stránky

Graphical user interface zkráceně GUI je překládáno jako grafické uživatelské

procesu kódování. [4]

rozhraní. Jeho podstatou je zjednodušit uživatelům ovládání, při interakci

11

HISTORIE GRAFICKÝCH UŽIVATELSKÝCH ROZHRANÍ Dějiny lidstva se dělí na období od pravěku po novověk podle určitého významného rysu té doby, dnešní doba je známa jako doba Informační. Lidé si už neumí představit život bez počítačů, internetu, mobilního telefonu atd. Pro komunikaci s těmito produkty moderní doby používají uživatelské rozhraní.

Užívá se ovládacích zařízení schopných zjednodušit veškeré příkazy a přenést je snadno do počítače, mobilního telefonu nebo např. iPadu. Mezi masově rozšířené patří myš, klávesnice, tablet či dotykové zařízení. Kvalitní vizuální grafické rozraní zpříjemňuje a usnadňuje uživatelům intuitivní ovládání programů těchto zařízení. Historický vývoj naučil uživatele zažitým stereotypům v ovládání počítačů. Dnes je samozřejmé ovládat programy za pomocí dotykových displejů, spouštět je a manipulovat s nimi například pomocí ikon a oken. Podle historického vývoje je možné vysledovat to, co bylo podmětem pro vytvoření grafického uživatelského rozraní a proč má podobu, se kterou se setkáváme dnes v roce 2012.

Historie GUI je spjata s vývojem osobního počítače.

Obr. 3 oN-Line System [14]

NLS byl založen na vektorové grafice a mohl zobrazovat přímé čáry a text.

Memex

Velká písmena se vykreslovala za pomocí čárky nad malým písmenem, a to z důvodu nedostatku paměti počítače. Jednotlivé prvky uživatelského

1930 - Vannevar Bush napsal esej o zařízení zvaném „Memex“, které vypadalo

rozhraní pracovaly na základě odkazů neboli hyperlinků. Za zmínku stojí

jako plocha se dvěma dotykovými displeji s připojenou klávesnicí a skenerem.

řešení vizualizace vícero otevřených programů, které se zobrazovaly přes

Toto zařízení mělo přístup ke všem lidským vědomostem a fungovalo

celou obrazovku, ale bez použití okrajových lišt „Title bar“, které oddělují

na principu dnešních odkazů. V této době však ještě nebyl vynalezen žádný

jednotlivé programy od sebe a poskytují tak uživateli možnost manipulace

digitální počítač a proto se o tomto tématu dále nehovořilo.

okny v rámci pracovní ploch monitoru, podobně jako u programů Mac OS X, Ubuntu, Windows. [14]

1937 - Počátky uživatelského rozhraní jsou spjaty s vývojem výpočetních strojů během druhé světové války, kdy se začalo využívat v několika zemích světa programovatelných výpočetních zařízení pro luštění nepřátelských tajných kódů.

1945 - Bush se vrátil ke svým původním myšlenkám publikovaným v článku

Zajímavostí bylo, že pro ovládání NLS byla zvolena myš před světelným perem a dotykovou plochou, a to z důvodu, že manipulace s kurzorem za pomocí myši se zdála uživatelům nejvíce pohodlná.

První kurzor vypadal jako tenká linka, jejíž úlohou bylo vizuální znázornění aktuální polohy aktivní oblasti myši na monitoru.

pro Atlantic Monthly’s nazvaném „As We May Think“ (jak si můžeme myslet), tato esej byla inspirací pro mladého inženýra Douglase Engelbarta k pokusu sestrojit podobný stroj o kterém Busch psal. [12]

Xerox Alto Obr. 4 Alto GUI firmy PARC

NLS oN-Line System

1970 - Firma Xerox založila výzkumný ústav Palo Alto Research Center (PARC), kde byla vynalezena první laserová tiskárna. Tento vynález si vyžádal

1974 – Ve firmě PARC zformovali první verzi SmallTalk, objektově orientovaný

vytvoření grafického prostředí pro tvorbu předtiskových dokumentů.

programovací jazyk s přednostmi snadného ovládání a přehledností.

(rozšiřování lidského intelektu) své vizionářské myšlenky o počítačích. Navrhl

1973 - PARC dokončil svůj první počítač Xerox Alto, uživatel mohl vidět

se po spuštění zobrazilo, jako samostatná aplikace zabírající celou plochu

1962 - Publikoval Douglase Engelbart, bývá nazýván otcem grafického

Komponenty grafického uživatelského rozhraní byly součástí Smalltalk, které

uživatelského rozhraní (GUI), v článku „Augmenting Human Intellect“ program pro architekty sloužící k navrhování budov, fungující podobně jako

dokument ve stejné velikosti, jako byla finální tisková velikost. Celý obraz byl

monitoru. Každý spuštěný program měl vlastní aplikační okno ohraničené

dnešní program CAD - software určený k vytváření technické výkresové

rastrovaný-bitmapový o rozlišení 606 x 808 obrazových bodů. Alto neuměl

černou linkou. Jestliže uživatel kliknul nebo pracoval s programem,

dokumentace. [13]

pracovat s vektory, a proto mohly být texty zobrazeny pouze ve vodorovné

dané okno programu se vykreslilo přes ostatní okna a vznikala tak iluze

poloze. Nabízel však řadu různých druhů fontů a velikostí písma, která

kaskádového překrývání, podobně jako u papírů na pracovní ploše. Každé

oN-Line System (Douglase Engelbarta, (obr. 3) zkráceně NLS nabízel

mohla být upravována v editoru Bravo. Z tohoto editoru později jeho tvůrce

aplikační okno mělo vlastní lištu s názvem aplikace a pro přehlednost se

uživatelům síťové propojení mezi více počítači, editování textů, síťové sdílení

Charles Simonyi vytvořil Word pro firmu Microsoft. Vylepšení se dočkal také

po kliknutí zvýraznilo. Uživatel mohl po kliknutí na lištu s celým oknem

dokumentů, e-mail, chatování a video hovor v reálném čase. Počítače

ukazatel (kurzor) myši, který získal podobu šipky. První grafické uživatelské

pohybovat v rámci pracovní plochy. Celé uživatelské rozhraní bylo vyskládáno

Douglesovy doby zabíraly celé sály a informace se do nich vkládaly pomocí

rozhraní navržené pro Alto bylo velice strohé, skládalo se pouze z čar

z bitmapy a na sebe navazujících vzorů a čar. [12]

děrných štítků.

a opakujících se bitmapových vzorů. [12]

Small Talk

Z Alta známé posuvníky (scrollbar) nově mění proporci v závislosti na délce

Windows 1.0

obsahu. Uživatel tak získal přehled o velikosti plochy, která se do viditelného Small Talk přinesl způsob ovládání později označovaný jako WIMP (Windows,

prostoru obrazovky nevešla. Implementace myšlenky práce s ikonami

Po neúspěchu VisiOn Microsoft nabídnul trhu dlaždicového správce souborů

Icons, Menu, Pointing device) tedy systém využívající uživatelské rozhraní

inspirovala k zavedení systému drag-and-drop a vytvoření ikony koše. Drag-

s vizuálním grafickým uživatelským rozhraním. Prvně pojmenován jako

postavené na aplikačních oknech Windows, Icons - ikonách umožňujících

and-Drop přináší usnadnění uživatelům při práci se soubory tak, že uživatel

Interface Manager, později nazýván Windows. Počátkem roku 1983 vypadalo

uživatelům snadné a intuitivní spouštění programů. Menu seskupené nabídky

může uchopit ikonu pomocí zmáčknutého tlačítka myši. Uživatel s ikonou

grafické rozhraní Windows 1.0 jako kombinace VisiOn a textového editoru

se rozbalí po kliknutí nebo najetí myši uživatele. Pointing device je vizuální prvek.

může manipulovat a přesouvat do dalších složek. Zavedení Drag-and-Drop

Bravo navrženého pro Xerox Alto. První návrhy počítaly s dlaždicovým

Šipka která ukazuje uživateli místo, kde se nachází aktivní plocha zařízení (myš,

systému více přiblížilo práci se složkami netechnicky založeným uživatelům.

uspořádáním oken a to díky návrhům převzatých od vývojářů z PARC.

pero, trackball atd). Mezi nové GUI prvky, které SmallTalk zavedl do základních

Zjednodušena byla i myš, nově získala pouze jedno tlačítko, ale pro práci

Microsoft z počátku pracoval jako externí firma na vývoji Apple a tak se dostal

prvků GUI, jsou PopUp menu, radio button a dialogová okna.

v systému bylo třeba dvou možností označení a spuštění dokumentu,

k první testovací verzi systému Macintosh. v roce 1985 program Windows 1.01

to vyřešilo zavedení dvou kliku, který se stal standardem i u systémů

ještě neuměl pracovat s překrývajícími okny, ale byl barevný a používal již

využívajících více tlačítkovou myš. Po kliknutí na složku se spustila animace

řadu obvyklých GUI prvků jako menu, „skrolovací postníky“ a lištu s nabídkou

zvětšování složky, animace tak upozornila na složku, ze které vzešlo okno, což

služeb. [12]

mělo za následek zlepšení UX systému. [12] Unix 1980 - Koncem 80. let 19. století se začala objevovat nová uživatelská rozhraní vytvářená společnostmi AT&T (American Telephone and Telegraph), SUN (Stanford University Network), DEC (Digital Equipment Corporation) a HP (Hewlett-Packard) pracující na operačním systému Unix. Architektura síťových oken “X“ později zvaná jako Linux s podobným vzhledem jako používal Microsoft Windows, ale s možností užívání příkazového řádku. Představili novou myšlenku, kdy tahem myši přes okno dochází k jeho aktivaci a dovoluje uživateli do okna psát. [16] Obr. 8 MS-DOS Microsoft

Xerox Star 8010 1981 - Přišel Xerox s počítačem Xerox Star 8010, vycházející z počítače Alto. V oblasti GUI nastala zásadní chyba a to bylo zavedení dlaždicového uspořádání oken. Pracovníci se domnívali, že překrývání oken s možností posouvání po ploše je pro uživatele příliš matoucí a prosadili zavedení pevného dlaždicového rozdělení obrazovky. [12] Obr. 5 GUI Small talk.

Apple Lisa 1976 - Vyvinuli Steve Jobs a Steve Wozniak jednoduchý počítač za dostupnou

Obr. 9 MS- DOS Microsoft

cenu, Apple computer. První Apple ][ disponoval textem i grafikou, používal ale tradiční rozhraní příkazového řádku.

Macintosh

1979 - Byl vyvinut počítač Apple nové generace jménem Lisa. Při navrhování

1984 - Vedení vývoje počítačů Apple se chopil Steve Jobs, který nový projekt

uživatelského rozhraní pro Apple Lisa, byla vytvořena řada prototypů. Pro

nazval Macintosh. Vznikla devíti palcová obrazovka o rozlišení 512 x 384

snadnější práci se soubory se uvažovalo o čtyř-sloupcovém okně, které

obrazových bodů s malou pamětí bez podpory spuštění více programů

bylo později použito v systémech NEXT step a Mac OS X. Na vrchním okraji

Obr. 7 Xerox Star 8010

obrazovky se poprvé objevuje pracovní lišta s nabídkami funkcí. Další Inovací jsou rozbalovací okna s možností zapínání nebo vypínání položek a s ní nová

současně s grafickým prostředím z počítače Lisa. Tento počítač se stal prvním komerčně úspěšným počítačem nabízejícím uživatelům vizuální ovládání

Systém VisiOn

pomocí grafického uživatelského rozhraní.[12]

1983 – Firma VisiCorp začala prodávat samostatný počítačový systém

X Window Systém

související funkce zšednutí neaktivní částí nabídky.

VisiOn. Systém byl vhodný pouze pro počítače s vysokým výkonem, které nabízela pouze firma IBM. Uživatelé si mohli zvolit pro práci některý z

1984 - Technologický ústav v Massachusetts (MIT) vyvinul X Windows System

programů jako VisiOn Calk, VisiOn Graph, VisiOn Word, které se zobrazovaly

(dále pouze XWS), jeho cílem bylo poskytnout prostředí pro zobrazování

pouze monochromaticky v rozlišení 640x200 px. Systém neuměl změnit

několika příkazových řádků a hodin najednou na monitoru jedné pracovní

typ a velikost písma. Na rozdíl od systému Alto, VisiOn nabízel pouze

stanice. Neexistuje typické XWS uživatelské prostředí, protože záměrně

neproporcionální písmo s volbou bold nebo Italic a možnost podtržení textu.

neobsahuje specifikaci pro tlačítka, nabídky nebo styl oken. Místo toho

Hlavní způsob práce byl stále orientovaný na příkazový řádek, s jehož pomocí

obsahuje aplikační software jako správce widgetů- sady nástrojů a prostředí

se počítač ovládal. VisiOn neuměl pracovat s ikonami ani s dokumenty.

plochy (hlavního okna - desktop). [12]

Systém byl velice drahý a nepřinesl mnoho vylepšení oproti konkurenci.

Za zmínku stojí použití nového přístupu k zobrazování textu, jenž se nevejde do formátu obrazovky, přišli s řešením, kdy přidržením a tažením pravého Obr. 6 Apple Lisa. [15]

tlačítka myši je možné dokumentem procházet neboli „skrolovat“.[12]

13

>>>

Amiga Workbench Dalším z grafických rozhraní byla Amiga Workbench. Uživatelé zde mohli pracovat s ikonami a plovoucími okny, která se sama při otevření přizpůsobila svoji velikost. Nově uživatelé mohli celé pracovní prostředí posouvat nahoru nebo dolů mimo viditelné pole obrazovky, tím získali více místa k ovládání. Navigační lišta se dala za pomocí pravého tlačítka schovat a znovu aktivovat. [12]

Obr. 10 X Window Systém z roku 1987 z MIT, verze X11

Tandy Desk Mate Společnost Tandy Computer vydala první verzi grafického rozhraní Tandy Desk Mate. Program byl převážně textový, neuměl pracovat s okny a byl těžko

Obr. 13 Amiga Workbench

ovladatelný. Novým grafickým prvkem byly šipky umístěné na liště okna, s jejichž pomocí mohl uživatel listovat mezi soubory. Hlavní důraz byl kladen

Podoba a užívání GUI v osmdesátých a počátkem devadesátých let bylo stále

na ovládání pomocí klávesnice a klávesových zkratek.

v plenkách, většinu příkazů pro ovládání počítače bylo třeba zadávat pomocí příkazového řádku, tedy CLI (Command Line Interface). Ovládání počítače pomocí příkazového řádku, klade na uživatele určité znalosti formy příkazů nebo programovacího jazyka, což mělo za následek pomalejší rozšíření

Obr. 15 Windows 2

počítačů mimo odbornou veřejnost. [12] Acorn Computers Geos (Graphic environment operating system) Anglická společnost Acorn Computers představila počítač Acorn A305 V roce 1986 bylo společností Berkely Softworks představeno nové grafické

a A310 s grafickým uživatelským rozhraním Arthur. Jehož přínosem je

rozhraní Geos (Graphic environment operating system, grafické prostředí

takzvaná dokovací lišta, ve které se zobrazovaly ikony spuštěných programů.

operačního systému). Hlavní předností GUI GEOS byla nenáročnost výkonu

Uživatel si mohl zvolit, zda si přeje ikonu nastavit na stálo nebo k ní

počítače. v té době byl druhým nejrozšířenějším grafickým systémem

přiřadit klávesovou zkratku pro rychlé spouštění. Arthur využíval pro lepší

pracujícím s okny a ikonami. [17]

vykreslení písem a grafiky technologii anti-alise nebo-li vyhlazování. Špatná kvalita písma byla způsobena omezenou zobrazovací možností obrazovek.

Obr. 11 Grafické rozhraní Tandy Desk Mate [12]

Grafická rozhraní osmdesátých let se vyznačují proporcionálním písmem,

GEM (Graphical Environment Manager)

pomohla vylepšit vizuální zobrazení textu. Navíc poprvé uživatelé mají

které působilo kostrbatě, až právě technologie vykreslování (anti-alise) možnost použít neproporcionální písmo, ale paradoxně Acorn musel nakonec 1985 - Firma Digital Research představila grafické rozhraní pro PC a Atari,

pro své GUI zvolit písmo se stejnou šířkou liter z důvodu malého rozlišení

které vypadalo téměř k nerozeznání od GUI systému Lisa a Macintosh. Kvůli

obrazovky 640 x 200 px zobrazující 16 barev.[12]

sporům s podobností operačního systému byl GEM (Graphical Environment Manager, neboli Grafické prostředí klienta) později nabízen jen na platformě Atari.

Obr. 14 Grafické rozhraní GEOS.

Windows 2.0 1987 - Byla představena Windows verze 2.0 pod obchodním názvem New Wave. Hlavním přínosem z hlediska grafického rozhraní byla možnost překrývání oken, dále do lišty pracovního okna byla přidána tlačítka s šipkami pro maximalizaci a minimalizaci oken. Vzhled GUI a uživatelské ovládání bylo natolik podobné s Apple, že Apple Microsoft zažaloval. [12] Obr. 12 Grafické rozhraní GEM [12]



Obr. 16 Grafické uživatelské rozhraní Arthur

2. Mnoho dřívějších GUI minimalizovalo spuštěné programy do ikon na plochu, kde mohly být ztraceny mezi podobně vyhlížejícími ikonami, nebo zakryté otevřenými okny. Hlavní panel tento problém vyřešil ukládáním všech spuštěných programů do jednoho viditelného místa.

3. Na hlavní panel byl přidán systém tray, kde mohl uživatel vidět hodiny a ikony systémových aplikací.

Dnes se hlavní panel se start nabídkou a běžícími aplikacemi běžně používá v Microsoft a Linux GUI. Je pozoruhodné, jak zatímco Microsoft kompletně přepracoval rozhraní správce programů a start nabídku s hlavním panelem, Apple pouze postupně přidal hlavní panel do jejich systému. Společnost Microsoft se agresivně věnovala vývoji GUI, což způsobilo rychlý vzestup jejich systému mezi lety 1980 a 1990. Taková extrémní ochota ke změně se snahou Obr. 18 Grafické rozhraní OS/2 [19]

vyvarovat se dogmat a ideologií je velice neobvyklá. V roce 1983 v televizním programu nazvaném Apple Macintosh Dating Game se Steeve Jobs ptal

Windows

Billa Gatese, zda se stane Macintosh třetím průmyslovým standardem. Bill Gates odpověděl, že k vytvoření nového standardu nestačí pouze něco

1990 - Počátkem devadesátých let 20. století

málo odlišného, ale něco co je opravdu nové a co zachytí lidskou představu,

upadla popularita mnoha počítačových platforem. Windows a Macintosh

a Macintosh je ze všech strojů, které kdy Gates viděl, pouze jedinou, která

přežili GUI válku a v této diplomové práci bude nadále věnována pozornost

splňuje tyto standardy. [20]

pouze těmto dvěma nejvýraznějším operačním systémům.

Windows 3.0 jako první představil správce programu, který umožnil spouštět programy poklikem na ikonu. Předchozí verze používaly správce programu MS-DOS (MicroSoft Disk Operating Systém - Diskový operační systém), který řídil spouštění aplikací. Navíc to byl jediný program, který dovolil uživateli změnit pozadí plochy a všechny ikony byly přepracovány k využívání všech dostupných 16 ti barev s VGA (Video Graphics Array, počítačová zobrazovací Next Step

technika). Navíc u této verze tlačítek byl přidán stínek.

1988 - Vyšla první verze operačního systém a GUI NextStep. Uživatelům přinesla dokovací lištu s možností kotvení lišty na strany obrazovky, poprvé se objevuje tlačítko „X“, tedy symbol pro zavírání oken. Novinkou je vertikální lišta s kontextovými nabídkami bez pevného ukotvení, uživatel mohl lištu

Obr. 20 Windows 95 [20]

přetahovat po obrazovce. Vizuální vzhled oken a grafických prvků získal ostrý 1998 - První verzí Windows, která podporovala aktivní plochu, byla Windows

a plastický dojem, který se stal trendem dalších let.[12]

98. Obsahovala také panel rychlého spouštění pomocí ikon umístěných v liště vedle nabídky start. Byla to zároveň poslední verze založená na systému MS-DOS.

Obr. 19 Windows 3 [20]

1995 - Microsoft vydal první verzi operačního systému Wndows 95 s uživatelským prostředím, které se na dlouhou dobu stalo výchozím standardem pro další verze systému. Správce systému nahradil Windows Explorer a objevila se nabídka „rychlého spouštění programů” Start. Trojice tlačítek pro minimalizaci, maximalizaci a zavření získala svoje pevné místo Obr. 17 Next Step [18]

v ovládací liště každého okna. Nové GUI zavedlo lištu hlavního panelu a bylo dosaženo tří věcí:

OS/2

Obr. 21 Windows 98 [22]

1. Nabídka „Start“ byla umístěna zcela vlevo od hlavního panelu, čímž se V roce 1988 se společnosti IBM a Microsoft snažily vytvořit nový operační

zjednodušilo spouštění programů a přístup k funkcím operačního systému.

2001 - Společnost Microsoft vydala se sloganem “Experience the Best of

systém s grafickým rozhraním, které by nahradilo dosud používané prostředí

Na místo lovení ikon na ploše nebo ve Správci souborů, byly veškeré funkce

the Digital Age” (zažijte to nejlepší z digitální doby) nový operační systém

DOS. První verze systému byla sice textová, ale hned v další verzi označované

nyní na jednom místě. Přestože měla nabídka start úspěch, tak ji někteří

Windows XP, se zbrusu novým rozhraním pojmenovaným Watercolor (akvarel,

1.1 se objevilo monochromatické grafické prostředí známé pod názvem

uživatelé nepovažovali za srozumitelnou jako pracovní plochu a často

v alfa verzi), Luna byl jeho neoficiální název. [23]

Presentation Manager. Barevné zobrazení přinesla, až verze 1.2, Grafické

pokračovali v ukládání programů a dokumentů na plochu.

prostředí bylo inspirováno Windows 2.0. [12]

15

Microsoft se snažil najít formu vzhledu vyhovující jak pro domácí tak firemní

2012 - Společnost Microsoft se chystá uvést nový operační systém

uživatele a přišel s jasně barevným grafickým rozhraním, které nebylo

Windows 8 s grafickým uživatelským rozhraním vycházejícím ze stylu Metro

populární pro pokročilé uživatele. Novinkou bylo zavedení „System Tray“ (část

(obr. 24), původně navrženého pro Windows mobile 7.

hlavního panelu vedle hodin, ve kterém se zobrazovaly ikony některých systémových programů), dovoloval program ukrýt, ale ne zavřít systémové

Design Metro je založen na principu švýcarského designu a používá vlastní

aplikace. Ačkoliv se změnil vizuální styl Windows, základní funkce zůstaly

font Segoe. Záměrem Microsoftu bylo vytvořit elegantní, rychlý, osvěžující

stejné a orientace byla v podstatě velmi stejná jako u předchozí verze, se

a moderní vzhled, kde je důraz kladen na obsah.

dvěma výjimkami. XP start menu bylo přeměněno, kdy běžněji používané aplikace byly v popředí a ve středu, navíc byl také vylepšen vzhled ovládacího

GUI Metro

panelu. Přestože to bylo míněno ke snadnějšímu užívání, mnoho uživatelů zůstalo u klasického vzhledu. [20]

Je v současné době v roce 2012 nejlepší grafické prostředí z důvodu rozložení místa.

GUI rozhraní bylo změněno, aby byl výsledný produkt obecněji teplejší a přátelštější. Ikony byly plné barev a uvnitř složek se objevily popisy.

Zajímavostí bylo, že většina velkých firemních uživatelů a domácích pokročilých uživatelů tento nový vzhled obvykle vypnula. Klasické uživatelské

Je schopen zobrazit více informací na ploše a to vše v jednotném a přehledném vizuálním stylu.

rozhraní je bez ikon na ploše, start menu je nastavené do klasického režimu a systém tray nemá nadbytečné ikony. [21]

Klade větší nároky na učení uživatele, jelikož přináší nový způsob zobrazení a práci s ním a nepoužívá metafor realistického vzhledu.

Obr. 25 OS Systém 7 [26]

Dokáže rychleji zobrazit data jednotlivých programů, bez nutnosti program spustit. To vede k rychlejší práci uživatele.

2001 - Apple vydal nové GUI s názvem Aqua pro nový operační systém Mac OS X. Apple převedl grafické prostředí do bitmapy, což pomohlo k lepšímu User experience.

Obr. 22 Windows XP [23]

2007 - Windows Vista znamená výhled, rozhled, v této verzi je grafické rozhraní zcela jiné, je označováno jako Aero. Objevuje se zde 3D efekt, průhledná okna, trojrozměrné animace a ikony, které zobrazují náhledy u multimediálních souborů i s popisem. Velikost tohoto náhledu je možné měnit. Toto nové prostředí však vyžaduje vyšší nároky na vybavení počítače, který by měl mít grafickou kartu s WDDM (Windows Display Driver Model) ovladačem. [20] 2009 - Vyšel nový operační systém Windows 7, který jako první od doby co vyšel Windows 95, radikálně změnil jádro Windowsovského uživatelského rozhraní. Zatím co předchozí verze operačního systému přidávaly a vylepšovaly funkčnost, nové nahradily základní technologii a změnily barevné schéma, základ u Windows 7 zůstal nezměněn. Přechod z Windows Vista na Windows 7 tedy nebyl tak radikální jako přechod z Windows XP na Windows Vista. Názvy programů u ikon na hlavním panelu byly odstraněny

Obr. 24 Windows 8 [25]

ve prospěch velkých ikon. Táhnutím myší přes ikonu se zobrazí náhled a stiskem pravého tlačítka se objeví tabulka Jump list s nabídkou rychlého

Operační systém je navržen pro použití u zařízení, která jsou ovládána myší

2005 - Mac OS X vydal další verzi zvanou Tiger s vylepšeným vyhledáváním

spojení s funkcemi programu. Novinkou byl také náhled do libovolné

i pro dotyková zařízení. Nová dlaždicová start nabídka nabízí rychlý přístup

pomocí Spotlight, které uživatelům urychlilo užívání systému. Další novinkou

části systémů složek. Uživatel tak získal představu o organizaci složek, co

k programům. Uživatel si může nabídku snadno přizpůsobit pouhým

byl Dashboard, který vytvořil další pracovní plochu doplňků, jakou jsou hodiny,

obsahují a kde jsou umístěny. Další změnou prošla správa oken. Pokud

přetáhnutím dlaždic z jednoho místa na druhé. Největším přínosem tohoto

kalkulačka, počasí, apod. Dále vytvořili nový způsob minimalizování oken.

uživatel přesunul okno do popředí, automaticky se zvětšilo a naopak. Pokud

rozhraní je vhodnější zobrazení uspořádání aplikací na obrazovce uživatele,

bylo okno přesunuto k levé nebo pravé straně obrazovky, pomocí funkce

který si může zvolit ze dvou velikostí dlaždic.

přichytit automaticky vyplnilo 50% obrazovky, což umožňovalo otevřít dvě

Do současných GUI operačních systémů je zaváděna podpora a plná integrace ovládacích prvků z dotykových zařízení, protože se změnil způsob práce

okna a pracovat s nimi současně. Každé z oken bylo umístěno na jednu část

Posunování přes obrazovku je u dotykových zařízení možno pouhým přejetím

obrazovky. Pokud bylo otevřených více oken, bylo možné tahem myší mimo

prstu do stran, nahoru nebo dolů. u ostatních zařízení je možné „skrolovat“

ikonu v základním panelu jednotlivá okna zobrazit a tahem myší pryč z ikony

pomocí postníků po stranách obrazovky nebo také použitím tlačítek

došlo k opětovnému zavření okna. Windows 7 také umožňuje párování OS

na klávesnici nahoru a dolů. Na tabletu je také možno

s obrazovkou citlivou na dotek nejen jednoho prstu a tím je možné taky

přibližovat a oddalovat pohled na plochu pomocí dvou

procházet složky a soubory tahem prstů. [24]

prstů.

uživatelů v důsledku masového rozšíření těchto zařízení.

Macintosh 1991 - Uvedla společnost Apple první PowerBook (definoval pojem laptop) s operačním systémem System 7, který vycházel ze systému Nextstep. Organizace systémového adresáře byla jednoduchá. Obsahoval systém souborů, vyhledávač, poznámkový blok apod. Ikony jsou jednoduché, stylizované v linkách a uchycené na mřížku.

Obr. 23 Windows 7

Obr. 26 GUI systému Mac OS X [27]

HISTORIE GUI U DOTYKOVÝCH ZAŘÍZENÍ

Dotyková zařízení se stala velkým hitem dnešní doby a zcela jistě se budou používat stále více. Jejich vývoj však sahá daleko do historie.

1965 - Britský vynálezce E. A. Johnson jako první popsal svou představu o kapacitním dotykovém displeji. V roce 1967 vydal jiný článek za pomocí diagramů a fotografií prototypu o tom, jak tato technologie funguje. Johnson pracoval v The Royal Radar Establishment in Malvern, England a zajímal se o vývoj dotykových obrazovek pro řízení letového provozu. Tato technologie kapacitního snímání byla užívána až do roku 1995 a slouží jako předchůdce dnešních ATM systémů (Automated Teller Machine), strojů na jízdenky atd.

Dotyková obrazovka je schopna snímat pouze jeden dotyk v jednom čase.

[28] 1971 - Byla založena firma Elographic, Inc., jejím cílem bylo vytvořit digitizátor grafických dat pro užití ve výzkumu a v průmyslových aplikacích.

S principem dotykového senzoru přišel Dr. Sam Hurst. V roce 1971 doktor Hurst shromáždil devět přátel z různých oblastí a experti začali společně vylepšovat, vyrábět a prodávat jejich nový produkt dotykový senzor. Elograf nebyl zcela transparentní jako moderní dotykové obrazovky, přesto se ale stal významným mezníkem v dotykových obrazovkách. [29] 1972 - Na počátku 60.tých let vznikl projekt Plato na Univerzitě v Illinois.

Profesor Don Bitzer se začal zajímat o využití počítačů pro učení a s několika kolegy založil vzdělávací výzkumnou laboratoř (Computer-based Education Research Laboratory -CERL). Bitzer ve spolupráci s několika kolegy sestrojil v roce 1972 hardware Plato. Studenti mohli pomocí dotyku na obrazovku odpovídat na otázky. [30] 1974 - Sam Hurst vyvinul první opravdovou transparentní dotykovou obrazovku.

1977 - Firma Elographics vyvinula a nechala patentovat technologii rezistivní dotykové obrazovky, která reaguje na tlak vyvolaný dotykem prstu, nebo nehtu apod. Tyto dotykové obrazovky jsou populární dodnes.

1977 - Společnost Siemens financovala snahu společnosti Elographics, vyrobit první ohebné sklo s dotykovým senzorem, které se později stalo prvním zařízením s pojmenováním dotyková obrazovka. [31] 1982 - Na Univerzitě v Torontu byl vyvinut první multi-touch tablet, který byl schopen pomocí videokamery číst více kontaktních bodů. [32] 1983 - Počítačová firma Hewlett-Packard představila domácí počítač s technologií dotykové obrazovky HP-150, přes obrazovku byla vytvořena mřížka z infračerveného světla, která snímala pohyby prstů.

Obr. 29. Telefon Simon

[31] Myron Krueger vynalezl optický senzor, který sleduje pohyby rukou a uživatel

1985 - Na univerzitě v Torontu vyvinuly první multi-dotykový tablet schopný

1993 - Apple vyrobil Newton PDA (Personal Digital Assistant). Toto zařízení

snímat libovolný počet vstupů, doteků. Senzor tabletu snímal spíše kapacitní

bylo schopné rozeznávat rukopis a používalo podobné grafické rozhraní jako

tak může komunikovat pomocí gest. Nemělo to sice smysl pro dotykové

než optický signál, mohl tedy být tenčí a jednodušší než kamerový systém.

telefon Simon. Hlavní menu bylo vespodu rezistivní dotykové obrazovky.

obrazovky, ale stal se významnou inspirací pro multi-dotykový systém.

[33]

Ovládalo se pomocí pera.

1984 - Bob Boie z Bell labs představil první multi-touch obrazovku. Toto

1991 - Byl demonstrován koncept digitálního stolu, hmotného rozhraní, od

1998 - Na univerzitě amerického státu Delaware vyvinuly nový dotykový

zařízení bylo schopné zachytit více dotykových bodů na displeji a umožňoval

Pierre Wellnera z firmy Xerox. Digitální kamera snímala stůl, ruce, papír,

tablet iGesture Pad, mimo jiné začali vyrábět i dotykovou klávesnici.

posouvat s grafickými objekty pomocí tahem prstu přes obrazovku

dvěma prsty bylo možno změřit objekt, vymezit ho a tahem prstu přes stůl

Společnost vyrábějící tyto produkty koupil v roce 2005 Apple a začal používat

s výbornou časovou odezvou. [33]

přenést na vedlejší část stolu. Na obr. je znázorněna kalkulačka. [35]

Touchpad do svých výrobků, jako jsou iPhone, iPad, a další.

Hodinky Casio AT-550 „včetně magické dotykové obrazovky“, klasické

2002 - Začala společnost Microsoft technologii touchpad, když

hodinky bylo možné přepnout mechanickým tlačítkem na boku hodinek

představila edici tabletů s grafickým rozhraním Windows XP.

do modu kalkulátoru. Tahem prstu přes obrazovku, bylo možné vykreslit jednotlivé číslice a znaménka plus, minus, násobit, dělit a rovná se, což se

2005 - V tomto roce vyšla na trh francouzská firma JazzMutant s multi-

následně zobrazovalo v displeji nad ciferníkem.

dotykovou obrazovkou schopnou reakce na dotyk jakéhokoliv počtu prstů.

Je to multi-dotykový hudební ovladač vhodný pro hraní elektronické hudby.

Grafické rozhraní je přizpůsobeno k tomu, aby bylo dobře a rychle ovladatelné. „Tlačítka“ jsou statická a pro snadnější orientaci barevně rozlišená.

2007 - Firma Apple představila krále chytrých telefonů iPhone ovládaného pouze dotykovou technologií. Grafické rozhraní operačního systému iOS (iPhone operating system) je intuitivní a navrženo pro přímou manipulaci a používání multi- dotykových gest, bylo navrženo „pro Váš prst“. Apple přišel s novým přístupem k ovládacím prvkům jako je skrývání posuvníků a ostatních ovládacích prvků, které se uživateli zobrazí právě tehdy, když jsou potřeba. Obrazovka proto stále působí přehledně. Pro komunikaci Obr. 28. Koncept digitálního stolu a rozraní firmy Xerox 1991

s operačním systémem patří gesta jako posun prstem po obrazovce, poklepání, dotyk dvěma prsty- posunutím prstů od sebe dochází ke

Obr. 27 Dotykové hodinky Casio AT-550 [34]

1993 - Společnost IBM ve spolupráci s telekomunikační společností Bell

zvětšení obrazu a naopak, všechny tyto doteky mají specifickou definici

South představila telefon Simon, první produkt, který kombinoval dotykovou

v rámci operačního systému iOS a multi-dotykového displeje. Telefon je díky

obrazovku s telefonem. v tiskové zprávě byl tento telefon popsán jako

vnitřnímu akcelerometru schopen rozeznat natřásání a otáčení ve třech

bezdrátový stroj, pager, zařízení pro elektronickou poštu, plánovač schůzek,

rozměrech, otočením telefonu dochází například k přepínání režimu portrétu

adresář, kalkulačka a skicák s perem. Grafické rozhraní bylo pouze černobílé

na panoramatické zobrazení. [31]

a skládalo se z velkých ikon.

17

Obr. 30. Telefon Apple iPhone [36]

2010 - iPad od firmy Apple přišel s novým uživatelským rozhraním vycházejícím z iPhonu, ale upraveným pro větší obrazovku. Nejvýznamnějším přínosem, bylo přidání boční navigační lišty. Obecně by aplikace měly obsahovat seznam obsahu, který umožňuje vejít do adresáře nebo se vrátit

DOTYKOVÁ Z U VYBRANÝ VOZIDEL

zpět.

Obr. 31 Dotykový tablet s nabídkou menu. [36]

2011 – Představila společnost Samsung interaktivní multi-dotykový stůl SUR40 s operačním systémem Surface 2.0 společnosti Microsoft. [32]

V automobilovém průmyslu se setkáváme s řadou přístrojů, které se snaží nabídnout nové technologické trendy, ale začlenění nových technologií se objevuje až s několikaletým zpožděním. Jedním z příkladů je zavedení dotykových panelů do palubních desek.

Přístrojový panel ukazuje uživateli informace z palubního počítače, jako jsou vizuální zobrazení otevřených dveří, TV, obraz z parkovací kamery nebo informace o stavu vozidla. Z počátku to byly pouze navigace nebo rádia propojené s audio systémem nebo anténou, později byla přidána plná integrace s řídící jednotkou automobilu.

Většina dotykových zařízení v prvním desetiletí 21. století, používala pro ovládání nevhodné grafické rozhraní vycházející z principů ovládání myší nebo perem. To znamená, že obrazovky byly zahlceny mnoha kontrolními prvky, ve kterých se uživatel ztrácel. Častou chybou byly malé velikosti aktivních ploch (tlačítek), které bylo obtížné zmáčknout. Mezi další nedostatky patřila špatná volba barev, které řidiče při změně světelných podmínek oslňovaly a rušily přílišnou nebo naopak nízkou intenzitou svitu. Ke zkvalitnění vnímání barev a jasu přispělo zavedení optických senzorů. Optické senzory fungují tak, že na základě naměřených údajů regulují podsvícení obrazovek, čímž přispívají

Obr. 32 Multi-dotykový stůl

v

k lepší čitelnosti GUI a komfortu řidiče.

ZAŘÍZENÍ ÝCH

GUI U VYBRANÝCH ELEKTROMOBILŮ Nissan Leaf Elektrický automobil byl uveden na trh v prosinci 2010. Nissan Leaf má dotykový panel umístěný ve středu palubní desky mezi ventilátory a ovládáním klimatizace (Obr. 33). Po pravé a levé straně dotykové obrazovky jsou ovládací manuální tlačítka pro rádio, satelitní navigaci, přepínání na vstup externího zařízení, ovládání hlasitosti, vypnutí přístroje, navigace, menu, nastavení klimatizace. [37]

Obr. 33. Interiér vozu.

Obr. 34 Přístrojová deska.

Přístrojový panel je rozdělen na dvě digitální obrazovky umístěné nad sebou za volantem. v horní obrazovce (obr. 34) jsou zobrazeny kontrolní varovné ikony 1, ECO indikátor 2, rychloměr 3, hodiny 4, venkovní teplota 5, kontrolní

Obr. 35. Dotykové zařízení v Nissanu Leaf.

ikony blikačů 6. Dolní obrazovka znázorňuje teplotu bateriových článků 7, varovné upozornění 8, vizuální znázornění síly záběru motoru 9, kontrolku

účaří ovládacích prvků. Mapové podklady jsou příliš barevné a při letmém

Futuristické zobrazení přístrojové obrazovky, vypadá daleko zajímavěji než

informující, že vozidlo je připraveno k jízdě 10, počítadlo ujetých kilometrů 11,

pohledu se v nich uživatel snadno ztratí. Noční režim navigace se musí přepínat

zcela nezajímavé grafické rozhraní dotykové obrazovky. Rozložení ovládacích

palubní počítač, dojezd vozidla 12 a ukazatel stavu baterií 13 a 14. [38]

manuálně, jelikož chybí optický senzor korigující svítivost na základě množství

prvků je nevhodné a chybí mu důkladná analýza vedoucí k redukci množství

světla v automobilu. Nevhodné je řešení informačních oken, a to z důvodu

zbytečných prvků a nastavení.

Grafické rozhraní dotykové obrazovky Nissanu Leaf (Obr. 35), používá klasické

malého kontrastu vůči barvě pozadí. Barevné pozadí se vzorem má za následek

rozložení ovládacích prvků, tj. menu s ikonou a menu s tlačítkem back.

snížení čitelnosti lineárního bezpatkového písma. Výběr písma mohl více

V navigaci se objevují nekonzistentní velikosti tlačítek a nedodržování stejného

korespondovat s písmem použitým na přístrojové desce.

19

Přístrojový panel má dvě digitální obrazovky, z nichž jedna na levé

situována uprostřed palubové desky mezi otvory pro ventilaci. Obrazovka má

straně zobrazuje informace o automobilu a druhá na pravé straně

stínítko a je zapuštěna do palubní desky. Manuální ovládání hlasitosti a hudby

Výroba elektromobilu Ford Focus Electric začala v prosinci v roce 2011

zobrazuje informace o telefonu, navigaci, klimatizaci a zábavě. Ovládaní

je umístěno níže mezi obrazovkou a tlačítky klimatizace. Řidič může ovládat

a v témže roce získal ocenění Green Car Vision Award.

je umístěno na pravé i levé straně volantu. Hlavní dotyková obrazovka je

řadu funkcí pomocí hlasového ovládání Sync. [39]

Ford Focus Electric

Grafické uživatelské rozhraní firma Ford nazývá My Ford Touch a používá modro černé barevné schéma. Barevná kombinace je vhodná pro noční řízení, jelikož neruší řidiče přílišným svitem obrazovky. Přes media center může uživatel ovládat služby, jako jsou navigace, telefon, rádio, přehrávání hudby, informace o vozidle a klimatizaci. GUI má několik ovládacích zón. Dotykem do rohů obrazovky se spouští čtyři hlavní služby rádio, navigace, telefon a klimatizace. My Ford Touch používá jednobarevných stylizovaných ikon, které působí jednotně.

Navigační menu je nekonzistentní, na jedné obrazovce jsou ikony zobrazeny ve 3D kruhovém zobrazení, a na další se objevují vedle sebe. Již zmíněné 3D kruhové zobrazení je nevyhovující z ergonomického hlediska, uživatelé si pamatují polohu ikon služeb a rotující ikony, které jsou stále na jiném místě, vyžadují více času pro jejich nalezení a spuštění. Navigace má příjemné mapové podklady i barevné schéma.

Ikony nad obrazovkou jsou stále viditelné a působí rušivě. 3D vykreslování budov je nevhodné, jelikož snižuje přehlednost map. Animace přechodů mezi nabídkou se mění přes černou barvu a celkově působí trhaně. Velikost ovládacích prvků je příliš malá a těžko dosažitelná. Náročná dosažitelnost je také způsobena z důvodu zapuštění obrazovky do palubní desky, která tak tvoří bariéru pro dotyk, dokonce uživatel, aby byl schopen dotknout se spodního okraje obrazovky, se musí naklonit a vytočit zápěstí ruky. Řidič má možnost si zvolit několik druhů rozložení ovládacích prvků a tím získat například přehled o chodu všech zařízení. Pro znázornění eko lze zvolit například poletující motýlky, kteří se pohybují na pozadí obrazovky pod písmem a mění barvu v závislosti na stylu jízdy.

Grafické uživatelské rozhraní celkově působí kompaktně a vizuálně je propojené s barevnou září při kraji obrazovky, která je spíš líbivým než funkčním prvkem podobně jako poletující motýlci, snižují viditelnost důležitých informací na obrazovce. Ergonomické nevyhovující umístění obrazovky zachraňuje technologie hlasového ovládání, díky kterému se uživatel nemusí obrazovky prakticky dotýkat. Dle vyjádření User Interface Design inženýra z firmy Ford Jasona Johnsona se My Ford Touch snažil do zařízení vměstnat co nejvíce technologií a tomu také odpovídá výsledná forma uživatelského rozhraní, navržená podobně jako robustní systémy, do kterých je možné stále přidávat nové funkce. [52]

GUI OSTATNÍCH VYBRANÝCH AUTOMOBILŮ Peugeot 208 Peugeot 208 automobil francouzské automobilky byl představen v Ženevě v březnu 2012, v ČR je v prodeji od září 2012.

Přístrojový panel (Obr. 37) s analogovými budíky a malou obrazovkou je umístěn za volantem vozidla. Po pravé straně volantu je dotyková obrazovka, která ukazuje důležité informace. [40] Peugeot nabízí zajímavé grafické rozhraní vycházející z modro-stříbrné kombinace barev, tedy kombinace, která nebude řidiče rušit nebo oslňovat při snížených světelných podmínkách. Dotykový panel má tři manuální Obr. 36 Dotykové zařízení My Ford Touch.

tlačítka, otočné pro volbu hlasitosti zvuku a vypnutí systému, tlačítko

Navigace má drobné problémy s dodržováním stejné velikosti dotykových

Automobilka Peugeot nabídla zajímavý a funkční koncept grafického rozhraní,

navigace a hlavního menu. Menu a podnabídky se snaží evokovat 3D prostor.

ploch. Aktivní plochy, které musí uživatel zmáčknout, jsou příliš malé pro

ze kterého je cítit, že již od začátku byl u jeho vývoje přítomen vizuální

Vizuální vzhled ikon působí konzistentně a nerušivě. Povedené je i řešení

použití v běžném provozu. Nevhodně zvolené je rozložení nabídek menu,

a grafický designér.

klávesnice. Mapové podklady jsou přehledné, založené na šedivém podkladu

jelikož některé funkce jsou schovány mimo viditelné pole. Dotykový

a modré šipce značící polohu vozu. Uživatel má možnosti se vrátit zpět při

přístroj nepodporuje ovládání hlasem, což by přispělo ke zlepšení ovládání

zmáčknutí ikony šipky v levém horním rohu obrazovky. Příjemně působí i

a bezpečnost při řízení automobilu.

animace evokující odsunutí objektů mimo viditelné pole obrazovky po kliknutí na položku v menu. Dobře čitelný je lineární font v grafickém rozhraní.

Obr. 37. Dotykový přístrojový panel vozu Peugeot 208.

21

Škoda Citigo Škoda Citigo je automobil vyráběný v Bratislavě od roku 2011. Palubní

neobjevuje. Jednotlivá menu tlačítka jsou označena ikonami a názvy služeb.

Navigace používá lineární písmo Neo Tech medium, které vytvořil Sebastian

deska automobilu nemá vestavěnou dotykovou obrazovku, ale k vozu je

Ikony jsou stylizované bílou linkou o stejném tahu. Celý set ikon působí

Lester v roce 2004. Tvar znaků Neo Tech koresponduje s tvarem ikon, ale

možné za příplatek dokoupit externí multifunkční přístroj Move & Fun, který

kompaktně a čistě.

špatně se vykresluje na dotykovém přístroji a u delšího textu se znaky slévají.

lze snadno propojit s automobilem přes zástrčku nad ovládáním klimatizace.

Zařízení Move & Fun neumí automaticky snižovat intenzitu jasu obrazovky

Přístrojová deska není propojena s dotykovým zařízením a ani na volantu

a nelze automaticky přepínat barevné režimy mapového podkladu na noční

nejsou žádná tlačítka k ovládání. Move & Fun nabízí řadu funkcí, jako jsou

nebo denní režim. Ovládací prvky GUI dodržují přesné rozmístění na mřížku,

navigace, rádio, telefonování, ovládání hlasem a informace o vozidle. [41]

rozložení prvků je konzistentní a nudné.

Základní barvou podkladu u grafického rozhraní dotykového přídavného

GUI Move & Fun je funkční dotykový přístroj, jehož GUI vychází z tradičního

zařízení je černá barva v kombinaci s kontrastními bílými nebo zelenými

vzhledu dřívějších modelů (2005) společnosti Navigon. Grafické prvky,

liniemi okolo ovládacích tlačítek, což je vhodné při malém osvětlení. Po

které simulují realistický vzhled tlačítek společně s plastovým rámečkem,

spuštění navigace se objeví logo Škoda a následně nabídka čtyř tlačítek

neodpovídají zbytku interiéru vozu.

(telefon, navigace, media, car info) a černá lišta na spodním okraji obrazovky.

Tlačítka mají černý vzhled a ve vrchní polovině šedivý přechod, takže vypadají jako z lesklého materiálu, který ladí se vzhledem plastového rámečku obrazovky, je na škodu, že se nikde jinde ve vozidle podobně vypadající plast Obr. 38 Interiér vozu Škoda Citigo s multifunkčním přístrojem Move & Fun.

NAVRHOVÁNÍ OVLÁDACÍCH PRVKŮ AUTOMOBILU Jednou z klíčových disciplín zabývajících se navrhováním ovládacích prvků je ergonomie, která si klade za cíl navrhovat předměty tak, aby co nejlépe odpovídaly pohybovým možnostem lidského těla. Při navrhování automobilu je třeba dbát na ergonomii tvarů a umístění ovládacích prvků tak, aby byly bez námahy a snadno dosažitelné.

Špatné ovládání a celkově nepřívětivé uživatelské rozhraní, je způsobeno neefektivním procesem vývoje. Dle zprávy z roku 2004 [42], chybí efektivní metodologie vývoje, při níž je od začátku vývoje konceptu přítomen interface designér a celý proces je orientovaný na potřeby uživatele. Ve zprávě je znázorněno schéma optimální metodologie hodnocení návrhu.

Ideální velikost dotykové plochy u dotykových zařízení Ideální velikostí plochy pro ovládací prvky dotykového zařízení se rozumí taková velikost, na jejíž pohodlný dotek se uživatel nemusí příliš soustředit.

Výrobci dotykových telefonů uvádějí v manuálech rozdílné „ideální“ velikosti dotykových ploch a jejich doporučení se značně rozcházejí. Firma Apple uvádí pro minimální velikost dotykové plochy 44 px. Microsoft doporučuje 34 px a pro dotyk 26 px. Společnosti Nokia uvádí, že velikost by neměla být menší než 1cm nebo 28 pixelů. [43].

Malé dotykové plochy jsou velkým problémem, pro stisknutí ovládací plochy je potřeba soustředění a přesnosti. Uživatel očekává po zmáčknutí aktivního pole od dotykového zařízení zpětnou odpověď, aby si byl jist, že jeho volba byla akceptována. Toho se těžko dosahuje u malých tlačítek, která jsou při dotyku prstem zcela překryta. Pokud uživatel změní polohu prstu a snaží se zasáhnout ovládací prvek špičkou prstu, dojde tak ke zpomalení ovládání a k větším časovým nárokům.

Dle studie MIT Touch Lab [44] je průměrná velikost ukazováčku 16-20mm (45-57px) u dospělého člověka. Pro pohodlný dotyk je tedy minimální velikost ovládacích prvků 45-57px. Velká tlačítka přinášejí snazší přesnost a zpětnou vazbu díky viditelným okrajům objektů tlačítka pod prstem. Vztahem mezi velikostí ovládacích prvků a času pro jejich dosažení se zabývá Fittsův zákon.

Fittsův zákon Fittsův zákon se zbývá vztahem velikosti objektů vůči času, který člověk potřebuje k jeho dosažení.

Využití najdeme v interakci člověk-počítač, zvláště při navrhování uživatelského rozhraní, designu a ergonomie. Hlavní uplatnění je při modelaci grafického rozhraní u zařízení ovládaných myší, rukou pro manipulaci s objekty na obrazovce zařízení. Tento princip definoval Paul Fitts v roce 1954.

Dobíjení

oblíbená u turistických navigací, kvůli reálnému otáčení map podle toho jak se uživatel s navigací otočí. Otáčení mapového podkladu směrem k reálnému

Dobíjecí stanice je zařízení určené pro dobíjení baterií elektromobilů nebo

severu je pro řidiče v automobilu zbytečné. Mnohem intuitivnější je zobrazení

elektrokol, elektroskůtrů a jiných elektrických dopravních prostředků. Hlavní

map, kde sever je v horní části navigace. Pokud uživatel má zobrazenu

výhodou elektromobilů je dostupnost dobíjecích míst, pokud se nacházíte

aktuální mapu prostorově je vhodné, aby byla natočena po směru jízdy

v civilizaci, můžete elektromobil snadno dobít přes klasickou elektrickou zásuvku.

vozidla, ale pokud uživatel mapu oddálí, jinak řečeno zvětší mapové měřítko,

Dobíjení funguje obdobně jako klasické čerpací stanice na benzín a naftu.

přepne se zobrazení do 2D se severem na vrchu přístroje. Uživatelé očekávají od mapového podkladu podobně jako u tištěných map, že budou směřovat

Rekuperace

na sever. Pro představu, pohled na Českou republiku zobrazenou jihem k hornímu okraji navigace by snížil orientaci v mapovém prostředí.

MT = a + b log (2A/W) 2

Rekuperace je mechanismus fungující na principu zpomalování určitého předmětu a tím dochází k přeměně kinetické energie na energii jiného druhu,

Dopravní informace (TMC)

která se může uchovávat pro pozdější využití. Pro získání elektrické energie je MT (movement time) - je průměrný potřebný čas k vykonání pohybu.

třeba elektrického motoru jako generátoru. s rekuperačním brzděním se lze

Technologie Traffic Message Channel, zkráceně označované jako TMC,

a,b - empirické konstanty vycházející z rychlosti pohybu

nejčastěji setkat v železniční dopravě a u elektromobilů přináší prodloužení

slouží k doručování aktuálních dopravních informací. Navigace díky znalosti

W - šířka osy cíleného objektu podél pohybu.

dojezdu z důvodu následného využití energie nastřádané rekuperací

dopravních komplikací na cestě může dynamicky změnit trasu a tím zkrátit

A - vzdálenost pohybu do středu cílového místa [45]

v akumulátorech.

dojezdový čas. Dnešní navigace (2012) používají pro získání aktuálních

Funkci můžeme popsat tak, že cituji: „Čas potřebný pro dosažení cílového

K rekuperaci dochází při jízdě z kopce, kdy se uvede do chodu generátor a tím

objektu odpovídá logaritmické funkci vzdálenosti a velikosti cíle.“ [46] Řečeno

dochází ke slabému brzdění podobně jako u brzdění spalovacím motorem.

dopravních informací také protokol Rádio data Systém zkráceně RDS, proto je

jinými slovy, pokud zvětšíme cílový objekt, tak jeho zvětšením dojde ke

možné se na navigačním přístroji setkat s označením RDS-TMC. Rádio v automobilu

zkrácení času pro jeho dosažení. Důsledků můžeme využít v praxi například

Při malém stlačení brzdového pedálu, dochází k zapojení generátoru a tím

u funkce jako je mazání dat, kdy se uživateli snažíme ztížit přístup a tím zvýšit

zvýšení rekuperace energie. Při silném brzdění a malé rychlosti dochází

Rádio je označení pro telekomunikační zařízení pro jednosměrný přenos

uživatelovu pozornost. [45]

k rekuperaci a zapojení klasických brzd na kolech.

zvuku využívající vysokofrekvenční elektromagnetické vlny také nazývané

Používání velikosti ovládacích prvků v poměru k velikosti prstů přináší

Automobilový navigační přístroj

jako rádiovlny. Rádio slouží ke zpříjemnění cesty během jízdy v autě. spoustu benefitů, ale vždy je třeba přistupovat s přihlédnutím ke konkrétnímu

Počátky autorádií sahají do dvacátých let minulého století. První kdo si zařízení patentoval, byl William M. Heina roku 1926/7. Dnes je autorádio

zařízení. Tím je myšleno, pokud dotykové zařízení má malý rozměr obrazovky,

Autonavigace, automobilový navigační systém nebo také lidově navigace, je

neodmyslitelnou součástí vybavení osobního automobilu napojenou na řadu

pravděpodobně na ní nebude možné vměstnat všechny UI prvky. Jestliže

elektronické zařízení přijímací satelitní signál GPS (Global Positioning system)

sofistikovaných zařízení, jako jsou výkonné audio sestavy, automatické ladění,

se ovládací prvky nevejdou, je třeba přistoupit k pečlivému měření velikosti

určený pro zjištění konkrétní geografické polohy automobilu na základě

vyhledávání, dopravní hlášení apod.[49]

obrazovky a dotykových prvků, aby bylo zjištěno, jak velká jednotlivá dotyková

mapových podkladů.

místa mohou být. Řešením jak navrhovat uživatelské rozhraní jsou věnovány kapitoly v obecných zásadách výrobců dotykových telefonů.

Mezi první výrobce, kteří jsou držiteli patentů z roku 1990 na autonavigační

NASTAVENÍ

systém založený na GPS, patří společnosti Mitsubishi Electric a Pioneer.

Velikost prstů a od ní odvozená minimální dotyková plocha u tabletu neklade

k masovému rozšíření navigací pro osobní automobily došlo až po roce 2000,

na UX designéra tak velké nároky z důvodu větší obrazovky, která přináší více

kdy Spojené státy americké zpřesnily GPS signál pro civilní účely.

prostoru. Na dotykovou obrazovku je možné umístit celý horizontální sloupec s kontrolními prvky a tím vylepšit použitelnost tabletu s minimálním nárokem

Existují dva typy navigace, a to přenosná s baterií a nepřenosná zařízení,

na místo.

která bývají vestavěnou součástí palubní desky automobilu. Hlavním úkolem

Ikona „Nastavení“ umístěna v pravé části menu, je věnována nastavení technických parametrů služeb dotykového zařízení.

navigace je informovat řidiče o místě, kde se nachází a navigovat ho co Větší nesnáze se objevují u mobilních telefonů, kdy může být obtížné

nejsnadněji do cíle cesty. Při jízdě přístroj dokáže získávat data o rychlosti

„trefování se“ mezi množství malých dotykových ploch. To jsou případy, kdy

vozu, a ve spolupráci s mapovými podklady také o aktuální poloze vozu.

jsou velikosti prstů k poměru s dotykovou plochou zásadní. Největším úkolem

Informace o blížící se odbočce nebo vypočítat předběžný čas k dosažení cíle

pro designéry je, aby správně zvolili velikosti dotykových prvků u mobilních

s vyhodnocením dat z cesty.

Obecné funkce

Sériově montované navigační přístroje dnešní doby (2012), bývají integrovány

Hlasové ovládání

zařízení. To vyžaduje méně dotykových prvků a větší důraz na minimalistické a přehledné uživatelské rozhraní. [45]

se systémy automobilů, jako jsou například: hlasové ovládání, údaje palubního Obrazová mřížka

počítače či součinnost s audio systémem. Na trhu je nabízena celá řada typů navigací specializované pro obory, jako jsou cyklistika, lodní a letecká doprava,

Obrazová mřížka se skládá z vodících horizontálních a vertikálních čar, které

turistika nebo zemědělství.

definují strukturu vizuálních prvků na obrazovce, podobně jako mřížky u tiskových dokumentů. Mřížka slouží jako vodítko pro designéra, při vytváření

Global Positioning systém (GPS)

grafického rozhraní. Používání mřížky vede k racionalizaci, strukturování obsahu a zjednodušení práce.

GPS je označení pro systém určující polohu na zeměkouli za pomocí 24 družic obíhající po oběžné dráze země. Pro výpočet aktuální polohy vozu stačí,

Ikony a Symboly kontrolek na přístrojové desce.

aby přijímač zachytil signál z minimálně tří družic, následná poloha může být zobrazena na obrazovce pomocí uložených geografických dat v navigaci, jako jsou

Ikony jsou vizuální formou symbolů, akce nebo myšlenky, můžeme je

jména a čísla ulic nebo zajímavá místa. Navigace následně vypočítá a zobrazí cestu.

rozdělit do tří obsahových skupin: obrazové vycházejí z reálné podoby obrazu, odborně zaměřené a nahodilé. Ikona je symbolem, to znamená, že

Hlasové ovládání neboli řečové uživatelské rozhraní je jeden ze způsobů interakce člověk-počítač. Funguje na principu, kdy uživatel zadá hlasem příkaz, zařízení ho zpracuje a vykoná požadovanou funkci. Ovládání pomocí hlasu je pro uživatele velice intuitivní, jelikož vychází z přirozené komunikace a proto je stále oblíbenější. Dle studie Technické univerzity v Braunschwieigu v Německu z roku 2008, bylo zjištěno, že se u řidičů ovládajících hlasem telefon, navigaci nebo hudbu v automobilu, dvanáctkrát zmenšil počet chybných odbočení ze směru a třikrát byly rychlejší než při manuálním ovládání.

Z toho vyplývá, že hlasové ovládání může velice přispět ke zlepšení bezpečnosti. Ovládání automobilu hlasem se objevuje u automobilů čím dál častěji. [50]

Points of interest (POI)

může zastupovat velké množství informací, pro její dekódování a poznání je nutné získání určitých znalostí. Kontrolní ikony v automobilu mají za cíl

Zajímavá místa pro řidiče. Uživateli stačí zadat hledaný termín, jako

informovat řidiče o stavu vozidla a pomáhat mu se zorientovat v interiéru

například: čerpací stanice, restaurace, museum, památka a navigace zobrazí

vozidla. Pro snazší pochopení se používají barevná provedení, červený

na mapovém podkladu místa, kde se hledaný objekt nachází. Zobrazené místo

Komunikace přes Bluetooth - některé navigační systémy podporují

symbol signalizuje závadu na vozidle, oranžový upozorňuje. Výhodou

POI nabízí obecné informace s popisem, odkazy na webové stránky, telefonní

funkci Bluetooth pro snadné bezdrátové propojení přístroje s mobilním

použití ikon je úspora místa, jelikož vyžadují méně prostoru, než psaný

čísla daného místa a volbu pro navigování.

telefonem nebo jiným zařízením. Propojení telefonu přes Bluetooth umožní

text a hlavně zrychlí přenos informace, jinak řečeno k přečtení ikony potřebujete méně času než u psaného textu. Nezanedbatelný přínos ikon

Bluetooth - komunikace s telefonem

řidiči telefonovat přes vestavěný mikrofon hands-free a audio vybavení.

3D vykreslování objektů v navigaci

je v mezinárodní komunikaci, jelikož mohou být snadno pochopitelné

v některých zemích je zakázáno telefonovat za jízdy. Například v České republice dle Zákona č. 361/2000 Sb., o provozu na pozemních komunikacích

i v jiných státech a jejich obsah může být srozumitelný i bez jazykových

Z výzkumů vyplývá, že stylizované zobrazení mapových podkladů vede

v aktuálním znění, se telefonování za jízdy věnuje v § 7, odstavci 1, písm. c), je

znalostí, z toho důvodu ikony vychází z mezinárodních ISO standardů. [48]

k rychlejšímu zorientování uživatele a to díky menšímu počtu vizuálních

uvedeno: „Řidič nesmí při jízdě vozidlem držet v ruce, nebo jiným způsobem

objektů se mapa stává přehlednější. Z bezpečnostních důvodů je nutné,

telefonní přístroj nebo jiné hovorové nebo záznamové zařízení.“

Co je to Elektromobil

aby při navrhování uživatelského rozhraní, byl kladen důraz na krácení času nutného pro hledání na navigačním zařízení, jelikož řada řidičů

Cituji: „V letním vydání časopisu Human Factors z roku 2006, který vydává

Elektromobilem rozumíme automobil poháněný elektromotorem

pracuje s navigací během jízdy. Z výše uvedeného textu vyplývá, že není

Společnost pro lidské chování a ergonomii (The Human Factors and

a elektrickou energií uloženou v akumulátoru. Současná dojezdová vzdálenost

vhodné použití 3D zobrazení objektů nebo vykreslování realistických textur

Ergonomics Society), byly publikovány výsledky výzkumu, který se zabýval

u elektromobilů se pohybuje kolem 160 km. Delší dojezd je omezen

na mapové objekty.

právě telefonováním za jízdy. Závěry jsou až zarážející – telefonování za jízdy

současnými znalostmi o bateriích vhodných k tomuto užití. Velkého zlepšení se očekává od nanotechnologií používaných při výrobě nových bateriových

lze co do rizikovosti srovnat s jízdou pod vlivem alkoholu.“ [51] Funkce kompasu v navigaci:

článků, je otázkou času, kdy se dojezd elektromobilů vyrovná dojezdu automobilů se spalovacím motorem, na který jsme zvyklí.

Zobrazení kompasu na mapovém podkladu přináší uživateli informaci o aktuální poloze automobilu vůči světovým stranám. Funkce kompasu je

23

PRAKTICKÁ ČÁST

NÁVRH GUI PRO ELEKTROMOBIL

Cílem praktické části je vytvoření vlastního grafického uživatelského rozhraní u elektromobilu a aplikovat tak poznatky z teoretické části. Při navrhování funkčního a uživatelsky vlídného prostředí je třeba dbát na vizuální jednotu ovládacích prvků a konzistentnost logiky ovládání.

Nejprve byl z hlediska ergonomie, dostupnosti palubní desky, výhledu u řidiče a u spolujezdce zvolen automobil Škoda Citigo. Následovalo vytvoření několika skic a modelů, jejich finální velikost a umístění bylo korigováno v reálném automobilu.

Před začátkem navrhování bylo nutné vytvořit analýzu funkcí elektromobilů a dotykových zařízení média center a stanovit priority, až poté bylo možné definovat základní rozložení ovládacích a kontrolních prvků. Jako vhodné se pro lepší viditelnost a logické propojení např. u mapy a jiných hlášení

Obr. 40 Pohled na interiér benzínového automobilu Škoda Citigo.

zdálo sblížení dotykového zařízení s přístrojovým panelem. Pro navrhování bude definována obrazová mřížka, rodina písma a jeho velikosti. Barevné schéma GUI vychází ze vzhledu navigace, která by měla mít jednotné rozhraní pro noční i denní mapové podklady. Nedílnou součástí navrhování GUI je také vytvoření základní sady kontrolních ikon.

Vizuální vzhled je postaven na myšlence inteligentního personálního asistenta, přístrojová deska tvoří oči, tlačítko varovných světel nos a media centr otevřenou pusu se zuby z menu.

Přístrojový panel ukazuje rychlost, čas dojezdu, informace z dotykového zařízení, kontrolky, ukazatel vzdálenosti společně s délkou dojezdu. K šetření spotřeby zábavnou formou byl vytvořen dynamický ukazatel spotřeby energie.

Umístění přístrojového panelu a dotykového zařízení media center do palubní desky Škoda Citigo.

Palubová deska automobilu Škoda Citigo má ve střední části prostor pro manuální ovládání klimatizace, rádia a tlačítko varovných světel. Ovládací prostor je dobře viditelný a dostupný ze sedačky řidiče a spolujezdce, čímž se nabízí jako ideální místo pro integraci dotykové plochy. Rozměr ovládacího prostoru byl rozšířen směrem nahoru a to tak, že velikost obrazovky odpovídá rozměru 278 mm x 160 mm.

Přístrojový panel, jehož tvar vychází z čelní masky automobilu má rozměr 278 mm x 50 mm, byl umístěn do středu pod čelní sklo, což přináší lepší přehlednost a viditelnost. Řidič má díky tomu informace stále na očích a nemusí tak přeostřovat na kratší vzdálenost jako v případě tradičního umístění za volant vozu.

Tlačítko varovných světel je umístěno nad dotykovou obrazovkou.

Obr. 41 Vizualizace navrhovaného řešení v interiéru Škoda Citigo.

Obrazová mřížka

Obr. 42. Umístění a velikosti dotykového zařízení media center a přístrojové desky.

Pro návrh vize GUI elektromobilu Škoda Citigo, bylo nejvhodnější vertikální dělení obrazovky, které je definováno na šířku obrazovky 787 px a rozdělené na 16 sloupců s mezerami 35 px. Horizontální účaří vychází po 22 px.

Obr. 43 Obrazová mřížka dokumentu.

Obr. 44. Příklad velikostí a prvků u obrazové mřížky 787 px.

25

Návrh ikon a kontrolních symbolů v elektromobilu.

Navrhované ikony vychází ze vzhledu standardních mezinárodních symbolů používaných v automobilech. Zpracování ikon bylo navrženo s ohledem k jejich použití na digitální displeje s vyšším rozlišením a možností následného doplňování. Výtvarná podoba stylizace je složena ze dvou šířek linií a kružnice, jejichž používáním vede ke konzistenci vzhledu?

Telefon

Media

Navigace

Rádio

Klimatizace

Nastavení

Obr. 45. Ikony navržené pro hlavní menu.

Písmo Uživatelské rozhraní používá lineární bezpatkové písmo Doris, které má oválné zakončení tahů a vyšší střední výšku. Písmo vytvořili typografové Pablo Impallari a Edgar Tolentino v roce 2011. Rodina písem Dosis byla vytvořena pro použití na obrazovce.

Obr. 47 Ukázka řezu písma Dosis Semibold.

Obr. 49 Ukázka řezu písma Dosis Regular

Obr. 48 Ukázka řezu písma Dosis Light.

Kontrolní ikony

STOP

P

Klimatizace

AC Nabíjení

ON

OFF

Media - Hudba

Funkce

Phone

Obr. 46. Sada navržených ikon

Přístrojová deska Přístrojová deska zobrazuje řidiči důležité informace o vozidle. Pro řešení

vychází z černé barvy a to tak aby řidiče nerušil jas světle barevných

grafického rozhraní přístrojové desky elektromobilu byly zvoleny informační

ploch. Jas obrazovky bude automaticky korigován v závislosti na množství

prvky ukazatel rychlosti, počet dojezdových kilometrů, kontrolní ikony,

světla v interiéru.

zobrazení navigace a kolik procent zbývá do konce cesty. Grafické rozhraní

Obr. 50. Přístrojový panel s popisem.

27

Dynamický ukazatel spotřeby energie Dynamický ukazatel je zařízení, které vizuálně zprostředkovává řidiči souhrnné informace, jako jsou styl jízdy, rekuperace energie a výpočet dojezdu v kilometrech.

Vzhled dynamického ukazatele připomíná horizontální osmičku, která má v pravém a levém očku černé kruhy. Levý kruh zobrazuje aktuální rychlost a pravý kruh vypočítává, dojezd elektromobilu v závislosti na stylu jízdy.

Obr. 51 Dynamický ukazatel spotřeby energie ve stavu rekuperace.

Výchozím stavem dynamického ukazatele spotřeby je tmavě modrá barva.

Výchozím stavem je myšleno, že nedochází k rekuperaci a elektromobil jede optimální rychlostí.

Obr. 52 Výchozí stav optimální jízdy.

Pokud automobil jede vysokou rychlostí a nedochází ke stavu rekuperace, očko kolem rychlosti se postupně zvětší a zčervená, trvá-li tento stav delší dobu, sníží se počet kilometrů dojezdu a postupně se obarví i druhá strana ukazatele.

Posledním stavem je zelená barva, která symbolizuje rekuperaci, čili ekologické dobíjení například při jízdě z kopce nebo jemném brzdění. 

Dotykové zařízení media center

Obr. 53. Stavy dynamického ukazatele spotřeby.

Zadávání odkazem je založeno na označení cílového místa na mapě navigace.

podkladu jsou zaznamenány pouze malou tečkou, při kliknutí do místa tečky

Po potvrzení poklepem se navigace spustí.

se objeví nabídka ve formě bublinky s popisem místa. Uživatel má možnost

Dotykové zařízení obsahuje řadu služeb, z nichž nejžádanější jsou navigace, média (hudba, rádio), klimatizace a dalších nastavení vozidla.

místa vyhledat pomocí hlasového ovládání nebo textovým vstupem.

Novým trendem vyhledávání je používání inteligentních systémových asistentů, kteří jsou schopni analyzovat hlas a následně ho zpracovat pomocí

Navigace

Vizualizace cesty

složitých algoritmů a vyhledat nebo na otázku přímo odpovědět. Komunikace mezi uživatelem a asistentem probíhá podobně jako rozhovor s reálnou

Vodící linka do cíle cesty. Pro řidiče je to jeden z nejdůležitějších vizuálních

GUI navigace vychází z černého podkladu a tmavého schématu barev, kde

osobou. Hlasové uživatelské rozhraní je mnohem intuitivnější, rychlejší než

prvků, který by měl na navigaci při letmém pohledu být vidět. Linka vyznačuje

nejviditelnější je aktuální poloha automobilu a žlutá čára ukazující směr

ovládání pomocí grafického uživatelského rozhraní, proto je logické, že

trasu cesty, vycházející z aktuální pozice automobilu a cílového místa. Jestliže

cílového místa. Barevné schéma je navrženo tak, aby by ho nebylo nutné

některé oblasti grafických rozhraní budou asistenty zcela nahrazeny.

řidič odbočí nebo se vydá jiným směrem, než navigace ukazuje, dojde

přepínat do nočního režimu.

k automatickému přepočítání a přístroj navrhne novou trasu.

Prostorový pohled na mapy z pohledu uživatele

Existují tři způsoby zadávání hledaného místa: hlasový vstup, textový pomocí klávesnice, nebo odkazem.

K zobrazení popisků jako jsou aktuální jméno města, jména ulic, nebo POI, Prostorový pohled na mapové podklady je vykreslován v perspektivním

které jsou v okolí automobilu, dojde až při dotyku ruky na obrazovku nebo při

zobrazení, podobně jako by se řidič díval na ubíhající krajinu. Prostorové

určitém oddálení mapového podkladu. Důvodem je lepší orientace na mapě

Hlasové zadání, nebo ovládání hlasem je jedním z nejrychlejších

zobrazení můžeme považovat za intuitivní a uživatelsky přívětivé z důvodu,

obrazovky. Pokud se řidič nebude dotýkat obrazovky déle jak pět vteřin, názvy

a nejintuitivnějších způsobů komunikace. Uživatelské rozhraní je řešeno

že simuluje přirozené zobrazení prostředí na principu skutečnosti. Uživatelé

ulic a ostatní předtím vykreslené prvky se plynule ztratí.

pomocí ikony či gesta, které aktivuje mikrofon. Následnou analýzou

se nemusí učit nic nového, stačí, když rychle pochopí, kde se na mapovém

spustí navigaci, nebo pokud zadání odpovídá více možnostem, zobrazí se

podkladě právě nachází a co znamenají jednotlivé grafické prvky.

TMC dopravní informace

Zajímavá místa na cestě

Dopravní komplikace na cestě hlášené systémem RDS-TMC včas vizuálně

na obrazovce nabídka. Po výběru některé z možností se spustí navigování.

Pro textové zadání se na displeji zobrazí klávesnice. Vyhledávání textu

a hlasově upozorní uživatele na nebezpečí a nabídne mu alternativní cestu

usnadňuje tzv. našeptávač. Během psaní prvních písmen systém automaticky

Body zájmu, anglicky Point of Interests (POI), jsou informace o benzinových

s možností výběru ignorovat dopravní hlášení. Systém TMC v České republice

nabízí dokončení textu.

pumpách, bankách, restauracích, památkách a podobně. Na mapovém

je příliš pomalý a vysílaná data jsou většinou neaktuální, proto by měla být

Obr. 54 Navigace se zprávou o odbočení

Obr. 55. Okno s dopravním hlášením z TMC, které se vysouvá z boku obrazovky.

uživatelům nabídnuta možnost ignorovat dopravní hlášení a pokračovat tak v původní trase. Vzhledem k nespolehlivosti informací z TMC není důležité zobrazovat ikonu dostupnosti signálu.

Okno s hlášením TMC se vysouvá z boku obrazovky, jestliže uživatel neoznačí ignorovat, trasa se přepočítá dle dopravního hlášení.

Symbol GPS Symbol GPS je důležitý proto, aby uživatel vozu měl přehled o dostupnosti signálu. Pokud není signál, zobrazená poloha vozidla na obrazovce není přesná.

Stavy ikony GPS Ikona není vidět, znamená, že signál je dostatečný a zobrazená data jsou přesná. Červená ikona znamená nedostatečný GPS, poloha vozu a informace nemusí odpovídat skutečnosti. Šedá blikající barva symbolizuje, že je dostupný signál pouze z jedné družice, to znamená, že poloha vozu může být nepřesná.

Obr. 56 Ikona GPS.

29

Telefon Řidič elektromobilu má možnost ovládat telefon pomocí hlasu, anebo můžeme využít grafického rozhraní přes menu „Telefon“.

Volání a hledání Pokud uživatel nechce použít ovládání hlasem, může ovládat telefon přes ikonu z nabídky menu, kde má na výběr z možností: oblíbené, historie, kontakty a číselník. Volat lze také z POI a jiných odkazů obsahujích číslo volaného.

Vyzvánění Vyzvánění je doprovázeno zvukem přes audiosoustavu vozu. Na obrazovce se z boku vysune okno s informací o příchozím hovoru ve formě čísla volajícího nebo v případě dostupnosti dat z telefonu i fotografie a jméno volajícího.

Uživatel má na výběr hovor přijmout nebo ignorovat.

Průběh hovoru Po přijmutí hovoru se okno zvětší a zobrazuje délku hovoru, jméno, číslo volajícího. Tlačítky číselníku můžeme vypnout mikrofon a ukončit hovor. Při přijmutí hovoru dojde ke ztišení hlasitosti audio soustavy.

Ukončení hovoru Obr. 57 Oblíbené volby.

Po stisknutí tlačítka ukončit hovor se audio uvede do stavu před přijmutím hovoru.

Obr. 58 Historie hovorů.

Obr. 60 Seznam kontaktů.

Obr. 59 Číselník.

Obr. 61 Probíhající hovor.

Obr. 62 Rádio ve stavu, kdy hraje stanice uložená na první pozici rychlé volby.

Média

Rádio a přehrávání hudby

Média poskytují zábavu formou audio produkce. Řadí se do nich Rádio,

Rádio je pod položkou média. Uživatel může přepínat stanice rychlým

Hudba (Music) a vybrané sestavy skladeb (Playlist). Ikona média je

přejezdem jednoho prstu přes obrazovku rádia. Ladění se provádí

umístěna na hlavní spouštěcí liště.

posunem prstu přes kolečko s frekvencí stanice a případně lze stanici přetáhnout na jedno z pěti čísel oblíbených stanic a tím ho uložit.

Zařízení si pamatuje poslední stav, při kterém ho uživatel zanechal, tím je myšleno, že pokud uživatel procházel složky s hudbou skupiny Abba, poté přepnul na navigaci, tak po návratu zpět na „Media“ se zobrazí poslední navštívená složka s hudbou skupiny Abba.

Výběry skladeb (playlist) Nabídka předem vybraných skladeb se nachází pod Média/Music.

Procházení složek je pomocí sloupového menu. Kliknutím se skladba přehraje.

Obr. 63 GUI ve stavu přehrávání skladby.

Obr. 64 Zobrazen je stav, kdy dohrála poslední skladba.

Obr. 65. Zobrazení adresářové struktury pod položkou „Hudba“ (Music).

31

Klimatizace Slouží k úpravě teploty a výměně vzduchu v automobilu. Uživatel má přístup ke klimatizaci přes nabídku v menu „Klimatizace“. Teplotu je možné nastavit pomocí dvou ploch připomínající osmičku. Levé očko osmičky zobrazuje teplotu a pravé intenzitu ventilátoru. Pod a mezi osmičkou jsou ikony programů klimatizace.

Pokud je ventilátor v chodu, proudí okolo osmičky malé tečky, které mění barvu podle nastavené teploty. Tečky také mění tvar obtékání v závislosti na programu proudění vzduchu. To, jak daleko tečky od osmičky ubíhají, je úměrné intenzitě ventilátorů. Nastavení se mění pomocí „gesta“ dotyku nebo tažením prstů z aktivního pole.

Obr. 66 Je zobrazena spuštěná klimatizace v režimu, kdy ventilátor fouká nahoru maximální intenzitou a teplotou

Obr. 67 Ukázka chodu klimatizace při nižší teplotě.

Obr. 68 Zobrazena je klimatizace v režimu vnitřního okruhu.

Obecné funkce Ovládání hlasitosti Uživatel má možnost kdykoliv a kdekoliv měnit hlasitost, buď přes ikonu v levém horním rohu, nebo gestem pěti prsty. Tažením pěti prsty přes obrazovku dojde ke snížení nebo zvýšení hlasitosti.

Optický senzor Do elektromobilu musí být integrováno optické čidlo, které bude automaticky korigovat jas dotykové obrazovky v závislosti na osvětlení tak, aby nedocházelo k oslnění řidiče.

Hlasové ovládání Hlasové zadání může uživatel spustit pomocí tlačítka na volantu, ikonou nebo gestem čtyřmi prsty na dotykové obrazovce.

Použité druhy gest

Dotykové zařízení bude podporovat více dotyků (multi-touch), které umožní používání gest. Gesto je jeden z možných vstupů interakce uživatele se zařízením. Používání některých gest neodvádí pozornost uživatele a může zrychlit interakci.

Obr. 69 Zobrazeno je GUI po změně hlasitosti pomocí gesta čtyř prstů.

Jeden prst: posouvá data po stránce. Přidržením jednoho prstu na místě se ukáže rozšířená nabídka s možností editace/úpravy nebo posun objektu na jiné místo. Ťuknutí jednoho prstu na objektu vyvolá rozšířenou nabídku nebo spustí akci.

Přejetí jedním prstem přes objekt přepne například radiostanici, u seznamu skladeb zobrazí tlačítko smazat.

Dva prsty: posouvají nabídkou. Směrem k sobě, nebo od sebe přiblíží, nebo oddálí mapové podklady, jinak řečeno změní mapové měřítko.

Tři prsty: u mapového podkladu ve stavu prostorového zobrazení umožní změnu pohledové výšky. Čtyři prsty: dotyk čtyřmi prsty sníží nebo zvýší hlasitost v závislosti na pohybu ruky. Směrem dolů se hlasitost snižuje a směrem nahoru zvyšuje.

Pět prstů: dotyk pěti prsty spustí hlasové ovládán, nebo případně hlasového asistenta. Změna hlasitosti pomocí tohoto gesta nevyžaduje vizuální kontrolu uživatele.

Považuji používání gest za velice intuitivní a rychlý způsob interakce, který vychází z přirozeného chování člověka.

Dotyková klávesnice Klávesnice se na obrazovce zobrazí automaticky vždy, když bude potřeba textový vstup. Vkládání textového příkazu je velice zdlouhavé a tím i pro řidiče nebezpečné. Již v současné době fungují systémy rozpoznávání Obr. 70. Zobrazeno je GUI po změně hlasitosti pomocí gesta čtyř prstů.

hlasu. Jeden z nich, navržený přímo pro automobilový průmysl, je Sync od společnosti Microsoft.

Připojení bluetooth Řidič během řízení nepotřebuje být vizuálně informován o připojení zařízení přes bluetooth. Vizuální zobrazení a všechna nastavení uživatel najde pod položkou nastavení.

Obr. 71. Ikona hlasového ovládání.

33

ZÁVĚR

Cílem diplomové práce bylo poskytnout ucelený pohled na vizuální

stránku grafických uživatelských rozhraní. Historie uživatelských rozhraní měla zajímavý vývoj. Na počátku Douglas Engelbart v podstatě definoval

dva směry přístupu ke GUI, když dal přednost myši před dotykovou plochou. Řadu let byla dotyková technologie používána pouze zřídka až do doby

příchodu telefonu iPhone s GUI pro ovládání dotykem. GUI ovládaná myší a dotykem se slučují a podobně jako na samém počátku se nabízí otázka, zda zvolit pro ovládání myš nebo dotyk.

Způsob přístupu k navrhování GUI automobilů by se měl lišit, a to kvůli potřebě zkrácení času pro manipulaci řidiče s přístrojem. To znamená

klást větší nároky na informační rozložení a analýzu struktury a důležitosti jednotlivých vizuálních prvků.

Pro tuto diplomovou práci byl vybrán automobil Škoda Citigo, jehož interiér je vhodný pro integraci dotykové obrazovky do středu palubní desky

na místo stávající klimatizace a rádia. Pro lepší propojení přístrojového panelu a pohodlnější zobrazení informací byla přístrojová deska umístěna pod čelní sklo do středu vozidla.

Návrh GUI a rozložení prvků odpovídá myšlence integrace personálního

asistenta. Přístrojová deska tvoří oči, tlačítko varovných světel nos a dotykové zařízení otevřenou pusu se zuby z menu.

K šetření spotřeby byl zábavnou formou navržen dynamický ukazatel spotřeby energie, který může najít své uplatnění i v praxi. Barevnost a tvar diagramu se mění v závislosti na spotřebě energie, vysoké rychlosti rekuperaci.

Součástí práce jsou vizualizace vybraných obrazovek GUI, které se mohou

ovládat pomocí gest nebo hlasem přes inteligentního asistenta, což přispěje k rychlejší interakci a bezpečnosti.

Dotyková zařízení zažívají vzestup díky tomu, že člověk je zvyklý dotykem

vnímat, jelikož hmat je jedním z nejdůležitějších smyslů člověka. Je možné, že budoucí uživatelská rozhraní se budou věnovat více lidským smyslům.

Například uživatelské rozhraní, které zobrazí kůži, bude schopné vytvořit

na povrchu dotykového zařízení příjemnou realistickou texturu se stejnými vlastnostmi, jaké má pravá kůže. Je otázkou času, kdy nám technologie umožní dynamicky měnit tvar povrchu a simulovat tak třeba tlačítka s reálným vzhledem a chováním.

.......................................................................................................................................................................... .......................................................................................................................................................................... .......................................................................................................................................................................... .......................................................................................................................................................................... .......................................................................................................................................................................... .......................................................................................................................................................................... .......................................................................................................................................................................... .......................................................................................................................................................................... .......................................................................................................................................................................... .......................................................................................................................................................................... .......................................................................................................................................................................... .......................................................................................................................................................................... .......................................................................................................................................................................... .......................................................................................................................................................................... .......................................................................................................................................................................... .......................................................................................................................................................................... .......................................................................................................................................................................... .......................................................................................................................................................................... .......................................................................................................................................................................... .......................................................................................................................................................................... .......................................................................................................................................................................... .......................................................................................................................................................................... .......................................................................................................................................................................... .......................................................................................................................................................................... .......................................................................................................................................................................... .......................................................................................................................................................................... .......................................................................................................................................................................... ........................................................................................................................................................................... ......................................................................................................................................................................... .......................................................................................................................................................................... .......................................................................................................................................................................... ..........................................................................................................................................................................

SEZNAM POUŽITÉ LITERATU[1] ROUSE, Margaret. User interface (UI): Also see human-computer

interaction. SearchSoa [online]. April 2005 [cit. 2012-09-12]. Dostupné z: http://searchsoa.techtarget.com/definition/user-interfac

[2] NĚMEČKOVÁ, Lenka. Rozvoj problematiky HCI (Human-

ComputerInteraction) na ÚISK FF UK. Rozvoj problematiky HCI (Human-

ComputerInteraction) na ÚISK FF UK [online]. 15.4.2010, ČLOVĚK – Časopis pro humanitní a společenské vědy č. 18, s. 2 [cit. 2012-09-09]. Dostupné z: http:// clovek.ff.cuni.cz/pdf/nemeckova_zprava_18.pdf

[3] MICROSOFT DEVELOPER NETWORK. User Experience Design Guidelines for Windows Phone: Windows Phone [online]. July 26, 2012 [cit. 2012-09-

09]. Dostupné z: http://msdn.microsoft.com/en-us/library/windowsphone/ develop

[4] MCDERMOTT, Megan. How to Design Graphic Mock-ups. APaddedCell:

Beginning Web Design [online]. 1 June 2008 [cit. 2012-09-09]. Dostupné z: http://www.apaddedcell.com/graphic-mockups

[5] TEOH, Clara. User-centered design (UCD) - 6 methods. Credible.com

[online]. 2012 [cit. 2012-09-23]. Dostupné z: http://www.webcredible.co.uk/ user-friendly-resources/web-usability/user-centered-design.shtml

[6] design-overview-tools-and-resources/ [online]. October 5th, 2010 [cit. 2012-09-09]. Dostupné z: http://uxdesign.smashingmagazine.

com/2010/10/05/what-is-user-experience-design-overview-tools-andresources/)

[7] LOWGREN, Jonas. Interaction Design [online]. 2007 [cit. 2012-09-09].

Dostupné z: http://www.interaction-design.org/encyclopedia/interaction_ design.html

[8] GUBE, Jacob. WhatIs User Experience Design? Overview, Tools And

Resources.Http://uxdesign.smashingmagazine.com/2010/10/05/what-is-

user-experience-design-overview-tools-and-resources/ [online]. October

5th, 2010 [cit. 2012-09-09]. Dostupné z: http://uxdesign.smashingmagazine. com/2010/10/05/what-is-user-experience-design-overview-tools-andresources/

[9] ROUSE, Margaret. GUI (graphical user interface). Searchwindevelopment [online]. October 2006 [cit. 2012-09-09]. Dostupné z: http:// searchwindevelopment.techtarget.com/definition/GUI

[10] SCOTT, Justin D. User-Friendly Interface Design: A Guide to Developing Intuitive Software and Website Interfaces. [online]. [cit. 2012-09-09].

Dostupné z: https://sites.google.com/site/userfriendlyinterfacedesign/ [11] WANG, Xin. Personas in the User Interface Design. Department of

Computer Science, 2012, 11 s. Dostupné z: http://pages.cpsc.ucalgary.ca/~saul/ wiki/uploads/CPSC681/topic-wan-personas.pdf

[12] REIMER, Jeremy. A History of the GUI: Have you ever wondered about

the genealogy of the graphical user interface you ….Http://arstechnica.com/

[online]. May 5 2005, č. 1, s. 8 [cit. 2012-09-14]. Dostupné z: http://arstechnica. com/features/2005/05/gui/?comments=1#comments-bar

[13] CRAVEN, Jackie. What Is CAD?. In: About.com: Architecture [online]. New York. 2012 [cit. 2012-09-11]. Dostupné z: http://architecture.about.com/od/ software/g/CAD.htm

[14] REIMER, Jeremy. A History of the GUI: Have you ever wondered about the

genealogy of the graphical user interface you …[online]. May 5 2005 [cit. 201209-11]. Dostupné z: http://arstechnica.com/features/2005/05/gui/2/ [15] WICHARY, Marcin. Graphical User Interface Gallery: lisa user interface guidelines. Guidebook gallery [online]. 22nd January 2005 [cit.

2012-09-12]. Dostupné z: http://www.guidebookgallery.org/articles/ lisauserinterfaceguidelines/pics/a6 [16] REIMER, Jeremy. A History of the GUI: Have you ever wondered about the genealogy of the graphical user interface you. In:Ars technica [online].

May 5 2005 [cit. 2012-09-12]. Dostupné z: http://arstechnica.com/ features/2005/05/gui/6/

35

[17] GEOS: Looking Back: GRAPHIC ENVIRONMENT OPERATING SYSTEM

history-iphone-ipad

A Nostalgic Appreciation. ESCH, James.Commodore [online]. March 25 2002 [cit. 2012-09-13]. Dostupné z: http://www.commodore.ca/history/company/

[37] Http://3pol.cz/ [online]. 13. srpen 2010 [cit. 2012-09-23]. Dostupné

turks_geos.htm

z: http://3pol.cz/932-japonci-se-predvedli-s%C2%A0elektrickymbratrancem-oblibene-nissan-micry

[18] ŠINDELÁŘ, Adam. Třicet let historie Apple (druhá část). Root.cz [online]. 6.

4. 2006 [cit. 2012-09-13]. Dostupné z: http://www.root.cz/clanky/tricet-let-

[38] NISSAN. Nissan Leaf 2011: Owners manual. 2011. Dostupné z: http://

historie-apple-druha-cast/

www.nissanextendedwarranty.com/owners-manual/nissan/2011-NissanLeaf.pdf [39] PERIODISMODEMOTOR. Ford Focus Electric „MyFord Mobile“.

[19] ZACHAR, Martin. Obrazem: Operační systémy od roku 1981 [online]. 21.

8. 01. 2011. Dostupné z: http://www.youtube.com/watch?v=fzQIiTCFl8s [40]

04. 2009 [cit. 2012-09-13]. Dostupné z: http://magazin.stahuj.centrum.cz/

YOUCARPRESS. Peugeot 208 - INTERIOR. 2. 11. 2011. Dostupné z: http://www.

obrazem-operacni-systemy-od-roku-1981/?pid=6157

youtube.com/watch?v=Tn4iEiq9Wcc

[20] CASTLE, Alex a Florence ION. A Visual History of the Windows GUI. Http://

[41] ŠKODA AUTO. Škoda Citigo [online]. 31. říjen 2011 [cit. 2012-09-24].

www.maximumpc.com/ [online]. 10/22/2009 [cit. 2012-09-14]. Dostupné z:

Dostupné z: http://www.skoda-auto.cz/cze/model/citigo/look/Pages/look.

http://www.maximumpc.com/article/features/windows_throughout_ages_

aspx

evolution_gui [42] CHEN, C. C. WOODCOCK, A. PORTER, S. SCRIVENER a S. A. R. [21] HOOPER, William. A Short History of the GUI and the Microsoft vs Apple

Contemporary ergonomics: proceedings of the Ergonomics Society‘s

Debate. TheOligarch.Com [online]. Jan 2007 [cit. 2012-09-15]. Dostupné z:

Annual Conference. 2004. vyd. Great Britain: TAYLOR AND FRANCIS, 2004,

http://theoligarch.com/microsoft_vs_apple_history.htm#Windows3

s. 505-509. ISBN 0267-4718. [43] T, Anthony. Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes. Http://uxdesign.smashingmagazine.com/

[22] WICHARY, Marcin. Graphical user interface gallery [online]. 6th June

[online]. 2012-02-21 [cit. 2012-09-24 [44] DANDEKAR, Kiran, Balasundar I.

2004, 20 February, 2006 [cit. 2012-09-12]. Dostupné z: http://www.

RAJU a Mandayam A. SRINIVASAN. 3-D Finite-Element Models of Human

guidebookgallery.org/screenshots/win98

and Monkey Fingertips to Investigate the Mechanics of Tactile Sense. Http:// touchlab.mit.edu/ [online]. 2003 [cit. 2012-09-24]. Dostupné z: http://

[23] WICHARY, Marcin. Http://www.guidebookgallery.org/: Windows 2000

touchlab.mit.edu/publications/2003_009.pdf [45] KORBEL, Jan. Jan

Professional [online]. 2002 [cit. 2012-09-16]. Dostupné z: http://www.

Korbel: Nejen o budování webů a web aplikací s důrazam na dojem uživatele

guidebookgallery.org/screenshots/winxp

[online]. 20. duben 2008 [cit. 2012-09-26]. Dostupné z: http://jankorbel. cz/2008/04/20/uzivatelske-rozhrani-fittsuv-zakon/http://en.wikipedia.

[24] BRIGHT, Peter. First look at Windows 7‘s User Interface: Microsoft

org/wiki/Fitts_law

has given us a first glimpse as Windows 7. The taskbar has changed ….

Http://arstechnica.com/: information-technology [online]. Oct 28 2008

[46] T, Anthony. Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes.

[cit. 2012-09-22]. Dostupné z: http://arstechnica.com/information-

Http://uxdesign.smashingmagazine.com/ [online]. 2012-02-21 [cit. 2012-09-

technology/2008/10/first-look-at-windows-7/

24]. Dostupné z: http://uxdesign.smashingmagazine.com/2012/02/21/fingerfriendly-design-ideal-mobile-touchscreen-target-sizes/

[25] GORDON, Whitson. Windows 8 In-Depth, Part 1: The Metro UI. Lifehacker. com [online]. SEP 19, 2011 [cit. 2012-09-22]. Dostupné z: http://lifehacker.

[47] CARNEY, Cher, John L. CAMBELL a Elizabeth A. MITCHELL. In-Vehicle

com/5841764/windows-8-in+depth-part-1-the-metro-ui

Display Icons and Other Information Elements: Literature Review. Georgetown Pike McLean, May 7, 1998. FHWA-RD-98-164. Dostupné z: www.fhwa.dot.

[26] ŠINDELÁŘ, Adam. Třicet let historie Apple (první část). Root.cz [online]. 4.

gov/publications/research/safety/03063/03063.pdf

4. 2006 [cit. 2012-09-22]. Dostupné z: http://www.root.cz/clanky/tricet-lethistorie-apple-prvni-cast/

[48] ERB, Ernst. History and development of early Car Radios [online]. 13.

Mar.07 [cit. 2012-09-26]. Dostupné z: http://www.radiomuseum.org/forum/

[27] REIMER, Jeremy. A History of the GUI: Have you ever wondered about

first_car_radios_history_and_development_of_early_car_radios.htmlhttp://

the genealogy of the graphical user interface you …[online]. May 5 2005 [cit.

www.nuance.com/news/pressreleases/2008/20080708_auto.asp [49]

2012-09-11]. Dostupné z: http://arstechnica.com/features/2005/05/gui/7/

JAROLÍM, Bc. Lukáš. Bezpečnost silničního provozu ve vazbě na řidiče jednostopých vozidel [online]. 2012 [cit. 2012-09-26]. Dostupné z: http://

[28] MCKENZIE. The Invention of the Touchscreen. EHow [online]. 2012 [cit.

dspace.upce.cz/bitstream/10195/46346/3/JarolimL_BezpecnostSilnicniho_

2012-09-17]. Dostupné z: http://www.ehow.com/info_10018962_invention-

ID_2012.pdfhttp://www.youtube.com/

touchscreen.html

watch?v=OnlyoEYww0k&feature=related ............................................................................... ...........................................................................................................................................................................

[29] BROWN, Debi, Cheryl STEINBACHER, Tonya TURPIN, Rhonda BUTLER

...........................................................................................................................................................................

a Chuck BALE. History of Elo. Elo Touch Solutions[online]. 2012 [cit. 2012-09-

...........................................................................................................................................................................

16]. Dostupné z: http://www.elotouch.com/AboutElo/History/default.asp

........................................................................................................................................................................... ...........................................................................................................................................................................

[30] WOOLLEY, David. PLATO: The Emergence of Online Community. Http://

...........................................................................................................................................................................

thinkofit.com/ [online]. 1994 [cit. 2012-09-19]. Dostupné z: http://thinkofit.

...........................................................................................................................................................................

com/plato/dwplato.htm

........................................................................................................................................................................... ...........................................................................................................................................................................

[31] BELLIS, Mary. Who Invented Touch Screen Technology?. About.com Guide

...........................................................................................................................................................................

[online]. 2012, s. 1 [cit. 2012-09-09]. Dostupné z: http://inventors.about.com/

...........................................................................................................................................................................

od/tstartinventions/a/Touch-Screen.htm

........................................................................................................................................................................... ...........................................................................................................................................................................

[32] COHEN, NICOLE. Timeline: A History Of Touch-Screen Technology. Http://

...........................................................................................................................................................................

www.npr.org/ [online]. 2011/12/23 [cit. 2012-09-17]. Dostupné z: http://

...........................................................................................................................................................................

www.npr.org/2011/12/23/144185699/timeline-a-history-of-touch-screen-

...........................................................................................................................................................................

technology

........................................................................................................................................................................... ...........................................................................................................................................................................

[33] SAITO, Shiori . History of Touch Interface. In: Http://www.cirolab.org/

...........................................................................................................................................................................

[online]. June 10, 2010 [cit. 2012-09-19]. Dostupné z: http://www.cirolab.org/

...........................................................................................................................................................................

blog/wp-content/uploads/2010/06/History-of-Touch-Interface.pdf

........................................................................................................................................................................... ...........................................................................................................................................................................

[34] WEILAND, Alex. CASIO WATCH CATALOGUE FROM 1984: INCLUDING

...........................................................................................................................................................................

THE MAGIC TOUCH SCREEN WATCH. In: Acclaim[online]. 6-Jun-2012 [cit.

...........................................................................................................................................................................

2012-09-19]. Dostupné z: http://www.acclaimmag.com/style/casio-watch-

...........................................................................................................................................................................

catalogue-from-1984/

........................................................................................................................................................................... ...........................................................................................................................................................................

[35] RAGNET, Francois. XEROX. Digital Desk video. Nov 24, 2011. Dostupné z:

...........................................................................................................................................................................

http://futureofdocuments.blogs.xerox.com/2011/11/24/digital-desk-video/#.

...........................................................................................................................................................................

UFo8CeLPxDs

........................................................................................................................................................................... ...........................................................................................................................................................................

[36] BOHN, Dieter. IOS: A visual history [online]. December 13, 2011 [cit. 2012-

........................................................................................................................................................................... ...........................................................................................................................................................................

EZNAM POUŽITÝCH SYMBOLŮ GUI Graphical user interface (GUI) CLI Command line interface UI User interface

HCI Human-computer interaction HIG Human interface guideline UCD User centered design IxD Interaction design

UX, UE User experience design NLS oN-Line System

Geos Graphic environment operating systém GEM Graphic enfironment Manager GPS Global positioning systém POI Points of interests

TMC Traffic message channel iOS iPhone operating systém

37

GRAFICKY ZPRACOVANÁ PRÁCE JE DOSTUPNÁ NA WEBOVÝCH STRÁNKÁCH

http://www.gdschameleon.cz/?p=525 Heslo pro vstup je:UTB