Hatóanyaggal kapcsolatos landing oldalak struktúrája, CTA, mobile first logika

1. Alapelvek – miért fontos a hatóanyag landing oldal? #

• Fókusz:

  • Cél: az érdeklődő a keresett hatóanyagról gyors, hiteles információt kapjon és egyből lépni tudjon (vásárlás, további keresés).

  • Gyakran Google keresőből érkeznek a felhasználók konkrét hatóanyag névre.

• Felépítés:

  • Mobilon, gyors fogyasztásra, “mobile first” megközelítésben készül, azonnali, egyszerű navigációval.

2. Mobile first logika – 2 képernyőgördítés szabálya #

• Miért?

  • Az első két “screen scroll”-on dől el, hogy a látogató marad-e és cselekszik-e.

  • Minden lényeges információnak és a cselekvés lehetőségének azonnal, szem előtt kell lennie.

Kötelező elemek a két képernyőn belül: #

1. Főcím – hatóanyag neve

   • Pl.: “Magnézium – Miért fontos a szervezetnek?”

2. Rövid, lényegretörő leírás (2–3 mondat)

   • Mit tud a hatóanyag, milyen területeken segít? (Csak EFSA-állítás, vagy általános edukáció!)

   • Pl.: “A magnézium hozzájárul az izmok és idegrendszer normál működéséhez.”

3. Kulcselőnyök felsorolása / infografika / vizuális blokk

   • Kiemelve: fő előnyök, természetes eredet, minőség, könnyű felszívódás, allergénmentesség stb.

4. CTA (Call To Action) gomb – minél előbb!

   • “Keresd a webshopban” (webáruház keresőre visz)

   • “Google találatok a [hatóanyag neve] kifejezésre” (új ablakban keres)

   • “Ismerd meg a termékeinket” (terméklista oldalra ugrik)

5. Kép, ikon vagy illusztráció

   • Természetes, hiteles, a Natur Tanya arculatával egyező vizuális megjelenés.

Példa elrendezés mobilon: #

• 1. Képernyő

  • Főcím

  • Kép/ikon

  • Rövid leírás

  • Kulcselőnyök (1–3 pontban)

• 2. Képernyő

  • Bővebb edukáció (max. 2 bekezdés vagy infografika)

  • CTA gomb(ok): “Vásárlás”, “További információ”, “Google keresés”

3. CTA-k – Milyen legyen? #

• Webáruház kereső link:

  • Olyan keresőmező, ami automatikusan a hatóanyag nevével szűr a termékekre.

  • Pl. “Keresd a magnéziumot a Natur Tanya webshopban”

• Google kereső link:

  • Olyan gomb, ami megnyit egy Google keresést az adott hatóanyagnévre.

  • Pl. “További tudnivalók a Google-on: Magnézium”

• Terméklista vagy termékoldal link:

  • “Nézd meg kapcsolódó termékeinket” (kategória oldalra mutat)

4. UX / UI tippek #

• Nagy, kontrasztos CTA gombok, mindig képernyőn belül!

• Egyszerű, tagolt szöveg, átlátható információs blokkok.

• Reszponzív elrendezés: a desktop nézetet is a mobil szerkezetből kiindulva tervezd.

• Minél gyorsabb betöltés, “above the fold” (görgetés előtt) CTA.

• Képek, ikonok nem lassíthatják az oldalbetöltést.