Ako vytvoriť prototyp stránok pre vývoj stránky tak, aby výkonní umelci neupravovali

Pokračujeme v písaní o UX / UI. Tentokrát je článok o tom, ako vytvoriť prototypovú stránku, ktorá vám uľahčí život pre vás a pre používateľa.

Prototypovanie stránok premýšľa prostredníctvom obsahu a usporiadania dôležitých prvkov stránky. Ako napríklad:

  • navigácia;
  • kontaktné informácie;
  • Prvky CTA;
  • obsah;
  • loga;
  • heder (hlavička lokality);
  • päta (suterén) a tak ďalej;

Vytvorením prototypu stránky v predstihu môžete zjednodušiť úlohu každého, kto sa podieľa na vytváraní a plnení stránky. To znamená, dizajnéri, textári, programátori, programátori a tak ďalej.

Tento článok je určený pre zákazníkov, ktorí chcú správne zostaviť TOR pre vývoj stránky. Technické nuansy na vývoji prototypu, prečítajte si návod "Ako urobiť prototyp v Axure RP, ak nechápete nič o tom."

Čo je vytvorenie prototypu

Okrem zjednodušenia tvorby stránok pomáha prototypovanie lepšiemu životu používateľov. To znamená pridať niečo užitočné alebo odstrániť niečo zbytočné, aby sa uľahčila navigácia na stránke, nájsť potrebné informácie a vyriešiť problém.

Predpokladajme, že užívateľ chce nájsť odpoveď na otázku. Riadi otázku do vyhľadávača a sleduje odkaz na vaše stránky. Potom očakáva, že uvidí niečo také:

Očakáva, že uvidí niečo také, pretože je zvyknutý, že webové stránky vyzerajú takto. To sa zhoduje s jeho užívateľské skúsenosti.

Užívateľská skúsenosť (UX - User eXperience) je zážitok, ktorý sa nahromadil pred alebo po použití vášho rozhrania. Užívateľ bude hľadať potrebné prvky na základe svojich skúseností.

To znamená, že vieme, aký druh skúseností má používateľ, môže im uľahčiť nájsť riešenie ich problému. Napríklad vlastníci mobilných telefónov sú zvyknutí na to, že menu sa otvorí, keď kliknete na tlačidlo "hamburger" v ľavom hornom rohu. Ak toto tlačidlo nie je prítomné, užívateľ sa môže zmiasť.

Zároveň osoba, ktorá stojí za monitorom počítača, očakáva, že bude môcť vidieť ponuku v hlavičke alebo bočnom paneli (bočný panel). Neočakáva, že sa ponuka otvorí stlačením tlačidla. Naopak, je pre neho nepohodlné, pretože bude musieť urobiť ďalšiu tlač.

To znamená, že ak správny prístup k užívateľom s rôznymi skúsenosťami, môžete im pomôcť vyriešiť ich problémy.

Ale bez ohľadu na to, čo to môže znieť, riešenie úloh užívateľa nie je prioritou vo fáze prototypov. Áno, je dôležité, aby návštevník stránky dokázal vyriešiť svoj problém pohodlne, ale je oveľa dôležitejšie, aby jeho vlastník riešil svoju úlohu.

Pozrime sa na to pomocou webovej stránky TexTerra (opäť). Cieľová skupina stránok je obchodníci a podnikatelia. Je pre nich výhodnejšie, aby sa naučili robiť niečo viac nezávisle a aby sme ich presvedčili, aby si objednali naše služby.

Zvyčajne užívateľ zadá blog z výsledkov vyhľadávania alebo z vyhľadávacích sietí. Klikne na odkaz a prejde priamo na stránku s článkom o téme, ktorá ho zaujíma. Keď dostane správne informácie o tejto téme, s najväčšou pravdepodobnosťou odíde.

Nie je to pre nás rentabilné, pretože poplatky autorov je potrebné vrátiť. Namiesto toho chceme, aby používateľ zostal na stránke čo najdlhšie. Čím dlhšie bude na mieste, tým viac bude mať istotu v našej profesionalite a tým ochotnejšie si objedná nejakú službu od nás. Napríklad si objedná návrh s prihliadnutím na užívateľskú skúsenosť svojich divákov.

Pre oneskorenie na stránke pridáme odkaz, „Čítať aj“ alebo bočné lišty „Mimochodom“, možnosť komentovania, online konzultanta, blok „Čítať aj“ za samotným článkom, ktorý vyberá materiály o záujmoch používateľov a ďalších prvkoch.

