Od MVP po produkt na vysoké úrovni až po design: optimalizace rozhraní pro finanční projekt

O přístupu k návrhovým řešením pro tabulky, statistiku a infografiku, jakož io inovativní metodě správy dat – případ Uprising , designová a vývojová studia

Fórum

Každá společnost, zejména startup, potřebuje pohodlné finanční účetnictví. Sami jsme začínali jako startup (a přesto jsme tento titul pro sebe neztratili), takže víme, jaké to je, když na speciálního zaměstnance není dost peněz a je vyžadováno hlášení investorům a zakladatelům.

< p>Zákazník vytvořil platformu MVP pro finanční účetnictví, jejíž hlavní funkcí v budoucnu bude akreditace programu u různých korporací a bank podporujících malé a střední podniky. Jinými slovy, pokud vaše společnost chce požádat o finanční podporu, budou budoucí věřitelé schopni kontrolovat a hodnotit rizika na základě údajů o finanční situaci poskytnutých na platformě Startis – kromě výhod programu by to mělo sloužit jako další pobídka k jeho použití.

Dáno

Platforma MVP pro účetnictví společností a počáteční finance. Produkt v této fázi byl poměrně surový, nepohodlný k použití a design a rozhraní byly morálně zastaralé a nesplňovaly požadavky na moderní technologický produkt. Sait byl narychlo navržen tak, aby ukázal význam a strukturu budoucího produktu.

Cíl

Aby bylo rozhraní pohodlné, srozumitelné a snadno použitelné, ale zároveň zobrazovalo velké množství dat, čísel a informací.

Řešení

Hodně mluvíme o tom, co nás inspirovalo, dáváme příklady různých publikací a zmiňujeme zajímavé osobnosti ー pro pohodlí čtení článku a možnost využití „cheat sheet“ v budoucnu jsme shromáždili všechny užitečné odkazy pro práci a inspiraci zde.

Startis, který je klasickou kombinací tabulek, infografik a obrovského množství dat, byl inspirován dílem Artema Gorbunova, Olega Paščenka a Ilyi Michajlova, když byli uměleckými řediteli Studia Artemy Lebeděva, a tím nejlepším, co bylo vytvořeno v rámci jejich vedení v roce 2003. ..2010. Informační designéři New York Times, Washington Post, Politico, Reuters a Bloomberg. Obrátili jsme se na filozofii Dietera Ramse, poznámky Ilyi Birmana, sovětský encyklopedický design a samozřejmě Edward Tufty, jeho knihy a vize.

Tabulky

Abyste pochopili důležitost práce prováděné na stolech, musíte pochopit jejich podstatu a účel.

Startis pomáhá podnikatelům, majitelům společností, analytikům a investorům rychle posoudit ekonomickou situaci stávajícího podniku, předvídat vyhlídky na nový obchodní rozvoj, sestavit plán finančního projektu a zvážit rizika investic do startupu.

K dosažení těchto úkolů musí uživatel vytvořit finanční model zadáním konkrétního pole dat do tabulek. Číselná data z tabulek jsou epicentrem funkčnosti Startis: tvoří infografiku, určují celkovou reiteraci a poskytují verdikt o ziskovosti. Základem služby jsou data v tabulkách.

Číselná data se zadávají do čtyř tabulek:

• Zisk a ztráta;
• peněžní tok;
• Balance;
• technické a ekonomické ukazatele.

Naším úkolem bylo zajistit, aby zadávání dat bylo pohodlné, rychlé čtení, způsob prohlížení – variabilní a navigace – pohodlné.

Nejprve se naše tabulky vyznačují estetikou. Jsou lehké, kompaktní, informativní, bez různého hluku. Všechny atributy špatného tabulkového designu jsou vyloučeny: neexistují žádné zbytečné barvy, čáry, ohraničení, pruhy a kombinace různých stylů písma. Počítá se úvodní část, opakování se odstraní.

Zvláštní pozornost je věnována správnému podříznutí: parametry jsou zarovnány doleva a číselná data – napravo číslicemi.

Během návrhu jsme vypočítali optimální velikost levých parametrických sloupců; upravil a sjednotil názvy všech parametrů v souladu s infostylem Maxima Ilyakhova; použité softwarové blokátory, akronymy a zkratky. Výsledkem je, že všechny parametry jsou uvedeny striktně v jednom řádku, bez dělení slov a vodorovného rozbití struktury. Zároveň platí, že čím větší je obrazovka, tím více dat uživatel uvidí a čím hlouběji budou podrobnosti – vypočítali jsme také rozložení tabulek v závislosti na rozlišení monitoru.

S ohledem na numerické data, tabulky mají tři funkční vlastnosti: část dat se zadává do rukou, část se automaticky vypočítá, část se sečte. To, co vlastníci společnosti, analytici a investoři obvykle konfigurují pomocí vzorců v aplikaci Excel, bylo v Startisu implementováno pohodlnějším způsobem.

