MIRRI Pracovná skupina K9.5 Lepšie služby - Dizajn manuál

Pokojne dajme do placu mená a oslovíme. Ja postupne dávam dokopy podklady aby sme sa mohli baviť čo najviac konkrétne a transparentne.

Oslovte SUXA ved.

Updates:

Dizajn knižnica

  • dostali sme kopec feedbacku z viacerých smerov
  • vo figme nám oproti vyhláške pár komponentov chýba, niečo je navyše
  • čaká nás hĺbková kontrola a vyladenie
  • následne sa budeme zamýšľať ako dohnať inovačný dlh (figma za posledný 1,5 roka vyrástla a veľa vecí sa už dá robiť inak…)

Dev knižnica

  • SKIT maká na jednotlivých častiach
  • máme + človeka na vývoj, takže to pôjde rýchlejšie
  • hotové základy ( foundations) + skladáme easy komponenty. Ideme atomicky nech to dáva zmysel

A teraz to smutné - stále narážame na to, že pôvodné IDSK 3.0 už asi nepočítalo s GDS:

  • snažíme sa namapovať IDSK foundations na GDS. Niekde je to jednoduché, niekde je to ďaleko od seba a chce to premyslieť
  • IDSK 3 má veci navyše (napr. tiene, farby, niekoľko fontov)
  • potrebujeme vytvoriť názvovú konvenciu, aby sme nevytvárali dva oddelené bloky v jednom systéme. Zároveň aby to držalo čo najviac soft fork feel ako sa dá

Web

Tu stále bojujeme. Rozhodili sme siete do interných zdrojov a našli sme tím, ktorý nám s tým vie pomôcť. Začali proaktívne riešiť. Možno až trochu moc proaktívne, lebo nás z toho vynechali…Takže sa snažíme zistiť, aká je situácia.

  • máme hotovú jednodchú špecku k webu (čo potrebujeme, aké máme zdroje atď.). Bude ju treba ešte doklepať, ale na to, aby sa začalo robotovať je to myslím ok
  • dokončil som figmu k webu, aby sa podľa toho dalo kódiť

Komunita

  • Ozvali sa chaloši z LBčka, ktorí boli pri prvých verziách IDSK. Ideme pokecať, pozbierať rozumy atď.

  • ešte niekedy na začiatku januára sme mali call s firmou, ktorá sa pýtala na kombináciu IDSK3.0 a Liferay. Minulý týždeň nám poslali github repo :slight_smile:
    GitHub - archimetes/id-sk-liferay

2 Likes

Ale neveriiiiim. Veď to mala byť evolúcia.

He, ja stale zasnem nad tym, ze kolko energie muselo toto cele stat a cele co to prinesie bude modry button, oble rohy a cervene hviezdicky.

Co tu stale chyba su vzory. A ak spravne chapem budu chybat aj dalej. :frowning:

Taka kacirska myslienka, rollback vyhlasky :smiley:

takato?

ci takato?

Ja mam iba obavy, ci toto IDSK3 nevygeneruje este viac roboty ako sa do toho vlozilo.

2 Likes

Vzory sú next step hneď ako dobojujeme základ (tipujem od 3Q2024).
Tu máme výhodu a nejdeme úplne zo zelenej lúky. Vieme využiť viacero zdrojov:

  • vzory z IDSK 2.0 - základy tam sú, aj keď ich bude treba prezrieť a aktualizovať
  • GDS vzory - zase preložiť do SK, porovnať s IDSK2, preklopiť do IDSK 3
  • vzory z projektu Životné situácie - dizajn tím, ktorý to riešil vytipoval, nakreslil a popísal sadu vzorov, ktoré sa potom prepoužívali naprieč prototypmi. Bude to zase chcieť trochu lásky, ale ako zdroj super
  • mUPVS - kopec vecí sa nakreslilo a tiež sa odtiaľ bude dať čerpať
    /všetky veci zo SKITu potrebujú kvalitný handover a bude chvíľu trvať, kým sa to zanalyzuje a vytipujú sa možné vzory. Platí aj pre body nižšie /
  • projekty SKITu k centrálnym komponentom
  • iné projekty SKITu kde sa pracovalo už s IDSK3
  • koncové služby štátu - na UPVS je ich cez 3000 z ktorých môžeme čerpať inšpiráciu
  • OVM a ich dodávatelia - pravidelne komunikujeme a posúvame hinty čo a ako robiť, aby to potom ľahšie prechádzalo cez kontrolné mechanizmy MIRRI a nemuseli veci 5 krát prerábať. Už sme takto v IDSK 2 vychytali niekoľko problémov, kde vidíme, že aj dodávatelia si vo svojich riešeniach (alebo formulárových tooloch) tvoria globálne vzory, ktoré potom prepoužívajú v XY projektoch.

