Co powinna zawierać sekcja HERO strony głównej i jak ją zaprojektować?

Cześć, witam Cię w nowej serii podcastu.

Hello, welcome to the new series of the podcast.

W tej serii skupimy się na wykorzystywaniu stron internetowych w celach marketingowych.

In this series, we will focus on using websites for marketing purposes.

Z tej strony Piotr Rączkowski, CEO Tamago, Agencji Łobowej Tworzącej Strony Internetowe dla Zespołów Marketingowych.

This is Piotr Rączkowski, CEO of Tamago, a Creative Agency Creating Websites for Marketing Teams.

Dziś chciałbym porozmawiać z Tobą, z Wami, moimi słuchaczami, o sekcji hero na stronach internetowych, czyli w zasadzie najważniejszej części strony głównej.

Today I would like to talk to you, to you my listeners, about the hero section on websites, which is essentially the most important part of the homepage.

Sekcja hero, nie wiem czy wiesz, jest to pierwsza sekcja na stronie głównej, która jest najbardziej widoczna dla odwiedzających.

The hero section, I don’t know if you know, is the first section on the homepage that is the most visible to visitors.

Znajduje się na górnej części strony internetowej, zajmuje zwykle cały ekran lub większą jego część.

It is located at the top of the website, usually taking up the entire screen or a larger portion of it.

Sekcja hero ma na celu przyciągnięcie uwagi użytkowników i zachęcenie ich do dalszego przeglądania strony.

The hero section aims to capture users' attention and encourage them to continue browsing the site.

Często się umieszcza w niej między innymi nagłówek, opis, grafikę, czy też czasem jakieś wideo, które mają na celu wprowadzenie użytkowników w klimat strony,

It often includes, among other things, a header, description, graphics, or sometimes a video, which aim to introduce users to the atmosphere of the site.

nadanie tej estetyki, ale także przedstawienie określonych wartości.

assigning this aesthetic, but also presenting certain values.

Dzisiejszy odcinek będzie poświęcony właśnie...

Today's episode will be dedicated to...

temu jak zaprojektować tą sekcję hero tak, aby najbardziej sprzyjała celom marketingowym.

how to design this hero section to best support marketing goals.

Poza tym sekcja hero informuje też czym ogólnie zajmuje się firma, jakie problemy rozwiązuje dla swoich klientów.

Moreover, the hero section also informs about what the company generally does and what problems it solves for its clients.

Więc jest to naprawdę bardzo istotny element, a dobrze zaprojektowana sekcja hero może skutecznie budować markę i też budować zaufanie użytkowników do firmy.

So this is really a very important element, and a well-designed hero section can effectively build the brand and also build user trust in the company.

Przejdźmy więc teraz do części merytorycznej.

Let's move on to the substantive part now.

Co powinno znaleźć się w sekcji hero?

What should be included in the hero section?

Po pierwsze, taki główny nagłówek nazywany emocjonalną obietnicą.

Firstly, such a main headline is called an emotional promise.

Jest to właśnie taki emocjonalny przyciągacz uwagi, który zachęca użytkownika do zapoznania się z dalszą częścią strony,

It is precisely such an emotional attention grabber that encourages the user to explore the rest of the page.

ale także prezentuje wartości firmy, czy właśnie wartości usługi, wartości produktu,

but also presents the company's values, or rather the values of the service, the values of the product,

które są ważne dla firmy.

which are important for the company.

I które są ważne dla odbiorców.

And which are important for the recipients.

I przykładowo, jeżeli firma zajmuje się dostarczaniem na przykład agregatów prądotwórczych,

And for example, if the company is engaged in supplying, for instance, diesel generators,

to dobrym takim nagłówkiem będzie na przykład fraza pewne zasilanie.

A good headline would be, for example, the phrase "certain power."

I tutaj daję to jako taki przykład, dlatego że nagłówek musi być dopasowany stricte do tych wartości, które dostarcza firma swoim użytkownikom.

And here I give this as an example because the headline must be strictly aligned with the values that the company provides to its users.

Ważne w tym jest to, że firma musi być dopasowana do tych wartości, które dostarcza firma swoim użytkownikom.

The important thing here is that the company must be aligned with the values it provides to its users.

Ma tutajр nagłówki powinien być krótki, zwięzły i zapadający w pamięć.

Here the heading should be short, concise, and memorable.

Ma tutajr nagłówki powinien być krótki, zwięzły i zapadający w pamięć.

