GUI: Návrh intuitívneho a informatívneho riešenia pre užívateľov

[Slon104]

Ahojte všetci!
Chcel by som sa s vami podeliť o niečo, na čom som nedávno pracoval. Ide o návrh používateľského rozhrania (GUI) pre webovú extenziu “Autogram na štátnych weboch”.
Aktuálne webová extenzia nemá GUI, ktoré by informovalo užívateľa o jeho aktivitách. Verím, že nikto nechce byť nečakanou technickou podporou, keď niečo nefunguje ako má. Preto som sa snažil vytvoriť UI, ktoré je nielen informatívne, ale aj jednoduché na pochopenie a používanie.

Hlavné ciele môjho UI návrhu sú:

• Informovať užívateľa o aktivite extenzie. 
• Umožniť jednoduché pozastavenie podpisovania. 

Pri návrhu ma inšpirovalo aj niekoľko GitHub issues:
• Nastavenia podporovaných webov: Vychádzajúc z komentára v Issue #80 o zozname webov, ktoré sú podporované našou extenziou.
• Integrácia tretích strán: Na základe diskusií v Issue #79 a #86.

Nové UI rozšírenia Autogram:

• **Design:** 
    ◦ Dizajn je odvodený od aplikácie Autogram s drobnými úpravami. 
    ◦ Dodržiavanie noriem: V dizajne sa riadim Design normami “Gov.uk Design System frontend v4.2.0”, aby bol zabezpečený konzistentný a prístupný užívateľský zážitok. 
• **Funkcie:** 
    ◦ Pridaná možnosť zrušenia a dočasného pozastavenia podpisovania. Implementácia dočasného pozastavenia s dôrazom na to, aby používateľ nemohol jednoducho vypnúť rozšírenie a následne naň zabudnúť. 
• **Hlavný koncept:** 
    ◦ Používateľovi sa má otvoriť známe prostredie, ktoré by prekrylo aktuálnu stránku requestujúcu podpis s tmavým overlayom, ktorý by zároveň obmedzil interakciu používateľa s webom. Pri online podpise interakcia by bola možná len prostredníctvom tlačidiel, aby náhodné kliknutie mimo nich nevyplo aplikáciu. 

Vysvetlivky k obrazkom:

Návrh A:

• Pridané tlačidlo “Pozastaviť na 10 minút”: Umožňuje používateľovi rýchlo prejsť na alternatívnu metódu podpisovania. 
• V prípade neočakávaného správania programu, reštart prehliadača by umožnil extenzii pokračovať v podpisovaní.

Návrh B:

• Možnosť dočasného pozastavenia: Umožňuje zapnúť alebo vypnúť dočasné pozastavenie bez potreby potvrdenia od používateľa. 
• Pamäťová funkcia: Táto možnosť by zostala aktívna aj po reštarte prehliadača. 
• Pripomienka pri podpisovaní: Pri každom ďalšom podpisovaní by sa zobrazil malý banner v pravom hornom rohu, ktorý by informoval o možnosti aktivácie. 
• Interakcia s bannerom: Ak by používateľ klikol mimo banner, ten by sa okamžite skryl. 

Návrh nastavení:

Intuitívne nastavenia sú rozdelené do troch hlavných sekcií:
1. Všeobecné Nastavenia: Umožňujú dočasné pozastavenie funkčnosti rozšírenia alebo zmenu jazyka.
2. Sekcia Integrácie Portálov: Umožňuje používateľom vidieť a spravovať podporované portály s online podpisom.
3. Spôsob Podpisu Dokumentov: Toto rozhranie je navrhnuté s dôrazom na jednoduchosť a prístupnosť tretím stranám integrovať ich aplikáciu, zatiaľ čo poskytuje potrebnú flexibilitu pre pokročilých používateľov a IT administrátorov.

Záver:

Pozastavenie na 10 minút, ako je navrhnuté v návrhu A, sa javí ako optimálne riešenie pre bežného používateľa. Táto možnosť poskytuje dostatočný časový priestor na vyriešenie akýchkoľvek okamžitých problémov, zatiaľ čo zároveň znižuje riziko dlhodobého vypnutia funkcionality. Je to jednoduché, intuitívne a efektívne riešenie. Návrh na nové nastavenia umožní testujúcim používateľom ľahšie identifikovať a riešiť problémy, čo prispeje k hladšiemu a efektívnejšiemu vývojovému procesu.

Poznámka pod čiarou:

