Prototypframställning är avgörande i alla arbetsflöden för produktutveckling. När du skapar prototyper på webbplatser eller appar kan du spara tid genom att ha en verklig, livskraftig produkt på dagar och veckor, inte månader. Detta ger flera fördelar, som mer omfattande användartester före lansering och mer tid att förfina produkten.
Jag tvekar att kalla ut dem eftersom de helt enkelt är delar av en designers arbetsflöde; Men de sparar dig mycket tid genom att inte göra de mer tråkiga aspekterna av prototypframställning och spendera mer tid på de viktiga designdetaljerna som säkerställer att din produkt har en bättre chans att lyckas på lång sikt.
1. Använd färdiga ikonbibliotek och komponenter
Att använda färdiga komponenter hjälper till att påskynda ditt arbetsflöde. Knappar, tabeller, listor, rullgardinsmenyer och mer är lätta att hitta och använda i en prototyp. Dra och släpp den på din rityta, konfigurera din interaktion och din komponent är redo att användas på några minuter.
Dessutom kan det finnas innehållsrika komponenter redo att användas, som paneler eller ramar. Alla dessa kombineras för att hjälpa dig att minska tiden för att skapa enskilda komponenter.
Genom att dra och släppa komponenter istället för att skapa dem kan du lägga mer tid på interaktioner och göra din produkt så realistisk som möjligt.
I exemplet nedan använde jag en färdig flik, länkad till 3 paneler som bestämmer färgen på en produkt. Det tog mig mindre än 5 minuter att ha en användbar sida igång för testning. Detta sparar enormt mycket tid genom att få igång en användbar prototyp på bara några minuter.
För prototyper, använd Mockplus, främst på grund av det enorma inbyggda biblioteket med färdiga att använda komponenter och ikoner, som hjälpte mig att spara enorma mängder tid redan från början. Genom att ha komponenter och ikoner redo att användas kan du spara enormt mycket tid vid prototyper.
2. Använd mallar
Använd färdiga mallar (eller UI-kit) för snabbare implementering, så att du kan lägga mindre tid på att skapa små designdetaljer och mer tid på att skapa en mer färdig produkt.
Genom att använda mallar eller UI-kit kan du få en användbar app på några timmar, helt enkelt placera bilder och byta namn på komponenter innan du börjar prototyper. Sedan kan du börja testa din produkt.
Användargränssnittet som visas är IOTtask. Färdiga mallar och UI-kit låter dig använda komponenterna och riktlinjerna för att skapa en fantastisk webbplats eller app med din egen design. Komponenter och riktlinjer hjälper till att spara tid på att skapa detaljerad grafik och interaktiva resurser.
Genom att helt enkelt behöva anpassa en mall kan ditt team lägga mer tid på att testa den istället för att skapa knappar och navigeringsresurser från början. Det finns många färdiga att använda gratis eller premium UI-kit, ikoner och andra UI-komponenter baserade på olika teman, som restauranger, mode eller fastigheter.
Ett annat sätt att påskynda denna process är att använda färdiga däcksatser. Adobe XD Den har många färdiga plattformar som du kan kopiera och anpassa för eget bruk. Fördelen med dessa är att de är plattformsspecifika, så du kan skapa en app som ser inbyggd ut på nolltid (för appar som iOS eller Android).
Om du vill säkerställa att dina komponenter ser ut och fungerar som en inbyggd iPhone- eller Android-app, kan plattformssatskomponenter vara idealiska. Kopiera och använd helt enkelt efter behov, vilket sparar tid och resurser.
Genom att ha UI-kit och mallar kan du därför lägga mer tid på att skapa en realistisk app istället för att lägga timmar och dagar på att skapa små designdetaljer som komponenter eller ikoner.
3. Testa inom ditt team från början
Det är svårt att skapa en applikation eller webbplats som genererar användbarhet och uppnår affärsmål. Att ha en första prototyp och ett team att testa den med kan hjälpa till att lindra alla frågor: hur allmänheten kommer att uppfatta produkten, hur människor kommer att använda den och om det finns några potentiella navigeringsproblem.
Du kan testa detta genom både kvalitativ (verbala eller skriftliga beskrivande kommentarer) och kvalitativ (testning med data, såsom timing) feedback.
Genom att dela produkten med intressenter och teammedlemmar kan du få bredare feedback direkt, såväl som regelbunden, konsekvent feedback när du upprepar dina prototyper och utvecklade produkter.
Dela så mycket du kan så snart som möjligt. Enligt min erfarenhet har jag använt Mockplusoch det är så enkelt som att dela en Google Dokument. Dela helt enkelt länken, ställ in rättigheterna och låt mitt team fortsätta testa.
4. Organisera arbetstabeller för snabbare arkitekturimplementering
Det är svårt att upprätthålla en övergripande arkitektur som är lätt att använda då produkten blir mer komplex. Det finns två sätt att skapa storyboards är ganska användbart:
Skapa en sidöversikt
Låter dig skapa en översikt över sidor med länkar till varandra. Detta har den extra fördelen att du kan begränsa dina alternativ när du går in på och lämnar sidor, vilket begränsar användaren till att hålla sig så nära den väg du bestämmer, vilket gör det möjligt för designers att effektivt skapa en strikt arkitektur.
Kontrollerar sidlänkar
Genom att se hur sidor länkar kan du testa din navigering och hitta ineffektivitet.
Dessutom, om du stöter på några problem under testningen, kan du arbeta för att minska dessa fel genom att ta reda på exakt var testarna går ur spåret och åtgärda dem.
5. Skapa ett resurscenter
Att effektivt kunna lagra och dela dina resurser med utvecklare är en viktig del för att hålla ditt distributionsflöde smidigt.
Att hålla tillgångar, produktkravsdokument (PRD) och designsystem på ett och samma ställe hjälper till att underlätta snabbare implementering av designdetaljer och säkerställer mycket färre fram och tillbaka med designers och PM.
Du behöver inte lägga tid på att kommunicera små detaljer: lägg allt utvecklaren behöver i ett dokument och resurscenter, med referenser kopplade direkt till prototyperna.
Ytterligare element kan inkludera ett kodlager för specifika komponenter eller designdetaljer.
Slut
Genom att använda dessa fem arbetsmetoder i din prototyping kommer du att spara timmar och dagar av prototyparbete. Det är inte allt med prototyper, men det hjälper dig att spara tid på att skapa prototyper, testa dem, testa navigering och se till att all distribution går smidigt.
Prototyping handlar om att skapa en realistisk app eller webbplats. Att lägga tid på de minsta designdetaljerna minskar tiden för att iterera och testa och försöka perfekta applikationen. Något som ser bra ut kanske inte fungerar bra bland ditt team och har grundläggande problem.
Med färdiga att använda komponenter tillsammans med mallar och plattformssatser kan du designa inbyggda, realistiska prototyper och appar och behöver inte långsamt designa varje detalj pixel för pixel. Som ett resultat kan du utföra fler tester, se till att användarnavigeringen är optimerad och skapa en snabb handoff mellan designer och utvecklare.
–
