A weboldal tényleges megtervezése: 2. rész - Online bozótvágás 34. rész

A mai rész végére már működő prototípussal rendelkezünk majd! Készel állsz, hogy feltöltsd tartalommal a legutóbbi részben megalkotott specifikációt?

Tartalomfejlesztés és priorizálás

Már bizonyítottad, hogy átjön az ügyfeleidnek, amit képviselsz. Most az a dolgod, hogy pakolj rá „egy kis húst”, színezd ki és válaszold meg a még esetlegesen felmerülő kérdéseket, hogy az utolsó kétségeket is eloszlasd. Sorakoztasd fel az összes létező bizalomnövelő tényezőt, termékértéket és előnyt. A gyakorlott szövegírók már zsigerből ismerik azokat a formulákat, amelyek hatékonyan képesek fenntartani a látogatók figyelmét egészen a vásárlásig.

Jó tipp, hogy mindig az ajánlatod által biztosított előnyöket hozd előtérbe és ne csilivilli tulajdonságokat tolj azonnal az érdeklődők arcába, mert a vásárlóid emocionális lények. Ha érzelmi oldalról megnyerted őket, nyitottak lesznek a részletekre is. Mindezt úgy, hogy az oldal felső részén mindig lehessen látni annyi bizalomgerjesztő infót a kínáltakról, hogy a látogató képbe kerüljön akkor is, ha mindössze 3 másodpercet tölt az oldalon és ne kelljen perceket olvasgatnia mire kiderül bármi lényeges.

Kész tartalom nélkül ne lépj tovább!

Egy konverzióra optimalizáltan megszövegezett főoldali kezdőképernyő formulája. Forrás: DX Labz

Az utóbbi időben erősen megváltozott az internetes tartalomfogyasztás képe és egyre többen csak futva-, és főleg szalagcímeket olvasnak, ezért minden erőddel azon kell lenned, hogy megragadd az olvasók figyelmét. Akárcsak a közösségi médiában, a weboldalakon is jellemzően végiggörgetjük először a tartalmat és ha (elég) érdekesnek találjuk a szalagcímeket, csak akkor szánjuk rá az időt, hogy a részleteket is elolvassuk.

Ezért nagyon fontos, hogy a szalagcímek már önmagukban is információdúsak legyenek és mintegy összegzésként elmondják akkor is a lényeget, ha valaki nem kíván továbbolvasni. Ha a szalagcím (headline) alatti tartalmi rész nagyon hosszú, érdemes egy pár kiemelt összegző mondatot is elhelyezni a szalagcím alatti szövegben, így tovább engeded zoomolni az olvasót. A leíró részben is ajánlott kiemelni a lényeges mondatokat, szavakat a szöveg gyors értelmezésének elősegítésére.

Példa a 4 szintű zoomolást lehetővé tévő szöveges tartalmi blokk elrendezésére. Forrás: DX Labz

A weboldal felületére is tekinthetünk úgy, mint egy tölcsérre. Az oldal tetejét még a látogatók 100%-a látja, de minél lentebb található egy tartalom, annál kisebb a láthatósága. Lesznek olyanok, akiknek a figyelmét nem tudtuk eléggé megragadni és nem jutnak el egyáltalán a lentebb található blokkokig. Ezért érdemes az információközlés szempontjából fontos tartalmakat az oldal tetejéhez minél közelebb elhelyezni, így tudod minimalizálni a lemorzsolódást.

Drótváz – A weboldalad tervrajza

Ha elkészült a weboldalad teljes szövegezése, – részletekbe menően minden leírásra került, amit a célközönség elé szeretnél tárni az általad kínáltakról – projekted újabb mérföldkőhöz ért és a drótvázkészítés fázisába léphet.

A drótváz a weboldal kis pontosságú ábrázolása, a design csontváza, mely tartalmazza az információk fő struktúráját, a tartalmi csoportokat.

Drótvázból kész design. Forrás: DX Labz

A drótvázat jellemzően a grafikus készíti el és segítségével még egy korai, alacsonyabb munkaigényű tervezési fázisban véglegesíteni tudod a tartalmak elrendezését, így költséghatékonyabban tud elkészülni a projekt.

