UI/UX dizajn web stranica i aplikacija

UI/UX dizajn odlučuje šta osoba vidi, kojim redom, i šta se desi kada dodirne ili klikne, prije nego što produkcijski kod te odluke zaključa. Jasan interfejs smanjuje pitanja podršci, pomaže ljudima da završe kupovinu ili rezervaciju i čini sljedeću funkcionalnost jeftinijom za izgradnju, jer struktura već postoji.

U CodeWizu UI/UX dizajn stoji uz razvoj. Istražujemo kako ljudi koriste proizvod, crtamo wireframeove, gradimo Figma prototipove na koje se može kliknuti i odobrene ekrane pretvaramo u sistem komponenti koje naši inženjeri mogu da implementiraju.

Usluga je za kompanije koje pokreću web stranicu, web shop ili aplikaciju, timove koji redizajniraju proizvod koji izgleda zastarjelo ili gubi ljude na pola zadatka, i osnivače kojima treba prototip koji mogu staviti pred kupce prije nego što se obavežu na punu izgradnju. Ako već imate ekrane i treba ih pretvoriti u nešto što programeri mogu da proširuju, krećemo od toga.

Istraživanje korisnika i wireframeovi

Istraživanje korisnika je kratak pogled na to za koga je proizvod, šta pokušavaju da završe i gdje im trenutna web stranica smeta. Za marketinški sajt to mogu biti nekoliko razgovora sa naručiocem i čitanje analitike. Za proizvod koji je već uživo tu spadaju mjesta gdje ljudi odustaju, pretraga na sajtu i ekrani koji stvaraju tikete podrške.

Šta zaista gledamo

• Razgovori sa naručiocima: ciljevi, ograničenja, ko mora da odobri rad i šta „gotovo” znači u poslovnom smislu, a ne u nijansama plave.
• Analitika i pretraga: ulazne stranice, stranice izlaza, upiti pretrage na sajtu i uređaji. Ako brojevi postoje, koristimo ih prije nego što izmislimo novu početnu stranicu.
• Bilješke podrške i prodaje: pitanja koja ljudi već postavljaju mapa su nedostajućeg sadržaja i loših natpisa.
• Prolaz kroz postojeći proizvod: sami završavamo glavne zadatke i zapisujemo svaki slijepi kraj.
• Kratka provjera upotrebljivosti: kada wireframe ili prototip postoji, nekoliko ljudi sličnih vašim kupcima proba jedan zadatak. Očigledne prepreke obično isplivaju brzo. Mali uzorak ne predstavljamo kao statističku studiju.

Wireframeovi prije boje

Wireframe je raspored niske vjernosti: šta je na ekranu, šta je primarno i kako neko prelazi na sljedeći korak. Boja, fotografija i stil brenda čekaju. Taj redoslijed je bitan, jer uglačan ekran krije probleme u strukturi. Naručioci odobravaju tok dok su izmjene još jeftine, a programeri vide hijerarhiju sadržaja umjesto da je pogađaju iz hero slike.

Isporuke u ovoj fazi su mapa sajta, glavni tokovi (dolazak do registracije, pretraga do naplate, zahtjev do potvrde) i anotirani wireframeovi za šablone koji se ponavljaju: početna, lista, detalj, forma, nalog, prazno stanje i greška. Bilješke pokrivaju šta svaka kontrola radi, šta se prikazuje dok sistem čeka i kako izgleda neuspješan zahtjev.

Figma prototipovi koje možete isprobati prije razvoja

U Figmi wireframeovi postaju realan interfejs i prototip na koji ljudi mogu da kliknu. Radimo u jednom fajlu koji cijeli tim može da komentariše, sa komponentama umjesto nepovezanih okvira, tako da izmjena dugmeta ili polja forme ažurira svaki ekran koji je koristi.

Šta prototip pokriva

