5 dingen die je moet weten voor je start met Fluid projecten

Presentatie over: "5 dingen die je moet weten voor je start met Fluid projecten"— Transcript van de presentatie:

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

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

3 Demo fluid – Mijn resultaten
deug conference 16 NOVEMBER 2016

4 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

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

6 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

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

8 Peoplesoft fluid ux standards
deug conference 16 NOVEMBER 2016

9 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

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

11 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

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

13 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

14 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

15 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

16 Principe 3 - leerbaarheid fluid voorbeelden
deug conference 16 NOVEMBER 2016

17 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

18 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

19 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

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

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

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

23 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:

24 Van schets naar prototype
Wireframe Schets Mock-up deug conference 16 NOVEMBER 2016 Bron:

25 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

26 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

27 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

28 Laten we een herontwerp maken
deug conference 16 NOVEMBER 2016

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

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

31 5 dingen… deug conference 16 NOVEMBER 2016

32 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

33 VOOR VRAGEN KAN ER CONTACT WORDEN OPGENOMEN MET STEVEN BOS
Stefan van Liempt Functie: Interaction Designer Functie: PeopleSoft Consultant VOOR VRAGEN KAN ER CONTACT WORDEN OPGENOMEN MET STEVEN BOS deug conference 16 NOVEMBER 2016

34 Bedankt!