p5.js prototypes
These two prototypes were made to test the mechanics of some UI elements, part of a school project during my first semester at the interaction design program at Umeå Institute of Design. The project was about healthcare patient monitors.
Timeline
This features allows nurses and doctors to go back in time and see patient numerics in the past so they can troubleshoot abnormal events after the fact. The parameters could for example be blood pressure or blood saturation. I wanted to explore if this could be done intuitively with one hand using only the mouse.
Test prototype (require mouse)
LEFT CLICK:
SPACE:
C:
MIDDLE CLICK + DRAG:
SCROLL:
Position cursor (should display value at that time).
Start/stop progress through time
Toggle colors/construction lines
Pan across time
Zoom
Scroll map
This is a supporting element of a birds-eye map of the clinic. This element indicates how zoomed out you are (middle filled circle), how zoomed out you can go (outer ring) and how zoomed you have to go to view where the closest nurse or doctor is (green ring).
Test prototype (require mouse)
SCROLL:
Zoom
See more
The full project can be viewed at Eonbi Hong’s website (who is also my girlfriend ❤️).
p5.js prototypes
These two prototypes were made to test the mechanics of some UI elements, part of a school project during my first semester at the interaction design program at Umeå Institute of Design. The project was about healthcare patient monitors.
Timeline
This features allows nurses and doctors to go back in time and see patient numerics in the past so they can troubleshoot abnormal events after the fact. The parameters could for example be blood pressure or blood saturation. I wanted to explore if this could be done intuitively with one hand using only the mouse.
Test prototype (require mouse)
LEFT CLICK:
SPACE:
C:
MIDDLE CLICK + DRAG:
SCROLL:
Position cursor (should display value at that time).
Start/stop progress through time
Toggle colors/construction lines
Pan across time
Zoom
Scroll map
This is a supporting element of a birds-eye map of the clinic. This element indicates how zoomed out you are (middle filled circle), how zoomed out you can go (outer ring) and how zoomed you have to go to view where the closest nurse or doctor is (green ring).
Test prototype (require mouse)
SCROLL:
Zoom
See more
The full project can be viewed at Eonbi Hong’s website (who is also my girlfriend ❤️).