Na rozdíl od aplikace Excel uživatel v interaktivní interakci okamžitě vidí, jak jsou vzájemně závislé parametry propojeny a shrnuty. Například v tabulce „Cash flow“ jsou vzájemně závislé parametry:

• provozní činnosti, milion rublů;
• investiční činnosti, milion rublů;

< li> Finanční aktivity, RUB mln ..

Všichni společně:

• Čistý tok, RUB mln

Je použita klasická stupňovitá hierarchie podobná stromu: data obsažená v parametru zaujímají podřízenou pozici. Pro větší pohodlí je lze sbalit a rozbalit.

Byla také zpracována interaktivní zpětná vazba: čáry při najetí myší jsou zvýrazněny matricemi, variabilní číselná data jsou podtržena žlutými čarami, informátoři zobrazují vnořená srovnávací data, rady pop na některých místech jsou vykresleny vztahy a závislosti. Tady byl klíčovým zdrojem inspirace „Biathlontime“ Ilyi Birmana.

V závislosti na nastavení při vytváření finančního modelu:

• tabulky lze prohlížet podle měsíce, čtvrtletí nebo rok – vypočítali jsme rozvržení pro všechny situace;
• v tabulkách vidíte pouze skutečné, plánované ukazatele nebo všechny najednou – vytvořili jsme dva způsoby, jak je zobrazit (formou informátora a okamžitě v tabulce);
• číselné údaje mohou být zaokrouhleny (1,72) nebo plnohodnotné (1723 290) – v zaokrouhlených datech jsme použili vizuální oddělení celých a zlomkových částí.

Technická možnost importu číselných dat z aplikace Excel byla vypočtena. A v tabulkách a „Technických a ekonomických ukazatelích“ ve stavu „Zobrazit skutečnost a plánovat společně“ jsme implementovali formát klasických ukazatelů růstu a poklesu v minimalistických nabídkách akcií.

Infografika

Knihovnu Javascript Chart.js jsme použili jako softwarový základ. Knihovna funguje na bázi HTML5, nabízí nejoblíbenější typy infografik s možností přizpůsobení, podporuje všechny moderní verze prohlížečů a má zabudovanou animaci. Projekt je podrobně představen na Githubu a pracuje na principu open source komunity.

V procesu hledání správného vizuálního formátu jsme se obrátili k moderní infografice, která je obzvláště dobře zastoupena v západních médiích weby, stejně jako vysoce kvalitní firemní weby a ve výročních zprávách.

“ img src „=“/5e5c3e7b1e8335fc2b48ba5f4baf2c44.png „/>

Když do čtyř výše uvedených tabulek zadáte všechna potřebná data, můžete začít vytvářet infografiku.

Poprvé v praxi jsme uplatnili princip úpravy „na místě“: je-li parametrem textové pole, je dodáván okamžitě jako text – bez pole, okrajů nebo podtržení. Podobný mechanismus lze nalézt v Notion a Asana. Tento princip zjednodušení se nakonec rozšířil i na další prvky rozhraní:

• místo těžkých rozevíracích nabídek – text a šipka dolů;
• místo masivního „zařízení“ – a kompaktní elipsa;
• místo značek na čtvercových raznicích a odrážkách ohraničených rámečky – stačí zaškrtnutí a tečka.

Graf lze zobrazit podle měsíce, čtvrtletí a roku; může být velký nebo malý; každý parametr může zobrazit pouze plán, fakt nebo všechny najednou.

Křivkové grafy mohou mít čáry s body nebo žádné plné nebo tečkované tečky.

Sloupce v grafech „histogramu“ mohou běžet samostatně nebo se shromažďovat v klastrech a stavět se na sebe. Vše se přizpůsobuje šířce prohlížeče, rozšiřuje se na monitory a zmenšuje se, přestavuje se na smartphony.

Grafy lze přesouvat a zamícháno, pokud je to požadováno. Aktivně reagují na pokyny a poskytují užitečnější informace pro analýzu.

Vypracovali jsme také složitější verzi „křivkové“ infografiky: s tipy, doplňky, pokročilým předpovědí a variabilní interaktivitou.

Finanční model

Tabulky a infografiky jsou součástí finančního modelu. Při vytváření finančního modelu určuje uživatel základní parametry, na jejichž základě se následně vytvoří sloupcový objem tabulek – a poté infografika. Příklad parametrů finančního modelu:

profil

Stejně jako kdekoli jinde na webu se data v profilu mění přímo na místě – bez polí, zbytečných podtržení a dalších dekorů UI/UX.

Stručná informace o projektu

“ .png „/>“ uploads/8de0fc625e37e41969a3b90a49ea47a8.png „/>

Poznámka. V rámci tohoto projektu jsme pracovali pouze na designových dispozicích a koncepčních řešeních (zatímco vytvořený design plně vyhovuje technické specifikaci Chart.js). V důsledku práce byla rozvržení přenesena na vývojáře klienta a další implementace proběhla mimo naši kontrolu.