IceBear

Creative Igloo

← Späť na úvodnú stránku

(Agilný) pohľad na UI/UX dizajn ako súčasť veľkého produktu alebo korporátneho fungovania

Čo nám dovoľuje agilne pristupovať k dizajnu v rámci veľkého produktu alebo korporácie je fakt, že sa presúvame cez niekoľko fáz. Rovnako ako pri SCRUM-e alebo inom agilnom frameworku, rozdeľujeme si prácu na dizajne do epicov a stories.

Poďme ale pekne po poriadku. V správnom agilnom prostredí by sme mali začať analýzou nášho problému/novej funkcionality, každý si to nazvite ako chcete.

Analytický sprint

Takisto je to aj v našom prípade pre UI/UX dizajn: začíname sprintom, na ktorom pracuje prevažne analytik a ideálne niekto z dizajn tímu - hovoríme o UX-ákovi, ak takého máme k dispozícii.

Analytický sprint, resp. akékoľvek sprinty, ktoré zahŕňajú aj dizajnovú fázu, by podľa mňa mali začínať aspoň o jeden sprint skôr ako samotný vývoj. Či sa to podarí záleží od toho v akej sme fáze: ak v neskoršej fáze projektu a vývojári majú čo robiť, alebo projekt len začína, v takom prípade sme popredu kľudne aj 2-3 sprinty.

Späť k nášmu analytickému sprintu, ktorý sa zaoberá zozbieraním požiadaviek a ich analýzou, z čoho by mal vzniknúť dokument, ktorý vieme posunúť ďalej.

Prečo by sa tohto procesu mal zúčastňovať UX-ák? Aby poskytol iný pohľad na problematiku, vyjadril nové názory a možnosti riešenia, ktoré by sa možno nedostali do pozornosti a analýze by tak mohli chýbať dôležité body, ku ktorým by sme sa neskôr museli pracne vracať.

Prečo by v tejto fáze nemal byť developer? Zastávam názor, že developer by sa mal podieľať na samotnom technikom riešení a hľadať spôsoby ako vyhovieť požiadavkám a nie ovplyvňovať túto fázu technickými obmedzeniami. Nehovorím však, že by sme s takýmto človekom nemali konzultovať, predsa len viac hláv, viac rozumu.

Dokument, ktorý vzíde z tejto fázy sprintu, by mal obsahovať všetky potrebné informácie na vytvorenie wireframes a to:

  • funkčnú analýzu,
  • UML model
  • a identifikovaných používateľov (role).

Wireframes

Tvorba wireframes je teda nový, samostatný sprint. Wireframes by mali byť navrhnuté tak, aby pokrývali celú story, celý príbeh, celý screen flow pre daný scenár, ideálne aj s happy path, ale aj s tými horšími cestičkami.

Ukážka wireframe-u

Táto časť je veľmi dobrým cvičením, ktoré preverí kvalitu vykonanej analýzy a dovolí nám rozvinúť diskusiu na vyššej úrovni, nakoľko sa vizuálne máme skôr čoho chytiť a môžeme tak do diskusií zapojiť širšie spektrum poslucháčov. Pre tvorbu wireframes ako takých zvyčajne využívam Balsamiq, ale vhodný je akýkoľvek nástroj, ktorý vám vyhovuje (Pencil, Axure), ceruzku a papier nevynímajúc.

V prípade, že nám pri návrhu dochádzajú nápady, môžeme zapojiť niekoľko techník, ktoré nám pomôžu - jednou z nich je napríklad Dizajn štúdio, o ktorom si povieme viac nabudúce.

Kontrola u zákazníka

Po týchto dvoch sprintoch máme dostatok pokladov na to, aby sme vedeli ísť za zákazníkom a prejsť si s ním nami identifikovaný scenár a jeho riešenie v podobe našej analýzy a wireframes. Pokiaľ sa vieme so zákazníkom zhodnúť na tom, že to je to čo asi očakáva a naše riešenie sa mu pozdáva, môžeme prejsť do ďalšej fázy našich príprav. Ak narazíme na väčšie problémy, máme šťastie, že sme ich identifikovali skôr, ako sme zapojili desiatky developerov do práce a teraz ich museli stopnúť v tom najlepšom :).

V prípade, že máme v našom návrhu veľké nedostatky, vrátime sa k prvému bodu, zrevidujeme analýzu, návrh riešenia a prípadne aj k úprave našich wireframes. Túto fázu môžeme kľudne vtesnať aj do jedného sprintu, nakoľko iterácie môžu byť veľmi rýchle a bolo by nezmyselné čakať na skončenie sprintu s prvou fázou a až následne sa pustiť do prekresľovania.

Prečo sú wireframes také doležíte keď ideme ku klientovi? Každý má predsa rád obrázky a nech dokument napíšeme akokoľvek pútavo, vždy bude jednoduchšie si pozrieť sériu obrázkov a potvrdiť si nimi čo je napísane v dokumente.

Ak nám klient odobrí nami vypracovanú analýzu a k nej prislúchajúce wireframes, môžeme sa smelo pustiť do ďalšieho sprintu.

Mockupy

