Team 5 Website

Design Principles

There are 6 fundamental principles of design which are: Balance, Proximity, Alignment, Repetition, Contrast and Space. Below the three principles that we mainly used are explained.

• Proximity
Proximity creates a relationship between elements. Elements of the dashboard (graphs, descriptive statistics) need to be visually connected. In the dashboard a number of graphs are displayed, depending on the amount of data needed and below them there is a small table that shows the descriptive statistics (mean, maximum). This way all the relevant data are displayed next to each other creating a visual connection between the elements.

• Colour and Contrast
The use of colours was a really important factor in the process of designing the dashboard. In our software system, the user has the option to select the main colour of the dashboard (dark mode / white mode) allowing him to use the dashboard in the particular theme he prefers. Moreover, the user has the option to select the colour of the graphs giving him the capability to use the system as defined by his own preferences. Contrasting colours where also used to emphasize and highlight key elements. A specific use of this is in the dashboard is when the system alerts the user in case of abnormal data and the colour used for the alert box is opposite to the colour of the backround.

• Repetition
Repetition strengthens a design by tying together individual elements, helping to create association and consistency. In the dashboard, all the pages follow the same design and each page contains related data.

Sketches

Sketching was an important part that allowed us to develop our first prototype design based on the user requirements. Sketching our ideas also allowed us to distinguish which features should be included in our prototype and which designn enables the greatest user clarity. We have tried a variety of different looks for the dashboard and archive pages. Our priority in the sketching was to make sure that the solution was scalable and intuitive to use.

sketch

Prototype

The main page of the dashboard allows the nurses to view the live data, start an operation to be stored and load variety of sensors from any room in the hospital. From this view they can access the archive of all previous operations.

The archive page allows nurses to access the previous surgical events and compare them to each other.

The compare view allows the nurse to compare the different operations in different rooms to find any correlations between them hence finding the most suitable conditions

1. Main page of the dashboard

2. Archive page

3. Compare data from different operations

Final Delivery

Below you can see a number of screenshots showing the dashboard that is used for displaying information about the sensor data. In the first picture, two graphs of temperature and light are seen, each one having a different colour (selected by the user) to improve the overall user experience. In the second picture an overview of a specific surgery can be seen, with all the required information (Doctor, Patient, Room, Rating etc) where the user can understand how the procedure went in general. In the third pictuure, the user has to enter all the information required to start an event and in the fourth picture a list of the archived data can be seen with the option to download each one in an xml form.

Number of graphs displaying sensor data

Overview, showing key details of the surgery

Start an event for a specific patient

List of past operations

References

http://www.j6design.com.au/6-principles-of-design/?fbclid=IwAR0zHQy4iCq0sDv1vRrSi8isp0SYVR6EOO9XFX-fJTXok60LFKjVhytcj40