Jeden krok, ktorý väčšina nových majiteľov webov vynecháva (a prečo ich to stojí)

Zhrnutie

Väčšina nových majiteľov webov skočí rovno do výberu farieb a písania textov, ale vynechanie fázy plánovania vedie k mätúcej navigácii, roztrúsenému obsahu a neskorším nákladným redizajnom. Tento článok sleduje príbeh niekoho, kto urobil túto chybu a musel prerobiť celú svoju stránku. Naučíte sa praktický štvorstupňový proces na definovanie účelu vašej stránky, zmapovanie jasnej mapy stránok a vytvorenie wireframov – ešte predtým, ako sa dotknete tvorcu. Protichodný názor: viac času stráveného plánovaním v skutočnosti urýchli celkovú výstavbu, pretože sa vyhnete neustálemu vracaniu sa späť. Na konci budete mať plán, vďaka ktorému bude samotný vývoj pripomínať priamku, nie bludisko. Plus, uvidíte, ako nástroje ako Pagenza dokážu premeniť váš plán v obyčajnom texte na živú stránku za pár minút.

Katastrofa stavania bez plánu

Strávili ste tri víkendy skladaním stránky, hraním sa s farebnými paletami, písaním textov na domovskú stránku, nahrávaním produktových fotiek. Cítili ste sa produktívne. Potom ste ju ukázali priateľovi. "Na ktorú stránku mám kliknúť pre vaše služby?" spýtala sa. Ukázali ste na druhý odkaz v menu – ten s názvom "Riešenia", pretože to znelo cool. "A kde je váš príbeh o vás?" Uvedomili ste si, že ste ho zahrabali pod rozbaľovaciu ponuku. Stránka bola naživo, ale nikto nič nenašiel. Návštevnosť prišla a odišla. Nakoniec ste celú vec stiahli a začali odznova.

Tento scenár je bolestne bežný. Chýbala nie lepšia grafika alebo ostrejšie texty – bola to informačná architektúra. IA je neviditeľná kostra, ktorá robí stránku intuitívnou. Keď ju vynecháte, každý návštevník sa cíti ako stratený v budove bez značiek. Riešenie je klamlivo jednoduché: najprv plánujte, potom stavajte.

Krok 1: Definujte hlavný účel a publikum vašej stránky

Predtým, ako otvoríte akéhokoľvek tvorcu, odpovedzte na dve otázky v obyčajnom texte: "Čo presne musí táto stránka dosiahnuť?" a "Kto je môj najdôležitejší návštevník?" Nie "každý" – jedna primárna persona. Pre nezávislého dizajnéra môže byť cieľom "získať dopyt na brandingové projekty" a persona je "zakladatelia začínajúcich startupov." Napíšte si to. Stanú sa filtrom pre každé rozhodnutie.

Príklad: Inštruktorka jogy chcela stránku, ktorá by prilákala miestnych študentov na jej hodiny. Taktiež však chcela predávať online videá. Tieto dva ciele sú na domovskej stránke v konflikte, pokiaľ neurčíte priority. Výberom "prihlásenie na osobné hodiny" ako primárnej akcie sa rozhodla, že domovská stránka zobrazí najskôr jej rozvrh a online obchod bude o úroveň hlbšie. Táto jasnosť zabránila mätúcemu chaosu.

Upozornenie: Tento krok nepreháňajte. Jedna veta na cieľ a personu stačí. Pasca je stráviť dni dolaďovaním, keď by ste mohli iterovať.

Krok 2: Zmapujte jednoduchú mapu stránok

Teraz uveďte všetky stránky, ktoré vaša stránka potrebuje, zoskupené podľa priority. Domovská stránka je navrchu. Potom hlavné sekcie (napr. O nás, Služby, Blog, Kontakt). Pod každú uveďte podstránky (napr. Služby → Webdizajn, Branding, Cenník). Použite tabuľu alebo list papiera. Toto je vaša mapa stránok.

