docs/UserGuide: reorganise content and add more images

Our user guide although have some sort of flow, it is not sufficient
for our reader to navigate our user guide efficiently.

In additional, we did not provide clear notation to allow our reader to
understand our GUI easily.

General command such as `clear` do not provide the user with clear
illustration on what is the expectation of the command.

Let's update the `UserGuide` to support the flow and:
* add a label GUI
* change to smaller font for `Figure X` images
* clean up the FAQ
* add images to illustrate for clear command.