• Glavne tokove, povezane realnim prelazima, da recenzent može da završi zadatak umjesto da lista slajdove.
• Komponente i varijante za podrazumijevano, hover, fokus, onemogućeno, grešku i učitavanje. Nedostajuća stanja su mjesto gdje većina „jednostavnih” ekrana postane skupa u kodu.
• Auto layout, da se isti okvir provjeri na širini telefona i desktopa, a ne samo u veličini u kojoj je nacrtan.
• Varijable za boju, tipografiju i razmak, koje se kasnije mapiraju na CSS custom properties ili temu stacka u kojem gradimo.
• Build koji možete otvoriti na svom telefonu. Odobriti desktop prikaz, pa otkriti da forma ne staje pod palac, kasno je i skupo iznenađenje.

Komentari ostaju u fajlu. Kada se tokovi stabilizuju, programeri čitaju razmake, tipografiju i assete iz Figma Dev Modea, umjesto da mjere snimke ekrana.

Ovo su artefakti koje tipičan angažman za UI/UX dizajn proizvodi, i ko šta od toga koristi:

Dizajn sistemi i biblioteke komponenti

Dizajn sistem je skup odluka koje prestajete da donosite iznova: boje, tipografija, razmaci, radijusi i komponente sagrađene od njih. Biblioteka komponenti je taj sistem u Figmi i, kada i gradimo, u kodu. Bez njega svaka nova stranica izmišlja malo drugačije dugme.

Prvo tokeni, zatim komponente

Krećemo od tokena, imenovanih vrijednosti koje dijele dizajn i kod. Dugme koristi token primarne boje, token razmaka i token radijusa. Kada se brend pomjeri, izmjena je jedna vrijednost, a ne potraga kroz četrdeset okvira.

Povrh tokena dizajniramo komponente koje se ponavljaju: dugmad, linkove, polja, selecte, checkboxove, obavijesti, kartice, navigaciju, tabele, paginaciju, prazna stanja i dijaloge. Za svaku pišemo kada se koristi. Drugi stil dugmeta traži razlog. Jedna kampanjska stranica može ostati na malom skupu zajedničkih stilova. Web shop ili aplikacija koja će rasti treba dokumentovan sistem, sa istim imenima u Figmi i u kodu.

Responzivni web dizajn

Responzivni web dizajn znači da se raspored mijenja sa širinom prozora, načinom unosa i sadržajem, umjesto da se desktop slika smanjuje dok se ne raspadne. Dizajniramo telefon, desktop i široki desktop, jer raspored koji radi samo na jednoj širini nije gotov.

Prelamanje, ne skupljanje

• Navigacija koja se da koristiti palcem i i dalje ima smisla mišem: jasan meni, vidljiva trenutna stranica i nijedna akcija koja postoji samo na hover.
• Tekst koji ostaje čitljiv bez štipanja, ograničena skala veličina i dužina reda koja se ne rasteže preko ultrawide monitora.
• Mete dodira i kontrast provjereni prema WCAG 2.2: najmanje 4.5:1 za običan tekst, a primarne kontrole udobno veće od minimuma 24 sa 24 piksela.
• Slike sa stvarnim kadriranjem za uske ekrane, a ne hero koji naslov gura ispod pregiba. Teške slike rade i protiv cilja za Largest Contentful Paint koji Google preporučuje, ispod 2,5 sekunde, zato su dizajn i performanse jedan razgovor. Pisali smo o tome kako pristupamo PageSpeedu i Core Web Vitalsima.
• Tabele, filteri i duge forme dobijaju raspored koji radi na telefonu: složeni redovi, ljepljive akcije ili smišljeno pojednostavljenje. Horizontalni scrollbar nije plan.

Okvire provjeravamo na širinama koje vaša analitika zaista pokazuje, pa još jednom u browseru. Figma nije rendering engine. Fluidna tipografija, prelamanje i ponašanje skrola potvrđuju se u kodu.

Landing stranice usmjerene na konverziju

Landing stranica ima jedan posao. Sve na njoj ili pomaže tom poslu ili mu konkuriše. Kampanjske stranice, stranice usluga i stranice proizvoda dizajniramo oko jedne primarne akcije: zatražiti ponudu, početi probu, zakazati poziv, dodati u korpu ili završiti korak naplate.

