Ako uspieť v dizajnovaní wireframov

V tomto článku sa pozrieme hlbšie na jednu z najjednoduchších, ale dosť často podceňovaných aktivít vo vývoji webu: návrh wireframov. Dozviete sa, čo je to wireframe, prečo je veľmi užitočného navrhovať, ako z návrhov vyťažiť maximum a ako ich posunúť na vyššiu úroveň.

Väčšinou máme tendenciu podceňovať veci, ktoré sú nám známe. Je tiež veľmi pravdepodobné, že podceníme aj nové veci, ktoré sa na prvý pohľad zdajú jednoduché. A to je do istej miery správne. Keď však čelíme zložitým problémom a prijmeme všetky opatrenia, správne a dôkladné pochopenie základných konceptov by nám mohlo pomôcť nájsť správne riešenie.

Podľa reportu spoločnosti CB Insights s názvom Top 20 Reasons Startups Fail, 17% startupov uviedlo nedostatok používateľskej prívetivosti ako dôvod svojho neúspechu. Navrhnúť užívateľsky prívetivé rozhranie nie je triviálna úloha, najmä pre veľké a zložité webové stránky, kde je potrebné vytvoriť správnu hierarchiu a usporiadať rôzne, na sebe závislé prvky. Pri navrhovaní takýchto zložitých projektov by ste sa mali riadiť prístupom zhora nadol a návrh wireframe je najlepšou technikou, ktorá vám s tým môže pomôcť.

Poprvé, definujme si pojmy

Wireframe - je tiež známy ako schematický návrh stránky alebo mapa obrazovky. Ide o vizuálneho sprievodcu, ktorý predstavuje kostrový rámec webu alebo aplikácie.

Ďalšou definíciou, na ktorú sa pozrieme, je wireframing - proces navrhovania wireframu, ktorý sa bežne používa na rozloženie obsahu a funkcií na webovej stránke a zohľadňuje potreby používateľov a cestu používateľov na webe. Wireframy sa používajú na začiatku vývojového procesu na vytvorenie základnej štruktúry stránky pred pridaním vizuálneho dizajnu a obsahu.

Na prvý pohľad sa zdá, že wireframing je jednoduchý. A tu spočíva hlavný problém: že nemáme tendenciu venovať dostatočnú pozornosť jednoduchým veciam. Jedným zo spôsobov, ako môžeme vďaka wireframingu získať čo najviac výhod, je definovať ciele produktu alebo služby.

Hlavným cieľom wireframingu je ukázať tímu a zúčastneným stranám, aké objekty, stránky a komponenty bude mať web alebo aplikácia a ako budú tieto prvky digitálneho produktu vzájomne pôsobiť.

Z definície cieľa vidíme, aký veľký vplyv má wireframing na vývojový proces, aj na konečný produkt.

Keď pamätáme na ciele wireframingu, stále musíme venovať pozornosť tomu, aké sú bežné úskalia, ktorým sa treba pri navrhovaní wireframe vyhnúť.

Chyby pri wireframingu, ktorým sa chceme vyhnúť

• Vytváranie wireframov len z povinnosti;
• Celkové preskočenie wireframe fázy;
• Príprava wireframov až po vizuálnych návrhoch
• Neporozumenie toho, prečo používame wireframy.

Wireframy by mali predchádzať fáze vizuálneho dizajnu, nie naopak. Je to ako rozhodovať sa o technologickom balíčku pre vašu aplikáciu až po napísaní kódu.

Wireframe predstavuje základ pre kvalitu návrhu. Čím lepšie pochopíme cieľ tejto fázy, tým viac výhod nám prinesie. Poďme sa teda tomu venovať hlbšie zistiť, prečo potrebujeme navrhnúť wireframy a aké hodnoty táto technika prináša.

Firmy, ktoré nemajú dostatočné znalosti o dizajne webu, môžu uvítať postup preskočenia návrhu wireframov, pretože im to umožňuje znížiť náklady na projekt, ale toto rozhodnutie môže z dlhodobého hľadiska viesť k možnému zlyhaniu. A my ako dizajnéri vám chceme  vysvetliť, prečo to robíme, ako to pomôže konečnému produktu a ako by to mohlo dokonca ušetriť budúce výdavky.

