Jakub Goldmann a Martin Kopta

Byznys

Design

Marketing

Umění

Markdown je s námi 20 let. Řekni si o web #29

Řekni si o web – Podcast pro majitele a designéry webů

Jakub Goldmann a Martin Kopta. Specialisté na webdesign a digitální strategie. Tipy a triky pro designéry, manažery i podnikatele, kteří spravují své vlastní weby. Sledujte nové techniky a trendy ve světě webu → 📒 75 tipů, jak si říct o web <a href="https://www.reknisioweb.cz?utm_medium=podcast">www.reknisioweb.cz</a>

(00:00) Řekni si o web(00:20) Telegraficky(00:44) Linkodrom(04:34) Život s technologiemi(05:52) Na čem právě pracujeme(06:05) Tip z naší knížky(06:47) Pozvánka na FrontKon(06:57) Kuchyňské rozhovory---TelegrafickyVláda poslala návrh zákona o kybernetické bezpečnosti do eKLEPu. * Google ve Chromu cookies třetí strany nechá, vypnou si je uživatelé. * Američtí UXáci vydělávají méně peněz. * Digitální nástěnka Miro zavádí AI asistenta na plátně. * Zavřeli otce ruského internetu. V příběhu figuruje pražská spojka. * Na Spotify si můžete pustit playlist pro UX výzkumníky.---LinkodromHustota UI: Jak ji definovat a navrhovat. Uživatelské rozhraní se za poslední dekádu rozvolnilo. Je to jasně vidět při srovnání současných webů a aplikací s těmi z počátku století. Hustota UI zahrnuje nejen vizuální aspekt, ale také množství informací a efektivitu, kterou uživateli poskytuje k jejich vstřebání.Klasická hustota informací jako na terminálu od Bloomberga je vizuálně přeplněná, ale bohatá na informace. Edward Tufte přišel v knize The Visual Display of Quantitative Data s termínem poměr dat k inkoustu, tedy poměr užitečných informací k celkovým vizuálním prvkům. Tento koncept lze aplikovat i na UI, kde designová hustota přispívá k celkové použitelnosti.Nejde o to, že by uživatelské rozhraní nemělo být vzdušné, ale kompaktní. Hlavně by nemělo zvyšovat poměr šumu na úkor signálu. Ornament je zločin.Důležitým aspektem je také hustota dat v čase, která závisí na rychlosti odezvy UI. Konečným cílem je maximalizovat přenos informací, které uživatel získá, za co nejmenší vynaložené úsilí.---Praktické tipy pro výběr klávesnic v mobilním designu. Ksenia Toloknova ve článku Are you designing with the right keyboard in mind? připomíná, že v iOS najdete až padesát druhů uživatelských vstupů a na Androidu kolem třiceti. Volba správného typu vstupního pole ovlivňuje vzhled klávesnice, například pro hesla nebo e-maily.Akční tlačítka na klávesnicích lze přizpůsobit pro různé úkony, což zlepšuje uživatelský zážitek. Na iOS jich je hned dvanáct druhů, u Androidu sedm. Správné použití klávesnic zlepšuje navigaci a celkovou interakci s aplikací.---Atomic UX research proměňuje práci výzkumníků. Když dnes pořídíte výzkumný repozitář, nejspíš půjde o opinionated software a bude vás navádět do jedné konkrétní výzkumné metodiky – atomický uživatelský výzkum.Atomic UX research představuje koncept rozdělení zjištění do malých základních částí – nugetů. Nugety umožňují jemné třídění, organizaci a opakované využití zjištění. Tomer Sharon a Daniel Pidcock se pro tento model inspirovali metodou Atomic Design a vědeckým modelem DIKW (data, informace, znalosti, moudrost).Atomický uživatelský výzkum navazuje na dříve používané metody zpracování kvalitativních dat v sociologii, antropologii a dalších společenských vědách. Například na tematickou analýzu, zakotvenou teorii nebo kvalitativní obsahovou analýzu. V prostředí UX atomickému výzkumu předcházelo použití affinity diagramu, teorie rámování nebo analýzy narativů.Výhodou atomického UX výzkumu je modularita a škálovatelnost. Nugety je možné snadno kombinovat napříč studiemi a výzkumnými projekty. Nugety se dají průběžně sbírat a doplňovat, takže vhled nezastarává. Stakeholdeři se nemusejí seznamovat s komplexní výzkumnou zprávou, ale stačí jim vnímat formulovaný vhled ve formě třeba jen jedné skupiny nugetů.Každý vhled má k sobě vázané nugety a nugety se dají zdrojovat až ke konkrétním experimentům, což podporuje rozhodování postavené na důkazech. Nugety se snadno ukládají do informačních systémů, které lze třídit podle klíčových slov a prohledávat, takže k výsledkům výzkumu může přistupovat více lidí i bez výzkumnické průpravy.---Baví vás tenhle příspěvek? Řekněte o něm ostatním!---Čmáráte schémata a diagramy na papír, a pak se trápíte s převodem do digitální podoby? Už se trápit nemusíte. Zvládne to za vás umělá inteligence v nástroji Sketch2scheme.com, která vaše kresby převede na obrázek, do formátu Draw.io nebo do kódu pro Mermaid.---Chtěli byste ovládat Figmu jako ninjové? Bernat Fortet pro vás připravil herní plán s deseti levely, kde z vás postupně vytrénuje profíka v efektivním ovládání Figmy. A že to je celé ve Figmě, asi říkat nemusíme. Pokud naopak jedete s dětmi pryč od civilizace, můžou se vám hodit nepočítačové hry.---Život s technologiemiPřed pár dny Daniel Gamrot sepsal, co očekává od aplikace pro poznámky. Začíná seznamem vymožeností Obsidianu. Jednou z položek je „Psaní v Markdown“. Na markdown už jsme tu párkrát narazili.Psaní v markdownu je osvobozující. Nemusíte řešit styly vzhledu. Prostě říkáte, co bude nadpis, co tučné písmo, co odrážkový seznam nebo odkaz. Narozdíl od vyznačovacích jazyků jako je HTML ale značky neruší čtení, ale naopak fungují jako vodítka pro lepší orientaci v textu. Tím, že je markdown textový soubor, odpadá problém s kompatibilitou editorů. Psát ho můžete klidně v poznámkovém bloku.Markdown vznikl před dvaceti lety, ale principy vyznačování převzal z dobré praxe předchozích formátů. Ve stejné době vznikly i další podobné jazyky: textile, reStructuredText, MakeDoc nebo TeXy od Davida Grudla. Hlavní výhodou markdownu je možnost nerušeně ho číst ve zdrojové formě.Velká část notace markdownu je lidem vlastní už od dob psaní na psacím stroji. Nadpisy podtrhané znakem rovná se nebo pomlčkami, zvýrazňování podtržítky a hvězdičkami, hvězdičkové odrážky a podobně používali lidé i v běžné komunikaci v e-mailech.Teď dokonce markdown proniknul výrazně i do Google Docs, takže se s ním nejspíš budeme potkávat stále častěji.---Na čem právě pracujemeDnes je to právě rok, co vyšla knížka 75 tipů, jak si říct o web. Letí to! Jakub s Martinem si v pondělí udělali fotografovací den v Social Lions a nechali si pořídit nové obrázky. Mimo jiné i s knihou.---Tip z naší knihyDůležité informace musí být vidět hnedZajděte si do trafiky a podívejte se, co je vidět z novin vyskládaných na pultu. Ve většině případů vidíte jen hlavičku s názvem novin. V lepším případě je vidět horní polovina titulní strany. Anglicky se tomu říká above the fold. Na webu je above the fold to, co vidíte z webové stránky po načtení hned na první obrazovce.Obsah, který návštěvník webu uvidí na první obrazovce, musí motivovat k posouvání stránky. Editoři novin využívají kompoziční princip převrácené pyramidy. Na úvod vám řeknou zásadní informaci a teprve pod foldem a na dalších stranách se dozvíte podrobnosti. Při tvorbě webu postupujte také tak.---Přijďte 9. října na Frontkon. Jakub s Martinem připravují lightning talk, proč je v INP jako hranice právě dvě stě milisekund. Vstupenky jsou ještě v prodeji za příznivou cenu.---A to je ze čtvrtého prázdninového zpravodaje Řekni si o web roku 2024 všechno. Před 65 lety se Nixon s Chruščovem v kuchyni přetahovali, jestli je lepší žít ve svobodě nebo za železnou oponou. Díky všem za feedback. Pokud pro nás máte nějaký tip, co příště vylepšit nebo udělat jinak, těšíme se.Hezké léto vám přejí Jakub Goldmann a Martin Kopta.Líbí se vám newsletter Řekni si o web? Přihlaste se k pravidelnému odběru do e-mailu nebo přes Substack. This is a public episode. If you would like to discuss this with other subscribers or get access to bonus episodes, visit www.reknisioweb.cz