• Ponuda je razumljiva bez skrolovanja na telefonu: šta je, za koga je i šta dalje.
• Dokaz stoji uz tvrdnju. To su činjenice iza kojih možete stati, kao što su konkretna specifikacija, cijena, rok isporuke ili logo koji imate dozvolu da pokažete. Ne izmišljamo testimonijale ni statistiku da popunimo prazninu.
• Forme traže ono što sljedeći korak treba, a ne cijeli CRM zapis. Svako suvišno polje je razlog da neko ode.
• Sporedni putevi (detalji, FAQ, poređenje) postoje, ali ne nadjačavaju primarno dugme.
• Stranica ostaje brza. Pažljivo složen tekst koji učita megabajt nekorištenih fontova i dalje gubi ljude.

Za web shopove isto razmišljanje važi za stranice kategorija, proizvoda i korpe: jasna cijena, dostupnost, dostava i put koji se ne resetuje. Taj sloj smo opisali u tekstu o tome kako WooCommerce, Shopify, PrestaShop i Magento pretvaramo u prodavnice koje konvertuju. Test ima smisla tek kada ima dovoljno saobraćaja da se rezultat pročita. Ispod toga uklanjamo očigledno trenje umjesto da vodimo prazan eksperiment.

Predaja dizajna koju programeri mogu da izgrade

Većina dizajna padne u procjepu između fajla i repozitorijuma. Taj procjep zatvaramo tako što komponente zovemo onako kako će se zvati u kodu, izvozimo samo assete koji stvarno trebaju i zapisujemo stanja koja se lako zaborave: prazno, učitavanje, validacija, odbijena dozvola, offline i duga riječ u dugmetu koja prelomi u dva reda.

Sadržaj je stvaran tamo gdje ga možete dati. Tekst-popuna krije duži naslov i naziv proizvoda koji je cijela rečenica. Bilježimo i redoslijed fokusa i labele za dugmad koja su samo ikonica, da pristupačnost ne bude spisak otkriven poslije objave.

Pošto CodeWiz i dizajnira i gradi, predaja je često interna: ljudi koji su nacrtali sistem implementiraju ga u WordPressu, Laravelu ili Reactu. Kada već imate programere, predajemo Figma biblioteku, spisak tokena i kratak vodič, i ostajemo dostupni dok se grade prvi šabloni.

Česte greške u UI/UX dizajnu

• Dizajn samo desktop srećnog puta, pa se raspored za telefon i stanja greške otkriju tokom razvoja.
• Tekst-popuna kraći od stvarnog sadržaja, pa ništa ne staje kada stigne pravi tekst.
• Previše veličina slova, sivih nijansi i stilova dugmadi, bez pravila koje je primarno.
• Glavna akcija sakrivena ispod visokog heroa, karusela ili videa koji se sam pušta.
• Nema stilova fokusa, pa korisnik tastature ne vidi gdje se nalazi.

Šta utječe na cijenu UI/UX dizajna

Procjenu dajemo poslije kratkog pogleda na proizvod, a ne samo prema broju stranica. Faktori koji pomjeraju obim posla su poznati:

• Koliko ima jedinstvenih šablona i tokova, i koliko stanja svaki treba.
• Da li istraživanje kreće od nule ili od analitike, snimaka i sajta koji je uživo.
• Novi vizuelni jezik ili proširenje brenda koji već imate.
• Samo stranice, ili dizajn sistem koji će drugi ljudi nastaviti da koriste.
• Jezici. Duži stringovi, pismo zdesna nalijevo i posebni rasporedi dodaju stvaran posao.
• Samo dizajn, ili dizajn plus implementacija, i koliko je krugova revizije u planu.

Fokusirana brošura ili jedna landing stranica mali je projekat. Aplikacija sa više uloga i dizajn sistemom nije. Kažemo šta kupujete prije nego što rad počne, u istom duhu kao naš pristup vrhunskom razvoju bez vrhunskih cijena.

Kako radimo

