"The Ultimate Home Notification System" - IP: Proxemics
Developed by Christian Salvador
Description
Have you found yourself often unintentionally ignoring notifications or maybe you planned to go back to that notification and end up forgetting? Perhaps phone notifications aren't grabbing your attention anymore? I introduce the "Ultimate Home Notification System" that implements a big interactive display right inside your home so that you won't miss important notifications by accident!
This project utilizes the js-aruco2 to represent users as markers, made with his marker creator, which the camera can detect.
My proxemics project utilizes 3 proxemics: Distance, orientation and identity.
For distance and orientation, a blank screen will display when the owner is either not present or not gazing in the direction of the display, and there is no new notifications. A glowing red screen will appear when new notifications appear but the owner is still not present or not gazing. When the owner does gaze towards the screen at a far enough distance, it will bring them to a homescreen showing which apps have new notifications via a red glow and badge, as well as a reminders list that directly lists out items on the home screen. When the owner gazes at an app and steps closer, the display will show a list of new notifications for that app specifically. The owner can then interact with the display and remove notifications by tapping on them. To exit the notifications list, the owner simply needs to step back.
For identity, when a second person that isn't the owner is detected when the owner is not present, the blank screen will not change. However, if the owner is currently interacting with the display and a second person appears, a privacy screen will be put up instead. There are two ways to clear the privacy screen. The first method is simply having the second person leave. The second method is the owner simply tapping on the privacy screen with the second person present to override the screen. The privacy screen will remain overridden until the second person leaves. This means the privacy screen will reappear if the second person re-enters the view.
The application can be accessed using this URL: https://581-individual-proxemic.glitch.me/
10 Concept Sketches
For my 10 concept sketches, I began sketching simple ideas based on the problems that were given to us for our interface to: Turn a non-smart object into a "smart" object, be a stationary display that solves a problem in our home, or be an application that helps support a multi-person in-person situation
Below are my sketches that contributed to the end product of my interface. The first sketch is for a "Proxemic Discord Display" which was the original idea for my Notification System. It is essentially what my current Notification System is but with more specific functions built around Discord. This is where the second sketch expands on that idea and is what I settled to be my final product. Instead of dealing with Discord notifications exclusively, it deals with any notification for any app of your choosing, making its use cases a little less niche and helpful in terms of catching people's attention.
I resonated the most with the idea of a notification system as it is a bit of a problem in my own life. I often find myself opening a notification and reading it on my phone and planning to get back to it later, but I end up forgetting anyways. I also miss notifications on my phone because either I don't feel the vibration or don't have my phone on me. The reason for Discord being the initial focus was that I do use Discord frequently but do miss notifications from time to time as well.
Sketch #10: Ultimate Notification System
Below are the rest of the 10 concept sketches I had created. This carousel can be scrolled horizontally.
Sketch #2: Smart Window
Sketch #3: Multi-person Auto Translater
Sketch #4: Auto Balancing Party Stereo System
Sketch #5: Dynamic Room Lighting
Sketch #6: Smart Room Heater
Sketch #7: Smart Desk
Sketch #8: Smart Wayfinding Sign
Sketch #9: Smart Garden Mobile Interface
Storyboard
Here is a drawn out storyboard for the interactions in my proxemics project. I have also provided simple explanations of each frame in text.
- Frame 1: Owner is not gazing or is not present. No new notifications.
- Frame 2: Owner is not gazing or is not present. There are new notifications. Screen glows red.
- Frame 3: Owner is gazing but far. Homescreen displays.
- Frame 4: Owner gazes at app and approaches display. Gazed app expands.
- Frame 5: Owner sees list of notifications displayed.
- Frame 6: Owner can interact with notifications and remove them by tapping.
- Frame 7: Owner backs up. Homescreen reappears.
- Frame 8: Second person present. Privacy screen activates.
- Frame 9: Second person present. Owner taps screen to deactivate privacy screen.
Proxemics Storyboard - Click to enlarge
Final Product Reflection
My Contribution
I mainly modified and added onto the markers project supplied by Terrance Mok, the instructor, which can be seen in the Read Me file in my source code below. Functionality such as gaze, UI design, and connection between UI and marker functionality was done by me.
Objective
I believe my interface fits well within the objective of the assignment. I have developed a notification system that solves the problem of missing notifications using a huge wall mounted display in your home. This also utilizes 3 proxemics discussed in class, those being distance, orientation, and identity. My interface makes sure the proxemics are used appropriately. I thought identity would be a great use for privacy since you don't want just anybody seeing your notifications. Distance and orientation being used to navigate the interface was also something I thought worked well.
What Could Have Been
If time had permitted it I would have polished the UI animations and design, as I feel like the UI is quite basic. Furthermore, I could have added more app-specific functionality like my "Proxemic Discord Display" which allowed specific Discord functions and information to be shown, but I would be doing this for every app available on my interface. This would have been too much for the time I had and I decided to go the simple route first and see if I could implement in the end which I was not able to do unfortunately.
What Worked and What Didn't
What worked was the use of markers for my project. They worked really well for what I needed to do and was straight forward to work with to get gaze functionality working on my end. I also believe the proxemics I used for my display fit well with the functionality of the interface.
However, in terms of what didn't work, I think working primarily with CSS, HTML, and JavaScript, and without something like Ionic or React, made UI design a bit of a hassle to work with and slowed down the progress I was making with my interface. I initially wanted to make different color glows for notifications but I was unable to get the animations to work well dynamically and stuck with the generic red glow in the end.
Source Code - Glitch
https://glitch.com/edit/#!/581-individual-proxemic?path=README.md%3A1%3A0