K dev knižnici:
Zatiaľ ideme cestou najmenšieho odporu. Pripravujeme mantinely (HTML, CSS…), ktoré ukážu developerom cestu, ale ponúknu slobodu v realizácii - napr. výber technológie, frameworku…
Ak bude budget a kapacita, do budúcnosti sa môžeme baviť aj o špecifických knižniciach (napr. react), ale musí to mať jasné ofiko pravidlá a zastrešenie ako produkt (vývoj, údržba, komunikácia…). Alebo možnosť B - komunitný zdroj, tak ako hore prilepená Liferay knižnica.

Niekde v tomto vlákne by mala byť aj React knižnica od SKITu pre UPVS, ktorá bola kódená pre 3.0.

Začiatok je a bude výrazne bolestivý. Ideme od jedného problému k druhému, ale pokiaľ sa dá, tak bojujeme a zvažujeme ako ďalej.

1 Like

Bolo to na stole uz za minulej vlady. Lenze nove slovensko.sk bolo nakodene podla novej vyhlasky (samozrejme uplne mimo gov.uk kodov) a podla toho sa ide otocit cely vesmir. Krical som vtedy, ze zle je. Teraz zneme, co sa zasialo.

Ked uz takto, tak nech radsej mupvs dostane vynimku. Bude to sice na hanbu, ale aspon sa nedoserie vsetko okolo.

1 Like

Tu je zakladne mapovanie z Februara 2023

Mozme byt konkretny? Rad pomozem

Len tak pre zaujimavost, opytal som sa GPT co je to dizajn system?

Tu je odpoved:
"Dizajnový systém je kolekcia zdieľaných dizajnových prvkov, princípov a dokumentácie, ktoré slúžia na vytvorenie a udržanie konzistencie v dizajne a užívateľskom rozhraní (UI) pre jeden alebo viacero produktov alebo služieb. Tento systém môže zahŕňať široké spektrum prvkov, ako sú farebná paleta, typografia, ikony, štýly tlačidiel, rozloženie stránok a ďalšie.

Cieľom dizajnového systému je zabezpečiť, aby všetky časti produktu mali jednotný vzhľad a správanie, čo prispieva k lepšej užívateľskej skúsenosti a uľahčuje prácu dizajnérov a vývojárov. Vďaka dizajnovému systému môže tím ľahšie udržiavať a aktualizovať dizajnové prvky a zároveň rýchlejšie vytvárať nové časti produktu bez vzniku nekonzistencií v dizajne."

Dalsia otazka: Ako navrhnut dobry dizajn system?

Navrhnúť dobrý dizajnový systém vyžaduje kombináciu kreativity, dôkladného porozumenia užívateľských potrieb a úzkej spolupráce medzi dizajnérmi, vývojármi a ostatnými zainteresovanými stranami. Tu je niekoľko krokov, ktoré môžu pomôcť pri navrhovaní efektívneho dizajnového systému:

