De 25 bästa exemplen för att kontakta oss för att inspirera dina (uppdaterade för 2020)
Kontakta oss. Alla har dem, behöver dem, men är du verkligen uppmärksam på strategin bakom dem?
Det är sant är det inte? En av de mest värdefulla sidorna på din webbplats är vanligtvis en eftertanke.
Det är en av de sakerna som måste finnas där, men tillräckligt ofta slänger du den information som behövs och lämnar den där.
Vilket slöseri!
Själva sidnamnet är en uppmaning till handling; Behandla det med viss respekt.
Kontakta oss sidor är ofta tillvägagångssättet för en ny besökare på uppdrag. Det är där de går när de har en fråga och verkligen vill prata med en person i din organisation.
De finns för att tjäna användaren i syfte att förse användaren med information om hur de kan komma i kontakt med dig.
Målet för varje kontakta oss sida är att konvertera genom att tydligt och effektivt presentera metoden / metoderna för att komma i kontakt med ett företag så snabbt som möjligt.
Här är några bästa metoder som du bör tänka på när du sätter ihop din nästa kontakta oss sida:
- Börja med en kopia, förklara varför användaren ska kontakta dig och uppmana dem att göra det.
- Undvik onödig information. Syftet med din kontakta oss sida är ett av de mest direkta. Om informationen inte är inriktad på att förklara hur någon kan kommunicera med dig direkt borde den inte finnas där. .
- Be inte om onödig information. Håll dina formulärfält till punkten och lägg inte till frågor som du inte behöver svaren omedelbart för att hjälpa användaren på resan.
- Erbjud mer än ett sätt att kontakta dig. Ibland vill användare prata med dig via telefon eller chatt snarare än att fylla i ett formulär. Var noga med att ge dem möjlighet att välja den metod de är mest bekväma med.
- Anpassa så mycket du kan. Använd funktioner som smart innehåll och villkorlig logik för att anpassa sidan till användarens behov. Har du en annan uppsättning frågor för en potentiell kund än du har en användare som behöver support? Se till att din sida visar rätt frågor och information oavsett person.
- Ställ in rätt förväntningar. Försäkra användaren att du kommer att kontakta dem tillbaka. Markera din svarstid eller låt dem veta vem de kommer att höra från.
Nu när du vet vad de bästa kontakt-sidorna innehåller, är du redo att se några exempel på alla stjärnor?
Du har tur. Jag har samlat den här artikeln med hjälp av hela vårt designteam!
Var och en av oss har valt fem av våra favoritkontaktsidor och vi berättar varför vi gillar det, vad de kunde ha gjort bättre och lite gedigen inspiration för din nästa design av vår sida.
Ashleigh Respicio:
1. Marvel App
Vilket roligt exempel! Denna kontakt-sida från Marvel tillåter användare att fylla i ett enkelt, allmänt formulär eller segmenta själva för att hitta den specifika hjälp de behöver (dvs. försäljning, press eller support).
Därefter används den riktiga fotograferingen i platsavsnittet hjälper till att sätta ansikte mot ett varumärke och ge inblick i företagets kontorskultur (anställda som verkar njuta av sitt jobb är ett plus).
🔎 Relaterat: Den ultimata guiden till webbplatsens omdesignprojekt för Företag
När det gäller design skulle tillägget av visuella ledtrådar ha bidragit till att vägleda användarens öga och omedvetet knuffat dem till informationen nedanför veckan.
Bottomline: Visa viss personlighet. Den här sidan lyfter fram deras varumärkeskultur både genom illustration och faktiska fotograferingar, vilket gör dem extremt tillmötesgående. Sleeknote
I stället för att bara fylla i ett formulär, erbjuder Sleeknote också hjälp till användaren med länkar som riktar dem för att hitta ytterligare information eller vidta populära åtgärder. . De har också tagit särskild hänsyn till att lägga till sociala bevis med betrodda logotyper.
Visuellt är det fantastiskt att formen är kort och all information är ordnad på ett kondenserat sätt, men konsekvent avstånd mellan element kan förbättra upplevelsen och snabb rullning till andra delar av sidan.
De går till och med så långt för att inkludera en färgstark uppmaning längst ner på sidan för att flytta användaren längre ner i tratten med en gratis provperiod. De låter verkligen den här sidan göra några tunga lyft!
Bottomline: Gå till den, tveka inte att ta med nästa steg på din kontakt-sida. Du har deras uppmärksamhet, använd den för att vägleda dem längre ner i tratten!
3. Zendesk
Zendesk träffade alla större behov med sin kontakt-sida med bibehållen en ren design. . De har inkluderat ett formulär, ett alternativ att kontakta produktsupport samt platsinformation med en karta.
Även om sidan innehåller alla de grundläggande elementen saknar den färg och grafik som vi ser över resten av webbplatsen och visuella ledtrådar för att vägleda användaren ner på sidan till resten av informationen .
Bottomline: enkelhet går långt. Jag uppmuntrar dig att använda detta exempel som utgångspunkt och med lite extra personlighet kan din kontaktsida bara hamna på en av dessa listor!
4. Freshworks
Freshworks använder en subtil design som är enkel men ändå effektivt lyfter fram viktig information.
Den enkla ”Kontakter” -knappen med hög kontrast leder till ett formulär som öppnas i en ljuslåda. Detta är ett utmärkt sätt att hålla sidan kort och till punkt och samtidigt möjliggöra alla viktiga funktioner. kan oväntad mikrointeraktion lägga till en uppfriskande inställning till en annars vanlig kontakt-sida.
Sidans enkelhet är uppfriskande, men den saknar varumärket / personligheten som bärs över resten av webbplatsen. Genom att lägga till en några av illustrationerna som används på andra sidor, kontakta oss-sidan skulle kännas mer sammanhängande och på varumärket.
Bottomline: Presentera din information på ett unikt sätt. Ljusrutan på denna sida är ovanlig och minnesvärd.
5. Koppar
I detta exempel är det tydligt att Koppar har lagt särskild vikt vid behålla sina c se sidan som överensstämmer med utseendet och känslan på hela deras webbplats.
De använda färgerna överensstämmer med varumärket och bilderna från en leende kvinna är inbjudande och avslappnade, vilket gör att människor känner sig mer bekväma att nå ut med en fråga eller feedback …
Bottomline: Ju mer tillgängligt ditt varumärke visas, desto mer lämpligt är användaren att interagera.
Joe Rinaldi: 6. Stripe
Stripes träffar alla de viktigaste kryssrutorna för en lyckad kontakt-sida. Den har en ren design som gör det tydligt hur man når ut till deras teamannons. Innehållet på sidan har en varm och vänlig ton.
Det jag tycker dock mest om den här sidan är hur de visar upp en handfull företag de jobbar med precis bredvid formuläret. Att visa upp företag som använder sin programvara fick mig att tänka ”Om dessa stora företag litar på Stripe, varför skulle jag inte”, och hjälper till att underlätta alla reservationer som en besökare kan ha om att nå ut till deras säljteam. Att se dessa logotyper fick mig att tänka ” Om dessa stora företag litar på Stripe, varför skulle jag inte göra det? ”
Det största som saknas på denna sida är vilken typ av kontaktinformation som är tillgänglig för användaren. Formuläret är jättebra, men användarna är inte förtrogna med plats eller några telefonnummer.
Bottomline: Socialt bevis är ENORM. Om du har det, flagga det! Att lägga till det extra förtroendeelementet bredvid en konverteringspunkt är en vinst.
7. Yeti
Yeti är stolta över att sälja dryckesvaror av hög kvalitet och kylare som är riktade till utomhusfans.
På hela deras webbplats de har naturtema-fotografering och rubriker som ”Byggt för det vilda” för att förstärka sitt varumärke utomhus och få resonans med publiken.
Den ansträngningen slutar inte på deras kontakt-sida.
För ofta behandlar företag kontaktsidor som en eftertanke i designprocessen och slutar slänga samman en generisk, mallad sida.
Jag älskar att Yeti bär deras varumärke och röst till kontaktsidan med en vacker bild av en vandrare. De lägger till detta genom att inkludera en fräck textrad – ”Medan vi är bra med röksignaler finns det enklare sätt för oss att komma i kontakt och svara på dina frågor.”
Medan alla dessa elementen är fantastiska, sidan saknar ett formulär. Uppmaningen ”Skicka ett e-post” kan bättre tjäna som ett formulär i en ljuslåda (som ett av Ashleighs exempel!), ins tead för att öppnas i en helt ny flik.
Bottomline: Bara för att kontakta oss-sidor är en vanlig nödvändighet, betyder det inte att deras innehåll och deras ton måste vara. Håll dig trogen mot ditt varumärke på den här sidan, liksom alla andra.
8. Atlassian
Atlassian är ett företagsprogramvaruföretag som erbjuder ett antal olika produkter inriktade på att hålla stora företag organiserade.
Specialiserat på organisation, det är ingen överraskning att deras kontakt-sida är extremt ren och välorganiserad. De gör det enkelt för besökare att hitta den specifika avdelningen de letar efter och nå ut.
De såg också till att sidan kändes varm, vänlig och pålitlig genom att inkludera s förmågan att nå ut och ge feedback direkt till grundarna.
🔎 Relaterat: Hur man skapar en varumärkesmeddelandestrategi Din publik kommer att älska
Även om tillägget av riktiga headshots också är bra, vet jag inte vem jag pratar med. Om du lägger till den extra personliga kontakten skulle det visa sig att du bryr dig om användaren.
Bottomline: Var inte rädd för att vara sårbar.Atlassian tar en enorm risk här och ber om öppen feedback, men jag är verkligen den uppriktiga feedback de har fått via den här sidan har gjort det möjligt för dem att förbättra sin användarupplevelse.
9. Infinum
Ibland är den ”korta och söta” vägen vägen att gå. App-utvecklingsföretaget Infinum spikar detta enkla tillvägagångssätt.
Så snart du kommer till sidan hälsas du med en jättevänlig ”Hello”.
Därifrån meddelar de dig att de är här för att hjälpa dig och du får tre enkla alternativ. Sidan är ren, de åtgärder som ska vidtas visas mycket tydligt och den begränsade mängden innehåll på sidan är lätt att läsa.
Alla bitar finns här, men användarupplevelsen efter att ha klickat på e-postadressen är svag. Istället för att presentera användaren ett formulär på sidan öppnas din dators standardklient automatiskt så att du kan skriva ett e-postmeddelande till företaget. Det är klumpigt och övertagandet är ovälkommen.
Bottomline: Tänk inte på det. Ibland kan det vara mycket effektivt att hålla designen rakt fram och markera det som användaren självklart letar efter i den tydligaste herrgården.
10. Bubblewits
Bubblewits, en mobilappsutvecklare, tar sin kontaktsida ett steg längre genom att förvandla den till en källa för leadgenerering. Det första du ser när du anländer är deras korta kontaktformulär, men den riktigt intressanta delen ligger precis nedanför den där de har inkluderat en pristabell med länkar till ”Kom igång.”
Det är i grund och botten halva prissidan!
Så smart som det här är, sidan saknar tyvärr fortfarande några visuella riktlinjer för att få besökare att rulla ner för att se den.
Bottomline: Det finns ingen regelbok som säger att din kontakta oss sida måste ha botten av trattformen och det är det. Experimentera med att använda din kontakta oss sida för att ytterligare kvalificera leads.
Joel Waggener11. Dollar Shave Club
Dollar Sh ave Club (DSC) vill verkligen hjälpa besökaren och de bevisar att när du bokstavligen möts av en vänlig rullgardinsmeny som frågar hur de kan hjälpa dig på den här unika kontaktsidan.
Snarare än direkt koppla dig till någon, DSC försöker hjälpa dig att hitta svaret på egen hand, vilket sparar både tid och energi.
Varje fråga du svarar i sidans rullgardinsmeny tar dig till en mer mikrofråga tills du (förhoppningsvis) hittar vad du behöver. Om du på något sätt inte gör det har de inkluderat en CTA som ändrar sidinnehållet till en mer traditionell ”kontakt” -känsla.
Jag är glad att DSC så småningom erbjuder den mer traditionella kontakta oss-sidan, men de skulle kunna placera denna information någonstans på landningssidan för kontakta oss. Det skulle inte skada flödet, men det skulle förbättra upplevelsen att känna att du behöver hoppa genom banden för att få tag på en riktig människa.
Också med tanke på att Dollar Shave Club har notoriskt mycket rolig copywriting, jag skulle ha velat se en del av den personligheten införlivad på sidan.
Bottomline: Visa en viss personlighet och lämna inte viktiga element på din egen kontakt-sida.
12. Buzzworthy Studio
Buzzworthy är ett högt varumärke, vilket är mycket tydligt på deras webbplats och deras kontakt us-sidan är inget undantag. Stor text och ett avgörande värderingsförslag leder direkt in i en iögonfallande CTA. Kontaktinformationen finns också, men de har lyckats dra dig se till vad de verkligen vill att du ska fokusera på – Start A Project CTA.
Medan jag älskar CTA är det för lågt på sidan på skrivbordsversionen. Den övergripande siddesignen kan förbättras om de utvärderar de responsiva pauserna och användaren lider av för mycket vitt utrymme mellan elementen, särskilt när det inte finns någon visuell uppmaning som ringer dem att bläddra vidare.
Bottomline: Stor text som grafik gör inte t fungerar alltid, men de lyckas med minimala designelement på grund av den fantastiska copywriting. En vanligt vanlig kontaktsida kan alltid höjas med bra konversations copywriting.
13. Squarespace
Squarespaces minimalistiska design är en stor avvikelse från några av de andra exemplen jag har delat, men det är just därför det har gjort min lista!
I stället för en antingen / eller tillvägagångssätt för deras kontakta oss-sida har Squarespace bestämt att användaren vågar denna sida för att hitta information i en av sex kategorier.
När användaren välj själv väljer länken dig till ett lätt att fylla i formuläret eller ett ämneshjälpcenter som de bläddrar i i sin egen takt.
Det är enkelt, till punkten och tar användaren exakt var de måste gå.
Bottomline: Var inte rädd för att spela upp vem du är. Det bästa med den här sidan är att alla svaren bokstavligen finns i ”kvadratiska utrymmen”!
14.Fitbit Health Solutions
Detta är ett utmärkt exempel på en sida som spikade enkelhet och stil, allt i ett. Vi har sett en hel del enkla kontakt-sidor, som vi älskar och har berömt, men Fitbit har gjort dem en bättre. Användaren möts med ett enkelt uttalande om vad man ska göra på sidan och vad uppföljningssvaret kommer att bli.
De kan sedan identifiera vem de är (troligen så att deras information kan riktas till mest lämplig plats) och fyll i ett kort formulär.
Allt har utformats. Allt är märke. Användaren hoppar inte över ett slag i den här upplevelsen.
Tyvärr, medan denna sida spikar den ovanför mitten, känns det som om informationen under formuläret är lite förlorad. Sidan kan dra nytta av en hopplänk eller en ”välj din väg” -typ av layout som vi har sett på några andra exempel. Informationen finns där, men är den tillgänglig för användaren?
Bottomline: Glöm inte små detaljer på din kontakta oss sida. Det borde vara enkelt, men var inte rädd för att tillämpa enhetlig styling på elementen här.
15. Adobe
Nu gör Adobe ett bra jobb med att segmentera.
Vid ankomsten frågas besökarna om de letar efter försäljning eller support och i båda fallen användaren kan välja hur de vill få mer information. De kan länka till communityforum, dirigeras till helpdesk eller helt enkelt ringa ett av de många telefonnummer som tillhandahålls.
Därifrån användaren kan se globala platser och till och med gå in i mycket specifika länkar om mediefrågor, sponsring och forskning. Slutligen, om inget av dessa alternativ träffar dig, kan du helt enkelt ringa dem på deras 800-nummer eller chatt dem. Den här sidan är en vinst från alla vinklar!
Det enda som den här sidan verkligen saknar är den Adobe-signaturen. Det är enkelt och till sak. Det handlar om informationen på sidan, och med rätta, Men användarna har en mycket enkel sida som inte ger några nickar till designkonsistens. Gör det till en utställning!
Bottomline: Det här är en bra layout för att lägga till många användbara länkar till en enda sida på ett sätt som inte är överväldigande. Tänk på den information du behöver ge dina användare, kan du ordna om element för att göra det mer användbart?
Jessie-Lee Nichols16. Mailchimp
Mailchimp börjar med en enkel och direkt titel som går direkt in i en självvalsmodul.
Att ha förmåga att självidentifiera tar användaren exakt dit de behöver gå för att få den mest relevanta informationen för sin resa.
Därifrån finns det en enkel postadress och några direktlänkar till mycket specifika ”kontakta oss ”Frågor angående API: er och missbruk.
Sammantaget gillar jag vart Mailchimp gick med den här sidan, men det saknar ett formulär. En enkel form eller livechatt skulle ta bort gränsen för att få svar, även med en sådan hjälpsam sida.
Slutsats: Tänk på frågorna du ställer ofta och lägg till den mycket specifika informationen på din kontaktsida. Du får användarna den information du behöver och du sparar lite besvär.
17 Hootsuite
Hootsuite har gjort det extremt enkelt att komma i kontakt med dem på deras kontakt-sida.
Speglar troligen ett co mmon användarnas beteende, börjar de sidan med ett enkelt försäljningsformulär. Om det inte är vad du behöver, ger de andra sätt att ansluta och hitta svar till höger om det formuläret inklusive sociala medier och deras hjälpcenter.
Slutligen har du alla deras internationella kontor listade i om du vill nå någon mer i ditt område.
Försäljning är helt klart Hootsuite högsta prioritet här, men jag måste anta att många användare också kommer till sidan för support.
Jag föredrar för att se support ha samma vikt som försäljningen på den här sidan och ge användaren mer av ett antingen / eller val.
Bottomline: Om du har ett mångsidigt kontakta oss sida se till att du ger dina användaralternativ och inte t duva hål dem till standardformatet på en sida.
18. PayPal
Jag är verkligen intresserad av hur användarcentrerad den här sidan är!
Kopian startar omedelbart konversationen genom att fråga ”Jag har ett problem med:” och sedan kräva att användaren kan välja sin väg.
Om ingen av dem gäller, har de möjlighet att ange sin sökning fråga i sökfältet högst upp på sidan. Därefter längre ner erbjuder PayPal tre andra, mer traditionella sätt att komma i kontakt med dem, telefon, e-post eller forum.
För att ta sidan uppåt, ett formulär eller en chattfunktion skulle vara till hjälp för användarna. Ibland vill du bara kunna nå ut.
Bottomline: Närma dig din kontakta oss från en lösningsbaserad synpunkt. Din besökare har troligen något i åtanke de vill höra från dig om, arbeta därifrån.
19.Basecamp
Jag älskar hur personlig Basecamps kontaktpersonsida är.
Från din första touch på den här sidan , du vet vem du kommer att prata med och hur lång tid det kommer att ta innan de svarar.
Till toppen av allt kan den här sidan inte vara mer på varumärket! De subtila mönstren och illustrationerna gör att användarupplevelsen är extremt konsekvent med den på andra sidor.
I slutet av förbättringen, medan formuläret ställer frågor som gör att supportteamet snabbt kan hantera användarens behov, är det något överväldigande. Det är mycket specifika frågor! Att ha ett alternativ för Live Chat kan göra att detta verkar mindre skrämmande.
Bottomline: Ge ditt varumärke ett ansikte! Att låta användaren veta vem som kommer att vara i andra änden av deras interaktion bygger förtroende och får människor att känna sig mer bekväma och säkra på att de faktiskt pratar med en annan människa, inte en bot.
Marcella Jalbert20. HubSpot
HubSpots kontakt-sida gör det möjligt för användare att ”välja sin väg” för att hjälpa dem att snabbt komma till de mest relevanta svaren de behöver.
När användaren rullar hittar de lokala telefonnummer till HubSpots inhemska och internationella platser, och de ger till och med vägbeskrivning till närmaste huvudkontor!
Slutligen finns det en livechattfunktion på sidan. Om du behöver hjälp, just nu kan du klicka över och starta en konversation.
Så användbar som sidan är, skulle det vara trevligt att se hopplänkar baserade på globala regioner för att hjälpa användaren navigera på den långa sidan.
Bottomline: Tänk på din publik geografiskt. Om din publik bäst skulle betjänas av sin egen plats, se till att de enkelt kan vägledas till den bästa källan.
21. Blue Bottle Coffee
Blue Bottle Coffees kontakta oss sida är mycket enkel, men det är det som gör det lysande. Det ger en wa y för dig att hålla kontakten (med prenumerationsformuläret), en bild för att hålla varumärket, flera sätt att kontakta olika avdelningar och en mycket kort kontaktformulär.
Med sidan så enkel skulle det vara bra om de kan använda smart innehåll för att fylla i e-postfältet i kontaktformuläret om användaren har matat in det i prenumerationsfältet. Det är en liten gest, men en som användarna skulle uppskatta.
Bottomline: Vi har täckt många exempel som innehåller massor av information, den här gör det enkelt. Var inte rädd för att lägga de grundläggande elementen där ute och låt det vara så.
22. InVision
Kontaktsdelen av den här sidan är en del av en mycket större företagsida som ger användaren flera aspekter av information som alla användare kan potentiellt leta efter på en kontaktsida.
Från företagets kärnvärden till deras öppna positioner, ger denna sida till och med användarna möjlighet att ladda ner ett mediasats, samtidigt som formuläret är enkelt och att poängen.
Även om det är otroligt att den här sidan ger så mycket information, kan den ibland vara överväldigande. Det finns hopplänkar högst upp på sidan, men det vore trevligt om de släpade ner sidan med användaren.
Bottomline: Tänk på alla anledningar till varför en användare skulle behöva komma åt din kontakta oss sidan och ge dem de svar de behöver, även om det finns mycket!
Avvisa
Hur hjälpsam! Unbounce har täckt alla deras baser på deras kontakta oss-sida.
De har inkluderat flera sätt att kontakta dem baserat på dina behov och din plats. Dessutom har de dessutom länkar till deras dokumentation, forum och information om att samarbeta med dem.
Längst ner på sidan har de också namn och ansikten på sitt supportteam. Jag är riktigt intresserad av den här personliga kontakten, men de har missat ett tillfälle att länka till sina bios, deras e-postmeddelanden eller till en chatt med dessa individer.
Bottomline: Verkligen finslipat på de visuella ledtrådarna som denna sida erbjuder användare. Flaggorna och färgblocken drar enkelt användare till den information som är viktigast för dem.
24. Lucky Orange
Denna sida blir rätt till punkten.
Så snart den laddas får du ett enkelt kontaktformulär i ett popup-modal. Om du inte vill kontakta dem direkt klickar du bara bort från modalet och väljer ett av de många alternativen som kan hjälpa användaren på resan.
Det här är en bra inledning till kunskapscenter som lever bortom formuläret.
Nu, så lysande som formmodellen är, har användaren inte möjlighet att flytta förbi formuläret och sedan ta tillbaka det igen. Det använder eller tappar det och det kan vara mycket frustrerande för vissa användare.
Bottomline: Tänk på hur du kan isolera de funktioner dina användare verkligen vill ha på din kontakta oss sida, gör saker väldigt enkelt och uppenbart för dem.
Nedre raden, här är vad du behöver veta
Om du funderar på att förnya din kontakta oss sida, ha våra bästa metoder i åtanke och bara, var inkommande! Du vill alltid tänka på hur du kan vara mer användbar för dina användare.
Gör saker så enkelt som möjligt för användaren att slutföra och glöm inte att ställa in rätt förväntningar för när de hör tillbaka från dig.