Ein Bestandteil der Frontend-Entwicklung ist die Umsetzung der Anforderungen in Prototypen. Im Folgenden erfährst du, welche Arten von Prototypen es gibt, wie du Fiori Prototypen mit SAP Build erstellst und diese zur produktiven Entwicklung in die SAP Web IDE integrierst. Auf geht's!
Prototypen sollten möglichst schnell erstellt werden können und dienen dazu die Anwendung in einem frühen Stadium des Projektes zu bewerten. Auch im Fiori Kontext kann zwischen Low Fidelity und High Fidelity Prototypen unterschieden werden:
Low Fidelity Prototypen
Bei sogenannten Low-Fidelity Prototypen wird eine rudimentäre Ansicht der zu entwickelnden App erstellt. Das kann z.B. die grundsätzliche Positionierung von Elementen (z.B. Texten, Bildern) in der App sein oder eine Darstellung der Benutzerführung.
Auf das Design wird bei dieser Art von Prototyp nicht näher eingegangen. Eine besonders schnell erstellte Variante eines Low Fidelity Prototypen ist der Papier-Prototyp.
Der Vorteil eines einfachen Papierprototypen liegt insbesondere in der schnellen Erstellbarkeit. Solch ein Prototyp erfordert keinen besonderen Zeit- oder Kostenaufwand und kann quasi von jedem erstellt werden. Benötigt werden lediglich Stifte und ein Blatt Papier.
Der Low-Fidelity-Prototyp (Lo-Fi-Prototyp) weist eine eher geringe Genauigkeit auf und besteht aus vielen Rohentwürfen. Es wird kaum Funktionalität abgebildet und wenig Rücksicht auf technische Machbarkeit genommen. Außerdem ist ein Papierprototyp nicht in der Lage, das Look-and-Feel eines Produktes zu vermitteln.
Einige dieser Nachteile sind jedoch gleichzeitig auch die Vorteile des einfachen Papierprototypen. Er macht z.B. das Testen in der frühen Konzeptphase überhaupt erst möglich. Änderungen können sehr schnell vorgenommen und neue Tests durchlaufen werden. Es besteht kein Programmieraufwand und die Testpersonen können viele Ideen äußern, da ein Papierprototyp viel Spielraum für Kreativität lässt.
High Fidelity Prototypen
Bei den High Fidelity Prototypen wird ein realitätsnaher Entwurf der später zu entwickelnden Anwendung abgebildet. Aufgrund der hohen Details werden hierbei in der Regel spezialisierte Software Programme wie z.B. Axure, Adobe Illustrator oder SAP BUILD (für Fiori prototyping) verwendet. Mit solchen Programmen ist es recht einfach möglich realistische Prototypen zu bauen.
Die Vorteile von High Fidelity Prototypen bestehen vor allem in der Möglichkeit, sich realistisches Feedback und Testergebnisse von Usern einzuholen. Neben der Ergonomie der Anwendung bekommt man auch Feedback zur Gestaltung (z.B. zu Farben, Schriften, Anordnung der Bereiche oder zu Texten und Beschriftungen).
Der Hauptnachteil dieser Prototyp-Art ist der Aufwand. Für eine detaillierte und realitätsnahe Abbildung der Oberfläche benötigt man viel Zeit. Neben der Gestaltung muss auch auf Interaktionen, z.B. die Verknüpfung von zwei oder mehr Oberflächen, eingegangen werden. Des Weiteren sind grundsätzliche Änderungen bei High Fidelity Prototypen auch nur mit hohem Aufwand zu realisieren.
Mehr über Prototypen erfährst du im itemis Blog zu Agile & Usability.
Erstellung von Fiori Prototypen mit SAP BUILD
SAP hat für die Erstellung von Low-Fidelity und High Fidelity Prototypen SAP BUILD entwickelt. Hiermit kann einfach eine Anwendung nach den Fiori Design Guidelines erstellt und getestet werden. SAP Build ist teamfähig, somit können mehrere User an der Bearbeitung mitwirken. Die cloudbasierte Software kann zudem für die einfache Einholung von User Feedback genutzt werden.
Die Software ist zum Testen unter folgendem Link erreichbar: https://www.build.me/
Nach der Anmeldung kann sofort mit der Prototyperstellung begonnen werden - entweder indem man ein neues Projekt anlegt oder ein bestehendes Beispielprojekt kopiert. Nach dem Klick auf “Create a project” hat man verschiedene Möglichkeiten, Elemente in sein Projekt einzubinden:
- Persona: Hier können verschiedene Personas erstellt und gespeichert werden (mehr zu Personas findest Du hier)
- Start with image: Bereits erstellte low fidelity Prototypen können als Bilder geladen werden. Zwischen den Bilder kann eine Beziehung hergestellt werden, sodass ein klickbarer Prototyp entsteht
- Start with template: Hiermit kann ein high fidelity Prototyp, basierend auf einem bestehenden Template, erstellt und bearbeitet werden
- Create a study: Für erstellte Prototypen können User eingeladen werden, die den Prototypen bewerten und Feedback geben
Ich wähle “Start with template” und “Master Detail” zur Erstellung eines Prototypen. Es werden automatisch zwei Seiten angelegt, die einzeln bearbeitet werden können:
Mit einem Klick auf die Masterpage öffnet sich die Seite zur Bearbeitung:
Im linken Seitenbereich werden die ausgewählten Controls angezeigt. Es können neue Controls per Drag and Drop zur Masterseite hinzugefügt und bestehende gelöscht werden. Auf der rechten Seite sind die Eigenschaften eines gewählten Controls bearbeitbar. Hier können die Bezeichnungen, Werte und Eigenschaften eines Objektes detailliert bearbeitet werden.
Weiter können Aktionen festgelegt werden, z.B. der Wechsel zu Detail-Seite per Klick:
Die Detail-Page kann genauso bearbeitet werden. Auch hier können für alle Elemente detaillierte Änderungen durchgeführt werden. Besonders praktisch: Alle Änderungen werden automatisch gespeichert.
Eine Vorschau der Fiori Applikation kann jederzeit durch Klick auf das Preview-Symbol in der Taskleiste durchgeführt werden. Hier können auch verschiedene Endgeräte (Desktop, Tablet, Phone) simuliert werden.
Erstellung von User Studies mit SAP BUILD
Wenn ein Fiori Prototyp fertig designed wurde, kann eine user study angelegt und User für einen Test eingeladen werden. Im Bearbeitungsmodus klickt man dazu einfach auf “Create Study” – ein Dialog öffnet sich zur Eingabe einer Bezeichnung und einer kurzen Beschreibung. Danach können Fragen zur Study und dem Projekt erstellt werden.
Wenn die Study erstellt wurde, kann sie mit “Publish” veröffentlicht werden – es wird ein Link generiert, der an die beteiligten User versendet werden kann.
Achtung: Die Study kann nach der Veröffentlichung nicht mehr bearbeitet werden!
Im allgemeinen Projektbereich kann das Feedback der User eingesehen werden:
Einbindung von SAP BUILD in die SAP Web IDE
Wenn der Fiori Prototyp erfolgreich erstellt wurde, lässt sich dieser problemlos in die SAP Web IDE laden, um basierend auf den Vorgaben eine echte Fiori Applikation zu entwickeln.
Um diese Funktion zu aktivieren, muss eine Option in der SAP Cloud Platform und der Web IDE aktiviert werden.
Aktivierung in der Cloud Platform
- Logge dich in die SAP Cloud Platform ein
- Gehe in den Bereich “Services” → “User Experience”
- Aktiviere den Service “SAP Build”
Mit der Service-Aktivierung werden Berechtigungen im Hintergrund aktiviert, die bewirken, dass die Integration in die Web IDE freigeschaltet wird.
Achtung: Im Produktivbetrieb können zusätzliche Lizenzgebühren anfallen!
Aktivierung in der Web IDE
In der SAP Web IDE muss die SAP Build Integration zusätzlich aktiviert werden.
Dazu in der Menüleiste der SAP Web IDE auf “Tools” → “Preferences” klicken.
Im Bereich “Workspace Preferences” auf “Features” klicken und das Feature “Import Prototype from BUILD” aktivieren.
Nach der Aktivierung ist der Import von Prototypen in die Web IDE fertig konfiguriert.
Import von Build Prototypen in die Web IDE
Eine Applikation aus SAP Build in die Web IDE zu importieren ist einfach durchzuführen. Lege dazu ein neues Projekt in der Web IDE an (“New Project from Template”):
Als “Category” kann jetzt “BUILD Project” ausgewählt werden:
In dem Anmelde-Pop Up müssen die Anmeldedaten von SAP Build eingegeben werden, danach kann man das zu importierende Projekt auswählen.
Das Projekt wird unter dem eingegebenen Namen der Web IDE hinzugefügt:
Alle notwendigen Objekte sind bereits vorhanden und können als Grundlage für die weitere Entwicklung angepasst werden.
Wenn du noch Fragen zur Erstellung von Fiori Prototypen oder zum Import deines fertigen Prototypen in die SAP Web IDE hast, stell mir diese gerne als Kommentar unter diesem Beitrag. Ich wünsche dir viel Erfolg bei der Entwicklung deiner Fiori Prototypen und Apps.
Kommentare