1. Upoznavanje: dogovaramo publiku, primarne zadatke, poslovni cilj i šta već postoji: brend, sajt, analitika, sadržaj.
2. Tokovi: mapiramo puteve koji su bitni i izbacujemo one koji ne zaslužuju mjesto u prvom izdanju.
3. Wireframeovi: struktura i hijerarhija sadržaja, pregledani prije bilo kakvog vizuelnog uglačavanja.
4. Interfejs i prototip: vizuelni dizajn u Figmi, komponente i prototip na koji se klikće, koji možete isprobati na telefonu.
5. Revizija: testiramo glavni zadatak, rješavamo komentare i zaključavamo stanja koja programerima trebaju.
6. Predaja ili izgradnja: tokeni, komponente i specifikacije idu u implementaciju, koju možemo odraditi mi, uz podršku kako se dodaju novi ekrani.

Zašto CodeWiz

• Dizajn i inženjering zajedno: dizajniramo interfejse koje smo spremni da izgradimo, u WordPressu, Laravelu, Reactu i ostatku full-stack prakse.
• Tehnologija u službi zadatka: interfejs postoji da se završi poslovni cilj, a ne da pokaže trend.
• Obim po mjeri: landing stranica dobija landing stranicu. Proizvod koji raste dobija sistem. Veći obim ne prodajemo kao podrazumijevani.
• Otvoreni alati tamo gdje pomažu: Figma za dizajn, a ispod toga open-source stack kada gradimo, tako da niste vezani za vlasnički frontend.
• Poštene cijene: vrhunski rad bez vrhunskih cijena, iz Banje Luke, na daljinu sa klijentima lokalno i međunarodno. Više o CodeWizu.

Često postavljana pitanja

Koliko košta UI/UX dizajn?

Zavisi od broja tokova, koliko istraživanja treba, da li želite dizajn sistem i da li gradimo i frontend. Jedna landing stranica i proizvod sa više ekrana različiti su projekti. Pisanu procjenu dobijate poslije upoznavanja, prije nego što dizajn počne.

Koliko traje projekat UI/UX dizajna?

Mali sajt ili landing stranica često traju par sedmica od upoznavanja do odobrenog prototipa. Proizvod sa više uloga, dizajn sistemom i provjerama upotrebljivosti traje duže i obično se dijeli na prvo izdanje i nastavak. Dogovaramo ko potpisuje i koliko brzo, jer je vrijeme revizije dio roka.

Da li samo dizajnirate ili i gradite?

I jedno i drugo. Nekim klijentima treba Figma biblioteka i čista predaja njihovim programerima. Drugi žele da dizajniramo i implementiramo sajt ili aplikaciju. Samo dizajn je uobičajen angažman kada tim već čeka da gradi.

Da li nam treba istraživanje korisnika za mali sajt?

Treba vam jasna slika posjetioca i zadatka. Za mali sajt to mogu biti nekoliko razgovora i pogled na trenutne stranice. Dublji prolaz se isplati kada ljudi već ne uspijevaju u nečemu što možete izmjeriti, kao što su naplata, registracija ili pronalaženje usluge. Reći ćemo ako teža studija ne bi promijenila dizajn.

Možete li redizajnirati sajt bez ponovne izgradnje?

Često da. Možemo osvježiti šablone, pojednostaviti navigaciju i ponovo izgraditi ključne landing šablone, a backend koji radi ostaviti na mjestu. Kada je problem u strukturi sadržaja, vizuelno osvježenje to neće popraviti, i to ćemo reći.

Šta vam treba od nas da počnemo?

Za koga je sajt ili aplikacija, jedna ili dvije akcije koje su bitne, postojeći materijal brenda i pristup analitici ako je sajt već uživo. Nacrt teksta pomaže. Ako teksta još nema, dizajniramo sa realističnom zamjenom i ostavljamo mjesta za prave rečenice.

Spremni da razjasnite interfejs?

Recite nam šta ljudi treba da mogu da završe na sajtu ili u aplikaciji, a mi ćemo predložiti istraživanje, prototip i da li dizajn sistem spada u prvi krug. Javite nam se da prođemo kroz to, ili pogledajte ostale naše usluge razvoja.