Fiori Prototyping Tools - A (not so) hypothetical Discussion between a Product Owner and a Fiori Developer

[ttrapp]

There are high quality prototyping like Axure with SAP Fiori Design Stencils and now is Splash / BUILD coming.

In this small blog entry I want to share some experiences especially with Axure and answer some questions people are asking me again and again.

Product Owner: “The Axure prototype is looking great – can we implement it directly in SAP Web IDE?”

Fiori Developer: “Yes, I can start with it right now. I will create a mockup and then we can quickly validate it with end users and start necessary backend development.”

Product Owner: “But why? We already did a Design Thinking workshop and used a Fiori prototyping– so it should be already Fiori.”

Fiori Developer: “Yes, I really like that you use those tools – if you would prototype something like  a classical ABAP Dynpro screen we would have been many discussions. But nevertheless the final design will differ in details. I think we can achieve even a better user experience and can be more consistent with other apps our end users are already using.”

Product Owner: “So please explain me this in detail.”

Fiori Developer: “The prototype you showed me is designed like a web page. Fiori has a different haptic behavior. We can group different elements that we can use the keyboard for faster access. At the moment this is not possible because you chose to implement use too many popups especially triggered by mouse-over events. This is problematic because it ruins accessibility and responsiveness. Have you ever seen an app with so many popups on a tablet? Your fingers are not that precise and clicking away the popup dialogs  would take too much of the tablet surface. And even on the desktop this can get painful if you want to navigate to a specific button and there are popovers all the time.”

Product Owner: “OK, and what about accessibility?”

Fiori Developer: “You can use the every Fiori-like app using the keyboard. This is necessary for people having visual or motoric defects but also for power users. My main message is that all those prototypes don’t have the same haptic behavior like the Fiori app will have. We need a prototype  to test this.”

Product Owner: “So is it only about haptic behavior?”

Fiori Developer: “Not only. In the latest UI5 version we have some controls which are not provided in the design stencils. I think I can optimize the user experience. Another aspect is that there is still too much information visible in the small space. We need to optimize the placement of the controls.”

Product Owner: “Do you see a general problem with prototyping tools?”

Fiori Developer: “No. They provide a good layout which is new near to Fiori. But if we want to achieve an excellent result we need fine tuning. Therefore we have the SAP Web IDE.”

Product Owner: “And couldn’t we use only the SAP Web IDE?”

Fiori Developer: “If you have an ABAP Developer who could develop OData Services on thy fly (perhaps using ABAP Code Data Services with annotations in NW 7.5) and a Fiori Developer like me, then it would be possible. But we can’t do every Design Think workshop with end users. So using tools like Axure or BUILD is OK since it helps to go in the right direction.”

Product Owner: “I think I understand: We use an user-centric but also agile approach.  In design thinking workshops we develop a prototype which is quite near to the end result. And now it is your task to make a another prototype with additional properties: it should be stare-of-the-art and use the best controls we have and also be responsive and accessible.”

Fiori Developer: “Exactly. You started an agile process with iterations and user feedback and we should continue with it.”

Product Owner: “And when can we test the new prototype?”

Fiori Developer: "Let's talk about resources..."