Goed Fiori design in een notendop

Snel een prototype ontwikkelen die je kunt testen op de gebruiker is van grote waarde in elke ‘agile werkomgeving’. Daarbij is het van groot belang dat de eindgebruiker en de business continu wordt betrokken. Door het design te testen en aan te passen, ontwikkel je een duidelijke visie over hoe de applicatie waarde toevoegt. Ook ontwikkel je een applicatie die in lijn is met de verwachtingen en behoeften van de gebruiker. Wanneer je de Fiori Design Guidelines nauwgezet volgt, zal de applicatie zo ontwikkeld worden, dat de gebruiker het verschil niet zien tussen de aangepaste Fiori app en een standaard SAP Fiori app.

Fiori Design Guidelines: https://experience.sap.com/fiori-design-web/

SAP Build

SAP Build is een van die snelle Fiori prototyping tools. Het stelt je niet alleen in staat om een high-fidelity prototype te maken, ook kun je het prototype makkelijk delen met de stakeholders. Zo kunnen belanghebbenden het prototype vroegtijdig testen, beoordelen en feedback geven en kun jij een app ontwikkelen die exact is afgestemd op de eisen en wensen. De perfecte tool voor de job, zou je zeggen. Totdat SAP om onbekende redenen besloot SAP Build op te heffen, wat betekent dat bedrijven geen licenties meer kunnen kopen voor deze tool. SAP Build zal worden beëindigd wanneer de laatste contracten ergens in 2024 aflopen.

SAP Build

SAP Build sunset

Fiori Design Stencils

Zonder SAP Build zijn er niet veel opties meer over voor Fiori prototyping. Een optie is de Fiori Design Stencils. Dit is in wezen een bibliotheek van Fiori componenten die kunnen worden geïmporteerd in verschillende bestaande ontwerptools:

  • Sketch
  • Axure RP
  • Adobe XD

Zodra je de bestanden hebt gedownload, de fonts hebt geïnstalleerd en de bibliotheek hebt geïmporteerd in de ontwerptool van je keuze, ben je klaar om te starten. Je kunt zoeken naar elke Fiori control en design patroon. Wanner je eenmaal hebt gevonden wat je zocht, kunnen deze componenten eenvoudig worden versleept en neergezet in een Fiori app design canvas.

Here a link to Fiori Design Stencils

Adobe XD

In de afbeeldingen hieronder zie je het proces voor het maken van een eenvoudig prototype van een lijstrapport met behulp van de Adobe XD tooling.

  1. 1. Maak een ‘new blank Web 1920 canvas’ en zoek naar “application xl”. Dit geeft je het element: “LAYOUTS, FLOORPLANS & FRAMEWORKS/APPLICATION PAGE/XL 1440px”. Sleep het element naar het canvas.
INNOV8iON-SAP-Fiori-Design-Blank-web

2. Zoek nu naar “filter bar xl”. Dat creëert een “UI ELEMENTS/FILTER BAR/EXPANDED/XL 1440px”. Sleep het element naar het canvas en positioneer het binnen de lege applicatie pagina. Het zou perfect moeten passen aangezien dezelfde grootte (XL) werd gebruikt.

INNOV8iON-SAP-Fiori-Design-Blank-filterbarXL

3. Zoek nu naar “responsive table xl”. Zo creëer je “UI ELEMENTS/RESPONSIVE TABLE/VARIANT 4/XL 1440px”. Sleep het element naar het canvas en positioneer het binnen de lege applicatie pagina. Verwijder enkele rijen van de tabel om het passend te maken in de toepassingspagina.

INNOV8iON-SAP-Fiori-Design-responsive-Table-XL

4. Om het daadwerkelijke prototype tot leven te laten komen, verander je de standaardgegevens op de elementen zodat ze overeenkomen met de werkelijke toepassing waaraan je werkt. Doe dit door te dubbelklikken op alle elementen die gewijzigd moeten worden en simpelweg de waarden in te typen die je wilt.

INNOV8iON-SAP-Fiori-Design-prototype

Het prototype kun laten zien aan de stakeholders. De verschillende ontwerptools hebben allemaal opties om het prototype op een eenvoudige manier te delen. Adobe XD heeft de optie om het prototype in één klik te uploaden naar de Adobe cloud. Daardoor kun je het prototype makkelijk te delen door een URL te delen die direct naar het prototype leidt in een preview mode.

The future of Fiori design

Zijn de Fiori Design Stencils ‘de nieuwe manier van werken’? Of komt SAP met een speciale tool die speciaal is afgestemd op Fiori design? Dat is nog de vraag. Aan de ene kant zijn developers of UX Designers gewend aan een van de bestaande ontwerptools, dus zou het verstandig als SAP hiervan gebruikmaakt. Anderzijds is Fiori een zeer specifiek UI framework waarvoor een ‘dedicated’ design tool zinvol kan zijn, zodat je als developer in staat bent om je Fiori apps veel efficiënter te ontwerpen. Hoe dan ook, de Fiori design stencils zijn op het moment van schrijven de enige werkbare optie voor goed prototyping.

Goed Fiori design in een notendop
Recente Posts

Schrijf je in voor onze nieuwsbrief

En blijf op de hoogte van de nieuwste evenementen