„Fale nam ikonice semafora u stilu postojećih.“
Tako je sve počelo kad smo zatrebali nove ikone koje smo morali postaviti na jedno od naših softverskih sučelja. Trebali smo to hitno, a budući da ih nismo imali, razvojni inženjeri pitali su me mogu li to nacrtati. Pitao sam gdje se nalaze primjeri postojećih elemenata potrebnog dizajna da znam u kojem stilu treba dizajnirati. Uputili su me na par mjesta na kojima se mogu naći elementi i komponente dizajna, izdizajnirao sam ikonice i to se implementiralo. Tada sam saznao da skoro svaki projektni tim ima neke svoje specifičnosti korisničkog sučelja (UI), a komponente za dizajn se nalaze na različitim mjestima.
Nakon toga, da se olakša developerima, skupili smo sve design elemente i komponente svih softverskih rješenja na jedno mjesto te dali upute developerima gdje se i kako mogu pronaći i koristiti. Mali zahvat, ali se ispostavio jako korisnim. Prvi korak je napravljen.
U nadolazećim mjesecima, za postojeća rješenja izrađivali su se novi elementi dizajna, a budući da su se radile nove funkcionalnosti, trebalo se pozabaviti i novim korisničkim doživljajem (UX).
U međuvremenu smo započeli s novim (CRM) projektom za kojeg je na temelju analize zahtjeva trebalo rascrtati wireframe i pokazati klijentu. Dotada je bila praksa da se ekrani mockupiraju (skiciraju) i prilažu u dokumente analize i zahtjeva te takvi šalju klijentima na odobrenje. Nakon odobrenja, dokument analize i dizajna dao bi se developerima koji su na temelju njega i postojećih dizajn elemenata radili frontend (korisničko sučelje).
Odlučili smo malo promijeniti proces. Nacrtali smo wireframe te poslali klijentu da može pogledati prijedlog i komentirati direktno putem linka. Nakon usuglašavanja wireframe-a, išlo se sa rascrtavanjem funkcionalnog dizajna i klikabilnog prototipa. Tek nakon usuglašavanja prototipa s klijentom, developeri su dobili zadatke izrade korisničkog sučelja. Ovo je bio još jedan dosta velik korak u kojem smo znatno unaprijedili (i ubrzali) rad na implementaciji frontend sučelja.
Klijent je zadovoljan, mi smo zadovoljni… No jesmo li?
Prekretnica za jasnu odluku o potrebi implementacije product designa u proces razvoja softvera nismo trebali dugo čekati. Uskoro smo startali s jednim velikim i zahtjevnim CRM projektom. Za ovakav projekt neke stvari su se morale dodatno unaprijediti. Na temelju postojećih procesa analize i developmenta, definirali smo nove procese product designa.
Nakon što smo uspostavili jasne smjernice što je to product design i čime bi se trebao baviti, uslijedile su prezentacije i radionice s cijelim sektorom razvoja softvera. Vrlo brzo, više se nismo bavili samo crtanjem sučelja na temelju analize proizvoda, već je dizajniranje proizvoda preraslo u diskusije oko informacijske arhitekture, optimizacije UX-a, izrade različitih i specifičnih korisničkih priča, flow-ova, wireframe-ova, komponenata, prototipova i još mnogo toga.
Za novi projekt je zamišljeno da se za prvu veću CRM cjelinu napravi novo sučelje i elementi koji će kasnije pokrivati sve, međutim, kako je došla druga cjelina, vidjelo se da to baš neće biti tako kako smo zamislili te da ipak trebamo nove elemente i komponente. I tako puta 5, tj. identično za svaku od velikih projektnih cjelina. Od inicijalnih 100tinjak elemenata i 40-tak prototip ekrana, koliko ih je bilo za prvu cjelinu, došli smo do 500+elemenata (komponente, ikone, ilustracije, templateovi) i 300+ prototip ekrana.
Kako sad to sve zajedno spojiti i kako objediniti elemente i ekrane?
Proučavanje raznih primjera dovelo nas je do zaključka da za ono što mi radimo (i isporučujemo) trebamo Design sustav.
Prvi korak u kreiranju istog je StyleGuide (Guidelines). Pa idemo onda napraviti to. Imamo brdo materijala koji smo do sada isproducirali, samo ga treba logično i pametno posložiti.
Temelj dizajna napravili smo na početku: stilove (boje, tipografiju, gridove, containere, prorede, itd.), osnovne elemente i njihove instance (buttone, forme, navigaciju, tabele, modale, itd.) i ikonografiju. Idemo dalje…
Ključna premisa:
StyleGuide mora služiti kao „single source of truth“ smjernica za dizajn korisničkih sučelja i omogućiti development timovima implementaciju konzistentnog dizajna za sve proizvode/aplikacije koje radimo.
Inspiracija za kreiranje Design StyleGuidea bili su ozbiljni Design sustavi pa ispod navodim par primjera:
Google Material Design System
Apple Human Interface Guidelines
Atlassian Design System
Uber Design System
Ant Design System
Shopify Design System Polaris
IBM Carbon Design System
Mailchimp Design System
Salesforce Lightning Design System
Audi DesignSystem
I tako se tijekom projekta napravio sveobuhvatni StyleGuide koji uključuje sve što je potrebno dizajnerima za osmišljavanje dizajna i korisničkog doživljaja te razvojnim programerima za kreiranje konzistentnog korisničkog sučelja.
Sad kad smo objasnili kako smo došli do StyleGuidea, krenimo u pobliže upoznavanje i njegov (skraćeni) pregled.
SEDAM Design StyleGuide sastoji se od smjernica za stilove, komponente, ikone, mikro-interakcije i smjernice kako se što primjenjuje na specifičnim ekranima.
Unificirani stil donosi konzistentnost za sve poslovne aplikacije.
SEDAM StyleGuide koristi osnovnu temu plave boje.
To uključuje zadane boje:
Koristi se Inter font za sve naslove, titlove, tekst i natpise za jedinstveno iskustvo tipografije. Hijerarhija se prenosi putem razlika u težini fonta (Regular, Medium, Bold), veličini, razmaku između slova i veličini slova.
Koristi se bazni razmak od 8px za sve vrste ekrana (mobitel, tablet i desktop). Metode razmaka koriste osnovne linije, ključne linije, padding i inkrementalni razmak za podešavanje omjera i spremnika.
Komponente su interaktivni elementi za stvaranje korisničkog sučelja. Korisničko sučelje se stvara gradivim blokovima koristeći metodologiju Atomic design-a.
Gumbi korisnicima omogućuju poduzimanje radnji i odabir klikom ili dodirom.
Tekstualna polja omogućuju korisnicima unos i uređivanje teksta. Za unos ili promjenu podataka mogu se koristiti tipkovnica i miš.
Forms su skupine komponenata kao što su drop down meniji, kalendar, forme za umetanje datoteka, forme za korake i slično. Ove komponente su za sada grupirane u forme, ali će se u budućnosti (kako će se sustav razvijati) razdvojiti u zasebne cjeline.
Navigacija omogućuje pristup odredištima u aplikaciji. Postoje dvije vrste navigacije: Top bar i Side-in navigacija.
Tablice s podacima prikazuju skupove podataka kroz retke i stupce.
U karticama se nalazi radnja i sadržaj specifične teme.
Modal je plutajući sloj preko trenutne stranice radi dobivanja povratnih informacija korisnika (npr. dijaloški okvir za potvrdu) ili prikaza informacija.
Kad postoji više od nekoliko mogućnosti za odabir, može ih se umetnuti u padajući izbornik. Lebdenjem (hover) ili klikom na okidač pojavit će se padajući izbornik koji omogućuje odabir opcije i izvršavanje odgovarajuće radnje.
Ikona je grafički prikaz značenja. Ikone se mogu koristiti za izražavanje radnji, stanja, pa čak i za kategorizaciju podataka. Ikone su jedinstvene i izrađene isključivo za SEDAM StyleGuide, a osmišljene su za dosljednost na više platformi i pridržavaju se sljedeća dva načela:
Podržani su formati .svg i icon-font.
Boxevi sa statistikama i grafovima koriste se na nadzornim pločama (tzv. Dashboards). One pružaju pregled podataka za donošenje odluka. Nadzorne ploče odvajaju sučelje za analizu podataka na nekoliko dijelova. Obično su njihovi izgledi strukture "sažetak i opis", koji prikazuju preglede cjelokupne informacije s različitim aspektima. Nadzorne ploče mogu pomoći korisnicima da otkriju trenutne indikacije ili probleme.
Mikrointerakcije su pojedinačni trenutci u dizajnu proizvoda koji ostvaruju određeni zadatak, a istodobno poboljšavaju upotrebljivost proizvoda. One su posvuda i možemo reći da su one most između korisničkog sučelja (UI) i korisničkog doživljaja (UX). Ukratko, mikrointerakcije pomažu učiniti korisničko sučelje izražajnim i lakim za korištenje.
U SEDAM Design StyleGudeu postoji i niz drugih komponenti te smjernica kako se elementi i komponente koriste na specifičnim ekranima, a koji nisu obuhvaćeni člankom.
Jedinstven i sveobuhvatan StyleGuide koji omogućava konzistenciju UX/UI svih budućih produkata je nešto na što smo jako ponosni i što nas uvrštava među rijetke tvrtke na ovom dijelu tržišta koje ga imaju.
Cijeli SEDAM StyleGuide možete pogledati na linku: SEDAM Design StyleGuide, a navigira se klikom na ikonu menija (gore lijevo) koja otvara scrollabilni izbornik.
StyleGuide će se u budućnosti još razvijati, a to podrazumijeva održavanje i dorade UI elemenata. Sljedeći veći korak je izrada Code Library-a. Već smo napravili pripremu za kreiranje i sistematizaciju, a treba još dogovoriti na koji način spojiti StyleGuide sa Code Libraryjem i gdje ga postaviti (git, web library, itd.).
Zadnje što planiramo je zaokruživanje priče i izradu kompletnog Design sustava, ali o tome više kad dođemo do toga…
I za kraj, što je s Product Designom u SedamIT? Plan je i dalje usavršavati procese i načine suradnje, kako interno, tako i s klijentima, te primjenjivati novo stečena znanja kako bi što kvalitetnije izradili proizvode po mjeri klijenata.
Ono što smo naučili i što sada nepobitno znamo je da, ukoliko želimo ostati stručni u svom području, Product design je nezaobilazan proces u kreiranju softverskih proizvoda.
Sedam IT d.o.o.
Koledovčina 2, Zagreb → prikaži na karti
tel: +385 1 2353 777 email: info@sedamit.hr
Prati nas
Izrada internetske stranice sufinancirana je sredstvima Europske unije iz Europskog fonda za regionalni razvoj.
