Design optimalisert med tanke på UI/UX: Axure vs Figma

I artikkelen bestemte vi oss for å fokusere på to løsninger som støtter utformingen av wireframes, mock-ups og prototyper - Axure og Figma.

Vi ønsket å analysere funksjonene deres og prøvde å svare på spørsmålet: Hvilken skal vi velge og hvorfor?

Kort historie om sammenlignet verktøy

Axure er en av de eldste programvarene for prototyping av web- og skrivebordsapplikasjoner. Den dukket opp på markedet i 2002, lenge før Figma. Det var en pioner på dette feltet som ikke krevde programmeringskunnskaper. Det ga også muligheten til å designe uten kode, og å se effekten av arbeidet nesten umiddelbart. Disse tre ubestridelige fordelene gjorde det til det beste inntil konkurrerende verktøy hadde dukket opp på markedet - Sketch (2010), InVision (2011), Adobe XD (2016) og Figma (2016).

Figma ble opprettet for å fylle et tomrom innen levering av gratis grafikkprogramvare for profesjonell bruk. Den første stabile versjonen av denne applikasjonen ble utgitt 27. oktober 2016. Fra begynnelsen fikk den stor popularitet blant brukere, men det var først i 2020 da den vant en ekstremt sterk markedsposisjon. I sammendrag, UX-undersøkelser eller rapporter for UI- og UX-design, er Figma alltid inkludert i TOP10. Merker som Apple, Airbnb, GitHub og Amazon er kjent for å ha brukt tjenestene til dette programmet. I tillegg garanterte en Forbes-artikkel fra 2020 selskapet global anerkjennelse.

 

Kostnader

Dette aspektet ser ut til å være ekstremt viktig for individuelle brukere. Dette skyldes den økende interessen for UX-design og verdien det gir. I dag utføres det ikke bare av UX-designere, men også av de som publiserer på Internett – bloggere, influencere og markedsavdelinger i organisasjoner. En tilgang til slike plattformer gir mulighet for tilpasning av hele innholdsarkitekturen, inkludert utforming av ulike grafiske former, for eksempel infografikk eller innlegg i sosiale medier.

Dessuten, for UX-designere og organisasjoner som lager IT-prosjekter, er dette standard arbeidsverktøy, hvis verdi vurderes ikke på grunnlag av pris, men funksjoner som optimaliserer tid og antall utførte aktiviteter. I prosessen med å velge den riktige løsningen er det først å fokusere på funksjonaliteten den har, for eksempel muligheten for å designe et WCAG 3.0-kompatibelt brukergrensesnitt, som støtter RWD-teknologi, uten behov for å redesigne separate visninger for hver enhet . Lage avanserte prototyper med ulike former for interaksjoner og gjensidige avhengigheter, for eksempel for nettbutikker, dataspill eller programvare fra en gitt bransje. Som både parallelt og ubegrenset i form av samarbeid med andre team involvert i prosjektet, samt med klienter.

Axure er tilgjengelig i tre betalte versjoner (Axure RP 10, Axure RP Team, Axure for Enterprise) fra $25 (per bruker), $45 (per bruker) og forhandlet pris for store selskaper (som et månedlig abonnement eller årlig avgift). Prislisten finner du på: https://www.axure.com/pricing. En stor fordel er muligheten til å teste programmet i løpet av en 30-dagers prøveversjon. Viktig informasjon for brukere av Axure RP 9! Etter oppgradering til Axure RP 10, mister systemet livstidslisensen.

Figma har en gratis startpakke (gratisversjon med mange begrensninger) og betalte versjoner: Profesjonell ($12 bruker/måned) og Organization ($45 bruker/måned). For mer informasjon, besøk leverandørens nettsted: https://www.figma.com/pricing/. Det som er interessant, til tross for mange begrensninger i grunnpakken, for eksempel opprettelsen av bare ett prosjekt, er det et ekstremt populært alternativ blant brukere.

Forskjeller i funksjonalitet er presentert i form av tabeller under prislistene. Dette gir mulighet for enkelt å sjekke hvilke funksjoner som er tilgjengelige i hvilken versjon.

 

Multiplattformløsninger som standard

