Phone Unlocking

An exploration into different methods of unlocking phones, using multi-touch and sensor based input.

CPSC 581 - Human Computer Interaction II
University of Calgary, Fall 2023

Ariel Lin, Britney Phan, Alokik Kinra, Yvonne Ng

Finger Hopscotch

A lock screen based on the infamous playground game, with a modern twist.

Live Demo

Source Code

Tree Shaking

A lock screen that incorporates shaking your phone to get the correct number of leaves.

Live Demo

Source Code

Video Demo

Concept Sketches

My concept sketches were mainly derived from real world objects, since I found myself wanting to mimic their overall experience and feel. And so, I tried to imitate things that I found fun already.

After iterating through a few ideas, I realized that the question I aimed to answer was really whether or not we could re-create certain skills with a phone. Some were certainly easier than others, like flipping pancakes. But taking this and going beyond it to make something more, like using AI for image manipulation was another idea I touched on briefly, and would have liked to explore more.

Touch Based

Sensor Based

Refined Sketches

Below are the refined sketches for the two following ideas:

Finger Hopscotch
Tree Shaking

My biggest takeaway from these was that the medium of a phone itself is actually quite limiting, despite the ability to track GPS, movement, and orientation. Practicality became a large inconvenience as well - as fun as it would be to sing or signal hand gestures to unlock your phone, I couldn't find myself wanting to explore these ideas because of the actual use cases in which you'd need to unlock it.

Final Design & Implementation

HTML, CSS, and JavaScript were used to implement these projects on Glitch using the layouts shown above. Both have been tested and confirmed working on iOS and Android, though some minor scaling issues may occur depending on the device.

The passcodes are hardcoded as well, but given the timeline of this project it was a necessary sacrifice. Overall, both the projects feel as if they could use a bit "more," but that could be due to the limitation of the phone itself - hopefully we can expand on this in the future!

Contribution

I was mainly the creative lead on this project, as both "Finger Hopscotch" and "Tree Shaking" were my own concepts. Code wise, I did the final testing across multiple platforms for both interfaces. I made minor adjustments as needed, to functions like scaling and mobile web app compatibility. I also recorded all of the footage and edited it together to create the demo video. In addition, I was responsible for the additional assets, like the thumbnails, gifs, and banners that represent the project.