Your headline should be short, concise, and memorable.

Pod nagłówkiem powinien znaleźć się krótki opis.

There should be a short description under the header.

I opis ten nazywamy racjonalnym wyjaśnieniem,

And we call this description a rational explanation,

Jeżeli w nagłówku jest takie emocjonalne przyciągnięcie uwagi,

If there is such an emotional attention-grabbing element in the heading,

te w opisie powinno się znaleźć w pewnym sensie wytłumaczenie, wyjaśnienie

In the description, there should, in a sense, be an explanation or clarification.

W opisie powinno się znaleźć w pewnym sensie wytłumaczenie, wyjaśnienie

The description should contain, in a sense, an explanation.

w sposób taki racjonalny, trochę tego nagłówka, co się za tym kryje.

In a rational way, a bit of that headline, what is behind it.

Czyli tutaj powinno być wyjaśnienie dotyczące działalności firmy,

So there should be an explanation regarding the company's activities here,

oferowanych produktów czy usług, ale także właśnie zakomunikowanie tego,

the offered products or services, but also communicating this,

jakie problemy rozwiązuje firma właśnie swoim klientom,

What problems does the company solve for its clients?

bądź też jakie wartości dostarcza.

or what values it provides.

I tutaj warto wskazać tym potencjalnym klientom, odbiorcom,

And here it is worth pointing out to these potential clients, recipients,

czym firma się zajmuje, w jaki sposób może pomóc w rozwiązywaniu tych konkretnych problemów.

What the company deals with and how it can help solve these specific problems.

I ważne jest, żeby się skupić na tych konkretnych korzyściach,

And it is important to focus on these specific benefits,

bo to też pozwoli właśnie wyróżnić i lepiej zrozumieć użytkownikom to, co firma dostarcza.

because it will also allow users to distinguish and better understand what the company provides.

Poza nagłówkiem i opisem, dobrze, żeby znalazła się jakaś grafika.

Besides the headline and description, it would be good to include some graphics.

Grafika, która w zasadzie odgrywa dosyć istotną rolę w sekcji hero,

The graphic that basically plays a quite significant role in the hero section,

ponieważ ona przyciąga uwagę i wprowadza użytkownika w pewnym sensie w ten klimat strony internetowej.

because it draws attention and brings the user into the atmosphere of the website in a certain sense.

Może to być zdjęcie, nie wiem, przedstawiające zespół,

It could be a photo, I don’t know, depicting a band.

przedstawiające produkt czy też nawiązujące do usługi.

presenting a product or referring to a service.

Ważne, żeby ta grafika nawiązywała do samego charakteru działalności firmy.

It is important for this graphic to relate to the very nature of the company's activities.

Grafika musi być przede wszystkim estetyczna, ale też funkcjonalna,

The graphics must be primarily aesthetic, but also functional.

bo powinna nawiązywać do tego,

because it should refer to this,

jaka jest funkcja komunikacji marki.

What is the function of brand communication?

Bardzo często też tworzy się w pewnym sensie animację w formie grafiki

Very often, animation is also created in a certain sense in the form of graphics.

i ta animacja pozwala też zaangażować bardziej użytkowników,

and this animation also allows for greater user engagement,

zwrócić bardziej uwagę, przyciągnąć tą uwagę

pay more attention, attract that attention

i tym bardziej zachęca do dalszego przeglądania strony.

and encourages further browsing of the site even more.

Kolejnym bardzo istotnym elementem, jak nie jednym z najbardziej istotnych,

Another very important element, if not one of the most important,

jest call to action, czyli wezwanie do działania.

It is a call to action.

Wezwanie do działania przedstawione jest najczęściej w formie przycisku,

A call to action is most often presented in the form of a button,

który znajduje się pod opisem, pod tym racjonalnym wyjaśnieniem.

which is located under the description, beneath this rational explanation.

I to właśnie call to action, czyli to wezwanie do działania,

And this is exactly the call to action, or the invitation to act,

ma na celu zachęcenie użytkownika do wykonania określonej akcji.

It aims to encourage the user to take a specific action.

Na przykład przeczytanie więcej o ofercie, właśnie zapoznanie się z tą ofertą,

For example, reading more about the offer, specifically getting acquainted with this offer,

złożenie zamówienia, choć może też być na przykład zachęceniem do zapisania się na newsletter.

Placing an order, although it could also be, for example, an encouragement to sign up for the newsletter.