(00:00) Řekni si o web(00:20) Telegraficky(00:44) Linkodrom(04:34) Život s technologiemi(05:52) Na čem právě pracujeme(06:05) Tip z naší knížky(06:47) Pozvánka na FrontKon(06:57) Kuchyňské rozhovory---Telegraficky<a target="_blank" href="https://www.lupa.cz/clanky/regulace-podle-nis2-vlada-nechce-rict-v-jake-podobe-kyberbezpecnostni-zakon-schvalila/">Vláda poslala návrh zákona</a> o kybernetické bezpečnosti <a target="_blank" href="https://odok.cz/portal/veklep/material/ALBSCSSFKU7S/ALBSD7F7BUCL">do eKLEPu</a>. * <a target="_blank" href="https://www.reknisioweb.cz/p/google-3rd-party-cookies-zmena">Google ve Chromu cookies třetí strany nechá</a>, vypnou si je uživatelé. * Američtí <a target="_blank" href="https://www.reknisioweb.cz/p/mzdy-ux-specialistu-v-usa">UXáci vydělávají méně</a> peněz. * Digitální nástěnka <a target="_blank" href="https://www.reknisioweb.cz/p/miro-ai-sidekick">Miro zavádí AI asistenta</a> na plátně. * <a target="_blank" href="https://www.reknisioweb.cz/p/alexej-soldatov-za-mrizemi">Zavřeli otce ruského internetu.</a> V příběhu figuruje pražská spojka. * Na Spotify si můžete pustit <a target="_blank" href="https://open.spotify.com/playlist/2v53TBGfm94O7qE54PtDA4?si=6a78d9b963d647dc">playlist pro UX výzkumníky</a>.---LinkodromHustota UI: Jak ji definovat a navrhovat. Uživatelské rozhraní se za poslední dekádu rozvolnilo. Je to jasně vidět při srovnání současných webů a aplikací s těmi z počátku století. <a target="_blank" href="https://matthewstrom.com/writing/ui-density/?ref=sidebar">Hustota UI</a> zahrnuje nejen vizuální aspekt, ale také množství informací a efektivitu, kterou uživateli poskytuje k jejich vstřebání.Klasická hustota informací jako na terminálu od Bloomberga je vizuálně přeplněná, ale bohatá na informace. Edward Tufte přišel v knize <a target="_blank" href="https://www.goodreads.com/book/show/17744.The_Visual_Display_of_Quantitative_Information_2nd_Ed_">The Visual Display of Quantitative Data</a> s termínem <a target="_blank" href="https://www.codeconquest.com/blog/data-ink-ratio-explained-with-example/#:~:text=The%20data%2Dink%20ratio%20is,required%20to%20print%20the%20graphic.">poměr dat k inkoustu</a>, tedy poměr užitečných informací k celkovým vizuálním prvkům. Tento koncept lze aplikovat i na UI, kde designová hustota přispívá k celkové použitelnosti.Nejde o to, že by uživatelské rozhraní nemělo být vzdušné, ale kompaktní. Hlavně by nemělo zvyšovat <a target="_blank" href="https://en.wikipedia.org/wiki/Signal-to-noise_ratio">poměr šumu na úkor signálu</a>. <a target="_blank" href="https://en.wikipedia.org/wiki/Ornament_and_Crime">Ornament je zločin.</a>Důležitým aspektem je také hustota dat v čase, která závisí na rychlosti odezvy UI. Konečným cílem je maximalizovat přenos informací, které uživatel získá, za co nejmenší vynaložené úsilí.---Praktické tipy pro výběr klávesnic v mobilním designu. Ksenia Toloknova ve článku <a target="_blank" href="https://uxdesign.cc/are-you-designing-with-the-right-keyboard-ab2f02df42b6">Are you designing with the right keyboard in mind?</a> připomíná, že v iOS najdete až padesát druhů uživatelských vstupů a na Androidu kolem třiceti. Volba správného typu vstupního pole ovlivňuje vzhled klávesnice, například pro hesla nebo e-maily.Akční tlačítka na klávesnicích lze přizpůsobit pro různé úkony, což zlepšuje uživatelský zážitek. Na iOS jich je hned dvanáct druhů, u Androidu sedm. Správné použití klávesnic zlepšuje navigaci a celkovou interakci s aplikací.---Atomic UX research proměňuje práci výzkumníků. Když dnes pořídíte výzkumný repozitář, nejspíš půjde o <a target="_blank" href="https://basecamp.com/gettingreal/04.6-make-opinionated-software">opinionated software</a> a bude vás navádět do jedné konkrétní výzkumné metodiky – <a target="_blank" href="https://medium.com/design-kisk/atomic-ux-research-trochu-jin%C3%BD-jadern%C3%BD-v%C3%BDzkum-298f8551134e">atomický uživatelský výzkum</a>.Atomic UX research představuje koncept rozdělení zjištění do malých základních částí – nugetů. Nugety umožňují jemné třídění, organizaci a opakované využití zjištění. Tomer Sharon a Daniel Pidcock <a target="_blank" href="https://blog.prototypr.io/what-is-atomic-research-e5d9fbc1285c">se pro tento model inspirovali</a> metodou <a target="_blank" href="https://atomicdesign.bradfrost.com/chapter-2/">Atomic Design</a> a vědeckým modelem <a target="_blank" href="https://cs.wikipedia.org/wiki/DIKW_pyramida">DIKW</a> (data, informace, znalosti, moudrost).Atomický uživatelský výzkum navazuje na dříve používané metody zpracování kvalitativních dat v sociologii, antropologii a dalších společenských vědách. Například na <a target="_blank" href="https://en.wikipedia.org/wiki/Thematic_analysis">tematickou analýzu</a>, <a target="_blank" href="https://cs.wikipedia.org/wiki/Zakotven%C3%A1_teorie#:~:text=Zakotven%C3%A1%20teorie%20vych%C3%A1z%C3%AD%20stejn%C4%9B%20jako,volnosti%20k%20pe%C4%8Dliv%C3%A9mu%20prozkoum%C3%A1ni%20jevu.">zakotvenou teorii</a> nebo <a target="_blank" href="https://cs.wikipedia.org/wiki/Obsahov%C3%A1_anal%C3%BDza">kvalitativní obsahovou analýzu</a>. V prostředí UX atomickému výzkumu předcházelo použití <a target="_blank" href="https://en.wikipedia.org/wiki/Affinity_diagram">affinity diagramu</a>, <a target="_blank" href="https://cs.wikipedia.org/wiki/Teorie_r%C3%A1mov%C3%A1n%C3%AD">teorie rámování</a> nebo <a target="_blank" href="https://cs.wikipedia.org/wiki/Anal%C3%BDza_narativ%C5%AF">analýzy narativů</a>.Výhodou atomického UX výzkumu je modularita a škálovatelnost. Nugety je možné snadno kombinovat napříč studiemi a výzkumnými projekty. Nugety se dají průběžně sbírat a doplňovat, takže vhled nezastarává. Stakeholdeři se nemusejí seznamovat s komplexní výzkumnou zprávou, ale stačí jim vnímat formulovaný vhled ve formě třeba jen jedné skupiny nugetů.Každý vhled má k sobě vázané nugety a nugety se dají zdrojovat až ke konkrétním experimentům, což podporuje rozhodování postavené na důkazech. Nugety se snadno ukládají do informačních systémů, které lze třídit podle klíčových slov a prohledávat, takže k výsledkům výzkumu může přistupovat více lidí i bez výzkumnické průpravy.---Baví vás tenhle příspěvek? Řekněte o něm ostatním!---Čmáráte schémata a diagramy na papír, a pak se trápíte s převodem do digitální podoby? Už se trápit nemusíte. Zvládne to za vás umělá inteligence v nástroji Sketch2scheme.com, která <a target="_blank" href="https://sketch2scheme.com/">vaše kresby převede na obrázek</a>, do formátu <a target="_blank" href="https://app.diagrams.net/">Draw.io</a> nebo do kódu pro <a target="_blank" href="https://mermaid.js.org/">Mermaid</a>.---Chtěli byste ovládat Figmu jako ninjové? Bernat Fortet pro vás připravil <a target="_blank" href="https://www.figma.com/community/file/769694576496801916/figma-ninja-speed-up-your-figma-skills">herní plán s deseti levely</a>, kde z vás postupně vytrénuje profíka v efektivním ovládání Figmy. A že to je celé ve Figmě, asi říkat nemusíme. Pokud naopak jedete s dětmi pryč od civilizace, můžou se vám hodit <a target="_blank" href="https://www.nepocitacovehry.cz/">nepočítačové hry</a>.---Život s technologiemiPřed pár dny Daniel Gamrot sepsal, <a target="_blank" href="https://www.linkedin.com/feed/update/urn:li:activity:7216675762119008256/">co očekává od aplikace pro poznámky</a>. Začíná seznamem vymožeností Obsidianu. Jednou z položek je „Psaní v Markdown“. Na markdown už jsme tu párkrát narazili.<a target="_blank" href="https://cs.wikipedia.org/wiki/Markdown">Psaní v markdownu</a> je osvobozující. Nemusíte řešit styly vzhledu. Prostě říkáte, co bude nadpis, co tučné písmo, co odrážkový seznam nebo odkaz. Narozdíl od vyznačovacích jazyků jako je HTML ale značky neruší čtení, ale naopak fungují jako vodítka pro lepší orientaci v textu. Tím, že je markdown textový soubor, odpadá problém s kompatibilitou editorů. Psát ho můžete klidně v poznámkovém bloku.Markdown vznikl před dvaceti lety, ale principy vyznačování převzal z dobré praxe předchozích formátů. Ve stejné době vznikly i další podobné jazyky: <a target="_blank" href="https://textile-lang.com/">textile</a>, <a target="_blank" href="https://docutils.sourceforge.io/docs/user/rst/quickstart.html">reStructuredText</a>, <a target="_blank" href="https://en.wikipedia.org/wiki/MakeDoc">MakeDoc</a> nebo <a target="_blank" href="https://texy.info/en/syntax">TeXy</a> od Davida Grudla. Hlavní výhodou markdownu je možnost nerušeně ho číst ve zdrojové formě.Velká část notace markdownu je lidem vlastní už od dob psaní na psacím stroji. Nadpisy podtrhané znakem rovná se nebo pomlčkami, zvýrazňování podtržítky a hvězdičkami, hvězdičkové odrážky a podobně používali lidé i v běžné komunikaci v e-mailech.Teď dokonce <a target="_blank" href="https://workspaceupdates.googleblog.com/2024/07/import-and-export-markdown-in-google-docs.html">markdown proniknul výrazně i do Google Docs</a>, takže se s ním nejspíš budeme potkávat stále častěji.---Na čem právě pracujemeDnes je to právě <a target="_blank" href="https://www.reknisioweb.cz/p/vyroci-knihy">rok, co vyšla knížka</a> 75 tipů, jak si říct o web. Letí to! Jakub s Martinem si v pondělí udělali fotografovací den v <a target="_blank" href="https://www.sociallions.cz/">Social Lions</a> a nechali si pořídit nové obrázky. Mimo jiné i s knihou.---Tip z naší knihyDůležité informace musí být vidět hnedZajděte si do trafiky a podívejte se, co je vidět z novin vyskládaných na pultu. Ve většině případů vidíte jen hlavičku s názvem novin. V lepším případě je vidět horní polovina titulní strany. Anglicky se tomu říká above the fold. Na webu je above the fold to, co vidíte z webové stránky po načtení hned na první obrazovce.Obsah, který návštěvník webu uvidí na první obrazovce, musí motivovat k posouvání stránky. Editoři novin využívají kompoziční princip převrácené pyramidy. Na úvod vám řeknou zásadní informaci a teprve pod foldem a na dalších stranách se dozvíte podrobnosti. Při tvorbě webu postupujte také tak.---Přijďte 9. října na Frontkon. Jakub s Martinem připravují lightning talk, proč je v INP jako hranice právě dvě stě milisekund. <a target="_blank" href="https://frontkon.cz/">Vstupenky jsou ještě v prodeji</a> za příznivou cenu.---A to je ze čtvrtého prázdninového zpravodaje <a target="_blank" href="https://reknisioweb.cz/">Řekni si o web</a> roku 2024 všechno. Před 65 lety se <a target="_blank" href="https://en.wikipedia.org/wiki/Kitchen_Debate">Nixon s Chruščovem v kuchyni</a> přetahovali, jestli je lepší žít ve svobodě nebo za železnou oponou. Díky všem za feedback. Pokud pro nás máte nějaký tip, co příště vylepšit nebo udělat jinak, těšíme se.Hezké léto vám přejí Jakub Goldmann a Martin Kopta.Líbí se vám newsletter Řekni si o web? Přihlaste se k pravidelnému odběru do e-mailu nebo přes Substack. This is a public episode. If you would like to discuss this with other subscribers or get access to bonus episodes, visit <a href="https://www.reknisioweb.cz?utm_medium=podcast&utm_campaign=CTA_1">www.reknisioweb.cz</a>

Aplikace Youradio Talk

Markdown je s námi 20 let. Řekni si o web #29

Poslechněte si podcast