Tilgjengeligheten av en gitt programvare på et hvilket som helst operativsystem er en standard for klienter. Det gjelder ikke lenger bare for de populære, som macOS eller Windows, men også for systemer som støtter mobile enheter. Denne trenden gjelder avanserte dataprogrammer, som til slutt skulle være skrivebordsapplikasjoner.

Kundenes forventninger øker stadig, og derfor må IT-løsningsleverandørene også tilpasse seg dette. Hvis en klient som besøker Play Store eller App Store ikke finner appen, han/hun leter etter, vil de være misfornøyd og raskt se etter et alternativ.

Er det praktisk å bruke mobilappen på enheter som smarttelefon eller nettbrett?
Ikke nødvendigvis, men derfor ble innovative teknologier som MHC eller Chromecast laget – for å kunne vise innholdet på store skjermer, for eksempel for presentasjon. Innenfor en mobilapplikasjon er det mulig for en klient eller andre ansatte å se mock-ups og legge til tilbakemeldinger ved bruk av kommentarer selv mens de er på forretningsreise.

Axure er tilgjengelig som:

skrivebordsapp for: macOS og Windows,
mobilapp - Axure Cloud (2019) for iOS og Android.

Figma er tilgjengelig som:

skrivebordsapp for: macOS og Windows,
nettstedsapp for bruk fra en nettleser,
i april 2021 presenterte Figma en demo for iOS- og Android-apper på YouTube-kanalen deres. Den er for øyeblikket i beta-testfasen.

 

Tilgang til den digitale ressursdatabasen

Bruken av multimediebiblioteker gjør det mye enklere å designe skjemaer, grafikk, modeller eller brukermenyer. Noen av dem er innebygd i programvaren, noen kan lastes ned gratis (som plugins), og noen er betalt.

I multimediebibliotekene vil man finne ferdige sett med komponenter som inneholder bl.a.

• autoskjemaer, ikoner, knapper for å lage infografikk eller CTA,
• menypaneler, verktøylinjer,
• maler, temaer og fargepaletter som kan endres,
• tilpassede fonter, tabeller og mange typer diagrammer.

I tillegg til ferdige sett, kan designere også bruke funksjoner for å legge til en bestemt stil til disse komponentene. For eksempel kan en enkel datatabell behandles på en slik måte at den blir en iøynefallende grafikk. Dette kan oppnås med:

endring av farge - fremhever et betydelig fragment,
format av en overskrift eller tekst med bruk av kursiv, fet skrift eller understreket,
fylle ut tabellområdet – legge til en bakgrunn (f.eks. bilde eller gradient) eller endre gjennomsiktigheten,
egendefinerte effekter – en mulighet for å sette hele eller delvise rammen eller fjerne den helt,
lag en 3D-effekt, legg til skygger eller roter overskriften vertikalt,
rutenettoppsett – en mulighet for å sjekke om en data i tabellen vil se bedre ut vertikalt eller horisontalt og hvor mange elementer i en linje som er optimalt.

Som et verktøy for å lage mock-ups og prototyper har Axure et innebygd ressursbibliotek, som leverandøren kaller et "widget-bibliotek". Alle funksjonene fokuserer først og fremst på funksjonalitet. De mest brukte elementene er knapper, rektangler, sirkler, plassholdere, overskrifter, tekstblokker, linjer, hot spots eller dynamiske paneler. Det er også verdt å skille mellom elementer som er nyttige for å beskrive mock-ups som klistrelapper, piler, markører og en samling ikoner. Dessuten kan UX-designere importere sin egen grafikk inn i programmet. Et stort sett med tilgjengelige funksjoner er tilstrekkelig til å lage en funksjonell mock-up eller prototype.

En fordel med dette systemet er muligheten for å installere widgets fra leverandørens nettsted og dele de som er laget av andre designere. I tillegg til biblioteket er det andre digitale ressurser tilgjengelig, for eksempel maler, grensesnitt for mobile enheter og verktøy for designere https://www.axurethemes.com/axure-templates.

I motsetning til Axure har Figma ekstremt rike digitale eiendeler delt inn i kategorier. Plattformen har vunnet popularitet blant UX-designere med et enormt utvalg av tilgjengelige ressurser og mangel på tilleggsavgifter. For å bla gjennom databasen, velg bare "Fellesskap" i brukerpanelet. Husk også å tilpasse Figma-plattformen for prosjektet ditt ved å installere plugins før arbeidet begynner. Nedlastingen er svært intuitiv, det tar bare å trykke på "Installer"-knappen.

 

