[APM][Services] Add empty states in service view to encourage APM usage

[iblancof]

Describe the feature

We want to encourage the use of APM for services that only have logs, and to achieve this, we plan to add new empty states that prompt users to add this functionality.

These are the tabs that will be impacted by the change:

• Overview (we will show an "empty area" above the log charts)
• Dependencies
• Infrastructure
• Service Map

📖 Empty State Copy

Note : @kkurstak will provide the design pattern here. Each empty state must have a screenshot behind it to show what the feature will do

Overview tab

Detect and resolve issues faster with deep visibility into your application Understanding your application performance, relationships and dependencies by instrumenting with APM.

Add APM to your application (button) Learn more Try it now! (button with 'external link' icon and the rocket)

Transactions

Troubleshoot latency, throughput and errors Troubleshoot your service's performance by analysing latency, throughput and errors down to the specific transaction.

Add APM to your application (button) Learn more Try it now! (button with 'external link' icon and the rocket)

Dependencies

Understand the dependencies for your application See your services dependencies on both internal and third-party services by instrumenting with APM.

Add APM to your application (button) Learn more Try it now! (button with 'external link' icon and the rocket)

Errors

Identify transaction errors with your applications Analyse errors down to the specific transaction to pin-point specific errors within your service

Add APM to your application (button) Learn more Try it now! (button with 'external link' icon and the rocket)

Metrics

View core metrics for your application View metric trends for the instances of your service to identify performance bottlenecks that could be affecting your users.

Add APM to your application (button) Learn more Try it now! (button with 'external link' icon and the rocket)

Infrastructure

Understand what your service is running on Troubleshoot service problems by seeing the infrastructure your service is running on.

Add APM to your application (button) Learn more Try it now! (button with 'external link' icon and the rocket)

Service Map

Visualise the dependencies between your services See your services dependencies at a glance to help identify dependencies that may be affecting your service.

Add APM to your application (button) Learn more Try it now! (button with 'external link' icon and the rocket)

Dashboards

Leave it as it is

Universal Profiling

Leave it as it is

[elasticmachine]

Pinging @elastic/obs-ux-infra_services-team (Team:obs-ux-infra_services)

[cauemarcondes]

Some designs are available here: https://github.com/elastic/observability-dev/issues/3462#issuecomment-2304403342

[iblancof]

After noticing some inconsistencies between the issue description and the designs, we agreed with product and design to go with the option of having two buttons and a link in the footer of the panel.

[kpatticha]

Having 3 call to actions in the call out seems overwhelming to me do we need all of these 3? Also, can we make sure the call to action for instrumenting APM remains consistent across the app? The CTA in the new inventory view is "Add APM"

[iblancof]

Hi @kpatticha!

+1 to change the main CTA copy from "Add APM to your application" to "Add APM". Is that ok for you @roshan-elastic ?

Regarding having three actionable buttons/links.

The idea is to actively promote the use of APM to users, and we have the hypothesis that by showing them a demo of what their platform would look like with that data, along with the official information, we could generate more interest than if those resources weren't available.

What do you suggest to maintain that same level of intent but without the three actions?

After writing this, I realized that "Try it now" might be confusing for users. As a user, I wouldn’t know that this button is actually going to take me to a live demo. Any thoughts on this @roshan-elastic?

[crespocarlos]

After writing this, I realized that "Try it now" might be confusing for users. As a user, I wouldn’t know that this button is actually going to take me to a live demo.

Can confirm. I was confused when I first saw it. I thought it would do something to my deployment instead of going to a live demo. But that's just my impression

[roshan-elastic]

Hey all,

Thanks for the input here!

Add APM Yeah, I feel the confusion here. One thing that came from one of our tech writers is that 'Add APM' doesn't describe what the user is doing that well so hence 'Add APM to my Application'. However, this introduces inconsistency that has thrown everyone here already so let's keep it as 'Add APM' then!

Try it now! Yeah, I was worried about this being confusing. Does anyone have any suggestions on how to make it clear but not very wordy?

I was thinking 'Try it now!' maybe with an external link could help but maybe we need 'Try it on our demo cluster!' to be more explicit?

WDYT?

cc @iblancof

