Modern teknikdesign kräver en hög grad av interaktivitet: navigationsfältet ändras med användarens rullningsplats, rutorna expanderar på klicka för att visa och dölja stödjande information, listor släpas och tappas till ombeställning etc. Designers måste överväga alla möjliga användarinteraktioner till skapa den mest strömlinjeformade, intuitiva användarupplevelsen i sina produkter.
Att dela och leverera interaktiva mönster kan ta olika format beroende på vad du försöker åstadkomma och vem du levererar till.
I det här inlägget går jag igenom olika prototyper, och beskriver i vilka sammanhang man skulle välja var och en. I slutändan har de olika metoderna som beskrivs nedan tre aspekter som du bör tänka på när du bestämmer vilken väg som ska gå in på:
Jag ska använda illustrationer som visar nivåerna på vart och ett av dessa för alla de prototyper som vi täcker.
Den tidiga webben var statsbaserad: att klicka på en länk tog mig till en annan sida, som hade en samling länkar som tog mig till efterföljande sidor och så vidare. En förståelse för Javascript var en avancerad färdighetsuppsättning, och ramverk hade ännu inte utvecklats för att underlätta enklare användning av språket. Som sådana var interaktiva komponenter sällsynta. Designers statiska leveranser passar behoven hos dessa tekniska produkter: Eftersom det fanns några interaktiva rörliga komponenter kunde mönstren representeras effektivt av statiska kompositioner skapade i Photoshop, InDesign och andra utskriftslayoutverktyg.
Eftersom tekniken har utvecklats har en förståelse för fördelarna med en högre grad av interaktivitet i användarupplevelse lett till att mer användarupplevelse design är beroende av interaktion. Naturen hos statiska designverktyg gör det emellertid svårt att representera interaktiva designidéer med tanke på leveransernas inneboende brist på interaktiva komponenter. I slutändan har detta lett till spridningen av prototyperverktyg för att effektivare utarbeta interaktiva konceptkoncept.
Prototyper uppvisar två huvudsakliga fördelar som saknar statiska resultat:
Som sådan kan de vara en mycket effektiv mekanism för att leverera designidéer.
Beroende på projektstruktur och dess mål kan statiska leveranser - "pappersprototyper" - dock fortfarande vara effektiva i designprocessen. Om produkten är bättre representerad genom en statsbaserad informationsarkitektur, för en, fungerar statiska leveranser perfekt. Dessutom, om lagstrukturen ger en hel del kommunikation mellan lag och en mycket rörlig iterativ design / utvecklingsprocess, kan statiska leveranser vara effektiva. När man bestämmer vilken väg som ska gå in bör man överväga organisationens kommunikationsstruktur, berörda parter och graden av interaktivitet som krävs i den färdiga produkten när man bestämmer om man ska fortsätta med statiska mockups eller robusta prototyper.
Papper PrototypingLo-fidelity prototyper försöker spänna gapet mellan restriktionerna för statiska comps och wireframes, som omfattar en leverans som kan illustrera några av de interaktiva konceptkoncepten men saknar förfining av en färdig produkt. Det visuella designsystemet kanske inte är helt konceptualiserat, till exempel och designern kan välja att representera information i svartvitt med hjälp av platsinnehavare för innehållet för att presentera en föreslagen vision om informationsarkitekturen.
Sådana leveranser är populära bland konstruktörer som anser sig vara helt övertygade, eftersom de kanske är mindre bekväma och uppfattar hur en informationsarkitektur översätts till ett visuellt designsystem. Dessa typer av prototyper åtföljs ofta av "visuellt utformade" statiska kompositioner för att ge en mer robust representation av slutprodukten.
Omvänt kan andra lo-fidelity-prototyper presentera en hög grad av visuell designpolish, men saknar robusta interaktiva tillstånd. Många prototypverktyg tillåter designers att enkelt definiera "träffområden", hotspots som på klick tar användaren till en annan sida eller en del av konstruktionen. Detta är till hjälp för visuella designers, eftersom de kan fokusera mer ansträngning på att skapa de visuella aspekterna av en informationshierarki, sedan länka ihop sina mönster senare för att illustrera användarflödet. Emellertid är skapandet av mer robusta och sofistikerade interaktioner begränsat i denna designprocess.
Både lo-fidelity och pappers prototyper kräver därför en hög nivå av kommunikation mellan design, utveckling och viktiga intressenter, eftersom leveranserna bara är en approximation av den färdiga produkten. Antingen är det visuella eller interaktiva designsystemet underrepresenterat, och i slutändan kommer sådana leveranser att möta många av samma risker som statiska kompositioner: missförstånd av designidéerna resulterar i bortkastad utvecklingstid, behovet av att presentera sofistikerade idéer muntligt eller skriftligt, bortkastad tid i möten som utarbetar underrepresenterade designidéer mm.
Ett annat potentiellt problem är över-fragmenteringen av designidéer, vilket kan leda till en dåligt utformad design som saknar enhet. Så mycket som organisationer älskar att segmentera ansvaret i separata roller (UI, UX, Visual, Interaction, etc.) är design en disciplin som är beroende av skapandet av
"Något som är gjord av många delar och än en gång är mer än eller annorlunda än kombinationen av dess delar" - Gestalt
I samband med design leder överföringen av ansvar utan ett enhetligt tillvägagångssätt för produkttillverkning ofta till en dåligt konceptuell produkt. Produkten kan krympas genom att skapa interaktion, gränssnitt, erfarenhet och visuell design i separata dammsugare.
Beroende på sammanhanget kan lo-fidelity-prototyper vara en bra mekanism för att leverera design. De är ofta effektiva när det gäller att leverera nya produkter inom ett redan etablerat visuellt designsystem. Det sätt på vilket olika interaktioner presenteras visuellt har redan etablerats. Därför är användarens flöde genom en applikation interaktivt det huvudsakliga målet för leveransen.
Prototyper med lo-fidelityVisas hela designen - det visuella gränssnittet och erfarenhetsdesignen - Hi-fidelity-prototypen är den heliga graden av interaktiva designleveranser. I en högpresterande prototyp kan intressenter, utvecklare och användare fullt ut interagera med leveransen, vilket ger ett antal fördelar för organisationen.
För det första säkerställer prototyperna effektivare och effektiv kommunikation mellan avdelningarna. Ofta sparas tid eftersom utvecklare helt kan förstå hur en interaktion är strukturerad innan man går in på fel väg och slösar bort värdefull utvecklingstid. Intressenter uppskattar högpresterande prototyper, eftersom de fullt ut kan förstå de interaktiva och visuella konceptkoncepten i en konsoliderad leveransbar. Hi-fidelity-prototyper sparar därför resurser genom att säkerställa effektiv kommunikation av designidéer till utvecklare och intressenter.
En annan fördel med att skapa högpresterande prototyper är deras underlättande av mer robust användarupplevelseforskning. En användare kan fullt ut interagera med prototypen, vilket illustrerar luckor i designen i realtid. Många högpresterande prototyper rymmer för införandet av analytics-mjukvara i den leveransbara sig själv, samt ger ytterligare, stödjande metoder för att genomföra användarforskning. Google Analytics kan integreras i html-genererade prototyper, till exempel underlätta användarförsök och A / B-testning. I slutändan skapar möjligheten att införliva användarprovning tidigare i produktutvecklingslivscykeln en effektivare process och resulterar i en bättre produkt: utvecklingstiden sparas när designen är modifierad innan den börjar byggas och iterationer uppträder före första utgåvan av produkt.
Vidare, beroende på dina intressenter, kan en högpresterande prototyp öka försäljningspotentialen och därigenom direkt påverka företagets bottenlinje. Vid CrossCap designar vi moduler för manipulation och analys av marknadsföringskampanjer hos världens största återförsäljare. Att sälja en klient på en viss modul, varav många ännu inte har utvecklats, är mycket lättare när kunden kan sätta sig ner och samverka fullständigt med den framtida produkten. Leverans av interaktiva prototyper med hög trovärdighet har därför bidragit till företagets gräns genom att öka försäljningen.
Det finns många fördelar med att producera interaktiva prototyper med högtrohet. Tyvärr saknar många nuvarande prototyperverktyg en sofistikering för att visa både robusta visuella och erfarenhetsdesignkoncept. Dagens prototyperverktyg är begränsade inom deras räckvidd, som specialiserar sig i den ena eller den andra. Axure har till exempel en robust samverkansdesignsvit som möjliggör enkel manipulation av element, men saknar den sofistikerade förutsättningen i andra mer visuellt orienterade verktyg, såsom färgpaletter, avancerad formmanipulation etc.
I den andra änden av spektrumet finns verktyg som Quartz Composer, som enkelt tillåter dig att införliva sofistikerade visuella design-kompositioner, men illustrerar avancerade interaktioner som kräver utarbetad manipulation av fläckar och avancerad kunskap om verktyget.
Origami Quartz Composer verktygssit från FacebookMed tanke på de nuvarande verktygen saknas en helhetlig, gestaltstyrd metod för att designa teknik, vilket skapar högpresterande prototyper, vilket medför en ökad belastning på designavdelningen, eftersom verktyg måste noggrant masseras för att producera önskat resultat. För att skapa högpresterande prototyper har vi till exempel hackat in i Axure för att injicera interaktionsdesign-fokuserad Javascript direkt i den genererade html. Att använda Sketch med framer.js har inneburit liknande problem, vilket kräver ett avancerat arbetsflöde som är beroende av en tvärvetenskaplig metod att utforma.
Vårt designteam rensar dessa hinder för att skapa interaktiva prototyper med hög kvalité genom en tvärvetenskaplig teamstruktur: Vi har ett team som sträcker sig från högkvalificerade visuella designers till kodcentrerade utvecklare i framkant samt några medlemmar som sträcker sig mellan linjen mellan . Detta gör det möjligt för varje medlem att utnyttja sin färdighet i att bidra till en enda leverans som är mer robust i naturen. Som ett resultat skapar lagstrukturen en högre effektivitet, sparar tid och resurser och bidrar till försäljningspotentialen hos våra produkter. Medan vissa organisationer segmenterar designteamet och deras leveranser till olika enheter (användargränssnitt i Photoshop, UX i Axure, etc.) ligger vårt lags styrka i att förena varierande färdigheter under ett enda mål och leverans.
Det finns många fördelar med att producera högpresterande prototyper vid design av tekniska produkter: de sparar utvecklingstid, skapar effektivare kommunikation mellan avdelningar och intressenter, bidrar till en effektivare process och-beroende på organisationens ökade försäljningspotential. I slutändan bör dock ditt beslut på vilken rutt att ta vara beroende av organisationen, intressenterna, tidslinjen, leveransens art, kommunikationsnivån mellan avdelningarna och organisationens produktutvecklingsfilosofi.
Effektiviteten av designen mäts i dess utförande. Medan högpresterande prototyper underlättar utförandet av designidéer genom att tillhandahålla mer effektiv kommunikation som resulterar i bättre utnyttjande av resurser, är de inte det enda fordonet på vägen till att skapa en bra produkt. När du överväger vilken väg som ska tas för att skapa dina leveranser, ta hänsyn till de olika metoderna ovan, dina lagresurser och dess färdighetsuppsättning, din organisationsstruktur och filosofi, och vem du levererar design till för att starta det bästa väg och skapa den bästa produkten.
I mitt nästa inlägg kommer jag att illustrera dessa prototyper på hög nivå med exempel på varje leveransformat för att ytterligare vägleda dig mot rätt väg att ta med interaktiva resultat.