V tomto sprinte sa zapotí najmä dizajnér, ktorý bude mať za úlohu prekresliť naše wireframes do high fidelity mockupov spĺňajúcich všetky vizuálne guidelines a best practices, ktoré máme k dispozícii. Voľbu nástrojov nechávame na dizajnéra, mne sa osvedčil hlavne Sketch. Môžeme samozrejme použiť aj iné, ako napr. Adobe XD ci Adobe Photoshop a pod.

Interaktívne prototypy

Ako ďalší krok po vytvorení týchto krásne farebných obrázkov vždy navrhujem vytvorenie interaktívnych prototypov alebo inak, klikateľných obrázkov. Všetky mockupy teda zoberieme a podľa jednotlivých scenárov pospájame pomocou nástroja ako je Marvel alebo InVision. Získame tak niečo, na čo môžeme veselo klikať, bude to na nás reagovať a nestrávili sme desiatky hodín programovaním.

Kontrola u zákazníka II.

Na čo nám to je? Aby sme s tým mohli znovu otravovať klienta. Znovu sa za ním totižto vyberieme a skúsime si s ním prejsť jednotlivé scenáre na našich interaktívnych prototypoch, poprípade necháme klienta nech si sám kliká ako uzná za vhodné a môžeme tak vykonať prvé praktické testy použiteľnosti. Zistené skutočnosti zaznamenáme a môžeme sa vrátiť k vylepšeniu nášho riešenia. Touto fázou taktiež eliminujeme akékoľvek pochybnosti alebo nejasnosti o tom, či klient chce to čo sme my pochopili a môžeme tak odvážne spraviť aj sign-off na analytickú časť. Na čo je nám zase toto dobré? Aby sme vedeli, kde je základ a odkiaľ už začínajú change requesty.

Technická dokumentácia

Ak sme sa dostali takto ďaleko, môžeme sa pustiť do technickej dokumentácie. V prípade ak si veríme, môžeme túto dokumentáciu začať chystať už po zapracovaní spätnej väzby po fáze návrhu wireframes. Ak sa nám úspešne podarilo od klienta získať podpis aj na technickú dokumentáciu, môžeme sa s prehľadom pustiť do vývoja ako takého.

Rozbehnuté projekty

Asi si poviete, že zaoberať sa týmto všetkým pri rozbehnutom projekte je pomerne časovo náročne a neostáva mi iné ako s vami súhlasiť. V prípade, že už máte naprogramované základne komponenty a viete rýchlo tvoriť prototypy s ich využitím, môžeme kompletne preskočiť fázu dizajnovania mockupov a tvorby interaktívneho prototypu z týchto mockupov a nakódiť ich radšej priamo ako dummy aplikáciu. Nepreskakujte však túto fázu úplne, nech už si zvolíte akýkoľvek spôsob - odstráni totiž aj posledné nezrovnalosti a dá projekťákom pokoj na duši, že majú dačo podpísane … v ideálnom svete samozrejme.

Ako som už vyššie spomínal, technickú dokumentáciu a prípravu je možné začať robiť už v skorších fázach, najmä ak máte knižnicu komponentov, ktoré používate. V takomto prípade kľudne môžete začať mockovať servisy a chystať zdroje potrebné pre beh zvoleného scenáru.

Záver

Všetko, čo som sa tu snažil rozpísať sú moje osobné skúsenosti a forma práce aká sa mi osvedčila na nie jednom projekte. Vďaka viacerým kontrolám so zákazníkom vieme eliminovať naozaj veľké množstvo nedorozumení, navyše klient vidí, že sa na niečom naozaj pracuje a má priebežne výsledky v rukách, s ktorými sa v prípade prototypov aj môže hrať predtým, ako ich v skutočnosti naprogramujeme.

Predpokladám, že nie každému z vás bude takýto postup vyhovovať, prípadne už máte ten svoj, budem však rád, keď si z toho niečo odnesiete a o svoje skúsenosti sa prípadne podelíte.

Martin Puškáč
martin@icebear.sk
Publikované: 22.09.2017 23:52
Naposledy upravené: 22.09.2017 23:52

← Späť na úvodnú stránku

Elektrický-skateboard.sk

CHCEŠ PO MESTE JAZDIŤ AKO CASEY? ALEBO SI ASPOŇ UĽAHČIŤ CESTU DO ŠKOLY ČI ROBOTY? TAK SI KÚP ELEKTRICKÝ SKATEBOARD!

Detaily projektu

Last Minute Darček

Potrebujete darček na poslednú chvíľu? Neviete, čo by potešilo Vašich drahých/blízkych?

Detaily projektu

Energetický certifikát budovy online

Potrebujete ECB pre svoj rodinný dom alebo byt? Na ecertifikat.sk si ho ľahko vybavíte online.

Detaily projektu

IceBear s.r.o.
Blumentálska 10
81107 Bratislava

Tel.: +421 911 526 183
E-mail: hello@icebear.sk

Copyright © 2017 IceBear

IČO: 46512900
DIČ: 2023414811

Spoločnosť je zapísaná v obchodnom registri okresného súdu Bratislava 1, oddiel Sro, vložka č. 78722/B

IceBear na Facebook-u