Byg Realistiske Mobilprototyper med Axure RP

I den hastigt voksende verden af mobile applikationer er evnen til at validere et design, før man investerer tungt i udvikling, afgørende for succes. En af de mest effektive metoder til dette er interaktiv prototyping, og et af de mest kraftfulde værktøjer på markedet er Axure RP. Dette værktøj giver dig mulighed for hurtigt at skabe detaljerede prototyper til både mobilapps og hjemmesider uden at skrive en eneste linje kode, hvilket sparer dig for betydelige udviklingsomkostninger og fremskynder designprocessen. I denne artikel vil vi dykke ned i, hvordan du kan udnytte Axure RP til at skabe overbevisende mobilprototyper, der kan testes med rigtige brugere, og dermed sikre en optimal brugeroplevelse fra starten.

Hvad er en Prototype, og Hvorfor er den Vigtig?

Før vi går i gang med de tekniske detaljer, lad os definere, hvad en prototype er, og hvad den ikke er. En prototype er et designartefakt, der primært bruges til slutbrugertest og til at kommunikere funktionalitet til interessenter inden for forretning og udvikling. Det er ikke meningen, at det skal være en fuldt fungerende enhed med live dataforbindelser, selvom det i nogle tilfælde kan være muligt. Den bedste testprototype indeholder kun det, du har brug for til dit formål, og intet mere. Målet er at designe hurtigt, teste det, fejle hurtigt og lære noget. Dette er den grundlæggende årsag til, at du laver en prototype. Det er en aktivitet med lave omkostninger, der sparer dig tid og betydelige udgifter i løbet af et designprojekts levetid.

I mobilapplikationsrummet, hvor kontekst og individuelle enheder spiller en vigtig rolle for, hvordan et produkt opleves, er validering af et design gennem brugertest endnu mere kritisk. Interaktive prototyper giver dig en gennemprøvet metode til hurtigt at få dit design ud på en brugers enhed og i deres hænder.

Introduktion til Axure RP: Et Kraftfuldt Prototyping-Værktøj

Axure RP er et værktøj til hurtig prototyping, der kører på både Mac og Windows. Det giver dig mulighed for at skabe interaktive prototyper til desktop-hjemmesider og mobile produkter uden at skrive kode. Dette gør det til et ideelt valg for UX-designere og produktudviklere, der ønsker at visualisere og teste komplekse interaktioner og funktionalitet, der føles meget realistiske.

En enkelt brugerlicens til Axure RP koster 589 USD, hvilket giver dig mulighed for at installere softwaren på to computere. Dette giver fleksibilitet for professionelle, der arbejder fra både kontoret og hjemmet.

Alternativer til Axure RP

Mens Axure RP er et robust valg, findes der også andre værktøjer, der kan bruges til lignende formål. Nogle populære alternativer inkluderer:

• iRise Studio: Et omfattende værktøj til virksomhedsprototyping.
• Balsamiq: Kendt for at skabe klikbare wireframes og low-fidelity prototyper.
• Microsoft SketchFlow: Et godt valg, hvis du allerede befinder dig i et .NET-miljø.

Valget af værktøj afhænger ofte af projektets omfang, teamets præferencer og det eksisterende teknologiske økosystem.

Kom i Gang med Mobil Prototyping i Axure RP

Den første ting, du skal gøre, er at oprette en ny Axure-fil. Derefter skal du opsætte dit projekt korrekt for mobil, hvilket er afgørende for en realistisk gengivelse på enheder.

Opsætning af Dit Mobilprojekt

For en mobil hjemmeside eller app skal du oprette prototypernes sider i en smartphone-venlig bredde og højde. Hvis du sigter mod iPhone, skal du oprette en side, der er 320 × 480 pixels. Hvis du designer til iPad, er 1024 × 768 pixels et godt udgangspunkt. Da de fleste mobile sider løber længere end enhedens skærmhøjde, er det vigtigere at fokusere på at få bredden rigtig. Disse bredder fungerer på både Retina- og ikke-Retina iOS-skærme. For Android-telefoner fungerer en bredde på 480 pixels normalt godt, selvom en 320-pixel bred version ofte kan bruges til mobilwebtest på tværs af platforme.

Det er vigtigt at huske, at Axure er et WYSIWYG (What You See Is What You Get) designværktøj, og du kan ikke størrelsesjustere sider i procent af skærmens bredde, hvilket ville være ideelt. Din prototype vil ikke altid udvide sig til at fylde skærmens bredde, når du vender enheden fra stående til liggende orientering, så tag dette i betning, hvis din app normalt vil blive brugt i liggende tilstand.

Brug af Widget-biblioteker og Masters