1. Výskum a analýza: Začnite porozumením potrieb užívateľov a cieľov vašich produktov alebo služieb. Identifikujte existujúce problémy s dizajnom a získajte poznatky o preferenciách užívateľov.
2. Definícia prvkov: Určte základné dizajnové prvky, ktoré budú súčasťou vášho systému, ako sú farby, typografia, ikony, tlačidlá, atď.
3. Vytvorenie spoločných pravidiel: Definujte pravidlá a normy pre použitie jednotlivých dizajnových prvkov. To zabezpečí konzistentný vzhľad a chovanie v celej aplikácii.
4. Vytvorenie dokumentácie: Vytvorte podrobnú dokumentáciu dizajnového systému, ktorá poskytuje návod na použitie jednotlivých prvkov a ich kombináciu.
5. Testovanie a iterácia: Testujte dizajnový systém v reálnom prostredí a zhromažďujte spätnú väzbu od užívateľov. Na základe tejto spätnej väzby prispôsobujte a vylepšujte systém.
6. Zabezpečenie aktualizácií: Vytvorte proces na udržiavanie a aktualizovanie dizajnového systému v čase. Technológie a trendy v dizajne sa neustále menia, takže je dôležité udržiavať váš systém aktuálny.
7. Spolupráca a komunikácia: Udržiavajte otvorenú komunikáciu medzi členmi tímu dizajnérov, vývojárov a inými zainteresovanými stranami. Spolupráca je kľúčom k úspešnému vytvoreniu a udržiavaniu dizajnového systému.

Dobrý dizajnový systém je dynamický a flexibilný, schopný prispôsobiť sa meniacim sa potrebám užívateľov a technologickým trendom, zatiaľ čo zároveň poskytuje konzistentnú užívateľskú skúsenosť.

Zacinal som si mysliet, ze tomu nerozumiem :smiley:

Je z tohto tu nieco verejne? Je to uz sice po funuse, ale zaujimalo by ma ako sa navrhuje riesit napr. adresa. V IDSK2 sice je, ale je to iba preklad z govuk, zvycajne nedostatocne pre nase OVM. Zatial som na ziadnej sluzbe nevidel, ze by sa to poriesilo jednym z tych 2 vzorov.

Ja toto porovnanie vnimam ako velmi zavadzajuce. Na prvy pohlad to vyzera akoze nic sa nemeni, ale:

  • pridat hviezdicky nebude zalezitost na 10 minut, tam som zatial videl 1 priklad pre input, ale ako sa budu riesit situacie typu (mam povinny 1 z 2 inputov, radiobuttons, alebo date-input - bude stacit 1, ci dame 3?) - kopec otazok z toho este vypadne.
  • Accessible autocomplete | accessible-autocomplete toto bude ok? Pouziva to vela dodavatelov
  • snad sa nezabudlo na komponenty, ktore aktualne v IDSK2 nemame, ale v govuk su uz nejaky ten piatok - pagination, tagy, …

Ten GPT si obcas strasne vymysla :slight_smile:. Odpoved mala byt ze, naco navrhovat, ked staci skopirovat.

Fakt by ma zaujimalo, ze pouzivatelia ktorych sluzieb potrebovali zmenit farby tlacidiel a vobec. Ale ano, ak ste sa opytali pouzivatelov ze chcete to chrumkavejsie, tak ste dostali odpoved ze ano.

