8 Features to know before you create Fiori UI5 prototype with SAP BUILD

[Rajen_Patel]

SAP Build is a great tool for building high fidelity Fiori UI5 prototype. Here are the main feature I learned while developing this prototype app.

1. Low cost of changes (No programming)


2. What you see is what you get


3. Interactive prototype with screens, process and data


4. Fiori compatible (get a jump start on Fiori development)

Not all prototypes are created equal

Mock-ups (low fidelity prototype) can go only so far in the user experience improvement journey. In order to succeed, you will need to develop a high fidelity working prototype. This will reduce your risk of delivering yet another sub-optimal User Interface (UI) to the end-users.

Low Fidelity prototype:

• Process map with sticky notes: You can visualize process, but not enough screen details


• Screen mock-ups: You can visualize screens, but not enough understanding of process


• Limited visibility on data

High Fidelity prototype:

• Visualize: screens, processes, and data

Elements of high fidelity prototype:

1. End-to-end process with all screens and fields


2. Interactive elements (where users can engage meaningfully with the UI)


3. Realistic data

You can use this prototype to explore all the features listed below.

Try Prototype: End-to-end business scenario and data:

https://www.build.me/gallery/api/private/v1/artifact/af0a25e40119762f0f17c988/b71cf9aa7e2eab910f3880...

Clone prototype:

https://www.build.me/gallery/af0a25e40119762f0f17c988 (Google Chrome works better)

Slide deck:

Link to the prototype slide deck

Eight Build features:

1. Page map and Pages: Build end-to-end business scenarios:

• Great tool to combine process and screen


• No need to rely on Visio or PowerPoint mock-ups


• You can add page and add navigation options


• Great visualization with navigational arrows on “page map”

 



There are mainly five types of screen available with predefined controls. For example: “Worklist” page, and it will provide all building blocks for developing functioning work list e.g. Tabs, Table controls, Search bar, etc.

2. Fiori controls:

• Simple drag and drop interface.


• Easy to visualize and arrange different controls on a page

There are eight types of controls:

1. Action: Button, breadcrumb, menu, etc.


2. Tile: Tile, Tile content, etc.


3. Containers: Tab, tab bar, etc.


4. Display: Bar, Image, Item attribute, etc.


5. Layouts: Form, Grid, Box, etc.


6. List: Tables, feeds, etc.


7. User inputs: text, buttons, drop downs, etc.


8. Charts: Bar-chart, Line charts, Micro chart, etc.

 



You can manipulate control parameters on the right section of this screen

3. Realistic data:

Bring your own data from a spreadsheet or create a model and populate the data on your own. You can bring many types of data and build relationships. You can find many sample data models from the Build library as well.



Edit sample data on the fly or update data with spreadsheet (download/upload) function. This is really a easy to use interface. You can also create data relationship.

4. Images: Branding, Icons and visualization

You can upload your own images. You can upload custom icons and use it for your app. Images can be used for branding (e.g. Logo) or as a part of app. e.g. product image.

You can use file options in the Project Workspace to manage these images.



 

5. Collaborate

Share your project with you team/users. Your team members can edit the project, add comments, etc. It's easy and intuitive.



Team can collaborate in the development cycle, testing cycle and getting feedback. This discussion allows everyone to be on a same page.



I wish there was a notification feature or indicator that someone added a comment. (Like Google docs)

6. Study/Feedback

Create your own study and Invite users to explore prototype and have a meaningful interaction. Users will provide you realistic feedback and you can also measure users' interaction with the prototype. Example features: Heat-map, statistics, and user flow.

Create study: Perfect way to coordinate with the team. Let users play around and have a feel for the solution. If you have to explain a lot then you didn’t do a good job in designing the user experience.

 

7. Personas

Personas is a great feature to understand user and it helps keep focus on them through out the project. This can be integrated as a part of your change management and/or training efforts.



 

8. Export to SAP WebIDE

When you are ready to start development simply download this prototype using 'Share' function. This download file includes all screen elements.



Import this code to SAP WebIDE.

Voila! You can design functioning prototype without writing a single line of code.

Few bumps:

1. Understanding the data object and relations is not intuitive. Especially when users like me wants to build very complex life-size data structure. Suggestion: Think though your data model esp. hierarchical (e.g. Header and item data) relationship between tables and fields before start assigning data to fields.


2. No versioning. It’s hard to go back once everything is saved. Suggestion: Create a copy or use download functionality to create back-ups.


3. Only five projects per free account. If you want to work on more projects, contact your SAP representative.

here are many more features and functionalities available in Build, but the above highlighted features will help you take the first steps in your long and fun-filled user experience (UX) journey.

I look forward for your feedback and new tips and tricks through community.

 

Have fun!

Also posted at: https://experience.sap.com/basics/8-features-to-know-before-creating-a-fiori-ui5-prototype-with-buil...