Interaction Design: Rise and Smile // Face Detection Powered Alarm Clock
Team Size: 1 person
Time Period: 3 weeks
Role: Prototyper/Mobile Application Developer
Tools and Libraries: Android Studio, Google Play Services (for face detection)
GUI Programming Concepts: Input devices, event handling, model-view-presenter for Android
For the heavier sleepers out there, alarm clocks that are harder to turn off exist. From math problems to intense shaking to taking a picture of a specific part of the house, these alarm clocks require users to do more work to really wake them up in the morning. My take uses face detection to force users to open their eyes for a period of time in order for them to turn the alarm clock off.
This was a final requirement for Software Structures for User Interfaces, a core subject I took when I was completing my Master’s degree in Human-Computer Interaction from Carnegie Mellon University. Parts of the code from the googly-eyes sample were used in this project.
Problem Space
I’m the type of person who struggles with waking up in the morning. I have this tendency of silencing my alarm clock in a matter of seconds then falling back to sleep immediately. If I wanted to actually get out of bed, I needed find a way to keep myself awake longer. And that’s when it hit me.
What’s a sure way of keeping me awake?
Opening my eyes.
What’s a good way of keeping my eyes open?
Requiring me to open my eyes in order to turn off the alarm clock.
How can I do that?
Face detection.
Solution
An alarm clock that wakes you up by using face detection to force you to keep your eyes open. Sounds crazy? What if I told you that it also takes snapshots of you while you struggle to wake up, keeping them hostage and potentially posting them to social media (with the hashtag #wokeuplikethis, of course) if you hit snooze or fail to wake up? Let’s see if that doesn’t make you want to wake up.
Motivation
I am not a morning person. I tend to be my most productive during the night when it’s all dark and quiet and peaceful. Because of this, I am no stranger to sleep deprivation and difficulties with waking up early in the morning.
If you’re anything like me, just having one alarm isn’t probably enough since you’ve already formed the habit of turning it off in less than 2 seconds and falling back to sleep immediately. As I’ve found, the solution to this would be to keep yourself awake for a longer time by making it harder to turn your alarm off. Some alarm clocks achieve this by having you solve math problems. I wanted to take it to the next level.
Implementation
Interaction Techniques
Interaction techniques are software-level tricks that GUI designers use to take a new spin on an existing input device. An example of this would be how the Swype keyboard enhances touchscreen text input with its gesture typing — it’s using the same touchscreen but it can be significantly faster to type on.
In my case, I used face detection as my interaction technique and the front facing camera as my input device. By tracking the user’s eye, I can determine if he is falling back to sleep or not and can react accordingly. If his eyes are open, that means he’s awake so I lower the volume and start the countdown timer. If his eyes are closed or if his face is missing, I reset the volume and timer back to 100%.
Finite State Machine
My interaction technique involved handling 3 states: open eyes, closed eyes, and face missing. Like any UI component, it’s best to create a finite state machine to make it easier to handle input. Mine ended up looking like this:
I used this finite state machine to determine when to send out input events, that is, whenever there is a state transition.
Prototype
The app in itself shouldn’t be too complicated to use: just point your camera to your face (which happens intuitively when you check your phone to turn off an alarm) and keep your eyes open.
Testing Against Neilsen’s Heuristics
The initial prototype I made had two circular rings that represent the volume level and “awakeness” level. There was clear visibility of system status, because blinking clearly changed something and the feedback was instant. What was missing was a match between system and the real world. I needed to make it clear that one ring affects volume level and the other ring reacts to eyes opening and closing.
Final Prototype
And so the final prototype had an eye icon that would change whenever the user’s eyes would open/close, with the appropriate countdown ring surrounding it. The other countdown ring had a sound icon that would change depending on how loud the alarm was, with the icon covering three loudness levels.