Ďalej sa pozrieme na niektoré body, ktoré vám môžu pomôcť lepšie pochopiť, prečo potrebujeme wireframy a uvidíte, ako wireframy pomôžu získať spätnú väzbu od vývojárov, klientov a budúcich používateľov vášho produktu, či už je vo veci tvorba firemného webu alebo tvorba eshopu.

Prečo by ste mali navrhovať wireframy

Pomôžte svojmu tímu odhadnúť a spresniť rozsah práce

Wireframy umožňujú dizajnérom rýchlo vytvoriť vizuálne znázornenie budúceho produktu a demonštrovať ho tímu alebo klientovi pri potrebných revíziách. Wireframy tiež pomôžu ukázať, ako bude vyzerať váš projekt na pohľad, ktoré elementy a ovládacie prvky budú na každej obrazovke a ako budú všetky prvky navzájom interagovať. Prezeranie wireframov je navyše oveľa rýchlejšie, ako čítanie špecifikácií. Pomáha nám tiež sa vyhnúť nezrovnalostiam v rozsahu medzi počiatočnými a konečnými odhadmi.

Zapojte všetkých členov tímu do fázy návrhu produktu

Každý dizajnér sa ocitol v pozícií, kedy vytvoril špičkový dizajn, avšak následne sa pri vývoji stretol s rôznymi obmedzeniami. Použitie wireframov nám umožňuje zapojiť vývojárov a klientov do diskusie o dizajne v počiatočných fázach projektu, čo im umožňuje poskytnúť spätnú väzbu a navrhnúť zmeny skôr, než sa začne pracovať na vizuálnom (finálnom) dizajne. Týmto spôsobom môžete urýchliť proces návrhu a zabrániť plytvaniu časom a peniazmi.

Fázy životného cyklu návrhu a vývoja softvéru, v ktorých môžu byť wireframy použité v tej či onej podobe.

Usporiadajte ukážku pre klientov

Dôležitou súčasťou procesu navrhovania je získanie rýchlej spätnej väzby od vašich klientov a zainteresovaných strán. Každý dizajnér tiež zažil viacnásobné žiadosti o zmenu od zainteresovaných strán, a to je normálne. Pomocou wireframov je možné tento proces zefektívniť. Vykonávanie zmien v prototypoch či dokonca už v nakreslenom webovom dizajne si vyžaduje viac času a úsilia ako zmeny vo wireframoch. Umožňuje to držať krok a nestrácať čas na prepracovanie.

Vykonajte používateľské testovanie

Podľa Erica Riesa, autora Lean Startup, čím skôr vykonáte používateľské testovanie, tým lepšie - nikto nechce spustiť projekt a zistiť, že používatelia nedostanú návod, ako ho správne používať. Wireframy môžu pomôcť dizajnérom získať cennú spätnú väzbu od potenciálnych používateľov a netráviť čas vývojom zložitých interaktívnych prototypov v prípade, že vôbec nie sú potrebné.

To, že dizajnéri UI/UX používajú wireframy, ešte nemusí znamenať, že to robia správne. Preto by ste si mali pamätať a dodržiavať najlepšie postupy.

Najlepšie postupy týkajúce sa wireframingu

Ak chcete dosiahnuť čo najlepšie výsledky a poskytnúť pevný základ pre ďalšie používateľské rozhranie, musíte postupovať podľa niekoľkých jednoduchých pravidiel:

1. Minimalizujte použitie farieb vo wireframoch

Ak vo svojich wireframoch používate bohaté palety farieb, pripomeňte si cieľ wireframingu (aby ste ukázali, ktoré prvky produkt bude obsahovať a ako by mali vzájomne interagovať) a zamyslite sa, či vám tento cieľ pomôže dosiahnuť zaradenie ďalších farieb.