Ale ked sa divam ako si samotne MIRRI z aktualne platneho IDSK2 spravilo trhaci kalendar, tak ocakavam aj nadalej velku mieru kreativity v tvoreni sluzieb.
(Ano hovorim o tom povinnom uvodnom bloku ID-SK Frontend - Úvodný blok pre webové sídla po ktorom na https://mirri.gov.sk/ jaksi nic neostalo :slight_smile: )

1 Like

Ahoj,
aby som lepsie dokazal reagovat na otvorene temy rad by som sa ta opytal do ktorej skupiny by si sa zaradil (kludne aj kombinacia):

A) Biznis vlastnik - si zodpovedny za to co sa bude robit a ako. Si ten, ktory na konci dna vsetko akceptuje a je zodpovedny za vysledok. Ty vytvaras poziadavky, ktore zvysok timu plni.
B) UX/UI dizajner - si zodpovedny za navrh pouzivatelskeho rozhrania po stranke dizajnu, pouzitelnosti a pristupnosti. Snazis sa navrhovat riesenie, ktore spaja potreby pouzivatelov, biznisu a splna vsetky kriteria co sa tyka technickych, legislativnych a dalsich obmedzeni.
C) Vyvojar - si zodpovedny za realizaciu(vyvoj) jednotlivych funkcionalit podla navrhnutych dizajnov a biznis poziadaviek. Tvojou ulohou je zvolit spravnu technologiu a zabezpecit aby vsetko fungovalo. Taktiez zodpovedas za pristupnost z pohladu zdrojoveho kodu.
D) Ine - Tester, Q&A, Architekt, Analytik, Produktak, Projektak, Bezpecak, … ktokolvek kto do procesu tvorby vstupuje ale s dizajn systemom realne nepracuje

ako bonus pridavam

E) “Hundros” - nikdy som nic neurobil ale na vsetko mam silny nazor, ktory potrebujem vsade prezentovat
F) “Vyssia moc” - som minister, nerozumiem tomu ale toto sa mi nepaci

Za tie roky co sme na tom pracovali sme dostali mnozstvo pozitivnej spatnej vazby hlavne zo skupiny biznis vlastnikov a dizajnerov. Jedina skupina, ktora s tym ma realny problem je skupina vyvojarov (osobne by som ta tam tipol).

A pritom ID-SK dava prave tejto skupine v podsate absolutnu volnost. Ziadna vyhlaska, zakon, nic ich nenuti pouzivat co i len ciarku nejakeho kodu. Jedine co ich pravidla nutia je aby akceptovali nejake zakladne styly (farby, typografiu, … ktore im v podstate dizajneri priopravia v ramci navrhov), par zakladnych komponentov, ktore maju zabezpecit konzistensiu a pristupnost kodu.

Takze doporucenie je jednoduche - zoberte akykolvek vzor GDS, aplikujte na neho styly ID-SK a ste ok. Nikto vam nic nepovie! Vsetko bude podla platnych aj navrhovanych pravidiel! (samozrejme pokial si niekto na MIRRI nezmysli, ze bude vynucovat aj pouzitie konkretnych kodov co by bol za mna kardinalny omyl)

Problem s tym maju aj ludia okolo pristupnosti a ludia, ktori vidia na to, kolko toto stoji a ake to ma prinosy. Pripadne by s tym mal mat problem aj projektovy clovek, ktori nevidi jasnu cestu, ze kto toto bude udrziavat. Lenze toto na MIRRI ma podla mna dedikovaneho projektoveho cloveka az teraz.

@MilanK left this conversation

1 Like

Konkrétne problémy k mapovaniu napr.:

  • GDS nemá tiene, IDSK má
  • spacingy - GDS má inkrementy podľa veľkosti obrazovky 5px alebo 10px, v IDSK je to 5,10,20,40…
  • farby - Gov UK má 3 grey farby, IDSK má 6 a podobne.

Niektoré zdroje sú public, napr. figma knižnice SKITu:

Ale veľa zo spomínaných zdrojov sú aktívne bežiace projekty, kde sa to bude musieť nejakým spôsobom pozbierať otestovať a potom dať na review a zapracovať do dizajn systému.
V prvom kroku zase len preklopíme IDSK2/ GDS do IDSK 3 (starting point) a potom pôjdeme postupne krok po kroku.
Nechceme cikať proti vetru, takže pozbierame best practices, pozrieme, čo bolo kde spravené, otestujeme a ak to bude ok, tak updatneme vzor.

V prvom kole sa naschvál zabudne. Potrebujeme naplniť vyhlášku, Potom začneme dobiehať dlh, ktorý tu za posledné roky vznikol. Toto bude dobrý painík…

