Koncept brand identity a používateľského rozhrania pre fakturačnú aplikáciu KROS Fakturácia

Spoločnosť KROS nás oslovila s požiadavkou na vytvorenie moderného konceptu brand identity webovej aplikácie KROS Fakturácia, ktorý sa môže aplikovať aj na ostatné aplikácie z portfólia KROS-u.

Súčasťou zadania bola požiadavka na návrh layoutu pre väčšie monitory, ktoré umožňujú zobraziť viac informácií na jednej obrazovke. A predovšetkým smerovať návrhy a zmeny k zvýšeniu produktivity používateľa.

Výsledná brand identity aplikácie KROS Fakturácia nie je pevne definovaný vizuálny a layoutový návrh, ale aplikácia, ktorá sa prispôsobuje používateľovi. A práve preto sa stáva „neviditeľnou“ a zároveň nenahraditeľnou.

V článku sa dozviete:
•  prečo jedna univerzálna persóna plynule počas dňa mení zariadenia a aplikácie
•  flexibilný layout optimalizovaný pre veľké monitory aj menšie displeje
•  prečo použiť už existujúci framework a nehľadať nové originálne riešenia
•  farebný systém navrhnutý pre light a dark mode
•  typografiu navrhnutú s dôrazom na čitateľnosť
•  personalizáciu používateľského prostredia aplikácie

Jedna univerzálna persóna, ktorá plynule počas dňa mení zariadenia a aplikácie

Kto sú klienti KROS Fakturácie?

Jednoduchá odpoveď je: všetci. Od malých živnostníkov, ktorí vytvoria 12 faktúr za rok a používajú mobil, až po profesionálov, ktorí 8 hodín denne riešia účtovníctvo pre viaceré spoločnosti.

Som drobný živnostník, fakturačný softvér je pre mňa neznámy vesmír. Ale som aj bežný používateľ mobilných aplikácií – ako cestovateľ, klient banky, predávam na Bazoši, … t. z. mám vytvorené návyky a vnútorné nastavenia, ako má vyzerať dobrá interakcia s aplikáciou.

Som profesionálna účtovníčka, ktorá pracuje 8 hodín denne na účtovníctve pre viacerých klientov. Pracuje v office na veľkom monitore a keď je čas priznania DPH, berie si firemný notebook na víkend domov a po večeroch na malom displeji notebooku dokončuje posledným klientom priznania DPH. Popri tom je aj cestovateľ, klient banky, kontroluje deťom školské výsledky cez mobilnú aplikáciu. Má vytvorené návyky a vnútorné nastavenia, ako má vyzerať a fungovať interakcia s aplikáciou.

Bežný aj profesionálny používateľ nie len KROS aplikácií počas dňa mení niekoľko rôznych person a plynule medzi nimi prechádza. Plynule prechádza medzi mobilom, veľkým monitorom v práci a displejom notebooku doma. Niečo začnem v práci na monitore a večer pri TV to dokončím na mobile. Nie je B2C ani B2B, je všetko v jednom.

Koncept jednej persóny definoval náš postup pri návrhu UX/UI dizajnu a brand identity. Vytvorili sme jedno riešenie so silnou vrstvou personalizácie.

Layout aplikácie – štandardné rozloženie menu, zoznamov, dokumentov a formulárov

Žiadne experimenty, ale štandardné a overené komponenty a riešenia. Webové aplikácie na spracovanie účtovníctva sú tu dlho a nie je potrebné vymýšľať nové koleso. Taktiež základné komponenty ako buttony, input boxy, zoznamy, formuláre, … toto všetko je dnes spracované v stovkách frameworkov. Stačia dobre nastavené vyhľadávacie kritériá a nájdete viaceré frameworky, z ktorých vyskladáte aplikáciu s optimálnym UX/UI dizajnom a aplikujete assety brand identity.

Nehľadali sme konkrétny framework, to sme nechali na KROS.
(Pre pripomenutie, navrhovali sme koncept brand identity a layout aplikácie. Preto sme nepoužívali konkrétny framework a naše návrhy neobsahujú návrhy komponentov ako zoznamov, formulárov, …)

Návrhy layoutu smerovali k zvýšeniu efektivity práce:

• Flexibilný layout pre rôzne veľkosti zobrazenia – monitor, notebook, mobil,