Hvordan ble så enormt mange ressurser samlet på ett sted?

Fellesskapet spiller en stor rolle i utformingen av maler og komponenter som deretter er tilgjengelige på plattformer. Designere deler arbeid og ideer som kan importeres til biblioteker. I begge eksemplene er det også betalte alternativer, men det store utvalget av gratis plugins og utvidelser skaper muligheter for effektivt arbeid og tilpasning av plattformen.

 

Samarbeidsaspekt

Samarbeid er et sentralt element i samskaping av komplekse prosjekter. Det gjør at prosjektet kan deles opp i mindre deler, noen ganger også blant et betydelig antall ansatte. Å jobbe i et slikt system fremskynder hele prosessen betydelig, gir mulighet til å følge fremdriften i et prosjekt, og kommentere andres arbeid og foreta nødvendige modifikasjoner fortløpende. Det er også verdt å huske muligheten for å forhåndsvise prosjekter og rapportere kommentarer eller tvil på alle trinn av arbeidet.

De mest populære funksjonene for å forbedre samarbeidet.

 

 

Aspekter og funksjoner innledes i prosessen med UX-design

Uansett om man planlegger å lage en wireframe, eller low- eller high-fidelity mock-ups, begynner arbeidet med å lage et "Design System", så de ferdige komponentene som brukes i prosjektet. For å lage det, er det nødvendig å bestemme mottakeren av produktet, markedets behov, gjøre deg kjent med bransjespesifikasjonen og forstå merkevaren.

"Designsystemet" inkluderer blant annet:

• stilguide – dvs. visuell identifikasjon, et sett med retningslinjer angående typografi, farge, kommunikasjon med brukeren og andre elementer av visuell identifikasjon
• ferdige komponentbibliotek
• teknisk og funksjonell dokumentasjon
• elementer knyttet til brukervennlighet og tilgjengelighet

I prosessen med å designe, bør man også huske at mock-upene må være hensiktsmessig tilpasset enhetene som sluttbrukerne skal utføre dem på. Dette er ikke lenger bare dataskjermer, men ulike mobile enheter fra smarttelefoner til nettbrett og smart-TVer.

Innholdet i et prosjekt og alle dets elementer bør bruke Responsive Web Design-teknologien.
Siden det er et stort mangfold av både prosjekter og forventninger til klienter, er det andre funksjoner som er verdt å ta hensyn til.

• Intuitiv drift

Axure er ikke det enkleste verktøyet å bruke. Til å begynne med kan man føle seg litt overveldet av antall faner og funksjoner. Selv om applikasjonen fungerer i dra-og-slipp-teknologien og har et ekstremt omfattende grensesnitt. For eksempel, hvis man setter inn en widget fra Axure-biblioteket, er det mange skjulte funksjoner. Noen av dem er relatert til komponentstyling, noen til å gi interaksjoner, og noen er for prototypedesign. Dessuten har brukerens dashbord og sidepanel enda flere funksjoner.

Avanserte UX-designere er kanskje ikke enige i at Axure mangler intuitivitet. Det er imidlertid på grunn av deres erfaring og det faktum at de ble vant til applikasjonens grensesnitt. Det er sant at det vil ta mye lengre tid for en nybegynner å lære hele systemet og dets drift.

Figma er mye mer intuitivt, noe som bevises av et dynamisk økende antall brukere over hele verden. Den har også et dra-og-slipp-grensesnitt, et hovedpanel og to sidepaneler. Når man klikker på et element, på høyre side vises parametere for objektet som er delt inn i seksjoner, det gjør navigeringen gjennom applikasjonen mye enklere.

Brukerne ble vant til at antall funksjoner etter den første kjøringen er ganske begrenset. Paradoksalt nok er det en fordel med denne programvaren fordi man ikke føler seg overveldet. Daglig bruk forenkler også en installasjon av plugins valgt av brukeren, som velges i henhold til behov og vaner. Det gir en mulighet til å jobbe med et verktøy som er perfekt for en gitt bruker.
Det er også innledende å nevne et enormt antall pedagogiske materialer, inkludert videoopplæringer eller instruksjoner i form av gif, som leveres av brukere. Dessuten er det en enorm støtte fra andre Figma-brukere, både i form av plugins laget av dem (som er gratis eller betalt), eller Forum-replays.

