De 25 beste eksemplene på siden for å inspirere deg (oppdatert for 2020)
Kontakt oss. Alle har dem, trenger dem, men tar du virkelig hensyn til strategien bak dem?
Det er sant, ikke sant? En av de mest verdifulle sidene på nettstedet ditt er vanligvis en ettertanke.
Det er en av de tingene som må være der, men ofte nok kaster du den nødvendige informasjonen og lar den være der.
For en sløsing!
Selve sidenavnet er en oppfordring til handling; Behandle det med litt respekt.
Kontakt oss sider er ofte veiledningen for en ny besøkende på oppdrag. Det er dit de går når de har et spørsmål og virkelig vil snakke med en person i organisasjonen din.
De eksisterer for å betjene brukeren med det formål å gi brukeren informasjon om hvordan de kan komme i kontakt med deg.
Målet med hver kontakt-side er å konvertere ved å tydelig og effektivt presentere metoden (e) for å komme i kontakt med et selskap så raskt som mulig.
Her er noen få gode fremgangsmåter du bør huske på når du setter sammen din neste kontakt-side:
- Start med en kopi, forklar hvorfor brukeren skal kontakte deg og be dem om å gjøre det.
- Unngå unødvendig informasjon. Formålet med kontaktsiden din er en av de mest direkte. Hvis informasjonen ikke er fokusert på å forklare hvordan noen kan kommunisere med deg direkte, bør den ikke være der. .
- Ikke be om unødvendig informasjon. Hold skjemafeltene dine til punktet og ikke legg til spørsmål du ikke umiddelbart trenger svarene for å hjelpe brukeren på reisen.
- Gi mer enn en måte å kontakte deg på. Noen ganger vil brukere snakke med deg på telefon eller live chat i stedet for å fylle ut et skjema. Sørg for å gi dem muligheten til å velge metoden de er mest komfortable med.
- Tilpass så mye du kan. Bruk funksjoner som smart innhold og betinget logikk for å tilpasse siden til brukerens behov. Har du et annet sett med spørsmål til en kunde enn du har en bruker som trenger støtte? Sørg for at siden din viser de riktige spørsmålene og informasjonen uansett persona.
- Sett de riktige forventningene. Forsikre brukeren om at du vil kontakte dem tilbake. Fremhev responstid, eller la dem få vite hvem de vil høre fra.
Nå som du vet hva de beste kontaktsidene inkluderer, er du klar til å se noen eksempler på all star?
Du har flaks. Jeg har kuratert denne artikkelen ved hjelp av hele vårt designteam!
Hver av oss har valgt fem av våre favorittkontakt-sider, og vi forteller deg hvorfor vi liker det, hva de kunne ha gjort bedre og litt solid inspirasjon for din neste utforming av kontaktsiden.
Ashleigh Respicio:
1. Marvel App
For et morsomt eksempel! Denne kontaktsiden fra Marvel gjør det mulig for brukeren å fylle ut en enkel, generell form eller segmentere seg selv for å finne den spesifikke hjelpen de trenger (dvs. salg, trykk eller support).
Deretter blir den virkelige fotograferingen brukt i stedsdelen hjelper med å sette et ansikt til et merke og gir innsikt i selskapets kontorkultur (ansatte som ser ut til å nyte jobben sin er et pluss).
🔎 Relatert: Den ultimate guiden til nettstedsdesignprosjekter for Virksomheter
Når det gjelder design, ville tillegg av visuelle signaler ha hjulpet brukerens øye og ubevisst nektet dem til informasjonen under folden.
Bottomline: Vis litt personlighet. Denne siden fremhever merkevarekulturen deres både gjennom illustrasjon og faktisk fotografering, noe som gjør dem svært tilgjengelige.
2. Sleeknote
I stedet for bare å fylle ut et skjema, tilbyr Sleeknote også hjelp til brukeren med lenker som henviser dem til å finne ytterligere informasjon eller ta populære handlinger. . De har også tatt spesiell vekt på å legge til sosialt bevis med pålitelige logoer.
Visuelt er det flott at formen er kort og all informasjonen er organisert på en kondensert måte, men jevn avstand mellom elementene kan forbedre opplevelsen og rask rulling til andre områder på siden.
De går til og med så langt for å inkludere en fargerik CTA nederst på siden for å flytte brukeren lenger ned i trakten med en gratis prøveversjon. De lar virkelig denne siden gjøre noen tunge løft!
Bottomline: Velg det, ikke nøl med å ta med et neste trinn på kontaktsiden din. Du har deres oppmerksomhet, bruk den til å veilede dem lenger ned i trakten din!
3. Zendesk
Zendesk oppfyller alle de store behovene med sin kontaktside og opprettholder et rent design. . De har inkludert et skjema, et alternativ for å kontakte produktsupport, samt stedsinformasjon med et kart.
Selv om siden inneholder alle de grunnleggende elementene, mangler den fargen og grafikken vi ser på resten av nettstedet og visuelle signaler for å veilede brukeren nedover siden til resten av informasjonen .
Bunnlinjen: Enkelhet går langt. Jeg vil oppfordre deg til å bruke dette eksemplet som utgangspunkt, og med litt ekstra personlighet kan kontaktsiden din bare havne på en av disse listene!
4. Freshworks
Freshworks bruker en subtil design som er enkel, men likevel effektivt fremhever nøkkelinformasjon.
Den enkle «Kom i kontakt» -knappen med høy kontrast fører til et skjema som åpnes i en lysboks. Dette er en fin måte å holde siden kort og til punktet mens du fremdeles muliggjør alle viktige funksjoner. Denne typen subtile , uventet mikro-interaksjon kan legge til en forfriskende tilnærming til en ellers standard kontakt-side.
Selv om enkelheten på siden er forfriskende, mangler den merkevaren / personligheten som bæres gjennom resten av nettstedet. Ved å legge til en få av illustrasjonene som brukes på andre sider, vil kontaktsiden føles mer sammenhengende og merkevare.
Bunnlinjen: Presenter informasjonen din på en unik måte. Lysboksen på denne siden er uvanlig og minneverdig.
5. Kobber
I dette eksemplet er det klart at Kobber har lagt spesiell vekt på holde sine c ta kontakt med vår side i samsvar med utseendet på hele nettstedet.
Fargene som brukes stemmer overens med merkevaren, og bildene til en smilende kvinne er innbydende og uformell, noe som gjør at folk føler seg mer komfortable med å nå ut med et spørsmål eller en tilbakemelding …
Bottomline: Jo mer tilnærmelig merkevaren din vises, jo mer passende brukeren er til å samhandle.
Joe Rinaldi: 6. Stripe
Stripe’s treffer alle de store avmerkingsboksene for en vellykket kontaktside. Den har et rent design som gjør det klart hvordan du kan nå ut til teamannonsen. Innholdet på siden har en varm og vennlig tone.
Det jeg liker aller best med denne siden, er imidlertid hvordan de viser frem. en håndfull av selskapene de jobber med rett ved siden av skjemaet. Fremvisning av selskaper som bruker programvaren deres, fikk meg til å tenke «Hvis disse store selskapene stoler på Stripe, hvorfor skulle jeg ikke,» og hjelper med å lette reservasjoner en besøkende måtte ha om å nå ut til salgsteamet. Å se disse logoene fikk meg til å tenke » Hvis disse store selskapene stoler på Stripe, hvorfor skulle jeg ikke. ”
Det største som mangler på denne siden er typen kontaktinformasjon som er tilgjengelig for brukeren. Skjemaet er flott, men brukerne er ikke kjent med plassering eller telefonnumre.
Bottomline: Sosial bevis er ENORM. Hvis du har det, flagg det! Å legge til det ekstra tillitselementet rett ved et konverteringspunkt er en gevinst.
7. Yeti
Yeti er stolt av å selge drikkevarer og kjølere av høy kvalitet rettet mot utendørs fans.
Gjennom hele nettstedet de har fotografering med naturtema og overskrifter som «Built for the Wild» for å forsterke deres utendørs merkevare og gi gjenklang hos publikum.
Denne innsatsen ender ikke på deres kontaktside.
Altfor ofte behandler selskaper kontaktsider som en ettertanke i designprosessen og ender med å kaste sammen en generisk, mal side.
Jeg elsker at Yeti bærer merkevaren og stemmen sin til kontaktsiden med en vakkert bilde av en turgåer. De legger til dette ved å inkludere en frekk tekstlinje – «Mens vi er gode med røyksignaler, er det enklere måter for oss å ta kontakt og svare på spørsmålene dine.»
Mens alle disse elementene er flotte, siden mangler et skjema. «Send en e-post» handlingsfremmende kan bedre tjene som et skjema i en lysboks (som et av Ashleighs eksempler!), ins for å åpne opp i en helt ny fane.
Bottomline: Bare fordi kontakt-sider er en standard nødvendighet, betyr det ikke at innholdet deres og tonen deres må være. Hold deg tro mot merkevaren din på denne siden, så vel som alle andre.
8. Atlassian
Atlassian er et programvareselskap for bedrifter som tilbyr en rekke forskjellige produkter rettet mot å holde store selskaper organisert.
Spesialisert innen organisering, er det ingen overraskelse at deres kontakt-side er ekstremt ren og godt organisert. De gjør det enkelt for besøkende å finne den spesifikke avdelingen de leter etter og når ut.
De sørget også for at siden føltes varm, vennlig og pålitelig ved å inkludere s muligheten til å nå ut og gi tilbakemelding direkte til grunnleggerne.
🔎 Relatert: Hvordan lage en strategi for merkevaremeldinger Publikum vil elske
Selv om det også er bra å legge til ekte hodeskudd, vet jeg ikke som jeg snakker med. Å legge til det ekstra personlige preget vil være langt i å vise brukeren at du bryr deg.
Bunnlinjen: Ikke vær redd for å være sårbar.Atlassian tar en enorm risiko her og ber om åpen tilbakemelding, men jeg er klar over at den oppriktige tilbakemeldingen de har mottatt via denne siden, har gjort det mulig for dem å forbedre brukeropplevelsen.
9. Infinum
Noen ganger er den «korte og søte» ruten veien å gå. App-utviklingsselskap, Infinum, spiker denne enkle tilnærmingen.
Så snart du kommer til siden, blir du møtt med et gigantisk vennlig «Hei.»
Derfra forteller de deg at de er her for å hjelpe deg, og du blir presentert for tre enkle alternativer. Siden er ren, tilgjengelige handlinger vises veldig tydelig, og den begrensede mengden innhold på siden er lett å lese.
Alle delene er her, men brukeropplevelsen etter å ha klikket på e-postadressen er svak. I stedet for å presentere brukeren et skjema på siden, blir datamaskinens standard e-postklient automatisk åpnet for at du skal kunne sende selskapet en e-post. Det er klumpete og overtakelsen er uvelkommen.
Bunnlinjen: Ikke tenk på det. Noen ganger kan det være veldig effektivt å holde designet rett frem og fremheve det brukeren åpenbart ser etter i den tydeligste herregården.
10. Bubblewits
Bubblewits, en mobilapputvikler, tar kontaktsiden sin et skritt videre ved å gjøre den til en kilde til leadgenerering. Det første du ser når du ankommer er deres korte kontaktskjema, men den virkelig interessante delen er rett under den der de har tatt med en pristabell med lenker til «Kom i gang.»
Det er i utgangspunktet en halv prisside!
Så smart som dette er, siden mangler dessverre fremdeles noen visuelle retningsanvisninger for å få besøkende til å rulle nedover for å se den.
Bottomline: Det er ingen regelbok som sier at din kontakt oss-side må ha bunnen av traktformen og det er det. Eksperimenter med å bruke kontaktsiden din for å kvalifisere potensielle kunder.
Joel Waggener11. Dollar Shave Club
Dollar Sh ave Club (DSC) vil virkelig hjelpe den besøkende, og de viser at når du bokstavelig talt blir møtt av en vennlig rullegardinmeny og spør hvordan de kan hjelpe deg på denne unike kontaktsiden.
Snarere enn direkte koble deg til noen, DSC prøver å hjelpe deg med å finne svaret på egenhånd, og sparer både tid og energi.
Hvert spørsmål du svarer i rullegardinmenyen til siden tar deg til et mer mikrospørsmål til du (forhåpentligvis) finner det du trenger. Hvis du på en eller annen måte ikke gjør det, har de tatt med en CTA som endrer sideinnholdet til en mer tradisjonell «kontakt» -følelse.
Jeg er glad for at DSC tilbyr den mer tradisjonelle kontaktsiden til slutt, men de kan plassere denne informasjonen et sted. på destinasjonssiden for kontakt oss. Det ville ikke skade flyten, men det ville forbedre opplevelsen av å føle at du trenger å hoppe gjennom bøyler for å få tak i et ekte menneske.
Også vurderer Dollar Shave Club har notorisk veldig morsom tekstforfattere, ville jeg gjerne sett at noe av den personligheten ble innlemmet på siden.
Bottomline: Vis litt personlighet og ikke la viktige elementer ligge ute på din egen kontaktside.
12. Buzzworthy Studio
Buzzworthy er et høyt merke, noe som er veldig tydelig på deres side og deres kontakt us-siden er ikke noe unntak. Stor tekst og et killer value proposition fører rett inn i et iøynefallende CTA. Kontaktinformasjonen er også der, men de har lykkes med å tegne deg se på hva de virkelig vil at du skal fokusere på – Start A Project CTA.
Mens jeg elsker CTA, er det for lavt på siden på skrivebordsversjonen. Den generelle sideutformingen kan forbedres hvis de vurderer de responsive pausene på nytt, og brukeren lider av for mye mellomrom mellom elementene, spesielt når det ikke er noen visuell ledetekst som ringer dem til å bla videre.
Bunnlinje: Stor tekst som grafikk ikke fungerer ikke alltid, men de lykkes med minimale designelementer på grunn av den flotte tekstforfatteren. En vanligvis vanlig kontaktside kan alltid løftes med god samtalekopiering.
13. Squarespace
Squarespaces minimalistiske design er en stor avvik fra noen av de andre eksemplene jeg har delt, men det er akkurat derfor det er laget min liste!
I stedet for en enten / eller tilnærming til kontaktsiden deres, har Squarespace bestemt at brukeren våger seg til denne siden for å finne informasjon i en av seks kategorier.
Når brukeren selv velger, tar lenken deg til et lett utfylt skjema eller et emnehjelpesenter de blar i sitt eget tempo.
Det er enkelt, til poenget, og tar brukeren nøyaktig dit de trenger å gå.
Bottomline: Ikke vær redd for å spille opp hvem du er. Det største med denne siden er at alle svarene er bokstavelig talt i «firkantede mellomrom»!
14.Fitbit Health Solutions
Dette er et flott eksempel på en side som spikret enkelhet og stil, alt i ett. Vi har sett mange enkle kontaktsider, som vi elsker og har skryt, men Fitbit har gjort dem en bedre. Brukeren blir møtt med en enkel uttalelse om hva de skal gjøre på siden, og hva oppfølgingsresponsen vil være.
De kan da identifisere hvem de er (sannsynligvis slik at informasjonen deres kan rettes mest passende sted), og fyll ut et kort skjema.
Alt er stylet. Alt er på merkevare. Brukeren hopper ikke over noe i denne opplevelsen.
Dessverre, mens denne siden spiker den over folden, føler jeg meg som om informasjonen under skjemaet er litt tapt. Siden kan ha nytte av en hoppkobling eller en «velg din vei» -type som vi har sett på noen andre eksempler. Informasjonen er der, men er den tilgjengelig for brukeren?
Bunnlinje: Ikke glem små detaljer på kontaktsiden din. Det skal være enkelt, men ikke vær redd for å bruke jevn styling til elementene her.
15. Adobe
Nå gjør Adobe en god jobb med å segmentere.
Ved ankomst blir besøkende spurt om de leter etter salg eller support, og i begge tilfeller brukeren kan velge hvordan de vil motta mer informasjon. De kan lenke til fellesskapsforaene, bli dirigert til helpdesk, eller bare ringe et av de mange telefonnumrene som er oppgitt.
Derfra brukeren kan se globale lokasjoner og til og med gå ned i veldig spesifikke lenker om medieforespørsler, sponsing og forskning. Til slutt, hvis ingen av disse alternativene treffer din lyst, kan du bare ringe dem på deres 800-nummer eller live chat med th dem. Denne siden er en gevinst fra alle vinkler!
Det eneste denne siden virkelig mangler, er den Adobe-signaturen. Det er greit og til poenget. Det handler om informasjonen på siden, og med rette, men brukerne sitter igjen med en veldig ren side som ikke gir noen nikk til designkonsistensen. Gjør det til et utstillingsvindu!
Bottomline: Dette er et flott oppsett for å legge til mange nyttige lenker til en enkelt side på en måte som ikke er overveldende. Tenk på informasjonen du trenger å gi brukerne dine, kan du omorganisere elementer for å gjøre det mer nyttig?
Jessie-Lee Nichols16. Mailchimp
Mailchimp starter med en enkel og direkte tittel som går rett inn i en selvvalgsmodul.
Å ha evne til selvidentifisering tar brukeren nøyaktig dit de trenger å gå for å få den mest relevante informasjonen for reisen.
Derfra er det en enkel postadresse og noen direkte lenker til veldig spesifikk «kontakt oss ”Spørsmål angående APIer og misbruk.
Samlet sett liker jeg hvor Mailchimp gikk med denne siden, men det mangler et skjema. En enkel form eller live chat ville fjerne grensen for å få svar, selv med en så nyttig side.
Bottomline: Tenk på spørsmålene du ofte adresserer, og legg til den veldig spesifikke informasjonen på kontaktsiden din. Du får brukerne den informasjonen du trenger, og du sparer deg for noe bry.
17 . Hootsuite
Hootsuite har gjort det usedvanlig enkelt å komme i kontakt med dem på deres kontaktside.
Gjenspeiler sannsynligvis et co mmon brukeradferd, starter de siden med et enkelt salgsskjema. Hvis det ikke er det du trenger, gir de andre måter å koble til og finne svar til høyre for det skjemaet, inkludert sosiale medier og deres hjelpesenter.
Til slutt har du alle deres internasjonale kontorer oppført i i tilfelle du vil nå noen flere i ditt område.
Salg er helt klart Hootsuite topprioritet her, men jeg må anta at mange brukere også kommer til siden for støtte.
Jeg foretrekker for å se support ha samme vekt som salg på denne siden og presentere brukeren mer av et enten / eller valg.
Bottomline: Hvis du har en flerfunksjonell kontakt oss side, sørg for at du gir brukeralternativene og ikke gjør det. t duhull dem til standardformatet på én side.
18. PayPal
Jeg er virkelig tiltrukket av hvor brukersentrert denne siden er!
Kopien starter umiddelbart samtalen ved å spørre «Jeg har et problem med:» og deretter kreve at brukeren kan velge sin vei.
Hvis ingen av dem gjelder, har de muligheten til å gå inn i søket. spørring i søkefeltet øverst på siden. Deretter, lenger ned, gir PayPal tre andre, mer tradisjonelle måter å komme i kontakt med dem på, telefon, e-post eller forum.
For å ta siden opp et hakk, et skjema eller en live chat-funksjon vil være nyttig for brukerne. Noen ganger vil du bare være i stand til å nå ut.
Bunnlinje: Gå til kontaktsiden din fra et løsningsbasert synspunkt. Den besøkende har sannsynligvis noe i tankene de vil gjerne høre fra deg om, jobbe derfra.
19.Basecamp
Jeg elsker hvor personlig Basecamps kontakt-side er.
Fra ditt første trykk på denne siden , du vet hvem du skal snakke med og hvor lang tid det vil ta før de svarer.
For å gjøre alt, kan denne siden ikke være mer på merkevare! De subtile mønstrene og illustrasjonene holder brukeropplevelsen ekstremt konsistent i forhold til den på andre sider.
På forbedringssiden, mens skjemaet stiller spørsmål som gjør det mulig for supportteamet å imøtekomme brukerens behov raskt, er det noe overveldende. Det er veldig spesifikke spørsmål! Å ha et alternativ for Live Chat kan få dette til å virke mindre skremmende.
Bottomline: Gi merkevaren et ansikt! Å la brukeren få vite hvem som kommer til å være i den andre enden av samspillet, bygger tillit og får folk til å føle seg mer komfortable og sikre på at de faktisk snakker med et annet menneske, ikke en bot.
Marcella Jalbert20. HubSpot
HubSpots kontakt-side gjør det mulig for brukeren å «velge sin vei» for å hjelpe dem raskt å komme til de mest relevante svarene de trenger. p>
Når brukeren ruller, vil de finne lokale telefonnumre til HubSpots innenlandske og internasjonale lokasjoner, og de gir til og med veibeskrivelser til nærmeste hovedkontor!
Til slutt er det en live chat-funksjon på siden. I tilfelle du trenger hjelp, akkurat nå kan du klikke over og starte en samtale.
Så nyttig som siden er, ville det være fint å se hopplenker basert på globale regioner for å hjelpe brukeren naviger på den lange siden.
Bottomline: Tenk på publikum geografisk. Hvis publikummet ditt best vil bli tjent med sin egen plassering, må du sørge for at de lett kan ledes til den beste kilden.
21. Blue Bottle Coffee
Blue Bottle Coffee sin kontakt-side er veldig forenklet, men det er det som gjør det strålende. Det gir en wa y for deg å holde kontakten (med abonnementsskjemaet), et bilde for å være på merkevaren, flere måter å kontakte forskjellige avdelinger på, og et veldig kort kontaktskjema.
Når siden er så enkel, ville det være flott de kan bruke smart innhold til å forhåndsutfylle e-postfeltet i kontaktskjemaet hvis brukeren har lagt inn det i abonnementsfeltet. Det er en liten gest, men en som brukerne vil sette pris på.
Bottomline: Vi har dekket mange eksempler som inneholder massevis av informasjon, denne holder det enkelt. Ikke vær redd for å legge de grunnleggende elementene der ute og la det være.
22. InVision
Kontakt oss-delen av denne siden er en del av en mye større firmaside som gir brukeren flere fasetter av informasjon enhver bruker kan potensielt være på utkikk etter en kontaktside.
Fra selskapets kjerneverdier til deres åpne posisjoner, gir denne siden til og med brukere muligheten til å laste ned et mediesett, samtidig som skjemaet er enkelt og poenget.
Selv om det er utrolig at denne siden gir så mye informasjon, kan den til tider være overveldende. Det er hopplenker øverst på siden, men det ville være fint hvis de trakk nedover siden med brukeren.
Bottomline: Tenk på alle grunnene til at en bruker trenger å få tilgang til din kontakt oss side og gi dem svarene de trenger, selv om det er mye!
Fjerne
Hvor nyttig! Unbounce har dekket alle basene deres på kontaktsiden deres.
De har tatt med flere måter å kontakte dem på grunnlag av dine behov og din posisjon. I tillegg har de dessuten lenker til dokumentasjonen, forumet og informasjonen om å samarbeide med dem.
Nederst på siden har de også navnene og ansiktene til deres supportteam. Jeg er virkelig tiltrukket av dette personlige preget, men de har gått glipp av muligheten til å lenke til deres biografi, deres e-post eller en prat med disse personene.
Bottomline: Virkelig finpusset på de visuelle signalene denne siden gir brukerne. Flaggene og fargeblokkene trekker enkelt brukere inn til informasjonen som betyr mest for dem.
24. Lucky Orange
Denne siden kommer rett til poenget.
Så snart den lastes inn, blir du presentert for et enkelt kontaktskjema i et popup-modal. Hvis det ikke er noe du vil gjøre å kontakte dem direkte, kan du bare klikke deg bort fra modalet og velge et av de mange alternativene som kan hjelpe brukeren på reisen.
Dette er et godt forsprang på å kunnskapssenter som lever utenfor skjemaet.
Nå, så strålende som formmodalet er, har ikke brukeren muligheten til å bevege seg forbi skjemaet og deretter bringe det tilbake igjen. Den bruker den eller mister den, og det kan være veldig frustrerende for noen brukere.
Bottomline: Tenk på hvordan du kan isolere funksjonene brukerne dine virkelig ønsker, på kontaktsiden vår, gjør ting veldig enkle og opplagte. for dem.
Bunnlinjen, her er hva du trenger å vite
Hvis du tenker på å fornye kontaktsiden din, må du huske på våre beste fremgangsmåter og bare være inngående! Du alltid vil tenke på hvordan du kan være mer nyttig for brukerne dine.
Gjør ting så enkle som mulig for brukeren å fullføre, og ikke glem å stille den riktige forventningen til når de vil høre tilbake fra deg.