• Pracujem na väčšom monitore, prirodzene sa mi zvýši produktivita pridaním 3. stĺpca, napr. detail dokumentu spolu so zoznamom dokumentov,

• Pracujem na malom monitore, automaticky sa zmenšia komponenty (buttony, zoznamy, …), ľavé menu je kolabované – zmenšené na tenký vertikálny pás a hlavička sa zredukuje na minimálnu veľkosť.

2–stĺpcový layout

Vľavo je umiestnený vertikálny navigačný panel a centrálna pracovná plocha, ktorá môže obsahovať zoznam, dokument alebo blok nastavení.

Vertikálny navigačný panel má dve veľkosti: plnú – ikony s názvami, a zúženú – iba ikony.

Centrálna plocha môže obsahovať zoznam roztiahnutý na celú šírku (účelom je zobraziť maximálny počet stĺpcov) alebo formulár s pevnou maximálnou šírkou. Centrálnu plochu môže prekryť plávajúca plocha ukotvená pri pravom okraji – obsahuje dokument, nastavenia, help alebo akúkoľvek inú kontextovú informáciu.

3–stĺpcový layout pre väčšie monitory

Pridaním vždy zobrazeného zoznamu, napr. zoznamu faktúr alebo adries, vznikne 3–stĺpcový layout, ktorý zabezpečí prirodzený nárast plynulosti práce a pohodlia.

Ľavé vertikálne menu – sidebar

Zúženie ľavého vertikálneho menu rozšíri centrálnu plochu, ktorá môže obsahovať zoznam s viacerými stĺpcami alebo dokument so širšími input boxmi. Toto je rýchla cesta k zvýšeniu plynulosti práce a ak sa to spojí aj so zobrazením menších komponentov, malý displej sa môže stať plnohodnotným efektívnym nástrojom.

Farebná paleta optimalizovaná pre light a dark mode

Farebná paleta vychádza z vizuálnej identity spoločnosti KROS a je navrhnutá pre kontrastné zobrazenie farieb v svetlom aj tmavom režime.

Doplnkové farby slúžia pre grafické značky a symboly statusu rôznych entít, napr. stav faktúry, proces spracovania dokumentu, chybové hlásenia, …

•  Light mode: Lepšia čitateľnosť za denného svetla, menšia únava očí. Podľa výskumov u používateľov s normálnym zrakom vedie svetlý vzhľad aplikácie väčšinou k lepšiemu výkonu a sústredeniu.

•  Dark mode: Pre niektorých používateľov tmavý režim zvyšuje koncentráciu na obsah tým, že minimalizuje rozptýlenie okolitým svetlom a zameriava sa na to, čo je dôležité.

Sprístupnenie možnosti výberu svetlého alebo tmavého režimu prináša výrazné zvýšenie pohodlia a sústredenia používateľa. Súčasne je to dôležitý faktor pri výbere aplikácie – významný predajný benefit.

Typografia s dôrazom na čitateľnosť pri všetkých veľkostiach textu

V prvom kole návrhov sme vybrali 7 písiem, ktoré sme použili na dve obrazovky: zoznam faktúr a faktúru. Zvolili sme tradičné písma, ako IBM Plex Sans, ale aj Glory, ktoré má výraznú štylizáciu základných tvarov.

Následne sme urobili malé kvalitatívne testovanie na vzorke 7 ľudí rôznych profesií a veku. Výsledky neboli jednoznačné, a preto sme sa rozhodli, že finálny výber urobíme my. Priklonili sme sa k písmu Archivo, ktoré má klasické a ľahko rozpoznateľné znaky bez výrazných štylistických experimentov.

Kritériá, ktoré rozhodli:
•  neutrálna, dobre čitateľná kresba znakov aj číslic,
•  veľká stredná výška – pomer výšky malých a veľkých znakov,
•  číslica 1 so spodným serifom,
•  použitie vo všetkých textoch a veľkostiach: nadpisy, texty aj menšie popisy.

Prispôsobenie používateľského prostredia podľa individuálnych preferencií používateľa

Komfort používateľa je dôležitou súčasťou produktivity a pri širokom spektre zákazníkov KROS-u nie je možné, aby pevná – nemenná vizuálna identita aplikácie vyhovovala všetkým. A ak máte také množstvo používateľov ako KROS, aj jedna skupina je dostatočne početná na to, aby sme uvažovali o jej vizuálnych nárokoch.

