Prototyper av ett användargränssnitt

2025-03-25

I det här avsnittet beskrivs hur prototyper av ett användargränssnitt kan hjälpa till att minimera designfel och säkerställa en lyckad användarupplevelse.

Introduktion

Ibland, när ett projekt går framåt, ackumuleras små antaganden och välmenande men dåliga beslut, vilket gör timmar av arbete till en usel användarupplevelse. De smarta teamen eliminerar sina misstag innan de skickar med hjälp av en teknik som kallas UI-prototyper. I kombination med användbarhetsstudier håller prototyper teamen i rätt riktning.

Varför prototyp?

Prototyper är ett sätt att utforska idéer innan du investerar i dem. Alla erfarna hantverkare och ingenjörer skapar prototyper av sitt arbete innan de skapar något: Arkitekter skapar modeller av papper eller kartong eller med verktyg för virtuell verklighet. Flygtekniker använder vindtunnlar. Bridge builders skapar stressmodeller. Programvaru- och webbdesigners skapar modeller av hur användare interagerar med sina design.

Den bästa anledningen till prototypen är att spara tid och resurser. Värdet av en prototyp är att det är en fasad , som en Hollywood-uppsättning, där bara framsidan av byggnaden är konstruerad. I förhållande till den verkliga produkten är prototyper enkla och billiga att skapa. Så för en minimal investering kan användbarhet och designproblem hittas och användargränssnittet justeras innan betydande investeringar görs i den slutliga designen och teknikerna.

När du undersöker behoven i ett visst projekt kan det finnas skäl att skapa en annan prototyp än att spara pengar. Är målet att utforska en ny gränssnittsmodell? Gör du ändringar i en del av den befintliga designen? Undersöka en ny teknik? Innan du börjar är det viktigt att vara tydlig med varför du skapar det du bygger. Att börja med tydliga mål hjälper till att göra ansträngningen direkt och effektiv. Orsakerna till att skapa prototyper finns i tre grundläggande kategorier:

Konceptbevis.

Bland vissa team finns det meningsskiljaktigheter om den framtida riktningen för ett projekt. En prototyp kan användas för att bevisa att en idé eller en ny metod har meriter eller värde. En prototyp kan hjälpa till att illustrera att en idé fungerar, uttrycka dess egenskaper på ett visuellt och interaktivt sätt och/eller motivera teammedlemmar att tänka på problemet ur ett annat perspektiv.
Designutforskning.

Om du utformar interaktiv programvara är det enda sättet att utforska hur något kommer att användas att skapa en modell och interagera med den. Ibland är modellering kopplad till en användbarhetsstudie, där delar av prototypen kan utvärderas på ett strukturerat sätt. Ibland är det bara ett sätt att tydligt uttrycka för en utvecklare hur något ska fungera eller se ut. I många fall kanske en designer bara experimenterar, i ett försök att få en uppfattning om vilken metod som kan fungera. Alla i teamet kan använda prototyper för att utforska designproblem, även om designers i allmänhet är de mest skickliga. Designutforskningar bör riktas mot att försöka lösa specifika problem som identifieras i produkten.
Teknisk utforskning.

Utvecklare som undersöker implementeringsmetoder för ett problem provar ofta olika kodningstekniker för att se om de fungerar bra. Användning av COM+, Dynamisk HTML (DHTML), Microsoft Win32 eller specifika kodningsmetoder inom varje teknik har olika kompromisser. Ibland representerar en prototyp en utforskning av vilken teknik som fungerar bra för att stödja en viss användargränssnittsfunktion.

Ibland skapas prototyper av en kombination av dessa orsaker. Om ett team planerar tillräckligt bra kan de tilldela tid för en utvecklare och en designer eller projektledare att arbeta tillsammans med en prototyp. I sådana fall är det oerhört viktigt att tydligt definiera målen och de bidrag som varje teammedlem förväntas göra. Alla bör vara tydliga med vad målen är, vad som står på spel och vad det potentiella resultatet kommer att bli.

Vem är inblandad?

Prototyper kan göras informellt av vem som helst, oavsett bakgrund eller roll i projektet. Det är enkelt att göra en enkel men effektiv prototyp genom att ta en bitmapp från Adobe Photoshop, placera den i Microsoft FrontPage-verktyget för att skapa och hantera webbplatser och lägga till aktiva knappar eller länkar. Dessa lätta prototyper går bara så långt och kan bli otympliga för komplexa interaktioner.