• Oppretting av varianter av ferdige komponenter

Axure leverer funksjonen Component Views, som lager flere varianter av den samme komponenten på grunnlag av en original. De kan fritt modifiseres, og endringene man gjør vil være synlige, avhengig av konfigurasjonen, i alle de utformede komponentene eller kun på de utvalgte. En slik endring vil være synlig i hele prosjektet, i alle visningene som er designet til nå. Det er en løsning som gjør det mye enklere å jobbe med et prosjekt.

Figma tilbød ikke slike fasiliteter før i 2020, mens forbedringen av funksjonalitet ga muligheten til å lage ferdige komponenter – «Varianter». Med dem er det mulig å bestemme grunnlaget for nye komponenter og deretter modifisere dem til dagens behov. På grunn av denne endringen tilpasset Figma seg til trender og ble et konkurransedyktig produkt.

• Kloning av individuelle komponenter eller grupper av komponenter

Axure har ingen begrensninger i dette aspektet. Med kommandoen kopier/lim inn, som er velkjent for alle databrukere, er man i stand til å duplisere et hvilket som helst antall komponenter blant flere prosjekter.

I Figma kan denne prosessen gjøres litt annerledes, og krever installasjon av Sketch, Illustrator eller passende plug-in, for eksempel Konverter Figma til Sketch/XD. Dessverre er det lite praktisk når det gjelder et stort antall elementer.

• Teknologistøtte for responsiv webdesign

Axure har en innebygd funksjon for RWD kalt Adaptive Views. Det gir muligheten til å akselerere justeringen av visninger for mange enheter med forskjellige parametere (bruddpunkt).Knekkpunkter er grafiske verdier i piksler. De bestemmer utseendet til et element i en gitt visning, for eksempel på et nettbrett eller en smarttelefon.

Effektene av arbeidet kan observeres ved å åpne visningen i hvilken som helst nettleser. Dessuten er det fortsatt tilgang til bruddpunkter for hver komponent på flere sider, og det er mulighet for å endre dem i henhold til behovene.

I Figma ble problemet med å utforme flere forskjellige visninger delvis løst med Breakpoints-plugin. Det har imidlertid en grense for visningen av hele siden. Den andre løsningen er Adaptive Layout. Det er å grafisk designe brukergrensesnittet, som vil tilpasse seg forskjellige skjermstørrelser. Det bruker vanligvis flere faste layoutstørrelser, og når systemet oppdager størrelsen på nettleseren, velger det den som er best egnet for skjermen, for eksempel på en smarttelefon.

 

Prototype opprettelse

Prinsippet for å lage en prototype er dens optimalisering - jo færre handlinger man utfører, jo bedre. Som et resultat er det viktige når det gjelder å lage interaktive modeller eller responsive prototyper det brede spekteret av funksjoner for å effektivt støtte forretningslogikk.

 

Nedenfor presenterer vi mer avanserte elementer som øker designprosessen betydelig og reduserer arbeidsbelastningen på prototypen.

• Bredt utvalg av interaksjoner på ferdige komponenter og mange flere

Axure har seks grunnleggende typer interaksjoner: hendelser, saker, handlinger, tekstlenker, stileffekter og animasjoner. Hver av de ovennevnte kategoriene gir en mulighet til å inkludere individuelle parametere for hele sider, komponenter, widgets, rullegardinlister, avmerkingsbokser eller til og med tekstfelt.

Figma består bare av de mest grunnleggende funksjonene, for eksempel skjermovergangseffekter, kobling til én skjerm eller et element, angir start- og sluttpunkter. I sin tur, for å skjule ett element på skjermen, vil det være nødvendig å navigere gjennom lagene. Det er mulig å bruke Smart Animate-plugin, som skal live opp mock-upen med bruk av animasjoner.

• Kloningsinteraksjoner tilordnet komponenter eller hele visninger

