Přednáška pro konferenci Common 2016. Co je a proč používat Mobile First? Ukázky kódu z praxe a problémy tohoto postupu.
✎ http://www.vzhurudolu.cz/prirucka/mobile-first
Myslíte, že není ještě potřeba mít mobilní web? Statistiky vás vyvedou z omylu.
Specifika mobilních zařízení – mobilní musí znamenat rychlý.
Přístupy k mobilnímu designu a rozdíly oproti návrhu klasického webu.
Prioritizace informací.
Prvky (ne)žádoucí pro mobilní rozhraní – mobilní neznamená informačně osekaný.
Jak na dotyková rozhraní a jejich specifikace.
Přednáška pro konferenci Common 2016. Co je a proč používat Mobile First? Ukázky kódu z praxe a problémy tohoto postupu.
✎ http://www.vzhurudolu.cz/prirucka/mobile-first
Myslíte, že není ještě potřeba mít mobilní web? Statistiky vás vyvedou z omylu.
Specifika mobilních zařízení – mobilní musí znamenat rychlý.
Přístupy k mobilnímu designu a rozdíly oproti návrhu klasického webu.
Prioritizace informací.
Prvky (ne)žádoucí pro mobilní rozhraní – mobilní neznamená informačně osekaný.
Jak na dotyková rozhraní a jejich specifikace.
http://www.vzhurudolu.cz
3 kroky za klasickým responzivním webdesignem:
— Různé verze médií
— Rychlost načítání
— Efektivita práce: mikrobreakpointy a mobile up
Technology as a Cultural Practice - UX AustraliaRachel Hinman
How do you design a mobile money service for people in rural Uganda who’ve never had a bank account? How do you test the usability of a mobile phone’s address book for users in rural India who’ve never had an address… yet alone an analog address book?
As cheap PCs and inexpensive mobile phones flood the global market, usability and user experience professionals will encounter more and more questions like these – questions that challenge not only our research tools and methodologies, but our fundamental assumptions about how people engage with technology. In this talk, Rachel will share insights she’s gained through creating experiences that must scale across vastly different cultures. She’ll share her thoughts on the challenges and opportunities designing for global markets will present to the user experience industry in the years to come.
http://www.vzhurudolu.cz/prednaska/design-webu-v-prohlizeci-149 ***** Přednáška pr WebExpo 2015. Pojďme si ukázat proces návrhu rozhraní webu při responzivním redesignu eshopu VašeČočky.cz. V posledních letech jsem opustil standardní postupy s wireframy a Photoshopem. Vystačím si s papírem, tužkou a prohlížečem.
SVG bude pro tvorbu uživatelských rozhraní hotová revoluce. To si pište. Flexbox spolu s novými CSS3 vlastnostmi zase zjednodušuje postupy, které dřív z kodérů lezly jako z chlupaté deky. Designéři, vezměte svého kodéra a přijďte se ruku v ruce inspirovat novými technologickými možnostmi frontendu.
ČT má nový designový tým, který postupně redesignuje weby a aplikace. "Děláme UX". Máchat kolem sebe buzzwordy umí každý. Já vám zcela bez buzzwordů ukážu, jaké metody používáme a jak z minima vytěžit maximum.
Mobile user experience is a new frontier. Untethered from a keyboard and mouse, this rich design space is lush with opportunity to invent new and more human ways for people to interact with information. Invention requires casting off many anchors and conventions inherited from the last 50 years of computer science and traditional design and jumping head first into a new and unfamiliar design space.
In this talk, Rachel will provide:
Insight into how designers and UX professionals can navigate the unfamiliar and fast-changing mobile landscape with grace and solid thinking.
In-depth information on advanced mobile design topics UX professionals will spend the next 10+ years pioneering
Tools and frameworks necessary to begin tackling mobile UX problems in this rapidly changing design space.
WordPress šablony a rychlost načítání (WordCamp Praha 2017)Martin Michálek
Jak si nejprodávanější WordPress šablony stojí s rychlostí frontendu? Zjistil jsem, že to moc testovat nejde a tak kupujete zajíce v pytli. V přednášce tedy dostanete seznam nejčastějších problémů a stručný návod k jejich odstranění.
Procházím svůj proces návrhu a realizace rozhraní bez složitých nástrojů. Jeho základem je HTML prototypování. Ukazuji, proč by jej měli chtít používat designéři a proč frontendisti a své dobré i špatné zkušenosti s ním.
Vše co potřebuje markeťák vědět o rychlostní optimalizaci webůMartin Michálek
Proč vlastně řešit rychlost načtení? Proč v souvislostí s rychlostí nemluvit jen o rychlosti načtení stránky? Jak zjistit nedostatky webu související s rychlostí? A co chtít po kodérech, když je objevíte?
http://www.vzhurudolu.cz/prednaska/seologer-178
Jak poznám dobrýho designéra, když ho chci najmout do týmu?Petr Stedry
Jednoho dne zjistíte, že potřebujete designéra. UXáka, digital product designéra, interakčního designéra nebo jak se mu teď moderně všelijak říká. Dáte si inzeráty, najmete headhuntera nebo to zkusíte svépomocí. Sejdou se Vám kandidáti a Vy se chystáte na pohovor. Na co se zeptat? Jak se připravit? Jak vybrat toho nejlepšího?
Ve Zlíně jsem se nasdílel své tipy, jak si urovnat myšlenky a upřesnit, koho vlastně potřebujete.
A ukázalo se, že designéři si to přišli poslechnout i z druhé strany - jak se lépe prodat.
Tato prezentace je součástí cyklu přednášek zaměstnanců Seznamu na vysokých školách s názvem Portálové technologie v praxi.
http://vyvojari.seznam.cz/cz/seznam-a-vysoke-skoly/prednasky/2010/
http://www.vzhurudolu.cz
3 kroky za klasickým responzivním webdesignem:
— Různé verze médií
— Rychlost načítání
— Efektivita práce: mikrobreakpointy a mobile up
Technology as a Cultural Practice - UX AustraliaRachel Hinman
How do you design a mobile money service for people in rural Uganda who’ve never had a bank account? How do you test the usability of a mobile phone’s address book for users in rural India who’ve never had an address… yet alone an analog address book?
As cheap PCs and inexpensive mobile phones flood the global market, usability and user experience professionals will encounter more and more questions like these – questions that challenge not only our research tools and methodologies, but our fundamental assumptions about how people engage with technology. In this talk, Rachel will share insights she’s gained through creating experiences that must scale across vastly different cultures. She’ll share her thoughts on the challenges and opportunities designing for global markets will present to the user experience industry in the years to come.
http://www.vzhurudolu.cz/prednaska/design-webu-v-prohlizeci-149 ***** Přednáška pr WebExpo 2015. Pojďme si ukázat proces návrhu rozhraní webu při responzivním redesignu eshopu VašeČočky.cz. V posledních letech jsem opustil standardní postupy s wireframy a Photoshopem. Vystačím si s papírem, tužkou a prohlížečem.
SVG bude pro tvorbu uživatelských rozhraní hotová revoluce. To si pište. Flexbox spolu s novými CSS3 vlastnostmi zase zjednodušuje postupy, které dřív z kodérů lezly jako z chlupaté deky. Designéři, vezměte svého kodéra a přijďte se ruku v ruce inspirovat novými technologickými možnostmi frontendu.
ČT má nový designový tým, který postupně redesignuje weby a aplikace. "Děláme UX". Máchat kolem sebe buzzwordy umí každý. Já vám zcela bez buzzwordů ukážu, jaké metody používáme a jak z minima vytěžit maximum.
Mobile user experience is a new frontier. Untethered from a keyboard and mouse, this rich design space is lush with opportunity to invent new and more human ways for people to interact with information. Invention requires casting off many anchors and conventions inherited from the last 50 years of computer science and traditional design and jumping head first into a new and unfamiliar design space.
In this talk, Rachel will provide:
Insight into how designers and UX professionals can navigate the unfamiliar and fast-changing mobile landscape with grace and solid thinking.
In-depth information on advanced mobile design topics UX professionals will spend the next 10+ years pioneering
Tools and frameworks necessary to begin tackling mobile UX problems in this rapidly changing design space.
WordPress šablony a rychlost načítání (WordCamp Praha 2017)Martin Michálek
Jak si nejprodávanější WordPress šablony stojí s rychlostí frontendu? Zjistil jsem, že to moc testovat nejde a tak kupujete zajíce v pytli. V přednášce tedy dostanete seznam nejčastějších problémů a stručný návod k jejich odstranění.
Procházím svůj proces návrhu a realizace rozhraní bez složitých nástrojů. Jeho základem je HTML prototypování. Ukazuji, proč by jej měli chtít používat designéři a proč frontendisti a své dobré i špatné zkušenosti s ním.
Vše co potřebuje markeťák vědět o rychlostní optimalizaci webůMartin Michálek
Proč vlastně řešit rychlost načtení? Proč v souvislostí s rychlostí nemluvit jen o rychlosti načtení stránky? Jak zjistit nedostatky webu související s rychlostí? A co chtít po kodérech, když je objevíte?
http://www.vzhurudolu.cz/prednaska/seologer-178
Jak poznám dobrýho designéra, když ho chci najmout do týmu?Petr Stedry
Jednoho dne zjistíte, že potřebujete designéra. UXáka, digital product designéra, interakčního designéra nebo jak se mu teď moderně všelijak říká. Dáte si inzeráty, najmete headhuntera nebo to zkusíte svépomocí. Sejdou se Vám kandidáti a Vy se chystáte na pohovor. Na co se zeptat? Jak se připravit? Jak vybrat toho nejlepšího?
Ve Zlíně jsem se nasdílel své tipy, jak si urovnat myšlenky a upřesnit, koho vlastně potřebujete.
A ukázalo se, že designéři si to přišli poslechnout i z druhé strany - jak se lépe prodat.
Tato prezentace je součástí cyklu přednášek zaměstnanců Seznamu na vysokých školách s názvem Portálové technologie v praxi.
http://vyvojari.seznam.cz/cz/seznam-a-vysoke-skoly/prednasky/2010/
I knihovnám může přístupnost přinést celou řadu výhod - snížit provozní náklady, zvýšit počet návštěvníků či pozitivní nahlížení veřejnosti na knihovnu jako takovou. Pojďme si ukázat, jak i malou změnou na webové stránce můžeme výrazně zlepšit její přístupnost a získat tak výhody, které přístupnost přináší.
Krátce se také podíváme na to, jak testujeme přístupnost v soutěži Biblioweb, na jaké problémy na webech knihoven nejčastěji narážíme, a jak je možné tyto bariéry odstranit.
Accessibility can bring a lot of benefits also for libraries – reduction of operation costs, raising of amount of visitors or improvement of library´s PR. Let´s show how even a small change on a web page could dramatically increase its accessibility and help to gain benefits, that accessibility brings.
Let me also briefly introduce you our way of accessibility evaluation in Biblioweb contest, show you the problems, which we often meet and ways, how it´s possible to remove these barriers.
Přístupnost webů knihoven - příklady dobré a špatné praxe Radek Pavlíček
I knihovnám může přístupnost přinést celou řadu výhod - snížit provozní náklady, zvýšit počet návštěvníků či zlepšit pozitivní nahlížení veřejnosti na knihovnu jako takovou. Seznámím vás s tím, jak testujeme přístupnost v soutěži Biblioweb, na jaké problémy na webech knihoven nejčastěji narážíme, a jak je možné tyto bariéry odstranit. Dozvíte se, jak i malou změnou na webové stránce lze výrazně zlepšit její přístupnost a získat tak výhody, které přístupnost přináší.
Call to Action neboli výzva k akci může být velmi silou zbraní designera při návrhu webových stránek, e-mailové kampaně, banneru či jakéhokoli jiného nástroje, kterým se snaží přimět ostatní lidi provést žádoucí činnost. V prezentaci projdeme celou řadu tipů, jak naše CTA vymazlit k dokonalosti.
Slajdy k mé prezentaci Přístupné weby knihoven, kterou jsem přednesl na Knihovnickém workshopu ve Svitavách v pondělí 14. května 2012.
Cílem prezentace bylo seznámit účastníky s výhodami přístupného webu, testováním přístupnosti v soutěži Biblioweb a asistivními technologiemi pro uživatele se zrakovým handicapem.
Práce UX specialistu může výrazně pomoct v SEO, aniž by to tušil. Podívejte se, jak využít benefity SEO k prosazení UX aktivit. A jak můžou UX a SEO specialisti navzájem spolupracovat.
User Experience (UX) neboli uživatelský prožitek vyjadřuje celkovou míru spokojenosti návštěvníka s webem.
Pokud je prožitek dobrý, jsou návštěvníci vašeho webu spokojení … a dojdou k vámi vytýčenému konverznímu cíli.
Pokud je špatný, pak si váš web neoblíbí ... a konkurence je pouze o pár kliků myši vedle ...
Přístupnost je přínosná nejen pro uživatele se zdravotním handicapem. Prezentace na několika příkladech ze života a případových studiích ukazuje, jak je přístupnost velmi úzce provázána s dalšími oblastmi webu a jak pomáhá skutečně všem uživatelům.
V prezentaci se také dozvíte, že přístupnost nemusí být nákladná a ani náročná na implementaci a také to, že často i drobná a finančně i časově nenáročná úprava může přístupnosti webu hodně pomoci.
Similar to Použitelnost a přístupnost (nejen) neziskových webů (14)
Diplomová práce: Využití eye trackingu v internetovém marketinguLukas Marvan
Teoretická část práce shrnuje dosavadní historii a poznatky týkající se využití eye trackingu jak obecně, tak jeho použití pro výzkum v oblasti elektronického marketingu, tedy např. pro měření internetových stránek nebo direct mailových kampaní. Praktická část práce popisuje realizované měření oční kamerou na vybraných typických příkladech elektronických komunikátů s cílem zjistit, jaké grafické a obsahové prvky ovlivňují pohledy a pozornost jejich čtenářů. Cílem projektové části práce je sestavení sady metodických rad a pokynů pro tvůrce elektronických komunikátů, opírající se o výsledky měření a jejich analýzy provedené v praktické části práce a naplánování směřování dalšího výzkumu.
2. Pročprávě toto téma? Protože nejen reklamou živ je web. Všichni (nejen NGO) řeší, jak dostat lidi na svoje stránky, ale málokdo se pak poctivě stará o to,co se tam s nimi děje. Facebook, Twitter, SEO, PPC, bannery, DM, RSS To všechno jsou kanály, které vám téměř zaručeně přivedou na stránky nové návštěvníky,ale co potom s nimi?
3. Pročprávě já? Protože kromě toho, že v Seznamu… pracuji jako koncepční návrhář v oddělení návrhu UI starám se o přístupnost našich služeb … tak se mimo Seznam věnuji: www.habrovka.cz www.ginkgo-praha.org www.amo.cz
4. Definice Použitelnost Zabývá se adekvátní jednoduchostí použití internetových stránek (programu, přístroje). Důležitá je snadnáorientace (kde jsem?)a navigace (tam jdu)na stránkách. UI vs. UX. Přístupnost Řeší lepší zpřístupnění obsahu webových stránek handicapovaným uživatelům. Postižení: zrakově, pohybově, sluchově, kognitivní poruchy, vyhledávací roboti.
5. Naše společná motivace Použitelnost a přístupnost se věnují zlepšování stránek. Proč? Chceme, aby nám tam chodilo víc lidí. Proč? Chceme, aby nám lidé: Nejen poslali víc peněz, ale třeba i: Podepsali víc petic. Přečetli víc článků. Registrovali se (víc).
6. A co motivace klientů? Naši návštěvníci mají také své cíle. Opravdu znáte potřeby Vašich klientů? Kdy naposledy jste… … se lidí zeptali na to, co u vás na webu pohledávají? … se podívali do statistik a zjistili, jestli to odpovídá? A odpovídají potřeby vašich klientůcílům vaší organizace?
7. Máme a známe cíle A pokud cíle nemáme, měli bychom si je rychle stanovit / zjistit. Cílů na které se soustředíme však nesmí být příliš mnoho. A neměly by se na stránkách křížit, 1 stránka = 1 cíl.
8. Struktura a navigace Pro víc cílů potřebujeme víc stránek. Víc stránek tvoří strukturu. Struktura vyžaduje navigaci. Navigace ≠ Menu
9. Jak funguje váš web Návštěvníci Taky návštěvnici Úplně jiní návštěvníci
10. Přístupy na web Přístupy na web už zdaleka nejsou vertikální od HP přes sekci až k článku (vlastně ani nikdy nebyly, ale přistupovalo se tak k nim). Lidé na stránky přicházejí kudykoliv. Z toho jim vyplývá jedna zásadní otázka:
11. „Kde to sakra jsem?“ Přesněji: Kde jsem? Na co se to dívám? Co s tím můžu udělat?(Asi na to můžu kliknout, ale co se potom se mnou stane?) Kam mohu odejít?
12. Stavte cesty k cíli Přivést lidi na web nestačí. Je potřeba je přimět k určité akci – k cestě k cíli. Chvíle, kdy se uživatelé rozhodují, kam ze vstupní stránky odejít, jsou přesně ty okamžiky, kdy začíná jejich cestak vašemu cíli.
13. 2 typy cest (částí stránek) Pastičky na myši Objednávky Registrace Kolečka pro křečky Čtení článků Prohlížení fotek A na cestě myším ani křečkůmneházejte klacky pod nohy!
14. Klacky +Berle Podtržený odkaz Zde jste Tam můžete jít Logo = Domů(poslední záchrana) Jeden za 1 000 slov. TITLE [Související položky] Nesouvisející| Položky Odkaz, text, taky odkaz. OK +KO +Jdi+ Stůj Související | Položky [Nesouvisející položky] Malé písmo(Malé písmo) Malý kontrast(Malý kontrast) Malé ovládací prvky
15. Příklady – KO #1 auto-mat.cz – Kudy domů? (Nekliká logo, odkaznevedenarozcestník.) fandom.cz – Logo bez ALTu. sciencecafe.cz – Kde jsem = co spojuje tyto články? + 2 loga – k čemu? + Menu až úplně nahoře?! Není hned vidět. kulturni-most.cz – Kde jsem? Co je to za web? kulturni-most.cz – Zkuste přejít na web propagované akce. (Kliká jen ikonka W ne URL.)
16. Příklady – KO #2 dtest.cz – Kde jsem? (Neodpovídá TITLE ani šipky v menu.) liberix.cz– Souvislosti? (Špatně umístěné čáry mezi články = odřezávají nadpis od obsahu.) havranek.dolnipovltavi.cz – Fotky by měly tak klikat na články – je to taky cesta! bazilika.cz – Filtr pořadů – jak poznám, že to nejsou jen vysvětlivky, ale že taky filtruje?Podtrhnout.
17. Příklady - OK sanceprodraha.cz – Vím, kde jsem i kam dál. nevladky-a-krize.cz – Kam dál? = Rudý button! hornomlynska.cz – Kde jsem? Slogan napoví. theia.cz – Super kontakty! Perlička na konec:spokojeny-domov.cz– slogan = OK, ale jako obrázek?!? = KO, ale má alespoň ALT = OK
18. Chyba je dobrá Geniální stránky nevytvoří na první pokus nikdo a pokud tvrdí, že ano, tak kecá. K chybě tedy dříve, nebo později dojde.Čím dříve, tím lépe! Později už bývá pozdě… Je tedy důležité udělat, odhalit a opravit chybu co nejdříve (co nejblíže počátku vývoje nového / redesignu stávajícího webu).
20. Postup – 1. průzkum Čeho chceme dosáhnout? Co od nás čekají klienti (donátoři)? Pozorujte! (Nejen na webu!)
21. Postup – 2. design Tužka je nejlepší kamarád. Buďte kreativní na správných místech. Nevynalézejte kolo.
22. Postup – 3. testování Ukazujte náčrtky, polotovary, zkušební beta verze a ptejte se lidí kolem sebe, jestli se orientují.+ Zkuste jim zadat pár jednoduchých úkolů.
23. Trpělivost a důvěra Každý člověk má jen omezený pohár trpělivosti, který když přeteče, tak se nas… naštve a odchází. Dávejte uživatelům odpovědi na jejich otázky,chovejte se na svém webu předvídatelně,budou vám o to více důvěřovat a jejich pohár trpělivosti se nebude vyprazdňovat, ba naopak plnit a prohlubovat (UX).
24. Doporučená četba Pro začátek:dogma.pixy.cz(starší, ale dobré!) Nenuťte uživatele přemýšlet (SteveKrug) Tvoříme přístupné webové stránky(David Špinar) Savethe Pixel (BenHunt) Gettingreal(37signals) 12 požadavků na přístupnost pouzitelnost.info/pouzitelnost pravidla-pristupnosti.cz