8 Features to Know before Creating a Fiori UI5 Prototype with BUILD

SAP Build is a great tool for building high fidelity Fiori UI5 prototypes. Here are the main features I learned while developing with 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)

Capture

Not all prototypes are created equal

Mock-ups (low fidelity prototypes) 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/0f4910cad428b5b50f191e9e/index.html

Clone prototype:

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

Slide deck:

Link to the prototype slide deck

8 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 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 the 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) functions. This is a really easy to use interface. You can also create data relationships.

4. Images: Branding, icons and visualization

You can upload your own images. You can upload custom icons and use them for your app. Images can be used for branding (e.g. logo) or as a part of an 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.

The team can collaborate in the development cycle, testing cycle and getting feedback. This discussion allows everyone to be on the 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 the prototype and have a meaningful interaction. Users will provide you with 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 users and it helps keep focused on them throughout 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 the prototype using the “Share” function. The downloaded file includes all screen elements.

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

A few bumps:

  1. Understanding the data object and relations is not intuitive. Especially when users like me want to build very complex, life-size data structure. Suggestion: Think through your data model esp. hierarchical (e.g. header and item data) relationship between tables and fields before you 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.

There 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!

Advertisement

Comparison – SAP Fiori UI5 and Screen Personas : The Good, The Bad, and The Ugly

SAP provides two paths to a delightful user experience (UX)

SAP Fiori UI5 apps and SAP Screen Personas are two ways to achieve SAP Fiori user experience.

  • Fiori UI5 UX strategy aims to transform the transactional operational model to a role-oriented one
  • SAP Screen Personas simplifies scenarios not yet covered by Fiori applications or for your custom transactions

UI v/s UX

There is a distinction between User Interface (UI) and User experience (UX).

User interface deals with intuitive screen design, screen flow, buttons and colors.

User experience deals with how users feel when they interact with the technology. It includes integration between processes, people and technology

Example:  Uber

  • Intuitive screen design to call a ride from your mobile phone  > Great UI
  • You can walk out of your ride without using your mobile phone >  Great UX

Perspective

SAP provided technologies (Fiori UI5, Personas) can be used to improve UI for screens as part of organization’s UX improvement initiative. Here is a perspective of each technology.

1. Fiori UI5 apps:

The Good:

  • Role based development
  • Develop once, use on any device i.e. Mobile phone, tablet and desktop
  • Develop based on your need (independent of existing SAP transactions)
  • Leverage SAP Fiori Launchpad to personalize landing screen
  • Fiori design is the future UI for all SAP products
  • Dynamic search functionality
  • Smart tiles with analytical annotation

The Bad:

  • High cost of development
  • Different approach for development compared to traditional development (Design thinking)
  • Need to provide complete “end to end functionality” for designated roles otherwise users end up in two different user interface (Fiori and SAP GUI)

The Ugly:

  • High cost of change (develop once and develop right)
  • Easy to deviate from SAP’s Fiori design guidelines

Bottom line:

Great for complex business processes, high development cost, great UX improvement, long term approach aligned with SAP’s UX strategy

2. Screen Personas

 The Good:

  • Modify existing transactions (standard and custom) > Keep existing business logic
  • Easy to simplify > remove fields
  • Relatively easy to beautify screens by applying themes
  • Great screen editing interface for screen editing and great libraries for JavaScript
  • Great for simplifying display transactions
  • Can be integrated with Fiori Launchpad

The Bad:

  • Limited to SAP GUI transactions (Very difficult to combine different edit transactions on one screen > It gets ugly pretty fast)
  • JavaScript can be used for front end development i.e. SAP GUI for HTML screen (One can also create flavors in SAP GUI for HTML and render in SAP GUI for Windows. Limitations are noted here: https://launchpad.support.sap.com/#/notes/0002080071)
  • Limited to fixed screen-size per theme (You need to create flavors for every screen size. Development time multiplies with every flavor)
  • Every transaction needs flavor (i.e. Three flavors for MM01, MM02 and MM03). Multiple flavors if you are creating different variants for different users groups

The Ugly:

  • For edit transactions it gets ugly to merge fields from multiple tabs esp. grids
  • It gets even uglier if you have mandatory fields on different tabs
  • Must utilize an ABAP expert and a JavaScript developer for any meaningful automation or custom screen development
  • Numbers of scripts and flavors can get out of hand very quickly
  • Screen can look like Fiori screen but will not provide intuitive fluid UI functionality available in Fiori UI5 screens

Bottom line:

Great for simple transactions and linear business processes, limited development effort, limited UX improvement gain.

3. Hybrid approach:

Improve UX by implementing Fiori UI5 and SAP Screen Personas

  • The man who chases two rabbits, catches neither. ~ Confucius
  • If you “the organization” want to chase two rabbits, setup two different teams and send them to chase one rabbit each ~ Confucius 3.0
Also posted at : https://experience.sap.com/topic/perspective-two-paths-to-a-delightful-user-experience-ux/