Share
Modern technologisch ontwerp vereist een hoge mate van interactiviteit: navigatiebalken veranderen met de scrollocatie van de gebruiker, vakken uitvouwen klikken om ondersteuningsinformatie weer te geven en te verbergen, lijsten worden gesleept en verwijderd om opnieuw te ordenen, enz. Ontwerpers moeten alle mogelijke gebruikersinteracties overwegen om creëer de meest gestroomlijnde, intuïtieve gebruikerservaring in hun producten.
Het delen en leveren van interactieve ontwerpen kan verschillende indelingen gebruiken, afhankelijk van wat u probeert te bereiken en van wie u levert.
In dit bericht zal ik je helpen met verschillende prototyping-benaderingen, en beschrijven in welke context je elk zou kiezen. Uiteindelijk hebben de verschillende methodologieën die hieronder worden beschreven drie facetten die u zou moeten overwegen bij het kiezen van welke route u moet beginnen:
Ik zal illustraties gebruiken die de niveaus van elk van deze demonstreren voor alle prototypingmethoden die we behandelen.
Het vroege web was gebaseerd op de staat: klikken op een koppeling bracht me naar een andere pagina met een verzameling links die me naar volgende pagina's brachten, enzovoort. Een goed begrip van Javascript was een geavanceerde vaardigheidsset en er moesten nog kaders worden ontwikkeld die het gebruik van de taal gemakkelijker zouden maken. Als zodanig waren interactieve componenten zeldzaam. De statische deliverables van ontwerpers sluiten aan bij de behoeften van deze technologische producten: aangezien er maar weinig interactieve, bewegende componenten waren, konden de ontwerpen effectief worden weergegeven door statische comps gemaakt in Photoshop, InDesign en andere hulpmiddelen voor het afdrukken van lay-outs..
Naarmate de technologie vorderde, heeft een goed begrip van de voordelen van een hogere mate van interactiviteit in gebruikerservaring ertoe geleid dat meer ontwerp van gebruikerservaringen afhankelijk is van interactie. De aard van statische ontwerptools maakt het echter moeilijk om interactieve ontwerpideeën te representeren, gezien het inherente gebrek aan interactieve componenten van de deliverables. Uiteindelijk heeft dit geleid tot de proliferatie van prototyping-tools om interactiefere ontwerpconcepten effectiever uit te werken.
Prototypes vertonen twee belangrijke voordelen die ontbreken in statische deliverables:
Als zodanig kunnen ze een zeer effectief mechanisme zijn voor het leveren van ontwerpideeën.
Afhankelijk van de projectstructuur en de doelen ervan, kunnen statische deliverables - 'papieren prototypen' - nog steeds effectief zijn in het ontwerpproces. Als het product beter wordt weergegeven door een op de staat gebaseerde informatiearchitectuur, werken statische deliverables bijvoorbeeld perfect. Bovendien, als de teamstructuur veel communicatie tussen teams en een zeer agile iteratief ontwerp / ontwikkelingsproces biedt, kunnen statische deliverables effectief zijn. Bij het bepalen van de weg die moet worden ingeslagen, moet rekening worden gehouden met de communicatiestructuur van de organisatie, de betrokken belanghebbenden en de mate van interactiviteit die vereist is in het eindproduct bij het beslissen of door te gaan met statische mockups of robuustere prototypen..
Papieren prototypingLo-fidelity-prototypen proberen de kloof te overbruggen tussen de beperkingen van statische composities en wireframes, inclusief een product dat enkele van de interactieve ontwerpconcepten illustreert, maar de verfijning van een afgewerkt product ontbeert. Het visuele ontwerpsysteem is bijvoorbeeld niet volledig geconceptualiseerd en de ontwerper kan ervoor kiezen om informatie in zwart-wit weer te geven, met behulp van tijdelijke aanduidingen voor de inhoud om een voorgestelde visie van de informatiearchitectuur te presenteren..
Dergelijke deliverables zijn populair onder ontwerpers die zichzelf volledig beschouwen als een UX-overreding, omdat ze minder comfortabel kunnen denken over hoe een informatiearchitectuur zich vertaalt in een visueel ontwerpsysteem. Deze typen prototypen worden vaak vergezeld door "visueel ontworpen" statische composities om een meer robuuste weergave van het eindproduct te geven.
Omgekeerd kunnen andere lo-fidelity-prototypen een hoge mate van visueel ontwerppoetsen vertonen, maar missen ze robuuste interactieve toestanden. Met veel tools voor prototypen kunnen ontwerpers gemakkelijk 'hitgebieden' definiëren. Hotspots die op de klik klikken, brengen de gebruiker naar een andere pagina of gedeelte van het ontwerp. Dit is handig voor visuele ontwerpers, omdat ze zich meer kunnen concentreren op het maken van de visuele aspecten van een informatiehiërarchie en vervolgens hun ontwerpen later kunnen koppelen om de gebruikersstroom te illustreren. Het creëren van meer robuuste en geavanceerde interacties is echter beperkt in dit ontwerpproces.
Zowel lo-fidelity- als papieren prototypes vereisen daarom een hoge mate van communicatie tussen ontwerp, ontwikkeling en belangrijke belanghebbenden, aangezien de deliverables slechts een benadering van het eindproduct zijn. Ofwel het visuele of interactieve ontwerpsysteem is ondervertegenwoordigd, en uiteindelijk worden dergelijke deliverables geconfronteerd met veel van dezelfde risico's als statische comps: misverstand van de ontwerpideeën resulterend in verspilde ontwikkelingstijd, de noodzaak om verbale ideeën mondeling of schriftelijk te presenteren, verspilde tijd in vergaderingen die ingaan op ondervertegenwoordigde ontwerpideeën, enz.
Een ander potentieel probleem is de over-fragmentatie van ontwerpideeën, die kan resulteren in een slecht ontworpen ontwerp dat eenheid ontbeert. Zoveel organisaties houden van het segmenteren van verantwoordelijkheid in verschillende rollen (UI, UX, Visual, Interaction, enz.), Design is een discipline die afhankelijk is van het creëren van
"Iets dat uit vele delen bestaat en op de een of andere manier meer dan of verschillend is van de combinatie van zijn onderdelen" - Gestalt
In het kader van het ontwerp resulteert de overmatige fragmentatie van verantwoordelijkheden zonder een uniforme benadering van productcreatie vaak in een slecht geconceptualiseerd product. Het product kan worden aangetast door het creëren van interactie, interface, ervaring en visueel ontwerp in afzonderlijke stofzuigers.
Afhankelijk van de context kunnen lo-fidelity-prototypen een goed mechanisme zijn voor het leveren van ontwerp. Ze zijn vaak effectief in het leveren van nieuwe producten binnen een reeds vastgesteld visueel ontwerpsysteem. De manier waarop verschillende interacties visueel worden gepresenteerd, is al vastgesteld, daarom is de manier waarop een gebruiker interactief door een applicatie vloeit, het hoofddoel van het te leveren product..
Lo-fidelity prototypingHet hi-fidelity-prototype toont het geheel van een ontwerp - het visuele, interface- en belevingsontwerp - de heilige graal van interactieve ontwerpproducten. In een hi-fidelity-prototype kunnen belanghebbenden, ontwikkelaars en gebruikers volledig communiceren met het te leveren product en de organisatie een aantal voordelen bieden..
Ten eerste zorgen hi-fidelity-prototypen voor een effectievere en efficiëntere communicatie tussen afdelingen. Vaak wordt tijd bespaard omdat ontwikkelaars volledig kunnen begrijpen hoe een interactie is gestructureerd voordat ze op het verkeerde pad gaan en waardevolle ontwikkeltijd verspillen. Belanghebbenden waarderen hi-fidelity-prototypen ook, omdat ze de interactieve en visuele ontwerpconcepten volledig kunnen begrijpen in één geconsolideerd product. Hi-fidelity-prototypen besparen dus middelen door effectieve communicatie van ontwerpideeën naar ontwikkelaars en belanghebbenden.
Een ander voordeel van het creëren van hi-fidelity-prototypen is het faciliteren van robuuster onderzoek naar gebruikerservaring. Een gebruiker kan volledig communiceren met het prototype en zo hiaten in het ontwerp in realtime illustreren. Veel hi-fidelity-prototypen zijn geschikt voor de introductie van analysesoftware in het product zelf, en bieden aanvullende, ondersteunende methoden voor het uitvoeren van gebruikersonderzoek. Google Analytics kan worden opgenomen in html-gegenereerde prototypen, bijvoorbeeld door gebruikersexperimenten en A / B-testen te vergemakkelijken. Uiteindelijk zorgt het vermogen om gebruikerstesten eerder in de levenscyclus van productontwikkeling op te nemen, voor een efficiënter proces en resulteert dit in een beter product: ontwikkeltijd wordt opgeslagen terwijl het ontwerp wordt gewijzigd voordat het wordt gebouwd, en iteraties vinden plaats vóór de eerste release van de artikel.
Verder kan, afhankelijk van uw belanghebbenden, een hi-fidelity-prototype het verkooppotentieel vergroten, waardoor het de winst van uw bedrijf rechtstreeks beïnvloedt. Bij CrossCap ontwerpen we modules voor de manipulatie en analyse van marketingcampagnes bij 's werelds grootste retailers. Het verkopen van een klant op een bepaalde module - waarvan er vele nog moeten worden ontwikkeld - is veel eenvoudiger wanneer de klant kan gaan zitten en volledig kan communiceren met het toekomstige product. Het leveren van hi-fidelity interactieve prototypes heeft daarom bijgedragen aan de winst van het bedrijf door de verkoop te verhogen.
Er zijn veel voordelen aan het produceren van hi-fidelity interactieve prototypen. Helaas missen veel van de huidige prototyping-instrumenten de verfijning om zowel robuuste visuele als ervaringsgerichte ontwerpconcepten te portretteren. De prototyping-tools van vandaag zijn beperkt in hun toepassingsgebied, en zijn gespecialiseerd in de een of de ander. Axure heeft bijvoorbeeld een robuuste interactie-ontwerpsuite, waardoor de elementen eenvoudig kunnen worden gemanipuleerd, maar de verfijning ontbreekt in andere meer visueel georiënteerde hulpmiddelen, zoals kleurenpaletten, geavanceerde vormmanipulatie, enz..
Aan de andere kant van het spectrum liggen gereedschappen als Quartz Composer, waarmee je gemakkelijk geavanceerde visuele ontwerpsamenstellingen kunt opnemen, maar geavanceerde interactievereisten illustreren, uitgebreide manipulatie van patches en geavanceerde kennis van de tool..
Origami de Quartz Composer-toolkit van FacebookGezien het gebrek aan een holistische gestaltgestuurde benadering van de huidige tools voor het ontwerpen van technologie, zorgt het maken van hi-fidelity-prototypen voor een verhoogde belasting van de ontwerpafdeling, omdat hulpmiddelen zorgvuldig moeten worden gemasseerd om het gewenste resultaat te produceren. Om bijvoorbeeld hi-fidelity-prototypen te maken, hebben we Axure moeten hacken om direct in de gegenereerde html interactie-ontwerp-Javascript te injecteren. Het gebruik van Sketch with framer.js heeft vergelijkbare problemen opgeleverd, waarvoor een geavanceerde workflow vereist is die afhankelijk is van een interdisciplinaire benadering van ontwerp.
Ons ontwerpteam ruimt deze hindernissen bij het creëren van hi-fidelity interactieve prototypen op door een multidisciplinaire teamstructuur: we hebben een team, variërend van zeer bekwame visuele ontwerpers tot code-gerichte front-end ontwikkelaars, plus een paar leden die de grens tussen . Hierdoor kan elk lid zijn of haar vaardigheden gebruiken om bij te dragen aan een enkel deliverable dat robuuster is van aard. Als gevolg hiervan zorgt de teamstructuur voor een hoger niveau van efficiëntie, bespaart het tijd en middelen en draagt het bij aan het verkooppotentieel van onze producten. Terwijl sommige organisaties het ontwerpteam en hun deliverables in verschillende eenheden segmenteren (UI in Photoshop, UX in Axure, enz.), Is de kracht van ons team gelegen in het verenigen van verschillende vaardigheden om één doel te bereiken en te leveren.
Hi-fidelity prototypingEr zijn veel voordelen aan het produceren van hi-fidelity-prototypen bij het ontwerpen van technologische producten: ze besparen ontwikkeltijd, creëren een effectievere communicatie tussen afdelingen en belanghebbenden, dragen bij aan een efficiënter proces en, afhankelijk van de organisatie, vergroten ze hun verkooppotentieel. Uiteindelijk moet uw beslissing over de te volgen route echter afhankelijk zijn van de organisatie, de belanghebbenden, de tijdlijn, de aard van het te leveren product, de communicatieniveaus tussen afdelingen en de productontwikkelingfilosofie van de organisatie..
De effectiviteit van het ontwerp wordt gemeten in de uitvoering. Hoewel hi-fidelity-prototypen de uitvoering van ontwerpideeën vergemakkelijken door een effectievere communicatie te bieden die resulteert in een betere toewijzing van middelen, zijn ze in geen geval het enige voertuig op weg naar het creëren van een geweldig product. Wanneer u nadenkt over de te volgen route bij het maken van uw deliverables, overweeg dan de voor- en nadelen van de verschillende hierboven genoemde methodieken, uw teambronnen en de vaardigheden, uw organisatiestructuur en filosofie, en aan wie u ontwerp levert om het beste te ondernemen pad en maak het beste product.
In mijn volgende post zal ik deze prototypingaanpak op hoog niveau illustreren met voorbeelden van elk te leveren formaat om je verder te begeleiden naar het juiste pad om te nemen met interactieve deliverables.
Accentsconagua