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

A to nove UPVS co uz vraj ide do produkcie mate v com nakodene? Toto mi nedava vobec zmysel v case.

Tam su reactove komponenty, ktore pouzivaju tailwindcss. Ked si v ramci koncepcie oficialnej kniznice poviete, ze to dava zmysel pouzit plosne, pouzijeme. Ked sa rozhodnete pouzit gov.uk, pouzije sa v oficialnej kniznici gov.uk. Pre obcana to je uplne fuk - on vidi farbicky a komponenty.

Obcan bude mat zladene:

  • web slovensko.sk
  • osobnu zonu moje.slovensko.sk (takze aj schranku)
  • aplikaciu SVM
  • sluzby ktore budu pouzivat Adobe Forms (vyssie som pisal)
  • v ramci ZS sa napriklad riesilo aj prerobenie portalu eVozidla do ID-SK, alebo vytvorenie portalu pre UPSVAR, … (neviem ako to dopadlo)

Vdaka tomu dorucujeme obcanovi jeden konzistentny zazitok napriec roznymi pristupovymi kanalmi.

No čiže už ste to nakodili. Teraz sa baviť o koncepcií dev knižnice. :sweat_smile:

Nakodovali sme kniznicu pre projekt mUPVS, ktora splna pravidla dane DS.

Teraz sa bavime o oficialnej HTML/CSS kniznici ID-SK 3, ktoru bude stat ponukat a podporovat. Nikde vsak nie je napisane, ze ju ktokolvek musi pouzit.

V pripade mUPVS by ju aj tak bolo potrebne preklapat do Reactu.

Bohuzial vzhladom k tomu, ze ID-SK 3 vznika subezne s mUPVS museli sme k tomuto takto pristupit.

Toto je taka debatka asi ako so SVM. Nezoberieme nic hotove, rozbehneme sa a potom prehlasime, ze najlepsie riesenie je pokracovat, lebo inak by bol problem to stihnut v terminoch.

Dejavu.

Jasne, ze sa to dalo inak. Napriklad v momente, ked ste vedeli, ze idete prvu ciarku napisat pre mupvs ste sa mohli postavit a povedat, ze pocujte komunita, ideme dorabat komponenty do idsk alebo stavame nanovo? Ake budu dopady na vase systemy? Co cakate vy? A mozno by ste ziadne tailwindy ani vyrabat nepotrebovali.

Teraz uz len placeme nad rozliatym mliekom, udrziavat dva kody - jeden pre upvs v react/tailwindcss a druhy pre specializovane portaly je snad este horsie ako to cele prerobit :slight_smile:

Pozri co som riesil takmer pred dvoma rokmi s @michalblazej (a nie len s nim):

Mimochodom s Misom sme sa nakoniec dohodli a ideme si k tomu dnes sadnut.

Myslim, ze som dnes pochopil podstatu problemu.

To o com hovori @jsuchal by som svojimi slovami nazval dizajn system UPVS. Presne ako to maju v UK - dizajn system gov.uk.

Web gov.uk = web slovensko.sk
El. sluzby gov.uk = el. sluzby UPVS

Na Slovensku sme do toho vsak namotali este aj weby jednotlivych OVM, aplikaciu SVM, webove aplikacie - el. schranku, rozne specializovane portaly, … nic z toho vsak DS gov.uk neriesi. A preto sme sa pustili do ID-SK 3.

Podla mna plati jednoducha rovnica:

DS Gov.uk = DS UPVS ≠ DS ID-SK

To je vsak len moj pohlad na vec a mozno si len potrebujeme lepsie zadefinovat ciele. Toto beriem ako klucovu ulohu biznis vlastnika.

Ma DS riesit cely ekosystem, alebo nam staci UPVS (web + sluzby)? Co myslite?

