Weboldal tervezés: miért nem a dizájnnal kezdjük?
Elhatározod, hogy új weboldal kell.
Megnyitsz néhány konkurens oldalt. Elmented, amelyik tetszik. Kinézel két színt. Találsz egy betűtípust. Megfogalmazódik, hogy legyen elegáns, modern, letisztult.
Aztán jön az első látványterv.
Szép.
Csak közben még mindig nem teljesen világos, mi legyen a fő ajánlat. Melyik szolgáltatás kerüljön előre. Mitől különbözöl. Milyen referenciát kellene kiemelni. Mitől fél az érdeklődő. És mi történjen, amikor már majdnem jelentkezne.
Ilyenkor a dizájn nem oldotta meg a problémát.
Csak formát adott egy még tisztázatlan tartalomnak.
Ezért a weboldal tervezés nálam nem a színpalettával, a sablonnal vagy a hero-képpel kezdődik.
Előbb azt kell megérteni, hogy az érdeklődő milyen helyzetből érkezik, mit próbál eldönteni, milyen kérdései vannak, miből épülhet fel a bizalma, és mi legyen számára a következő biztonságos lépés.
Előbb döntési út. Utána weboldal. A dizájn csak ezután kap valódi feladatot.
Röviden: miért nem a dizájnnal érdemes kezdeni a weboldal tervezését?
Azért, mert a dizájn csak akkor tud jól működni, ha már tudjuk, mit kell kiemelnie, milyen sorrendet kell támogatnia, milyen tartalom a fontos, milyen bizonyítékot kell láthatóvá tennie, és milyen cselekvéshez kell elvezetnie.
A jó weboldal tervezés ezért előbb tisztázza:
- kinek szól az oldal;
- milyen helyzetből érkezik az érdeklődő;
- mit kell gyorsan megértenie;
- mi a fő ajánlat;
- milyen bizonytalanságok akadályozzák a döntést;
- milyen bizonyítékok csökkentik ezeket;
- milyen oldalakra vagy tartalmi blokkokra van szükség;
- és mi legyen a következő lépés.
Csak ezután érdemes eldönteni, hogyan nézzen ki mindez.
A sorrend azért fontos, mert a vizuális rendszer nem tudja pótolni a hiányzó ajánlatot, a gyenge pozicionálást vagy az ismeretlen folyamatot.
A dizájn fontos. Csak nem ez az első döntés.
Nem arról van szó, hogy a megjelenés másodlagos vagy felesleges.
A jó vizuális rendszer segít:
- hierarchiát teremteni;
- irányítani a figyelmet;
- olvashatóvá tenni a tartalmat;
- kiemelni a fontos bizonyítékokat;
- érzékeltetni a szakmai szintet;
- egységessé tenni az oldalt;
- és könnyebbé tenni a következő lépés felismerését.
Csakhogy ehhez előbb tudnia kell, mit kell kiemelnie.
Ha a fő üzenet még nincs eldöntve, nem lehet jól megtervezni a hero hierarchiáját.
Ha nem tudjuk, melyik szolgáltatás a fő ajánlat, nem lehet jól megtervezni a navigációt.
Ha nem tudjuk, mitől tart az érdeklődő, nem tudjuk, mely proof-elemeknek kell vizuális hangsúlyt adni.
Ha nem világos a következő lépés, a CTA-gomb színe sem fogja megoldani.
A dizájn felerősíti a struktúrát. De ha a struktúra rossz, azt is felerősítheti.
Mi történik, ha túl korán kezdünk látványtervezni?
1. A vélemények gyorsan ízlésvitává válnak
„Nekem ez a kék túl hideg.”
„A feleségem szerint legyen nagyobb a logó.”
„A kollégámnak jobban tetszik a másik betűtípus.”
Ezek legitim vizuális reakciók lehetnek.
Csakhogy ha az üzleti és tartalmi döntések még nincsenek rögzítve, könnyen ezek viszik el a projekt energiáját.
A fontosabb kérdések pedig háttérbe kerülnek:
- érthető-e az ajánlat;
- jól van-e sorrendben az információ;
- van-e elég bizonyíték;
- világos-e a folyamat;
- és jó-e a CTA.
2. A látvány miatt nehezebb kidobni egy rossz ötletet
Ha már készült egy szép blokk, sokkal fájdalmasabb kimondani, hogy valójában nincs rá szükség.
Ez teljesen emberi.
Az elkészült látványba könnyű beleszeretni.
Ezért érdemes a fő szerkezeti és tartalmi döntéseket még azelőtt meghozni, hogy sok idő menne a vizuális részletekre.
3. A szövegnek kell beleférnie a dizájnba
Ez az egyik klasszikus fordított munkamenet.
Készül egy látványterv három sor helyével.
Utána kiderül, hogy az ajánlat érthető bemutatásához hat sor kellene.
Ekkor két lehetőség marad: vagy levágjuk a fontos tartalmat, vagy elkezdjük újratervezni a layoutot.
Jobb sorrend: előbb tudjuk, milyen tartalomra van szükség, utána tervezzük meg hozzá a megfelelő vizuális teret.
4. A valódi probléma dekorációs problémának tűnik
Ha egy szolgáltatás nehezen érthető, könnyű azt gondolni, hogy több ikon, jobb kép vagy látványosabb szekció kell.
Pedig lehet, hogy valójában az ajánlat nincs még rendesen megfogalmazva.
A bizonytalanságot nem mindig vizuális eszközzel kell kezelni.
Mivel kezdődjön akkor a weboldal tervezése?
Egy szolgáltatói weboldalnál előbb hét dolgot érdemes tisztázni.
- Ügyfélhelyzet: milyen konkrét helyzetből érkezik az érdeklődő?
- Célcsoport: kinek akarunk elsőként érthetőek lenni?
- Ajánlat: pontosan mit kap, milyen keretek között?
- Döntési akadályok: miért nem jelentkezne még?
- Bizonyíték: miből tud arra következtetni, hogy érdemes benned bíznia?
- Folyamat: mi történik az első lépéstől az átadásig?
- CTA: mi legyen a legkisebb természetes következő lépés?
Ezekből áll össze az információs és döntési szerkezet.
Utána már a dizájn sem találgat.
Tudjuk, mi legyen hangsúlyos. Mi kerülhet háttérbe. Mely résznek kell levegő. Hol kell vizuális törés. Hol szükséges kép. Hol erősebb egy adat, idézet vagy folyamatábra.
1. Előbb az ügyfélhelyzetet kell érteni
A weboldal nem vákuumban létezik.
Valaki valamilyen előzménnyel érkezik rá.
Ajánlottak neki. Google-ben keresett. Hirdetésre kattintott. Egy problémára keresett választ. Összehasonlít két szolgáltatót.
Ezek nem ugyanazok a belépési helyzetek.
Egy ajánlás után érkező látogató például gyakran már tudja a nevedet. Neki nem feltétlenül figyelmet kell szerezned.
Azt kell megerősítened, hogy az ajánlás után jó helyre érkezett, érti az ajánlatodat, és van miből tovább építenie a bizalmat.
Ezért a nyitó rész tervezése sem azzal kezdődik, milyen stockfotó kerüljön jobbra.
Azzal kezdődik: mit kell ennek az embernek az első képernyőn felismernie?
2. Előbb az ajánlatot kell tisztázni
A szolgáltatáslista nem elég alap egy jó weboldalhoz.
„Könyvelés”, „tervezés”, „tanácsadás”, „honlapkészítés” – ezek kategóriák.
A weboldalnak ennél több kérdésre kell válaszolnia:
- kinek való;
- milyen helyzetre való;
- mit tartalmaz;
- mi a folyamat;
- milyen eredmény felé visz;
- mi nincs benne;
- és hogyan lehet elindulni.
Ha ez nincs meg, a dizájner vagy kivitelező kénytelen valamilyen általános szolgáltatás-blokkot készíteni.
A végeredmény lehet elegáns, de az ajánlat ugyanúgy homályos marad.
A bemutatkozó oldal és döntést segítő rendszer különbségéről szóló cikkben ezért is választottam külön a szolgáltatáslistát az érthető ajánlattól.
3. Előbb a döntési bizonytalanságokat kell összegyűjteni
Egy szolgáltatói weboldal egyik legfontosabb feladata nem új vágyakat gyártani.
Hanem válaszolni azokra a kérdésekre, amelyek miatt az érdeklődő még nem mer továbblépni.
Ilyen lehet:
- nekem való-e;
- értenek-e az én helyzetemhez;
- mennyibe kerülhet;
- mennyi idő;
- mit kell nekem biztosítanom;
- ki fog dolgozni rajta;
- mi történik, ha valami változik;
- mi történik az első kapcsolatfelvétel után.
Ha ezeket előre ismerjük, a weboldal struktúrája célzottabb lesz.
Nem azért kerül GYIK az oldalra, mert „minden jó weboldalon van GYIK”.
Azért, mert vannak konkrét döntési kérdések, amelyeknek helyet kell adni.
4. Előbb a bizonyítékokat kell összeszedni
A dizájntervezés előtt érdemes látni, milyen valódi proof áll rendelkezésre.
Például:
- referenciák;
- esettanulmányok;
- ügyfélvélemények;
- szakmai tapasztalat;
- képesítések;
- releváns számok;
- működési folyamat;
- saját módszer;
- valós személyes vagy csapatfotók.
Ez azért fontos, mert a bizonyítékok nem utólagos dekorációk.
Hatással vannak a teljes szerkezetre.
Egy erős esettanulmány akár külön aloldalt érdemel. Egy releváns szakmai múlt bekerülhet a fő döntési útba. Egy gyenge, általános testimonial viszont nem biztos, hogy főoldali kiemelést érdemel.
A weboldali referenciákról szóló cikkben részletesen megmutatom, hogyan lesz a portfólióból valódi bizonyítékrendszer.
5. Előbb a folyamatot és a scope-ot kell tisztázni
A szolgáltatás vásárlása nem csak a végeredményről szól.
Az ügyfél azt is értékeli, mennyire kiszámítható az odavezető út.
Ezért a weboldalnak szükség esetén meg kell tudnia mutatni:
- hogyan indul a közös munka;
- milyen anyagokat kell átadni;
- ki hozza meg a döntéseket;
- mi a projekt fő lépéssora;
- hány módosítási kör van;
- mi számít külön kérésnek;
- mikor indul a határidő;
- és mi történik az átadásnál.
Ha ezt csak a weboldal elkészülte után találjuk ki, fontos bizalmi tartalom maradhat ki a struktúrából.
A weboldal-készítő kiválasztásáról szóló cikkben is ezért kap központi szerepet a scope, az anyagleadás és a módosítási rendszer.
6. Előbb a CTA-t kell meghatározni
Nem minden oldal feladata az azonnali ajánlatkérés.
Egy problématudatos blogcikk után lehet természetes lépés egy kapcsolódó cikk vagy diagnózis.
Egy szolgáltatási oldal után lehet előszűrés.
Egy egyszerű helyi szolgáltatásnál lehet telefonhívás.
Egy nagyobb B2B-projektnél lehet előzetes szakmai egyeztetés.
A CTA azért tartozik a tervezés elejére, mert az oldal teljes információs sorrendje arra készíti fel az érdeklődőt.
Ha csak a végén kérdezzük meg, hogy „ja, és milyen gomb legyen?”, akkor a kapcsolatfelvétel könnyen idegen elemként kerül a kész oldalra.
A CTA nem a weboldal végére tett gomb. A teljes oldal előkészíti.
7. Ezután jön az oldalstruktúra
Ha már tudjuk, mit kell az érdeklődőnek megértenie, elhinnie és megtennie, akkor lehet eldönteni, milyen oldalak és blokkok kellenek.
Nem fordítva.
Lehet, hogy elég egy hosszú központi szolgáltatási oldal.
Lehet, hogy külön oldal kell a referenciáknak, a folyamatnak vagy egy-egy szolgáltatásnak.
Lehet, hogy egyetlen fő ajánlat mellé csak néhány támogató oldal szükséges.
Erről külön írtam a Milyen oldalak kellenek egy céges weboldalra? cikkben.
A jó oldalszám tehát nem csomagparaméter.
A döntési és keresési feladatokból következik.
8. És csak most érdemes vizuális rendszert építeni
Ezen a ponton már sokkal több értelme van a vizuális döntéseknek.
Már tudjuk:
- melyik üzenet a legfontosabb;
- hol kell erős kontraszt;
- melyik bizonyíték kapjon vizuális súlyt;
- hol kell hosszabb szövegnek hely;
- milyen képek valóban segítik a megértést;
- mely CTA legyen elsődleges;
- és milyen tartalmi ritmust kell támogatni.
Most már a tipográfia, a térköz, a képhasználat, a színek, a kártyák, a gombok és a reszponzív viselkedés valódi funkciót kap.
Nem csak azt kell eldönteni, hogy szép-e.
Azt is: segíti-e a hierarchiát, az érthetőséget és a továbblépést?
Mit jelent ez a gyakorlatban egy Látható Leszek projektnél?
A Látható Leszeknél ezért nem azzal indul a projekt, hogy küldj három weboldalt, ami tetszik.
A vizuális preferencia később fontos input lehet, de előbb a döntési alapokat rendezzük.
A főprojekt előkészítésében többek között tisztázni kell:
- a célcsoportot és a tipikus ügyfélhelyzetet;
- a fő ajánlatot;
- a meglévő és hiányzó bizalmi bizonyítékokat;
- a szolgáltatás kereteit;
- a folyamatot;
- a fő kifogásokat és kérdéseket;
- a kapcsolatfelvételi célt;
- és a rendelkezésre álló szöveges, képi és jogi anyagokat.
Csak ezután érdemes végleges tartalmi szerkezetet és vizuális megoldást építeni.
Ez nem azért van, hogy fölösleges stratégiai körökkel hosszabb legyen a projekt.
Éppen azért, hogy kevesebb késői újratervezésre, találgatásra és „valahogy mégsem áll össze” típusú körre legyen szükség.
Mit kell az ügyfélnek előkészítenie?
A jó weboldal tervezés közös inputot igényel.
Nem kell kész webszöveggel érkezned, ha a projekt tartalmaz szövegírást.
De szükség van a vállalkozás valós információira.
Például:
- szolgáltatások és jelenlegi árlogika;
- tipikus ügyfélhelyzetek;
- gyakori kérdések;
- referenciák és ügyfélvélemények;
- szakmai háttér;
- működési folyamat;
- képek és arculati elemek, ha vannak;
- jogi szövegek vagy jogász által jóváhagyott anyagok;
- szükséges domain-, tárhely- és rendszerhozzáférések.
A weboldal-készítő nem tudja hitelesen kitalálni helyetted a szakmai múltadat, a referenciáidat vagy az ügyfélfolyamatod valós működését.
A jó munka nem azt jelenti, hogy neked semmit nem kell adnod.
Azt jelenti, hogy nem neked kell egyedül kitalálnod, hogyan legyen mindebből érthető weboldal.
Mi van, ha még nincs kiforrott ajánlat?
Ilyenkor különösen rossz ötlet lehet túl gyorsan dizájnba ugrani.
Ha még nem világos, pontosan kinek, mit és milyen keretek között kínálsz, a weboldalprojekt könnyen ajánlatfejlesztési projektté válik.
Ez nem feltétlenül baj.
Csak előre látni kell.
A weboldal elkészítése közben gyakran kiderülnek üzleti kérdések:
- túl sok szolgáltatás van;
- két célcsoport teljesen mást akar;
- nincs világos fő ajánlat;
- az árképzés nincs lezárva;
- a folyamat csak fejben létezik;
- nincs elegendő bizonyíték.
Ezeket nem érdemes egy látványterv mögé rejteni.
Előbb tisztázni kell, mi az a stabil alap, amit már érdemes publikálni.
Mikor lehet mégis gyorsan dizájnnal kezdeni?
Van olyan helyzet, amikor a tartalmi alap már tényleg készen van.
Például ha:
- létező, működő márkarendszerhez készül új oldal;
- jóváhagyott UX- és tartalmi specifikáció áll rendelkezésre;
- a szöveg, ajánlat és információs architektúra már végleges;
- egy meglévő oldal vizuális frissítése a cél, miközben a struktúra bizonyítottan működik;
- egy kampányrendszerben bevált landing új vizuális variánsa készül.
Ilyenkor nem azért lehet hamar a dizájnra térni, mert a tartalmi munka fölösleges.
Azért, mert azt már korábban elvégezték.
A dizájnnal kezdeni akkor biztonságos, ha valóban van mit megtervezni – nem csak egy üres keretet próbálunk megtölteni menet közben.
Weboldal tervezés: rossz és jobb sorrend
| Túl korai dizájnfolyamat | Döntést segítőbb sorrend |
|---|---|
| Szín és stílus | Ügyfélhelyzet és cél |
| Sablon kiválasztása | Ajánlat és pozicionálás |
| Menüpontok | Döntési kérdések |
| Látványterv | Bizonyíték és folyamat |
| Placeholder szöveg | Valós tartalmi igény |
| Gomb a végére | CTA és következő lépés |
| Utólagos szövegfaragás | Oldalstruktúra |
| Újratervezési körök | Vizuális rendszer |
Ez nem kőbe vésett gyártási folyamat.
Egyes lépések párhuzamosan is futhatnak.
A lényeg a függőség: ne véglegesíts olyan vizuális döntést, amelyhez a tartalmi és üzleti döntés még hiányzik.
Miért lehet ettől gyorsabb is a projekt?
Elsőre úgy tűnhet, hogy a kérdezés és tisztázás csak lassít.
A gyakorlatban sok későbbi kört megelőzhet.
Ha már az elején tiszta:
- mi a fő ajánlat;
- melyik célcsoport az elsődleges;
- milyen proof áll rendelkezésre;
- milyen oldalak kellenek;
- ki a döntéshozó;
- mit kell az ügyfélnek átadnia;
- és mi nem része a projektnek;
akkor kisebb az esélye annak, hogy a kivitelezés közepén kelljen teljes blokkokat, menüpontokat vagy szövegeket újragondolni.
A jó előkészítés nem végtelen workshop.
Pont annyi tisztázás kell, amennyi ahhoz szükséges, hogy a vállalt scope tartható legyen.
És mitől lesz végül jó a dizájn?
Attól, hogy a tartalmi logikát vizuálisan is segíti.
Például:
- a fő üzenet valóban elsődlegesnek látszik;
- a látogató könnyen végig tudja pásztázni az oldalt;
- a fontos bizonyíték nem vész el;
- a szöveghosszhoz illeszkedik a layout;
- a CTA felismerhető, de nem ordít;
- a mobilnézet nem egyszerűen összenyomott desktop;
- a tipográfia olvasható;
- a képek nem díszítik, hanem támogatják a mondanivalót;
- az egész oldal vizuálisan egy szakmai, rendezett működés érzetét adja.
A jó dizájn tehát nem ellensége a Látható Leszek gondolkodásának.
Épp ellenkezőleg.
A jó dizájn teszi láthatóvá azt a rendet, amelyet előtte tartalmilag már kialakítottunk.
Gyakori kérdések a weboldal tervezéséről
Mi a weboldal tervezés első lépése?
Szolgáltatói oldalnál először a célcsoportot, a tipikus ügyfélhelyzetet, az ajánlatot és a kívánt következő lépést érdemes tisztázni. Ezek nélkül a menü, a tartalmi sorrend és a dizájn is könnyen találgatássá válik.
Mikor kell kiválasztani a színeket és a betűtípusokat?
A vizuális irány korán is körvonalazható, de a végleges rendszer akkor tervezhető jól, amikor már ismerjük a tartalmi hierarchiát, a blokkokat, a proofot és a CTA-kat.
Kell előre megírnom az összes szöveget?
Nem feltétlenül. Ha a projekt szövegírást is tartalmaz, a szöveg közösen előkészíthető kérdőívből, interjúból és meglévő anyagokból. Arra viszont szükség van, hogy a vállalkozás valós szakmai információit, referenciáit és kereteit átadd.
Mi az a wireframe, és kell-e minden projekthez?
A wireframe az oldal tartalmi és funkcionális elrendezésének egyszerű vázlata, vizuális részletek nélkül vagy kevés vizuális részlettel. Összetettebb oldalaknál hasznos lehet, de egyszerűbb projektnél a tartalmi struktúra más formában is tisztázható. Nem maga az eszköz a lényeg, hanem hogy a szerkezetet a végleges dizájn előtt átgondoljuk.
Miért probléma a sablon kiválasztásával kezdeni?
Nem mindig probléma, de a sablon könnyen ráerőlteti a saját struktúráját az ajánlatodra. Jobb előbb tudni, milyen tartalmi és döntési elemekre van szükség, és utána olyan technikai vagy vizuális alapot választani, amely ezt támogatja.
Nem lesz így drágább a weboldal?
A mélyebb előkészítés valóban munka. Viszont csökkentheti a késői újratervezést, a fölösleges módosításokat és azt a kockázatot, hogy egy technikailag kész, de üzletileg homályos oldalt később újra kelljen építeni. A szükséges mélységet mindig a projekt scope-ja határozza meg.
Mikor elég egy egyszerűbb folyamat?
Ha az ajánlat, a célcsoport, a szöveg és a struktúra már tiszta, a weboldal pedig egyszerű, kisebb előkészítés is elég lehet. Nem minden projekt igényel mély stratégiai munkát.
Ki dönti el végül a dizájnt?
Az ügyfél hozza a végső üzleti jóváhagyást, a weboldal-készítő pedig szakmai javaslatot ad a vizuális hierarchiára, használhatóságra és megjelenésre. A rendezett projektben egy kijelölt döntéshozó fogja össze a visszajelzéseket.
Mi történik, ha menet közben új szolgáltatás kerül elő?
Ha az új szolgáltatás érdemben megváltoztatja az elfogadott struktúrát, célcsoportot vagy tartalmat, az scope-változás lehet. Ilyenkor külön kell tisztázni a plusz munkát, a költséget és az esetleges határidő-módosítást.
A Látható Leszek készít egyedi dizájnt?
A vizuális megvalósítás a jóváhagyott tartalmi és döntési struktúrát szolgálja. A fő fókusz nem az öncélú kreatív webdesign, hanem egy tiszta, szakmai, mobilon is jól használható szolgáltatói oldal felépítése.
Nem szép oldalt kell először tervezni. Hanem tiszta döntési helyzetet.
A weboldaladnak természetesen jól kell kinéznie.
De a látogató nem azért érkezik, hogy értékelje a tipográfiai rendszeredet.
Azért érkezik, mert valamit meg akar érteni.
Azt próbálja eldönteni, jó helyen jár-e. Neki való-e. Érdemes-e bíznia benned. Mi fog történni. És megtegye-e a következő lépést.
Ha ezek még nincsenek tisztázva, korai azon vitatkozni, hogy lekerekített vagy szögletes legyen a gomb.
Előbb rendet kell tenni abban, amit az oldalnak mondania és bizonyítania kell. A dizájn ezután tud igazán dolgozni.
A szolgáltatói weboldalrendszer ezért az ajánlat, a célcsoport, a bizalom, a folyamat és a CTA tisztázásából indul ki, nem sablonválasztásból.
Ha még azt sem tudod biztosan, hogy teljes új oldalra vagy néhány célzott javításra van szükséged:
Kapcsolódó tartalmak
- Weboldal referenciák: hogyan mutasd be őket, hogy valóban bizalmat építsenek?
- Bizalomépítő weboldal: 11 elem, amitől könnyebb lesz téged választani
- Mitől lesz egy weboldal több, mint bemutatkozó névjegy?
- Céges weboldal készítés: milyen oldalak és tartalmak kellenek egy szolgáltatónak?
- Hogyan válassz weboldal-készítőt? 15 kérdés ajánlatkérés előtt
- Weboldal-audit: mit vizsgál, mit kapsz, és mikor érdemes elvégeztetni?
