Návrh webu, ktorý splní očakávania

5 bodov, ktoré vás ako developera/konzultanta prevedú návrhom webu, ktorý splní očakávania klienta. Taktiež pomôžu k tomu, aby vaša práca nebola na konci označená za zlú a nič neprinášajúcu. Ak ste doteraz fungovali štýľom „sem dáme kontakt, sem o nás“, privítajte zmenu…

Úlohou webdesignera je v prvom rade priniesť riešenie, ktoré bude zarábať a plniť očakávania majiteľa. Umelecké výstrelky sú druhoradé.

1. Ciele, očakávania a jasné pomenovanie webu

„Chcel by som web pre moju firmu. Mal by byť pekný, jednoduchý a optimalizovaný pre Google„. Takýchto stránok vám viem vysypať niekoľko z rukáva… Problém je, či vám nejako pomôžu.

Na začiatku odporúčam jasné vymedzenie oblasti pôsobenia klienta, jeho ciele a očakávania. Zväčša ich nevie hneď pomenovať, ale kdesi v hlave ich bude mať isto… Na tomto mieste sa tak klientov zvyknem pýtať rôzne otázky ohľadom ich podnikania. Ideálnym riešením je krátky dotazník (alebo rozhovor), ktorý by vám mal dať základnú predstavu o klientovi, jeho práci a veciach, ktoré by mu mal web poskytovať/umožňovať.

Príklad

Ideálny výstup môže mať takúto podobu:

• Multibrandový butik zameraný na biznis fashion. Našou cieľovou skupinou sú manažérky, obchodníčky, právničky.
• Okrem predaja organizujeme dresscode workshopy poskytujeme one on one service, kedy vieme celý butik vyhradiť iba pre danú klientku.
• Na trhu už pôsobí konkurencia XY. Tá však poskytuje zväčša outletový tovar, pričom u nás sú to najmä nové modely. Sídla však v inom meste a tak fyzicky butik nie je konkurenciou. Naopak spolupracujeme s printovým magazínom XX, v ktorom sú pravideľne fotogalérie aj s našimi produktami…
• Na webe by sme chceli predávať služby (dresscode workshopy, …), jednotlivý tovar (cez e-shop), publikovať obsah (články, fotogalérie outfitov, videá) a samozrejme prezentovať aj samotný butik.

Niečo takéto vám priblíži podnikanie klienta, stav na trhu a najmä jeho očakávania od webu. Správne položené otázky vám priblížia zákulisie, čo môžete neskôr využiť napríklad pri tvorbe textov (hovoriacich o hlavných prednostiach) a výbere štýľu komunikácie.

Na záver tejto časti odporúčam jasne pomenovať budúci web a rozhodnúť sa, či to bude e-shop, firemná stránka, blog a podobne. V určitom bode sa budete musieť vždy rozhodovať medzi rôznymi riešeniami a takéto jasné pomenovanie webu vám pomôže držať sa priorít. Pomáha mi to najmä s utrasením toho, koľko miesta vyčleniť tej-ktorej sekcií, čo dostať na homepage a podobne.

It is purpose that created us, purpose that connects us, purpose that pulls us, that guides us, that drives us; it is purpose that defines, purpose that binds us…

2. Obsah, ktorý potrebujem na splnenie cieľov a očakávaní

Pod obsahom mám v tomto bode na mysli „stránky“ a celé sekcie. Ak chcem predávať tovar cez e-shop, potrebujem sekciu e-shop, ktorá zo sebou nesie kopec jednotlivých stránok – produkty, kategórie, košík a podobne. Ak plánujem publikovať obsah, zrejme vytvorím sekciu blog.

Odporúčam ísť krok za krokom a ku každému cieľu/očakávaniu spísať obsah, ktorý budem potrebovať.

Príklad

Pre náš vzorový butik to bude vyzerať nejako takto

• Predaj služieb – stránky o daných službách
• Predaj tovaru – sekcia e-shop
• Publikovanie obsahu – sekcia blog
• Prezentácia samotného butiku – „O nás“, „Kontakt“,

Výstupom tejto časti je základ pre návrh štruktúry obsahu.

3. Návrh štruktúry (obsahu) webu

K návrhu hlavného menu a celkovej štruktúry sa dostávame až teraz. S informáciami, ktoré máme z predošlých krokov je jej návrh výrazne jednoduchší, ako keby sme s ním začali hneď na začiatku.

Štruktúra webu by mala z veľkej časti vychádzať z výstupu predošlého bodu. S tým rozdielom, že pri jej návrhu budeme riešiť sekcie webu podrobne. Prechádzame sekciu za sekciou a zamýšľame sa nad jej podobou. Napríklad pri sekcii eshop riešim tieto veci:

Príklad

1. kategórie produktov
2. stránky jednotlivých kategórií
3. stránka produktu
4. homepage sekcie e-shop
5. košík a checkout
6. …

Ja osobne k tomuto pridávam aj plánované URL adresy, keďže tie by mali štruktúru webu odzrkadlovať. Nutné to však nie je.

Výstupom je niečo, čo pripomína hlavné menu webu. Akurát je tam toho výrazne viac. Do menu tak popresúvam najdôležitejšie sekcie/stránky. Zvyšok už je linkovaný cez odkazy v texte.

4. Mapa webu

Pozor, nemýliť si so mapou stránok (sitemap).
Mapa stránok už pracuje s jednotlivými bodmi (stránkami, článkami, …) štruktúry. Obsahuje:

• Cieľ, ktorý daná stránka napĺňa
• Hlavny message
• Želaná akcia používateľa

Priznám sa, že mapa stránok bola pre mňa celkom novinka. Po prečítaní knihy Web ostrý jako britva sa u mňa stala často používanou a nápomocnou súčasťou návrhu.

Príklad

Náš vzorový butik, podstránka o jednej zo služieb

• Cieľ: Predstaviť danú službu a umožňiť jej objednanie
• Message: Nákup v pokojnom a súkromnom štýle mimo klasických otváracích hodín
• Akcia: Odoslanie objednávku (formulár)

Hlavný message a želaná akcia mi pomáha pri tvorbe obsahu jednotlivých stránok. Na hlavnej informácii postavím texty, zvyšok pomáha s dosiahnutím akcie. Tým sa dostávame ku poslednému bodu.

5. Návrh obsahu

Pomyselným posledným krokom v mojom zozname je príprava konkrétneho obsahu na konkrétne stránky. Obsahom mám na mysli texty, obrázky, formuláre, želaná funkcionalita. Na tomto mieste sa tak isto zamýšľam nad rozložením konkrétnych prvkov na webe.

Výstup tejto sekcie odovzdávam grafikovi, kóderovi a ďalším zúčastneným, ktorí už na základe toho pripravia všetko, čo je potrebné. Nakoľko je všetko podriadené účelu (cieľ/očakávania klienta), nepracuje sa na ničom, čo nakoniec nebude nikomu dobré… WIN WIN pre vás aj klienta.

P.S. Podobnosť príkladov s reálnymi webmi je čisto náhodna 🙂