KISK Edventure Canvas: Zhodnocení studijního cíle v rámci třetího semestru
Jan Stárek studuji service design projekty o mně + kontakt Jan Stárek / 30.1.2026 KISK Edventure Canvas: Zhodnocení studijního cíle v rámci třetího semestru Zpět 1. Úvodem: Jak jsem na začátku k cíli přistupoval 2. Deepdive 2.0: Mikrointerakce 3. Závěrem 1.Úvodem: Jak jsem na začátku k cíli přistupoval Ve třetím semestru jsem se rozhodl udělat deep dive do návrhu digitálních uživatelských rozhraní. Chtěl jsem se více ponořit do jednotlivých designových principů, stavění komponent i celých obrazovek. Přirozeně se to nabízelo, protože mě čekal předmět Interakční design a Figma, kde byl očekáván primárně digitální výstup v podobě navrženého rozhraní. Už delší dobu jsem měl ve svém backlogu knihu od Michala a Diany Malewitz s názvem Designing User Interfaces. Jde o velmi rozsáhlý e-book (přes 400 stran), který začíná skutečnými základy definujícími náš obor a končí tématy jako developer handoff a UI audit.Celou myšlenku tohoto studijního cíle jsem na začátku konzultoval s Laďkou Z. Suchou a společně jsme dospěli k závěru, že je tento typ cíle dobře načasovaný. V rámci plánování jsem si stanovil SMART kritéria: Specifický: přečíst knihu Designing User Interfaces Měřitelný: aplikovat poznatky o návrhu a rozložení UI prvků při tvorbě projektu do předmětu Interakční design a Figma Dosažitelný: e-book mám k dispozici, budu navrhovat minimálně dvě uživatelská rozhraní Relevantní: návrh dvou uživatelských rozhraní je přímo propojený s mým studiem a rozvojem Časově ohraničený: zimní semestr 2025 Knihu jsem začal číst postupně, ale po nějaké době a s narůstajícím množstvím projektů jsem se dostal do fáze, kdy jsem kapitoly různě přeskakoval a vybíral si témata, která mě právě zaujala nebo která jsem zrovna řešil. Enventure canvas – třetí semestr E-Book: Designing User Interfaces (Michal & Diana Malewicz) 2. Deepdive 2.0: Mikrointerakce V polovině semestru mě velmi oslovilo téma mikrointerakcí. Rozhodl jsem se ho využít i ve své práci do předmětu Angličtina. Do tohoto tématu jsem se znovu ponořil a díky tomu jsem se dostal k velmi zajímavým článkům na Mediu i na portálu Interaction Design Foundation od N/N Group. Nahlédl jsem také do knihy Microinteractions od Dana Saffera, která se principům navrhování mikrointerakcí věnuje do hloubky. Tuto knihu bych si rád co nejdříve prošel detailněji. Tento druhý deep dive byl pro mě velmi přínosný. Pochopil jsem význam a roli mikrointerakcí v designu uživatelských prostředí i to, jak zásadní roli hrají v pocitu jistoty a důvěry uživatelů. Prozkoumal jsem také psychologické principy, na kterých tyto prvky stojí. Dostal jsem se i k reálnému use casu v podobě aplikace Instagram, kde jsou mikrointerakce využity v míře, která může podporovat závislost a negativně ovlivňovat duševní zdraví uživatelů. Sources: [1] —SAFFER, Dan. Microinteractions. Beijing: O’Reilly, 2013. ISBN 978-144-9342-685. [2] —The psychology of micro-interactions in interface design. Online. In: Medium.2025. Link: https://medium.com/@camille.ala/the-psychology-of-micro-interactions-in-interface-design-3b52c5ef7968 [3] —Operant conditioning. Online. In: Britannica. Link: https://www.britannica.com/science/operant-conditioning?utm_source=chatgpt.com [4] —Practical applications of Operant Conditioning in UX. Online. In: UX Planet.2024. Link: https://uxplanet.org/practical-applications-of-operant-conditioning-in-ux-d44cb8d665da [5] —Instagram addiction and possible design solutions. Online. In: UX Planet.2022. Link: https://uxplanet.org/instagram-addiction-and-possible-design-solutions-471418c28d6f [6] — Cognitive Load. Online. In: Laws of UX. Link: https://lawsofux.com/cognitive-load/ [7] —From stressed to streamlined: Cognitive Load Theory in UX design. Online. In: Tallwave.2024. Link:https://tallwave.com/blog/cognitive-load-in-ux/?utm_source=chatgpt.com [8] —Instagram addiction and possible design solutions. Online. In: UX planet. 2022. Link: https://uxplanet.org/instagram-addiction-and-possible-design-solutions-471418c28d6f 3. Závěrem Celkově byl pro mě tento studijní prostor velmi přínosný, ale zároveň v něm vidím prostor pro zlepšení. Rád bych například prošel celou knihu Designing User Interfaces systematičtěji a vytvořil si vlastní mapu informací, ke které bych se mohl vracet, když budu potřebovat aplikovat konkrétní princip nebo navrhovat určitý prvek. Tuto mapu, respektive databázi poznatků, bych chtěl postupně dál rozšiřovat. Do dalšího semestru jsem si zapsal předmět Kreativní práce s informacemi, takže jsem zvědavý, jaké poznatky zde získám, a těším se, že je budu moci aplikovat — například právě tímto způsobem. starek.ja@gmail.com Linkedin Behance Instagram designed with ❤️ Jan Stárek
Design uživatelského rozhraní haptického demonstrátoru: High Fidelity prototyp ve Figmě
Jan Stárek studuji service design projekty o mně + kontakt Jan Stárek / 25.1.2026 Design uživatelského rozhraní haptického demonstrátoru: High Fidelity prototyp ve Figmě Zpět 1. Úvodem k výběru projektu 2. Low-fidelity jako výchozí stav 3. Desk reasearch automotive HMI 4. Návrh ve Figmě 5. Iterace na základě testování 6. Závěrem 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. Enventure canvas – třetí semestr 2. Low-fidelity jako výchozí stav Lo-Fi prototyp grafického rozhraní (Miro) 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. Figma Make 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. Figma Variables 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í. Nastavení podmínek pro přidání teploty Nastavení podmínek pro snížení teploty 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. Konstrukce v 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