A drótvázkészítés során összeházasításra kerül a már megfelelően megírt és priorizált tartalom a működési specifikációval. Ebben a fázisban nem kell foglalkoznod az elemek tényleges kinézetével, csak az elrendezéssel. Leginkább azt kell figyelembe venni, hogy a szöveges tartalom hogyan tudná támogatni az ügyfél célját, azaz a te konverziós célodat az oldalon belül.

Mivel tudjuk, hogy a látogatók szkennelve olvasnak, ezért a szalagcímeket érdemes nagyobb betűmérettel kiemelni már a drótvázkészítés folyamán is. Ha igazán jól elrendezett tartalmat szeretnél, első körben a grafikai elemek teljes elhagyásával, csak szövegekkel és linkekkel, illetve a grafikák tartalmát szövegesen leírva próbáld meg átgondolni az ügyfél oldalon bejárt útvonalát.

Ha biztosítani tudod, hogy a szöveg már ilyen formában is beszédes, akkor az ehhez illeszkedő, a szöveg tartalmát önmagában is átadó grafikák használatával biztosan nyert ügyed lesz. A drótvázazás fázisában a képeket, videókat csak egy egyszerű téglalap helyettesíti, hogy ne befolyásoljanak a színes grafikák, így a tartalom rendezése marad fókuszban.

Prototípus – Mutasd, mit tud

Lehetőséged van kattintható prototípust is készíttetni a felhasználói műveletek lemodellezésére, így ismét csak fontos hibákat tudsz kiszűrni, mielőtt a költségesebb, részletes design készítésére térnétek rá. A prototípus a weboldal funkcionális szempontból tesztelhető modellje, mely már potenciális felhasználókkal is véleményeztethető. Itt a weboldal egy grafikailag alacsony, de tartalmilag – és a majd elérhető funkcionalitások szemléltetésének tekintetében – magas szintű ábrázolásáról van szó.

Ha nagyjából összeálltak legalább a fő ügyfélútvonal képernyőinek drótvázai, akkor a manapság használatos drótvázkészítő szoftverekben a grafikusod képes az egyes képernyőket összekötni olyan formában, hogy az egyik oldal bizonyos elemére kattintva a prototípus egy másik, linkelt képernyőre vált át.

Ez a képernyő további, más oldalakra linkelő interaktív elemeket tartalmazhat, így megtapasztalhatod oldalad végleges működését anélkül, hogy különösebb módon invesztáltál volna a grafikába és a jóval drágább weboldalfejlesztésbe. Ha lehet, már a célközönségedbe tartozó felhasználóknak is mutasd meg a prototípust, hogy korai fázisban tanulj valós igényeikről és végül majd egy már kiforrottabb megoldással léphess piacra.

Itt kicsit kitekintenék a sablonokra alapozott weboldalkészítésre, ahol egy fix elrendezést próbálsz a saját igényeidhez igazítani, ami csak nagyon kevés esetben működik. Képzeld el, hogy egy hétköznapi autót akarsz Ferrari-vá alakítani, még alapos lakatos munkával is, az eredmény biztosan nem lesz 100%-os. Ezzel szemben a drótvázkészítést követően az egyedileg elkészített grafika garantáltan sokkal jobban fog igazodni ahhoz, amit a weboldaltól elvár a célközönséged.

Mobilfókuszú design

Ha sikerült lepontosítani a tartalmi vázat és a kiosztást, végre teljes pompájában láthatod készülő weboldaladat. Mindezt elsődlegesen mobilra érdemes tervezni, mivel a webes forgalom túlnyomó része jellemzően már mobilról érkezik. Bár a grafikusoknak a mai napig nehéz elszakadni az asztali elrendezés nagyobb látványosságától, te mindenképpen ragaszkodj hozzá, hogy a design első körben mobilra készüljön. Ha ott jól működik a weboldal, asztali nézetben is fog, fordítva ez nem feltétlenül igaz, ezért kell a mobilnézet tökéletesítésén kiemelten munkálkodnotok.