Call to action powinno być wyraźne, powinno też wyróżniać się mocno kolorystyką

The call to action should be clear and should also stand out with bold colors.

i tutaj ten kolor przycisku najczęściej powinien być kontrastowy,

and here the button color should most often be contrasting,

powinien być jednym z takich bardziej kontrastowych kolorów wykorzystywanych

It should be one of those more contrasting colors used.

w ramach identyfikacji wizualnej i całego motywu graficznego.

as part of the visual identification and the entire graphic theme.

I treść powinna też w jakiś sposób się wyróżniać.

The content should also stand out in some way.

I tutaj też taka rekomendacja, żeby w treści przycisku używać raczej takich,

And here is also a recommendation to use rather such phrases in the button text,

takiej treści wyróżniającej się, a nie takiej totalnie schematycznej.

such distinctive content, and not something completely schematic.

I ta wyróżniająca się treść dobrze, żeby nawiązywała właśnie do specyfiki tego, co się za tym kryje.

And this distinctive content should indeed refer to the specifics of what lies behind it.

Przykładowo możemy mieć po prostu, tak, zobacz więcej,

For example, we can just have, yes, see more,

które jest używane w 90% stron internetowych albo skontaktuj się z nami,

which is used on 90% of websites or contact us,

to są takie typowe po prostu call to action, a możemy pójść na przykład, nie wiem, wyceń projekt,

These are just typical calls to action, but we could go for example, I don't know, estimate the project.

od strony internetowej, tak, albo wyceń projekt.

From the website, yes, or price the project.

To już jest coś innego, to już w jakiś sposób bardziej nawiązuje powod do działalności.

That's something different; it somehow relates more to the reason for the activity.

I statystyki mówią, że właśnie takie call to action nawiązujące bardziej do działalności

And the statistics say that such calls to action that relate more to the activity are just like that.

działają zdecydowanie lepiej.

they work definitely better.

W samym call to action właśnie tutaj ważne, żeby się wyróżnić,

In the call to action right here, it's important to stand out.

tak jak wspomniałem, pamiętaj szczególnie o tym kolorze kontrastowym

As I mentioned, remember especially about that contrasting color.

i tej różnorodnej treści.

and this diverse content.

Można też starać się ograniczać do jednego call to action.

You can also try to limit it to one call to action.

Zdarza się, że w niektórych stronach internetowych mamy, powiedzmy, różne kierunki,

It happens that on some websites we have, let's say, different directions,

w różne miejsca chcemy skierować użytkownika

We want to direct the user to different places.

i maksymalnie możemy zrobić, powiedzmy, dwa takie przyciski,

and we can make, say, two such buttons at most,

z czego tylko jeden powinien być tym docelowym call to action,

of which only one should be the target call to action,

a drugi ewentualnie może odsyłać do jakiegoś elementu pobocznego

and the second one can possibly refer to some peripheral element

i nie może być kontrastowy.

and it cannot be contrasting.

Tak czasem się robi.

That's how it is sometimes done.

Czyli call to action powinny być z założenia jedno,

So the call to action should be fundamentally one,

a odnośniki mogą być maksymalnie dwa,

and there can be a maximum of two references,

gdzie, powiedzmy, jeden powinien kierować do tego głównego miejsca,

where, let's say, one should direct to that main place,

gdzie odsyłamy użytkownika,

where we redirect the user,

a drugi ewentualnie może kierować do jakiegoś, powiedzmy,

and the second one could possibly direct to some, let's say,

tak zwanej takiej mikrokonwersji czy po prostu do treści,

the so-called microconversion or simply to the content,

ale wtedy nie powinien być tak samo na równi kontrastowo wyróżniony,

but then it should not be equally distinguished in contrast,

może być na przykład, nie wiem, przezroczystym tłem

it could be, for example, a transparent background

czy po prostu mniej kontrastowym przyciskiem.

or just a less contrasting button.

Poza samymi tymi elementami, o których wspomniałem,

Apart from these elements that I mentioned,

są jeszcze pewne elementy, które możesz dodać do swojej sekcji hero,

There are still some elements you can add to your hero section.

które mogą wesprzeć cię po prostu i pomóc lepiej skonwertować użytkowników.

which can simply support you and help better convert users.

Jest to stricte związane z tym, jak budujesz markę,

This is strictly related to how you build a brand.

jak firma po prostu chce też prezentować się