Minimalizujte použitie farieb vo wireframoch. Tým sa budeme ešte zaoberať viac do hĺbky.

V niektorých prípadoch by mohli. Všeobecne však platí, že pridanie farieb do vašich wireframov by mohlo odvrátiť pozornosť diváka a určite by skomplikovalo každú aktualizáciu. Okrem toho je potrebné vziať do úvahy ešte jednu dôležitú otázku - nie všetci klienti dobre rozumejú technikám UX a farebné wireframe modely môžu brať ako konečné návrhy.

Ukážka správneho použitia farieb vo wireframoch

To však neznamená, že by ste nikdy nemali používať farbu na wireframoch a striktne sa držať čiernej a bielej palety. Niekedy je použitie farby na zvýraznenie konkrétnych komponentov oprávnené. Môžete napríklad použiť červenú pre chybové stavy alebo modrú pre poznámky atď.

2. Používajte jednoduché dizajnové komponenty

Keď do "drôtových rámov" (doslovný preklad wireframov) pridáte komponenty, sústreďte sa na základné vzory. Wireframy nemajú obsahovať dôkladne navrhnuté a podrobné komponenty. Namiesto toho by mali byť ľahko rozpoznateľné členmi vášho tímu a zainteresovanými stranami. Pridanie podrobných komponentov vás bude stáť veľa času a úsilia, bez toho, aby boli obzvlášť užitočné.

Použite jednoduchý dizajnový komponent, aby bol jeho funkčný účel každému jasný.

3. Udržiavajte jednotnosť

Podobné komponenty musia vyzerať rovnako na všetkých vašich wireframoch. Ak rovnaké komponenty vyzerajú inak, je pravdepodobné, že vývojári či klienti pochybujú, či sú skutočne rovnaké, a dokonca kvôli odhadom im to zaberie ďalší čas navyše. Pri práci na wireframoch nezabudnite na jednoduché pravidlo: buďte dôslední a snažte sa, aby ste nevytvorili zmätok.

Udržiavajte konzistenciu medzi podobnými komponentami a nepoužívajte rovnaký vzhľad pre rôzne komponenty.

4. Používajte skutočný obsah

Z času na čas máme možnosť vidieť, že dizajnéri UI/UX nepridávajú skutočný obsah do wireframov a namiesto toho používajú lorem ipsum. To je častá chyba, ktorú si len málo dizajnérov uvedomuje. Môžete namietať a povedať, že obsah nie je k dispozícii vo fáze návrhu. Stačí použiť konceptovú verziu obsahu.

Namiesto lorem ipsum použite skutočný obsah. 

Obsah ovplyvňuje dizajn, ktorý vytvoríte, a koncept obsahu vám pomôže urobiť správne rozhodnutia a dodať vynikajúci dizajn. Ak však používate lorem ipsum, neuvidíte úplný obraz a pravdepodobne budete musieť vykonať veľa úprav používateľského rozhrania alebo ešte horšie - vytvoríte dizajn, ktorý nefunguje. Skutočný obsah tiež zvýši hodnotu vašich wireframov, lepšie vysvetlí kontext a možno naznačí, že je čas začať zhromažďovať skutočný obsah.

5. Používajte anotácie

Môže sa stať, že niektoré dizajnové riešenia nemožno vizuálne ilustrovať, takže zainteresované strany alebo vývojári v nich nemusia mať úplne jasno. Napríklad logika niektorých ovládacích prvkov. V takýchto prípadoch môžete na obrazovke poskytnúť anotácie, ktoré vysvetlia logiku, ktorá za tým stojí. Takto váš tím a klienti pochopia vaše riešenia a nebudete musieť tráviť čas ich diskutovaním.

Pomocou anotácií popíšte konkrétnu logiku. 

6. Od najnižšej po najvyššiu