Tá kreativita je ok. ak sa dodržia základné mantinely (dizajn systém, ale nie len z pohľadu vizuálu, ale aj kvalita, accessibility a pod.). Ak by to malo byť striktne iba to, čo vypustí MIRRI von, tak dizajn systém umrie za pol roka aj pri extrémnej snahe to udržať.
Úprimne robil som s viacerými DS, aj fakt veľkými (IBM carbon, SAP, Material…) a vždy som došiel do bodu, že som vytváral custom veci, ale s veľkým dôrazom na foundations. Toto je prístup, ktorým chceme ťahať aj IDSK.
Presne to, čo píše Milan v príspevku.

Ahoj,

neviem ci to pomoze, ale dobre, som

  • B, sice sa necitim ako cistokrvny UX/UI dizajner, ale snazim sa navrhovat riesenie, ktore spaja potreby pouzivatelov, biznisu …,
  • C, ano, som aj vyvojar,
  • D, spadam aj sem ako architekt.

Heureka, co hovorila ta umela inteligencia?

Identifikujte existujúce problémy s dizajnom a získajte poznatky o preferenciách užívateľov.

Testujte dizajnový systém v reálnom prostredí a zhromažďujte spätnú väzbu od užívateľov. Na základe tejto spätnej väzby prispôsobujte a vylepšujte systém.

Pouzivatelia su doleziti, nie ako sa to lubi dizajnerom.
Fakt ma govuk problem s hranatymi rohmi?
Pouzivatelia vazne vypisuju, ze joj ako luxusne som daroval 2% dane za 5 minut, len tie tieniky mi chybali?

2 roky mi trvalo kym som zistil, ze ak chcem cez FS odoslat 2%, tak sa musim prihlasit eid, poziadat o zastupovanie subjektu sameho na seba, pockat den na schvalenie, a az potom sa dostanem k formularu.

A to by bolo prave super. Mat jasne pravidla, kedy co a ako, aby sme nemuseli furt o tom dookola diskutovat a riesit ako vyplnit udaje FO osoby do podania.
A tie naklady. Namiesto aktualizacie csska, budu vsetci ti, co ukutili rozne bootstrapy podobajuce sa IDSK palit MD aby sa to podobalo novej verzii.

Skor som narazal na chybajuci, podla IDSK povinny, uvodny blok pre webove sidla. Clovek ak ma horsie oci ani nevie ze je na stranke ministerstva.

2 Likes

Ahojte. V debate ID-SK 3 yay or nay sa snažím byť neutrálny. Iba v rámci transparentnej komunikácie prihodím 2 prieskumy, ktoré sa k ID-SK realizovali.

V roku 2021 sa robil kvalitatívny prieskum o stave ID-SK. Jedno zo zistení bolo, že nevôla používať ID-SK kvôli estetickým dôvodom je reálny problém. Budem trochu generalizovať: v tej dobe existovala množina úradníkov s rozhodovacimi právomocami, ktorí chceli mať vlastnú identitu, vlastné farby, vizuálne očarujúci dizajn, atď. Nemuseli nutne vidieť prevládajúce benefity ID-SK 2, ktorý tieto ich kritéria nespĺňal. Dodávatelia s tým následne taktiež bojovali. Nebolo to najväčšie zistenie, avšak príde mi relevantné k tejto debate. Tu je celý dokument k nahliadnutiu:
IDSK Kvalitativny prieskum 2021.pdf (995.4 KB)

V roku 2023 sa robil kvalitatívny prieskum už so zameraním na implementáciu ID-SK 3. Aj v ňom sa však ukázalo, že vizuálne prevedenie ID-SK malo svojich “hejterov”.
IDSK Kvantitativny prieskum 2023.pdf (790.8 KB)

Týmto nechcem obhajovať alebo útočiť na ID-SK 3. Túto diskusiu (ako ja mnoho iných) považujem za nesmierne dôležitú. Hreje ma pri srdiečku, že sa Oggi (@Tomas_Makan1 ) pustil do transparentného, úprimného a plnohodnotného informovania o aktuálnom stave a budúcich krokoch.

