Jan Stárek / 25.1.2026
Design uživatelského rozhraní haptického demonstrátoru: High Fidelity prototyp ve Figmě
1. Úvodem k výběru projektu
Jako téma do předmětu praxe jsem si vybral návrh high-fidelity prototypu v nástroji Figma. S Figmou jsem předtím pracoval jen velmi málo, takže jsem ji chtěl lépe poznat a vyzkoušet si její možnosti v praxi. Cílem bylo osvojit si jednotlivé funkce a postupy, mimo jiné i často zmiňovanou funkci Auto Layout, která pro mě představovala určitou výzvu.
Téma jsem zároveň propojil s předmětem Interakční design, kde jsem navrhoval hybridní zařízení – Demonstrátor variabilní haptické odezvy. V rámci tohoto projektu jsem vytvořil low-fidelity prototyp v nástroji Miro.
Pod pojmem Demonstrátor variabilní haptiky si lze v tomto případě představit otočný ovladač napojený na elektromotor, který byl řízen softwarem a dokázal generovat různé typy haptické odezvy podle aktuálního kontextu. Tento kontext spolu s vizuální zpětnou vazbou byl zobrazován na displeji. Pro další testování jsem využíval iPad, takže výchozí rozlišení bylo přizpůsobeno jeho parametrům.
Zároveň jsem se ve studijním semináři více věnoval tématu UI a mikrointerakcí, takže se jednotlivá témata přirozeně doplňovala a navazovala na sebe.
2. Low-fidelity jako výchozí stav
Low-fidelity prototyp vznikl v nástroji Miro a sloužil především k definování rozložení jednotlivých prvků, naznačení zpětné vazby v rámci navržených režimů a k základnímu ověření logiky ovládání. Pomohl mi rychle si ujasnit strukturu rozhraní ještě před detailnějším návrhem.
Rozhraní bylo rozděleno do přehledně sdružených celků:
3. Desk reasearch automotive HMI
Dále jsem si zmapoval existující automotive rozhraní, abych lépe pochopil, jakým způsobem je v tomto prostředí navrhováno UI. V rámci rešerše jsem se zaměřil na několik klíčových oblastí:
způsob interpretace nastavených hodnot (např. hlasitost, funkce klimatizace, jízdní režimy, kontakty apod.),
používanou barevnost v jednotlivých stavech (active / non-active),
použití fontů a jejich řezů,
způsob návrhu jednotlivých panelů – jejich geometrii a vizuální charakter (velikost, míra zaoblení, průhlednost, rozostření apod.),
celkové rozložení panelů v rámci jednotlivých obrazovek.
Pro hlubší pochopení tématu jsem požádal Petra Kosnara, zda by mi mohl nasdílet svůj seznam zdrojů týkajících se navrhování HMI. Tento seznam pro mě fungoval jako osobní „backlog“ informací, ke kterým jsem se v různých fázích návrhu opakovaně vracel.
Zdroje přikládám zde:
USTWO and their automotive HMI design eBook https://assets.ctfassets.net/ve81k805bx04/75czA1ZuJQo89L6AQAzqVq/64b69165514ec102d0528f83ff950f2f/A…
- https://www.theturnsignalblog.com/the-8-guidelines-for-good-automotive-ux-design/
- https://ustwo.com/blog/the-near-future-of-in-car-hmi/ (tohle je prvni dil serie – dole jsou odkazy na dalsi dily)
- https://www.smashingmagazine.com/2021/12/designing-human-machine-interfaces-future-vehicles/
- (zajimavy podcast k tematu) https://thewaroncars.org/2022/07/18/distracted-to-death/
- https://axureboutique.medium.com/detailed-explanation-of-automotive-hmi-interaction-design-part-1-5…
Guidelines, regulations and standards
- NHTSA Human Factors Design Guidance for Driver-Vehicle Interfaces (effective for US market, but great reference universally)
- EU Recommendation on safe and efficient in-vehicle information and communication systems
- JAMA Guidelines for In-vehicle Display Systems
- ISO: Road vehicles — Ergonomic aspects of transportation and control systems
Platform guidelines
- Apple CarPlay https://developer.apple.com/design/human-interface-guidelines/carplay
- Android: Design for Driving https://developers.google.com/cars/design
K haptickým ovladačům a interakcím obecně doporučuju Simple Haptics, to je naprosto super teoretický základ pro pochopení a navrhování jakýchkoliv haptických a taktilních interakcí
https://simplehaptics.se/ (Simple Haptics | Ph.D. thesis of Camille Moussette)
4. Návrh ve Figmě
V prvním kroku jsem zkusil využít AI nástroj Figma Make, který jsem chtěl otestovat jako pomůcku pro vizuální brainstorming. Jako vstup jsem použil screenshot low-fidelity prototypu.
Následně jsem experimentoval s různými prompty a výsledky nebyly vůbec špatné. K dokonalosti sice měly daleko, ale to jsem ani od rychlých konceptů neočekával. Návrhy mi spíš pomohly nastavit směr a vytvořit si základ, od kterého jsem se mohl odrazit v dalším navrhování.
Vybrané rychlé koncepty jsem si následně přenesl do hlavního boardu ve Figmě, abych je měl neustále na očích. Výstup z nástroje Figma Make je možné vidět níže.
Po nastavení prostředí jsem začal pracovat na jednotlivých komponentách. Ikony (volume, driving modes,…) jsem čerpal především z design systémů dostupných ve Figma Community, nejvíce pak z design systému Apple CarPlay.
V návrhu jsme použil font Inter a to v různých řezech písma.
V rámci přípravy komponent jsem se nejvíce zastavil u komponenty pro nastavení teploty na straně řidiče a spolujezdce. Potřeboval jsem, aby se teplota měnila po půl stupních směrem nahoru i dolů.
Zjistil jsem, že Figma v případě celých čísel neumožňuje zachovat jedno desetinné místo, například ve formátu 22.0. Zároveň jsem přemýšlel, jak tuto komponentu oživit tak, aby změna teploty působila přirozeně. Nezbývalo mi tak nic jiného, než číslice rozdělit na jednotlivé části.
To znamená: hlavní číslovka teploty, tečka, desetinné místo a znak stupňů.
Jako první krok jsem nastavil jednotlivé parametry v nabídce Variables. Bylo potřeba zajisti, aby se hodnota za desetinou tečkou přepínala z 0 – 5.
Princip změny teploty fungoval následovně:
V případě hodnoty 0 za desetinnou tečkou se hlavní hodnota teploty vždy zvýšila o jeden stupeň. Při přepnutí na půl stupně (0,5) zůstala hlavní hodnota teploty stejná.
Při snižování teploty byl princip opačný – změna desetinné části ovlivňovala hlavní hodnotu teploty v obráceném pořadí.
Navrhování jednotlivých obrazovek
Na základě počtu kroků jednotlivých haptických profilů jsem potřeboval přesně navrhnout rozložení segmentů. Zde už šlo o geometrii, protože rozsah otočného ovladače byl definovaný v radiánech. Pro konstrukci jsme použil program Rhinoceros 3D.
Navržené screeny pro definované režimy:
Prototypování jednotlivých obrazovek:
5. Iterace na základě testování
Následně jsem provedl uživatelské testování. To probíhalo tak, že participanti řídili auto v počítačové hře a během jízdy plnili zadané úkoly zaměřené na ovládání demonstrátoru. Zajímalo mě, jak kognitivně náročná pro ně bude orientace v rozhraní a s jakou mírou jistoty dokážou jednotlivé úkoly splnit (např. zavolat Thomasovi a následně hovor ukončit).
Dále jsem sledoval, jakou roli v jejich výsledném hodnocení jistoty hraje vizuální stránka rozhraní – zejména barevnost, velikost jednotlivých prvků a míra odlišení aktivních a neaktivních funkcí.
Více informací o výstupech testování je možné najít ve výstupu z předmětu Interakční design (přímý odkaz bude doplněn).
Dále jsem sledoval, jakou roli v jejich výsledném hodnocení jistoty hraje vizuální stránka rozhraní – zejména barevnost, velikost jednotlivých prvků a míra odlišení aktivních a neaktivních funkcí.
Více informací o výstupech testování je možné najít ve výstupu z předmětu Interakční design (přímý odkaz bude doplněn).
6. Závěrem
Závěrem bych rád shrnul celý proces učení Figmy velmi kladně. Více jsme pronikl do jednotlivých funkcionalit a Autolayout už pro mě není cizím slovem. Dokázal jsem si poradit s prototypováním náročnějších prvků, jako byla teplota na straně řidiče a spolujezdce. Také jsme si prošel testováním a následnou iterací rozhraní.
Na čem ještě mohu pracovat?
Najít si dobrý systém v pojmenovávání jednotlivých komponent a vedení přehledné struktury stromu prvků. Aby se prvky nejmenovali Frame xyz. Člověk se následně velmi rychle ztrácí a dohánět to zpětně je hodně práce.
Ještě více proniknout do správného stavění struktury rozhraní. Někdy se mi stávalo, že se mi rozhraní lehce rozhodilo a musel jsem velmi pracně hledat místo, kde mám špatně zadefinový padding, šířku, či výšku apod.
A co dál?
Dále bych rád zkoumal různá uživatelská rozhraní, se kterými se setkávám v každodenním fungování a hledal v nich jak silné, tak slabé stránky. Co se týče Figmy, projdu si ještě kurz od Šimona Jůna. Myslím, že nyní mi dá mnohem více.