Neexistuje jedno prísne pravidlo. Niekedy by ste mali ísť po wireframoch s low-fidelity (nízkou vernosťou), zatiaľ čo niektoré projekty môžu vyžadovať high-fidelity. Závisí to od projektu, takže ak máte záujem o pridanie ďalších podrobností k wireframom - neváhajte tak urobiť. Podľa Erica Riesa však nerobte prácu navyše, ak to neprináša hodnotu. Začnite od základov a potom pridajte podrobnosti, pokiaľ sú potrebné. Ak napríklad potrebujete vývojárov upozorniť na nejaké vlastné riešenie, pridajte ďalšie podrobnosti, ktoré ho ilustrujú vo vašich wireframoch.

Low aj high-fidelity wireframy majú svoje miesto. 

7. Rozšírte wireframy na prototypy

Ako dizajnéri pracujeme s rôznymi produktmi. Niektoré z nich majú jednoduché a bežné interakcie a niektoré majú dosť pokročilé. Wireframy niekedy nestačia na ilustráciu interakcie zložitých a neobvyklých rozhraní, ale namiesto toho, aby ste písali dlhé poznámky a trávili hodiny vysvetľovaním, môžete svoje wireframy rozšíriť o interaktívne prototypy.

Vývoj interaktívneho prototypu je dnes jednoduchší ako kedykoľvek predtým. 

Dobrá správa je, že dnes máme širokú škálu jednoduchých, ale veľmi výkonných nástrojov, ako sú Figma, Invision, Adobe XD, UXPin, Axure, Moqups atď. Jednoznačne ich potrebujeme preskúmať a zvoliť najlepší nástroj na navrhovanie wireframov a vývoj jednoduchých prototypov.

Nástroje na návrh wireframe

Teraz je čas zvoliť si ten najlepší nástroj na vytváranie wireframov, ktorý vám pomôže vytvoriť úžasné vzory a zjednodušiť vašu prácu. Existuje veľa rôznych možností, ktoré môžete použiť na wireframing a niektoré z nich ste už mohli niekedy použili. Radi by sme vám v základe vysvetlili, v čom sa odlišujú.

Väčšina wireframes sú navrhnuté na:

• Jednoduchosť
  Sú jednoduché na používanie a sú ideálne pre ľudí, ktorí s UI/UX dizajnom začínajú a nemajú skúsenosti s používaním sofistikovanejšieho softvéru.
• Spoluprácu
  Sú nabité bohatou funkčnosťou pre tímovú prácu. Spolupráca je alfa-omegou moderného vývoja softvéru, takže najlepšie nástroje pre wireframing poskytujú nielen veľa funkcií, ale umožňujú efektívnu a ľahkú spoluprácu medzi všetkými členmi tímu zapojenými do procesu návrhu.

Tu sú najbežnejšie používané wireframe nástroje ušité na mieru pre spoluprácu:

• Figma
  Výkonný cloudový nástroj, ktorý sa dodáva vo webovej verzii a v desktopových aplikáciách pre Windows a macOS. Spoločnosť Figma prichádza s mnohými výkonnými funkciami na vytváranie wireframov, prototypov, používateľských rozhraní a ďalšími funkcionalitami (pozri tabuľku nižšie).
• Sketch
  Tento nástroj je medzi návrhármi UI/UX tiež populárny. Ak potrebujete ísť nad rámec predvolenej sady nástrojov v Sketch aplikácii, môžete použiť ďalšie desiatky doplnkov. Na rozdiel od mnohých konkurentov je Sketch k dispozícii iba v systéme macOS a na spoluprácu budete potrebovať riešenie tretej strany.

Existuje veľa aplikácií, ktoré môžete použiť na návrh wireframov. Nemali by ste si vyberať iba na základe funkcií poskytovaných v aplikácii. Namiesto toho by sme vám poradili, aby ste ich všetky vyskúšali a rozhodli sa, ktoré vám vyhovujú najlepšie.

Prípadová štúdia: Ako sme nastavili proces wireframingu vo viacerých tímoch

Kontext

Spoločnosť, v pre ktorú sme pracovali, budovala komplexné digitálne produkty z oblasti fintech. Okrem dizajnérskeho tímu bol k dispozícií profesionálny tím obchodných analytikov (OA). Pripravili požiadavky a vytvorili low-fidelity wireframy, ktoré odovzdali nášmu dizajnérskemu tímu.