how the company simply wants to present itself

i jak wygląda też proces zakupowy dla użytkownika.

And what does the purchasing process look like for the user?

Jednym z takich elementów są na przykład logotypy klientów.

One such element is, for example, customer logos.

Często używa się ich w sekcji hero, żeby podkreślić to,

They are often used in the hero section to emphasize that,

że firma ma już zadowolonych klientów, którzy korzystają z jej usług lub produktów

that the company already has satisfied customers who use its services or products

i widząc to użytkownicy po prostu nabywają zaufania.

And seeing this, users simply gain trust.

Właśnie ci nowi klienci, potencjalni klienci, którzy zobaczą te logotypy,

Those new clients, potential clients, who will see these logos,

będą po prostu bardziej skłonni do zaufania i wypróbowania tych usług lub produktów.

they will simply be more willing to trust and try these services or products.

I szczególnie działa to,

And it works particularly well,

jeżeli te logotypy dotyczą marek znanych Twoim odbiorcom.

if these logos relate to brands known to your audience.

Wtedy ten efekt jest najlepszy.

Then the effect is best.

Jest to takie właśnie social proof, potwierdzenie społeczne dla odbiorców.

This is exactly what social proof is, a social confirmation for the recipients.

Dobrze całkiem sprawdzają się także wyróżnienia i nagrody.

Awards and distinctions also work quite well.

I w ramach właśnie sekcji hero

And as part of the hero section

zdarza się wielu firmom, szczególnie usługowym,

it happens to many companies, especially service-oriented ones,

prezentować jakieś wyróżnienie, nagrody w konkursach,

present some awards, distinctions in competitions,

które też mogą być użytkowane.

which can also be used.

Które też mogą właśnie wesprzeć to budowanie marki

Which can also support this brand building.

i zbudować w pewnym sensie taki prestiż, potwierdzenie społeczne

and to build, in a sense, such prestige, social confirmation

i podkreślają po prostu wartość firmy

and simply emphasize the value of the company

i tak samo budują zaufanie potencjalnych klientów.

They build the trust of potential customers in the same way.

Czyli to też tak jakby świadczy, że dana firma jest ceniona w swojej branży.

So this also suggests that a given company is valued in its industry.

Czasem zdarza się, że w sekcji hero pojawia się formularz kontaktowy.

Sometimes it happens that a contact form appears in the hero section.

Zdarza się to zwykle na landing page'ach,

It usually happens on landing pages,

czyli na stronach, które mają na celu konwersję

that is, on pages that are aimed at conversion

i są, można powiedzieć, takimi zamkniętymi stronami,

and they are, one could say, such closed pages,

które mają tylko jeden cel.

which have only one aim.

Najczęściej wykorzystywane w kampaniach reklamowych.

Most often used in advertising campaigns.

I wtedy w sekcji hero taki formularz kontaktowy,

And then in the hero section, such a contact form,

umieszczony właśnie bezpośrednio,

placed directly,

umożliwi użytkownikom szybki kontakt

will enable users to contact quickly

i może to zachęcić po prostu do pozostawienia szybkiego kontaktu,

and it may simply encourage leaving a quick contact,

zapoznania się z ofertą, przekierowania tego kontaktu.

familiarization with the offer, redirecting this contact.

To jest jeden z takich schematów.

This is one of those patterns.

Warto to też testować.

It's worth testing this too.

Nie jest to też jakoś regułą w przypadku landing page'y.

It is not really a rule in the case of landing pages either.

To, co jeszcze spotkałem w sekcji hero, szczególnie w e-commerce'ach,

What I have also encountered in the hero section, especially in e-commerce,

to jest komunikacja ofert specjalnych.

This is communication of special offers.

Czyli umieszczenie w sekcji hero na przykład informacji

So placing information in the hero section, for example.

o jakiejś kampanii, promocji, o jakichś zniżkach,

about some campaign, promotion, some discounts,

o jakichś też materiałach bezpłatnych.

about some free materials as well.

Czasem też tak się zdarza.

Sometimes it happens like that too.

Na przykład nawet informacja o darmowych e-bookach.

For example, even information about free e-books.

Czy też wszelkiego typu informacje,

Do you also have all kinds of information,

które są w pewnym sensie też związane z jakąś ograniczoną ofertą czasową,

which are also somewhat related to a limited time offer,

która ma zachęcić nowych użytkowników do przejścia,

which is meant to encourage new users to switch,