2 Likes

No ale nakoniec sa to ako pekne rozbehlo

Podobna situacia ako so separovanim PET flias, nikomu sa do toho nechcelo, same vyhovorky preco sa to neda a pod.

Este na margo tohoto mi dnes udrelo do oci: https://www.nbu.gov.sk/
By mal zaujimal uprimny nazor na taketo pociny. Je to v sulade s IDSK ako sa pise v paticke, alebo nie je?

Proste ked maju vyvojari prilis volne ruky, tak sa potom zbytocne prilis vela tvori. A podobnych prikladov sa da najst neurekom.

https://nases.gov.sk/kariera/preco-pracovat-v-nases

Jejda a este jeden priklad, vyzera to uz na pocin v IDSK3. To tie akordeony maju byt fakt take kone? Oproti povodnym je to +50% na vysky, v porovnani.pdf su rovnako vysoke.

Áno, rozbehlo. Vyrobilo sa kvantum nových nepotrebných navzájom-nekonzistentných komponentov, ktoré negujú hlavný účel ID-SK. Na vymenovaných stránkach je to krásne vidieť.

ID-SK patrí medzi relatívne striktné dizajnové systémy. Na rozdiel od takého Carbonu, ktorý má zadefinované základy a nabáda ľudí k dotváraniu riešení, pri ID-SK to tak nie je. No v snahe vytvárať si vlastné riešenia (ten problém, o ktorom som písal) je na tých stránkach vidieť, ako si každý urobil vlastné koleso.

Nehovorím, že ID-SK 3 je tá správna cesta. Poukazujem iba na reálny odpor s prijatím ID-SK 2 v jeho celej podobe. A tieto stránky sú príkladom.

Práve naopak. Podľa toho, ako bola napísaná vyhláška (78/2020), dôvodová správa, ale aj podľa Milanových vyjadrení to bude fungovať podobne ako pri Carbone - Ľudia môžu použiť ofiko komponenty, môžu ofiko komponenty mierne upraviť a potom to ukázať MIRRI alebo si môžu vymyslieť vlastne riešenia s dôrazom na mantinely IDSK .

Ale to by MIRRI muselo mať väčší tím ľudí, ktorí by riešili len toto. A po druhé: klienti musia proaktívne komunikovať a pýtať si support, lebo projektov je kvantum. Tu by mohla pomôcť rozumná automatizácia napr.

Z vyhlášky:
§ 17a

Štandard pre dizajnový manuál

(1)

Štandardom pre dizajnový manuál je

a)

používanie komponentu s funkcionalitou, štýlu, vzhľadu a zobrazenia pre grafické používateľské rozhranie webovej stránky zobrazujúcej elektronickú službu, grafické používateľské rozhranie elektronickej služby a hlavné webové sídlo v rozsahu a spôsobom uvedeným v prílohe č. 12,

b)

úprava existujúceho komponentu, štýlu, vzhľadu a zobrazenia pre grafické používateľské rozhranie webovej stránky zobrazujúcej elektronickú službu, grafické používateľské rozhranie elektronickej služby a hlavné webové sídlo podľa potreby orgánu riadenia, a to na základe dohody s orgánom vedenia,

c)

používanie komponentu, štýlu, vzhľadu a zobrazenia pre grafické používateľské rozhranie webovej stránky zobrazujúcej elektronickú službu, grafické používateľské rozhranie elektronickej služby a hlavné webové sídlo vytvorené orgánom riadenia po dohode s orgánom vedenia, ak ide o komponent, štýl, vzhľad a zobrazenie, ktoré nie sú ustanovené touto vyhláškou.

(2)

Komponenty, návody, vzory, štýly a príklady k dizajnovému manuálu, ktoré môže orgán riadenia podľa potreby použiť, sa zverejňujú na webovom sídle v správe orgánu vedenia