Snaha dosiahnuť komfort a spokojnosť všetkých používateľov nás priviedla k myšlienke silnej personalizácie dizajnu aplikácie – vytváraniu vizuálnych tém.

Navrhli sme vizuálny systém, ktorý umožňuje prispôsobiť vybrané prvky a tým meniť celkový vizuálny charakter aplikácie. Všetky prvky brand identity smerujú k personalizácii vizuálneho zobrazenia celej aplikácie.

Účelom je zladiť vizuálne zobrazenie s cítením používateľa a vytvoriť vizuálnu a emocionálnu pohodu. Alebo vizuálne odlíšiť jednotlivých klientov, prípadne meniť nastavenia pre rôzne pracovné podmienky – v práci pri dennom svetle na veľkom monitore alebo večer doma pri nízkej intenzite osvetlenia na malom displeji notebooku.

Téma je tvorená viacerými prvkami:
1. Sidebar – ľavé navigačné menu: svetlé alebo tmavé,
2. Primárna farba: aplikuje sa na farbu ikon v sidebare, buttony, aktívne prvky a hlavičky,
3. Aktívne prvky: preberajú primárnu farbu témy,
4. Banner: preberá farbu témy, používateľ si môže vybrať z 3 možností: a) bez hlavičky, b) s farebnou hlavičkou, c) hlavička s fotografiou,
5. Pozadie: svetlé alebo tmavé.

Súčasťou témy je aj zmena hustoty zobrazenia:
•  štandardné alebo menšie texty,
•  2 veľkosti buttonov,
•  výška riadku a veľkosť textu v zoznamoch,
•  výška a veľkosť textu v input boxoch.

Zmena hustoty zobrazenia sa aktivuje aj automaticky pri zobrazení na menších displejoch, typicky na displeji notebooku.

Sidebar – ľavé menu: tmavý alebo svetlý vzhľad, rôzna primárna farba – farba ikon a buttonov.

Grafické hlavičky umožňujú navodiť pozitívnu emóciu a pocity, ktoré sú vysoko individuálne. Zlepší sa tým pracovné prostredie používateľov a ich vnímanie aplikácie. Zároveň ide o jednoduchý spôsob, ako odlíšiť agendy rôznych klientov, ktoré používateľ spravuje.

Ukážky rôznych kombinácií: svetlý a tmavý režim, kombinácia tmavého ľavého menu a svetlej centrálnej plochy, banner „s“ alebo „bez“ grafickej hlavičky.

Prínosy nášho riešenia brand identity a layoutu aplikácie KROS Fakturácia

Spoločnosť KROS je popredný, dlhoročný dodávateľ a trhom akceptovaný štandard pre ekonomické programy.

Pri návrhu layoutu a brand identity webových aplikácií KROS sme toto postavenie premietli do základnej tézy návrhu: nepotrebujeme kričať, nepotrebujeme prvoplánové vizuálne barličky. Spoločnosť KROS je etalón a štandard a primárna hodnota je v kvalite a podpore produktov, nie vo vizuálnych a UX experimentoch. Všetko, čo v aplikácii vykonávam, musí byť intuitívne a predvídateľné.

Zmeny, ktoré sú základom riešenia a splnili požiadavky klienta:
•  rozdelenie pracovnej plochy aplikácie na 3 – 4 časti na veľkých monitoroch,
•  automatická zmena hustoty zobrazenia na menších displejoch,
•  sidebar – ľavé navigačné menu, ktoré sa môže automaticky aj manuálne skrývať a zobrazovať,
•  farebná paleta optimalizovaná pre svetlý a tmavý režim,
•  konzervatívna typografia so zameraním na čitateľnosť pri rôznych veľkostiach textu,
•  prispôsobenie používateľského prostredia – kombinácia viacerých vizuálnych prvkov a technických nastavení umožňuje nastaviť preferované pracovné prostredie za účelom pracovnej pohody a zvýšenia produktivity.

Viac obrázkov a menej textu nájdete v prehľade našich prác – KROS Fakturácia

Prečítajte si Danielov článok o testovaní farieb – Farebná identita podložená testovaním