High-Fidelity & low-Fidelity Prototyping: vad, hur och varför?

faktum är att termerna ”high fidelity” och ”low fidelity” först användes i rockmusik för att beskriva ljudet och spelförmågan hos rock and roll i slutet av 1980-talet. när åren går används de också i webb/appdesign för att hänvisa till de olika nivåerna av detaljer och funktionalitet som är inbyggda i en prototyp.

men vad är de faktiska skillnaderna mellan dem, hur och varför ska vi välja prototypen hög eller låg trohet för en bättre design eller användarforskning?

i det följande kommer jag att gå igenom grunderna och skillnaderna som ligger i high fidelity och low fidelity, och förklara varför och hur man väljer dem för att göra utmärkta prototyper för en bättre design eller användarforskning.

Innehållsförteckning:

• för det första, vad är en prototyp
• Vad är en prototyp med låg trohet
• Vad är en prototyp med hög trohet
• skillnad mellan prototyp med hög trohet och låg trohet
• hur och varför välja Hi-fi-eller low-fi-prototyp för en bättre design
• bästa prototypverktyg för din webb/app design

först, vad är en prototyp?

” en prototyp är ett tidigt prov, modell eller frisättning av en produkt byggd för att testa ett koncept eller en process. Det är en term som används i en mängd olika sammanhang, inklusive semantik, design, elektronik och mjukvaruprogrammering.”- – – – från Wikipedia.

när det gäller UI/UX-design hjälper en prototyp designers att översätta sina designideer till en digital och konkret modell. De kan direkt testa delar eller alla UIs, interaktioner och UX-flöden för att se om de är användbara och excutable.

dessutom, eftersom behoven hos lag varierar, gör de också low fidelity prototype eller high fidelity prototype för att testa sina designideer för olika ändamål.

Vad är en prototyp med låg trohet?

low-fidelity prototype – känd som low-tech, low-fi eller lo-fi prototype, är en halvfärdig prototyp som fokuserar på funktion, struktur, process och ger det enklaste ramverket och elementen i en webb/app. Det används ofta för att översätta designideer till testbara och konkreta artefakter för att samla in och analysera användarnas krav i ett tidigt skede.

Vad är då en high Fidelity prototyp?

high-fidelity prototype – känd som high-tech, high-fi eller hi-fi prototype, är en omfattande och interaktiv prototyp som ligger ganska nära slutprodukterna med många funktioner, interaktioner och detaljer. Det används ofta i den senare användbarhetsutvärderingen för att upptäcka de potentiella problem som en webb – /appdesign fortfarande kan finnas.

skillnad mellan High Fidelity och low Fidelity Prototype

vet du fortfarande inte skillnaderna mellan low-fidelity och high-fidelity prototyper? Oroa dig inte! Här är 3 verkliga exempel på prototyper med låg trohet som hjälper dig att lära dig mer om prototyper med låg fi:

1. Low Fidelity Motion Prototype exempel

denna low-fi prototyp visar den andra menyn rörelser tydligt utan att fokusera för mycket på dess UI detaljer.

2. Low Fidelity UX Prototypexempel för en webbplatsbyggare

denna UX-prototyp med låg trohet presenterar sidlayouter, navigationssystem och användarflöden av interaktioner tydligt utan för mycket UI-detaljer. Det hjälper designers testa antaganden och hitta osynliga UX frågor snabbt.

3.Lo-fi prototyp exempel anbud

Detta är ett annat bra exempel (skapat i Mockplus, ett enklare snabbare och smartare prototypverktyg) för att visa huvudlayouter och elementplaceringar i en app. Även utan elementdetaljer hjälper det designers att upptäcka och ta itu med potentiella problem i ett tidigare skede.

se det? Även utan UI-detaljer hjälper low-fi-prototypen att förmedla designideer och enkelt visa huvudfunktioner, strukturer, flöden och interaktioner i en webb/app. Det ger designers många fördelar.

fördelar med prototyper med låg trohet:

