Top 3: UX (tools)
User Experience oftewel gebruikers ervaring is een belangrijk onderdeel van applicaties en websites. Zonder onderzoek, validatie- en testmomenten wordt een product ontwikkeld op basis van aannames. Bij Arcady houden we niet van aannames en gaan we graag op zoek naar de hoe achter de waarom. Het is beter om de ontwerpen en user journeys kort cyclisch te valideren bij de eindgebruiker en stakeholders.
Hiervoor zijn geen harde regels in welke tijdsplanning je dit doet, maar als je “test early, test often” als regel hanteert, haal je al snel pijnpunten naar boven die gebruikers ervaren. Het zou immers enorm balen zijn als je met trots opgeleverde oplossing pas in een eindstadium wordt beoordeeld.
Daarvoor heb je de juiste tools nodig. En welke dat zijn, dat legt onze UX designer Stephan je graag uit!
Sketch
Onze favoriete ontwerptool is Sketch! Waarom? Deze tool is ontwikkeld met ‘digital design’ als basisprincipe. Het is een efficiënte en intuïtieve design tool die óók nog eens regelmatig wordt voorzien van nieuwe updates. De functies die erin zitten zijn functies die je dagelijks gebruik en het leven van een designer simpelweg eenvoudiger maken. Het concept symbols werd in 2017 als revolutionair gezien. Een symbol is een object in je ontwerp waar je 1 basiscomponent van maakt en hergebruikt op meerdere pagina’s of secties. Een aanpassing nodig na feedback? Geen probleem, pas de basis aan en al je pagina’s zijn weer up-to-date!
Sketch 58 gaat nog een stuk verder met Smart Lay-out. Dankzij deze functie worden deze symbols ook nog eens responsive. Zeg maar gedag tegen handmatig het formaat wijzigen. Het reageert op elementen binnen in je symbol waardoor tekstuele aanpassingen en formaat wijzingen geen problemen meer opleveren. Nog sneller werken? Check!
Daarnaast is Sketch een breed ondersteunde tool waar erg veel handige plugins voor zijn ontwikkeld. Mijn voorkeur? Absoluut Sketch Runner https://sketchrunner.com: vanuit een command line zoek je snel naar elementen binnen je ontwerp die je vervolgens snel kan invoegen. Check GIF
Craft
Craft is een plugin van InVision waar je veel gave dingen mee kunt doen die jou als designer veel werk uit handen neemt. Klikbare prototypen op basis van jouw ontwerpen? Check! Snel data van een bepaald onderwerp invoeren zodat je ‘echte’ content hebt in plaats van lorem? Check. Stock foto’s voor hero’s, profielen en producten? Check!
Craft haalt deze data standaard uit een paar voorgedefinieerde datasets. Ben je hier niet tevreden over? Dan kun je hier eenvoduig je eigen databron aankoppelen. Het is zelfs mogelijk om te werken met echte content van bijvoorbeeld uit .json bestanden. Bevat je project dus API’s waar al echte data in zit? Dan kun je als je ontwerper hieruit putten. Dit levert mooie samenwerkingen op met content schrijvers. Schrijven zij content of voorzien zij bijvoorbeeld de producten van meta data? Dan ben jij in staat om deze op te halen. Supergaaf toch? En erg handig als je vanuit een ‘content first’ strategie werkt.
Wat Craft echt heel sterk maakt is de koppeling met InVision door hun sync functionaliteit. De hotspots van jouw klikbare prototype worden hierin meegenomen zodat gebruikers jouw ontworpen product kunnen beleven alsof het al af is in hun eigen browser. Met 1 klik synchroniseer je alle artboards naar jouw InVision project.
InVision
Eerder hadden we het al over kort cyclisch werken. En daar heb je feedback voor nodig. Het liefst feedback van echte gebruikers. InVision voorziet jou als designer hierin om jouw ontwerpen en customer journeys te valideren en te testen.
Door binnen Sketch al zogeheten hotspots aan te maken die leiden naar een ander scherm, kunnen gebruikers de beleving en werking al meemaken. Hierdoor ben je in staat om pijnpunten naar boven te halen in de gebruikerservaring. Je krijgt direct te zien of eindgebruikers jouw ontworpen oplossing begrijpen en hiermee om kunnen gaan.
Laat je eindgebruikers op afstand testen? Geef dan zeker mee dat ze heel eenvoudig commentaar kunnen achterlaten op elke positie van jouw ontwerp. Zo krijg je een erg goed inzicht waar ze vragen over hebben en wat ze mogelijk niet begrijpen.
Daarnaast is InVision een mooie tool om je ontwerpen te delen en up-to-date te houden. Erg handig om jouw Product Owner, andere stakeholders en natuurlijk ontwikkelteam mee te nemen in oplossingen en ontwerpen.
Bonusfeature: InVision geeft ontwikkelaars eenvoudig toegang tot de paddings, margins, fonts, kleurgebruik, enzovoort. Zo heb je direct een tool om je ontwerp over te dragen naar het ontwikkelteam. Vaak gehoord: ontwikkelaars waarderen het enorm als schermen klikbaar en dynamisch zijn zodat ze exact weten wat ze moeten maken. Dus je verifieert en test met eindgebruikers, maar maakt je ontwikkelaars ook nog eens heel erg blij. Dit allemaal met 1 tool.
Bonus
Snel wat ‘echte’ gebruikers nodig voor je ontwerpen maar inspiratieloos? Geen zorgen. De website https://uinames.com is er voor je. Selecteer een land van waaruit je namen wil en ram lekker op de spatiebalk tot dat je voor jou perfecte naam vindt! Compleet random, inclusief fictieve profielfoto’s die handig zijn om te gebruiken.
Meer info / links:
Over Smart Layout: https://blog.sketchapp.com/smart-layout-a-new-welcome-window-and-projects-on-the-mac-and-cloud-whats-new-in-sketch-9c1721a2cd3b
Alle Sketch Plugins: https://www.sketch.com/extensions/plugins/
Download Sketch (30 dagen gratis proberen)
waar je ons vindt.
meerrrr...
Events
partners