[iblancof]

I’ve created a couple of scenarios similar to the proposed options to show how they look visually. I think this will be helpful for making a decision.

cc @roshan-elastic

[iblancof]

Figma was modified to include the dismiss button on the overview panel.

Don't pay attention to copies and buttons in the screenshot, we will have three of them as we do in the other tabs.

[roshan-elastic]

I think this will be helpful for making a decision.

This is excellent @iblancof - it does make it easier!

Let's go for 'try it on our demo cluster' (i.e. option 1)!

modified to include the dismiss button on the overview panel.

Dismiss looks good!

[kpatticha]

It might just be me, but having two filled buttons and a link in the same row is quite bothersome for several reasons

1. The UI feels overwhelming and isn't visually appealing.
2. The text "Try it on our demo cluster" is quite long and immediately draws attention, while the primary CTA should be "Add APM." based on the colors.
3. We are not following EUI guidelines and I personally never seen 3 CTAs in a row in Kibana
   • Mixing up button colors (https://eui.elastic.co/#/navigation/button/guidelines:~:text=Minimize%20the%20mixing%20of%20color%2C%20size%2C%20and%20type).
   • Combine Learn more with other CTAs (https://eui.elastic.co/#/display/empty-prompt/guidelines:~:text=to%20the%20content.-,Learn%20more%20links,-%22Learn%20more%22%20links)

wdyt? cc @kkurstak @roshan-elastic

[roshan-elastic]

Hey @kpatticha - thanks for the feedback.

My personal reaction to the CTA is that to 'learn more' is more subtle and doesn't jar my view - three buttons would for sure.

I'm comfortable with what we have but wondering if you have any alternative proposals we could consider?

The main input I can provide here is:

• Some users have expressed they'd like to know it was on an external demo cluster before they click it
• It's important we have a call to action for them to 'do' the thing (add APM), to 'try it' and to access docs about the feature

[kpatticha]

@roshan-elastic

I understand that there are cases where we need 3 buttons etc. However, my feedback is about placing three buttons/links in a row and not following the guidelines which IMHO results in poor UX but if everyone else is comfortable with it, I'm okay!

[roshan-elastic]

Cheers @kpatticha - makes sense.

I think right now, it works well enough but it's a good call out!

[kkurstak]

Hey, adding my last comment from our Slack thread here -

I’m fine with the overview version you showed here: link

@roshan-elastic - really sorry about this issue going on forever like that. I believe this last version would align with your initial requirements.

I’ve made the initial mistake to actually let us build something new instead of sticking to what we have in EUI. I know we want to “promote” the product proactively - and as always, I want to accommodate the request as soon as possible - not only because we need this done, but also because of all the other ongoing things. At the same time I’ve just been talking about consistency while building new versions of components - so real hypocrisy here from my side.

I would consider going back to a standard illustration in some time or review the empty state for the overview. Empty states are one of those things we tend to always add at the end, and it seems there are always special requirements for them. This is my fault to have lost this perspective!

Once we got an Inventory version 0, I’d like us to review what we got and make some decisions with the design team to see how we manage empty states in obs in general. I like what we did for the tabs - it shows the value of what the user could have by expanding the tool. Maybe it’s something we could contribute to the EUI. It was really a nice initial idea and it does the job. We added these empty states to the requirements after creating something for the overview tab - this has also not been the best influence on the overview ideas we inicial had.

Responding to a previous comment - as for the 3 buttons: with 3 actions having to appear on this empty state, it's acceptable to go for it in this way. We considered adding the link to the documentation within the text message - but the 3-button option looked more clean. From the UX perspective - never great to have more than 2 options, but adding the primary-secondary-terciary hierarchy we're fine. Here is a nice visual article about it - we're kind of... 95% on the correct side of UX - our secondary button has a fill, but it's very light. It doesn't have any strokes, but I believe it works :)

[roshan-elastic]

Hey @kkurstak,

Not a problem - we learn as we go!

Once we got an Inventory version 0, I’d like us to review what we got and make some decisions with the design team to see how we manage empty states in obs in general. I

I'm supportive of us speaking with them about this. I'm thinking we should have perhaps a couple of calls to discuss with them.