Modernizace uživatelského rozhraní informačního systému

Rychlý průzkum. Vzhledem k tomu, že klient neměl žádnou představu, tak jsme se vydali na nejbližší pobočku a hodinu si povídali se 4 obchodníky. A následně i s pokročilejšími uživateli - pracovníky centrály a IT oddělení.

Požadavky. Definovali jsme si základní principy nového GUI

• Detail a editace je 1 obrazovka - uživatel může upravovat data rovnou tam, kde je vidí. Technicky vzato jde o formu inline editu, případně lightbox s více údaji, pokud na sobě mají závislost.
• Pokročilé přizpůsobení - každý uživatel může používat evidenci trochu jinak: přidávat a odebírat sloupečky ve výpisu, měnit jejich šířku a pořadí, přidávat a schovávat filtrovací pole, uložit oblíbené filtry, měnit počet řádků výpisu.
• Responzivita zobrazení na různých zařízeních - u informačního systému poměrně složitá věc, protože množství dat a ovládacích prvků je enormní.
• Sjednocení vizuální podoby prvků - obecné prvky/funkce navrhnout tak, aby mohly být stejné u všech typů záznamů (např. stavy, dokumenty, časová osa, diskuze, historie záznamu atd.)

Skicování. Jako první jsme vzali modul dashboard, protože uživatelé jej dobře znají a dokonce jej mají rádi. Vytvořili jsme několik verzí toho, jak mohou být ovládací prvky uspořádány, a několik verzí grafiky. Přidali jsme i návrhy několika nových funkcí, které uživatelům pomohou změnit myšlení a přicházet i s futuristickými myšlenkami, např. grafy plnění osobního plánu na měsíc nebo notifikační centrum.

Technologie. Součástí změny byl také výběr vhodných front-endových technologií a nástrojů pro další dekádu vývoje systému. Zvolili jsme

• JavaScript: Vue.JS (původně JQuery)
• CSS: Tailwind - jako utility-first CSS framework (původně Zurb Foundation)
• Šablony: Twig (původně Zend phtml)
• Wireframing: Adobe XD - high-fidelity wireframes (původně Axure)

Proč právě tyto? Protože jsou responzivní - uživatel může ovládat aplikaci pomocí mobilního telefonu. Umožňují znovupoužitelnost - jednotlivé části systému půjdou rychle aplikovat do jiných modulů. Významně urychlují vývoj - nové moduly musí být rychle sestaveny a poté pouze vyladěny dle business logiky, tak aby byl uživatel co nejvíce spokojen. Bezpečnost - standardní ochrana proti útokům jako CSRF a XSS.

Pilot. Informační systém je hodně rozsáhlý (30+ modulů) a nešlo udělat všechno najednou. Zvolili jsme proto strategii “po rolích”. Vybrali jsme nejmenší divizi, která navíc v tu dobu žila investicemi a rozvojem, a předělali do nového kabátu 4 moduly, které tvořily jádro jejich práce. Zajistili jsme tak, že tito uživatelé po spuštění pracovali 80 % času v novém prostředí a jen občas se překliknuli do starého. Tím jsme měli hotový minimální produkt.

Implementace. Během 3 měsíců jsme převedli 90 % systému do nového kabátu. Všechny nové moduly se tvoří přesně na daný use-case a snaží se co nejvíce ušetřit čas uživateli. Co opravdu makléř musí zadat, co musí zadat centrála a jiné role.