In this era of humans being able to interact with almost anything, shouldn’t there be a way for us to interact with graphics in product documentation as well? Absolutely! And if you’re interested to find out more about this refreshing concept, this blog is all about interactive graphics and their usage in product documentation.
Recently, I had the opportunity to attend a training at SAP where we got to learn about creating interactive graphics for user assistance. I thought it would be a great idea to share this concept with a larger audience. Creating different graphics for different scenarios is something I’ve covered in a previous blog - The Secret to Understanding When to Create Graphics and What Kind. What we have done at SAP is we’ve gone a step beyond by using the same graphic base and making them interactive.
So, what do we mean by interactive graphics? Whether you have graphics depicting software architecture, processes, or just information that can be consumed easily by your users, each of these graphics can be made interactive. Pictures speak a thousand words, so let’s show you some of the interactive graphics we have in our product documentation:
In this product documentation, a graphic has been created to depict the overview of a process. The process steps are described in detail below the graphic. You get to interact with this graphic by clicking on a process step, which then navigates to the detailed process description in the table.
Here, a graphic represents the system architecture for a product environment. Hovering over each component in the graphic increases the graphic size and also displays an overview tooltip. Clicking on the component reduces the graphic size, and displays more information about the component on the right.
A previous version of this documentation contained an entire page with a list of links to other documentation. Now, with this graphic, not only do you get a great overview at a glance but clicking on any function listed in the graphic navigates you to the relevant documentation. Isn’t this a great and more efficient way of using a graphic?
If a product has several editions, a feature scope description document is used to convey to customers which features are included in which edition for that product. In the previous version of this document, this information was conveyed in a long table, which wasn’t easy to digest. Replacing the table by an interactive graphic makes the same information available at a glance. You get to see short descriptions of a feature set by hovering over it, and you can click the highlighted area to view more detailed information.
In this example, the overview topic has an interactive graphic that allows you to navigate to all other chapters. Each chapter as well has an interactive graphic to navigate to different topics within each chapter of the product documentation.
Using an interactive graphic, the end-to-end development process on SAP HANA has been represented using an information map. One of our colleagues describes the map as follows: “The map helps you navigate to the information you need to complete essential tasks. The development journey is displayed as a line on a metro map showing a clear destination, the path to it, and stops where you can change to other lines with links to further sources of information such as product documentation, in-app help, self-paced training, videos or podcasts, tutorials, blogs, and even what’s new. Your role determines where the journey starts and stops, and it is always clear where you are.”
Interactive graphics help our users consume product documentation more easily and give them a better experience overall. Graphics make sense when used in relevant places in user assistance, and interactive graphics elevate the usability and readability. At SAP, we always strive to give our users a better experience with user assistance, and this is one of the ways!
Hope you enjoyed reading this blog post! Let us know what you feel about interactive graphics in the comments below.
Recently, I had the opportunity to attend a training at SAP where we got to learn about creating interactive graphics for user assistance. I thought it would be a great idea to share this concept with a larger audience. Creating different graphics for different scenarios is something I’ve covered in a previous blog - The Secret to Understanding When to Create Graphics and What Kind. What we have done at SAP is we’ve gone a step beyond by using the same graphic base and making them interactive.
So, what do we mean by interactive graphics? Whether you have graphics depicting software architecture, processes, or just information that can be consumed easily by your users, each of these graphics can be made interactive. Pictures speak a thousand words, so let’s show you some of the interactive graphics we have in our product documentation:
Interactive Graphic for a Process Overview
Interactive Graphic for a Process Overview
In this product documentation, a graphic has been created to depict the overview of a process. The process steps are described in detail below the graphic. You get to interact with this graphic by clicking on a process step, which then navigates to the detailed process description in the table.
Interactive Graphic for System Architecture
Interactive Graphic for System Architecture
Here, a graphic represents the system architecture for a product environment. Hovering over each component in the graphic increases the graphic size and also displays an overview tooltip. Clicking on the component reduces the graphic size, and displays more information about the component on the right.
Interactive Graphic for a Function-Oriented View of a Product Library
Interactive Graphic for a Function-Oriented View of a Product Library
A previous version of this documentation contained an entire page with a list of links to other documentation. Now, with this graphic, not only do you get a great overview at a glance but clicking on any function listed in the graphic navigates you to the relevant documentation. Isn’t this a great and more efficient way of using a graphic?
Interactive Graphic for Describing Product Features
Interactive Graphic for Describing Product Features
If a product has several editions, a feature scope description document is used to convey to customers which features are included in which edition for that product. In the previous version of this document, this information was conveyed in a long table, which wasn’t easy to digest. Replacing the table by an interactive graphic makes the same information available at a glance. You get to see short descriptions of a feature set by hovering over it, and you can click the highlighted area to view more detailed information.
Interactive Graphic for a Product Document Overview
Interactive Graphic for a Product Document Overview
In this example, the overview topic has an interactive graphic that allows you to navigate to all other chapters. Each chapter as well has an interactive graphic to navigate to different topics within each chapter of the product documentation.
Interactive Graphic for an Information Map
Interactive Graphic for an Information Map
Using an interactive graphic, the end-to-end development process on SAP HANA has been represented using an information map. One of our colleagues describes the map as follows: “The map helps you navigate to the information you need to complete essential tasks. The development journey is displayed as a line on a metro map showing a clear destination, the path to it, and stops where you can change to other lines with links to further sources of information such as product documentation, in-app help, self-paced training, videos or podcasts, tutorials, blogs, and even what’s new. Your role determines where the journey starts and stops, and it is always clear where you are.”
Summary
Interactive graphics help our users consume product documentation more easily and give them a better experience overall. Graphics make sense when used in relevant places in user assistance, and interactive graphics elevate the usability and readability. At SAP, we always strive to give our users a better experience with user assistance, and this is one of the ways!
Hope you enjoyed reading this blog post! Let us know what you feel about interactive graphics in the comments below.
- SAP Managed Tags:
3 Comments