Pri návrhu užívateľského rozhrania som zaviedol možnosť dočasného pozastavenia funkcie na 10 minút. Okrem toho som premýšľal o ďalších možnostiach, ako napríklad pozastavenie funkcie pre konkrétny dokument, automatické zrušenie pozastavenia pri reštarte prehliadača, alebo pozastavenie funkcie pre určitý portál. Ak máte ďalšie nápady na technické riešenia, prosím, podelte sa o ne. Tiež by som bol vďačný za akékoľvek príbehy používateľov, ktoré by ilustrovali ich reakcie na nefunkčný Autogram extension a spôsoby, akými tento problém riešia.

Figma preview

[jsuchal]

@pomali kuk.

Toto by sme mohli predebatovat, lebo akoze super robota, len skoda, ze si sa neozval predtym ako si zacal, lebo s extension su momentalne trosku ine plany :)

[Slon104]

Som tu a som otvorený novým zmenám a požiadavkám, ktoré by bolo potrebné zahrnúť do návrhu. Môžeme si dohodnúť stretnutie alebo videohovor, aby sme prebrali detaily. Keď budeš mať čas, tak mi prosím napíš na Slack.

[pomali]

Povodne sme extension navrhovali aby bol neviditelny pre pouzivatela, takze sme sa naschval vyhybali UI v stranke - aj preto lebo samotna stranka nejake UI implementuje. Zaroven ked je extension "vypnuty", tak by nemal robit nic (teda ani vykreslovat nieco). Zaroven je technicky extremne narocne (radovo 2x tak ako bol cely extension) urobit to aby pri vypnuti/zapnuti nebolo potrebne urobit reload, takze by to bol dost zly UX - bud prepnes checkbox a dame hlasku, ze musis reloadnut web, alebo ho reloadneme za teba a ty stratis data.

Funkcionalita pozastavenia na 10 minut je zaujimavy napad, ale neviem ci vychadza z realnej potreby pouzivatela, a zaroven ma rovnaky problem ako som pisal vyssie.
Vypnutie/zapnutie podla domeny v nastaveniach je nieco co uplne dava zmysel, ale zatial si to nikto nepytal, tak to ma nizku prioritu.

Vyber podpisovaca tiez planujeme, ale musi to niekto nakodit :)

[Slon104]

Ahoj @pomali ,

Súhlasím, že reload stránky a potenciálna strata dokumentov je naozaj zlý UX. Chápem, že dynamické vypínanie môže byť náročné na kódovanie a udržateľnosť.

V prípade neviditeľnosti súhlasím a navrhujem viacero typov bannerov s rôznou náročnosťou na implementáciu. Tieto by sa zobrazili, keď by web extension zaznamenal CALL na podpis dokumentov a po skončení tohto podpisového procesu by interakciou vedľa bannera nechal banner zmiznúť.

Prvý riadok v Obrazku 2 ukazuje takú ‘Hackerish’ implementáciu s rôznym počtom riadkov, v ktorých by sa rolovaly logy. To by pomohlo developerom aj užívateľom pochopiť, že momentálne pracuje web extension a v prípade problému by dostali informáciu, ktorú by early adopteri mohli postnúť na GitHub.

Druhý riadok je v podstate ten istý ‘Hackerish vibe’, len ľahšia implementácia, pretože tam nie je možnosť zrušenia podpisu.

Tretí riadok som spravil ako najjednoduchšiu možnosť na implementáciu, kde autogram oznámi bannerom, že pracuje, a je na užívateľovi uvedomiť si, či mu to dáva zmysel, a jedným klikom sa vie dostať do nastavení a vypnúť web extension.

---

Osobne preferujem možnosť s prekrytím celej stránky, pretože užívateľ dostane jasne najavo, že web extension pracuje, a to by prekrilo aj prípadné native UI danej stránky, ktoré by hovorilo o otvorení d.Signeru alebo inej podpisovej aplikácie.

Táto implementácia obsahuje všetky prvky z bannera, podobný návrh ako môj prvý. Jeho prvá implementácia by bola jednoduchšia a v budúcnosti, ak by užívatelia požadovali nové featury, tak by sa do tohto prekryvu aj ľahšie pridávali.

Teším sa na tvoju spätnú väzbu a ďalšie nápady!

[jsuchal]

@Slon104 tu sa budeme musiet rozhodnut co s tymto urobime, isiel si trosku freestyle a medzicasom sa meni IDSK - vid https://idsk.gov.sk/

zaroven extension sa zmenil tiez, podporuje uz aj podpisovanie cez Autogram v mobile. Autogram v mobile je zamerne v idsk3-ish robeny.

[Slon104]

@jsuchal môžeme tento issue uzavrieť, keďže "autogram na štátnych weboch" dostal nové IDSK UI. Toto riešenie pokrýva všetky požiadavky a zohľadňuje všetky potreby.

Ak by sa v budúcnosti menil dizajn desktopovej aplikácie Autogram, na tiež nové IDSK, tak by som rád spravil aktualizaciu môjho návrhu