Výber nástroja

Potrebovali sme zvoliť nástroj typu všetko v jednom pre tímy obchodných analytikov a dizajnérske tímy. Nakoľko väčšina obchodných analytikov má dosť nízke dizajnérske schopnosti, hľadali sme nástroj, ktorý by bol pre OA jednoduchý a zároveň dostatočne výkonný pre návrhárov. Prioritou nášho tímu bola tiež ľahká spolupráca. Na základe týchto kritérií sme sa rozhodli pre Figmu.

Vytváranie knižnice komponentov

Na zefektívnenie procesu návrhu produktu sme vytvorili vlastnú knižnicu komponentov, ktoré mohol tím OA používať. To nám umožnilo urýchliť wireframing, pretože obchodní analytici mohli rýchlo použiť hotové bloky namiesto toho, aby kreslili svoje vlastné.

Školenie tímu

Aby sme ukázali, ako používať Figmu a knižnicu komponentov, usporiadali sme workshop pre náš tím OA. Tiež sme považovali za dôležité naučiť ich niektoré ďalšie funkcie, napríklad prototypy.

Schéma vzťahov medzi tímami v procese návrhu wireframingu. (ilustračný obrázok kvôli NDA)

Výsledok

V našom prípade sa ukázalo, že Figma je efektívna pre wireframing a spoluprácu, aj keď členovia tímu pracovali o niektorých prípadoch remote. V súčasnosti nepoužívame ako komunikačný kanál program Figma - ukázalo sa ako pohodlnejšie spolupracovať na wireframoch prostredníctvom emailov či Trella, Notionu, Miro a pod.

Zhrnutie

Aj keď je to prakticky jednoduché, návrhom wireframov zvyčajne nedávame my dizajnéri dostatočnú dôležitosť.

Výsledkom je, že nedostatočná pozornosť venovaná tejto technike vedie k mnohým chybám, keď buď pridáme veľa dekorácií do wireframov, alebo vytvoríme low-fi wireframy, ktoré vedú k značným nedostatkom v prípade, keď si projekt vyžaduje podrobnejšie riešenie, alebo dokonca túto fázu preskočíme a ideme priamo k vizuálnemu dizajnu používateľského rozhrania. Takéto chyby si profesionálny firemný web či moderný eshop na mieru či portál na mieru nemôže dovoliť.

Všetky tieto chyby sú zvyčajne výsledkom nesprávneho pochopenia oboch cieľov návrhu wireframov (to znamená, ktoré prvky produkt bude mať a ako by mali vzájomne interagovať), ako aj zlého pochopenia toho, kedy by mohli nám mohli wireframy skutočne pomôcť. Napríklad:

• Wireframy by mohli tímu pomôcť získať presnejšie odhady projektu.
• Wireframy by mohli pomôcť zapojiť všetkých členov tímu do dizajnovania procesov a vyhnúť sa technickým chybám, ktoré ovplyvnia proces vývoja. 
• Wireframy by nám mohli pomôcť urobiť včasné prezentácie pre klientov, zainteresované strany a viesť relácie testovania používateľov tak, aby sme čo najskôr dostali spätnú väzbu a ušetrili čas na vývoji zlých riešení.

Dnes máme my dizajnéri šťastie, pretože máme k dispozícii desiatky nástrojov na navrhovanie wireframov a tiež na hladkú integráciu tejto činnosti do nášho všeobecného procesu navrhovania.

O tom, ako pracujeme si prečítajte na tomto linku. Nájdete tam aj praktickú ukážku wireframov.

Jediná vec, ktorú musíme urobiť, je stráviť nejaký čas začlenením oboch - techniky aj nástrojov - do nášho vlastného procesu návrhu a nájsť spôsob, ako ich využiť, aby sme posunuli náš proces návrhu produktu na vyššiu úroveň. To je určite funkcia, ktorou disponujú.