Inhoud
1. Waaruit bestaat een functioneel ontwerp? (Terugblik)
2. Een digitaal interactief klikbaar prototype
3. Andere interactieve prototype experience design tools
4. Wat is Adobe XD (Experience Design)?
5. Waarom prototype met Adobe XD?
6. Waarom maak je een klikbaar prototype?
7. Hoe werkt Adobe XD?
8. Tutorials
9. Opdracht 9: Adobe XD klikbaar prototype
Richard Slakhorst
1. Waaruit bestaat een functioneel ontwerp? (Terugblik)
Zoals je een bouwtekening nodig hebt voor het bouwen van een huis, zo heb je een functioneel ontwerp (FO) nodig voor het maken van een website, webshop of een App of ander mediaproduct Een functioneel ontwerp is de ‘blauwdruk’ of ‘bouwtekening’ van je website, webshop, App of ander mediaproduct.
A. Het is een methode om een aankoopproces of een dienst vanuit het perspectief van de klant te visualiseren.
B. Het beschrijft de ervaringen van een klant gedurende de reis die een klant maakt om zich te oriënteren, of een product of dienst aan te schaffen en beschrijft voor de rest alle functionaliteiten van de webapp-webshop.
C. Het ene functioneel ontwerp (FO) is uitgebreider dan het andere. Het verschilt namelijk per type opdracht wat er in het functioneel ontwerp moet komen, vandaar dat er niet maar één juist format voor een functioneel ontwerp bestaat.
Wel bestaat een functioneel ontwerp (FO) meestal tenminste uit de volgende elementen:
1. Doelgroeponderzoek
2. Doelen van de website voor gebruikers en de onderneming (user story’s)
3. Structuur van de website (flowchart)
4. Uitwerking functionaliteiten per pagina gedetailleerd (wireframes)
5. Input voor design en techniek (basis styletile)
6. Interaction-ideeën (interaction design) (interactive mockups?) (prototype)
1. Een digitaal interactief klikbaar prototype
In de vorige les hebben we een paper prototypes gemaakt. De volgende stap is om een digitaal interactief klikbaar prototype te maken. Daarvoor gaan we gebruik maken van een digitale experience design (XD ) tool. We kiezen voor Adobe XD omdat die in de creative cloud van de school zit. Adobe XD staat voor Adobe Experience Design. Adobe XD bied je een end-to-end-tool om ervaringsontwerpen op schaal te creëren en stroomlijnt de samenwerking met klanten (doelgroep en opdrachtgever) in de ontwerpfase.
Je evalueert je ontwerp door middel van testen, samen met je doelgroep, totdat je ontwerp succesvol is bij de doelgroep.
2. Andere interactieve prototype experience design tools
• Abobe XD (Licentie van school)
• Axure
• Sketsch
• Figma
3. Wat is Adobe XD (Experience Design)?
Met Adobe Experience Design (Adobe XD) kun je snel prototypes ontwerpen van websites en webapplicaties. Met Adobe XD kan je interaction en navigatie design en de user interface (UI) ontwerpen, door een prototype te maken met alle mogelijke grafische onderdelen. Het is makkelijk om een user interface (UI) te importeren uit Photoshop, Sketch, Illustrator en zelfs Adobe after effects.
Het programma stelt je eenvoudig in staat om snel digitale interactieve producties te ontwerpen, waarbij je direct interactiviteit en de user experience kunt testen op een smartphone of tablet. Daarnaast biedt Adobe XD met dit programma de mogelijkheid om online te publiceren, zodat je de productie kunt delen en laten testen door wie je maar wilt.
Zo kan de productie daardoor sneller en efficiënter gerealiseerd worden.
Workflow >>
4. Waarom prototype met Adobe XD?
Het resultaat van je werk kan je op elk moment live testen, met je doelgroep op je computerscherm of een mobiel toestel (Download de XD app). Ten slotte kan je in de module SHARE de ontwerpen op verschillende manieren delen met je opdrachtgevers en docenten en zo live feedback ontvangen, verbeteringen aanbrengen, een project laten valideren en het dan uiteindelijk doorsturen naar ontwikkelaars en je docent.
A. Innovatieve ideeën maken
Je maakt een innovatief idee waardoor je ideeën tot leven komen zoals User experience of gebruikerservaring met maar één doel: de bezoeker van je website-app de beste beleving laten ervaren op je website of app, en déze doelgroep specifiek.
B. Interaction en navigatie design ontwerp
Je kunt je interaction en navigatie ontwerpen en testen.
C. Overtuig anderen
Met een prototype heb je een tastbaar, werkend product. Hiermee overtuig je anderen veel sterker dan met een idee. Met enkel een powerpoint kom je er niet meer.
D. Verklein de risico’s
Verklein de risico’s van fouten in de productontwikkeling: krijg sneller feedback over mogelijke fouten en verkeerde aannames.
E. De gebruikerservaring testen
Een doordacht UXD-design zal je een knappe Return On Investment (ROI) opleveren.
5. Waarom maak je een klikbaar prototype?
Waarom is klikbaar prototyping zo belangrijk in het ontwerpproces? Jouw ontworpen interface, website of app kan nog zo mooi zijn en zelfs bovenaan in Google staan: dat maakt je website nog niet automatisch een succes. Stel je voor: duizenden bezoekers van wie er niet één in actie komt door te bellen, mailen of bestellen.
Dit kan je voorkomen door je website eerst te ontwikkelen als een paper prototype.
Je test op een snelle manier
– De Usability en gebruikerservaring van gebruikers van jou ontwerp.
– Interaction design ideeën
– Navigation design ideeën
– Interface design ideeën
• Je kan snel direct verbeteringen aanbrengen zonder tijd en geld te verspillen.
• Je leert wat echt belangrijk is voor de gebruiker/ klanten.
• Klanten en opdrachtgevers worden heel laagdrempelig betrokken (Co-create).
• Werk samen met andere designers tegelijkertijd in hetzelfde bestand. Perfect voor designs
teams op afstand.
• Het is snel, effectief en goedkoop.
• Het is extreem praktisch en voegt direct waarde toe.
De gebruikerservaring testen
De gebruikerservaring zorgt ervoor dat je conversies verhogen. Een doordacht UXD-design zal je een knappe Return On Investment (ROI) opleveren. Onthoud dat een ervaring steeds verandert. Mensen bevinden zich in een andere fase van het aankoopproces of zijn gewoon op zoek naar iets helemaal anders. Ook de trends veranderen soms zodanig dat we een heuse ommekeer moeten realiseren. Al deze zaken hebben invloed op je User Experience Design. Blijf niet stilstaan en evolueer samen met je doelgroep en klanten mee. Zorg in iedergeval dat je bezoekers een positief gevoel en ervaring overhouden aan hun website-app bezoek. Vaak resulteert dit in terugkerende bezoekers en uiteindelijk… in een klant die vaak en graag terug komt naar jouw website-app en dat kun je uit testen met een prototype met Adobe XD.
Je kunt op elk onderdeel van het schema “Fundamentals User Experience Design” een klikbare prototype-test maken, daar waar het geïntrigeerd kan in relatie met alle onderdelen van het schema. Dit heeft de voorkeur, maar je kunt ook altijd losse onderdelen testen.
6. Hoe werkt Adobe XD?
Je weet meer dan je denkt. Als je al een beetje kennis hebt van de andere Adobe programma’s, is het vrij gemakkelijk om met dit programma overweg te kunnen. Het plaatsen van teksten werkt bijvoorbeeld hetzelfde als bij Photoshop en Illustrator, maar ook zonder enige kennis kun je aan de slag. Adobe XD is simpel vormgegeven en dus overzichtelijk, in tegenstelling tot de andere Adobe-programma’s.
De meeste interactie kun je maken met deze onderdelen:
– trigger
– action
– destination
– animation
7. Tutorials
A. Linkedin learning: de cursus Adobe XD
Linkedin learning (Inloggen met je school account)
Adobe XD tutorials.
B. Adobe XD basis kennis
Je kunt ook onderdelen terug zoeken, loop hier even door heen.
Aan de slag met Adobe XD stap voor stap
Gebruikshandleiding Adobe XD
Adobe XD Community
Deze 2 interacties zijn verplicht
1.Artboards koppelen
Tutorials. Linking artboard of button.
2.Button Hover Effect
2A Tutorials. Adobe xd button hover 1 of 2B.Adobe xd button hover 2 (Mouseover Mouseclick).
3.Interacties vrije keuze (kies er hier 2 uit ) en bestudeer deze eerst >Tutorials.
Adobe xd hamburger menu
Adobe xd dropdown menu 1
Adobe xd dropdown menu 2
Pop-up overlay in Adobe XD
Adobe xd tab bar
Adobe xd search bar
Adobe xd Smooth Slide-Out Menu
Create Anchor Links in Adobe XD
Adobe xd link to website Adding Links
Adobe xd keyboard overlay
Interaction with Nested Components
Hover & Micro-Interactions
Adobe XD Multiple Interactions
Introducing Components
C. Interaction tutorial (Maak er zoveel mogelijk na. In ieder geval 2 interaction )
De kunst is om het juiste zoekwoord te vinden om een interactie te maken in Adobe XD
Als je eenmaal het juiste zoekwoord hebt, dan is het makkelijke om de juiste Tutorial online te vinden.
8. Opdracht 9: Interaction 2 oefeningen in Adobe XD
M4BO UXD 9 Interaction 2 oefeningen in Adobe XD
Oefening 1
Artboards koppelen
Document download hier Test documen
Tutorials.Linking artboard of button.
Oefening 2
Button Hover Effect
Tutorials.Adobe xd button hover 1 of deze 2B.Adobe xd button hover 2 (Mouseover Mouseclick).
8. Opdracht 9: Adobe XD klikbaar wireframe prototype
M4BO UXD 10 Opdracht maak wireframe prototype in Adobe XD
Adobe XD klikbaar prototype
Je gaat nu een klikbaar interactief wireframe prototype maken met minimaal 4 interacties met het softwareprogramma Adobe XD. Je gaat nu je wireframe van je kunstmuseum die je hebt gemaakt in illustrator klikbaar en interactief maken met Adobe XD en zo maak je een interactieve prototype van je wireframe.
1
Je gaat 4 unieke interacties onderzoeken en uitproberen in softwareprogramma adobe XD en die toepassen op je wireframe van je kunstmuseum.
Je koppelt minimaal 3 pagina’s aan elkaar, zodat je heen en terug kunt klikken. Dat doe je minimaal met 3 knoppen vanuit de pagina’s of vanuit het menu.
Deze interacties zijn verplicht uit de lijst om toe te passen in je Adobe XD prototype omdat het eigenlijk basis interacties zijn:
1e. Linking artboard of button.
2e. Linking a button hover (Mouseover Mouseclick).
3
Daarnaast maakt nog minimaal 2 interacties interactief in Adobe XD 3e en 4e. Je hebt in de legende van jouw wireframe een aantal interacties beschreven. Die ga je nu in Adobe XD nabouwen of je mag 2 interessante interacties, zelf uitzoeken uit de lijst van interacties vrijekeuze, die dan gaat toevoegen.
# Als je meerdere keren dezelfde interactie hebt toegevoegd dan telt dat als 1 interactie. Als je maar minimaal 4 interacties, inclusief de verplichte interacties A en B, hebt toegevoegd.
4
Dus je 3 wireframes pagina’s (in grijstoon) die je hebt gemaakt in illustrator zijn je basis voor jouw klikbare prototype, Maak eerst in illustrator de wireframes schoon en verwijder de legenda zorg dat je 3 losse pagina’s in illustrator hebt die kunt importeren in Adobe XD.
Stappenplan : Bestuderen Oefenen en Toepassen.
DEADLINE 1 Adobe XD week 1
- Kijk globaal naar de cursus Adobe XD van “linkedin learning“. Kijk ook naar andere online tutorials van Adobe XD en zorg dat je een globaal overzicht krijgt van wat Adobe XD kan (Zie ook de aangeboden lijst).
- Bekijk op YouTube een aantal Adobe XD interactie tutorials (zie de aangeboden lijst). (Zie C. Interacties vrije keuze onder C.)
- Besluit welke 2 interacties je wilt gaan bouwen in Adobe XD uit de lijst Interacties vrije keuze. Je mag ook een zelfverzonnen interactie bouwen of een interactie die je via een tutorial online hebt gevonden en bestudeerd hebt.
- Je gaat eerst 2 tutorial uit de aangeboden lijst eerst in een Adobe XD testbestand oefenen totdat je het door hebt en begrijpt hoe de interactie technisch werkt.en dan voeg je het toe aan je wireframe of een vereenvoudig wireframes die in Adobe XD hebt gemaakt.
Oefenen 2 nu tutorials uit de aangeboden lijst>
Tutorial 1 ?
Tutorial 2 ?
DEADLINE 2 Adobe XD week 2 - Je importeert je wireframes in Adobe XD en verwijdert de legenda teksten en maakt er een schoon bestand van of maak een vereenvoudig wireframes in Adobe XD
- Dan ga 1 voor 1 de 4 interacties toevoegen aan je klikbare Adobe XD prototype.
! Let op ! Beoordelingscriteria
Beoordelingscriteria
1. Je koppelt minimaal 3 wireframes in pagina’s aan elkaar, zodat je heen en terug kunt klikken. met 3 knoppen vanuit de pagina’s of vanuit het menu.
2. Minimaal 4 interacties inclusief de verplichte interacties.
A. Linking artboard of button. B. Linking a hover (Mouseover Mouseclick)
3. je voegt 2 interacties uit lijst vrij keuze toe.
De onderdelen die interactief zijn hebben een accent in kleur of op een andere manier een markering.
Beoordelingscriteria excellent
1. Je koppelt minimaal 3 wireframes in pagina’s aan elkaar, zodat je heen en terug kunt klikken. met 3 knoppen vanuit de pagina’s of vanuit het menu.
2. Minimaal 6 interacties inclusief de verplichte interacties.
A. Linking artboard of button. B. Linking a hover (Mouseover Mouseclick).
3. je voegt 4 interacties uit lijst vrij keuze toe.
De onderdelen die interactief zijn hebben een accent in kleur of op een andere manier een markering.
INLEVERWIJZE
1. Je levert een sharing linkje van je bestand.
2. Je levert orginele bestand in via Safe as local document.
3. Je maakt een xd filmpje van het klikbare prototype met alle interacties.
DEADLINE 1 Adobe XD
Week 1
Lees theorie door.
A. Je hebt een goed overzicht van wat Adobe XD kan. Je hebt de interessante interacties bestudeerd uit de lijst en je hebt besloten welke interactie je gaat toevoegen aan jouw klikbare prototype.
B. je hebt in ieder geval 2 interacties geoefend in een test document en bent klaar en laat deze zien via de share Link delen met je docent in dit Excel overzicht.<klik<<
om samen met de klas bekijken
C. Je hebt de stappen 1 t/m 4 van de stappenlijst gedaan en gemaakt.
DEADLINE 2 Adobe XD
Week 2
Lees theorie door.
A. Je hebt de wireframe van je kunstmuseum van periode 2 je hebt gemaakt in illustrator schoon gemaakt en geïmporteerd in Adobe XD.
B. Je het 4 interacties in verwerkt Adobe XD en klikbaar gemaakt.
C. Je hebt alle stappen 1 t/m 6 van de stappenlijst gedaan en gemaakt.
D.Je hebt er test filmpje van gemaakt zoals voor gedaan in de klas.
RESULTAAT
Een goed werkend klikbaar wireframe-prototype in een Adobe XD-bestand en een filmpje.
Voorbeeld