Što smo o UX trendovima čuli na Smashing Conference u New Yorku?

Koncept kolaborativne konferencije #SmashingConf #NYC je prvo što nas je oduševilo – naime, ekipa iz Smashing Magazinea je otvorila dva Google dokumenta s popisom svih radionica i predavanja te dala svim posjetiteljima pravo pristupa da mogu komentirati i postavljati direktna pitanja predavačima. Slobodno kliknite na link http://smashed.by/nyc1 + http://smashed.by/nyc2 (ako sam već dosadan) i saznajte sve informacije s jednih od važnijih UX konferencija. Nulti dan je započeo u impresivnom Microsoft Research centru u samom središtu Manhattana, dok su dva “prava” dana konferencije bila održana na Broadwayu, u jednom od modernijih kazališta – New World Stages.

Neću detaljno opisivati što se dešavalo dan po dan jer mislim da to možete iščitati i iz gornjeg “docsa”. Radije ću opisati teme za koje smo vidjeli da očito vladaju među UX kolegama:

• WPO (Web Performance Optimization)
• ARIA (Accessible Rich internet applications)
• Dizajn sustavi.

Te tri “teme” su nam bitnije od odabira web tehnologije, CMS-a, borbe Photoshop vs. Sketch ili ostalih pitkih automasturbativnih tema. Razlog je jednostavan – važne su krajnjem korisniku, a fokusom na njih će te postići da i vaša aplikacija bude kvalitetna i korisna tržištu.

Zašto je važan Web Performance Optimization?

Svako je predavanje na SmashingConfu barem na neki način spominjalo web performanse i brzinu učitavanja aplikacija, jer ipak… biznis oko web performansi je bukvalan i precizan. Optimiziran web olakšava rashodovnu stranu: manje je problema oko održavanja i hosting račun je manji. S druge strane, povećavamo prihodovnu stranu: veća brzina znači povećanje konverzija i samim time poslovni uspjeh aplikacije. Brže učitavanje znači i veći doseg do korisnika sa slabim mobitelima i vezama. Dva glavna predavača na temu su bili Patrick Hamann (CSS and the First Meaningful Paint) i Harry Roberts (Why Fast Matters) pa slobodno potražite u Google docsima njihove glavne zaključke. Ovdje prenosim samo neke od njih.

Temelji mjerenja web performansi su poznavanje glavnih metrika koje uopće i moramo mjeriti:

• Stare metrike koje više ne morate mjeriti: First byte, document complete, load event, requests/bytes, start render
• Moderne metrike koje bi trebali mjeriti: SpeedIndex, First Meaningful Paint, Time to Interact

Na kraju dana, performanse su inženjerska disciplina pa je logično da oko te teme postoji najviše alata za igranje. Ovo je klasični utility belt modernog web inženjera: Google Lighthouse Chrome ekstenzija, Webpagetest.org, https://github.com/filamentgroup/loadCSS, Dareboost.com, Speedcurve.com, Charles Proxy (throttle to specific connection (2G, 3G, etc)).

O poslovnim benefitima WPO-a

Zanimljivo predavanje oko alata je održao i Umar Hansa na temu Chrome Dev tools “A Modern Front-End Workflow with DevTools”. Prikazao je sve kratice, ‘cake’ i informacije oko maksimalnog korištenja Chrome dev toolsa za web produkciju. Sve informacije pogledajte na ovom docsu, a svi savjeti se također nalaze i na njegovom blogu.

Osvrnut ću se i na gore spomenute poslovne benefite, tako da ne pričamo samo o alatima. Recimo, Netflix je uštedio 43% hosting budžeta upalivši GZIP?! Teško za vjerovati, ali WPO stats kaže da je tako. Na toj stranici možete pratiti životne slučajeve ostalih kolega iz industrije te vidjeti generalne trendove, kako na front-end tako i na backend optimizaciji. Na primjer, kada se upitate koliko vaš web treba biti brz, poslovnjaci daju savjet da trebate biti brži barem od vašeg prvog konkurenta (to se mjeri pomoću stranice Dareboost.com). 🙂

Na kraju drugog dana, “show” je ukrao Jake Archibald sa svojim interaktivnim kviz predavanjem gdje je publika odgovarala na provokativna i backstabbing HTML5 performance pitanja (da, moguće je i naše teme Hamletovski obraditi :)). Cijelu kviz aplikaciju možete preuzeti na njegovom GitHubu.

ARIA ili Accesable Rich Internet Applications