to ze pouzivate TailwindCSS je iba CSS framework. Presli ste zo SCSS na TailwidnCSS. A co? Neustale tu riesite nejake farbicky a design, ale pritom neriesite podstatu problemu. Podla vasich roznych vystupov sa neviem ubranit pocitu, ze GOVUK nepoznate a asi ste ani nepochopili jeho podstatu. Pritom by stacilo ho pouzivat dalej, uz len spatnej kompatibilite a urobit si vlastny fork s vlastnymi doplnkami (napr. komponenty) a vlastnymi overloads. Takto to robime od zaciatku IDSK. Zatial sme dokazali vyriesit vsetky situacie na obrazovkach iba IDSK (GOVUK), ale casto je potrebne sa zamysliet na tym co robite a o com je dana sluzba.
Napr. tvrdite, ze GOVUK sa neda pouzivat v mobilnych aplikaciach. To je neuveritelne zavadzajuce konstatovanie. Definujte mobilnu aplikaciu. Je to web based alebo native based? Ak je to web based, tak som si stiahol nielko originalnych GOVUK web based mobilnych aplikacii a na iPhone su bez problemov pouzitelne a spravaju sa velmi korektne. GOVUK s tym pocita, co je dalsia vasa neznalost, lebo bezne pocita s pixel ratio a to sa prejavuje aj na typografii. Len pre vasu informaciu kazdy normaly web render framework podporuje pixel ratio. Font maju licencovany iba pre UK, ale to asi problem nie je vymenit, co je v IDSK aj urobene. Dovolim si tvrdit, ze GOVUK riesi vacsinu vasich udajnych vychytavok v IDSK v3 a som presvedceny, ze sa k nemu mozno priblizite v IDSK v.15 ak to budete robit tymto vasim pristupom.

Nechapem jednu zasadnu vec, naco sa tu vymysla tepla voda, ked je jej vsade dost a tu co mame nedokazeme udrzat na dostatocnej teplote. Nemame cas a hlavne kapacity ani na to co tu mame, aby sa to upratalo, ale ideme stavat nieco uplne od nuly. Asi by malo MIRRI povedat, ci dokaze utiahnut takyto support pocas aspon 5 rokov, lebo inak je to uplne hlupe a naivne sa do toho pustat. Samozrejme ak nejde o princip: “Dejte mi prachy a ja je utratim.”

6 Likes

pekne, v tichosti sa urobi partizanstina a potom sa povie, uz je to tu, tak sa vsetci priposobte. Mnbe to aspon tak pride.
A v com je problem vytvorit si alebo stiahnut komponenty pre GOVUK pre react alebo Angular?

No ved prave, ze ked to prebieha subezne, tak sa to malo koordinovat. Ale to by sa muselo asi chciet. :face_with_raised_eyebrow:

ziva sluzba https://www.ecm.financnasprava.sk/ dokonca to ziskalo zlatu na ITAPA :joy:

inak staci poslat ziadost o zoznam hodnotenych webovych sidiel v IDSK designe a MIRRI vam to radi poslu. Na zozname co rocne hodnotia je ich pomerne dost.

moje pripomienky k pomerne dost tendencnemu porovnaniu. Nestacim sa cudovat … hnus velebnosti :smiling_face_with_tear:
PorovnanieID-SK.pdf (161.4 KB)

Dobry den, dakujem za reakciu. Rad by som si overil jeden vas komentar:

