Din navigering är ”helt okej” tills någon försöker använda den på en telefon med en tumme. Eller tills en tangentbordsanvändare fastnar i en rullgardinsmeny. Eller tills din ”smarta” hamburgarikons döljer de viktigaste sidorna bakom en interaktion som ingen bett om.
Den här responsiva webbplatsnavigeringen är byggd för webbdesigners som behöver ett välbekant menymönster som inte triggar ändlösa diskussioner med intressenter, frontendutvecklare som vill ha tillgänglig HTML/CSS med minimal JavaScript i stället för ett tungt ramverk, och marknadsteam som är trötta på att nav-ändringar i det tysta sänker konverteringen. Resultatet är implementeringsklar HTML/CSS plus minimal JS för beteende på mobil och desktop, med dropdowns, fokushantering och praktisk vägledning som du faktiskt kan leverera.
Vad gör den här AI-prompten och när ska du använda den?
| Vad den här prompten gör | När du ska använda den här prompten | Vad du får |
|---|---|---|
|
|
|
Hela AI-prompten: responsivt tillgängligt navigationssystem
Fyll i fälten nedan för att anpassa prompten efter dina behov.
| Variabel | Vad du ska ange | Anpassa prompten |
|---|---|---|
[KONTEXT] |
Ange webbplatsens struktur och viktigaste sektioner, inklusive huvudmenyns navigationspunkter och hur de är organiserade. Var så detaljerad som möjligt. Till exempel: "Hem, Om oss, Tjänster (med undermenyer för Rådgivning, Utveckling och Utbildning), Blogg, Kontakta oss."
|
|
[ANTAL_MENYALTERNATIV] |
Ange hur många primära navigationsalternativ som ska visas i menyn. Detta hjälper till att avgränsa navigationssystemets omfattning. Till exempel: "6"
|
|
[MALGRUPP] |
Beskriv webbplatsens primära användare, inklusive deras tekniska nivå, behov och hur de brukar navigera. Till exempel: "Småföretagare som söker prisvärda tjänster inom digital marknadsföring, oftast 30–50 år med medelhög teknisk vana."
|
|
[VARUMARKESROST] |
Definiera webbplatsens ton och kommunikationsstil. Ta med adjektiv eller formuleringar som beskriver önskat tilltal. Till exempel: "Professionell men lättillgänglig, med fokus på tydlighet och trovärdighet."
|
|
[BRANSCH] |
Ange vilken bransch eller sektor webbplatsen representerar. Detta hjälper till att anpassa navigeringen och etablerade designmönster. Till exempel: "Hälsoteknik med fokus på lösningar för hantering av patientdata."
|
|
[PLATTFORM] |
Ange den primära plattformen eller det CMS som webbplatsen ska byggas i. Detta hjälper till att anpassa navigationslösningen efter tekniska begränsningar. Till exempel: "WordPress med Elementor, eller Shopify för e-handelsfunktionalitet."
|
|
[SARSKILDA_KRAV] |
Lista eventuella särskilda behov eller begränsningar för navigationssystemet, såsom stöd för flera språk, integration med analysverktyg eller efterlevnad av regelverk och standarder. Till exempel: "Stöd för flera språk (engelska och spanska), GDPR-efterlevnad och integration med Google Analytics."
|
Proffstips för bättre resultat med AI-prompten
- Ge din verkliga navigationshierarki (även om den är rörig). Klistra in nuvarande toppnivåposter och dropdown-grupperingar så att prompten kan behålla konventioner samtidigt som den upptäcker små förbättringar. Om du inte har den dokumenterad, exportera den från din sitemap eller kopiera den från din header-HTML och märk upp vad som är ”primärt” kontra ”sekundärt”.
- Säg vilken ”webbplatstyp” du bygger. Jakobs lag hjälper bara om modellen vet vad användarna förväntar sig, så lägg till en rad som: ”Det här är en B2B SaaS-marknadswebbplats” eller ”Det här är en e-handelsbutik med 200+ SKU:er.” En följdfråga du kan använda: ”Lista de 3 mest förväntade nav-mönstren för den här webbplatstypen och välj ett med en kort motivering.”
- Definiera dina brytpunkter och header-begränsningar. Nämn din containerbredd, logostorlek, sticky vs icke-sticky header och eventuella tokens i ert designsystem. Exempel: ”Headern är sticky, 72px hög, maxbredd 1200px, vi använder 8px spacing och 4px radie.” Sådana små detaljer förhindrar klumpig CSS.
- Iterera på interaktion, inte bara layout. Efter första outputen, be om: ”Gör nu så att dropdowns på desktop öppnas på klick (inte hover), lägg till klick utanför för att stänga, och säkerställ att fokus återgår till triggern när Escape stänger menyn.” Det brukar få fram de riktiga buggarna innan du klistrar in något i produktion.
- Kombinera med en begäran om testplan. När du gillar koden, kör: ”Skapa en QA-checklista för den här navigeringen i iOS Safari, Android Chrome och desktop Chrome/Firefox, inklusive tester med enbart tangentbord och snabba skärmläsartester.” Det är ärligt talat här de flesta navigeringsimplementationer faller isär.
Vanliga frågor
Frontendutvecklare använder den för att få en stabil, tillgänglig bas (semantisk HTML, tangentbordsbeteende, minimal JS) som de kan lägga in i en befintlig kodbas utan att uppfinna dropdown-logik på nytt. UX-designers använder den för att koppla navigationsmönster till användarnas förväntningar, så att menyn känns välbekant i stället för ”kreativ”. Marknadschefer tjänar på att prompten driver tydlighet och skumbarhet, vilket minskar friktion på sidor med hög intention som priser och demos. Tillgänglighetsansvariga uppskattar den eftersom den behandlar fokushantering och skärmläsarannonseringar som förstahandskrav, inte som en eftertanke.
SaaS-bolag får värde eftersom deras navigering ofta behöver tydliga vägar till produkt, prissättning, integrationer och support, med dropdowns som inte skapar fel för tangentbordsanvändning. E-handelsvarumärken gynnas när kategorinavigering måste vara tumvänlig på mobilen och samtidigt stödja djupare surf på desktop. Konsult- och tjänsteföretag använder den för att göra ”Tjänster / Branscher / Case / Kontakt” lätt att skanna, vilket hjälper besökare att kvalificera sig själva snabbt. Innehållstunga publicister kan använda den för att organisera sektioner och ämnen utan att begrava kärnnavigeringen bakom otydliga mönster.
En typisk prompt som ”Write me a responsive navbar with dropdowns” misslyckas eftersom den: saknar kopplingen till förväntningar som gör att mönster känns bekanta för webbplatstypen, inte ger någon modell för tangentbordsinteraktion (så fokus tappas bort eller fastnar), ignorerar tillgänglig semantik (eller missbrukar ARIA överallt), producerar flashig kod som är svår att underhålla i stället för en minimal-JS-approach, och missar mobila tumbegränsningar som storlek på träffytor och tryckvänliga reglage. Du får en demo, inte ett navigationssystem du kan leverera.
Ja, och det bör du, eftersom den bästa navigeringen beror på din hierarki, dina etiketter och dina enhetsbegränsningar. Lägg till din menystruktur, din webbplatstyp och dina headerregler (sticky eller inte, brytpunkter, logobredd och om du behöver en eller flera dropdown-nivåer). Om ditt team har tillgänglighetskrav, specificera saker som ”Escape stänger menyer och återför fokus till triggern” och ”inga hover-only-interaktioner”. Följdfråga: ”Utifrån min hierarki, generera två varianter (klick-för-att-öppna-dropdowns vs hybrid hover+fokus) och förklara vilken som är säkrast för tillgänglighet och varför.”
Det största misstaget är att lämna hierarkin underförstådd — i stället för ”Hem, Om, Tjänster, Blogg”, ge ”Tjänster (Design, Utveckling, Retainers), Resurser (Blogg, Guider, Webbinarier), Företag (Om, Karriär, Kontakt).” Ett annat vanligt fel är att inte ange interaktionskrav; ”gör den modern” är otydligt, men ”klick-för-att-öppna på desktop, tryck-för-att-öppna på mobil, Escape stänger, klick utanför stänger” är konkret. Folk glömmer också begränsningar som sticky headers och safe-area-padding; ”funkar på mobil” är svagare än ”måste vara tumvänlig på iPhone 13 mini och inte krocka med en sticky header på 72px.” Slutligen leder en utebliven genomgång av antaganden till fel matchning, så be den lista antaganden och bekräfta dem innan du implementerar.
Den här prompten är inte optimal för team som söker en helt anpassad, animerad navigeringsupplevelse eller ett helt nytt interaktionsparadigm, eftersom den medvetet prioriterar beprövade konventioner. Den passar inte heller om du behöver en fullständig omskrivning av informationsarkitekturen, eftersom den bara flaggar problem och föreslår små korrigeringar. Om du bara vill ha en enradig copy-paste-snutt utan testning eller iteration kommer du sannolikt att ignorera tillgänglighets- och fokusdetaljerna som gör den värdefull. I sådana fall, använd en enkel komponent från ett ramverk och acceptera kompromisserna.
Navigering är det enda gränssnittet som varje besökare använder, och de flesta märker den först när den inte fungerar. Använd den här prompten, klistra in resultatet i din build och få en responsiv, tillgänglig meny som känns välbekant och bara fungerar.
Kontakta oss
Hör av dig, så diskuterar vi hur just din verksamhet kan dra nytta av alla fantastiska möjligheter som AI skapar.