Accessibility je imao svoje izraženo mjesto i na konferenciji Shift Split gdje je šefica developmenta Financial Timesa objašnjavala korištenje Pally CI alata za analizu dostupnosti web podataka. Svijet je doista mali, jer u New Yorku je predavanje održao “njezin” developer Patrick Hamann iz istog tima (te je opet koristio Financial Times kao dobar primjer web accessibilityja). Ovo su savjeti iz njihove radionice:

• Accessibility testing izvodite s pravim korisnicima koji imaju realne poteškoće i oni će vam dati najbolje komentare
• Accessibility se odnosi i na otežanost korištenja web-a u nepovoljnim uvjetima npr. kada vam je slobodna samo jedna ruka, na mjestima gdje je velika buka ili na mjestima gdje morate brzo “tapnuti” na ekran (UX/UI u automobilima)
• Pally CI je odličan alat za automatizirani monitoring accessibilityja web stranica
• Color contrast accessibility checker je jedna od prvih stvari koja se može provjeriti/promijeniti na web aplikaciji.

Accessibility je, isto kao i WPO, tema koja se prožimala kroz sva predavanja, a Brad Frost je to najbolje opisao:

Our work is done with other people, for other people.

Čak je i Nathan Curtis u svojem predavanju o dizajn sustavima rekao kako je accessibility prva stvar o kojoj moramo razmisliti pri dizajniranju Call-To-Actiona. Više o Nathanu i njegovom predavanju saznajte u zadnjoj sekciji ovog putopisa…

Uzlet dizajn sustava u produkciji online aplikacija

Dizajn sustavi nisu novi koncept, ali se primjećuje njihov uzlet u produkciji online aplikacija. Postojeći “uobičajeni” proces dizajniranja statičkih Photoshop predložaka je spor, nepregledan i krut za promjene te nam u 2017. treba novi način izrade interaktivnog dizajna. Dizajn sustavi rješavaju taj problem drugačijom produkcijom jer dizajner umjesto da kreira predefinirani Photoshop izgled web stranice, kreira jednu knjižnicu web elemenata koje developer s dizajnerom i klijentom, koristi pri “slaganju” web aplikacije. Pogledajte neke od popularnijih dizajn sustava pa će vam biti jasnije o čemu se radi:

• Salesforce design system
• Google material design
• Comet.

Navedeni dizajn sustavi omogućuju dizajnerima da ponovo koriste stilove, komponente i obrasce, što im daje vremena da se usredotoče na važnije korisničke probleme. Dobar dizajnerski sustav također omogućuje inženjerima da pouzdano implementiraju nove funkcije bez da (previše) ovise o dizajnerima ili klijentima. Brad Frost i Nathan Curtis su opisali neke od objektivnih benefita:

• Konzistentnost i kohezija: Više konverzija i $$$
• Brža produkcija: Više funkcija i više iteracija u kraćem vremenu
• Dijeljeni vokabular: Manje sastanaka, više produkcije i suradnje
• Jednostavnija testiranja: Predefinirana responzivnost i izgled UI-a
• Dokumentiranost: Dizajn sustav je zapravo centralni dokument dostupan svima
• Future-friendly temelji: Dizajn sustav će evoluirati tijekom vremena, a to mu je i smisao
• Tokeni: Dizajn sustavi podržavaju korištenje tokena tj. varijabli pomoću kojih definiramo važne odluke i informacije oko odabira boja, fontova, stilova itd.. Njih apliciramo kroz cijeli dizajn sustav.

Svi dizajneri bi trebali znati ponešto biznisa i psihologije

Iako se dizajn sustavi čine kao dosadna tema u kreativnim industrijama, #SmashingConf predavači su stavljali naglasak i na dizajn interaktivnog sadržaja i multidisciplinarni pristup sadržaju. Upravo dizajn sustav omogućava dizajnerima da se bave većim dizajn temama poput ilustriranja sadržaja i definiranja user flowova. Joe Leech je imao dobro predavanje na temu How to Design with Science without Losing the Magic, a predlaže da bi svi dizajneri trebali znati barem nešto biznisa i psihologije. Bili smo i na radionici od Yuko Shimizu koja je prikazala prekrasnu upotrebu ilustracija u oplemenjivanju interaktivnog sadržaja i samim time opisala web kao izrazito multidisciplinarno mjesto:

Nothing is a substitute for collaboration – Communication and collaboration beat deliverables.

Za kraj, tu je i foto galerija koja donosi dio onoga što smo vidjeli na konferenciji.

PS. Neuralab zapošljava Junior Web Developera pa ako ste stigli do kraja ovog članka, provjerite oglas, pozicija je možda kao stvorena za vas 🙂