To všetko pomáha oddialiť čitateľa, aj keď už našli odpoveď na svoju otázku.

Tu je však potrebné okamžite poznamenať veľmi dôležitý bod - nikoho nútime:

  • Žiadne hovory každý 2 odseky.
  • Žiadne skripty, ktoré neumožňujú opustiť stránku.
  • Nič, čo by užívateľovi nebránilo vyriešiť problém alebo nájsť odpoveď na vlastnú otázku.

Ak urobíte všetko, aby ste vyriešili svoje problémy, potopili sa na úlohy používateľa, dostanete negatívnu reakciu.

Ako vytvoriť prototyp

Najprv môžete mať otázku, čo použiť na vytvorenie prototypu. Odpoveď je veľmi jednoduchá - všetko. Akýkoľvek program, ktorý vám umožní kresliť. Môže to byť Adobe Photoshop, MS Paint, Adobe Illustrator, Gimp a ďalšie. Môžete použiť MS Word alebo Google.Docs.

Profesionáli používajú programy ako Axure, ale môžete to zvládnuť pomocou papierového poznámkového bloku. Rozdiel je v tom, čo vytvárate prototyp. Napríklad dizajnér môže vytvoriť prototyp na kus papiera. Ak to urobí úhľadne, bude možné vytvoriť stránku v rozložení.

Ale textár, ktorý vytvára prototyp pristátia, by to mal urobiť v programe, z ktorého bude možné kopírovať text do zložených prvkov. Vzhľadom k tomu, copywriter používa skutočný text, a dizajnér, s najväčšou pravdepodobnosťou, vloží lorem ipsum.

Potom môžete pokračovať priamo k vytvoreniu rozloženia. Môžete začať od titulnej stránky, ale nezáleží na tom. Najprv sa vyvodia dôležité prvky, potom menej dôležité. Malé veci možno vynechať.

Najprv je potrebné vytvoriť hlavičku stránky. Môže to byť:

  • logo;
  • kontaktné informácie;
  • Tlačidlo CTA;
  • vyhľadávací formulár;
  • tlačidlo spätnej väzby a tak ďalej.

Ďalej prichádza obsahová časť a bočný panel (ak existuje). Bočný panel môže obsahovať:

  • formulár povolenia;
  • odkazy na užitočné materiály alebo sociálne siete;
  • pulty;
  • chat a tak ďalej.

Nedávno sa pri vytváraní webových stránok používajú len bočné lišty. To však neznamená, že už nie sú potrebné - záleží na konkrétnom mieste a jeho účele. Sociálne siete ako VKontakte a Facebook majú stále svoje bočné lišty.

[Webinar recording] Ako prototypovať webové stránky: Základy UX

Obsah časti obsahu, na rozdiel od hlavičky, päty a bočného panela, sa môže na rôznych stránkach značne líšiť. Môžu existovať:

  • kategórie tovaru;
  • Karty tovaru;
  • zoznam materiálov;
  • portfólio;
  • článok;
  • karta;
  • hodnotenia;
  • fotografie a ďalšie.

Niekedy v obsahovej časti môže byť naraz. Napríklad na stránke produktu môžu byť fotografie, recenzie, dodacia karta a súvisiace produkty - to všetko presvedčí osobu, aby si kúpila samotný produkt a jeho príslušenstvo.

Ďalej sa projektuje cieľová jednotka. Môže obsahovať ďalšie tlačidlo alebo formulár CTA.

Posledný vytvoriť prototyp päty (suteréne stránky). Zvyčajne obsahuje dodatočnú navigáciu, podrobnosti, autorské práva, logo atď.

Pre pohodlie môžu byť všetky bloky a prvky rozdelené do 3 typov: informatívne, funkčné a navigačné.

Informatívne prvky dávajú používateľovi odpoveď na otázku. Nezáleží na tom, či sa ho spýtal alebo nie. Napríklad používateľ málokedy položí otázku týkajúcu sa zásad ochrany osobných údajov danej lokality. Ale ak je, úroveň dôvery sa zvýši.

Funkčné prvky pomáhajú vykonávať niektoré úlohy. Napríklad, zaregistrujte sa, prihláste sa na odber newsletteru, objednajte si, obráťte sa na konzultanta a tak ďalej.

Navigačné prvky sú potrebné, aby sa užívateľ mohol presúvať zo stránky na stránku a tiež pochopiť, kde sa nachádza. Môže to byť jednoduché položky menu a všetky ďalšie prvky.

