Ako zadať UX a UI dizajn webu alebo appky: čo pripraviť a čo chcieť od dizajnéra
Dávid WilmanUX/UI dizajn zadanie krok za krokom: šesť vecí na prípravu, päť výstupov od dizajnéra, tabuľka fáz, schvaľovanie v kolách a časté chyby, napríklad zadanie „nech je to moderné“.
- Pred oslovením dizajnéra si pripravte cieľ webu alebo appky, opis zákazníka, ponuku, pár odkazov na konkurenciu, obsah s príkladmi a zoznam toho, čo sa vám páči a nepáči.
- Dizajnér odovzdá wireframe (kostru stránok), prototyp (klikateľný model), vizuálny návrh, dizajnový systém a podklady pre vývoj a vy v každej fáze dodáte podklady alebo pripomienky v dohodnutých kolách.
- Rozhoduje jedna osoba, zadanie sa počas dizajnu nemení a zadanie typu „nech je to moderné“ nestačí; cena závisí od rozsahu a ponuku pošleme do 48 hodín.
Zadanie UX/UI dizajnu je dokument na jednu až dve strany, v ktorom dizajnérovi poviete, načo je web alebo appka, pre koho je a podľa čoho poznáte, že sa podarila. UX (používateľská skúsenosť) rieši, ako sa produkt používa, UI (používateľské rozhranie) rieši, ako vyzerá: tlačidlá, farby, písmo. Dobré zadanie zvyčajne znižuje počet opráv, nejasné ich množí. Technické znalosti nepotrebujete, stačí pripraviť šesť vecí a vedieť, čo má dizajnér na konci odovzdať.
UX/UI dizajn: zadanie v šiestich bodoch
Takému dokumentu sa hovorí brief (krátke zadanie o tom, čo chcete, pre koho a do kedy). Pri celom novom webe ho rozšírite podľa myšlienkovej mapy Brief na nový web, pri dizajne stačí týchto šesť bodov. Ako zadanie napísať, aby ste dostali presnú ponuku, opisuje aj článok Ako napísať zadanie pre agentúru.
- Cieľ: čo má web alebo appka priniesť, jednou vetou a ak sa dá, aj číslom. Príklad: kaderníctvo chce, aby si ľudia termín rezervovali cez mobil, nie telefonátom.
- Zákazník: kto web používa, čo hľadá, čoho sa obáva a na čom ho otvára (telefón, počítač). Stačia dve až tri vety o typickom zákazníkovi, nie opis celého trhu. Ak nemáte údaje, opýtajte sa troch stálych zákazníkov, prečo si vás vybrali a čo hľadali.
- Ponuka: čo predávate, čo je hlavné a čo vedľajšie, čím sa líšite. Podľa toho dizajnér rozhodne, čo bude na úvode. Príklad: e-shop s oblečením má tri hlavné kategórie a doprava zdarma nad určitú sumu je jeho silná stránka.
- Konkurencia na pár odkazov: 3 až 5 odkazov na weby alebo appky (aj z iných odborov), ku každému jedna veta, čo sa vám páči alebo nepáči. Dvadsať odkazov nepomôže a cieľom nie je kopírovať.
- Obsah a príklady: texty aspoň v bodoch, fotky, logo, cenník a zoznam stránok. Pri appke 3 až 5 najdôležitejších úloh používateľa, napríklad „objednať sa k lekárovi“. Dizajn s vymyslenými textami potom často nesedí.
- Čo sa vám páči a nepáči: farby, pocit, písmo a tiež to, čo nechcete. Namiesto slova „moderné“ opíšte pocit: pokojné, remeselné, hravé, vážne.
Všetkých šesť bodov nájdete na jednej stránke v myšlienkovej mape Ako zadať UX a UI dizajn.
Príklad zadania na pol strany
Takto môže vyzerať zadanie kaderníctva v menšom meste. Cieľ: viac rezervácií cez mobil a menej telefonátov počas strihania. Zákazník: ženy aj muži od 20 do 55 rokov, hľadajú termín večer alebo cez víkend a web otvárajú na telefóne. Ponuka: strih, farbenie, svadobné účesy, ceny z cenníka. Konkurencia: tri weby, ktoré sa páčia pre prehľadný cenník a rezerváciu na dve ťuknutia. Obsah: fotky tímu a prác, cenník, otváracie hodiny. Páči sa a nepáči: pokojné svetlé farby, žiadne bannery s akciami. Dizajnér z toho vie začať a zvyšok sa dopýta.
Chcete to mať hotové bez starostí? Pošlite nám pár viet o zadaní a cenovú ponuku dostanete do 48 hodín, zadarmo a bez záväzkov.
Čo dizajnér odovzdá
Dizajnér neodovzdáva jeden obrázok, ale päť vecí a každá slúži inému účelu.
- Wireframe: čiernobiela kostra stránky alebo obrazovky, ktorá ukazuje, čo kde stojí, bez farieb a fotiek.
- Prototyp: klikateľný model, v ktorom si vyskúšate prechody medzi obrazovkami, ako keby bol hotový.
- Vizuálny návrh: konečný vzhľad s farbami, písmom a fotkami, tak, ako bude web alebo appka vyzerať.
- Dizajnový systém: zbierka pravidiel a hotových dielov (tlačidlá, nadpisy, farby), ktorá drží vzhľad jednotný aj pri nových stránkach.
- Podklady pre vývoj: exporty, rozmery, farby a popis správania prvkov, aby ich programátor postavil presne.
Návrhy zvyčajne vznikajú vo Figme (nástroj na návrh rozhraní, ktorý beží v prehliadači, takže návrh otvoríte odkazom a môžete pridať komentár). Z našej praxe: appka Renna má dizajnový systém s písmom DM Sans, limetkovým akcentom, zaoblenými kartami (polomer 24 px), tlačidlami v tvare pilulky a farbami cez tokeny (pomenované hodnoty, ktoré sa menia na jednom mieste) namiesto pevných hodnôt, v tmavom aj svetlom režime. Nová obrazovka potom nadviaže na ostatné bez ručného ladenia.
Pri odovzdaní si vypýtajte návrhy ako odkaz aj ako exporty, zoznam písem a farieb a prístup k súboru, aby ste návrh mohli neskôr dať ďalšiemu dizajnérovi. Dohodnite to vopred v ponuke.
Kedy stačí menej a kedy sa oplatí dizajnér
Pri jednoduchom webe s niekoľkými podstránkami nepotrebujete prototyp ani dizajnový systém: stačí wireframe a vizuálny návrh, často len pre úvod a pár typov stránok, ostatné sa z nich odvodia. V najjednoduchšom prípade zvládne malú firmu aj upravená šablóna bez samostatného dizajnu. Prototyp a overenie na ľuďoch sa oplatia pri appke alebo pri postupe, kde sa dá stratiť: rezervácia, objednávka, klientska zóna. Test s cca 5 ľuďmi z cieľovej skupiny odhalí väčšinu najčastejších problémov. Dizajnový systém sa oplatí, keď bude obrazoviek veľa alebo na produkte bude pracovať viac ľudí.
Fázy dizajnu: čo sa deje a čo robíte vy
| Fáza | Čo sa deje | Čo robíte vy |
|---|---|---|
| 1. Zadanie a ciele | Dizajnér sa pýta na cieľ, zákazníka, ponuku a termín a prejde vaše odkazy. | Pošlete zadanie, odpoviete na otázky a určíte, kto rozhoduje. |
| 2. Štruktúra | Z podkladov vznikne zoznam stránok alebo obrazoviek a ich poradie. | Skontrolujete, či nič nechýba a nič nie je navyše. |
| 3. Wireframe | Kostra kľúčových stránok bez farieb a fotiek. | Prejdete cestu zákazníka od úvodu po objednávku a pošlete jeden zoznam pripomienok. |
| 4. Prototyp a overenie | Klikateľný model, ktorý dizajnér ukáže niekoľkým ľuďom z cieľovej skupiny. | Pomôžete nájsť vhodných ľudí a rozhodnete o zmenách. |
| 5. Vizuálny návrh | Farby, písmo, fotky a konečný vzhľad, popri tom vzniká dizajnový systém. | Posúdite, či to sedí k značke a zákazníkovi, v dohodnutých kolách. |
| 6. Podklady pre vývoj | Príprava podkladov a odovzdanie, dizajnér odpovedá na otázky programátora. | Dodáte konečné texty a fotky a schválite odovzdanie. |
Fázy sa dajú zlúčiť. Pri malom webe sa štruktúra a wireframe robia naraz a overenie môže byť neformálne, napríklad ukážkou návrhu trom známym zákazníkom. Pri appke s rezerváciou alebo objednávkou fázy nezlučujte, chyby sa tam draho opravujú.
Ako schvaľovať, aby sa dizajn nevliekol
Schvaľovanie je miesto, kde sa čas stráca najľahšie. Pomáha niekoľko jednoduchých pravidiel.
- Dohodnite kolá vopred: napríklad dve kolá pripomienok na každú fázu. Viac kôl býva znakom, že zadanie nebolo jasné.
- Jedna osoba rozhoduje: ostatní dávajú vstupy, konečné slovo má jeden človek, zvyčajne majiteľ.
- Jeden zoznam namiesto správ po kúskoch: pripomienky zbierajte na jednom mieste a odošlite naraz, nie cez telefonát, e-mail a správy.
- Opíšte problém, nie riešenie: „Tlačidlo na rezerváciu si nevšimnem“ pomôže dizajnérovi viac než „Daj ho do zelena“.
- Schvaľujte po fázach: keď je schválený wireframe, k nemu sa už nevraciate pri ladení farieb.
- Porovnávajte s cieľom: pýtajte sa, či to pomôže zákazníkovi, nie len či sa vám to páči.
Časté chyby pri zadaní UX a UI dizajnu
Väčšina zdržaní nevzniká v dizajne, ale v zadaní a v schvaľovaní. Najčastejšie sú tieto.
- Zadanie „nech je to moderné“. Každý tým myslí niečo iné. Dajte 3 až 5 príkladov, ku každému veta, čo sa vám na ňom páči, a pár slov, ktorými má web pôsobiť.
- Schvaľovanie vo viacerých ľuďoch. Každý má iný vkus a kolá sa nikdy neskončia. Určte jedného rozhodcu a ostatných dajte do fázy pripomienok.
- Meniť zadanie počas dizajnu. Zmena cieľa po wireframe znamená prácu odznova. Ak sa zmení ponuka alebo cieľ, povedzte to hneď a dohodnite zmenu rozsahu.
- Dizajn bez obsahu. Ak dostane dizajnér vymyslené texty a fotky, hotový návrh na konečný obsah nesedí. Pošlite aspoň body textov a príklady fotiek.
- Preskočiť wireframe. Pri farbách a písme sa debata vedie o vkuse. Pri wireframe sa vedie o tom, čo je na stránke dôležité, a to je lacnejšie opraviť na začiatku.
Orientačný postup a čo to stojí
Postup vyzerá takto: pošlete zadanie, do 48 hodín dostanete ponuku s rozsahom, po schválení sa začne prvá fáza a ďalej sa postupuje podľa tabuľky vyššie. Cena závisí od rozsahu: počtu obrazoviek, zložitosti, od toho, či sa upravuje existujúci dizajn, a od počtu kôl pripomienok. Ceny webov a ďalších služieb nájdete v cenníku. Dĺžka závisí od rozsahu a od toho, ako rýchlo dodáte podklady a pripomienky; najčastejšie zdržiava príprava textov a fotiek a čakanie na schválenie. Weby a aplikácie robíme v službe Web a aplikácie.
Čo urobiť ako prvé
Vyhraďte si hodinu a odpovedzte na šesť bodov, aj stručne. Určte jednu osobu, ktorá bude rozhodovať. Pozbierajte 3 až 5 odkazov s jednou vetou ku každému a pošlite zadanie dizajnérovi. Chýbajúce otázky vám pomôže doplniť on.
Časté otázky
Aký je rozdiel medzi wireframom a prototypom?
Wireframe je statická kostra stránok, ktorá ukazuje rozloženie. Prototyp je klikateľný model, v ktorom si vyskúšate, ako sa medzi obrazovkami prechádza.
Musím mať hotové texty a fotky pred dizajnom?
Nemusíte mať všetko, ale aspoň body textov a príklady fotiek. Dizajn s vymyslenými textami často nesedí na konečný obsah a opravy potom stoja čas.
Koľko kôl pripomienok je primeraných?
Počet sa dohaduje vopred, bežne dve kolá na fázu. Ak ich potrebujete viac, často je za tým nejasné zadanie alebo viac rozhodcov.
Musím vedieť presne, čo chcem?
Nie. Stačí cieľ, opis zákazníka a príklady, čo sa vám páči a nepáči. Zvyšok sa doladí v krátkom rozhovore na začiatku.
Pošlite nám zadanie, aj hrubé
Zadanie môže byť v bodoch, chýbajúce otázky doplníme spolu. Cena závisí od rozsahu, ponuku pošleme do 48 hodín cez kontaktný formulár.
✓ od 690 €✓ Štart do pár dní
Weby,ktoré predávajú Weby a e-shopy, rýchle aj na mobile. Tvorba web stránok →
Chcete to isté pre svoju značku?
Napíšte nám pár viet o zámere a do pár hodín v pracovný deň sa ozveme s návrhom postupu.Viac o službe: tvorba web stránok a e-shopov, balíky od 690 €.
Neviete, čo vášmu webu alebo profilu chýba?
