Merge pull request #325 from zaidansani/add-visuals-for-information-c…

…ard-UG

Add example of a person and appointment

docs/UserGuide.md

@@ -327,6 +327,13 @@ A **person** is a patient with several fields. The fields and their correspondin
 | **Tag(s)**       | `t/`   | Yes      | Yes      | Only alphanumeric characters                           |
 
 You can identify these patients uniquely by their **patient ID (PID)** for easy reference. 
+The PID can be seen at the top of their information card.
+
+<br><sbr>
+
+<img src="images/personexample.png" width="500">
+
+<br><sbr>
 
 ---
 **Notes**
@@ -556,6 +563,18 @@ An **appointment** is defined by several fields. The fields and their correspond
 | **Sickness**        | `s/`   | Yes      | No       | At least one alphabetic character     |
 | **Medicine**        | `m/`   | Yes      | No       | At least one alphabetic character     |
 
+You can identify these appointments uniquely by their **Appointment ID (AID)** for easy reference.
+The AID can be seen at the top of their information card.
+
+<br><sbr>
+
+<img src="images/appointmentexample.png" width="500">
+
+<br><sbr>
+
+The number indicated beside the appointment name is the PID of the person who has the appointment.
+
+
 You can manage the appointments through different commands, which can be seen in the table below:
 
 **Notes:**