Prečo to záleží: Mapa stránok odhalí medzery a prekrývania skôr, než začnete kódovať. V príklade inštruktorky jogy jej počiatočný zoznam obsahoval "Hodiny" aj "Rozvrh" ako samostatné stránky. Na mape stránok zistila, že sú nadbytočné a zlúčila ich. To ušetrilo prácu na návrhu a texte celej stránky.

Odporúčanie odporcu: Odolajte nutkaniu urobiť "plochú" stránku, kde je každá stránka jedno kliknutie z domova. Hoci sa to zdá užívateľsky prívetivé, často to pochová primárnu akciu pod nekonečnými odkazmi. Plytká hierarchia (maximálne tri úrovne) udržuje veci prehľadné.

Krok 3: Vytvorte wireframe kľúčových stránok na papieri

Vezmite svoju mapu stránok a načrtnite rozloženie vašich najdôležitejších stránok – domovskej, vstupnej stránky hlavnej sekcie a stránky s obsahom. Použite obdĺžniky pre obrázky, čiary pre text a X pre tlačidlá. Nejde o krásu; ide o tok. Kam smeruje oko? Je výzva na akciu výrazná?

Príklad: Wireframe domovskej stránky konzultanta umiestnil obrázok v hrdinskej sekcii vľavo a text vpravo. Po testovaní s dvoma kolegami všetci najskôr klikli na obrázok. Vymenil to za centrovanú hrdinskú sekciu s nadpisom navrchu – konverzia sa zlepšila.

Upozornenie: Nerobte wireframe všetkých 20 stránok. Zamerajte sa na šablóny. Akonáhle máte rozloženie domova, interiéru a kontaktu, môžete ich znovu použiť.

Krok 4: Overte pred vývojom

Zdieľajte svoju mapu stránok a wireframe s tromi ľuďmi, ktorí zodpovedajú vašej cieľovej skupine. Opýtajte sa: "Ak by ste pristáli na tejto stránke, kde by ste klikli ako prvý?" Ich odpovede odhalia slepé miesta v navigácii. Opravte ich teraz, nie po spustení.

Odmena: Keď konečne otvoríte svojho tvorcu webu, nebrainstormujete – vykonávate. Každé dizajnové rozhodnutie už má dôvod. Výstavba je rýchlejšia, pretože nepochybujete.

Z plánu na živú stránku za pár minút

S informačnou architektúrou v ruke môže samotná konštrukcia prebehnúť rýchlo. Moderné nástroje bez kódovania vám umožnia premeniť obyčajný text na kompletnú stránku. Popíšete rozloženie domovskej stránky, texty, obrázky a nástroj to vygeneruje – žiadne ťahanie a púšťanie. Tu sa plánovanie naozaj vyplatí: už presne viete, čo potrebujete, takže generovanie trvá minúty namiesto hodín.

Protichodná realita: Spomalenie vás zrýchli

Väčšina rád vám hovorí "len začnite" a iterujte. Ale pre webovú stránku sa táto rada obráti proti vám, pretože každá zmena sa šíri štruktúrou. Stráviť deň plánovaním vám môže ušetriť týždeň prepracovávania. Jedinou výnimkou je, ak staviate jednu vstupnú stránku pre krátkodobú kampaň – potom vsaďte na rýchlosť. Ale pre akúkoľvek stránku, ktorá dlhodobo reprezentuje vašu značku, plánujte najprv.

Záver: Úspech vašej stránky závisí od jej štruktúry

Informačná architektúra nie je glamour, ale je rozdielom medzi stránkou, ktorá konvertuje, a tou, ktorá mätie. Začnite s účelom a personou, zmapujte stránky, načrtnite rozloženia a overte skoro. Potom stavajte s istotou. Čas, ktorý investujete na začiatku, znásobí vašu rýchlosť neskôr. A keď skombinujete pevný plán s nástrojom, ktorý premení text na živú stránku, budete mať profesionálnu stránku naživo za hodiny, nie za víkendy.