Skip to Content

DESIGN GUIDELINES.png

Recently, we have released our new design guidelines to our customers and Partners (https://experience.sap.com/fiori-design/). The feedback so far has been great and we are glad to regularly share the updates of what we learn on our SAP Fiori journey.

As part of this update, we have also introduced our new design stencils that allow designers to quickly create design prototypes of SAP Fiori applications based on available controls and patterns. In this new release we have made the transition from Microsoft Powerpoint to Axure. This was a hard decision for us as we had established Microsoft Powerpoint as an easy to use tool that was available to every user in the company before including a comprehensive set of stencils and templates. Moving to Axure (http://www.axure.com) required us to purchase licenses and offer additional training to our design staff (while many designers were already familiar with the Axure).

So why did we take this decision?

  • First and foremost, Axure allows us to create interactive prototypes that can be used for usability testing. The scripting and animation capabilities are sufficient to create click-through mockups that can cover complex business scenarios.
  • Second, Axure offers the possibility to define responsive prototypes that adjust to different screen sizes so that we can mimic the behavior on different devices within the same prototype.
  • Third, Microsoft Powerpoint turned out to be sensitive to unwanted effects on formatting, availability of fonts, platform (Apple Mac vs. Microsoft Windows) so that in many cases the fidelity of the presentation was affected. With Axure we get the exact same result on any platform and we have an easy way to manage font icons and resources.

Further, Axure is widely spread in the community so that we had a good part of our designers being familiar with it and using it already. There would have been other solutions available that we could have chosen here but most of them focused more on other design phases like the requirements engineering process or the user research phase and we found that we could combine Axure well with such tools.

We created a comprehensive stencil library covering the most important controls and floorplans that can be found in the SAP Fiori Design Guidelines. Entire pages can now be dragged into the canvas to give an easy start to the designer. We have structured the library along the currently three form factor we support in SAP Fiori:

  • Large (L) – for desktop devices with controls in compact dimensions (learn more about cozy and compact)
  • Medium (M) – for tablet dimensions and with controls in the touch-friendly cozy mode
  • Small (S) – for phone dimensions and with cozy-sized touch controls

Axure.png


As our new stencils are now being used by application designers internally, we can already report some first lessons learned:

  • The overall quality of the mockups that are being shown in review sessions has dramatically increased – fidelity and attention to detail is much better than before. It is clear very early on what controls are being used and how implementation can be achieved.
  • Training efforts were limited. Most designers were able to get started after a short introduction. The material available from the provider is also a valuable source.
  • The interactivity features are being used by the designers. The applications become more tangible for the development teams very early in the process so that uncertainties in the interactivity can be clarified early in the process.
  • We have created a community space where designers exchange their designs and stencils so that good solutions can be leveraged by colleagues.
  • One negative effect of this transition is the fact that prototyping has become more exclusive as the users need to have access to Axure. License costs for this tool add on top of a standard setup. This excludes most of the business experts who before that could easily modify or sketch prototypes using Microsoft Powerpoint. We are currently validating the option to offer simplified Microsoft Powerpoint stencils on a page level that allow business experts to easily modify contents and create flows for discussions with customers.

To summarize, the transition to a professional design tool has led to the expected improvements in design quality. Training efforts where limited so that the effect on productivity and cost was acceptable. While the designer role is better supported with this tool we now have to evaluate how to better support the role of the business expert.

If you want to try out the SAP Fiori Design stencils you can download them from https://experience.sap.com/fiori-design/resources/downloads/

To report this post you need to login first.

3 Comments

You must be Logged on to comment or reply to a post.

  1. Marcos Andrade

    Hello Kai,

    what a excellent news. As a principle of UX Design prototyping is very important and this tool will enable us to create prototypes with Fiori UI elements that will be used in the final product. I will get into the tutorial to learn how to use it.

    hope in the future we can access this tool in the cloud as SAP WEB IDE.

    Thanks for sharing.

    (0) 
    1. Kai Richter Post author

      The prototyping capabilities described above make use of a third-party prototyping tool named “Axure” (http://www.axure.com). The result are interactive prototypes and no code. This is common practice in design that before implementation fast iterations and user tests are deployed to optimize the design before implementation.

      They are not part of SAP Web IDE. Please understand that at this point I can’t make any statements about the feature roadmap in SAP Web IDE. If you want to learn more about the SAP Web IDE features in the SAP Hana Cloud Platform you might want to check the online help at https://help.hana.ondemand.com/webide.

      (0) 

Leave a Reply