• låg kostnad. Kostnaden för en prototyp med låg trohet är extremt låg.
• snabbt. Utan att fokusera på varje gränssnittsdetalj kan designers bara följa sina designideer och skapa en enkel och testbar prototyp inom några minuter.
• lätt att demonstrera, samarbeta och iterera. Utan för många UI-detaljer kräver en lågfi-prototyp inte många professionella färdigheter. Och fler kan gå med och samarbeta i samma projekt. Det är också lätt för designers att göra ändringar och iterera prototypen under samarbetet.
• lätt att få feedback. Eftersom en prototyp med låg trohet är lätt att bära och demonstrera kan designers också dela den direkt med andra människor (inklusive teammedlemmar och intressenter) för att samla in designåterkoppling.
• lätt att upptäcka och ta itu med potentiella problem. En prototyp med låg trohet gör det också möjligt för designers att enkelt testa användarflöden, interaktioner och navigeringsmenyer på en webb/app. Det är bra för designers att snabbt upptäcka och ta itu med potentiella UI/UX-problem.

nackdelar med prototyper med låg trohet:

• begränsade UI detaljer/animationer / interaktioner. För att förmedla ideer snabbt skapas ofta en prototyp med låg trohet med begränsade UI-detaljer, Funktioner, animationer och interaktioner etc. Så det är inte bra för andra designers eller teammedlemmar att ha en fullständig förståelse för webb – /appdesignen.
• testresultaten är begränsade och felaktiga. Utan tillräckligt med designdetaljer kan en prototyp med låg trohet till viss del inte exakt simulera de verkliga användarscenarierna. Testresultaten påverkas också oundvikligen och felaktiga. Onödigt att säga, när prototypen modifieras dramatiskt i senare skede, testresultaten kan vara helt annorlunda.

så, om du bara får några designideer, vill presentera dem med en enkel prototyp, diskutera och samarbeta med andra designers eller teammedlemmar innan du gräver in, är en prototyp med låg trohet perfekt för dig.

och sedan, här är 3 verkliga high-Fi prototyp exempel för att hjälpa dig att lära dig mer om High-fi prototyper:

1. Jobblista High Fidelity prototyp exempel

denna high fidelity prototyp visar inte bara UI detaljer, men visar också användarflöden och interaktioner tydligt. Designers kan enkelt kontrollera och testa mycket liten detalj för att se om det fortfarande finns några UI/UX-problem.

2. High Fidelity Prototyp Exempel

3. Produktdesign High Fidelity prototyp exempel

en high-fidelity prototyp kan du förmedla designideer med rika färger, knappar, foton, ikoner, animationer, interaktioner och mer information.

fördelar med högkvalitativa prototyper:

• rika designdetaljer. High-fidelity-prototyperna är byggda med fler HQ-foton, färger, animationer, ikoner, knappar och andra element. Varje element är utformat exakt som om det vore i en riktig webbplats/app.
• bättre visuell effekt. Med ett fantastiskt färgschema, levande animationer, layouter och mer har en high-fidelity-prototyp ofta bättre visuella effekter än en prototyp med låg trohet.
• mer exakta testresultat. Med rika detaljer ser en high-fidelity prototyp bara ut som en riktig webb/app. Det är lätt för designers att simulera de verkliga användarscenarierna och testa produkten från alla möjliga aspekter, inklusive interaktioner, användarflöden, elementeffekter och färgscheman samt UX. Testresultaten är också mycket mer exakta.
• effektivare feedback. Naturligtvis, efter att ha delats med andra designers och teammedlemmar, är den mottagna feedbacken också effektivare för att hantera de befintliga problemen.
• mer attraktivt för kunder och intressenter. Det är också bra för designers att tydligt presentera hur den slutliga webben / appen ska fungera och hjälpa till att locka fler kunder, intressenter och investerare.

nackdelar med högkvalitativa prototyper:

• högre kostnad. En high-fidelity prototyp behöver ofta skapas med ett professionellt prototypverktyg. I jämförelse med prototypen med låg trohet är kostnaden för den säkert mycket högre.
• svårt att ändra och iterera. När vissa ändringar görs måste en serie sidor eller element i en high-fidelity-prototyp också ändras samtidigt. Detta kan vara besvärligt och tidskrävande.

så, en high-fidelity prototyp är mycket funktionell och interaktiv för dig och ditt team för att hitta och ta itu med några små UI/UX problem, samt att få fler aktieägare och kunder i slutet designstadiet.

