Sådan oprettes smarte og smukke Ordtryksfaner

Sådan oprettes smarte og smukke Ordtryksfaner

sjov kendsgerning: bemærkede du, at selv wordpress.org bruger du faneblade til at dele oplysninger?

tjek dette ud:

kilde: wordpress.org

trykfaner er en type navigation, der kan forbedre kundeoplevelsen. Hvordan det? Ved ikke at rodde en masse info i afsnit, men ved hjælp af en bedre organiseringsmetode.

tabbed navigation ligner filer organisation på et kontor eller hos lægen.

ikke at forveksle med menuer. Det meste af tiden åbner menupunkter en separat side med sin egen URL. Her vil der ikke ske nogen URL-ændring.

ikke at forveksle med harmonika enten. Et accordeon stabler information lodret. Overskrifter kan klikkes for at afsløre eller skjule indhold, der er knyttet til dem.

hvorfor skulle din hjemmeside have brug for faner? For at forbedre navigation, brugervenlighed og dermed kundetilfredshed og konverteringsfrekvenser.

masser af grunde, ikke?

tabbed navigation er stadig en almindelig praksis inden for e-handel med at præsentere produkter. Mange besøgende genkender allerede faner eller forventer faner på bestemte steder.

lad os sige, at du sælger elektronik. Du bliver nødt til at præsentere masser af produktinfo:

• Produktbeskrivelse
• produktbilleder
• tekniske specifikationer
• anmeldelser
• Garantiinfo
• forsendelsesoplysninger

faner hjælper dig med at komprimere stort indhold i begrænsede rum.

nu, i denne artikel, vil vi starte med at give dig nogle fanen Design inspiration. Dernæst vil vi gå lidt ind i nogle bedste tilfælde praksis. I sidste ende vil jeg guide dig gennem de tekniske aspekter.

lad os komme i gang!

Tabs: nogle inspiration

lad os nu tjekke nogle hjemmesider derude, der bruger faner. Jeg er helt sikkert i for bevis. Billeder kan forklare bedre ting end ord, synes du ikke?

lad os se, eBay bruger faner til produktbeskrivelse. Alle tekniske specifikationer går under “beskrivelse”, og de samlede” forsendelse og betaling ” under samme fane. Jeg er temmelig sikker på, at de har testet layoutet, fordi enhver ændring for et sted med sådan trafik kan påvirke konverteringsfrekvenserne kraftigt.

kilde: ebay.com

Bobbybrun kosmetik går efter en minimalistisk tilgang, fanerne har ikke en knaplignende tilgang. De bruger en understregning til at informere brugeren om, at han valgte en fane.

kilde: bobbibrunkosmetik.com

jeg føler mig altid tabt, når jeg går til booking.com. de har masser af oplysninger, du skal rulle ned for. For nylig bemærkede jeg, at de lavede nogle ændringer for at reducere rulle, men det er stadig ikke nok (for mig).

Trivago synes derimod at organisere information lidt bedre. Jeg ved, det er svært at gøre, når du har brug for at give så mange detaljer.

de bruger faner til at organisere hotelinformation såsom oversigt, info, fotos, anmeldelser, tilbud.

kilde: trivago.com

faner er en almindelig praksis på hjemmesider, der tilbyder rejsepakker såsom fly, indkvartering, Biludlejning.

vi gør det pænt, når det præsenterer sit tilbud til 6 tjenester. Oplevelsen er ren og unintrusive.

kilde: expedia.com

Honda bruger faner på en mere kreativ måde. Det blander billeder og videoer sammen med tekst for at sælge en fantastisk Honda-oplevelse.

kilde: automobiles.honda.com

: best case practices

kort sagt, faner er et sæt knapper, der normalt indstilles vandret. Dette er grunden til, at deres design skal være virkelig tæt på et knapdesign.

nu, lad os se lidt på de bedste tilfælde praksis for at bruge faner i din hjemmeside:

• gå ikke efter flere rækker, det vil gøre det svært for brugeren at huske, hvilken fane han besøgte. Hvis du er klar over, at du har brug for flere rækker, betyder det, at du bliver nødt til at finde en bedre måde at organisere information
• hold faneoverskrifter korte og søde
• Brug kun faner, når brugerne ikke behøver at se indhold fra flere faner på samme tid
• Angiv tydeligt, hvilken fane der er aktiv
• de ikke-valgte faner skal forblive synlige og ikke gå tabt i baggrunden
• sørg for, at din fane vises som separate knapper, som du kan interagere med
• tilføj svæveeffekter på faner, som du ville gøre på knapper
• brug faner, når du har mellem to og ni forskellige kategorier af indhold
• kategorierne er af samme art, en bruger ville forvente at se dem der (f.eks: produktbeskrivelse, produktanmeldelser)
• brug ikke fanebladet navigation når du har til hensigt at indsætte et “mere” link
• du kan bruge gradueringer til at tilføje dybde og dimension til fanerne.

Sådan oprettes faner ved hjælp af sidebyggere

jeg bruger Colibri-sidebyggeren til formålet med denne øvelse.

faner kan findes som en komponent.

du kan finde komponenter, når du klikker på “+” øverst til venstre.

gå til komponenter, og træk komponenten “Tab” til din forhåndsvisning af hjemmesiden til højre.

dernæst kan du spille med tilpasningsmulighederne til venstre.

når din fane ser ud som du vil, skal du bare trykke på “Publicer”, og du er live.

faner: et plugin til at hjælpe dig med at oprette faneblade

hvis du kører en online butik integreret med , er der to meget populære plugins til faneblade.

kilde: wordpress.org

men jeg vil introducere dig til en favorit af mine: faner.

kilde: wordpress.org

Tabs har mange tilpasningsmuligheder, som du snart vil være glad for. Hvorfor jeg føler, at du også vil elske det:

• du vil designe mobilvenlige faner
• du kan arbejde med kortkoder
• faner fungerer ved træk og slip
• det har 20+ designskabeloner, så du ikke behøver at gider med inspiration
• 500+ Google Fonts
• faner fungerer ved at trække og slippe

fanerne: konklusionerne

fanerne er her for at gøre information lettere at fordøje i en verden med kortere opmærksomhedsspænd. Med hensyn til værktøjer er der masser af dem derude, der kan hjælpe dig med at oprette fanerne. Dette er den nemmeste ting at gøre.

mere vigtigt er at finde ud af, hvilken slags information der kan passe i dine faner. Hvis du ikke er sikker på, at en fane hjælper dig med at organisere visse oplysninger, kan du altid foretage nogle brugerundersøgelser eller en A/B-test. Vores egne antagelser er ikke nok. Reelle adfærdsmæssige data vil føre dig til det rigtige svar.

i slutningen af dagen skal du bekymre dig om brugervenlighed, chunking og hjemmeside hastighed.

nu, hvis du kunne lide denne artikel, og du vil lære mere om, hvordan du designer en hjemmeside, skal du sørge for at abonnere på vores Youtube-kanal og følge os på kvidre og Facebook!