Skip to Content
Author's profile photo Former Member

Using heatmaps in Screen Personas part 1

Hi everyone,

I am a huge fan of Screen Personas, the low effort approach to do something significant for the user experience is great. I have now done a number of Screen Personas implementations and there are a few things that typically conflicts with the general idea of doing good usability.

Typically you engage with the power user of the particular transaction that you want to change, and while these people are very knowledgeable in how to use the transaction, it can lead to flavors that aren’t optimal in their design. Design by proxy can be dangerous as one persons perception of a particular design isn’t necessarily the right, especially if that user is more of a power user than a general user, which represents the majority of the user group.

Usability research has also shown us that typically what a user say is true, might not always be the case, so if we can’t trust the users or we can’t get access to the “real” users, what do we do?

Well we can do guerilla user research, which will give us valuable data on how the users use a particular transaction. In this blog i will show you how.

We can use heatmaps to generate a representation on where the users click in a particular transaction, this data is very valuable as you can then document the users behavior and don’t have to rely on assumptions anymore. It works as follows, a script is started when the user access a single transaction, then it records all the clicks from that user and stores that in a table in the backend alongside the program name and screen number to filter the correct coordinates.

All this data can then be accessed by the designer in a heatmap like the one below.


This video shows the end result:

Although not perfect, it adds some valuable feedback to the UX designer on what is actually being used on the screen and what clutter that probably can get removed.

In part 2 i will show you how to do this.

There are a few things i need to mention:

  • I have used the heatmaps.js library. If you want to implement this productively, please visit the authors website for more info.
  • This only works in the webgui, as we need access to the click event in the window element.
    • If you try this in SAP GUI for Windows, then it will simply just come up with a script error.
    • If you can come up with a way to enable this capture in GUI for Windows, please let me know!
  • I haven’t tested this in a WDA on screen personas, but it should work as well.
  • Performance will take a slight hit, even though the RFC called are asyncrounous.
  • If a user goes click frenzy, the script might not capture it all as there is a limitation in most browsers to have a maximum of 6 requests open at a time.
  • It only captures mouse clicks, so users might tab into fields that aren’t captured in the heapmap then.
  • Don’t rely entirely on this tool as your user research, do engage your end users as well!

Let me know what you think and potentially ways to change it, i am eager to hear your feedback.

I haven’t used this myself at a Screen Personas project, so there might be bugs or stuff i haven’t thought about. Please share your feedback

Part 2 of the blog can be found here

Follow me on Twitter or Linkedin for updates and thoughts about SAP User Experience.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo pradeep kumar Akula
      pradeep kumar Akula

      Hi Jacob, Thank you very much .It is really good . I am eagerly waiting for your next blog on how you guys have done it and how you have used  heatmaps.js library. Best regards, pradeep.

      Author's profile photo Tamas Hoznek
      Tamas Hoznek

      This is really interesting! 🙂

      Thanks for sharing... looking forward to the next blog post.

      Author's profile photo Christoph Lordieck
      Christoph Lordieck

      Great idea, looking forward to part 2!

      Author's profile photo pradeep kumar Akula
      pradeep kumar Akula

      Hi Jacob, I tried the code that you gave in part 2 . Seems like there is an issue in the script code since I can not see the RFC triggering when I set up a external break point. Kindly suggest . Best regards, pradeep.