5 dingen die je moet weten voor je start met Fluid projecten 16 November 2016 Sessie 1 | 10:45 uur

sprekers Functie: Interaction Designer steven.bos@roc-nijmegen.nl Stefan van Liempt Functie: Interaction Designer steven.bos@roc-nijmegen.nl 4 instellingen (Alfa-College, Noorderpoort, ROC van Twente, ROC Nijmegen Functie: PeopleSoft Consultant stefan@cy2.nl Interaction Design = nieuw voor Stefan Oracle’s Campus Solutions = nieuw voor Steven deug conference 16 NOVEMBER 2016

Demo fluid – Mijn resultaten deug conference 16 NOVEMBER 2016

Agenda INTERACTION DESIGN (IXD) Wat is het? En waarom zouden we het moeten gebruiken? THE WORLD OF RAPID PROTOTYPING Live prototyping LATEN WE EEN HERONTWERP MAKEN! Van het begin: verbeter een Fluid page TIPS & TRICKS 5 dingen die je moet weten voor je start met Fluid projecten VRAGEN deug conference 16 NOVEMBER 2016

Interaction design (iXD) WAT IS HET? EN WAAROM ZOUDEN WE HET MOETEN GEBRUIKEN? deug conference 16 NOVEMBER 2016

Organisatie IMPACT (de verschuiving van klassiek naar FLUID) T.C. F.C. Eind- gebruiker PeopleSoft Development Data models Requirements Licht het product toe Verschuiving naar Fluid brengt de volgende nieuwe rollen / uitdagingen Dev T.C. F.C. Eind- gebruiker F.E.Dev IxD Dev Frond-end Development CSS JavaScript HTML PeopleSoft Development Data models Requirements Interaction Design Mobile Tablet Desktop Licht het product toe deug conference 16 NOVEMBER 2016

The World of User Experience Wat lost het op? deug conference 16 NOVEMBER 2016

Peoplesoft fluid ux standards deug conference 16 NOVEMBER 2016

definitie IXD Interaction design association (ixda) “Interaction Design (IxD) bepaalt de structuur en het gedrag van interactieve systemen. Interaction Designers streven er naar om betekenisvolle relaties te creëren tussen mensen en de producten en diensten die zij gebruiken.” deug conference 16 NOVEMBER 2016

5 essentiële principes van interaction design BELANGRIJK OM TE ONTHOUDEN: WE HEBBEN HET OVER HET GEDRAG VAN MENSEN deug conference 16 NOVEMBER 2016

Principe 1- consistentie Consistentie in interacties vergemakkelijkt usability, geloofwaardigheid, en vertrouwen Mensen zijn gevoelig voor verandering Een ontwerpstandaard waardoor mensen zich comfortabel voelen deug conference 16 NOVEMBER 2016

principe 1 - consistentie fluid voorbeelden Wat is niet consistent? Screenshots gemaakt van CS92 AND ELM PUM 2016 deug conference 16 NOVEMBER 2016

principe 2 - zichtbaarheid Zorg ervoor dat mensen weten wanneer en waar ze interactie kunnen hebben met de interface Aanwijzing: “Hey, ik ben klikbaar!” Met verborgen interacties vertrouw je op lukraak klikken Je ontwerpt een ervaring, niet een speurtocht deug conference 16 NOVEMBER 2016

Principe 2 - zichtbaarheid Fluid voorbeelden Wat is hier de meest logische volgorde? Optie 1 Optie 2 DEUG conference 2016 Wat kunnen we doen met deze tile? deug conference 16 NOVEMBER 2016

Principe 3 - leerbaarheid Beginner Expert Meer fouten Minder gebruik tijd Principe 3 - leerbaarheid Betekenisvolle labels, inhoud en interacties maken het mogelijk een ervaring snel te begrijpen en te herhalen Oefenen om ons geheugen te versterken Theorie: operante conditionering Een positief resultaat verhoogt de kans op bepaald gedrag deug conference 16 NOVEMBER 2016

Principe 3 - leerbaarheid fluid voorbeelden deug conference 16 NOVEMBER 2016

Principe 4 - voorspelbaarheid Schep verwachtingen van wat er gebeurt om verwarring en onvrede te verlagen Willekeurig klikken vs. Taakgericht Weet jij wat elk element doet? Verwachtingen die kloppen leidt tot het kunnen voorspellen van een resultaat Niet in staat te voorspellen Begrijpt wat er gebeurt deug conference 16 NOVEMBER 2016

principe 4 - voorspelbaarheid fluid voorbeelden Wat mist hier? Het “pijltje” (chevron) is een indicatie dat de rij klikbaar is Screenshots gemaakt van CS92 PUM 002 July 2016 deug conference 16 NOVEMBER 2016

principe 5 - Feedback Verstrek informatie over status, locatie, voortgang en voltooiing Verbeter de ervaring, maak het niet ingewikkelder Ongedaan maken van een keuze en fouten corrigeren deug conference 16 NOVEMBER 2016

principe 5 - Feedback fluid voorbeelden Ik hoef niet te klikken Ik moet klikken Ik weet het niet deug conference 16 NOVEMBER 2016

THE WORLD OF RAPID PROTOTYPING LIVE PROTOTYPING deug conference 16 NOVEMBER 2016

Laten we nieuwe functionaliteit aan onze demo toevoegen Studenten de mogelijkheid geven om hun resultaten te delen deug conference 16 NOVEMBER 2016

Van schets naar prototype Gaat over functionaliteit en navigatie Gaat over look en feel Eenvoudige tekening Snelle manier om een idee te laten zien Simuleren van eindontwerp, esthetiek en functionaliteit Wireframe Mock-up Schets Proto type rapid deug conference 16 NOVEMBER 2016 Bron: http://www.slideshare.net/voutulny/wireframe-vs-mockup-why-and-when

Van schets naar prototype Wireframe Schets Mock-up deug conference 16 NOVEMBER 2016 Bron: http://www.slideshare.net/voutulny/wireframe-vs-mockup-why-and-when

Waarom (RAPID) prototyping? Testrit voordat er gebouwd wordt Snel duidelijk wat werkt en wat niet Iteratief proces Ga verder dan een schets, maak iets waarmee je kunt spelen Hier begint usability testing: laat het mensen zien deug conference 16 NOVEMBER 2016

Hoe start ik met prototyping? 1. Creëer Fluid specifieke widgets Kosten prototyping software: Licentie per maand $29 Software pakket $495 2. Creëer pages & flows deug conference 16 NOVEMBER 2016

Rapid vs. traditioneel PT Gebaseerd op een simpele – medium applicatie Rapid vs. traditioneel PT Creëren van RP elementen (widgets) Prototype bouwen (pages & flows) Prototype aanpassen Onderhoud (update widgets) 5 dagen 5 -30 minuten 5-30 minuten 1-2 uur per maand 2/3 CSS Prototype bouwen (Application Designer) Prototype aanpassen Onderhoud (Update Widgets) 2-4 uur 1- 1,5 dag Na 2 of 3 iteraties blijkt rapid prototyping haalbaar 2-4 uur n.v.t. deug conference 16 NOVEMBER 2016

Laten we een herontwerp maken deug conference 16 NOVEMBER 2016

Herontwerp Ontzettend lange lijst met knoppen! Screenshot gemaakt van CS92 PUM 001 Herontwerp Ontzettend lange lijst met knoppen! deug conference 16 NOVEMBER 2016

Herontwerp Laten we hier een dropdown maken deug conference 16 NOVEMBER 2016

5 dingen… deug conference 16 NOVEMBER 2016

5 dingen… Lees de PeopleSoft Fluid UX Standards Dit geeft een goede basis voor Design Patterns IxD en F.E. development zijn opkomend! Wanneer je voor Fluid ontwikkelt hebben beide hebben een grote impact voor de organisatie De 5 principes van interaction design Consistentie, Zichtbaarheid, Leerbaarheid, Voorspelbaarheid, Feedback Rapid prototyping helpt enorm Zelfs al bij een paar iteraties! Gebruik een iteratieve benadering Design, krijg feedback, design… ontwikkel Steven punt 1, 3 en 5 Stefan punt 2 en 4 deug conference 16 NOVEMBER 2016

VOOR VRAGEN KAN ER CONTACT WORDEN OPGENOMEN MET STEVEN BOS Stefan van Liempt Functie: Interaction Designer steven.bos@roc-nijmegen.nl Functie: PeopleSoft Consultant stefan@cy2.nl VOOR VRAGEN KAN ER CONTACT WORDEN OPGENOMEN MET STEVEN BOS deug conference 16 NOVEMBER 2016

Bedankt!