Mozem vediet z akeho dovodu ste na spominanom ocenenom webe (https://www.ecm.financnasprava.sk/) nepouzil tento komponent hlavicky? Alebo preco ste nerespektovali aspon aktualnu verziu ID-SK a pouzili to co bolo navrhnute? ID-SK Frontend - Hlavička

Zaroven by som sa rad opytal z akeho dizajn systemu vychadza tento razcestnik. Takto razcestnik nie je zadefinovany ani v ID-SK ani v DS gov.uk:

Razcestnik je v ID-SK definovany tu: ID-SK Frontend - Rázcestník.

A len tak mimochodom, tento navrhnuty uz na prvy pohlad nesplna pravidla pristupnosti WCAG (jasne oznacenie odkazov, ktore by mali byt podciarknute). Aj preto aby nevznikali taketo “experimenty” sme v ID-SK 3 navrhli prave tento komponent.

Tento web FS je krasna ukazka toho o com tu diskutujeme. Niektore komponenty gov.uk proste dodavatelom nevyhovuju a vytvaraju si vlastne. To co sme urobili v ID-SK 3 je prave doplnenie komponentov, ktore sme identifikovali za nevhodne/chybajuce. Zvysok webu je viac menej o textoch = typografii. V tomto pripade sme v ID-SK 3 prevzali typografiu z DS gov.uk. Takze web FS, ktory tu je prezentovany je uz teraz viac-menej v ID-SK 3. Az na nejake drobnosti okolo zaoblenia rohov inputov a farby buttonov.

1 Like

To tu bude vždy. Dá sa to čiastočne obmedziť ale nevidel som DS ktorý je tak dobrý, že odpadne ľudová tvorivosť.
Tu by som ale rozlišoval vytvorené čistom veci na 2 kategórie:

  1. Tie, ktoré nemali vzniknúť (lebo kopírujú nejakú komponent, nedávajú zmysel, nespĺňajú pravidlá)
  2. Tie, ktoré vznikli a stoja za prebratie do ofiko verzie.

Tú 2 treba podporovať, supportovať a dať kredit “vynálezcom”

Sám to vidím na DS ktorému sa venujem najviac - Carbon. Jedna vec je verejná knižnica s cca. 20 komponentami. Druhá je ale oveľa väčšia interná knižnica (knižnice), kde to rastie rýchlo - nestíham sledovať

Ahojte,
pre vsetkych, ktorych by skutocne zaujimalo aky je rozdiel medzi aktualnou verziou ID-SK 2.7 a ID-SK 3 som pripravil jednoduche porovnanie:

:triangular_flag_on_post:
Porovnanie.pdf (4.6 MB)

2 Likes

Krasne porovnanie. Ďakujeme x)

Mám jednu doplňujúcu otázku k back buttonu.
V gov.uk je back link v ľavo hore, v obrazovkách, ktoré používajú ID-SK 3 som si však button späť všimol dole pri buttone pokračovať. Prečo je to tak?

image

Back button samozrejme nie je problem pouzit. Je to skor o konkretnych vzoroch (napr. ako robit sluzby). Na tych mame podla roadmapy v plane pracovat v Q2.

Priklad, ktory si tu uviedol nikdy neuzrie svetlo sveta. Je to len jeden z mnohych koncepcnych navrhov. V pripade vzorov pre formularove sluzby budeme aj tak musiet respektovat to co nam umozni Adobe Forms. Zatial mame o tom len velmi malo info.

1 Like

A to je uplne vporiadku. Komponenty (a patterny a pravidla) musia vychadzat z / validovat sa na produktovej urovni, lebo ta je k enduserom najblizsie. Dizajn system tak vychadza z realnej potreby a nie dizajnerskeho pocitu ze by veci mali byt tak ako si dizajner mysli (a ma odskrtany zoznam). To ale neznamena ze treba prerobit cely uikit a naprogramovat ho odznovu.

Vid https://twitter.com/adambsilver/status/1625766209772724224

2 Likes

Uplne suhlasim

Vyssie som posielal porovnanie aktualnej verzie a toho co navrhujeme. Verim, ze si ho videl. Tvrdenie prerobit cely UI kit nie je zalozene na faktoch.

ID-SK by som prirovnal k vianocnej kapustnici.

Dostanete vodu, kapustu, sol. Dame vam zakladny recept a to co z toho vznikne je uz na vas.

Niekto si tam prida klobasu, iny udene, niekto prida zemiaky, iny susene slivky no na konci dna to bude stale vianocna kapustnica.

Na to aby nebola presolena a hostom chutila si vsak musi dat pozor kazdy kuchar sam.

videl, cely ui kit prerobeny nie je, nakolko v nom chybaju existujuce komponenty.

sranda ze v tom porovnani nie su zvyraznene napr. rozdielne vysky riadkov alebo spacing. diff nad vlastnostami by ukazal lepsie. a teda nebol som pri kresleni, ale sudiac podla rozdielnej struktury figma komponentov to kompletne prekreslene vyzera.

tak preco sa rozhorcujes nad tym ked niekto pouzil iny rozcestnik?

3 Likes