De 25 bedste eksempler på os, hvis du vil inspirere dig (opdateret til 2020)
Kontakt os sider. Alle har dem, har brug for dem, men er du virkelig opmærksomme på strategien bag dem?
Det er sandt, er det ikke? En af de mest værdifulde sider på dit websted er normalt en eftertanke.
Det er en af de ting, der skal være der, men ofte nok smider du de nødvendige oplysninger og lader det være.
Hvilket spild!
Selve sidenavnet er en opfordring til handling; Behandl det med en vis respekt.
Kontakt os sider er ofte turen til en ny besøgende på en mission. Det er, hvor de henvender sig, når de har et spørgsmål og virkelig vil tale med en person i din organisation.
De findes for at tjene brugeren med det formål at give brugeren information om, hvordan de kan komme i kontakt med dig.
Målet med enhver kontakt-os-side er at konvertere ved klart og effektivt at præsentere metoden (e) til at komme i kontakt med en virksomhed så hurtigt som muligt.
Her er et par bedste fremgangsmåder, som du skal huske på, når du sammensætter din næste kontakt-side:
- Start med en kopi, forklar hvorfor brugeren skal kontakte dig og bede dem om at gøre det.
- Undgå unødvendige oplysninger. Formålet med din kontakt os-side er et af de mest direkte. Hvis oplysningerne ikke er fokuseret på at forklare, hvordan nogen kan kommunikere med dig direkte, burde de ikke være der. .
- Bed ikke om unødvendige oplysninger. Hold dine formularfelter til det punkt, og tilføj ikke spørgsmål, du ikke straks har brug for svarene til, for at hjælpe brugeren på deres rejse.
- Giv mere end én måde at kontakte dig på. Nogle gange vil brugere snakke med dig via telefon eller live chat i stedet for at udfylde en formular. Sørg for at give dem muligheden for at vælge den metode, de er mest fortrolig med.
- Tilpas så meget som muligt. Brug funktioner som smart indhold og betinget logik til at tilpasse siden til brugerens behov. Har du et andet sæt spørgsmål til en kunde, end du har en bruger, der har brug for support? Sørg for, at din side viser de rigtige spørgsmål og oplysninger, uanset persona.
- Indstil de rigtige forventninger. Forsikre brugeren om, at du vil kontakte dem tilbage. Fremhæv din svartid, eller lad dem vide, hvem de vil høre fra.
Nu hvor du ved, hvad de bedste sider med kontakt os inkluderer, er du klar til at se nogle eksempler på stjernerne?
Du har held og lykke. Jeg har kurateret denne artikel ved hjælp af hele vores designteam!
Hver af os har valgt fem af vores yndlingssider med kontakt os, og vi fortæller dig, hvorfor vi kan lide det, hvad de kunne have gjort bedre og en solid inspiration til din næste redesign for kontakt med os.
Ashleigh Respicio:
1. Marvel App
Hvilket sjovt eksempel! Denne kontakt-os-side fra Marvel giver brugeren mulighed for selv at udfylde en simpel, generel form eller segmentere for at finde den specifikke hjælp, de har brug for (dvs. salg, tryk eller support).
Dernæst bruges den virkelige fotografering i placeringsafsnittet hjælper med at sætte et brand i ansigtet og giver indsigt i virksomhedens kontorkultur (medarbejdere, der ser ud til at nyde deres job, er et plus).
🔎 Relateret: Den ultimative vejledning til redesign af websteder til projekter Virksomheder
Med hensyn til design ville tilføjelsen af visuelle tegn have hjulpet brugerens øje og ubevidst skubbet dem til oplysningerne nedenfor folden.
Bundlinie: Vis en vis personlighed. Denne side fremhæver deres brandkultur både gennem illustration og faktisk fotografering, hvilket gør dem meget tilgængelige.
2. Sleeknote
I stedet for blot at udfylde en formular, tilbyder Sleeknote også hjælp til brugeren med links, der dirigerer dem til at finde yderligere information eller tage populære handlinger. . De har også været særlig opmærksomme på at tilføje socialt bevis med pålidelige logoer.
Visuelt er det dejligt, at formen er kort, og al information er organiseret på en kondenseret måde, men ensartet afstand mellem elementer kan forbedre oplevelsen og hurtig rulle til andre områder på siden.
De går endda så langt for at inkludere en farverig CTA i bunden af siden for at flytte brugeren længere ned i tragten med en gratis prøveperiode. De lader virkelig denne side løfte noget tungt!
Bundlinje: Gå efter det, tøv ikke med at medtage et næste trin på din kontakt os-side. Du har deres opmærksomhed, brug den til at guide dem længere nede i din tragt!
3. Zendesk
Zendesk rammede alle de store behov med sin kontakt os-side med et rent design. . De har inkluderet en formular, en mulighed for at kontakte produktsupport samt placeringsoplysninger med et kort.
Selvom siden indeholder alle de grundlæggende elementer, mangler den farve og grafik, som vi ser i resten af webstedet, og visuelle tegn til at guide brugeren ned på siden til resten af informationen .
Bundlinie: Enkelhed går langt. Jeg vil opfordre dig til at bruge dette eksempel som udgangspunkt, og med en ekstra personlighed kan din kontaktside muligvis bare ende på en af disse lister!
4. Freshworks
Freshworks bruger et subtilt design, der er simpelt, men alligevel effektivt fremhæver nøgleinformation.
Den enkle “Kom i kontakt” -knap med høj kontrast fører til en formular, der åbnes i en lysboks. Dette er en fantastisk måde at holde siden kort og til punktet, mens du stadig aktiverer alle de vigtige funktioner. Denne slags subtile , kan uventet mikro-interaktion tilføje en forfriskende tilgang til en ellers standard kontaktpersonside.
Mens enkelheden på siden er forfriskende, mangler den ikke branding / personlighed, der bæres gennem resten af hjemmesiden. Ved at tilføje en kun få af de illustrationer, der er brugt på andre sider, vil siden kontakt os føles mere sammenhængende og på mærket.
Bundlinie: Præsenter dine oplysninger på en unik måde. Lysboksen på denne side er usædvanlig og mindeværdig.
5. Kobber
I dette eksempel er det klart, at kobber har lagt særlig vægt på holde deres c Kontakt os side i overensstemmelse med udseendet og følelsen på hele deres hjemmeside.
De anvendte farver stemmer overens med mærket, og billedet af en smilende kvinde er indbydende og afslappet, hvilket får folk til at føle sig mere komfortable med at nå ud med et spørgsmål eller en feedback …
Bundlinie: Jo mere tilgængeligt dit brand vises, jo mere passende er brugeren til at interagere.
Joe Rinaldi: 6. Stripe
Stripes hits alle de store afkrydsningsfelter for en vellykket kontakt os-side. Det har et rent design, der gør det klart, hvordan man når ud til deres teamannonce, indholdet på siden har en varm og venlig tone.
Det jeg dog bedst kan lide ved denne side, er hvordan de fremviser. en håndfuld af de virksomheder, de arbejder med lige ved siden af formularen. Fremvisning af virksomheder, der bruger deres software, fik mig til at tænke “Hvis disse store virksomheder stoler på Stripe, hvorfor skulle jeg ikke”, og hjælper med at lette eventuelle forbehold, som en besøgende måtte have om at nå ud til deres salgsteam. At se disse logoer fik mig til at tænke ” Hvis disse store virksomheder stoler på Stripe, hvorfor skulle jeg ikke. ”
Den største ting, der mangler på denne side, er typen af kontaktoplysninger, der er tilgængelige for brugeren. Formularen er god, men brugerne er ikke fortrolige med placering eller telefonnumre.
Bundlinie: Socialt bevis er ENORM. Hvis du har det, flagre det! Tilføjelse af det ekstra tillidselement lige ved siden af et konverteringspunkt er en gevinst.
7. Yeti
Yeti er stolt af at sælge drikkevarer og kølere af høj kvalitet rettet mod fans af det fri.
Gennem hele deres side de har fotografering med naturtema og overskrifter som “Built for the Wild” for at forstærke deres udendørs mærke og genklang hos deres publikum.
Denne indsats slutter ikke på deres kontakt os-side.
Alt for ofte behandler virksomheder kontaktsider som en eftertanke i designprocessen og ender med at kaste en generisk, skabeloneret side.
Jeg elsker, at Yeti bærer deres brand og stemme ind på kontaktsiden med en smukt billede af en vandrere. De tilføjer dette ved at inkludere en fræk tekstlinje – “Mens vi er gode med røgsignaler, er der enklere måder for os at komme i kontakt og besvare dine spørgsmål.”
Mens alle disse elementerne er fantastiske, siden mangler en form. Opkald til handling “Send en e-mail” kan muligvis tjene bedre som en form i en lysboks (som et af Ashleighs eksempler!), ins åbning af en helt ny fane.
Bundlinje: Bare fordi kontakt os sider er en standard nødvendighed, betyder det ikke, at deres indhold og deres tone skal være. Bliv tro mod dit brand på denne side såvel som enhver anden.
8. Atlassian
Atlassian er et softwarevirksomhed, der tilbyder en række forskellige produkter, der er rettet mod at holde store virksomheder organiseret.
Specialiseret i organisation er det ikke overraskende, at deres kontakt os-side er ekstremt ren og velorganiseret. De gør det let for besøgende at finde den specifikke afdeling, de leder efter og nå ud til.
De sørgede også for, at siden føltes varm, venlig og troværdig ved at inkludere s evnen til at nå ud og give feedback direkte til grundlæggerne.
🔎 Relateret: Sådan oprettes en strategi for brand messaging Din målgruppe vil elske
Selvom tilføjelsen af ægte headshots også er stor, ved jeg ikke hvem jeg taler med. Tilføjelse af det ekstra personlige præg ville være langt i at vise brugeren, at du holder af.
Bottomline: Vær ikke bange for at være sårbar.Atlassian tager en kæmpe risiko her og beder om åben feedback, men jeg er meget glad for, at den oprigtige feedback, de har modtaget via denne side, har gjort det muligt for dem at forbedre deres brugeroplevelse.
9. Infinum
Nogle gange er den “korte og søde” rute vejen at gå. App-udviklingsfirma, Infinum sømmer denne enkle tilgang.
Så snart du ankommer til siden, bliver du mødt med et kæmpe venligt “Hej.”
Derfra fortæller de dig, at de er her for at hjælpe dig, og du bliver præsenteret for tre enkle muligheder. Siden er ren, de tilgængelige handlinger, der skal udføres, vises meget tydeligt, og den begrænsede mængde indhold på siden er let at læse.
Alle brikkerne er her, men brugeroplevelsen efter at have klikket på e-mail-adressen er svag. I stedet for at præsentere brugeren for en formular på siden åbnes din computers standard-mail-klient automatisk, så du kan skrive virksomheden en e-mail. Det er klodset, og overtagelsen er uvelkommen.
Bottomline: Overtænk det ikke. Nogle gange kan det være meget effektivt at holde designet lige frem og fremhæve, hvad brugeren naturligvis leder efter i den klareste herregård.
10. Bubblewits
Bubblewits, en mobilapp-udvikler, tager deres side med kontakt os et skridt videre ved at gøre det til en kilde til leadgenerering. Den første ting, du ser, når du ankommer, er deres korte kontaktformular, men den virkelig interessante del er lige under den, hvor de har inkluderet en pristabel med links til “Kom godt i gang.”
Det er dybest set en halv prisside!
Så smart som dette er, siden mangler desværre stadig visuelle retningsanvisninger for at hjælpe besøgende med at rulle ned for at se den.
Bundlinie: Der er ingen regelbog, der siger, at din kontakt os-side skal have bunden af tragten. og det er det. Eksperimenter med at bruge din kontakt os-side for yderligere at kvalificere kundeemner.
Joel Waggener11. Dollar Shave Club
Dollar Sh ave Club (DSC) vil virkelig hjælpe besøgende, og de beviser, at når du bogstaveligt talt bliver mødt af en venlig rullemenu, der spørger, hvordan de kan hjælpe dig på denne unikke kontakt-side.
I stedet for direkte forbinde dig med nogen, DSC bestræber sig på at hjælpe dig med først at finde svaret, hvilket sparer både tid og energi.
Hvert spørgsmål, du besvarer i sidens rullemenu, fører dig til et mere mikrospørgsmål, indtil du (forhåbentlig) finder hvad du har brug for. Hvis du på en eller anden måde ikke gør det, har de inkluderet en CTA, der ændrer sideindholdet til en mere traditionel “kontakt” -følelse.
Jeg er glad for, at DSC til sidst tilbyder den mere traditionelle kontakt os-side, men de kunne placere disse oplysninger et eller andet sted. på kontakt os landingsside. Det ville ikke skade strømmen, men det ville forbedre oplevelsen af at føle, at du har brug for at hoppe gennem bøjler for at få fat i et rigtigt menneske.
Også i betragtning af Dollar Shave Club har notorisk meget sjov tekstforfatter, jeg ville gerne have set noget af denne personlighed indarbejdet på siden.
Bundlinie: Vis en eller anden personlighed og lad ikke vigtige elementer ligge på din egen kontakt-side.
12. Buzzworthy Studio
Buzzworthy er et højt brand, som er meget tydeligt på deres side og deres kontakt os-siden er ingen undtagelse. Stor tekst og et dræbende værdiforslag fører lige ind i et iøjnefaldende CTA. Kontaktoplysningerne er også der, men det er lykkedes dem at tegne dig Vær opmærksom på hvad de virkelig vil have dig til at fokusere på – Start A Project CTA.
Mens jeg elsker CTA, er det for lavt på siden på desktopversionen. Det overordnede sidedesign kunne forbedres, hvis de revurderede de responsive pauser, og brugeren lider for meget hvidt mellemrum mellem elementerne, især når der ikke er nogen visuel prompt, der kalder dem til at rulle videre.
Bundlinie: Stor tekst som grafik gør ikke fungerer ikke altid, men de lykkes med minimale designelementer på grund af den store tekstforfatning. En normalt almindelig kontaktside kan altid hæves ved god samtalekopiering.
13. Squarespace
Squarespaces minimalistiske design er en stor afvigelse fra nogle af de andre eksempler, jeg har delt, men det er netop derfor det er lavet til min liste!
I stedet for en enten / eller tilgang til deres kontakt os-side, har Squarespace bestemt, at brugeren vover på denne side for at finde information i en af seks kategorier.
Når brugeren selv vælger, fører linket dig til en let udfyldt formular eller et emnehjælpscenter, de gennemsøger i deres eget tempo.
Det er enkelt, til det punkt, og tager brugeren nøjagtigt dit sted de har brug for at gå.
Bottomline: Vær ikke bange for at spille op, hvem du er. Den største ting ved denne side er, at alle svarene bogstaveligt talt er i “firkantede rum”!
14.Fitbit Health Solutions
Dette er et godt eksempel på en side, der spikrede enkelhed og stil, alt sammen. Vi har set mange enkle sider med kontaktpersoner, som vi elsker og har rost, men Fitbit har gjort dem en bedre. Brugeren bliver mødt med en simpel erklæring om, hvad de skal gøre på siden, og hvad opfølgningssvaret vil være.
De kan derefter identificere, hvem de er (sandsynligvis, så deres information kan rettes mest passende sted), og udfyld en kort formular.
Alt er stylet. Alt er på mærke. Brugeren springer ikke et slag over i denne oplevelse.
Desværre, mens denne side negler den over folden, har jeg det som om informationen under formularen er lidt tabt. Siden kan muligvis drage fordel af et springlink eller en “vælg din sti” -type, som vi har set på nogle andre eksempler. Oplysningerne er der, men er de tilgængelige for brugeren?
Bundlinie: Glem ikke små detaljer på din kontakt os side. Det skal forblive simpelt, men vær ikke bange for at anvende ensartet styling på elementerne her.
15. Adobe
Nu gør Adobe et godt stykke arbejde med at segmentere.
Ved ankomsten bliver de besøgende spurgt, om de leder efter salg eller support, og i begge tilfælde brugeren kan vælge, hvordan de vil modtage mere information. De kan linke til community-foraene, blive dirigeret til helpdesk eller bare ringe til et af de mange telefonnumre, der er angivet.
Derfra brugeren kan se globale placeringer og endda drille ned i meget specifikke links om medieforespørgsler, sponsorering og forskning. Endelig, hvis ingen af disse muligheder rammer din lyst, kan du bare ringe til dem på deres 800-nummer eller live chat wi th dem. Denne side er en gevinst fra alle vinkler!
Det eneste, denne side virkelig mangler, er den signatur Adobe-stil. Det er ligetil og til det punkt. Det handler om oplysningerne på siden, og det med rette, men brugerne har en meget almindelig side, der ikke nikker til designkonsistens. Gør det til et udstillingsvindue!
Bundlinje: Dette er et fantastisk layout til at tilføje mange nyttige links til en enkelt side på en måde, der ikke er overvældende. Tænk på de oplysninger, du skal give dine brugere, kan du omarrangere elementer for at gøre det mere nyttigt?
Jessie-Lee Nichols16. Mailchimp
Mailchimp starter med en simpel og direkte titel, der går lige ind i et selvvalgsmodul.
At have evne til selvidentifikation tager brugeren nøjagtigt, hvor de skal hen for at få de mest relevante oplysninger til deres rejse.
Derfra er der en simpel postadresse og nogle direkte links til meget specifikke “kontakt os ”Spørgsmål vedrørende APIer og misbrug.
Samlet set kan jeg godt lide, hvor Mailchimp gik med denne side, men den mangler en formular. En simpel formular eller live chat ville fjerne grænsen for at få svar, selv med en sådan nyttig side.
Bundlinie: Tænk på de spørgsmål, du adresserer ofte, og tilføj de meget specifikke oplysninger til din kontakt os-side. Du får brugerne de oplysninger, du har brug for, og du sparer dig selv besvær.
17 . Hootsuite
Hootsuite har gjort det usædvanligt nemt at komme i kontakt med dem på deres kontakt os-side.
Reflekterer sandsynligvis et co mmon brugeradfærd, starter de siden med en simpel salgsformular. Hvis det ikke er det, du har brug for, giver de andre måder at oprette forbindelse til og finde svar til højre for den formular, herunder sociale medier og deres hjælpecenter.
Endelig har du alle deres internationale kontorer opført i hvis du vil nå ud til nogen mere i dit område.
Salg er klart Hootsuites højeste prioritet her, men jeg må antage, at mange brugere også kommer til siden for support.
Jeg foretrækker for at se support have samme vægt som salg på denne side og præsentere brugeren for mere af et enten / eller valg.
Bundlinje: Hvis du har en multifunktionel kontakt os side, skal du sørge for at give dine brugermuligheder og ikke t duer dem til standardformularen på én side.
18. PayPal
Jeg er virkelig tiltrukket af, hvor brugercentreret denne side er!
Kopien starter straks samtalen ved at bede “Jeg har et problem med:” og derefter kræve, at brugeren kan vælge deres sti.
Hvis ingen af dem gælder, har de mulighed for at gå ind i deres søgning forespørgsel i søgefeltet øverst på siden. Derefter, længere nede, giver PayPal tre andre, mere traditionelle måder at komme i kontakt med dem på, telefon, e-mail eller forum.
For at tage siden op et hak, en formular eller en live chat-funktion vil være nyttigt for brugerne. Nogle gange vil du bare være i stand til at nå ud.
Bundlinje: Gå hen til din kontakt-side fra et løsningsbaseret synspunkt. Din besøgende har sandsynligvis noget i tankerne de vil gerne høre fra dig om, arbejde derfra.
19.Basecamp
Jeg elsker, hvor personlig Basecamps kontaktpersonside er.
Fra dit første tryk på denne side , du ved, hvem du vil tale med, og hvor lang tid det tager, før de reagerer.
For at afslutte det hele kunne denne side ikke være mere på mærket! De subtile mønstre og illustrationer holder brugeroplevelsen yderst konsistent med den på andre sider.
I den forbedrede ende, mens formularen stiller spørgsmål, der giver supportteamet mulighed for hurtigt at imødekomme brugerens behov, er det noget overvældende. Det er meget specifikke spørgsmål! At have en mulighed for Live Chat kan få dette til at virke mindre skræmmende.
Bottomline: Giv dit brand et ansigt! At lade brugeren vide, hvem der vil være i den anden ende af deres interaktion, skaber tillid og får folk til at føle sig mere komfortable og sikre på, at de rent faktisk taler med et andet menneske, ikke en bot.
Marcella Jalbert20. HubSpot
HubSpots kontakt os-side giver brugeren mulighed for at “vælge deres vej” for at hjælpe dem med at komme til de mest relevante svar, de har brug for hurtigt.
Når brugeren ruller, finder de lokale telefonnumre til HubSpots indenlandske og internationale placeringer, og de giver endda kørselsvejledning til det nærmeste hovedkvarter!
Endelig er der en live chat-funktion på siden. I tilfælde af at du har brug for hjælp, lige nu kan du klikke over og starte en samtale.
Så nyttigt som siden er, ville det være rart at se springlinks baseret på globale regioner for at hjælpe brugeren naviger på den lange side.
Bundlinje: Overvej dit publikum geografisk. Hvis dit publikum bedst betjenes af deres egen placering, skal du sørge for, at de let kan styres til den bedste kilde.
21. Blue Bottle Coffee
Blue Bottle Coffees kontakt os-side er meget forenklet, men det er det, der gør det strålende. Det giver et wa y for dig at holde kontakten (med abonnementsformularen), et billede for at forblive på mærket, flere måder at kontakte forskellige afdelinger på og en meget kort kontaktformular.
Når siden er så enkel, ville det være dejligt, hvis de kunne bruge smart indhold til at udfylde e-mail-feltet i kontaktformularen, hvis brugeren har indtastet det i abonnementsfeltet. Det er en lille gestus, men en, som brugerne ville sætte pris på.
Bundlinje: Vi har dækket en masse eksempler, der inkluderer masser af oplysninger, denne holder det enkelt. Vær ikke bange for at lægge de grundlæggende elementer derude og lade det være.
22. InVision
Kontakt os-delen af denne side er en del af en meget større firmaside, der giver brugeren flere facetter af information, som enhver bruger kan potentielt være på udkig efter en kontakt os-side.
Fra virksomhedens kerneværdier til deres åbne positioner giver denne side endda brugerne mulighed for at downloade et mediesæt, alt imens formularen selv er enkel og pointen.
Selvom det er utroligt, at denne side giver så meget information, kan det til tider være overvældende. Der er hopplink øverst på siden, men det ville være rart, hvis de trak siden ned med brugeren.
Bundlinie: Tænk på alle grundene til, at en bruger skal få adgang til din kontakt os side og giv dem de svar, de har brug for, selvom der er meget!
Afvis
Hvor hjælpsom! Unbounce har dækket alle deres baser på deres kontakt os-side.
De har inkluderet flere måder at kontakte dem på baggrund af dine behov og din placering. Derudover har de links til deres dokumentation, fora og information om at samarbejde med dem.
Nederst på siden har de også navnene og ansigterne på deres supportteam. Jeg er virkelig tiltrukket af dette personlige præg, men de har gået glip af en mulighed for at linke til deres bios, deres e-mails eller til en chat med disse personer.
Bottomline: Virkelig forbedret de visuelle signaler, som denne side tilbyder brugerne. Flagene og farveblokkene trækker brugerne let ind i den information, der betyder mest for dem.
24. Lucky Orange
Denne side kommer lige til punktet.
Så snart den indlæses, får du en simpel kontakt os-formular i et pop-up-modal. Hvis du ikke ønsker at kontakte dem direkte, skal du blot klikke væk fra modalet og vælge en af de mange muligheder, der kan hjælpe brugeren på deres rejse.
Dette er en stor føring til videnscenter, der lever ud over formen.
Nu, så strålende som formmodalet er, har brugeren ikke mulighed for at bevæge sig forbi formularen og derefter bringe den tilbage igen. Det bruger det eller mister det, og det kan være meget frustrerende for nogle brugere.
Bundlinie: Tænk over, hvordan du kan isolere de funktioner, som dine brugere virkelig har brug for på din kontakt os-side, gør tingene meget lette og oplagte for dem.
Bundlinjen, her er hvad du har brug for at vide
Hvis du overvejer at modernisere din kontakt os-side, skal du huske vores bedste praksis og bare være inboundy! Du vil altid tænke over, hvordan du kan være mere nyttigt for dine brugere.
Gør tingene så lette som muligt for brugeren at fuldføre, og glem ikke at indstille den rigtige forventning til, hvornår de vil høre tilbage fra dig.