[{"data":1,"prerenderedAt":320},["ShallowReactive",2],{"nav":3,"page-\u002Fvueconf2025\u002Fhow-to-ruin-a-user-interface-by-kathryn-grayson-nanz":155},[4,30,91,151],{"title":5,"path":6,"stem":7,"children":8,"page":29},"Codestock2026","\u002Fcodestock2026","CodeStock2026",[9,13,17,21,25],{"title":10,"path":11,"stem":12},"AI Reviewers By Avindra Fernando","\u002Fcodestock2026\u002Fai-reviewers-by-avindra-fernando","CodeStock2026\u002FAI Reviewers by Avindra Fernando",{"title":14,"path":15,"stem":16},"Containers","\u002Fcodestock2026\u002Fcontainers","CodeStock2026\u002FContainers",{"title":18,"path":19,"stem":20},"DX","\u002Fcodestock2026\u002Fdx","CodeStock2026\u002FDX",{"title":22,"path":23,"stem":24},"Github Actions","\u002Fcodestock2026\u002Fgithub-actions","CodeStock2026\u002FGithub Actions",{"title":26,"path":27,"stem":28},"ROI Of Automated Testing","\u002Fcodestock2026\u002Froi-of-automated-testing","CodeStock2026\u002FROI of Automated Testing",false,{"title":31,"path":32,"stem":33,"children":34,"page":29},"Vueconf2025","\u002Fvueconf2025","VueConf2025",[35,39,43,47,51,55,59,63,67,71,75,79,83,87],{"title":36,"path":37,"stem":38},"20 Ways To Define Props In Vue 3 By Alex Riviere","\u002Fvueconf2025\u002F20-ways-to-define-props-in-vue-3-by-alex-riviere","VueConf2025\u002F20 Ways to Define Props in Vue 3 by Alex Riviere",{"title":40,"path":41,"stem":42},"Accessible Frontend Testing For Beginners By Henry Lie","\u002Fvueconf2025\u002Faccessible-frontend-testing-for-beginners-by-henry-lie","VueConf2025\u002FAccessible Frontend Testing for Beginners by Henry Lie",{"title":44,"path":45,"stem":46},"Constructing Clear, Comprehensible Components By David Nahodyl","\u002Fvueconf2025\u002Fconstructing-clear-comprehensible-components-by-david-nahodyl","VueConf2025\u002FConstructing Clear, Comprehensible Components by David Nahodyl",{"title":48,"path":49,"stem":50},"Dependency Injection By Robbie","\u002Fvueconf2025\u002Fdependency-injection-by-robbie","VueConf2025\u002FDependency Injection by Robbie",{"title":52,"path":53,"stem":54},"Fuzz To Function   Building AI First Vue Apps By Justin Schroeder","\u002Fvueconf2025\u002Ffuzz-to-function-building-ai-first-vue-apps-by-justin-schroeder","VueConf2025\u002FFuzz to Function - Building AI-first Vue Apps by Justin Schroeder",{"title":56,"path":57,"stem":58},"Grounding Gen AI By Daniel Madalitso Phiri","\u002Fvueconf2025\u002Fgrounding-gen-ai-by-daniel-madalitso-phiri","VueConf2025\u002FGrounding Gen AI by Daniel Madalitso Phiri",{"title":60,"path":61,"stem":62},"How To Ruin A User Interface By Kathryn Grayson Nanz","\u002Fvueconf2025\u002Fhow-to-ruin-a-user-interface-by-kathryn-grayson-nanz","VueConf2025\u002FHow to Ruin a User Interface by Kathryn Grayson Nanz",{"title":64,"path":65,"stem":66},"Lessons Learned From A Vue SaaS App By Abdelrahman Awad","\u002Fvueconf2025\u002Flessons-learned-from-a-vue-saas-app-by-abdelrahman-awad","VueConf2025\u002FLessons Learned from a Vue SaaS App by Abdelrahman Awad",{"title":68,"path":69,"stem":70},"Lightning Talks","\u002Fvueconf2025\u002Flightning-talks","VueConf2025\u002FLightning Talks",{"title":72,"path":73,"stem":74},"Nuxt Hidden Treasures By Alexander Lichter","\u002Fvueconf2025\u002Fnuxt-hidden-treasures-by-alexander-lichter","VueConf2025\u002FNuxt Hidden Treasures by Alexander Lichter",{"title":76,"path":77,"stem":78},"Nuxt Layers For Starter Projects By Dino Mastrianni","\u002Fvueconf2025\u002Fnuxt-layers-for-starter-projects-by-dino-mastrianni","VueConf2025\u002FNuxt Layers for Starter Projects by Dino Mastrianni",{"title":80,"path":81,"stem":82},"Soft Skills For Software Developers By Katherine Herbert","\u002Fvueconf2025\u002Fsoft-skills-for-software-developers-by-katherine-herbert","VueConf2025\u002FSoft Skills for Software Developers by Katherine Herbert",{"title":84,"path":85,"stem":86},"State Of Nuxt 2025 By Daniel Rowe","\u002Fvueconf2025\u002Fstate-of-nuxt-2025-by-daniel-rowe","VueConf2025\u002FState of Nuxt 2025 by Daniel Rowe",{"title":88,"path":89,"stem":90},"Vue Doo Magic AI Development Tricks By Daniel Kelly","\u002Fvueconf2025\u002Fvue-doo-magic-ai-development-tricks-by-daniel-kelly","VueConf2025\u002FVue-doo Magic AI Development Tricks by Daniel Kelly",{"title":92,"path":93,"stem":94,"children":95,"page":29},"Vueconf2026","\u002Fvueconf2026","VueConf2026",[96,100,104,108,112,116,120,123,127,131,135,139,143,147],{"title":97,"path":98,"stem":99},"Being A Vue Developer In The Age Of AI Coding Assistants By Erik Hanchett","\u002Fvueconf2026\u002Fbeing-a-vue-developer-in-the-age-of-ai-coding-assistants-by-erik-hanchett","VueConf2026\u002FBeing a Vue Developer in the Age of AI Coding Assistants by Erik Hanchett",{"title":101,"path":102,"stem":103},"Building Accessible Vue Enterprise Apps By Jeremy Rivera","\u002Fvueconf2026\u002Fbuilding-accessible-vue-enterprise-apps-by-jeremy-rivera","VueConf2026\u002FBuilding Accessible Vue Enterprise Apps by Jeremy Rivera",{"title":105,"path":106,"stem":107},"Escaping Pilot Purgatory By Martin Rojas","\u002Fvueconf2026\u002Fescaping-pilot-purgatory-by-martin-rojas","VueConf2026\u002FEscaping Pilot Purgatory by Martin Rojas",{"title":109,"path":110,"stem":111},"Guiding Agentic AI With Vue And Pinia By Rijk Van Zanten","\u002Fvueconf2026\u002Fguiding-agentic-ai-with-vue-and-pinia-by-rijk-van-zanten","VueConf2026\u002FGuiding Agentic AI with Vue and Pinia by Rijk van Zanten",{"title":113,"path":114,"stem":115},"How I AI From The Other Side Of The Org Chart By Daneez Zamangil","\u002Fvueconf2026\u002Fhow-i-ai-from-the-other-side-of-the-org-chart-by-daneez-zamangil","VueConf2026\u002FHow I AI from the Other Side of the Org Chart by Daneez Zamangil",{"title":117,"path":118,"stem":119},"Keynote By Evan You","\u002Fvueconf2026\u002Fkeynote-by-evan-you","VueConf2026\u002FKeynote by Evan You",{"title":68,"path":121,"stem":122},"\u002Fvueconf2026\u002Flightning-talks","VueConf2026\u002FLightning Talks",{"title":124,"path":125,"stem":126},"Maintainable Vue   Future Proof Patterns For Spaghetti Free Code By Chris Morrow","\u002Fvueconf2026\u002Fmaintainable-vue-future-proof-patterns-for-spaghetti-free-code-by-chris-morrow","VueConf2026\u002FMaintainable Vue - Future-proof patterns for spaghetti-free code by Chris Morrow",{"title":128,"path":129,"stem":130},"Possessed By Packages   Is Your JavaScript Haunted By Chris DeMars","\u002Fvueconf2026\u002Fpossessed-by-packages-is-your-javascript-haunted-by-chris-demars","VueConf2026\u002FPossessed by Packages - Is Your JavaScript Haunted by Chris DeMars",{"title":132,"path":133,"stem":134},"Stop Using One AI Tool For Everything   A Multitool Approach To Frontend Development By Will Marple","\u002Fvueconf2026\u002Fstop-using-one-ai-tool-for-everything-a-multitool-approach-to-frontend-development-by-will-marple","VueConf2026\u002FStop Using One AI Tool For Everything - A multitool approach to frontend development by Will Marple",{"title":136,"path":137,"stem":138},"The Future Of Web Development By Julian Burr","\u002Fvueconf2026\u002Fthe-future-of-web-development-by-julian-burr","VueConf2026\u002FThe Future of Web Development by Julian Burr",{"title":140,"path":141,"stem":142},"The Life Changing Art Of Being Wrong By Kathryn Grayson Nanz","\u002Fvueconf2026\u002Fthe-life-changing-art-of-being-wrong-by-kathryn-grayson-nanz","VueConf2026\u002FThe Life Changing Art of Being Wrong by Kathryn Grayson Nanz",{"title":144,"path":145,"stem":146},"Universal Lessons Learned From Legacy Codebases By Abbey Perini","\u002Fvueconf2026\u002Funiversal-lessons-learned-from-legacy-codebases-by-abbey-perini","VueConf2026\u002FUniversal Lessons Learned from Legacy Codebases by Abbey Perini",{"title":148,"path":149,"stem":150},"Vue Performance By Daniel Kelly","\u002Fvueconf2026\u002Fvue-performance-by-daniel-kelly","VueConf2026\u002FVue Performance by Daniel Kelly",{"title":152,"path":153,"stem":154},"Conference Notes","\u002F","index",{"id":156,"title":60,"body":157,"description":312,"extension":315,"meta":316,"navigation":317,"path":61,"seo":318,"stem":62,"__hash__":319},"content\u002FVueConf2025\u002FHow to Ruin a User Interface by Kathryn Grayson Nanz.md",{"type":158,"value":159,"toc":311},"minimark",[160],[161,162,163,172,175,189,220,234,261,269,283,286],"ul",{},[164,165,166,167],"li",{},"Modals — we don't like them when they are random ads\n",[161,168,169],{},[164,170,171],{},"Having one appear after a button click is fine. Still unexpected, but the user expected something to happen",[164,173,174],{},"'Submit' and nothing happens",[164,176,177,178],{},"Clear as Mud\n",[161,179,180,183,186],{},[164,181,182],{},"Match between system and the real world",[164,184,185],{},"Vague language and unrecognizable icons",[164,187,188],{},"Users want signs, labels, wayfinding, identifiable symbols, non-industry specific terms, content tailored to their experiences, understandable language (Human Centered Design)",[164,190,191,192],{},"High Stakes\n",[161,193,194,197],{},[164,195,196],{},"Users won't get everything right the first time",[164,198,199,200],{},"Users can freely experiment when they know the stakes are low\n",[161,201,202,205,208,211,214,217],{},[164,203,204],{},"Undo actions",[164,206,207],{},"Move freely forward and backwards",[164,209,210],{},"Revert to original",[164,212,213],{},"Escape or cancel mid-process",[164,215,216],{},"Find your way back home",[164,218,219],{},"Change your mind",[164,221,222,223],{},"Consistency and Standards\n",[161,224,225,228,231],{},[164,226,227],{},"Mental model — the understanding a user builds and the assumptions they make about their current experience, based on similar experiences they've had (ie. clicking on the logo takes them home)",[164,229,230],{},"Cognitive load — amount of mental effort and energy it takes to complete a task",[164,232,233],{},"Adobe suite — each app has different keyboard shortcuts",[164,235,236,237],{},"Errors\n",[161,238,239,247],{},[164,240,241,242],{},"Users make errors. Make it less likely they will.\n",[161,243,244],{},[164,245,246],{},"ie. having actions on phone on the right side — people usually use their right thumb to scroll",[164,248,249,250],{},"Challenge their memory\n",[161,251,252,255,258],{},[164,253,254],{},"Work on the assumption users will forget how to use the system. Prompt them regularly",[164,256,257],{},"Unlabeled icons are an unkind example",[164,259,260],{},"The 'gear' icon should be settings",[164,262,263,264],{},"My way or the highway\n",[161,265,266],{},[164,267,268],{},"New users vs experienced users are going to use a form differently",[164,270,271,272],{},"Unsolvable errors\n",[161,273,274,277,280],{},[164,275,276],{},"Users need to understand what the error was so they can try and fix it",[164,278,279],{},"Recognition, diagnosis, recovery",[164,281,282],{},"At least give them good errors if you are going to give them errors",[164,284,285],{},"Lack of external resources",[164,287,288,289],{},"UI\n",[161,290,291,299,302,305,308],{},[164,292,293,294],{},"Maximalism — too much stuff\n",[161,295,296],{},[164,297,298],{},"Every item on the page should serve a purpose to the user",[164,300,301],{},"Keep things moving — animations",[164,303,304],{},"No Order in the Court — ordering elements on the page correctly — Gestalt Principles, visual hierarchy",[164,306,307],{},"Dark Patterns — intentional trickery",[164,309,310],{},"Typography — large, bold, easy to read — emotional match",{"title":312,"searchDepth":313,"depth":313,"links":314},"",2,[],"md",{},true,{"description":312},"9OcldmPCRjQoya52I5c4MDruxr394_s5UNOewrXmDkY",1780096770824]