Odporúča sa vždy používať niektoré navigačné prvky. Napríklad nielen položky menu, ale aj čísla stránok alebo tlačidlo „hore“:

Ak sa stránka skladá z jednej stránky (pristátia), potom musí používateľ stále navigovať. Napríklad môžete nasmerovať používateľov pomocou ukazovacích prvkov - šípky, ukazováky, oči a tak ďalej:

Ak je pristátie veľké, potom by bolo pekné ukázať používateľovi presne, kde sa nachádza. Zvlášť často sa táto technika používa pri pristátiach, kde sa rolovanie uskutočňuje priamo cez obrazovky:

Pošlite používateľovi miesto, kde môže vykonať cieľovú akciu: do formulára, tlačidla, kontaktných informácií atď. Ale zároveň musí mať úplnú slobodu. Ako bolo uvedené vyššie, nemali by ste mu zabrániť v tom, čo chce. Aj keď od neho chcete iného.

Všeobecný štýl

Teraz môžete hovoriť o štýle. Malo by byť spoločné pre všetky prvky - farby, tvary a tak ďalej. Nerobte príliš abstraktný dizajn s mnohými trojuholníkmi, elipsy, valce, a tak ďalej. Stačí obmedziť niekoľko tvarov a farieb.

Je žiaduce, aby usporiadanie bolo v poriadku a prvky boli symetrické vo veľkosti a umiestnení. Musia byť tiež uzavreté. To znamená, že ak máte blok, musí byť oplotený zo všetkých strán.

Otvorený prvok vyzerá neúplne, takže človek môže mať pocit neúplnosti. Ak hľadal nejaké informácie na vašej stránke a bol zaznamenaný v takomto bloku, je vysoko pravdepodobné, že používateľ bude pokračovať v hľadaní na iných stránkach.

Rozhranie by malo byť rovnaké všade. Ak osoba prejde na inú stránku webu a bude upravené rozhranie, potom si môže myslieť, že sa dostal na inú stránku.

Platí to však aj pre rozhranie na tej istej stránke - všetky prepojenia, polia, komentáre a ďalšie prvky by mali byť navrhnuté rovnakým spôsobom. To dá pocit integrity a úplnosti.

Použite krátke texty a malé obrázky, aby nedošlo k preťaženiu používateľa informáciami. A ak máte veľa rovnakých typov prvkov, potom musia byť zoskupené do niekoľkých častí (od 3 do 7) a umiestnené v rôznych častiach stránky.

Informácie zo systému a skúsenosti používateľa

Najdôležitejšia vec je posledná. Hlavným pravidlom vytvárania používateľských rozhraní je, že sa užívateľ necíti ako idiot. Musí pochopiť, kde je, čo robí a ako robiť niečo iné.

A musí to pochopiť intuitívne. Vráťme sa k príkladom hamburgerov. Všetci používatelia mobilných zariadení si na toto tlačidlo zvykli a vedia, čo robí. Preto, keď používateľ uvidí niečo podobné, okamžite pochopí, pre čo je tento prvok určený.

To isté platí pre ostatné prvky stránky. Ak používate spoločné zobrazenie, návštevník bude ľahšie navigovať:

  • Po zobrazení ikony lupy osoba pochopí, že pri stlačení sa otvorí pole na zadanie vyhľadávacieho dopytu.
  • Ak sa objaví lupa, keď vznášate nad obrazom, môžete ho zväčšiť.
  • Modrý nápis je vnímaný ako odkaz. Mimochodom, neodporúča sa používať podčiarknutý text.
  • Ak sa prvok zmení, keď vznášate, môžete naň kliknúť. Kurzor by sa mal tiež zmeniť - z "šípky" by sa mal zmeniť na "ukazováček".
  • Kliknutím na ikonu malej vlajky môžete zmeniť jazyk.
  • Tlačidlo „Kúpiť“ znamená, že produkt je možné objednať.

To sú len niektoré z bodov, ktoré možno nájsť v takmer každom rozhraní. Užívateľ si ich pamätá a vidí ich na iných stránkach, cíti sa pohodlne, pretože vie, čo má robiť.

Musíme predpovedať, čo musí urobiť zástupca Strednej Ázie a ako sa bude snažiť vyriešiť svoj problém. Na základe toho môžete vytvoriť rozhranie, ktoré bude pohodlné vo všeobecnosti, ale aj čo najpohodlnejšie pre naše publikum.