För mer formella prototyper från större team samarbetar en utvecklare eller projektledare ofta med en designer och en användbarhetstekniker. Tillsammans genererar de idéer, skapar en prototyp som representerar de bästa idéerna och går sedan in i labbet för att se hur effektivt det är för att lösa användarproblem. Utvecklare kan engagera sig om de kan spara tid eller om deras tekniska expertis behövs. Ofta gör designern eller projektledaren det mesta av skriptet eller kodningen för att skapa prototypen.

När ska en prototyp skapas?

Beroende på prototypens omfattning och den detaljnivå som krävs kan prototyper skapas när som helst under projektet. Oftast skapas de tidigt i projektet, under planerings- och specifikationsfasen, innan utvecklare skriver någon produktionskod. Det är då behovet av prospektering är som störst, och när den tid som investeringen behövs är som mest livskraftig. Om utvecklare i stället för programansvariga eller designers gör prototyper blir schemaläggningstiden ännu viktigare på grund av behovet av att se till att det arbete som investeras i prototypen redovisas i utvecklingsschemat. Planering för alla versioner av användargränssnittet bör innehålla en viss nivå av prototyper.

Sent i ett projekt kan mindre prototyper hjälpa dig att lösa tuffa design- och tekniska problem. En snabb HTML-modell av hur en dialogruta eller webbsida ska bete sig kan hjälpa till att besvara en utvecklarfråga eller ge andra teammedlemmar en känsla för vad den önskade upplevelsen ska vara. I vissa fall kan en stark programhanterare eller designer implementera beteendet i Microsoft JScript-utvecklingsprogram och genomföra mycket av den programmeringslogik som utvecklare behöver bearbeta.

Den tid det tar att skapa en prototyp kan variera enormt beroende på omfattningen och precisionen för hur slutresultatet behöver se ut. En informell prototyp skulle kunna innebära några timmars arbete av en person. en mer organiserad insats kan innebära veckor av arbete av ett helt team.

Var ska fokus ligga?

I en prototyp skapar du bara så mycket av designen som behövs. Det är okej att ha knappar som inte fungerar eller text som aldrig uppdateras. Så länge de nödvändiga interaktionerna kan upplevas är det bra att använda rök och speglar för resten. Här följer några anledningar till varför arbetet bör fokuseras noggrant:

Kostnad för att bygga prototypen.

Kostnaden för att skapa prototypen bör minimeras. Utmaningen med prototyper är att känna igen den minimala investering som krävs för att effektivt besvara frågor om designen. Det är här användbarhetsstudier är kritiska, eftersom de tydligt identifierar de delar av användargränssnittet som behöver mest arbete. Även utan användbarhetsstudier definierar du tydligt vilka användarproblem som löses eller vilka uppgifter som förbättras med designen i prototypen.
Begränsad livslängd.
Prototyper bör ha tydligt definierade livslängder. Är slutmålet en presentation på ett teammöte? Ett möte för granskning av chef? En specifikationsgranskning? En användbarhetsstudie? Identifiera att designen löser ett användarproblem? När behoven för dessa specifika mål har uppfyllts bör prototypen läggas åt sidan. Det grundläggande tänkesättet är att koden eller bitmapparna som genereras i en prototyp lämnas kvar. Det kan finnas undantag där kod eller visuella objekt finns i produkten, men förväntningarna bör vara att så inte är fallet.
Risk för att överväldiga teamet.

Det kan vara svårt att visa prototyper för utvecklare och teammedlemmar. En alltför komplex eller utarbetad prototyp, med fantastiska visuella objekt och animeringar, kan överväldiga människor. Ha alltid en känsla för hur långt man ska gå och hur mycket av prototypen som ska tas på allvar.

Vad är räckvidden?

När fokus för prototyparbetet bestäms bör du tänka på följande:

Kundens behov.

Att börja med att förstå användarnas viktigaste problem eller behov (kanske något som en användbarhetstekniker har tillhandahållit) ger en uppfattning om vilka delar av användargränssnittets design som garanterar mest utforskning.
Användbarhetsstudier.

Om du skapar prototypen för en användbarhetsstudie kan du diskutera med användbarhetsteknikern vilka specifika uppgifter som kommer att ingå i studien och utforma kring dessa element.
Teamens input

Prata med viktiga utvecklare i teamet när idéerna i prototypen samlas. Få en grundläggande känsla för vad som är rimligt, vad som är möjligt och vad som är bortom övervägande för nästa version. I vissa fall kan du överväga att gå längre än vad de säger är möjligt för en aspekt av designen om det är en viktig punkt och teamet måste utmanas. Men gör inte detta med alla aspekter av din prototyp eftersom det finns en fin linje mellan att tänja på gränserna och överväldiga ditt team. Om viljan är att inspirera teamet genom att visa dem en vision för flera framtida versioner, så kör på det. Men om kravet är att definiera specifika ändringar för nästa version fokuserar du arbetet på dessa ändringar. Se till att framhäva de specifika ändringarna på ett modulärt sätt och visa utvecklarna en väg för att skapa designen.
Bredd kontra djup.