hur och Varför välja Hi-fi eller low-fi prototyp för en bättre Design?

som vi har nämnt ovan, eftersom high fidelity och low fidelity spelar en helt annan roll för att skapa framgångsrika mönster, skulle du bättre också använda dem för olika inköp eller i olika designfaser:

1.Varför är en prototyp med låg trohet bättre för dig i det tidiga designstadiet?

uppenbarligen fokuserar prototypen med låg trohet mer på koncept på hög nivå för slutprodukterna och hjälper till att upptäcka de potentiella problemen samt att lösa dem på ett mycket tidigt stadium.

det hjälper till att säkerställa att du och ditt team har valt och följt rätt designtema och riktning innan du gräver in.

så i det tidiga designstadiet, när du och ditt team siktar på att snabbt översätta ideer till visualiserade prototyper, förkorta iterationer och samla in användarfeedback, är en prototyp med låg trohet ett mycket bättre val.

kort sagt, när är rätt tid att använda en low-fi prototyp?

• när en designide blinkar i ditt sinne och du vill konvertera den till en konkret modell snabbt
• när du vill diskutera dina designideer med dina partners så snart som möjligt
• när du vill testa om designideerna är genomförbara och uppfylla användarnas behov
• när du vill få feedback från andra teammedlemmar

varför är high fidelity prototyping bättre för dig i slutet av designfasen?

och sedan, eftersom high fidelity-prototypen ofta ägnar stor uppmärksamhet åt detaljer och funktioner i en webb/app, är det ofta bättre för designers att testa genomförbarheten av webb/appdesigner och locka fler användare/intressenter i slutet av designfasen.

kort sagt, när är den bästa tiden att använda en high-fi prototyp?

• när den visuella utformningen av din produkt har gjorts
• när du vill testa din webb/app detaljer, såsom UI element, färgscheman och sidkopior, etc
• när du vill testa en interaktion, arbetsflöde, användarflöde, övergångsanimering, visuella effekter eller liknande designideer med fullständiga UI detaljer
• när du vill veta feedback från andra designers och användare

hur väljer man rätt prototypverktyg för en bättre design?

oavsett om du väljer en prototyp med hög trohet eller låg trohet, är det enda syftet att presentera dina fantastiska designideer mer levande och bygga utmärkta webb – /appprototyper, eller hur? Om ditt svar är ” ja ” är nästa steg för dig att välja rätt prototypverktyg.

men vet fortfarande inte hur? Här är flera tips för dina referenser:

• pris. Priset är alltid den viktigaste faktorn för dig att välja ett låg-fi-eller hög-Fi-prototypverktyg. Det är dock inte den enda faktorn som du bör ta hänsyn till. Ett billigt eller dyrt pris indikerar ingenting. Vad du behöver är bara den som passar dig bäst.
• inlärningskurva. Hur lång tid det tar för dig och ditt team att lära sig ett nytt verktyg spelar alltid roll när du väljer rätt prototypverktyg. Så om du inte vill slösa tid på att utforska nya funktioner i ett verktyg är det bäst för dig att välja ett enklare.
• användning. Dessa dagar, det finns massor av prototyper verktyg där ute som ger helt olika funktioner. För att välja den mest lämpliga för dig och ditt team är det bäst att veta vilka funktioner du exakt behöver i din produktdesignprocess. Så det är nödvändigt för dig att ta reda på de verkliga behoven hos dina lagmedlemmar från olika avdelningar i förväg.
• lagarbete. För att diskutera designideer och få feedback från andra teammedlemmar i rätt tid föredrar de flesta designers/designteam att välja ett prototypverktyg som stöder lagarbete. Behöver du det också? Om du gör det är ett verktyg som låter dig och ditt team kommunicera och samarbeta fritt online ett bättre alternativ.
• trohet. Tja, när du väljer ett prototypverktyg är det också nödvändigt att ta hänsyn till troheten.
• Integration. En annan faktor du bör tänka på är att se hur väl prototypverktyget passar din designprocess. Dessa dagar, om användarna måste byta verktyg ofta under utformningen, är många prototypverktyg integrerade med andra verktyg, som Sketch, PS, Facebook, Slack och mer.