Nemali by sme si však myslieť, že osoba sama bude hádať všetko - musí byť informovaný. Všetky dôležité prvky by mali byť viditeľné, nie v pamäti. A to sa týka nielen pozície na stránke, ale aj stavu užívateľa, jeho objednávky a pod.

Je veľmi dôležité napríklad ukázať, v ktorom kroku vyplnenia formulára je zákazník. Mal by byť schopný vrátiť sa ku každému kroku na kontrolu alebo zmenu údajov. A keď dokončí plnenie, musíte mu znovu poskytnúť informácie na overenie a až potom zaplatiť. Ak toto všetko dáte používateľovi, bude pri vypĺňaní formulára pokojnejší a pravdepodobnosť, že zmení myseľ, sa zníži.

Pomocou informácií môžete uzavrieť mnohé námietky. Predstavte si, že si objednáte bundu v internetovom obchode. Akú veľkosť si vybrať? Čo ak nepoznáte svoju váhu, výšku alebo iné rozmery vášho tela? Ak nie ste informovaní, ako si vybrať správnu veľkosť, s najväčšou pravdepodobnosťou pôjdete do pravidelného obchodu, aby ste sa pokúsili na pár sakách a nakúpiť si oblečenie vhodnej veľkosti.

Teraz si predstavte, že stránka má návod, ako určiť veľkosť, ako aj fotografie bundy na ľuďoch s rôznymi tvarmi. Táto inštrukcia je navyše viditeľne zobrazená. Rozhodnutie o kúpe bude jednoduchšie, ale pochybnosti o tom, či ste sa rozhodli správne alebo nie, zostanú.

Tu môžete ponúknuť návrat k bezplatnému vráteniu oblečenia, ak sa veľkosť nezmestí, alebo pridať on-line vybavenie miestnosti. Ak si myslíte, že AstraFit, potom ich widget pomáha znížiť počet výnosov o 48%.

To znamená, že vytvorenie prototypov nielen pomáha zlepšovať interakciu používateľa so stránkou, ale tiež zvyšuje predaj. Pretože niektoré prvky môžu poskytnúť presne informácie, ktoré sú potrebné na uzavretie niektorých námietok.

Súčasne môžu niektoré časti lokality znehodnotiť zážitok používateľa a zabiť konverziu:

  • nedostatok adaptívneho usporiadania;
  • dlhé zaťaženie;
  • malá tlač;
  • horizontálne rolovanie a tak ďalej.

Podrobnejší zoznam užitočných a škodlivých prvkov na stránke nájdete v článku Lily Golikova „Kontrolný zoznam použiteľnosti: 200+ bodov na kontrolu“.

záver

Je dôležité si uvedomiť, čo vytvárate prototyp - na vyriešenie problému používateľa a vlastníka rozhrania. Tento prístup vám pomôže zvýšiť konverziu. Ale na to musíte pochopiť, že rozhodnutie je často úplne nevídané.

Tam sú také veľmi malé detaily, ktoré môžu ukázať celkom bezvýznamné, ale je veľmi dôležité, aby ľudia používali rozhranie pohodlne. Odporúčam prečítať článok Dmitryho Dementia „Čo je UX a UI a prečo neexistujú UX-dizajnéri“, aby sme pochopili, čo UX a UI sú, ako zlepšiť užívateľský zážitok v štádiu rozloženia a oveľa viac.

Tiež by som vám poradil, aby ste vždy rozmýšľali o tom, ako by pre vás bolo jednoduchšie niečo urobiť, aké otázky sa zvyčajne pýtate, keď idete na webovú stránku. Ale predovšetkým by ste sa mali zaujímať o to, ako sa cieľová skupina správa a čo chce.

A bez obáv byť inovátormi! Príďte s jedinečnými prvkami, ktoré pomôžu zlepšiť zážitok používateľa. Pridajte nové miniaplikácie, ale nezabudnite informovať návštevníkov o tom, ako ich používať. Môže to byť čokoľvek:

  • návrhárske gitary;
  • návrhár pizze;
  • logistický tetris;
  • inštrukcie na montáž nábytku s rozšírenou realitou;
  • sprievodca pre česanie blchy vo VR;
  • genealogická online kalkulačka;
  • Simulátor "100 + spôsoby, ako letieť do priekopy" na webových stránkach poisťovne.

A na prvý pohľad to vyzerá len hlúpo, ale aj z takýchto myšlienok môžete získať pozitívny výsledok.

Zanechajte Svoj Komentár