What is the best way to convey to a user a reason for failure using an icon?

Question

I have a scenario where the user needs to test a connection by clicking on a button. Once clicked, they will be provided one of the follow results: successful (check mark icon) and failed (red x icon) which will be followed by "Test connection successful" or "Test connection failed" Now, aside from telling the user that their test connection failed, I will also need to supply them additional information such as the reason it failed and how they can resolve.

The reason can be quite a exhaustive, generally 1-4 sentences. Without showing it on the UI directly, what is the best way to convey the message? My ideas are:

1. User can hover the icon which would show a hover balloon with the reason for failure. I am a bit undecided on this because it is not entire clear to user that they must hover over this icon to get more insights.

2. Add 'why?' next to the 'failed connection' string and user can hover which will show a hover balloon with more insights.

Of the two, which is better? If neither, what are your suggestions?

Answer 1

You could try the progressive disclosure pattern:

With a progressive disclosure control, users can show or hide additional information including data, options, or commands. Progressive disclosure promotes simplicity by focusing on the essential, yet revealing additional detail as needed.

.
An example of similar usage is: