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

SAP Blog

Kayıtlı Üye
22 Ara 2017
Tepki puanı
SAP Build is a great tool for building high fidelity Fiori UI5 prototype. Here are 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. Build Interactive prototype
  4. Fiori compatible (Get jump start on Fiori development)
Not all prototypes are created equal

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

Low Fidelity mock-up

  • 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. Screens with end-to-end process
  2. Interactive elements (where users can engage meaning fully with the UI)
  3. Realistic data

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

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

Building and Facility Maintenance (Property Management) by Sapience Solutions.

Clone prototype:

Gallery (Google Chrome works better)

Slide deck:

Link to the prototype slide deck

7 features:

1. 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 arrows on page map.


There are mainly five types of screen available with templates controls. For example: You can choose worklist and page and it will provide all building blocks for work list.


2. Fiori controls:

  • Simple drag and drop interface.
  • Easy to visualize and arrange different controls on page

There are two types of controls

  1. Action: Button, breadcrumb, menu, link
  2. Tile: Tile, Tile content
  3. Containers: Tab, tab bar
  4. Display: Bar, Image, Item attribute
  5. Layouts: Form, Grid, Box
  6. List: Tables, feeds
  7. User inputs: text, buttons, drop downs
  8. Charts: Bar-chart, line charts, Micro chart


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


3. Realistic data:

Bring your own data from spreadsheet or create model on your own. You can bring many types of data and build relationships.


Edit sample data on fly or update data with spreadsheet (download/upload) function.


4. Branding and images

You can bring your own images. Images can be used for branding (e.g. Logo) or as a part of app. e.g. product image


5. Collaborate

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


Team can collaborate in development, testing and getting feedback.


I wish there was a notification feature or indicator that someone added 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 a realistic feedback and you can also measure user’s interaction with the prototype. Example: Heat-map, Statistics and user flow.

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


7. Personas

Personas is great feature to understand user and it helps to have focus on them through out the project.


Few bumps:

  1. Understanding 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. relationship between tables before start assigning data to fields.
  2. No versioning. It’s hard to go back once everything is saved. Suggestion: Create 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.

There are many more features, but 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!

Okumaya devam et...