For at skabe en prototype af en native app for Android eller iPhone kan du starte med at tilføje eksisterende widget-biblioteker til Axure. En liste over gratis og betalte widget-biblioteker vedligeholdes på Axures hjemmeside. Disse biblioteker indeholder ofte forudbyggede UI-elementer som knapper, tekstfelter og navigationsbarer, der efterligner native app-design.

Hvis du har adgang til en visuel designressource og har brug for en højere grad af detaljer, kan du få denne ressource til at skabe faneblade, startskærmsikoner og andre widgets. For en lavere detaljeringsgrad kan de former og objekter, der er indbygget i Axure, være alt, hvad du behøver.

Et vigtigt koncept i Axure er Masters. En master er en genanvendelig komponent, der kan tilføjes til enhver side i din prototype. Masters er kraftfulde, fordi enhver ændring, du foretager i en master, afspejles i hver enkelt forekomst af den i din prototype. Dette er ideelt til elementer som sidehoveder, fodpaneler eller navigationsbarer, der vises på tværs af flere skærme, hvilket sikrer konsistens og effektivitet.

Dynamiske Paneler og Tilstande

En hjørnesten i avanceret prototyping i Axure er brugen af dynamiske paneler. Et dynamisk panel er en widget, der kan indeholde flere 'tilstande' (states), som er forskellige visninger af en del af skærmen baseret på en brugerhandling eller værdien af en variabel. Dette er utroligt nyttigt for at simulere skærmskift, indholdsændringer eller interaktive elementer som f.eks. faneblade eller foldbare sektioner.

Du kan placere et dynamisk panel på din kanvas og definere flere tilstande inden i det. Hver tilstand kan indeholde forskellige widgets og layout, og du kan skifte mellem dem baseret på brugerinteraktioner. Dynamiske paneler kan også gøres scrollbare, hvilket er essentielt for mobilindhold, der ofte overstiger skærmens højde. Du kan vælge at 'Aldrig Vis Rullepaneler' for at bevare et rent og native app-lignende udseende.

Navngivning af Objekter og Interaktivitet

En god praksis i Axure er altid at navngive de objekter, du inkluderer i din prototype. Efterhånden som din prototype bliver mere kompleks, eller når flere mennesker bidrager til dens udvikling, gør disse navne objekter lettere at identificere fra en lang liste. En systematisk navngivning, f.eks. ved at bruge en variant af Ungarsk notation (f.eks. 'btnSendBesked' for en knap eller 'txtEmailInput' for et tekstfelt), kan spare meget tid og frustration.

For at gøre din prototype interaktiv skal du bruge Axures mange indbyggede begivenhedstyper. Disse inkluderer:

• OnClick: Når et element klikkes.
• OnMouseEnter / OnMouseOut: Når musen bevæger sig over eller forlader et element.
• OnKeyUp / OnFocus / OnLostFocus / OnChange: For inputfelter og formularer.
• OnPanelStateChange: Når tilstanden for et dynamisk panel ændres.
• OnSwipeLeft / OnSwipeRight: Specifikt for mobilapps, der simulerer swipe-bevægelser.

Disse begivenheder kan udløse handlinger som at indstille indholdet af et dynamisk panel til en ny tilstand, skjule/vise elementer, indstille variable og meget mere. Axures Case Editor giver dig mulighed for at opbygge komplekse adfærdskæder, hvilket gør dine prototyper utroligt realistiske.

Fokus på Formularer og Ikoner

Formularer er et af de vigtigste områder i din prototype at teste. Det handler ikke kun om funktionalitet, men også om brugervenlighed. For eksempel kan det at have separate felter for fornavn og efternavn være irriterende for brugere, hvis formålet blot er en simpel besked. Ved at teste prototyper med brugere kan du opdage sådanne friktionspunkter og optimere din formular for at reducere interaktionsomkostningerne. Spørg dig selv, om hvert inputfelt er absolut nødvendigt for, at brugeren kan fuldføre opgaven.

Ikoner er et andet vigtigt område at prototype, og du bør sigte efter den højest mulige detaljeringsgrad med disse, da du vil teste, hvad der i sidste ende kan ende i appen. Ikon design er en kunstform, så prøv at bruge standard systemikoner, hvor det er muligt, men sørg for at teste, når du vælger brugerdefinerede ikoner for at sikre, at de er intuitive og forståelige for brugerne.

Generering og Publicering af Din Prototype

Når din prototype er færdig, er næste skridt at generere den og gøre den tilgængelig for test. Axure genererer HTML-filer, der kan vises i enhedens native browser, så korrekte viewport meta-tags er et must for at sikre, at prototypen vises med en passende bredde og ikke skaleres ned for at passe hele siden ind i den mobile browsers viewport.

For håndholdte mobilprototyper genereres typisk følgende viewport meta-tags:

• iPhone:<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
• Android:<meta name="viewport" content="width=480, target-densityDpi=device-dpi" />

Axure tilbyder også yderligere muligheder for iOS-enheder, såsom at skjule browserens adresse- og navigationslinjer, oprette et startskærmsikon og oprette en splash-skærm. Disse funktioner giver din HTML-baserede prototype udseendet og fornemmelsen af en native iOS-app.

Efter generering skal du placere HTML- og andre filer, som Axure genererer, på en webserver, som din interne enhed eller testdeltagerens enhed kan få adgang til. Du kan bruge tjenester som Dropbox eller din egen personlige webserver. En yderst bekvem mulighed er AxShare, en gratis tjeneste fra Axure, der lader dig hoste op til 10 prototyper med diskussionsfunktioner, så dit team kan finjustere de endelige designspecifikationer, før I går ind i byggefasen.

Test i Felten: Den Ultimative Validering

En essentiel del af prototyping og test er at gøre det 'i felten'. Folk bruger deres mobile enheder på støjende tog, i dårligt oplyste rum og nogle gange med samtaler, der foregår omkring dem. Laboratoriebaseret test eliminerer mange af disse faktorer, hvilket kan føre til unøjagtige fortolkninger af testresultaterne. En test i felten kan give uvurderlig kontekstuel information om, hvordan appen faktisk vil blive brugt i den virkelige verden. En langsom forbindelse kan for eksempel få en testdeltager til at give nyttig information om, hvor ofte de oplever en langsom app eller langsom websiderespons, hvilket er utrolig værdifuldt for at designe dit produkt.

Ofte Stillede Spørgsmål om Axure RP og Prototyping

Hvad er den primære fordel ved at bruge Axure RP til mobilprototyper?

Den primære fordel er evnen til at skabe meget realistiske og interaktive prototyper uden at skrive kode. Dette muliggør hurtig validering af design med brugere, hvilket sparer betydelige udviklingsomkostninger og fremskynder designprocessen.

Kan Axure RP bruges til både iPhone og Android-apps?

Ja, Axure RP kan bruges til at prototype apps for både iPhone og Android. Du skal blot justere side dimensionerne for at matche de typiske skærmstørrelser for hver platform (f.eks. 320x480 pixels for iPhone og 480 pixels bredde for Android).

Hvorfor er det vigtigt at navngive objekter i Axure RP?

At navngive objekter gør din prototype lettere at administrere, især når den bliver kompleks, eller når flere designere arbejder på den. Det forbedrer klarheden og effektiviteten, når du skal identificere og manipulere elementer.

Hvad er AxShare, og hvordan kan det hjælpe med prototyping?

AxShare er en gratis Axure-tjeneste, der giver dig mulighed for at hoste dine prototyper online (op til 10 stk.). Det gør det nemt at dele prototyper med testdeltagere og teammedlemmer og inkluderer diskussionsfunktioner, der understøtter samarbejde om designspecifikationer.

Hvorfor skal jeg teste min prototype i 'felten' i stedet for kun i et laboratorium?

Test i felten (dvs. i brugerens naturlige miljø) giver en mere realistisk indsigt i, hvordan appen vil blive brugt. Det afslører faktorer som støj, belysning og netværksforbindelse, der kan påvirke brugeroplevelsen, og som ofte overses i et kontrolleret laboratoriemiljø.

Konklusion

Som du kan se, gør Axure RP dig i stand til hurtigt at skabe en prototype for en mobilapp eller hjemmeside, uden en stor investering i udvikling. Ved at prototype og teste i felten eller i et laboratorium kan du validere dit design, før du overhovedet rører ved dyrere programmeringsressourcer. Du kan også nemt opdatere prototypen midt i en testcyklus for hurtigt at teste nye fund, noget der er sværere at gøre, hvis du tester med fungerende applikationskode eller klikbare wireframes.

Denne artikel har kun berørt nogle få af Axures muligheder. Værktøjet har mange native iOS- og Android-widgets og formularstyringer, der kan bruges til meget mere robuste native app-prototyper. Der er også andre måder at organisere din prototype på; den eneste korrekte måde er at gøre, hvad der fungerer bedst for dit projekt. Det vigtigste er at bygge prototypen hurtigt, teste den, fejle hurtigt, lære og iterere på designet – for den læring er det, der gør prototyping essentiel for ethvert succesfuldt mobildesignprojekt. Den iterative proces sikrer en konstant forbedring af dit produkt baseret på reel brugerfeedback, hvilket i sidste ende fører til en overlegen brugeroplevelse og en højere sandsynlighed for succes på markedet.

Hvis du vil læse andre artikler, der ligner Byg Realistiske Mobilprototyper med Axure RP, kan du besøge kategorien Mobil.