Project 1
Potion unlock
and
Compass unlock
Fernando Bagtas
Maha Asim
Cristhian Sotelo Plazz
The Task
Sketch, design, and implement two new interfaces that provides an alternate way to unlocking a mobile phone. One using touch gestures and one using sensor inputs.
Our sensor-based interaction: Compass Unlock
Our gesture-based unlock: Potion Unlock
My Rough Sketches
For my initial sketches, I did 4 sensor prototypes and 6 touch prototypes. I explored using sensors such as the gyroscope, the accelerometer, the microphone, and the camera for different interactions. For the touch-based ones, I tried to explore more game-like unlocks such as rhythm games and memorization; and also educative ones such as writing kanji to unlock.
(Hover over or click the picture to see a description)
Refined Sketches
For the refined sketches, we all decided to refine one touch prototype and one sensor prototype each. I decided to refine more on the directional unlock and the DDR unlock because they proved to be the ones that I liked the most out of the ten, and also these two were the ones that I got the most feedback on. The directional unlock in particular was one where I got the suggestion of using certain key places that the user alone will know and point it at the direction of that place; and with that, I decided to add that and iterate on it. I also got some feedback from the DDR unlock where, like the directional unlock, the user would set the condition for unlocking the phone. The user would instead set the pattern and there would be no arrows falling down, it will just be the 4 buttons and it will be up to the user to input the correct pattern. Another would be to use a slide mechanic instead of buttons.
Here are some of the different designs that me and my team were able to come up with.
Final Touch-based interaction: Potion Unlock
Implementation: developed in Xcode for iPhone, done by Cristhian.
- Partial circular slider with 2 handles that the user can move around to adjust the colours.
- Test tube in the middle that contains mixture of RGB colour, it changes as the user adjusts the handles.
- Unlock button at the bottom of screen for user to finish mixture.
Interactions:
Unlock button outcomes:
- If the mixture is incorrect test tube glows until a red 'x' appears and the tube explodes.
- If the mixture is correct a checkmark appears and then the home screen.
Source code here.
Final Sensor-based interaction: Compass Unlock
Implementation: developed in Android Studio using Java. Done by me and Maha
-
Rotating compass with a heading number in the middle of it to have an accurate reading
-
Image of place that the user knows and has to point to
-
Unlock button at the bottom of screen for user to check if direction is correct.
-
If wrong, a red screen will appear to tell the user to try again
-
If correct, a green screen will appear telling the user it's correct
-
Interactions:
Unlock button outcomes:
-
If wrong, a red screen will appear to tell the user to try again
-
If correct, a green screen will appear telling the user it's correct
Source code here.