do zapoznania się z tym.

to become acquainted with it.

I bardzo często jest takim właśnie lead magnetem,

And very often it is indeed such a lead magnet,

czy takim początkiem właśnie tego lejka sprzedaży,

is this the beginning of this sales funnel,

który często wiąże się z tym pierwszym właśnie etapem sprzedaży.

which is often connected with this very first stage of sales.

I tutaj te specjalne oferty,

And here those special offers,

często ograniczone czasowo,

often time-limited,

w sekcji hero mogą bezpośrednio przekierować

In the hero section, they can directly redirect.

w sklepie internetowym takiego użytkownika

in the online store of such a user

do konkretnej kategorii produktów,

to a specific category of products,

czy mogą go zachęcić właśnie do zakupu.

can they encourage him to make the purchase.

Z takich jeszcze istotnych elementów,

Among such other important elements,

to już w sumie wspomniałem,

I already mentioned that, in fact,

to jest też wykorzystywanie animacji.

This is also the use of animation.

I animacje mogą dotyczyć samej grafiki,

And the animations can relate to the graphics themselves,

ale mogą też ogólnie dotyczyć treści,

but they can also generally refer to the content,

czy też innych elementów samej sekcji hero,

or other elements of the hero section itself,

czy nawet tła.

or even backgrounds.

Animacje pozwalają zaangażować bardziej użytkownika,

Animations allow for increased user engagement.

przyciągnąć uwagę i też w pewnym sensie zachęcić

attract attention and also, in a sense, encourage

do dalszego przeglądania strony.

to continue browsing the site.

Tutaj trzeba uważać tylko,

You just have to be careful here,

żeby też zbytnio nie przesadzić,

so as not to overdo it too much,

bo zbyt duże animacje, zbyt angażujące

because the animations are too large, too engaging

mogą bardziej wprowadzić taki efekt artystyczny

They can create a more artistic effect.

i odciągnąć w zasadzie użytkownika od tych treści

and essentially distract the user from that content

i tego, co chcemy konkretnie mu zakomunikować.

and what we specifically want to communicate to him.

No i ostatni element sekcji hero,

And the last element of the hero section,

z którym się spotkałem, to są opinie.

The ones I have encountered are opinions.

Czasem się prezentuje opinie klientów,

Sometimes customer opinions are presented,

jeżeli chce się bardzo mocno właśnie zakomunikować

if you really want to communicate strongly

to potwierdzenie skuteczności,

this is confirmation of effectiveness,

to zaufanie innych

it's the trust of others

i czasem niektóre firmy komunikują tego typu treści.

And sometimes certain companies communicate such content.

Jak najbardziej to się wpasowuje też do tego celu

It definitely fits that purpose as well.

właśnie zbudowania zaufania,

just building trust,

określonego zbudowania wizerunku,

a specific construction of image,

wizerunku firmy na starcie.

company image at the start.

Sprawia to w pewnym sensie taki sam efekt,

It has a similar effect in a way,

jak prezentacja logotypów firmy.

like a presentation of the company's logos.

To tyle w dzisiejszym odcinku.

That's all for today's episode.

Mam nadzieję, że tym razem czy następnym razem,

I hope that this time or next time,

jak będziesz tworzyć stronę internetową

How will you create a website?

i będziesz projektować,

and you will design,

czy też uczestniczyć w procesie projektowania sekcji hero,

or also participate in the design process of the hero section,

będziesz dokładnie wiedzieć,

you will know exactly,

co powinna zawierać Twoja sekcja hero

What should your hero section contain?

i jakie elementy chcesz zakomunikować swoim odbiorcom,

And what elements do you want to communicate to your audience?

tak, żeby Twoja strona internetowa wygenerowała

so that your website generates

jak najlepsze wyniki dla Twojego działu marketingu.

the best results for your marketing department.

Jeżeli podobała Ci się ta treść i chcesz więcej,

If you liked this content and want more,

to zachęcam Cię do kolejnych odcinków,

I encourage you to watch the next episodes.

do zapisania się do naszego newslettera,

to subscribe to our newsletter,

w ramach którego będziemy informować o nowych odcinkach,

as part of which we will inform about new episodes,

ale też o innych treściach,

but also about other content,

które wraz tutaj z zespołem Tamago tworzę.

which I am creating here together with the Tamago team.

Do zobaczenia w kolejnym odcinku.

See you in the next episode.

Cześć.

Hi.