För större prototyper finns det ytterligare hänsyn till bredd kontra djup. Ska varje funktion i designen fungera lite, eller ska en funktion väljas för att prototypa med nästan alla dess delar och alternativ? Försök att inte göra båda eftersom resultatet kan vara en stor, otymplig prototyp som är svår att ändra och svår att kasta bort.

Flexibla prototyper

Ett sätt att fokusera på prototypresurser är att fokusera på smart design. Effektivare prototyper kan skapas genom att tillåta en prototypkod att använda många olika idéer. I stället för att ha fem olika prototyper bör du överväga att göra en prototyp som har alternativ för att byta ut prototypens olika attribut.

Ska verktygsfältet finnas till vänster eller överst? Ska vi visa 10 objekt på startsidan eller 20? En bra prototyp har någon form av inbyggd alternativpanel som gör att du kan ändra parametrarna för hur prototypen ser ut eller fungerar. Håll dessa alternativpaneler dolda i prototypen – försök att undvika att en användbarhetsdeltagare oavsiktligt hittar dem under ett test.

Utmaningen är att hålla prototypen enkel, men ändå användbar nog att den kan visas för en lagkamrat, olika alternativ kan visas och feedback kan erhållas.

Beta jämfört med prototyp

Betaversioner kvalificerar sig inte som prototyper eftersom de är fullständiga tekniska insatser. Om ett allvarligt misstag hittas i en funktion i en betaversion är det osannolikt att det tas bort, även om det kan vara i produktens bästa intresse. Utvecklare, testare och designers har redan investerat mycket tid, och pressen att leva med dåliga beslut är mycket hög. Betaversioner hjälper verkligen till att hitta buggar och defekter, men de är sällan användbara för att göra kontrollerade studier av värdet av specifika designriktningar.

Verktyg och tekniker

Det finns flera olika verktyg och tekniker som kan användas för att skapa prototyper, som var och en har sina fördelar och nackdelar. Tänk på vilken typ av designarbete som är prototyper och målen för prototyparbetet innan du bestämmer vilket verktyg eller vilken teknik som är rätt.

Microsoft Visual Basic eller C#.

Det här är den snabbaste tekniken för att skapa gränssnittsprototyper i Windows-stil. Webbläsarobjektet gör det enkelt att integrera HTMLUI med standardkomponenter i Windows-stil. Även om det är sant att en utvecklare som har erfarenhet av Microsoft Visual Studio kanske kan generera användargränssnitt snabbare i C/C++, skapar detta frestelsen att återanvända kod från UI-prototypen i produktionskoden. Det krävs disciplin för att inse att målen för en snabb och smutsig UI-prototyp är mycket avvikande från högkvalitativ teknik. Kontrollera att det är tydligt vilken typ av kod som skrivs och att teamet eller chefen förstår vad som kommer att ignoreras.
Microsoft Expression Blend + SketchFlow.

SketchFlow är ett visuellt verktyg för att utforma, prototypa och skapa avancerade användargränssnitt för Windows Presentation Foundation (WPF) och Microsoft Silverlight desktop och webbprogram. Program skapas genom att rita former, använda kontroller som knappar och listrutor, få delarna av ett program att reagera på musklick och annan användarinput och styla allt så att det ser unikt ut.
Adobe Director eller Adobe Flash.

Director är ett populärt verktyg för UI-prototyper bland designers. Det är mest användbart för multimedia eller icke-standard-GUI-design, eller för prototyper som kräver betydande animering. Dess höga flexibilitet gör det besvärligt för användargränssnitt av typen UI jämfört med Visual Basic. En skicklig Director-användare kan dock generera Windows eller webbgränssnittet utan att det är svårt.
HTML.

FrontPage och andra HTML-redigerare gör det möjligt att snabbt skapa enkla prototyper. För att uttrycka en idé är det ofta möjligt att skapa bitmappar som illustrerar en sekvens av användarinteraktion och placerar dem i FrontPage. Dessa bilder kan användas för att simulera hur du interagerar med designen. JScript och DHTML tar saker till en annan nivå, vilket möjliggör mycket avancerad logik och interaktion. Om du använder HTML för att skapa en prototyp av en webbplats gäller varningen som precis beskrevs för C/C++ även här– och hamnar inte i fällan att blanda ihop snabbprototypkod med produktionskvalitetstekniker.