Axure kunne raskt kopiere de allerede definerte verdiene, formatere og samhandle med utformede elementer eller visninger helt fra begynnelsen. Denne funksjonen er fordi Axure ble laget ikke bare med det formål å designe wireframes, men også for å lage avanserte prototyper.

Det fungerer på samme måte i Figma, det er viktig å gå inn i prototypeopprettingsmodusen – ellers vil man bare kopiere verdiene til formateringselementer uten interaksjoner. Inntil nylig var dette ikke mulig, men den nye funksjonaliteten gir større utsikter. Tidligere måtte designere se verdiene til prototypeelementer og angi dem manuelt. Dette er kanskje ikke problematisk hvis det er flere skjermer for mobilvisning å forberede, men i tilfellet med flere programvaregrensesnittkomponenter var det rett og slett kjedelig.

• Eksportere en interaktiv mock-up prototype (til HTML)

I Axure er det en innebygd funksjon for å eksportere de utformede mock-ups (også prototyper) til HTML. Ved å velge denne funksjonen kan man dele en interaktiv mock-up med andre brukere for visning.

I Figma er det behov for å installere Anima for Figma-plugin for å eksportere HTML- eller CSS-koder for modeller. I gratisversjonen er det mulighet for å eksportere kun ett prosjekt.

• Systemet gir også en mulighet til å sette multibetingede interaksjoner og matematiske funksjoner

Axure gir et sett med avanserte interaksjoner som gjør det mulig å gi en spesifikk funksjon med if/eller-formelen. Takket være dette, for eksempel innenfor en visning av en vogn, er man i stand til å gjenskape dens interaktivitet. Det er et alternativ for å bestemme varsler som vises etter å ha oppfylt noen betingelser, for eksempel hvis prisen på en ordre når x-beløpet, vil et felt for å angi en rabattkode vises eller en 20 % rabatt vil bli lagt til en gitt vare i vognen. På sin side, hvis prisen for varene i handlekurven når en verdi lik eller større enn x, vil det vises et varsel om gratis levering.

Figma har ikke så avanserte funksjoner som Axure. Å utføre en slik handling vil tvinge utformingen av hver skjerm separat: en for å angi en rabattkode, neste for 20 % rabatt, og en annen for gratis levering. Systemet gir imidlertid en mulighet til å kopiere visninger i prototypemodus, og deretter modifisere dem i henhold til behovene.

• Lage en grunnflyt og et diagram over hele prosessen

I Axure, på grunnlag av de opprettede visningene, gir rekkefølgen av interaksjoner og relasjonene mellom dem en mulighet til automatisk å generere et flytdiagram som vil være bemerkelsesverdig likt BPMN-diagrammer.

I Figma er det mulig å definere den grunnleggende arbeidsflyten mellom elementer, spesifisere rekkefølgen deres: begynnelse – interaksjon på et element, f.eks. navigering med musen over knappen, og deretter gå til neste skjermbilde.

 

Avslutningsvis, hva skal jeg velge?

Axure har utallige funksjoner når det gjelder både modellering og prototyping. For å lage avanserte mock-ups og prototyper med high fidelity vil Axure være perfekt.

Hvis man planlegger å utvikle MVP (Minimum Viable Product) prosjekter, lage grensesnitt, grafikk eller infografikk, gifs, animasjoner eller andre grafiske former, er Figma et valg. Et stort antall ressurser stilte for oss for å oppnå iøynefallende modeller.

Et viktig aspekt ved å velge riktig løsning er den skiftende virkeligheten. Det bør huskes at prosjekter kan utvikle seg over tid og endrede behov hos kundene. Designverktøyene utvikler seg også raskt. Dette skaper nye muligheter på hvert trinn.

 

Hva om det er vanskelig å bestemme seg?

Kombiner begge løsningene - den multifunksjonelle Axure og den svært intuitive Figma. Siden det er for en mer komfortabel å jobbe med Figma, er det en mulighet til å designe et designsystem og eksportere det til Axure ved å bruke Fra Figma til Axure-plugin eller importere fra Figma til Axure Cloud.

Men hvis Figma for deg nok, men mangler flere Axure-flaggskipfunksjoner, kan du teste en plugin kalt Axure. Da vil vi fritt kunne bruke funksjonaliteten som tilbys av Axure i Figma-applikasjonen. De mest populære funksjonene for å forbedre samarbeidet.