sammantaget hoppas jag att dessa tips kan hjälpa dig att välja rätt verktyg.

3 bästa low Fidelity Prototyping Tools

här är 3 bästa low fidelity prototyping tools för dina referenser:

papper och pennor

med det snabbaste och enkla verktyget hjälper pennor och papper att rita dina ideer enkelt och snabbt och underlättar också den interna diskussionen mellan teammedlemmarna. Även om jag ibland behöver använda prototypprogramvara för att rita, föredrar jag vanligtvis att använda pennor och papper för att klargöra mina tankar först.

fördelar:

• helt gratis
• snabb
• lätt att starta

nackdelar:

• inga smarta interaktioner och animationer
• du kan inte visa alla dina ideer tydligt
• du kan inte diskutera och testa varje detalj

Mockplus

Mockplus är ett kraftfullt prototypverktyg med låg trohet som får mycket uppmärksamhet de senaste åren. Det låter dig översätta designideer till interaktiva prototyper, testa, dela och iterera dem med lätthet. Dess teamsamarbete och hanteringsfunktion hjälper också till att förbättra din arbetseffektivitet utan problem.

fördelar:

• ge över 200 förbyggda komponenter och 3000 förkonstruerade ikoner
• skapa interaktioner med enkel dra-och-släpp
• ge många alternativ för att exportera sidor och prototyper
• ge många prover och projekt
• ge många sätt att dela och testa en prototyp online eller på mobilen
• kommunicera, kommentera och samarbeta en prototyp online
• integrera med skiss

nackdelar:

• inte helt gratis

Balsamiq mockups

Basamiq är ett enkelt prototypverktyg med låg trohet som låter dig skissa dina designideer direkt på en whiteboard. Det är verkligen användbart när du bara fokuserar på strukturerna och det övergripande konceptet för din design.

nackdelar:

• ge ett inbyggt handmålat UI-bibliotek
• exportera mönster till PNG/PDF-bilder direkt

nackdelar:

• saknar grundläggande interaktioner medan prototypdesign

2 Bästa High Fidelity prototyper verktyg

Marvel App

Marvel app är en kraftfull high-fidelity prototyper verktyg som stöder att skapa wireframes, prototyper och prototyper tillsammans på nätet. Det låter dig direkt ladda upp bilder (inklusive JPF, GIF och PSD) och lägga till animationer för dem för att snabbt skapa interaktiva prototyper.

Mockplus Cloud

Mockplus Cloud är ett professionellt samarbetsverktyg för onlinedesign som gör det möjligt för produktchefer, designers och utvecklare att arbeta tillsammans online med auto-SPECIFIKATIONER, tillgångar och kodavsnitt.

det används också som en allt-i-ett high-fidelity prototyper verktyg. Du kan enkelt ladda upp mönster med tillgångar och spec detaljer från Sketch/PS/Adobe XD, och lägga till rika interaktionskommandon för att skapa interaktiva och high-fidelity prototyper.

för ett produktteam kan den nyskapade prototypen också delas med en länk och få feedback i realtid.

kort sagt, dessa dagar, för att locka långt fler användare, Många prototypverktyg skapas för att möta användarnas behov så många som möjligt. Det verkar ingen tydlig gräns mellan ett lågfi-och högfi-prototypverktyg.

så för att välja rätt prototypverktyg är det bäst för dig och ditt team att ta fler Verktygsalternativ för testning.

Wrap Up

oavsett vilka skillnader low fidelity och high fidelity prototyping är, hur och varför du väljer low fidelity eller high fidelity prototyping för en bättre design eller användarforskning, betyder ett bra prototypverktyg, som den enklare och snabbare, Mockplus, ofta mycket för dig att skapa en utmärkt webb/app med vackra gränssnitt och bra användarupplevelser. Hoppas att den här artikeln kan inspirera dig ändå.

du kanske också gillar:

vilka prototypverktyg behöver du för UX-Design?

vilka är fördelarna med prototyper? Hur får man ut det mesta av det?

Team samarbete av prototyper verktyg: Axure VS Mockplus

Wireframe vs Mockup vs prototyp & val av prototyper verktyg