Added screenshot to UI documentation

Signed-off-by: thfries <thomas.fries0@gmail.com>

documentation/src/main/resources/pages/ditto/user-interface.md

@@ -10,11 +10,14 @@ topnav: topnav
 
 There is a browser based user interface to explore things, policies and connections.
 The UI can be used to access the REST API of any Ditto instance.
-Several Ditto™ instances can be configured as "Environments" 
+Several Ditto™ instances can be configured as "Environments"
+
+{% include image.html file="pages/ui/screenshot_introduction.png" alt="UI example screenshot" caption="Ditto™ Explorer UI" max-width=800 url="https://eclipse.github.io/ditto/index.html?primaryEnvironmentname=ditto_sandbox" %}
+
 
 ## How to use
 
-The latest version of the Explorer UI is available online [here](https://eclipse.github.io/ditto/)
+The latest version of the Explorer UI is available online [here](https://eclipse.github.io/ditto/index.html?primaryEnvironmentname=ditto_sandbox)
 
 There is also a Docker image prepared to server the latest version by docker:
 ```bash
@@ -32,6 +35,7 @@ To create a new environment you just need to specify
 * a unique name
 * the api URI to reach Ditto™
 * If it is a Ditto 2 or ditto 3 Version (only relevant if you want to use the connectivity API of Ditto™ prior to version 3)
+
 {% include image.html file="pages/ui/screenshot_add_environment.png" alt="Screenshot how to add an environment" caption="Create a new environment" max-width=800 %}
 
 ### Selecting an environment