Adding Help Icon to Fiori App Header Bar

Discussion Forum Design & UX Adding Help Icon to Fiori App Header Bar
Viewing 10 posts - 1 through 10 (of 10 total)
Profile photo of Sophia Marx
Senior User Assistance Developer, Products & Innovation UA Information Experience and Quality Services
SAP Labs, LLC. (Palo Alto)

In the Fiori Guidelines, you talk about overwriting standard icon tooltips in fiori applications.

https://experience.sap.com/fiori-design-web/using-tooltips/

It says this: The icon within an icon-only button usually comes with a standard tooltip. However, this default tooltip contains the technical icon name, which may not be the right term for the icon in your context. Always check all icons, and overwrite the default tooltip texts with suitable texts for your specific use case.

I also understand that you can add a help icon in the UI, probably on the top right of header or table toolbar to enable help topics both for global and local actions.  Or is it in the Shell header as stated here? I want the help icon to display on the header, not under the User dropdown. See screenshot below. How can we customize to add this help icon?

 

Profile photo of Annette Stotz
User Experience Expert
SAP SE

Hello Sophia,

please see the documention on the SAP Help Portal how to set up the In-Application Help (path “Technology Platform –> SAP Fiori –> SAP Fiori Implementation Information –> Configuration of SAP Fiori Infrastructure”):

http://help.sap.com/saphelp_fiori_implementation_nw751/helpdata/en/82/711a9a320c4e69afa52e6462317d88/content.htm?frameset=/en/7b/2bbe268b6940cfb075bfd1f3d9ff3e/frameset.htm&current_toc=/en/7d/1adb1bd5de41908931410f62dc0990/plain.htm&node_id=42

If you follow the instructions, the help icon is available.

Best regards, Annette

Is it correct that we can not find a description of the help feature in the Fiori 2.0 guidelines? (https://experience.sap.com/fiori-design-web/) We would like to know where it should be placed.

Thank you in advance.

Profile photo of Annette Stotz
User Experience Expert
SAP SE

You’re right, this is currently not mentioned in the SAP Fiori guidelines (https://experience.sap.com/fiori-design-web/).

I will check with the authors and ask them to include it.

Thank you and best regards, Annette

Profile photo of Christian Graff
Helios IT Service GmbH

Hello,

We’re really interested in providing In-Application Help for our custom apps. As far as I understand the documentation, the “default” In App Help is used for Apps built by SAP. How do I develop In-Application Help for custom Fiori Apps? Is there anything to read about? Does SAP provide any document you could link here, targeting this topic?

Thank you and best regards,

Christian

Profile photo of Christian Graff
Helios IT Service GmbH

Hello again,

inbetween I received an answer to this topic from the SAP support. At this point of time, the in-application help feature is not supported, but planned to provide in a future release of the SAP Workforce Performance Builder. We can see it in the Product roadmap.

 

Best regards,

Christian

Dear all,

We are working on an application where people need to fill out a complex form. Therefore we would like to offer ‘inline help’, e.g. by placing an icon button with a question mark behind the text field. When the user clicks or presses that button, a dialog will be shown with an explanation. From our perspective a standard tooltip would not do the job, because it is (1) invisible (people may not find it) and (2) does not work on touchscreens.

Does a guideline exist that covers this?

We found this page: https://experience.sap.com/fiori-design-web/using-tooltips/, stating “Do not use a tooltip if: (…) Instead, use help systems.” but ‘help systems’ does not seem to be linked or described anywhere else.

Thank you,
Bart-Jan

Profile photo of Sophia Marx
Senior User Assistance Developer, Products & Innovation UA Information Experience and Quality Services
SAP Labs, LLC. (Palo Alto)

Bart,

If simplifying the UI of the form, terminology, format, etc isn’t a possibility, I have a few ideas for you until the Workforce Performance Builder is ready for primetime. Keep in mind, I’m not a developer, just thought I’d share some info I found on the Fiori Guidelines site. Inline, contextual help is always best for the user. You keep them in the application and help them where they need it in a seemless way, so that they don’t even know they’re being helped!

Placeholder Text (if you can fit content in the field to give user’s enough help)

The placeholder, or input prompt, is a short hint (a word or short phrase) to help the user with data entry. A hint can be a sample value or a brief description of the expected format. The placeholder text goes away as soon as the user starts typing, so maybe not the best solution. More info in the Fiori Form Guidelines and Input Field Guidelines.

Feed input – Layout – With generic user image

A few others that might fit your needs for your form that needs user assistance:

Popover  The popover displays additional information for an object in a compact way and without leaving the page. The popover can contain various UI elements such as fields, tables, images, and charts. It can also include actions in the footer. You can enable this on hover over the field or with a question mark for help next to the field (I think).
Popover – Example
Quick View  The quick view is similar to a popover, but has a predefined structure, a fixed set of UI elements, and automatic UI rendering.

Inline Help
Have you considered inline help as far as including it below or next to the field or is it more complicated than that? Kind of like Apple uses in many areas, especially the Settings.
Image result for apple settings screen

Good luck!

Profile photo of Andrea Waisgluss
User Experience Content Strategist
SAP SE

Hi Sophia, please note that the links to User Assistance you mentioned above are not available in our external guidelines yet.

Profile photo of Sophia Marx
Senior User Assistance Developer, Products & Innovation UA Information Experience and Quality Services
SAP Labs, LLC. (Palo Alto)

Andrea, thanks for pointing that out. Maybe we need some of the Web Assistant instructions on the Fiori Guidelines when it’s the appropriate time? Thank you!

Viewing 10 posts - 1 through 10 (of 10 total)
 

You must be logged in to reply to this topic.